{"_id":"@danaputra09/farmacare-ds","_rev":"9-5b054dee35f143df242de88c83b621c6","name":"@danaputra09/farmacare-ds","dist-tags":{"latest":"0.4.1"},"versions":{"0.2.5":{"name":"@danaputra09/farmacare-ds","version":"0.2.5","_id":"@danaputra09/farmacare-ds@0.2.5","maintainers":[{"name":"danaputra09","email":"danaputu09@gmail.com"}],"dist":{"shasum":"3ec06fbb37f69fe5398051ca1a488c5a3cce2b55","tarball":"https://registry.npmjs.org/@danaputra09/farmacare-ds/-/farmacare-ds-0.2.5.tgz","fileCount":353,"integrity":"sha512-iti8pGZMB7Shk9TuOTJbX0fpYr+bGcSBpBBEP16ctDwKnwQjVShywcMhUx2XkJTp+wIES7QmzMS7ASG1vZ+Bbw==","signatures":[{"sig":"MEUCIQCGIIPzGhwWQ0P/cmR4MSwVbdfwO9y5tLrwzyY4HZR9pwIgFoO+sXp6skyh624VggSVEOeHYALlguwClZpDR1F2jrk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4261641},"type":"module","exports":{".":"./src/ds/index.js","./tokens.css":"./src/tokens.css"},"gitHead":"dada2d4b5574ff286638eac712c9495aa60d264b","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"danaputra09","email":"danaputu09@gmail.com"},"_npmVersion":"11.4.2","description":"This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.","directories":{},"_nodeVersion":"24.1.0","dependencies":{"react":"^19.2.4","react-dom":"^19.2.4","react-router-dom":"^7.13.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.1","eslint":"^9.39.4","globals":"^17.4.0","@eslint/js":"^9.39.4","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2"},"_npmOperationalInternal":{"tmp":"tmp/farmacare-ds_0.2.5_1774272306064_0.2661157196216972","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to a private package: @iputudanaputra/farmacare-ds on GitHub Packages. This public package is no longer maintained."},"0.2.6":{"name":"@danaputra09/farmacare-ds","version":"0.2.6","_id":"@danaputra09/farmacare-ds@0.2.6","maintainers":[{"name":"danaputra09","email":"danaputu09@gmail.com"}],"dist":{"shasum":"46bd87f1cb23a4e8bd99f3f2daf9b9114c3f25f3","tarball":"https://registry.npmjs.org/@danaputra09/farmacare-ds/-/farmacare-ds-0.2.6.tgz","fileCount":354,"integrity":"sha512-Mp4s2lEOkZmIbQPIhFyBwiMMNhNlnOEedH4hVR3Pa8q41gyBZhFO1mdxOF1ydWT/c47a1HaQJg8TcRozQrI1WA==","signatures":[{"sig":"MEYCIQD9PW4/aGvg/vUJEtJs49C6gfcJfzv3qY+z2+AA5wjj3gIhAOpQfhCTwTkR5Qn/0wukUBKJTVzdqhrV0liVKigjPzE0","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4273800},"type":"module","exports":{".":"./src/ds/index.js","./tokens.css":"./src/tokens.css"},"gitHead":"7bbecaf5722400a7313ed1dc01d5d1620c4dbaca","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"danaputra09","email":"danaputu09@gmail.com"},"_npmVersion":"11.4.2","description":"A React component library and design token system for Farmacare — pharmacy and healthcare apps. Install once, use anywhere.","directories":{},"_nodeVersion":"24.1.0","dependencies":{"react":"^19.2.4","react-dom":"^19.2.4","react-router-dom":"^7.13.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.1","eslint":"^9.39.4","globals":"^17.4.0","@eslint/js":"^9.39.4","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2"},"_npmOperationalInternal":{"tmp":"tmp/farmacare-ds_0.2.6_1774273699627_0.23704991498926886","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to a private package: @iputudanaputra/farmacare-ds on GitHub Packages. This public package is no longer maintained."},"0.2.7":{"name":"@danaputra09/farmacare-ds","version":"0.2.7","_id":"@danaputra09/farmacare-ds@0.2.7","maintainers":[{"name":"danaputra09","email":"danaputu09@gmail.com"}],"dist":{"shasum":"55fe0dda7e806eed93189a900ad36c82370babb6","tarball":"https://registry.npmjs.org/@danaputra09/farmacare-ds/-/farmacare-ds-0.2.7.tgz","fileCount":354,"integrity":"sha512-kIz/QdzoaxGlWubLNwfGx9DrN7Nr7CHkg26dDDcXBN5a1enkZreSxtfUbRNnWpVkIutLTxDyG7n17z+8Mez41Q==","signatures":[{"sig":"MEYCIQCk0rcAm5ExYu2B+3ic4FBQSV6ZJLF1zhIuOiNYTKp7mgIhAKrUt0TvJ2seGpqq//QOTgIQrvtEe5Yj/478LMTK5xCm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4280777},"type":"module","exports":{".":"./src/ds/index.js","./tokens.css":"./src/tokens.css"},"gitHead":"6f9e5c6c892f33ba8bbdbc66624a227cee28d85d","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"danaputra09","email":"danaputu09@gmail.com"},"_npmVersion":"11.4.2","description":"A React component library and design token system for Farmacare — pharmacy and healthcare apps. Install once, use anywhere.","directories":{},"_nodeVersion":"24.1.0","dependencies":{"react":"^19.2.4","react-dom":"^19.2.4","react-router-dom":"^7.13.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.1","eslint":"^9.39.4","globals":"^17.4.0","@eslint/js":"^9.39.4","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2"},"_npmOperationalInternal":{"tmp":"tmp/farmacare-ds_0.2.7_1774273959255_0.39605363048608955","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to a private package: @iputudanaputra/farmacare-ds on GitHub Packages. This public package is no longer maintained."},"0.2.8":{"name":"@danaputra09/farmacare-ds","version":"0.2.8","_id":"@danaputra09/farmacare-ds@0.2.8","maintainers":[{"name":"danaputra09","email":"danaputu09@gmail.com"}],"dist":{"shasum":"212169ab92529262c3a6f9053b702577bda14e08","tarball":"https://registry.npmjs.org/@danaputra09/farmacare-ds/-/farmacare-ds-0.2.8.tgz","fileCount":354,"integrity":"sha512-w+9o248EC5HH+oz/eJ5C1EHBJ9ROxKTPuohsMfBB/j4AMkKNsiP0rOYBkJH4wfwivQtcDA9WOQS7ajnONeIVAw==","signatures":[{"sig":"MEYCIQDOLtZdqQoa44r0tYbigoFoSvVbPl+4KSBbHdpfH9XaMQIhAIMowNqWAJhjvcMZlh7Y/jTcevpYmZD7ecmW13yH74QR","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4279924},"type":"module","exports":{".":"./src/ds/index.js","./tokens.css":"./src/tokens.css"},"gitHead":"ee779b929e14046f59f3d3c451eb1d3c0c2d04c3","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"danaputra09","email":"danaputu09@gmail.com"},"_npmVersion":"11.4.2","description":"A React component library and design token system for Farmacare — pharmacy and healthcare apps. Install once, use anywhere.","directories":{},"_nodeVersion":"24.1.0","dependencies":{"react":"^19.2.4","react-dom":"^19.2.4","react-router-dom":"^7.13.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.1","eslint":"^9.39.4","globals":"^17.4.0","@eslint/js":"^9.39.4","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2"},"_npmOperationalInternal":{"tmp":"tmp/farmacare-ds_0.2.8_1774274275914_0.11506961924500181","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to a private package: @iputudanaputra/farmacare-ds on GitHub Packages. This public package is no longer maintained."},"0.2.9":{"name":"@danaputra09/farmacare-ds","version":"0.2.9","_id":"@danaputra09/farmacare-ds@0.2.9","maintainers":[{"name":"danaputra09","email":"danaputu09@gmail.com"}],"dist":{"shasum":"fcfb50ed99ce570d77ef5d19f584d75b235e1f53","tarball":"https://registry.npmjs.org/@danaputra09/farmacare-ds/-/farmacare-ds-0.2.9.tgz","fileCount":355,"integrity":"sha512-Ok0ijrBPzMUriKxtP10Hjs3k+N1J/BSVwa7KKZ/Xm7KW5AykrV9Q+6z5YeVlnikh0km3xdXJjy7ySuh4MnAVkA==","signatures":[{"sig":"MEYCIQCFm89T1PSZTfD3Md8tpKNnM5fJIkY+/oWKhGlmiB/MnwIhAMXy+TaBeQ9nIcvzQVRsqKu5c4Fk5gazz0XYiE9oZwcV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4284396},"type":"module","exports":{".":"./src/ds/index.js","./tokens.css":"./src/tokens.css"},"gitHead":"3cc15678cead687d15e18e9b6cc6eff5ac7f4784","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"danaputra09","email":"danaputu09@gmail.com"},"_npmVersion":"11.4.2","description":"A React component library and design token system for Farmacare — pharmacy and healthcare apps. Install once, use anywhere.","directories":{},"_nodeVersion":"24.1.0","dependencies":{"react":"^19.2.4","react-dom":"^19.2.4","react-router-dom":"^7.13.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.1","eslint":"^9.39.4","globals":"^17.4.0","@eslint/js":"^9.39.4","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2"},"_npmOperationalInternal":{"tmp":"tmp/farmacare-ds_0.2.9_1774274916882_0.5052242620702312","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to a private package: @iputudanaputra/farmacare-ds on GitHub Packages. This public package is no longer maintained."},"0.3.0":{"name":"@danaputra09/farmacare-ds","version":"0.3.0","_id":"@danaputra09/farmacare-ds@0.3.0","maintainers":[{"name":"danaputra09","email":"danaputu09@gmail.com"}],"dist":{"shasum":"2b676edbe85e962ff96179d9a637368021c158c1","tarball":"https://registry.npmjs.org/@danaputra09/farmacare-ds/-/farmacare-ds-0.3.0.tgz","fileCount":355,"integrity":"sha512-6eAUScXg+kFyR63D2BG2mGvNy8Qb/+syo+BQgFqt1oxgkfSlPL9DuCsmuBrjEvATKQH9kLXT64u2DIptYPO59Q==","signatures":[{"sig":"MEQCICMfwzbK85D0WCyBrUL2p2W0krtnO+s1VnfmTVgpiCX2AiBbx3ey9g+l1i1/gbQbifRfN1O879oRgXShyhcGu5UQLw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4744361},"type":"module","exports":{".":"./src/ds/index.js","./tokens.css":"./src/tokens.css"},"gitHead":"3c816f3656bda92e51f8f31cff0d697690a74cf7","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"danaputra09","email":"danaputu09@gmail.com"},"_npmVersion":"11.4.2","description":"A React component library and design token system for Farmacare — pharmacy and healthcare apps. Install once, use anywhere.","directories":{},"_nodeVersion":"24.1.0","dependencies":{"react":"^19.2.4","react-dom":"^19.2.4","react-router-dom":"^7.13.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.1","eslint":"^9.39.4","globals":"^17.4.0","@eslint/js":"^9.39.4","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2"},"_npmOperationalInternal":{"tmp":"tmp/farmacare-ds_0.3.0_1774679992053_0.8759656931437347","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to a private package: @iputudanaputra/farmacare-ds on GitHub Packages. This public package is no longer maintained."},"0.4.0":{"name":"@danaputra09/farmacare-ds","version":"0.4.0","_id":"@danaputra09/farmacare-ds@0.4.0","maintainers":[{"name":"danaputra09","email":"danaputu09@gmail.com"}],"dist":{"shasum":"51735f1406cbfbc3c715bd7d20e6bc3978fa47eb","tarball":"https://registry.npmjs.org/@danaputra09/farmacare-ds/-/farmacare-ds-0.4.0.tgz","fileCount":355,"integrity":"sha512-Fm8iF2NbsmekjEoJ4lz/JaWLIjbDiVO2A330r7XEHvbL0yXHy7S/XZfnxvgIG6J99+cNBjpGq80+106eR2a5vw==","signatures":[{"sig":"MEUCIQD9EuaZrzVGsFqvQF0SU/oGmY/5VajaT7uyo+H5sDomHAIgIKJi2c+bUfHbxkZFQgoQbyx9QVkc1Y6wjJsueB1KjYM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4753524},"type":"module","exports":{".":"./src/ds/index.js","./tokens.css":"./src/tokens.css"},"gitHead":"658c1a172f04d6d538d3e66fd12cefffa26f2a57","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"danaputra09","email":"danaputu09@gmail.com"},"_npmVersion":"11.4.2","description":"A React component library and design token system for Farmacare — pharmacy and healthcare apps. Install once, use anywhere.","directories":{},"_nodeVersion":"24.1.0","dependencies":{"react":"^19.2.4","react-dom":"^19.2.4","react-router-dom":"^7.13.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.1","eslint":"^9.39.4","globals":"^17.4.0","@eslint/js":"^9.39.4","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2"},"_npmOperationalInternal":{"tmp":"tmp/farmacare-ds_0.4.0_1775206042124_0.868019960734925","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to a private package: @iputudanaputra/farmacare-ds on GitHub Packages. This public package is no longer maintained."},"0.4.1":{"name":"@danaputra09/farmacare-ds","version":"0.4.1","_id":"@danaputra09/farmacare-ds@0.4.1","maintainers":[{"name":"danaputra09","email":"danaputu09@gmail.com"}],"dist":{"shasum":"88c629526299fdcee14d58eeaf45703ab83f8654","tarball":"https://registry.npmjs.org/@danaputra09/farmacare-ds/-/farmacare-ds-0.4.1.tgz","fileCount":357,"integrity":"sha512-rAA/qGSt5UO0wLBd8EijZVE2QrhZzogHemafL8/ZDYfrYeDluSu3ldosN2H3UYkiLCgYcR3j0ARBVHc4dyANVA==","signatures":[{"sig":"MEQCIFMptneU62XOdQcisTc9wYdAt29XeE/Svv6f+0CE5bdzAiBrRajFjwbRBHAbTbTGS6+yc4AhvGx4Qdhr7Yra21DyJA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4772495},"type":"module","exports":{".":"./src/ds/index.js","./tokens.css":"./src/tokens.css"},"gitHead":"e62e94e089d9addbce90691f19ad5708d601a9cd","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"danaputra09","email":"danaputu09@gmail.com"},"_npmVersion":"11.4.2","description":"A React component library and design token system for Farmacare — pharmacy and healthcare apps. Install once, use anywhere.","directories":{},"_nodeVersion":"24.1.0","dependencies":{"react":"^19.2.4","react-dom":"^19.2.4","react-router-dom":"^7.13.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.1","eslint":"^9.39.4","globals":"^17.4.0","@eslint/js":"^9.39.4","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2"},"_npmOperationalInternal":{"tmp":"tmp/farmacare-ds_0.4.1_1785516500210_0.440628599754217","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to a private package: @iputudanaputra/farmacare-ds on GitHub Packages. This public package is no longer maintained."}},"time":{"created":"2026-03-23T13:25:06.005Z","modified":"2026-08-01T07:55:57.412Z","0.2.5":"2026-03-23T13:25:06.271Z","0.2.6":"2026-03-23T13:48:19.901Z","0.2.7":"2026-03-23T13:52:39.408Z","0.2.8":"2026-03-23T13:57:56.107Z","0.2.9":"2026-03-23T14:08:37.068Z","0.3.0":"2026-03-28T06:39:52.238Z","0.4.0":"2026-04-03T08:47:22.322Z","0.4.1":"2026-07-31T16:48:20.437Z"},"description":"A React component library and design token system for Farmacare — pharmacy and healthcare apps. Install once, use anywhere.","maintainers":[{"name":"danaputra09","email":"danaputu09@gmail.com"}],"readme":"# Farmacare Design System\n\nA React component library and design token system for Farmacare — pharmacy and healthcare apps. Install once, use anywhere.\n\n[![npm](https://img.shields.io/npm/v/@danaputra09/farmacare-ds)](https://www.npmjs.com/package/@danaputra09/farmacare-ds)\n\n---\n\n## Quick Start\n\n### 1. Install the package\n\n```bash\nnpm install @danaputra09/farmacare-ds\n```\n\n### 2. Add Google Fonts to your `index.html`\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link href=\"https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\" />\n```\n\n### 3. Import design tokens in your entry file\n\n```js\n// main.jsx or main.js\nimport '@danaputra09/farmacare-ds/tokens.css';\n```\n\n### 4. Copy icons to your public folder\n\n```bash\ncp -r node_modules/@danaputra09/farmacare-ds/public/icons ./public/\n```\n\n### 5. Use components\n\n```jsx\nimport { DSButton, DSChip, DSInputText } from '@danaputra09/farmacare-ds';\n\nexport default function App() {\n  return (\n    <div>\n      <DSButton type=\"Primary\" label=\"Simpan\" />\n      <DSChip type=\"Positive\" label=\"Tersedia\" />\n      <DSInputText label=\"Nama Produk\" placeholder=\"Masukkan nama...\" />\n    </div>\n  );\n}\n```\n\n---\n\n## Components\n\n### Buttons & Actions\n\n| Component | Props | Description |\n|-----------|-------|-------------|\n| `DSButton` | `type` (Primary/Secondary/Destructive), `state`, `size`, `label`, `showPrefix`, `showSuffix`, `showKbd`, `kbdLabel`, `prefixIcon`, `suffixIcon`, `fullWidth` | Main button |\n| `DSIconButton` | `type`, `state`, `size`, `icon` | Icon-only button |\n| `DSFloatingActionButton` | `type`, `label`, `icon` | FAB |\n| `DSDropdownButton` | `type`, `label`, `options` | Button with dropdown |\n\n### Form Inputs\n\n| Component | Props | Description |\n|-----------|-------|-------------|\n| `DSInputText` | `label`, `placeholder`, `value`, `onChange`, `state`, `helperText`, `showPrefix`, `showSuffix` | Text input |\n| `DSInputNumber` | `label`, `value`, `onChange`, `min`, `max`, `step` | Number input with stepper |\n| `DSInputCurrency` | `label`, `value`, `onChange`, `currency` | Currency input (Rp) |\n| `DSInputSearch` | `placeholder`, `value`, `onChange` | Search input |\n| `DSInputTextarea` | `label`, `placeholder`, `value`, `onChange`, `rows` | Multiline text input |\n| `DSInputSelection` | `label`, `options`, `value`, `onChange` | Dropdown select |\n| `DSInputMultiselect` | `label`, `options`, `value`, `onChange` | Multi-select dropdown |\n| `DSInputDate` | `label`, `value`, `onChange` | Date picker |\n| `DSInputTime` | `label`, `value`, `onChange` | Time picker |\n| `DSCustomInputForms` | `type`, `label`, `options` | Custom input variants |\n\n### Selection Controls\n\n| Component | Props | Description |\n|-----------|-------|-------------|\n| `DSCheckbox` | `label`, `checked`, `onChange`, `state` | Checkbox |\n| `DSCheckboxGroup` | `label`, `options`, `value`, `onChange` | Checkbox group |\n| `DSRadio` | `label`, `checked`, `onChange` | Radio button |\n| `DSRadioGroup` | `label`, `options`, `value`, `onChange` | Radio group |\n| `DSToggle` | `checked`, `onChange`, `label`, `size` | Toggle switch |\n| `DSSegmentedControl` | `options`, `value`, `onChange` | Segmented tabs |\n\n### Display\n\n| Component | Props | Description |\n|-----------|-------|-------------|\n| `DSChip` | `type` (Positive/Negative/Attention/Neutral/Informative), `label` | Status chip / badge |\n| `DSBadge` | `type`, `count`, `label` | Notification badge |\n| `DSTag` | `label`, `type`, `onRemove` | Removable tag |\n| `DSAvatar` | `src`, `name`, `size` | User avatar |\n| `DSProgressBar` | `value`, `max`, `label` | Progress indicator |\n| `DSProgressStepper` | `steps`, `currentStep` | Step progress |\n\n### Navigation\n\n| Component | Props | Description |\n|-----------|-------|-------------|\n| `DSBottomNavBar` | `items`, `activeItem`, `onChange` | Mobile bottom nav |\n| `DSNavigationDrawer` | `items`, `activeItem`, `onChange`, `open` | Side navigation drawer |\n| `DSBreadcrumb` | `items` | Breadcrumb trail |\n| `DSTabs` | `tabs`, `activeTab`, `onChange` | Tab bar |\n| `DSPagination` | `page`, `total`, `onChange` | Pagination controls |\n\n### Overlays & Feedback\n\n| Component | Props | Description |\n|-----------|-------|-------------|\n| `DSToast` | `type`, `title`, `message`, `show`, `onClose` | Toast notification |\n| `DSTooltip` | `content`, `children`, `placement` | Tooltip wrapper |\n| `DSCoachmark` | `title`, `description`, `show`, `target` | Onboarding coachmark |\n| `DSAlert` | `type` (Info/Warning/Success/Error), `title`, `message` | Alert banner |\n| `DSDialog` | `title`, `open`, `onClose`, `children` | Modal dialog |\n| `DSBottomSheet` | `open`, `onClose`, `title`, `children` | Bottom sheet (mobile) |\n\n### Data Display\n\n| Component | Props | Description |\n|-----------|-------|-------------|\n| `DSTable` | `columns`, `data`, `onSort` | Data table |\n| `DSEmptyState` | `icon`, `title`, `description`, `action` | Empty state illustration |\n| `DSProductCard` | `name`, `price`, `stock`, `image` | Product card |\n| `DSListItem` | `title`, `subtitle`, `leading`, `trailing` | List row item |\n\n### Layout\n\n| Component | Props | Description |\n|-----------|-------|-------------|\n| `DSTopAppBar` | `title`, `leading`, `trailing` | App top bar |\n| `DSDivider` | `orientation`, `spacing` | Divider line |\n| `DSCard` | `children`, `padding`, `shadow` | Card container |\n\n### Other\n\n| Component | Props | Description |\n|-----------|-------|-------------|\n| `DSSkeleton` | `width`, `height`, `variant` | Loading skeleton |\n| `DSSpinner` | `size`, `color` | Loading spinner |\n| `DSCalendar` | `value`, `onChange`, `events` | Full calendar |\n| `DSTimeline` | `items` | Timeline list |\n| `DSSnackbar` | `message`, `show`, `onClose` | Snackbar notification |\n\n---\n\n## Design Tokens\n\nImport `@danaputra09/farmacare-ds/tokens.css` to get all CSS variables:\n\n### Colors\n\n```css\n--color-teal           /* #18737C — primary brand */\n--color-teal-light     /* #E6F2F4 */\n--color-teal-dark      /* #0F4F56 */\n--color-slate-900      /* #1a1a1a — primary text */\n--color-slate-600      /* #4a5568 */\n--color-slate-400      /* #a0aec0 */\n--color-slate-200      /* #e2e8f0 */\n--color-slate-100      /* #f7fafc */\n--color-white          /* #ffffff */\n--color-red            /* #E53E3E — destructive */\n--color-red-light      /* #FFF5F5 */\n--color-green          /* #38A169 — success */\n--color-green-light    /* #F0FFF4 */\n--color-yellow         /* #D69E2E — warning */\n--color-yellow-light   /* #FFFFF0 */\n--color-blue           /* #3182CE — info */\n--color-blue-light     /* #EBF8FF */\n```\n\n### Typography\n\n```css\n--font-heading         /* 'Rubik', sans-serif */\n--font-body            /* 'Inter', sans-serif */\n```\n\n### Spacing & Radius\n\n```css\n--radius-sm    /* 4px */\n--radius-md    /* 8px */\n--radius-lg    /* 12px */\n--radius-xl    /* 16px */\n--radius-full  /* 9999px */\n```\n\n---\n\n## Running the Docs Site\n\nThe docs site (sandbox) is built with Vite and includes interactive playgrounds for all 51 components.\n\n```bash\ngit clone https://github.com/IPutuDanaPutra/farmacare-design-system.git\ncd farmacare-design-system\nnpm install       # installs workspaces\ncd farmacare-ds\nnpm run dev       # starts docs site at http://localhost:5173\n```\n\n---\n\n## Project Structure\n\n```\nfarmacare-design-system/\n├── farmacare-ds/              # Design System package\n│   ├── src/\n│   │   ├── ds/                # Exportable components (51 components)\n│   │   │   ├── index.js       # Barrel file — exports all components\n│   │   │   ├── Button.jsx\n│   │   │   ├── Chip.jsx\n│   │   │   └── ...\n│   │   ├── components/        # Internal components (not exported)\n│   │   │   ├── IconPicker.jsx\n│   │   │   └── SandboxHelpers.jsx\n│   │   ├── data/              # Design data (types, styles, colors)\n│   │   ├── pages/             # Sandbox playground pages\n│   │   └── tokens.css         # CSS design tokens\n│   ├── public/\n│   │   └── icons/             # 150+ SVG icons\n│   └── package.json\n│\n├── farmacare-app/             # Example consumer app\n│   └── src/\n│       └── App.jsx\n│\n└── package.json               # Workspace root\n```\n\n---\n\n## Publishing Updates\n\n```bash\n# 1. Make your changes in src/ds/\n\n# 2. Bump the version\ncd farmacare-ds\nnpm version patch   # or minor / major\n\n# 3. Publish to npm\nnpm publish\n\n# 4. Push to GitHub\ngit add .\ngit commit -m \"feat: ...\"\ngit push\n```\n\n---\n\n## License\n\nMIT © [IPutuDanaPutra](https://github.com/IPutuDanaPutra)\n","readmeFilename":"README.md"}