{"_id":"@al-ds/design-system","_rev":"2-101dd42e5af18bbd08d6d828c296f20e","name":"@al-ds/design-system","dist-tags":{"latest":"1.3.0"},"versions":{"1.0.0":{"name":"@al-ds/design-system","version":"1.0.0","keywords":["acculynx","design-system","react","components","figma","tailwindcss"],"license":"UNLICENSED","_id":"@al-ds/design-system@1.0.0","maintainers":[{"name":"singerco","email":"singerco@gmail.com"}],"homepage":"https://github.com/singerco-eng/accu-ds#readme","bugs":{"url":"https://github.com/singerco-eng/accu-ds/issues"},"dist":{"shasum":"0b3a67ed34f596ed07847d9020b1315951c8cf7b","tarball":"https://registry.npmjs.org/@al-ds/design-system/-/design-system-1.0.0.tgz","fileCount":38,"integrity":"sha512-HHAWWzgxcKmNgmMeLYOOd/OWANr/I95iUDfd1w25fEH29Dfn7lbhUxVYfKggUX7Yv2IKWkk90nyyjfwmZhgD8A==","signatures":[{"sig":"MEUCIAQewlcj1dOczlpTD6ccwDyXsxPvK6WZZRaysZSAi7mvAiEAkztmS39FeHPWcIgvK9GlTuetnq/KdM7RrsKXIfwFCh0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":264428},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./styles.css":"./dist/design-system.css"},"gitHead":"ed6d586d958f0b51bf760d2b391aa2d5dda4c558","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview","build:lib":"vite build --config vite.config.lib.ts","build:demo":"tsc -b && vite build","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"singerco","email":"singerco@gmail.com"},"repository":{"url":"git+https://github.com/singerco-eng/accu-ds.git","type":"git"},"_npmVersion":"11.6.2","description":"AccuLynx Design System — React component library with design tokens, built from Figma","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.12.0","dependencies":{"clsx":"^2.1.1","lucide-react":"^0.575.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","react":"^19.2.4","react-dom":"^19.2.4","typescript":"^5.9.3","@types/node":"^25.3.0","tailwindcss":"^4.2.0","@types/react":"^19.2.14","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","react-router-dom":"^7.13.0","@tailwindcss/vite":"^4.2.0","@vitejs/plugin-react":"^5.1.4"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.0.0_1771714428567_0.9020725817610729","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@al-ds/design-system","version":"1.3.0","type":"module","description":"AccuLynx Design System — React component library with design tokens, built from Figma","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./styles.css":"./dist/design-system.css","./preset.css":"./src/tailwind-preset.css"},"sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"tsc -b && vite build","build:lib":"vite build --config vite.config.lib.ts","build:demo":"tsc -b && vite build","lint":"eslint .","preview":"vite preview","prepublishOnly":"npm run build:lib"},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"clsx":"^2.1.1","lucide-react":"^0.575.0"},"devDependencies":{"@fullcalendar/core":"^6.1.20","@fullcalendar/react":"^6.1.20","@fullcalendar/resource":"^6.1.20","@fullcalendar/resource-timeline":"^6.1.20","@tailwindcss/vite":"^4.2.0","@types/node":"^25.3.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.4","react":"^19.2.4","react-dom":"^19.2.4","react-router-dom":"^7.13.0","tailwindcss":"^4.2.0","typescript":"^5.9.3","vite":"^7.3.1","vite-plugin-dts":"^4.5.4"},"repository":{"type":"git","url":"git+https://github.com/singerco-eng/accu-ds.git"},"homepage":"https://github.com/singerco-eng/accu-ds#readme","license":"UNLICENSED","keywords":["acculynx","design-system","react","components","figma","tailwindcss"],"gitHead":"065ef6658229564cdbbc83b0511154c2615e911c","_id":"@al-ds/design-system@1.3.0","bugs":{"url":"https://github.com/singerco-eng/accu-ds/issues"},"_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-t1QYNxn20XzBVA5VylSL5c0slK+qJ06li+CoGP1saMGfHWi20IA5wogwYvU/yrOquHWIvwlYBUAWZ8BT+OBovg==","shasum":"a5f1d39c8bc0df70fa83ed282ef62103117aa5ce","tarball":"https://registry.npmjs.org/@al-ds/design-system/-/design-system-1.3.0.tgz","fileCount":42,"unpackedSize":912975,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFfZuaaok+P4gqYLIM8P8skYaz1YXBYjVNoJiU8vv1eTAiBg4BfA1KSYh2ZhVZJPxMDgUY11JDKH2ycT9jcSwPW5Hg=="}]},"_npmUser":{"name":"singerco","email":"singerco@gmail.com"},"directories":{},"maintainers":[{"name":"singerco","email":"singerco@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_1.3.0_1772135092385_0.8813452283915835"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-21T22:53:48.489Z","modified":"2026-02-26T19:44:52.732Z","1.0.0":"2026-02-21T22:53:48.761Z","1.3.0":"2026-02-26T19:44:52.614Z"},"bugs":{"url":"https://github.com/singerco-eng/accu-ds/issues"},"license":"UNLICENSED","homepage":"https://github.com/singerco-eng/accu-ds#readme","keywords":["acculynx","design-system","react","components","figma","tailwindcss"],"repository":{"type":"git","url":"git+https://github.com/singerco-eng/accu-ds.git"},"description":"AccuLynx Design System — React component library with design tokens, built from Figma","maintainers":[{"name":"singerco","email":"singerco@gmail.com"}],"readme":"# @al-ds/design-system\r\n\r\nAccuLynx Design System — a React component library with design tokens, built from the AccuLynx Figma Master Design Library.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @al-ds/design-system\r\n```\r\n\r\n### Peer Dependencies\r\n\r\nThis package requires React 18+ as a peer dependency:\r\n\r\n```bash\r\nnpm install react react-dom\r\n```\r\n\r\n## Usage\r\n\r\n### 1. Load the Roboto font\r\n\r\nAdd this to your global CSS file (e.g. `index.css` or `globals.css`):\r\n\r\n```css\r\n@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');\r\n```\r\n\r\n### 2. Import styles and components\r\n\r\n```tsx\r\n// In your app entry point (e.g. main.tsx) — import AFTER any Tailwind or app-level CSS\r\nimport '@al-ds/design-system/styles.css'\r\n\r\n// Then import components as needed\r\nimport { Button, Badge, Toggle } from '@al-ds/design-system'\r\n```\r\n\r\nThe CSS import is required — it provides all design tokens (CSS custom properties), Tailwind utilities, and component styles. The CSS is fully self-contained; consumers do NOT need Tailwind installed.\r\n\r\n**Import order matters:** If your app uses Tailwind CSS, import `@al-ds/design-system/styles.css` **after** your Tailwind CSS so the design system classes take precedence.\r\n\r\n### Tailwind Preset (Optional)\r\n\r\nIf your project uses Tailwind CSS v4, you can import the AccuLynx theme preset for shorthand token classes:\r\n\r\n```css\r\n@import \"@al-ds/design-system/preset.css\";\r\n```\r\n\r\nThis enables classes like `bg-accu-primary-blue`, `rounded-accu-md`, `shadow-accu-lg` instead of `bg-[var(--accu-primary-blue)]`.\r\n\r\n### Example\r\n\r\n```tsx\r\nimport { Button, TextInput, Card } from '@al-ds/design-system'\r\nimport '@al-ds/design-system/styles.css'\r\n\r\nfunction LoginForm() {\r\n  return (\r\n    <Card>\r\n      <TextInput label=\"Email\" placeholder=\"you@acculynx.com\" />\r\n      <TextInput label=\"Password\" type=\"password\" />\r\n      <Button variant=\"default\">Sign In</Button>\r\n      <Button variant=\"text\">Forgot Password?</Button>\r\n    </Card>\r\n  )\r\n}\r\n```\r\n\r\n## Components\r\n\r\n| Component | Description |\r\n|-----------|-------------|\r\n| Announcement | System-wide announcement banners with dismiss |\r\n| Avatar | User avatar with initials or image fallback |\r\n| Badge | Status indicators and count badges |\r\n| Breadcrumbs | Navigation breadcrumb trail |\r\n| Button | Primary, outline, text, warning, danger, and success variants |\r\n| Card | Container card with optional header and sections |\r\n| Checkbox | Checkbox input with label and indeterminate state |\r\n| ColorPicker | Color selection with swatches and custom input |\r\n| ContextMenu | Right-click context menu with nested items |\r\n| DatePicker | Calendar-based date selection |\r\n| FileUploader | Drag-and-drop file upload with progress |\r\n| Modal | Dialog overlay with customizable content |\r\n| ModalDrawer | Slide-in drawer panel from the edge |\r\n| Panel | Collapsible panel with header and content |\r\n| ProgressBar | Determinate and indeterminate progress indicators |\r\n| RadioButton | Radio button group with labels |\r\n| SearchBar | Search input with clear and loading states |\r\n| SelectMenu | Dropdown select with single and multi-select |\r\n| Slider | Range slider with single and dual thumbs |\r\n| Table | Data table with sorting, selection, and pagination |\r\n| Tabs | Tabbed content panels |\r\n| Tag | Removable tags and chips |\r\n| TextInput | Text input with label, helper text, and validation |\r\n| Tile | Content tile with milestone variant |\r\n| Toast | Notification toasts with auto-dismiss |\r\n| Toggle | On/off toggle switch |\r\n| Tooltip | Hover/focus tooltip with positioning |\r\n\r\n## Design Tokens\r\n\r\nAll components use CSS custom properties prefixed with `--accu-*`. These are automatically included when you import the styles CSS. Tokens are also available as TypeScript objects:\r\n\r\n```tsx\r\nimport { colors, typography } from '@al-ds/design-system'\r\n```\r\n\r\n### Typography Utility Classes\r\n\r\nThe design system provides namespaced typography utilities (to avoid Tailwind class name conflicts):\r\n\r\n| Class | Size | Use |\r\n|-------|------|-----|\r\n| `accu-text-display-lg` | 42px | Large display headings |\r\n| `accu-text-display-md` | 30px | Medium display headings |\r\n| `accu-text-display-sm` | 18px | Small display headings |\r\n| `accu-text-body-lg` | 16px | Large body text |\r\n| `accu-text-body-md` | 14px | Default body text |\r\n| `accu-text-body-sm` | 12px | Small/caption text |\r\n\r\nStandard Tailwind font-weight classes (`font-light`, `font-normal`, `font-medium`, `font-bold`) work as expected.\r\n\r\n## CSS Notes\r\n\r\n- The styles CSS is **self-contained** — it includes all Tailwind utilities used by components. No need to install or configure Tailwind.\r\n- The CSS is not minified and ships with sourcemaps for easier debugging.\r\n- Components use CSS custom properties for all colors, radii, and effects. No hard-coded hex values.\r\n- If your project has base styles (e.g., Tailwind's preflight or global `button`/`input` resets), they may affect component internals. Use CSS layers (`@layer base`) for your global resets to ensure proper cascade ordering.\r\n\r\n## Figma Make Integration\r\n\r\nThis package is designed to work with [Figma Make](https://developers.figma.com/docs/code/bring-your-design-system-package/). To use it:\r\n\r\n1. Install the package in your Figma Make file (ask the AI chat: \"install @al-ds/design-system\")\r\n2. Copy the `guidelines/` folder from this package into your Figma Make project's root\r\n3. Figma Make's AI will read the guidelines to understand how to use your components correctly\r\n\r\nThe guidelines folder is included in the npm package. You can find it at:\r\n\r\n```\r\nnode_modules/@al-ds/design-system/guidelines/\r\n```\r\n\r\n### Guidelines Structure\r\n\r\n```\r\nguidelines/\r\n  Guidelines.md              — Top-level intro for Figma Make AI\r\n  overview-components.md     — Component catalog with descriptions\r\n  overview-icons.md          — Icon usage with Lucide React\r\n  components/                — Per-component usage docs (27 files)\r\n  design-tokens/             — Color and typography token reference\r\n```\r\n\r\n## Development\r\n\r\n```bash\r\n# Start the demo app\r\nnpm run dev\r\n\r\n# Build the library\r\nnpm run build:lib\r\n\r\n# Build the demo app\r\nnpm run build:demo\r\n\r\n# Lint\r\nnpm run lint\r\n```\r\n\r\n## Tech Stack\r\n\r\n- React 19 + TypeScript\r\n- Vite (build tool)\r\n- Tailwind CSS 4 (styling)\r\n- Lucide React (icons)\r\n- CSS Custom Properties (design tokens)\r\n\r\n## License\r\n\r\nUNLICENSED — proprietary to AccuLynx.\r\n","readmeFilename":"README.md"}