{"_id":"@axiora-ui/ui-core","_rev":"3-1807ccfafb19b949315ec1d52e5bd608","name":"@axiora-ui/ui-core","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@axiora-ui/ui-core","version":"1.0.0","keywords":["axiora-ui","design-system","react","components","ui","button","typescript"],"author":{"name":"axiora-ui"},"license":"MIT","_id":"@axiora-ui/ui-core@1.0.0","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"dist":{"shasum":"f3e6a645790c1a431fe26b6c3d759168c8ca9cc3","tarball":"https://registry.npmjs.org/@axiora-ui/ui-core/-/ui-core-1.0.0.tgz","fileCount":4,"integrity":"sha512-26ATh4P30S7DlEfxTcOBANquvTXHYqEHM6him/eda6CsS0U0iuAG5oKu2hiVwLVjMOxqbrUZjpK3LmXhadp0Qw==","signatures":[{"sig":"MEUCIQC25n8ADRz+Kh3ajBL5Y15yGWgzJ5nbs5YZBBktT7PvsAIgSEmpmq0GcO8B5xlV7TIX5qSzy+3CGgwWyS7kCrMeGWQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9929},"type":"module","_from":"file:axiora-ui-ui-core-1.0.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"lint":"tsc --noEmit -p tsconfig.json","test":"vitest run","build":"tsup src/index.ts --format esm --dts --clean --external react,react-dom,@axiora-ui/ui-tokens"},"_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"_resolved":"/tmp/44302cb461b2dc5871cc5515dd55dda5/axiora-ui-ui-core-1.0.0.tgz","_integrity":"sha512-26ATh4P30S7DlEfxTcOBANquvTXHYqEHM6him/eda6CsS0U0iuAG5oKu2hiVwLVjMOxqbrUZjpK3LmXhadp0Qw==","_npmVersion":"10.9.8","description":"Core React UI components for the Axiora UI design system.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@axiora-ui/ui-tokens":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-core_1.0.0_1782386960265_0.15443738578299615","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@axiora-ui/ui-core","version":"1.1.0","keywords":["axiora-ui","design-system","react","components","ui","button","typescript"],"author":{"name":"axiora-ui"},"license":"MIT","_id":"@axiora-ui/ui-core@1.1.0","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"dist":{"shasum":"3b3f17e01e9db147bf102286d6b5955e6db186cd","tarball":"https://registry.npmjs.org/@axiora-ui/ui-core/-/ui-core-1.1.0.tgz","fileCount":4,"integrity":"sha512-flL94ySkKeAxAAL8zPsi8UhsKQ/Eriu/CwsiZfiHz6j9toIeNRes23/Pk7sSrzVm1xEBEAaf6ZnuyM7k1tOHzg==","signatures":[{"sig":"MEUCIQCy2bueL34j+pYsrIttUmRSJY1W76tL9hfsiSpJj1RsWAIgC+hgkFkpkEjyvPSLlD7VGp672Q4R69w06twiSA/H1gk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9969},"type":"module","_from":"file:axiora-ui-ui-core-1.1.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"lint":"tsc --noEmit -p tsconfig.json","test":"vitest run","build":"tsup src/index.ts --format esm --dts --clean --external react,react-dom,@axiora-ui/ui-tokens"},"_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"_resolved":"/tmp/29647ae6562e9d523051c782826d67a2/axiora-ui-ui-core-1.1.0.tgz","_integrity":"sha512-flL94ySkKeAxAAL8zPsi8UhsKQ/Eriu/CwsiZfiHz6j9toIeNRes23/Pk7sSrzVm1xEBEAaf6ZnuyM7k1tOHzg==","_npmVersion":"10.9.8","description":"Core React UI components for the Axiora UI design system.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@axiora-ui/ui-tokens":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-core_1.1.0_1782909036021_0.1882394716353366","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"_id":"@axiora-ui/ui-core@2.0.0","dist":{"shasum":"4744a741c226dbe656899610f44ec783a8423fae","tarball":"https://registry.npmjs.org/@axiora-ui/ui-core/-/ui-core-2.0.0.tgz","fileCount":5,"integrity":"sha512-9hlBBbW/7aL2OO5ZmyvG1yT1RG3uMUemgJXchsdM/vVxocq920/Zdw6debspFEu7/CkEB3QPSy3gEvHiQg8pMg==","signatures":[{"sig":"MEUCIBZ6/ZxiXjmGzZRNshi2htow7K7LcWI1vN3M8awpNOVUAiEA9i3RUxBov8AJL1EYWQa7DVTOhWsR+yaLdvgaQKs/200=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIF/TbdQ/uKmZoKp0x/MQaACQdI34Li+EDNE3apzxMGXuAiEArfNh/pJoQ2+Jk/iWv1gb9j3pZ890cTLALM846SOxHjA="}],"unpackedSize":178611},"name":"@axiora-ui/ui-core","type":"module","_from":"file:axiora-ui-ui-core-2.0.0.tgz","author":{"name":"axiora-ui"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles/components.css"},"license":"MIT","scripts":{"lint":"tsc --noEmit -p tsconfig.json","test":"vitest run","build":"tsup src/index.ts --format esm --dts --clean --external react,react-dom,@axiora-ui/ui-tokens,@radix-ui/* && mkdir -p dist/styles && cp src/styles/components.css dist/styles/components.css"},"version":"2.0.0","_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"keywords":["axiora-ui","design-system","react","components","ui","button","typescript"],"_resolved":"/tmp/2cc89863fba5e4bdf9f9840c29499790/axiora-ui-ui-core-2.0.0.tgz","_integrity":"sha512-9hlBBbW/7aL2OO5ZmyvG1yT1RG3uMUemgJXchsdM/vVxocq920/Zdw6debspFEu7/CkEB3QPSy3gEvHiQg8pMg==","_npmVersion":"10.9.8","description":"Core React UI components for the Axiora UI design system.","directories":{},"maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"sideEffects":["**/*.css"],"_nodeVersion":"22.23.2","dependencies":{"@axiora-ui/ui-tokens":"2.0.0","@radix-ui/react-slot":"^1.3.3","@radix-ui/react-tabs":"^1.1.21","@radix-ui/react-toast":"^1.2.15","@radix-ui/react-avatar":"^1.2.6","@radix-ui/react-dialog":"^1.1.23","@radix-ui/react-select":"^2.3.7","@radix-ui/react-slider":"^1.4.7","@radix-ui/react-switch":"^1.3.7","@radix-ui/react-toggle":"^1.1.18","@radix-ui/react-popover":"^1.1.23","@radix-ui/react-tooltip":"^1.2.16","@radix-ui/react-progress":"^1.1.16","@radix-ui/react-accordion":"^1.2.20","@radix-ui/react-separator":"^1.1.15","@radix-ui/react-hover-card":"^1.1.23","@radix-ui/react-collapsible":"^1.1.20","@radix-ui/react-scroll-area":"^1.2.18","@radix-ui/react-alert-dialog":"^1.1.23","@radix-ui/react-aspect-ratio":"^1.1.15","@radix-ui/react-context-menu":"^2.3.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@axiora-ui/ui-themes":"2.0.0","@testing-library/react":"^16.3.3","@testing-library/jest-dom":"^6.9.1","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-core_2.0.0_1790005920037_0.6005609648301502"}}},"time":{"created":"2026-06-25T11:29:20.158Z","modified":"2026-09-21T15:52:00.281Z","1.0.0":"2026-06-25T11:29:20.411Z","1.1.0":"2026-07-01T12:30:36.171Z","2.0.0":"2026-09-21T15:52:00.127Z"},"author":{"name":"axiora-ui"},"license":"MIT","keywords":["axiora-ui","design-system","react","components","ui","button","typescript"],"description":"Core React UI components for the Axiora UI design system.","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"readme":"# @axiora-ui/ui-core\n\nReact UI components for the Axiora design system — shadcn-inspired, built on **Radix UI**, styled with **CSS custom properties** from `@axiora-ui/ui-themes`.\n\n**Status:** ✅ **42 components implemented** · Storybook stories for all · Theme-aware light/dark + brand presets\n\n---\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Setup (required)](#setup-required)\n- [Component inventory](#component-inventory)\n- [Usage examples](#usage-examples)\n- [Theming](#theming)\n- [Storybook](#storybook)\n- [Toast notifications](#toast-notifications)\n- [Removed from scope](#removed-from-scope)\n- [Build](#build)\n\n---\n\n## Installation\n\n```json\n\"dependencies\": {\n \"@axiora-ui/ui-core\": \"workspace:*\",\n \"@axiora-ui/ui-themes\": \"workspace:*\"\n}\n```\n\n**Peer dependencies:** `react` and `react-dom` ^19.0.0\n\n---\n\n## Setup (required)\n\n1. Import the stylesheet **once** in your app entry:\n\n```tsx\nimport \"@axiora-ui/ui-core/styles.css\";\n```\n\n2. Wrap your app with `ThemeProvider`:\n\n```tsx\nimport { ThemeProvider } from \"@axiora-ui/ui-themes\";\n\n\n \n;\n```\n\nWithout both steps, components render but won't follow your theme (labels, surfaces, primary colors, etc.).\n\n---\n\n## Component inventory\n\n| Category | Components | Storybook |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |\n| **Form** | `Button`, `Label`, `Input`, `Textarea`, `Select` (+ compound API), `NativeSelect`, `Checkbox`, `RadioGroup` / `Radio`, `Switch`, `Slider`, `Toggle` | ✅ All |\n| **Overlay** | `Dialog`, `Drawer`, `AlertDialog`, `Popover`, `Tooltip`, `HoverCard`, `ContextMenu`, `Toast` | ✅ All |\n| **Layout** | `Card`, `Badge`, `Tag` / `Chip`, `Alert`, `Separator`, `Avatar`, `Skeleton`, `Progress`, `Spinner`, `AspectRatio`, `Table`, `Pagination`, `Breadcrumb`, `ScrollArea` | ✅ All |\n| **Navigation** | `Tabs`, `Accordion`, `Collapsible` | ✅ All |\n| **Advanced** | `Combobox`, `Calendar`, `DatePicker`, `TimePicker`, `MultiSelect`, `Command` (palette) | ✅ All |\n\n### Highlights\n\n- **Select** — Radix dropdown with groups, checkmarks, error auto-clear on valid selection\n- **Switch** — Button-like track (secondary off, primary on) for settings toggles\n- **Toggle** — Formatting chip (subtle border; primary tint when pressed) for toolbar actions\n- **Drawer** — Side panel built on Radix Dialog; `side` prop (`left`, `right`, `top`, `bottom`)\n- **Toast** — Non-blocking notifications via `Toaster` + imperative `toast()` API; destructive variant, swipe dismiss\n- **AlertDialog** — Native alert-dialog primitives; Cancel (secondary) + Action (primary/danger)\n- **Table** — Sortable column headers via `sortable`, `sortDirection`, `onSort` on `TableHead`\n- **Tag / Chip** — Dismissable filter labels with `default`, `secondary`, and `outline` variants\n- **useTableSort** — Client-side column sorting hook for tables\n- **Combobox** — Searchable select with filterable listbox inside a Popover\n- **DatePicker** — Popover date input built on Calendar with month navigation\n- **Command** — Command palette with `CommandDialog`, filterable `CommandInput`, groups, and keyboard navigation\n- **TimePicker** — Hour/minute popover picker with 12h/24h display; errors clear on selection\n- **MultiSelect** — Searchable multi-value select with checkbox items\n- **useTableFilter** / **useTablePagination** — Client-side table search and paging (see `Core/Table/FullDataTable`)\n- **Form fields** — Shared label, helper text, and error styling via `.ax-label`, `.ax-input`, etc.\n\n---\n\n## Usage examples\n\n### Form\n\n```tsx\nimport { Button, Input, Checkbox, Select } from \"@axiora-ui/ui-core\";\n\n\n\n\n\n\n\n```\n\n### Dialog & AlertDialog\n\n```tsx\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n DialogFooter,\n} from \"@axiora-ui/ui-core\";\nimport {\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogCancel,\n AlertDialogAction,\n} from \"@axiora-ui/ui-core\";\n\n// Standard dialog\n\n\n// Destructive confirmation\n\n \n \n \n Are you sure?\n This cannot be undone.\n \n \n Cancel\n Continue\n \n \n\n```\n\n### Drawer (side panel)\n\n```tsx\nimport {\n Drawer,\n DrawerTrigger,\n DrawerContent,\n DrawerHeader,\n DrawerTitle,\n DrawerDescription,\n DrawerFooter,\n DrawerClose,\n} from \"@axiora-ui/ui-core\";\n\n\n \n \n \n \n \n Settings\n Manage your account preferences.\n \n \n \n \n \n \n \n \n;\n```\n\n### Data display (Table, Tag, Pagination)\n\n```tsx\nimport {\n Table,\n TableHeader,\n TableBody,\n TableRow,\n TableHead,\n TableCell,\n Tag,\n Pagination,\n useTableSort,\n} from \"@axiora-ui/ui-core\";\n\nconst rows = [\n { name: \"Alice\", role: \"Admin\", status: \"Active\" },\n { name: \"Bob\", role: \"Editor\", status: \"Pending\" },\n];\n\nfunction UserTable() {\n const { sortedData, sortKey, sortDirection, toggleSort } = useTableSort(\n rows,\n {\n initialKey: \"name\",\n },\n );\n\n return (\n <>\n \n {}}>\n Active\n \n {}}>\n Admin\n \n
\n \n \n \n toggleSort(\"name\")}\n >\n Name\n \n Role\n Status\n \n \n \n {sortedData.map((row) => (\n \n {row.name}\n {row.role}\n {row.status}\n \n ))}\n \n
\n {}} />\n \n );\n}\n```\n\nSee **Core/Table → DataDisplay** in Storybook for a full Card + Tags + Table + Pagination example.\n\n### Advanced inputs (Combobox, DatePicker, Command)\n\n```tsx\nimport {\n Combobox,\n DatePicker,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n} from \"@axiora-ui/ui-core\";\n\n {}}\n/>;\n\n {}} />;\n\n\n \n \n No results.\n \n {}}>New file\n {}}>Open settings\n \n \n;\n```\n\n### Button variants\n\n| Variant | Use for |\n| ----------- | ------------------- |\n| `primary` | Main call-to-action |\n| `secondary` | Secondary / cancel |\n| `danger` | Destructive actions |\n\nColors come from `--color-primary`, `--color-surface`, `--color-danger`, etc. — not hard-coded hex in components.\n\n---\n\n## Theming\n\nComponents read CSS variables set by `@axiora-ui/ui-themes` `ThemeProvider`:\n\n| Variable | Used for |\n| -------------------- | ------------------------------------- |\n| `--color-primary` | Buttons, switch on-state, focus rings |\n| `--color-foreground` | Text, labels |\n| `--color-background` | Page / container background |\n| `--color-surface` | Inputs, cards, secondary buttons |\n| `--color-border` | Borders, dividers |\n| `--radius-base` | Border radius |\n| `--font-family-base` | Typography |\n\nOverride brand colors:\n\n```tsx\n\n \n\n```\n\nDark mode:\n\n```tsx\n\n \n\n```\n\n---\n\n## Storybook\n\nFrom the monorepo root:\n\n```bash\npnpm storybook\n```\n\nBrowse **Core/** for all component stories. Use the **Theme** toolbar to preview light, dark, and brand presets.\n\n---\n\n## Toast notifications\n\nMount `` once at the app root, then call `toast()` from anywhere:\n\n```tsx\nimport { Toaster, toast } from \"@axiora-ui/ui-core\";\n\n;\ntoast({ title: \"Saved\", description: \"Your changes were saved.\" });\ntoast({ variant: \"destructive\", title: \"Error\", description: \"Try again.\" });\ntoast({\n title: \"Archived\",\n description: \"You can undo this action.\",\n actionLabel: \"Undo\",\n onAction: () => toast({ title: \"Restored\" }),\n});\n```\n\n## Removed from scope\n\n| Component | Notes |\n| -------------- | ------------------------------------- |\n| `DropdownMenu` | Use `ContextMenu` or `Select` instead |\n\nAll 42 components have Vitest coverage (render, variants, interactions). Run:\n\n```bash\npnpm test --filter @axiora-ui/ui-core\n```\n\nTheming and validation are also covered in `@axiora-ui/ui-themes`.\n\n---\n\n## Build\n\n```bash\npnpm build --filter @axiora-ui/ui-core\n```\n\nOutput:\n\n- `dist/index.js` + `dist/index.d.ts`\n- `dist/styles/components.css` (import as `@axiora-ui/ui-core/styles.css`)\n\nRadix packages, React, and `@axiora-ui/ui-tokens` are externalized — not bundled into the output.\n","readmeFilename":"README.md"}