{"_id":"@8space-lab/design-system","_rev":"5-419365462fee52188e3256bc3c668caa","name":"@8space-lab/design-system","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.1":{"name":"@8space-lab/design-system","version":"0.1.1","_id":"@8space-lab/design-system@0.1.1","maintainers":[{"name":"8space","email":"moriya@8space.kr"}],"dist":{"shasum":"1ca6a13d76aaac5e45e8c597afef746ba3f3caba","tarball":"https://registry.npmjs.org/@8space-lab/design-system/-/design-system-0.1.1.tgz","fileCount":143,"integrity":"sha512-rc5KIL4hPiLJvutbkhS3tA/fQb1H4V3M9EcWLZ+RL0/30wido7j9CT0+oGeqVbXTEsW4w4MW3TS0Aosor85C3g==","signatures":[{"sig":"MEUCIAIyenz/nXNm8HRXrcOIgON3z4ljOhNfydn3J2DIGgFbAiEAquRh/YP1tQbz8tIXcemJ9YZLORci+TF00NL0ThfPrBg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":461047},"type":"module","engines":{"node":">=20.19.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./tokens":{"types":"./dist/tokens.d.ts","import":"./dist/tokens.js"},"./styles.css":"./dist/styles/index.css","./styles/font.css":"./dist/styles/font.css","./styles/tokens.css":"./dist/styles/tokens.css","./styles/components.css":"./dist/styles/components.css"},"private":false,"scripts":{"build":"npm run build:js && npm run build:types && npm run build:styles","check":"tsc --noEmit -p tsconfig.json","clean":"rm -rf dist storybook-static","build:js":"vite build","storybook":"storybook dev -p 6006 --host 127.0.0.1","build:types":"tsc -p tsconfig.build.json","build:styles":"mkdir -p dist/styles && cp src/styles/*.css dist/styles/","test:storybook":"playwright test","build-storybook":"storybook build && node ./scripts/patch-storybook-html.mjs","test:storybook:a11y":"playwright test tests/storybook/storybook-a11y.spec.ts","test:storybook:headed":"playwright test --headed","test:storybook:visual":"playwright test tests/storybook/storybook-visual.spec.ts","test:storybook:visual:update":"playwright test tests/storybook/storybook-visual.spec.ts --update-snapshots"},"_npmUser":{"name":"8space","email":"moriya@8space.kr"},"_npmVersion":"11.5.1","description":"8SPACE Design System is the shared visual and interaction language for 8SPACE products. It starts from the 8SPACE logo color, `#006FF4`, and turns it into reusable tokens, React components, layout rules, and component conventions.","directories":{},"sideEffects":["./src/styles/*.css","./dist/styles/*.css"],"_nodeVersion":"24.6.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","react":"^19.2.5","react-dom":"^19.2.5","storybook":"^10.3.5","typescript":"^6.0.3","@types/react":"^19.2.14","@playwright/test":"^1.59.1","@storybook/react":"^10.3.5","@types/react-dom":"^19.2.3","@axe-core/playwright":"^4.11.2","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.5","@storybook/react-vite":"^10.3.5"},"peerDependencies":{"react":">=18.2.0 <20","react-dom":">=18.2.0 <20"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.1_1777141272312_0.8969126063316863","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@8space-lab/design-system","version":"0.1.2","_id":"@8space-lab/design-system@0.1.2","maintainers":[{"name":"8space","email":"moriya@8space.kr"}],"dist":{"shasum":"624876c892107f67132cd8b81ac0dd473a2a87a8","tarball":"https://registry.npmjs.org/@8space-lab/design-system/-/design-system-0.1.2.tgz","fileCount":156,"integrity":"sha512-ax1XynyBmJykcdan0Dshuqwf+AgPwTKRy58Mo7mULId1PXaBinAtATO9riExyrxg6D6u2zRQx4FKcQLyLA5A3A==","signatures":[{"sig":"MEQCID1Z/Jv2bqRSLzUI9nnCW3uKpwuZ/O9IKZNI66Lv++UuAiBX3bMRsuYjfdUIj1XbNAzuekTrLXI5wfz64ozr1b15RA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":507466},"type":"module","engines":{"node":">=20.19.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./tokens":{"types":"./dist/tokens.d.ts","import":"./dist/tokens.js"},"./styles.css":"./dist/styles/index.css","./styles/font.css":"./dist/styles/font.css","./styles/tokens.css":"./dist/styles/tokens.css","./styles/components.css":"./dist/styles/components.css"},"private":false,"scripts":{"build":"npm run build:js && npm run build:types && npm run build:styles","check":"tsc --noEmit -p tsconfig.json","clean":"rm -rf dist storybook-static","build:js":"vite build","storybook":"storybook dev -p 6006 --host 127.0.0.1","build:types":"tsc -p tsconfig.build.json","build:styles":"mkdir -p dist/styles && cp src/styles/*.css dist/styles/","test:storybook":"playwright test","build-storybook":"storybook build && node ./scripts/patch-storybook-html.mjs","test:storybook:a11y":"playwright test tests/storybook/storybook-a11y.spec.ts","test:storybook:headed":"playwright test --headed","test:storybook:visual":"playwright test tests/storybook/storybook-visual.spec.ts","test:storybook:visual:update":"playwright test tests/storybook/storybook-visual.spec.ts --update-snapshots"},"_npmUser":{"name":"8space","email":"moriya@8space.kr"},"_npmVersion":"11.5.1","description":"8SPACE Design System is the shared visual and interaction language for 8SPACE products. It starts from the 8SPACE logo color, `#006FF4`, and turns it into reusable tokens, React components, layout rules, and component conventions.","directories":{},"sideEffects":["./src/styles/*.css","./dist/styles/*.css"],"_nodeVersion":"24.6.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","react":"^19.2.5","react-dom":"^19.2.5","storybook":"^10.3.5","typescript":"^6.0.3","@types/react":"^19.2.14","@playwright/test":"^1.59.1","@storybook/react":"^10.3.5","@types/react-dom":"^19.2.3","@axe-core/playwright":"^4.11.2","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.5","@storybook/react-vite":"^10.3.5"},"peerDependencies":{"react":">=18.2.0 <20","react-dom":">=18.2.0 <20"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.2_1777274128233_0.9643029584715685","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@8space-lab/design-system","version":"0.1.3","_id":"@8space-lab/design-system@0.1.3","maintainers":[{"name":"8space","email":"moriya@8space.kr"}],"dist":{"shasum":"dcbc05a1d35172f6441a04b76febec396303eaa0","tarball":"https://registry.npmjs.org/@8space-lab/design-system/-/design-system-0.1.3.tgz","fileCount":156,"integrity":"sha512-uK6ca8GSUfqjemhZesNh3KC2FAkeOOSO2WSV1tIOrPlE0N9LahiDT/fSubTc72Kq275yMwkCZH8DSyFpRn4k6g==","signatures":[{"sig":"MEUCIEibAzcdFYYGpwiTFi0jDhqG0iVAMK2gkKy/eexL6s4lAiEAtBeVX9GRoPVw7cRmnVyxbxp8cMEzs8Brm18J0q0mvVs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":507435},"type":"module","engines":{"node":">=20.19.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./tokens":{"types":"./dist/tokens.d.ts","import":"./dist/tokens.js"},"./styles.css":"./dist/styles/index.css","./styles/font.css":"./dist/styles/font.css","./styles/tokens.css":"./dist/styles/tokens.css","./styles/components.css":"./dist/styles/components.css"},"private":false,"scripts":{"build":"npm run build:js && npm run build:types && npm run build:styles","check":"tsc --noEmit -p tsconfig.json","clean":"rm -rf dist storybook-static","build:js":"vite build","storybook":"storybook dev -p 6006 --host 127.0.0.1","build:types":"tsc -p tsconfig.build.json","build:styles":"mkdir -p dist/styles && cp src/styles/*.css dist/styles/","test:storybook":"playwright test","build-storybook":"storybook build && node ./scripts/patch-storybook-html.mjs","test:storybook:a11y":"playwright test tests/storybook/storybook-a11y.spec.ts","test:storybook:headed":"playwright test --headed","test:storybook:visual":"playwright test tests/storybook/storybook-visual.spec.ts","test:storybook:visual:update":"playwright test tests/storybook/storybook-visual.spec.ts --update-snapshots"},"_npmUser":{"name":"8space","email":"moriya@8space.kr"},"_npmVersion":"11.5.1","description":"8SPACE Design System is the shared visual and interaction language for 8SPACE products. It starts from the 8SPACE logo color, `#006FF4`, and turns it into reusable tokens, React components, layout rules, and component conventions.","directories":{},"sideEffects":["./src/styles/*.css","./dist/styles/*.css"],"_nodeVersion":"24.6.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","react":"^19.2.5","react-dom":"^19.2.5","storybook":"^10.3.5","typescript":"^6.0.3","@types/react":"^19.2.14","@playwright/test":"^1.59.1","@storybook/react":"^10.3.5","@types/react-dom":"^19.2.3","@axe-core/playwright":"^4.11.2","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.5","@storybook/react-vite":"^10.3.5"},"peerDependencies":{"react":">=18.2.0 <20","react-dom":">=18.2.0 <20"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.3_1777277161061_0.6516018758595272","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@8space-lab/design-system","version":"0.1.4","_id":"@8space-lab/design-system@0.1.4","maintainers":[{"name":"8space","email":"moriya@8space.kr"}],"dist":{"shasum":"0714140e9e2bfa1d058c0ed15bcfbce51ba7ab56","tarball":"https://registry.npmjs.org/@8space-lab/design-system/-/design-system-0.1.4.tgz","fileCount":165,"integrity":"sha512-BBD//epM6CprdAAJyLifqfSuCHmmgeG+6ZJes24xRMdSjtzExJBeoU/fUdlm7qiMh/7087ZVHmOrZ2nwzBbkhQ==","signatures":[{"sig":"MEYCIQCS7ikemIjmaR9ZZSX/WYhnkK5JQ1t9hylDMSSiQauqSgIhAMXTPx/Nf+wqwu15BsLH1ZD2VGuuQHWfIaqW7EtfmUfW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":578588},"type":"module","engines":{"node":">=20.19.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./tokens":{"types":"./dist/tokens.d.ts","import":"./dist/tokens.js"},"./styles.css":"./dist/styles/index.css","./styles/font.css":"./dist/styles/font.css","./styles/tokens.css":"./dist/styles/tokens.css","./styles/components.css":"./dist/styles/components.css"},"private":false,"scripts":{"build":"npm run build:js && npm run build:types && npm run build:styles","check":"tsc --noEmit -p tsconfig.json","clean":"rm -rf dist storybook-static","build:js":"vite build","storybook":"storybook dev -p 6006 --host 127.0.0.1","build:types":"tsc -p tsconfig.build.json","build:styles":"mkdir -p dist/styles && cp src/styles/*.css dist/styles/","test:storybook":"playwright test","build-storybook":"storybook build && node ./scripts/patch-storybook-html.mjs","test:storybook:a11y":"playwright test tests/storybook/storybook-a11y.spec.ts","test:storybook:headed":"playwright test --headed","test:storybook:visual":"playwright test tests/storybook/storybook-visual.spec.ts","test:storybook:visual:update":"playwright test tests/storybook/storybook-visual.spec.ts --update-snapshots"},"_npmUser":{"name":"8space","email":"moriya@8space.kr"},"_npmVersion":"11.5.1","description":"8SPACE Design System is the shared visual and interaction language for 8SPACE products. It starts from the 8SPACE logo color, `#006FF4`, and turns it into reusable tokens, React components, layout rules, and component conventions.","directories":{},"sideEffects":["./src/styles/*.css","./dist/styles/*.css"],"_nodeVersion":"24.6.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","react":"^19.2.5","react-dom":"^19.2.5","storybook":"^10.3.5","typescript":"^6.0.3","@types/react":"^19.2.14","@playwright/test":"^1.59.1","@storybook/react":"^10.3.5","@types/react-dom":"^19.2.3","@axe-core/playwright":"^4.11.2","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.5","@storybook/react-vite":"^10.3.5"},"peerDependencies":{"react":">=18.2.0 <20","react-dom":">=18.2.0 <20"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.4_1779895256884_0.22332488722131982","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@8space-lab/design-system","version":"0.2.0","private":false,"publishConfig":{"access":"public"},"type":"module","sideEffects":["./src/styles/*.css","./dist/styles/*.css"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./tokens":{"types":"./dist/tokens.d.ts","import":"./dist/tokens.js"},"./styles.css":"./dist/styles/index.css","./styles/font.css":"./dist/styles/font.css","./styles/tokens.css":"./dist/styles/tokens.css","./styles/components.css":"./dist/styles/components.css"},"scripts":{"build":"npm run build:js && npm run build:types && npm run build:styles","build:js":"vite build","build:styles":"mkdir -p dist/styles && cp src/styles/*.css dist/styles/","build:types":"tsc -p tsconfig.build.json","check":"tsc --noEmit -p tsconfig.json","storybook":"storybook dev -p 6006 --host 127.0.0.1","build-storybook":"storybook build && node ./scripts/patch-storybook-html.mjs","clean":"rm -rf dist storybook-static","test:storybook":"playwright test","test:storybook:headed":"playwright test --headed","test:storybook:a11y":"playwright test tests/storybook/storybook-a11y.spec.ts","test:storybook:visual":"playwright test tests/storybook/storybook-visual.spec.ts","test:storybook:visual:update":"playwright test tests/storybook/storybook-visual.spec.ts --update-snapshots"},"peerDependencies":{"react":">=18.2.0 <20","react-dom":">=18.2.0 <20"},"devDependencies":{"@axe-core/playwright":"^4.11.2","@playwright/test":"^1.59.1","@storybook/addon-docs":"^10.3.5","@storybook/react":"^10.3.5","@storybook/react-vite":"^10.3.5","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","react":"^19.2.5","react-dom":"^19.2.5","storybook":"^10.3.5","typescript":"^6.0.3","vite":"^8.0.10"},"engines":{"node":">=20.19.0"},"_id":"@8space-lab/design-system@0.2.0","description":"8SPACE Design System is the shared visual and interaction language for 8SPACE products. It starts from the 8SPACE logo color, `#006FF4`, and turns it into reusable tokens, React components, layout rules, and component conventions.","_nodeVersion":"24.6.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-sbBXw+uK3+kGxwyrn+DdxUqsuS0cIZpmO73oJFCTg5ox67xzWoBw/AF4I5hjxwNUj6W2ajqwn7ObBROv88mJNA==","shasum":"6f3a88bbe8a533954ad996fe449f9f6003d95fb8","tarball":"https://registry.npmjs.org/@8space-lab/design-system/-/design-system-0.2.0.tgz","fileCount":265,"unpackedSize":742644,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDuQiplp42q60TZfpsx2kHiWfv7Gcn0GdwKy9Cneie67AIgLBEWonjPl22khclfo1he/B+GO2Uoszh0LJiyaBLhJO4="}]},"_npmUser":{"name":"8space","email":"moriya@8space.kr"},"directories":{},"maintainers":[{"name":"8space","email":"moriya@8space.kr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.2.0_1780298923580_0.8271772166635349"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-25T18:21:12.106Z","modified":"2026-06-01T07:28:43.913Z","0.1.1":"2026-04-25T18:21:12.504Z","0.1.2":"2026-04-27T07:15:28.394Z","0.1.3":"2026-04-27T08:06:01.234Z","0.1.4":"2026-05-27T15:20:57.033Z","0.2.0":"2026-06-01T07:28:43.750Z"},"description":"8SPACE Design System is the shared visual and interaction language for 8SPACE products. It starts from the 8SPACE logo color, `#006FF4`, and turns it into reusable tokens, React components, layout rules, and component conventions.","maintainers":[{"name":"8space","email":"moriya@8space.kr"}],"readme":"# 8SPACE Design System\n\n8SPACE Design System is the shared visual and interaction language for 8SPACE products. It starts from the 8SPACE logo color, `#006FF4`, and turns it into reusable tokens, React components, layout rules, and component conventions.\n\n## Package\n\nThe package is scoped as `@8space-lab/design-system` and is structured for reusable React consumption.\n\n```tsx\nimport \"@8space-lab/design-system/styles.css\";\n// Optional prototype font loader. Prefer self-hosted fonts in production.\n// import \"@8space-lab/design-system/styles/font.css\";\nimport {\n  Avatar,\n  Badge,\n  Button,\n  ButtonLink,\n  Card,\n  Checkbox,\n  Chip,\n  Combobox,\n  DataTable,\n  Dialog,\n  DropdownMenu,\n  FormSection,\n  PageHeader,\n  Pagination,\n  Popover,\n  RadioGroup,\n  ResultSummary,\n  Select,\n  Surface,\n  Switch,\n  Textarea,\n  TextField,\n  Toast,\n  Tooltip,\n  Toolbar,\n  tokens,\n} from \"@8space-lab/design-system\";\n```\n\n```tsx\n<Card\n  eyebrow={<Badge variant=\"brand\" withDot>8SPACE</Badge>}\n  title=\"워크스페이스 시작\"\n  description=\"팀 설정과 자동화를 한 곳에서 관리합니다.\"\n  action={<Button>작업 시작</Button>}\n>\n  <Avatar name=\"김모리야\" />\n  <Chip tone=\"brand\" appearance=\"solid\" selected>활성 프로젝트</Chip>\n</Card>\n\n<Surface padding=\"lg\" elevation=\"raised\">\n  <Badge variant=\"brand\" withDot>8SPACE</Badge>\n  <TextField label=\"워크스페이스 이름\" placeholder=\"예: 8SPACE Design\" />\n  <Checkbox label=\"팀 멤버에게 알림 보내기\" />\n  <Switch label=\"자동 동기화\" />\n  <Button>작업 시작</Button>\n  <ButtonLink href=\"/docs\" variant=\"secondary\">문서 보기</ButtonLink>\n</Surface>\n```\n\n## Current Foundation\n\n- Brand color extracted from logo: `#006FF4`\n- Visual direction: geometric, flat, precise, product-grade\n- Default surface: light mode with cool neutral backgrounds\n- Motion principle: fast, tactile, and restrained\n- Typography direction: `8SPACE Neo`, a NanumSquare Neo-based Korean-first UI font direction, with numeric/system labels in monospace\n\n## Files\n\n- [docs/brand-foundation.md](docs/brand-foundation.md): brand direction, palette, typography, spacing, motion, and accessibility rules\n- [docs/component-guidelines.md](docs/component-guidelines.md): component variants, states, and implementation rules\n- [docs/font-system.md](docs/font-system.md): 8SPACE Neo font direction and loading guidance\n- [docs/benchmarking.md](docs/benchmarking.md): benchmarking notes from Toss, LINE, NAVER, Kakao, KakaoBank, and Storybook references\n- [docs/image-generation-guidance.md](docs/image-generation-guidance.md): where GPT Image exploration is useful and where it should not define canonical UI\n- [docs/usage.md](docs/usage.md): package usage, component examples, and verification commands\n- [docs/consumer-guardrails.md](docs/consumer-guardrails.md): update, rollback, and new-component guardrails for consuming projects\n- [docs/storybook-docs-template.md](docs/storybook-docs-template.md): required structure for component Storybook docs\n- [tokens/8space.tokens.json](tokens/8space.tokens.json): portable design token source\n- [assets/logo.png](assets/logo.png): copied logo asset used as the initial brand reference\n- [assets/logo-mark.png](assets/logo-mark.png): cropped symbol for compact navigation and icon contexts\n- [examples/brand-preview.html](examples/brand-preview.html): static visual specimen for reviewing the foundation\n- [src/styles/tokens.css](src/styles/tokens.css): CSS custom properties for product surfaces\n- [src/styles/font.css](src/styles/font.css): optional NanumSquare Neo prototype font loader\n- [src/styles/components.css](src/styles/components.css): component styles driven by CSS custom properties\n- [src/tokens.ts](src/tokens.ts): TypeScript token object for app integration\n- [src/components](src/components): React component source and Storybook stories\n- [src/index.ts](src/index.ts): package export entry\n- [.storybook](.storybook): Storybook configuration and preview setup\n\n## Scripts\n\n```bash\nnpm run check\nnpm run build\nnpm run storybook\nnpm run build-storybook\nnpm run test:storybook\nnpm run test:storybook:a11y\nnpm run test:storybook:visual\n```\n\n## CSS Entry Points\n\n```css\n@import \"@8space-lab/design-system/styles.css\";\n```\n\n```css\n.surface {\n  color: var(--8s-color-text-primary);\n  background: var(--8s-color-bg-canvas);\n}\n```\n\n## Storybook\n\nStorybook is configured with React + Vite. Component stories live next to their component source under `src/components/**`.\n\n```bash\nnpm run storybook\n```\n\nRun the Playwright smoke suite before changing interactive stories or accessibility contracts.\n\n```bash\nnpm run test:storybook\n```\n\nThe suite covers the current critical Storybook flows: `DataTable` pagination and row selection labels, `Combobox` disabled option behavior, `Pagination` result summaries, and the Korean docs shell translation hints.\n\n## Current Product Layer\n\n- `PageHeader`, `Toolbar`, and `Breadcrumb` standardize list/detail page chrome.\n- `FormSection` standardizes settings and edit forms.\n- `DataTable`, `Pagination`, and `ResultSummary` cover common admin list screens.\n- `Combobox` covers searchable single-select fields without overloading native `Select`.\n\n## Next Steps\n\n1. Add automated accessibility checks for component stories.\n2. Add integrated list/settings page composition examples.\n3. Evaluate v2 scope for async or multi-select `Combobox`.\n","readmeFilename":"README.md"}