{"_id":"@bayzat_design/design-system","_rev":"3-6d4f9ed6bb93a7c9f2760ed9490dcd7e","name":"@bayzat_design/design-system","dist-tags":{"latest":"0.3.1"},"versions":{"0.2.0":{"name":"@bayzat_design/design-system","version":"0.2.0","keywords":["bayzat","design-system","material-design-3","react","components","ui"],"license":"MIT","_id":"@bayzat_design/design-system@0.2.0","maintainers":[{"name":"shiran_sanjeewa","email":"hello@shiransanjeewa.com"}],"dist":{"shasum":"0cfbc7eda0ee2830f8b94294a9942d0970fe0c60","tarball":"https://registry.npmjs.org/@bayzat_design/design-system/-/design-system-0.2.0.tgz","fileCount":346,"integrity":"sha512-KGW97ElbKrSjylBi48wPZJrOkVIqlZN74BVG9hRtYHWR6flPhTk4x+Gokly3iXXAXW6h2vhk+69YAi7h1vZeBw==","signatures":[{"sig":"MEQCIBFjkX/nendpxgZpdgZz2FTtmC+YooqhIy3bzVH4gcIdAiAl0RQgujECuFqq/PmHZiJEmnbRrzVND6bUXJ8ZkWZuhA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18562545},"main":"./dist/bayzat-design-system.cjs.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bayzat-design-system.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bayzat-design-system.es.js","require":"./dist/bayzat-design-system.cjs.js"},"./theme":"./dist/design-system.css"},"gitHead":"5fcb69f1ddd90adb3808f3a3f81ddb1890fe7241","scripts":{"dev":"vite","lint":"eslint src/","test":"vitest","build":"vite build","preview":"vite preview","release":"changeset publish --provenance --access public","version":"changeset version","lint:fix":"eslint src/ --fix","changeset":"changeset","storybook":"storybook dev -p 6006","test:a11y":"vitest --project unit a11y.test","test:unit":"vitest --project unit","icons:scan":"tsx scripts/scan-icon-usage.ts","type-check":"tsc --noEmit","figma:parse":"npx figma connect parse","icons:fetch":"tsx scripts/fetch-icons.ts","test:visual":"vitest --project visual","figma:connect":"npx figma connect publish","icons:generate":"tsx scripts/generate-icon-components.ts","test:storybook":"vitest --project storybook","build-storybook":"tsx scripts/fetch-streamline-catalog.ts && storybook build"},"_npmUser":{"name":"shiran_sanjeewa","email":"hello@shiransanjeewa.com"},"_npmVersion":"10.9.2","description":"Material Design 3 component library for Bayzat applications","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.17.0","dependencies":{"lit":"^3.2.1","recharts":"^3.7.0","@lit/react":"^1.0.6","@tiptap/pm":"^3.19.0","@material/web":"^2.4.1","@tiptap/react":"^3.19.0","react-arborist":"^3.4.3","@floating-ui/dom":"^1.7.5","react-day-picker":"^9.13.2","@tiptap/starter-kit":"^3.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.0.0","vite":"^6.0.0","jsdom":"^28.1.0","react":"^18.3.0","dotenv":"^16.3.0","eslint":"^9.39.2","vitest":"^4.0.18","fast-glob":"^3.3.0","react-dom":"^18.3.0","storybook":"^10.2.8","playwright":"^1.58.2","typescript":"^5.6.0","vitest-axe":"^0.1.0","@types/react":"^18.3.0","react-window":"^1.8.10","@changesets/cli":"^2.29.8","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.0","node-html-parser":"^6.1.0","@figma/code-connect":"^1.3.13","@types/react-window":"^1.8.8","@vitest/coverage-v8":"^4.0.18","@vitejs/plugin-react":"^4.3.0","@storybook/addon-a11y":"^10.2.8","@storybook/addon-docs":"^10.2.8","@storybook/react-vite":"^10.2.8","@storybook/addon-vitest":"^10.2.8","@chromatic-com/storybook":"^5.0.1","@typescript-eslint/parser":"^8.55.0","@vitest/browser-playwright":"^4.0.18","@storybook/addon-onboarding":"^10.2.8","@typescript-eslint/eslint-plugin":"^8.55.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.2.0_1771328699480_0.8384077138145525","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@bayzat_design/design-system","version":"0.3.0","keywords":["bayzat","design-system","material-design-3","react","components","ui"],"license":"MIT","_id":"@bayzat_design/design-system@0.3.0","maintainers":[{"name":"shiran_sanjeewa","email":"hello@shiransanjeewa.com"}],"dist":{"shasum":"8affa374343cd4d43354e95058dd4c592527a9c6","tarball":"https://registry.npmjs.org/@bayzat_design/design-system/-/design-system-0.3.0.tgz","fileCount":357,"integrity":"sha512-akmjL2oxbGQy9PPtzNz8wxDd6/o5nJFGkDUPpGHtkc/nF9iSCs/yXkGll+R5XoI/FWIxwZP/P3GWHoHaxKYRXA==","signatures":[{"sig":"MEYCIQCCBUU8I4phsbrvaCaxrOOb7fXXBXs5WbL4C+24bbcFYgIhAPCyY9xlktxeIXwpNkr9hj1v8yqaj4HD6DIQFIkzpH40","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18823754},"main":"./dist/bayzat-design-system.cjs.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bayzat-design-system.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bayzat-design-system.es.js","require":"./dist/bayzat-design-system.cjs.js"},"./theme":"./dist/design-system.css"},"gitHead":"25f563243dcea23b5c8ed4b217452e4f0e5e66e9","scripts":{"dev":"vite","lint":"eslint src/","test":"vitest","build":"vite build","preview":"vite preview","release":"changeset publish --provenance --access public","version":"changeset version","lint:fix":"eslint src/ --fix","changeset":"changeset","storybook":"storybook dev -p 6006","test:a11y":"vitest --project unit a11y.test","test:unit":"vitest --project unit","icons:scan":"tsx scripts/scan-icon-usage.ts","type-check":"tsc --noEmit","figma:parse":"npx figma connect parse","icons:fetch":"tsx scripts/fetch-icons.ts","test:visual":"vitest --project visual","figma:connect":"npx figma connect publish","icons:generate":"tsx scripts/generate-icon-components.ts","test:storybook":"vitest --project storybook","build-storybook":"tsx scripts/fetch-streamline-catalog.ts && storybook build"},"_npmUser":{"name":"shiran_sanjeewa","email":"hello@shiransanjeewa.com"},"_npmVersion":"10.9.2","description":"Material Design 3 component library for Bayzat applications","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.17.0","dependencies":{"lit":"^3.2.1","recharts":"^3.7.0","@lit/react":"^1.0.6","@tiptap/pm":"^3.19.0","@material/web":"^2.4.1","@tiptap/react":"^3.19.0","react-arborist":"^3.4.3","@floating-ui/dom":"^1.7.5","react-day-picker":"^9.13.2","@tiptap/starter-kit":"^3.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.0.0","vite":"^6.0.0","jsdom":"^28.1.0","react":"^18.3.0","dotenv":"^16.3.0","eslint":"^9.39.2","vitest":"^4.0.18","fast-glob":"^3.3.0","react-dom":"^18.3.0","storybook":"^10.2.8","playwright":"^1.58.2","typescript":"^5.6.0","vitest-axe":"^0.1.0","@types/react":"^18.3.0","react-window":"^1.8.10","@changesets/cli":"^2.29.8","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.0","node-html-parser":"^6.1.0","@figma/code-connect":"^1.3.13","@types/react-window":"^1.8.8","@vitest/coverage-v8":"^4.0.18","@vitejs/plugin-react":"^4.3.0","@storybook/addon-a11y":"^10.2.8","@storybook/addon-docs":"^10.2.8","@storybook/react-vite":"^10.2.8","@storybook/addon-vitest":"^10.2.8","@chromatic-com/storybook":"^5.0.1","@typescript-eslint/parser":"^8.55.0","@vitest/browser-playwright":"^4.0.18","@storybook/addon-onboarding":"^10.2.8","@typescript-eslint/eslint-plugin":"^8.55.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.3.0_1771452151519_0.6191313049872431","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@bayzat_design/design-system","version":"0.3.1","description":"Material Design 3 component library for Bayzat applications","type":"module","main":"./dist/bayzat-design-system.cjs.js","module":"./dist/bayzat-design-system.es.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bayzat-design-system.es.js","require":"./dist/bayzat-design-system.cjs.js"},"./theme":"./dist/design-system.css"},"sideEffects":["*.css"],"publishConfig":{"access":"public"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"tsx scripts/fetch-streamline-catalog.ts && storybook build","type-check":"tsc --noEmit","lint":"eslint src/","lint:fix":"eslint src/ --fix","icons:scan":"tsx scripts/scan-icon-usage.ts","icons:fetch":"tsx scripts/fetch-icons.ts","icons:generate":"tsx scripts/generate-icon-components.ts","figma:connect":"npx figma connect publish","figma:parse":"npx figma connect parse","changeset":"changeset","version":"changeset version","release":"changeset publish --provenance --access public","test":"vitest","test:unit":"vitest --project unit","test:storybook":"vitest --project storybook","test:a11y":"vitest --project unit a11y.test","test:visual":"vitest --project visual"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@floating-ui/dom":"^1.7.5","@lit/react":"^1.0.6","@material/web":"^2.4.1","@tiptap/pm":"^3.19.0","@tiptap/react":"^3.19.0","@tiptap/starter-kit":"^3.19.0","lit":"^3.2.1","react-arborist":"^3.4.3","react-day-picker":"^9.13.2","recharts":"^3.7.0"},"devDependencies":{"@changesets/cli":"^2.29.8","@chromatic-com/storybook":"^5.0.1","@figma/code-connect":"^1.3.13","@storybook/addon-a11y":"^10.2.8","@storybook/addon-docs":"^10.2.8","@storybook/addon-onboarding":"^10.2.8","@storybook/addon-vitest":"^10.2.8","@storybook/react-vite":"^10.2.8","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@types/react-window":"^1.8.8","@typescript-eslint/eslint-plugin":"^8.55.0","@typescript-eslint/parser":"^8.55.0","@vitejs/plugin-react":"^4.3.0","@vitest/browser-playwright":"^4.0.18","@vitest/coverage-v8":"^4.0.18","dotenv":"^16.3.0","eslint":"^9.39.2","fast-glob":"^3.3.0","jsdom":"^28.1.0","node-html-parser":"^6.1.0","playwright":"^1.58.2","react":"^18.3.0","react-dom":"^18.3.0","react-window":"^1.8.10","storybook":"^10.2.8","tsx":"^4.0.0","typescript":"^5.6.0","vite":"^6.0.0","vite-plugin-dts":"^4.3.0","vitest":"^4.0.18","vitest-axe":"^0.1.0"},"keywords":["bayzat","design-system","material-design-3","react","components","ui"],"license":"MIT","_id":"@bayzat_design/design-system@0.3.1","gitHead":"73c5785acd4e2180e6f83c0cdcbed2c7e6cd0ac4","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-AnOe36eWX/0uUIn8PLQjfWRr2oCSeOceiz0g6yLOAnQLEWmX/qzQa1AgN/IU4xfEP0eAXqjdSXR/4ow6VJ8Pig==","shasum":"b3d4c5427b2d68642525474233f35d27335393a2","tarball":"https://registry.npmjs.org/@bayzat_design/design-system/-/design-system-0.3.1.tgz","fileCount":359,"unpackedSize":18832609,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDPnw0SD0S/n7OPi14f0ggpspPDp1S4X5UPSErq58zTPQIhANkONBlCuePa/HEF0lyGpqDM2/VWwgB++V1TOUBZF1cV"}]},"_npmUser":{"name":"shiran_sanjeewa","email":"hello@shiransanjeewa.com"},"directories":{},"maintainers":[{"name":"shiran_sanjeewa","email":"hello@shiransanjeewa.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.3.1_1771484443989_0.930558561087167"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-17T11:44:59.369Z","modified":"2026-02-19T07:00:44.392Z","0.2.0":"2026-02-17T11:44:59.832Z","0.3.0":"2026-02-18T22:02:31.790Z","0.3.1":"2026-02-19T07:00:44.281Z"},"license":"MIT","keywords":["bayzat","design-system","material-design-3","react","components","ui"],"description":"Material Design 3 component library for Bayzat applications","maintainers":[{"name":"shiran_sanjeewa","email":"hello@shiransanjeewa.com"}],"readme":"[![CI](https://github.com/bayzat/design-system/actions/workflows/ci.yml/badge.svg)](https://github.com/bayzat/design-system/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/@bayzat_design/design-system.svg)](https://www.npmjs.com/package/@bayzat_design/design-system)\n\n# @bayzat_design/design-system\n\n> Bayzat Design System -- React component library built on Material Design 3\n\nA comprehensive React UI library wrapping [Material Web Components](https://github.com/nicolo-ribaudo/material-web) with Bayzat brand theming. Ships with 80+ components, design tokens, and full TypeScript support.\n\n## Installation\n\n```bash\nnpm install @bayzat_design/design-system\n```\n\n**Requirements:** React 18 or 19, Node.js 18+\n\n## Quick Start\n\n```tsx\nimport '@bayzat_design/design-system/theme';\nimport { FilledButton } from '@bayzat_design/design-system';\n\nfunction App() {\n  return (\n    <FilledButton onClick={() => alert('Hello!')}>\n      Get Started\n    </FilledButton>\n  );\n}\n```\n\nThe theme import loads Bayzat brand colors, typography (DM Sans), and Material Design 3 tokens.\n\n## Components\n\n### Buttons\n`ElevatedButton` `FilledButton` `FilledTonalButton` `OutlinedButton` `TextButton` `IconButton` `FilledIconButton` `FilledTonalIconButton` `OutlinedIconButton` `Fab` `BrandedFab`\n\n### Text Fields & Inputs\n`FilledTextField` `OutlinedTextField` `FilledSelect` `OutlinedSelect` `SelectOption` `Autocomplete` `Search` `SearchWithFilters` `FilterPanel` `FilterRow` `DatePicker` `DateRangePicker` `DateInput` `TimePicker` `NumberStepper` `RichTextEditor` `Slider`\n\n### Selection Controls\n`Checkbox` `Radio` `Switch` `OutlinedSegmentedButton` `OutlinedSegmentedButtonSet`\n\n### Navigation\n`NavigationBar` `NavigationRail` `NavigationTab` `NavigationDrawer` `NavigationDrawerModal` `Tabs` `PrimaryTab` `SecondaryTab` `TopAppBar` `BottomAppBar` `Breadcrumbs` `Pagination`\n\n### Data Display\n`DataTable` `List` `ListItem` `Timeline` `TreeView` `Gallery` `LineChart` `BarChart` `PieChart` `HorizontalStepper` `VerticalStepper` `TransferList`\n\n### Feedback\n`Alert` `Banner` `Snackbar` `Notification` `NotificationContainer` `Lozenge` `Badge` `Tooltip` `CircularProgress` `LinearProgress` `EmptyState`\n\n### Surfaces & Layout\n`Dialog` `SidePanel` `BottomSheet` `ElevatedCard` `FilledCard` `OutlinedCard` `Divider` `Elevation` `Header` `Menu` `MenuItem` `SubMenu` `Dropdown` `OverflowMenu`\n\n### Chips\n`AssistChip` `FilterChip` `InputChip` `SuggestionChip` `ChipSet`\n\n### File Upload\n`FileUploadCard` `FileUploadCardList` `Dropzone` `ButtonFileUploader` `DropzoneFileUploader` `FileViewer` `FileUploadsViewerModal`\n\n### Icons & Branding\n`Icon` `MdIconWrapper` `Avatar` `BayzatLogo` `BayzatShape` `Link`\n\n### Utilities\n`FocusRing` `Ripple`\n\n## Theming\n\nThe design system uses CSS custom properties for theming, following the Material Design 3 token system.\n\n### Import the theme\n\n```tsx\nimport '@bayzat_design/design-system/theme';\n```\n\n### Bayzat brand colors\n\n| Token | Color | Hex |\n|-------|-------|-----|\n| Primary | Purple | `#9647FF` |\n| Success | Teal | `#22C993` |\n| Warning | Amber | `#FFBB38` |\n| Critical | Pink | `#CD2873` |\n| Info | Blue | `#0C66FF` |\n\n### Customizing tokens\n\nOverride CSS custom properties to customize the theme:\n\n```css\n:root {\n  --md-sys-color-primary: #your-brand-color;\n  --md-sys-color-on-primary: #ffffff;\n  --md-ref-typeface-plain: 'Your Font', sans-serif;\n}\n```\n\n### Using design tokens in code\n\n```tsx\nimport { colors, FONT_FAMILY, typeScale, spacingVar } from '@bayzat_design/design-system';\n\n// colors.primary500 = '#9647FF'\n// FONT_FAMILY = \"'DM Sans', sans-serif\"\n// typeScale.body1 = { fontSize: '16px', lineHeight: '24px', ... }\n// spacingVar.space200 = 'var(--bds-spacing-200)'\n```\n\n## Documentation\n\n- **Storybook:** [View interactive component demos](https://bayzat.github.io/design-system/) _(placeholder)_\n- **Migration Guide:** [MIGRATION.md](./MIGRATION.md) -- Migrating from previous Bayzat UI\n- **Changelog:** [CHANGELOG.md](./CHANGELOG.md) -- Version history and release notes\n\n## Contributing\n\n1. Clone the repository\n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n3. Start Storybook for development:\n   ```bash\n   npm run storybook\n   ```\n4. Build the library:\n   ```bash\n   npm run build\n   ```\n5. Run linting and type checks:\n   ```bash\n   npm run lint\n   npm run type-check\n   ```\n6. Before submitting a PR, create a changeset describing your changes:\n   ```bash\n   npm run changeset\n   ```\n   Follow the prompts to select a bump type (patch/minor/major) and describe the change. Commit the generated changeset file with your PR.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}