{"_id":"@alex-oden/ui","_rev":"2-67201e923f4bb3fca7ad2c5da09d9fea","name":"@alex-oden/ui","dist-tags":{"latest":"1.3.3"},"versions":{"1.2.0":{"name":"@alex-oden/ui","version":"1.2.0","_id":"@alex-oden/ui@1.2.0","maintainers":[{"name":"alex-oden","email":"info@alexoden.com"}],"homepage":"https://github.com/alex-oden/np-design-lib#readme","bugs":{"url":"https://github.com/alex-oden/np-design-lib/issues"},"dist":{"shasum":"d53453c8dee4f133a015b86463e9cf56b0601b21","tarball":"https://registry.npmjs.org/@alex-oden/ui/-/ui-1.2.0.tgz","fileCount":115,"integrity":"sha512-Gp0f6phcTExA/BV5eXem/I8zhSMP5QiVQrCW2c5i/EGpu5iEYLmx1LbLgfW+Q5JFdhw06mV/ug7Pv6LQYE7Kxg==","signatures":[{"sig":"MEQCIFVPBsscw8Jf61Bm6jiUQBQBREm73rXfvHGsdHIV5MZCAiAHvib27Z/GSt7sbkUlSR4Md0S+DVaSe0oUCYy8+c8jGA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":486247},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css","./tokens.css":"./dist/tokens.css"},"gitHead":"3ca215f513fcf9b26b4d0b05ff67a61cfafddf27","private":false,"scripts":{"dev":"vite dev","lint":"eslint .","build":"vite build","format":"prettier --write .","preview":"vite preview","build:dev":"vite build --mode development","build:lib":"rm -rf dist && vite build --config vite.lib.config.ts","typecheck":"tsgo -p tsconfig.lib.json"},"_npmUser":{"name":"alex-oden","email":"info@alexoden.com"},"repository":{"url":"git+https://github.com/alex-oden/np-design-lib.git","type":"git"},"_npmVersion":"10.9.8","description":"React 19 component library that ships every primitive from the NeosPower design system as tree-shakeable ES modules, ready to drop into any Vite + Tailwind v4 project. Radix under the hood, HSL tokens on top, dark-first.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.23.1","dependencies":{"zod":"^3.24.2","clsx":"^2.1.1","cmdk":"^1.1.1","vaul":"^1.1.2","sonner":"^2.0.7","date-fns":"^4.1.0","recharts":"^2.15.4","input-otp":"^1.4.2","lucide-react":"^0.575.0","tailwind-merge":"^3.5.0","tw-animate-css":"^1.3.4","react-hook-form":"^7.71.2","react-day-picker":"^9.14.0","@hookform/resolvers":"^5.2.2","@radix-ui/react-slot":"^1.2.4","@radix-ui/react-tabs":"^1.1.13","embla-carousel-react":"^8.6.0","@radix-ui/react-label":"^2.1.8","@radix-ui/react-avatar":"^1.1.11","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.3.6","@radix-ui/react-switch":"^1.3.1","@radix-ui/react-toggle":"^1.1.10","react-resizable-panels":"^4.6.5","@radix-ui/react-menubar":"^1.1.16","@radix-ui/react-popover":"^1.1.15","@radix-ui/react-tooltip":"^1.2.8","@radix-ui/react-checkbox":"^1.3.5","@radix-ui/react-progress":"^1.1.10","class-variance-authority":"^0.7.1","@radix-ui/react-accordion":"^1.2.12","@radix-ui/react-separator":"^1.1.8","@radix-ui/react-hover-card":"^1.1.15","@radix-ui/react-collapsible":"^1.1.12","@radix-ui/react-radio-group":"^1.4.1","@radix-ui/react-scroll-area":"^1.2.10","@radix-ui/react-alert-dialog":"^1.1.15","@radix-ui/react-aspect-ratio":"^1.1.8","@radix-ui/react-context-menu":"^2.2.16","@radix-ui/react-toggle-group":"^1.1.11","@radix-ui/react-dropdown-menu":"^2.1.16","@radix-ui/react-navigation-menu":"^1.2.14"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.16","nitro":"3.0.260603-beta","eslint":"^9.32.0","globals":"^15.15.0","prettier":"^3.7.3","@eslint/js":"^9.32.0","typescript":"^5.8.3","@types/node":"^22.16.5","@types/react":"^19.2.0","vite-plugin-dts":"^5.0.3","@types/react-dom":"^19.2.0","@tailwindcss/vite":"^4.2.1","typescript-eslint":"^8.56.1","vite-tsconfig-paths":"^6.0.2","@vitejs/plugin-react":"^5.2.0","@tanstack/react-query":"^5.101.1","@tanstack/react-start":"^1.168.26","@tanstack/react-router":"^1.170.16","eslint-config-prettier":"^10.1.1","eslint-plugin-prettier":"^5.2.6","@tanstack/router-plugin":"^1.168.18","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","@lovable.dev/vite-tanstack-config":"2.7.4"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_1.2.0_1784213964479_0.5031517763973492","host":"s3://npm-registry-packages-npm-production"}},"1.3.3":{"name":"@alex-oden/ui","version":"1.3.3","private":false,"type":"module","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/styles.css","./tokens.css":"./dist/tokens.css"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/alex-oden/np-design-lib.git"},"scripts":{"dev":"vite dev","build":"vite build","build:dev":"vite build --mode development","preview":"vite preview","lint":"eslint .","format":"prettier --write .","build:lib":"rm -rf dist && vite build --config vite.lib.config.ts","typecheck":"tsgo -p tsconfig.lib.json"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@hookform/resolvers":"^5.2.2","@radix-ui/react-accordion":"^1.2.12","@radix-ui/react-alert-dialog":"^1.1.15","@radix-ui/react-aspect-ratio":"^1.1.8","@radix-ui/react-avatar":"^1.1.11","@radix-ui/react-checkbox":"^1.3.5","@radix-ui/react-collapsible":"^1.1.12","@radix-ui/react-context-menu":"^2.2.16","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-dropdown-menu":"^2.1.16","@radix-ui/react-hover-card":"^1.1.15","@radix-ui/react-label":"^2.1.8","@radix-ui/react-menubar":"^1.1.16","@radix-ui/react-navigation-menu":"^1.2.14","@radix-ui/react-popover":"^1.1.15","@radix-ui/react-progress":"^1.1.10","@radix-ui/react-radio-group":"^1.4.1","@radix-ui/react-scroll-area":"^1.2.10","@radix-ui/react-select":"^2.2.6","@radix-ui/react-separator":"^1.1.8","@radix-ui/react-slider":"^1.3.6","@radix-ui/react-slot":"^1.2.4","@radix-ui/react-switch":"^1.3.1","@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-toggle":"^1.1.10","@radix-ui/react-toggle-group":"^1.1.11","@radix-ui/react-tooltip":"^1.2.8","class-variance-authority":"^0.7.1","clsx":"^2.1.1","cmdk":"^1.1.1","date-fns":"^4.1.0","embla-carousel-react":"^8.6.0","input-otp":"^1.4.2","lucide-react":"^0.575.0","react-day-picker":"^9.14.0","react-hook-form":"^7.71.2","react-resizable-panels":"^4.6.5","recharts":"^2.15.4","sonner":"^2.0.7","tailwind-merge":"^3.5.0","tw-animate-css":"^1.3.4","vaul":"^1.1.2","zod":"^3.24.2"},"devDependencies":{"@eslint/js":"^9.32.0","@lovable.dev/vite-tanstack-config":"2.7.7","@tailwindcss/vite":"^4.2.1","@tanstack/react-query":"^5.101.1","@tanstack/react-router":"^1.170.16","@tanstack/react-start":"^1.168.26","@tanstack/router-plugin":"^1.168.18","@types/node":"^22.16.5","@types/react":"^19.2.0","@types/react-dom":"^19.2.0","@vitejs/plugin-react":"^5.2.0","eslint":"^9.32.0","eslint-config-prettier":"^10.1.1","eslint-plugin-prettier":"^5.2.6","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","globals":"^15.15.0","nitro":"3.0.260603-beta","prettier":"^3.7.3","typescript":"^5.8.3","typescript-eslint":"^8.56.1","vite":"^8.0.16","vite-plugin-dts":"^5.0.3","vite-tsconfig-paths":"^6.0.2"},"_id":"@alex-oden/ui@1.3.3","gitHead":"4f9212f00c42a926ca61406c0323dbe4c5aec49c","description":"React 19 component library that ships every primitive from the NeosPower design system as tree-shakeable ES modules, ready to drop into any Vite + Tailwind v4 project. Radix under the hood, HSL tokens on top, dark-first.","bugs":{"url":"https://github.com/alex-oden/np-design-lib/issues"},"homepage":"https://github.com/alex-oden/np-design-lib#readme","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-M6dO4acw5nXrDuVXeo75Mki/WlWjBmhExKGN2iS73vwqo2xs/KdNJGsTbp+D4tXuXiqukkTpJFoaZtUygVfUFw==","shasum":"4b539c7d25e6d805fe41e4cc7a730f57ccd915f6","tarball":"https://registry.npmjs.org/@alex-oden/ui/-/ui-1.3.3.tgz","fileCount":133,"unpackedSize":534289,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDqLku4wUUVZc0XoroBkrpcVQOHMwcaEHiFQn30XkBFZAiBoV1KsLL79zBJ5yMI4823L1xFGVuIFdij/QtcW//+EJg=="}]},"_npmUser":{"name":"alex-oden","email":"info@alexoden.com"},"directories":{},"maintainers":[{"name":"alex-oden","email":"info@alexoden.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_1.3.3_1784752349895_0.9924090210566547"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-16T14:59:24.289Z","modified":"2026-07-22T20:32:30.202Z","1.2.0":"2026-07-16T14:59:24.641Z","1.3.3":"2026-07-22T20:32:30.083Z"},"bugs":{"url":"https://github.com/alex-oden/np-design-lib/issues"},"homepage":"https://github.com/alex-oden/np-design-lib#readme","repository":{"type":"git","url":"git+https://github.com/alex-oden/np-design-lib.git"},"description":"React 19 component library that ships every primitive from the NeosPower design system as tree-shakeable ES modules, ready to drop into any Vite + Tailwind v4 project. Radix under the hood, HSL tokens on top, dark-first.","maintainers":[{"name":"alex-oden","email":"info@alexoden.com"}],"readme":"# @alex-oden/ui\n\nReact 19 component library that ships every primitive from the NeosPower\ndesign system as tree-shakeable ES modules, ready to drop into any Vite +\nTailwind v4 project. Radix under the hood, HSL tokens on top, dark-first.\n\n## Install\n\nPublished on the public npm registry:\n\n```bash\nnpm i @alex-oden/ui\n# or: bun add @alex-oden/ui\n# or: pnpm add @alex-oden/ui\n```\n\nPeer dependencies (make sure your app already has them):\n\n- `react` ^19\n- `react-dom` ^19\n- `tailwindcss` ^4\n\n## Quick start in a consumer project\n\nThese four files are enough to render a working page with `@alex-oden/ui`.\n\n### 1. `package.json`\n\n```json\n{\n  \"name\": \"my-consumer-app\",\n  \"private\": true,\n  \"version\": \"0.0.0\",\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\"\n  },\n  \"dependencies\": {\n    \"@alex-oden/ui\": \"^1.3.3\",\n    \"react\": \"^19.0.0\",\n    \"react-dom\": \"^19.0.0\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/vite\": \"^4.2.1\",\n    \"@types/react\": \"^19.2.0\",\n    \"@types/react-dom\": \"^19.2.0\",\n    \"@vitejs/plugin-react\": \"^5.2.0\",\n    \"tailwindcss\": \"^4.2.1\",\n    \"typescript\": \"^5.8.3\",\n    \"vite\": \"^6.0.0\"\n  }\n}\n```\n\n### 2. `src/styles.css`\n\nKeep the two `@import` lines at the very top of the file, before any `@theme` or selector rules:\n\n```css\n@import \"tailwindcss\";\n@import \"@alex-oden/ui/tokens.css\";\n@source \"../node_modules/@alex-oden/ui/dist\";\n```\n\n- `tokens.css` registers the NeosPower theme (`@theme`, `:root`, keyframes, utilities, dark mode).\n- `@source` tells Tailwind v4 to scan the compiled library so the utility classes used inside components are kept.\n\nIf you prefer the library to also bring in Tailwind's base (so you can skip `@import \"tailwindcss\"` in your own file), use `@import \"@alex-oden/ui/styles.css\"` instead.\n\n### 3. `src/App.tsx`\n\n```tsx\nimport { Button, Field, Input, SurfaceCard } from \"@alex-oden/ui\";\n\nexport function App() {\n  return (\n    <SurfaceCard className=\"max-w-md p-6 mx-auto mt-12\">\n      <Field label=\"Email\">\n        <Input type=\"email\" placeholder=\"you@example.com\" />\n      </Field>\n      <Button className=\"mt-4 w-full\">Continue</Button>\n    </SurfaceCard>\n  );\n}\n```\n\n### 4. `index.html`\n\nLoad the `Geist` and `Geist Mono` fonts with `<link>` tags in the `<head>`:\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link\n  rel=\"stylesheet\"\n  href=\"https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap\"\n/>\n```\n\nAfter `bun install` (or `npm install`) and `bun run dev`, the app should render the example card.\n\n## Per-component imports\n\nIf you only need a few components, subpath imports keep the import list short:\n\n```ts\nimport { Button } from \"@alex-oden/ui/components/ui/button\";\nimport { Card } from \"@alex-oden/ui/components/ui/card\";\n```\n\n## Fonts\n\nThe tokens declare `Geist` (sans) and `Geist Mono`. Load them via\n`<link>` tags in your root document — never `@import` a remote font URL\ninside `src/styles.css` (Lightning-CSS resolves imports from disk).\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link\n  rel=\"stylesheet\"\n  href=\"https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap\"\n/>\n```\n\nOr install self-hosted `@fontsource-variable/geist` and import from there.\n\n## Components\n\n| Component | Exports | Description |\n| --------- | ------- | ----------- |\n| `accordion` | Accordion, AccordionContent, AccordionItem, AccordionTrigger |  |\n| `alert-dialog` |  |  |\n| `alert` | Alert, AlertDescription, AlertProps, AlertTitle, Variants | Alert — inline message. Pair the icon slot with an AlertTitle + AlertDescription. varian |\n| `aspect-ratio` | AspectRatio |  |\n| `avatar` | Avatar, AvatarFallback, AvatarImage |  |\n| `badge` | Badge, BadgeProps, Count, Variants | Badge — compact status signal in monospace. variant: default (soft) · solid (brand grad |\n| `banner` | Banner, BannerProps, HTMLAttributes, HTMLDivElement, Omit, React | Banner — page-level message with a brand gradient edge. Put a title + text on the left;  |\n| `border-glow` | BorderGlow, BorderGlowProps, HTMLAttributes, HTMLDivElement, React | BorderGlow — an interactive card whose edges light up as the cursor approaches them. Ada |\n| `breadcrumb` |  |  |\n| `button` | Button, ButtonProps, Variants | Button — the primary action element. variant: default (brand gradient) · secondary · g |\n| `calendar` | Calendar, CalendarDayButton |  |\n| `card` | Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter | **Deprecated shim** — routes `variant` prop to the named components below. Prefer the explicit names. |\n| `surface-card` | SurfaceCard | Neutral bordered container. Use for forms, settings panels, generic content blocks. |\n| `glass-card` | GlassCard | Translucent surface with backdrop blur. Use for hero overlays and panels over gradients. |\n| `interactive-card` | InteractiveCard | Clickable tile that renders `<button>` with hover lift + brand glow + focus ring. |\n| `metric-card` | MetricCard | Single KPI: `label`, `value`, `unit`, `delta`, `trend` (`up`/`down`/`flat`). |\n| `stat-card` | StatCard | Strip of 2–4 small metrics; pass `items: { label, value, unit? }[]`. |\n| `feature-card` | FeatureCard | Marketing feature: `icon` + `title` + `description`. |\n| `media-card` | MediaCard | Image/video slot on top, content below; override with `aspectClassName`. |\n| `alert-card` | AlertCard, AlertCardTone | Inline status block. `tone`: `info` \\| `success` \\| `warning` \\| `danger`. |\n| `glow-card` | GlowCard, GlowPreset | `BorderGlow` wrapper. `preset`: `brand` \\| `violet` \\| `success` \\| `danger` \\| `info`. |\n| `carousel` |  |  |\n| `chart` | ChartConfig |  |\n| `checkbox` | Checkbox | Checkbox — brand-gradient fill when checked. Uses an OPAQUE border (--brand-border) so t |\n| `collapsible` | Collapsible, CollapsibleContent, CollapsibleTrigger |  |\n| `command` |  |  |\n| `context-menu` |  |  |\n| `dialog` |  |  |\n| `drawer` |  |  |\n| `dropdown-menu` |  |  |\n| `field` | Field, FieldProps, HTMLAttributes, HTMLDivElement, React | Field — composes a Label, a control, an optional hint, and an optional validation messag |\n| `form` |  |  |\n| `hover-card` | HoverCard, HoverCardContent, HoverCardTrigger |  |\n| `input-otp` | InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot |  |\n| `input` | HTMLInputElement, Input, InputHTMLAttributes, InputProps, React | leadingIcon?: React.ReactNode; trailingIcon?: React.ReactNode; } |\n| `label` | Label |  |\n| `menubar` |  |  |\n| `navigation-menu` |  |  |\n| `pagination` |  |  |\n| `popover` | Popover, PopoverAnchor, PopoverContent, PopoverTrigger |  |\n| `progress` | Progress, ProgressProps | Progress — brand-filled bar. Pass `value` (0–100) for determinate, or `indeterminate`  |\n| `radio-group` | RadioGroup, RadioGroupItem | RadioGroupItem — brand-gradient fill + white dot when selected. Opaque border keeps the  |\n| `resizable` | ResizableHandle, ResizablePanel, ResizablePanelGroup |  |\n| `scroll-area` | ScrollArea, ScrollBar |  |\n| `segmented` | Segmented, SegmentedOption, SegmentedProps | Segmented — a compact single-choice control with a sliding brand thumb. Controlled: pass |\n| `select` | HTMLSelectElement, React, Select, SelectHTMLAttributes, SelectProps | Select — native styled select. (For a listbox with search/multi-select, use a Radix-base |\n| `separator` | Separator |  |\n| `sheet` |  | Sheet — a Dialog that slides in from an edge (drawer). Built on Radix Dialog for focus-t |\n| `sidebar` |  |  |\n| `skeleton` | Skeleton | function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { return  |\n| `slider` | Slider |  |\n| `sonner` | Toaster |  |\n| `spinner` | Dots, HTMLAttributes, HTMLSpanElement, React, Spinner, SpinnerProps | export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> { brand?: bool |\n| `switch` | Switch | Switch — brand-gradient track when on, sliding white thumb. Opaque border on the checked |\n| `table` | Table, TableBody, TableCaption, TableCell, TableFooter, TableHead |  |\n| `tabs` | Tabs, TabsContent, TabsList, TabsTrigger |  |\n| `textarea` | HTMLTextAreaElement, React, Textarea, TextareaHTMLAttributes, TextareaProps | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( ({ className, ...pr |\n| `toast` | Toast, ToastProps, Variants | Toast — presentational transient notification. Pair with your app's toast manager (e.g.  |\n| `toggle-group` | ToggleGroup, ToggleGroupItem |  |\n| `toggle` | Toggle, Variants |  |\n| `tooltip` | Tooltip, TooltipContent, TooltipProvider, TooltipTrigger |  |\n\nAll components live under `@alex-oden/ui/components/ui/*` and are also\nre-exported from the package root.\n\n## Design tokens\n\nThe tokens file defines the full palette as HSL triplets on `:root`, plus\nsemantic color tokens (`--color-*`), radius scale, shadows, and animations.\nEverything is override-friendly — drop your own values on `:root` to\nre-theme without forking.\n\nKey utilities you get for free:\n\n- `bg-brand-gradient`, `bg-brand-gradient-soft`, `text-gradient-brand`\n- `glass` (backdrop blur + saturation)\n- `animate-np-spin`, `animate-np-pulse`, `animate-np-bounce`,\n  `animate-np-shimmer`, `animate-np-indeterminate`, `animate-np-toast-in`\n- `shadow-card`, `shadow-glow`, `shadow-ring`\n\n## Versioning\n\nFollows semver. See [CHANGELOG.md](./CHANGELOG.md). Pin an exact version\n(e.g. `@alex-oden/ui@1.3.3`) for reproducible installs.\n\n## License\n\nMIT.\n","readmeFilename":"README.md"}