{"_id":"@allandecastro/lume","name":"@allandecastro/lume","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@allandecastro/lume","version":"0.2.0","description":"Lume — frosted-glass React component library: layout, forms, overlays, agentic UI, diagnostics, and Dataverse / Power Platform tooling.","license":"MIT","author":{"name":"Allan De Castro","email":"contact@allandecastro.com"},"homepage":"https://github.com/allandecastro/lume#readme","repository":{"type":"git","url":"git+https://github.com/allandecastro/lume.git","directory":"src/lib"},"bugs":{"url":"https://github.com/allandecastro/lume/issues"},"keywords":["react","design-system","components","ui","ui-library","frosted-glass","glassmorphism","dataverse","power-platform","ai-agents","agentic"],"type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles":"./dist/styles/index.css","./styles/tokens.css":"./dist/styles/tokens.css","./styles/base.css":"./dist/styles/base.css","./styles/showroom.css":"./dist/styles/showroom.css","./Accordion":{"types":"./dist/Accordion.d.ts","import":"./dist/Accordion.js"},"./Avatar":{"types":"./dist/Avatar.d.ts","import":"./dist/Avatar.js"},"./Banner":{"types":"./dist/Banner.d.ts","import":"./dist/Banner.js"},"./Breadcrumbs":{"types":"./dist/Breadcrumbs.d.ts","import":"./dist/Breadcrumbs.js"},"./Button":{"types":"./dist/Button.d.ts","import":"./dist/Button.js"},"./Callout":{"types":"./dist/Callout.d.ts","import":"./dist/Callout.js"},"./Card":{"types":"./dist/Card.d.ts","import":"./dist/Card.js"},"./ChatMessage":{"types":"./dist/ChatMessage.d.ts","import":"./dist/ChatMessage.js"},"./Checkbox":{"types":"./dist/Checkbox.d.ts","import":"./dist/Checkbox.js"},"./CodeBlock":{"types":"./dist/CodeBlock.d.ts","import":"./dist/CodeBlock.js"},"./ColumnEditor":{"types":"./dist/ColumnEditor.d.ts","import":"./dist/ColumnEditor.js"},"./ColorPicker":{"types":"./dist/ColorPicker.d.ts","import":"./dist/ColorPicker.js"},"./Combobox":{"types":"./dist/Combobox.d.ts","import":"./dist/Combobox.js"},"./Composer":{"types":"./dist/Composer.d.ts","import":"./dist/Composer.js"},"./ContextMenu":{"types":"./dist/ContextMenu.d.ts","import":"./dist/ContextMenu.js"},"./DataTable":{"types":"./dist/DataTable.d.ts","import":"./dist/DataTable.js"},"./CommandPalette":{"types":"./dist/CommandPalette.d.ts","import":"./dist/CommandPalette.js"},"./ConfirmDialog":{"types":"./dist/ConfirmDialog.d.ts","import":"./dist/ConfirmDialog.js"},"./DatePicker":{"types":"./dist/DatePicker.d.ts","import":"./dist/DatePicker.js"},"./Divider":{"types":"./dist/Divider.d.ts","import":"./dist/Divider.js"},"./Dropzone":{"types":"./dist/Dropzone.d.ts","import":"./dist/Dropzone.js"},"./EmptyState":{"types":"./dist/EmptyState.d.ts","import":"./dist/EmptyState.js"},"./EnvironmentSwitcher":{"types":"./dist/EnvironmentSwitcher.d.ts","import":"./dist/EnvironmentSwitcher.js"},"./Field":{"types":"./dist/Field.d.ts","import":"./dist/Field.js"},"./Form":{"types":"./dist/Form.d.ts","import":"./dist/Form.js"},"./Grid":{"types":"./dist/Grid.d.ts","import":"./dist/Grid.js"},"./HoverCard":{"types":"./dist/HoverCard.d.ts","import":"./dist/HoverCard.js"},"./Inline":{"types":"./dist/Inline.d.ts","import":"./dist/Inline.js"},"./JsonViewer":{"types":"./dist/JsonViewer.d.ts","import":"./dist/JsonViewer.js"},"./Kbd":{"types":"./dist/Kbd.d.ts","import":"./dist/Kbd.js"},"./LogViewer":{"types":"./dist/LogViewer.d.ts","import":"./dist/LogViewer.js"},"./LumeProvider":{"types":"./dist/LumeProvider.d.ts","import":"./dist/LumeProvider.js"},"./Modal":{"types":"./dist/Modal.d.ts","import":"./dist/Modal.js"},"./MultiSelect":{"types":"./dist/MultiSelect.d.ts","import":"./dist/MultiSelect.js"},"./NetworkInspector":{"types":"./dist/NetworkInspector.d.ts","import":"./dist/NetworkInspector.js"},"./NumberInput":{"types":"./dist/NumberInput.d.ts","import":"./dist/NumberInput.js"},"./OtpInput":{"types":"./dist/OtpInput.d.ts","import":"./dist/OtpInput.js"},"./Pagination":{"types":"./dist/Pagination.d.ts","import":"./dist/Pagination.js"},"./Pill":{"types":"./dist/Pill.d.ts","import":"./dist/Pill.js"},"./Popover":{"types":"./dist/Popover.d.ts","import":"./dist/Popover.js"},"./ProgressBar":{"types":"./dist/ProgressBar.d.ts","import":"./dist/ProgressBar.js"},"./PublisherPrefixInput":{"types":"./dist/PublisherPrefixInput.d.ts","import":"./dist/PublisherPrefixInput.js"},"./Radio":{"types":"./dist/Radio.d.ts","import":"./dist/Radio.js"},"./Rating":{"types":"./dist/Rating.d.ts","import":"./dist/Rating.js"},"./RecordPicker":{"types":"./dist/RecordPicker.d.ts","import":"./dist/RecordPicker.js"},"./Segmented":{"types":"./dist/Segmented.d.ts","import":"./dist/Segmented.js"},"./Select":{"types":"./dist/Select.d.ts","import":"./dist/Select.js"},"./Sheet":{"types":"./dist/Sheet.d.ts","import":"./dist/Sheet.js"},"./Skeleton":{"types":"./dist/Skeleton.d.ts","import":"./dist/Skeleton.js"},"./Slider":{"types":"./dist/Slider.d.ts","import":"./dist/Slider.js"},"./Spinner":{"types":"./dist/Spinner.d.ts","import":"./dist/Spinner.js"},"./Splitter":{"types":"./dist/Splitter.d.ts","import":"./dist/Splitter.js"},"./Stack":{"types":"./dist/Stack.d.ts","import":"./dist/Stack.js"},"./Stat":{"types":"./dist/Stat.d.ts","import":"./dist/Stat.js"},"./StatusDot":{"types":"./dist/StatusDot.d.ts","import":"./dist/StatusDot.js"},"./Stepper":{"types":"./dist/Stepper.d.ts","import":"./dist/Stepper.js"},"./StreamingText":{"types":"./dist/StreamingText.d.ts","import":"./dist/StreamingText.js"},"./Switch":{"types":"./dist/Switch.d.ts","import":"./dist/Switch.js"},"./Tabs":{"types":"./dist/Tabs.d.ts","import":"./dist/Tabs.js"},"./TagInput":{"types":"./dist/TagInput.d.ts","import":"./dist/TagInput.js"},"./Toast":{"types":"./dist/Toast.d.ts","import":"./dist/Toast.js"},"./TokenMeter":{"types":"./dist/TokenMeter.d.ts","import":"./dist/TokenMeter.js"},"./Toolbar":{"types":"./dist/Toolbar.d.ts","import":"./dist/Toolbar.js"},"./Tooltip":{"types":"./dist/Tooltip.d.ts","import":"./dist/Tooltip.js"},"./ToolCallCard":{"types":"./dist/ToolCallCard.d.ts","import":"./dist/ToolCallCard.js"},"./TraceTree":{"types":"./dist/TraceTree.d.ts","import":"./dist/TraceTree.js"},"./TreeView":{"types":"./dist/TreeView.d.ts","import":"./dist/TreeView.js"},"./highlight":{"types":"./dist/highlight.d.ts","import":"./dist/highlight.js"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.js"},"./notify":{"types":"./dist/notify.d.ts","import":"./dist/notify.js"},"./types":{"types":"./dist/types.d.ts","import":"./dist/types.js"}},"sideEffects":["./dist/styles/*.css"],"peerDependencies":{"react":">=18","react-dom":">=18","lucide-react":">=0.400","@tanstack/react-table":">=8","@tanstack/react-virtual":">=3"},"peerDependenciesMeta":{"@tanstack/react-table":{"optional":true},"@tanstack/react-virtual":{"optional":true}},"publishConfig":{"access":"public"},"_id":"@allandecastro/lume@0.2.0","gitHead":"a46d604a600b95ce69a1bf71ac5bb1e341c99fe5","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-pWKyhC5Ci954Jiz4Qb7nhtZA47Z0QZ9wmlcxc6hnzPH2jNoE1j37zBBALDzxuRDwcfrr7SdjYrvxs5fiyDn5eA==","shasum":"54e166bb738fee9174c18a1d504a61376a3f23c6","tarball":"https://registry.npmjs.org/@allandecastro/lume/-/lume-0.2.0.tgz","fileCount":301,"unpackedSize":1092115,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@allandecastro%2flume@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFuBf3JzyAOoSheMqhCdAUjKELlytyM6RiKYuv4VfBQFAiEA1DHnqODwryZbFD1N4JWbI16FpTdbsRKuHLNmyOZ/yWU="}]},"_npmUser":{"name":"allandecastro","email":"allan.de.castro@outlook.com"},"directories":{},"maintainers":[{"name":"allandecastro","email":"allan.de.castro@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lume_0.2.0_1778607135528_0.9844821415620326"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-12T17:32:15.459Z","0.2.0":"2026-05-12T17:32:15.707Z","modified":"2026-05-12T17:32:16.139Z"},"maintainers":[{"name":"allandecastro","email":"allan.de.castro@outlook.com"}],"description":"Lume — frosted-glass React component library: layout, forms, overlays, agentic UI, diagnostics, and Dataverse / Power Platform tooling.","homepage":"https://github.com/allandecastro/lume#readme","keywords":["react","design-system","components","ui","ui-library","frosted-glass","glassmorphism","dataverse","power-platform","ai-agents","agentic"],"repository":{"type":"git","url":"git+https://github.com/allandecastro/lume.git","directory":"src/lib"},"author":{"name":"Allan De Castro","email":"contact@allandecastro.com"},"bugs":{"url":"https://github.com/allandecastro/lume/issues"},"license":"MIT","readme":"
\n\n# Lume\n\n**A frosted-glass React design system — opinionated components for layout, forms, overlays, data, diagnostics, agentic UI, and Dataverse / Power Platform tooling.**\n\n[![npm version](https://img.shields.io/npm/v/@allandecastro/lume.svg?style=flat-square&color=ea4c89)](https://www.npmjs.com/package/@allandecastro/lume)\n[![bundle size](https://img.shields.io/bundlephobia/minzip/@allandecastro/lume?style=flat-square&color=blue)](https://bundlephobia.com/package/@allandecastro/lume)\n[![types](https://img.shields.io/npm/types/@allandecastro/lume?style=flat-square&color=3178c6)](https://www.npmjs.com/package/@allandecastro/lume)\n[![license](https://img.shields.io/npm/l/@allandecastro/lume?style=flat-square&color=green)](./LICENSE)\n[![React 19](https://img.shields.io/badge/React-19+-61dafb?style=flat-square&logo=react)](https://react.dev)\n\n
\n\n---\n\n## Why Lume\n\n- **60+ components, one cohesive aesthetic.** Frosted-glass, dense, dark-by-default-but-light-aware. Same vocabulary across every primitive.\n- **Themable with two CSS variables.** `--accent` and `--accent-link` re-colour the entire system. No fork.\n- **A11y is non-negotiable.** Every component ships with `jest-axe` assertions in its smoke tests. Overlays trap focus, return focus on close, and honour `prefers-reduced-motion`.\n- **Native semantics where they exist.** Checkbox / Radio / Switch wrap a real visually-hidden `` — keyboard, screen reader, form submission all just work.\n- **CSS Cascade Layers.** All styles ship in `@layer lume`, so your stylesheet wins by default with zero specificity wars.\n- **Tree-shakable by component.** Each component has its own ESM subpath (`@allandecastro/lume/Button`) so you only pay for what you import.\n- **TypeScript-first.** Strict types, no `any` in the public API, generics where they help.\n\n## Install\n\n```bash\nnpm install @allandecastro/lume react react-dom lucide-react\n```\n\nOptional peers (only required if you import the corresponding component):\n\n```bash\nnpm install @tanstack/react-table # required by DataTable\nnpm install @tanstack/react-virtual # required by LogViewer + DataTable's `virtualized` mode\n```\n\n## Use it\n\n```tsx\n// main.tsx\nimport \"@allandecastro/lume/styles\"; // tokens + base + component CSS, one bundle\nimport { Button, LumeProvider } from \"@allandecastro/lume\";\n\nexport function App() {\n return (\n \n \n \n );\n}\n```\n\nFor tightest tree-shaking, import per-component:\n\n```tsx\nimport { Button } from \"@allandecastro/lume/Button\";\nimport { Modal } from \"@allandecastro/lume/Modal\";\n```\n\n## A taste\n\n```tsx\nimport {\n Button, Field, TextInput, Modal, Toaster, notify,\n DataTable, Stepper, Composer, ChatMessage, MessageList,\n} from \"@allandecastro/lume\";\n\n// A primary action with a destructive twin\n\n\n\n// A field with validation state\n\n \n\n\n// A focus-trapped modal with semantic footer\n setOpen(false)} title=\"Discard changes?\"\n footer={<>\n \n \n }>\n

You have 4 unpublished changes.

\n\n\n// A sortable, filterable, paginated table — TanStack under the hood,\n// Lume styling on top\n\n\n// A conversation surface for agentic UIs\n\n \n Add a tier column to Account.\n \n \n Proposing cr_tier · Choice (A / B / C). Apply?\n \n\n\n\n// Global toasts — programmatic, no provider context needed\n\nnotify.success(\"Published to dev\");\n```\n\n## What's in the box\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Controls & identityButton · Pill · Switch · Spinner · StatusDot · Kbd · Avatar · Divider
LayoutStack · Inline · Grid · Splitter
Form compositionField · TextInput · TextArea · SearchInput · Checkbox · RadioGroup · Select · Combobox · MultiSelect · TagInput · NumberInput · Slider · DatePicker · OtpInput · Rating · ColorPicker · FormSection · FormRow · FormActions
NavigationTabs · Segmented · Pagination · Breadcrumbs · Stepper
Surfaces & feedbackCard · EmptyState · Banner · Callout · Toast · notify · Stat · ProgressBar · Skeleton · CodeBlock
OverlaysModal · ConfirmDialog · Sheet · Popover · Tooltip · HoverCard · CommandPalette · ContextMenu
DisclosureAccordion · Toolbar
DataDataTable (sortable / filterable / groupable / virtualizable) · TreeView
DiagnosticsLogViewer (virtualized) · NetworkInspector · JsonViewer
Agentic UIChatMessage · MessageList · Composer · ToolCallCard · StreamingText · TokenMeter · TraceTree
Power Platform / DataverseEnvironmentSwitcher · PublisherPrefixInput · ColumnEditor · RecordPicker
HooksuseTheme · useClickAway · useEscapeKey · useLumeStrings
Utilitiescx · toneClassMap · syntax highlighters (highlightXml, highlightSql, highlightJson, highlightCsharp, highlightJs, highlightTs, highlightPython)
\n\n## Theming\n\nTwo CSS variables drive the entire interactive palette:\n\n```css\n:root {\n --accent: hsl(355 80% 60%); /* primary — focus, selection, primary buttons */\n --accent-link: hsl(280 70% 60%); /* secondary — links, brand rail, agent surfaces */\n}\n```\n\nEvery other accent-derived token (`--border-accent`, `--surface-active`, `--text-accent`, ...) is computed from these via `color-mix(...)`. Per-route override works too:\n\n```css\n[data-app=\"finance\"] { --accent: hsl(150 60% 50%); }\n[data-app=\"ops\"] { --accent: hsl(30 90% 55%); }\n```\n\n**Light / dark mode** is `data-theme=\"light\"` or `\"dark\"` on ``:\n\n```ts\ndocument.documentElement.dataset.theme = \"light\";\n```\n\n…or use the bundled hook:\n\n```tsx\nimport { useTheme } from \"@allandecastro/lume\";\nconst { theme, toggle } = useTheme();\n```\n\n## Localization\n\nDefault strings (Cancel / Yes / No matches / Search... etc.) flow through `LumeProvider`:\n\n```tsx\nimport { LumeProvider } from \"@allandecastro/lume\";\n\n\n \n\n```\n\nWithout a provider, Lume uses `DEFAULT_LUME_STRINGS` (English).\n\n## Accessibility\n\n- **Focus management.** Dialogs (`Modal`, `ConfirmDialog`, `Sheet`, `CommandPalette`) trap Tab inside, capture focus on open, and return focus to the trigger on close.\n- **Native input semantics.** Visual checkboxes / radios / switches are backed by real `` elements (`opacity: 0`, not `display: none`) so keyboard navigation and screen-reader announcements come for free.\n- **Reduced motion.** Every infinite animation has an explicit `animation: none` override under `@media (prefers-reduced-motion: reduce)`. Overlay enter/exit transitions are zeroed too.\n- **Color contrast.** Default palettes meet WCAG AA in both themes. If you override `--accent` or any text token, re-verify against your background.\n- **Every smoke test asserts `axe(container)` returns no violations.** A few component-specific rules are scoped-skip with documentation; the rest pass clean.\n\n## Performance\n\n- **Per-component subpath exports** — `import { Button } from \"@allandecastro/lume/Button\"` for tightest tree-shaking.\n- **`LogViewer` virtualizes** automatically via `@tanstack/react-virtual` — 50k entries scroll smoothly.\n- **`DataTable` virtualizes opt-in** via the `virtualized` prop (incompatible with grouping + pagination — virtualization is for flat row streams).\n- **Bundle budgets enforced in CI** — every component has a `size-limit` cap; PRs that bloat are flagged.\n\n## SSR safety\n\nEvery `document` / `window` / `navigator` reference is inside a `useEffect`, an event handler, or guarded with `typeof document === \"undefined\"`. Portaled overlays render `null` until hydration. Components render to a string on the server without throwing.\n\n## Browser support\n\nModern evergreen browsers — Chrome / Firefox / Safari / Edge latest. Uses `color-mix()` (Baseline 2023) and CSS `@layer` (Baseline 2022). IE is not supported.\n\n## TypeScript\n\nThe package ships its own `.d.ts` files (built via `vite-plugin-dts`) — no `@types/` package needed. Requires TS 5+ for the strict subpath exports. React 19 types required (the lib uses `React.ReactNode` patterns that React 18 types accept but emit deprecation warnings on).\n\n## Contributing\n\nBug reports, feature ideas, and PRs welcome. See [CONTRIBUTING.md](https://github.com/allandecastro/lume/blob/main/CONTRIBUTING.md) for setup, conventions, and the new-component checklist.\n\n## License\n\nMIT — see [LICENSE](./LICENSE). Free for commercial and personal use. Attribution appreciated but not required.\n\n---\n\nBuilt with React 19 · Vite · TanStack Table · lucide-react · @tanstack/react-virtual\n","readmeFilename":"README.md","_rev":"1-a3812196b8478314e47842903ef1904c"}