{"_id":"@lethxrgy/dash-ui","name":"@lethxrgy/dash-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@lethxrgy/dash-ui","version":"0.1.0","description":"Dashboard UI kit — design tokens, React components, and charts for building admin and observability interfaces. Compatible with Figma Make kits.","type":"module","license":"MIT","sideEffects":["**/*.css"],"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/index.css","./tokens/*":"./dist/tokens/*"},"scripts":{"build":"vite build && npm run copy:tokens","copy:tokens":"mkdir -p dist/tokens && cp src/styles/tokens/*.css dist/tokens/","typecheck":"tsc --noEmit","clean":"rm -rf dist","prepublishOnly":"npm run clean && npm run build"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"dependencies":{"@fontsource-variable/ibm-plex-sans":"^5.2.8","@tabler/icons-react":"^3.41.1","chart.js":"^4.5.1","classnames":"^2.5.1","react-chartjs-2":"^5.3.1","react-grid-layout":"^2.2.3","react-hook-form":"^7.72.1"},"devDependencies":{"@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.4","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.6.0","vite":"^5.4.0","vite-plugin-dts":"^4.2.0"},"publishConfig":{"access":"public"},"keywords":["design-system","ui-kit","figma-make","react","dashboard","charts","admin"],"_id":"@lethxrgy/dash-ui@0.1.0","_nodeVersion":"24.2.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-f4jcAZXrhj2JlHnJnJfsCWejjEMcAG3GjNCaMWk0ZOuXrHjMEc+DWFLAM9z8SZv15yqVVUc+VA2N5uwoVV5Knw==","shasum":"6006c5dad93d4bec1d73ab42632a00db99435816","tarball":"https://registry.npmjs.org/@lethxrgy/dash-ui/-/dash-ui-0.1.0.tgz","fileCount":19,"unpackedSize":751108,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEABMoLQj8OV67mN0K2/7JdwqTqlEncqL5ZZkcevRlSIAiBmL944EFBZGFltSE2k/hcOr8EJcaaL9npq2VfXG2wbmQ=="}]},"_npmUser":{"name":"lethxrgy","email":"drdron1337@gmail.com"},"directories":{},"maintainers":[{"name":"lethxrgy","email":"drdron1337@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dash-ui_0.1.0_1776430762320_0.5346530216431928"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-17T12:59:22.213Z","0.1.0":"2026-04-17T12:59:22.508Z","modified":"2026-04-17T12:59:22.755Z"},"maintainers":[{"name":"lethxrgy","email":"drdron1337@gmail.com"}],"description":"Dashboard UI kit — design tokens, React components, and charts for building admin and observability interfaces. Compatible with Figma Make kits.","keywords":["design-system","ui-kit","figma-make","react","dashboard","charts","admin"],"license":"MIT","readme":"# @lethxrgy/dash-ui\n\nReact design-system package: tokens, primitives, layout shell, and chart widgets for building dashboards and admin interfaces. Tuned for [Figma Make kits](https://help.figma.com/hc/en-us/articles/34413986841751) and regular Vite + React 18 apps.\n\n## What's inside\n\n- **UI primitives** — Avatar, Badge, Button, Checkbox, Combobox, DropdownButton, Header, Input, PasswordInput, Select, Separator\n- **Layout shell** — AppLayout, Sidebar (with `SidebarProvider`), PageHeader\n- **Dashboard** — Widget (presentational), DashboardGrid, LineChart\n- **Design tokens** — 12 pre-built theme CSS files across light/dark and desktop/mobile variants\n\nThe kit is **router-agnostic**. `Sidebar` and `DropdownButton` accept `renderLink` / polymorphic `as` props so you can wire up TanStack Router, React Router, Next `<Link>`, etc.\n\n## Install\n\n```bash\nnpm install @lethxrgy/dash-ui\nnpm install react@^18 react-dom@^18\nnpm install @fontsource-variable/ibm-plex-sans\n```\n\n## Usage\n\n```tsx\nimport '@fontsource-variable/ibm-plex-sans';\nimport '@lethxrgy/dash-ui/styles.css';\nimport { SidebarProvider, AppLayout, PageHeader, Button } from '@lethxrgy/dash-ui';\n\nexport default function App() {\n  return (\n    <SidebarProvider>\n      <AppLayout>\n        <PageHeader title=\"Overview\" timeRange=\"1hour\" refreshInterval=\"60000\" />\n        <Button variant=\"primary\">Do something</Button>\n      </AppLayout>\n    </SidebarProvider>\n  );\n}\n```\n\n### Swap themes\n\n```ts\n// Default: enterpriseLight (loaded by styles.css)\nimport '@lethxrgy/dash-ui/styles.css';\n\n// Or override with a different theme:\nimport '@lethxrgy/dash-ui/tokens/nightDark.css';\n```\n\n## Publishing\n\n### Public npm\n\n```bash\nnpm run build\nnpm publish --access=public\n```\n\n### Figma private npm registry\n\n1. In Figma Make, create a new file → **Make settings** → **Figma npm registry** → **Get started**.\n2. Enter scope `@lethxrgy` and click **Generate key** (org admin only).\n3. Copy the snippet into a local `.npmrc` (never commit it — already `.gitignore`d).\n4. `npm publish` from this directory.\n\nSee `.npmrc.example` for the expected shape.\n\n## Developing\n\n```bash\nnpm install\nnpm run build         # vite build → dist/ (ESM + CSS + .d.ts + tokens/)\nnpm run typecheck\n```\n\nOutput layout:\n\n```\ndist/\n├── index.js          # bundled ESM\n├── index.css         # bundled styles (reset + default theme + fonts + global)\n├── index.d.ts        # rolled-up type declarations\n├── index.js.map\n└── tokens/*.css      # 12 theme files for alternate imports\n```\n\nReact, react-dom, chart.js, react-chartjs-2, react-grid-layout, react-hook-form, @tabler/icons-react, and @fontsource-variable/ibm-plex-sans are externalized — the host app installs them.\n\n## License\n\nMIT © lethxrgy\n","readmeFilename":"README.md","_rev":"1-c1c5b0dc4bd0e69a55dc48c05e76635a"}