{"_id":"@aaroh/ui","name":"@aaroh/ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aaroh/ui","version":"0.1.0","description":"Aaroh Design System — Part of the Aaroh ecosystem. Framework-agnostic design tokens, theme engine, and base component styles that power @aaroh/react-ui, @aaroh/vue-ui, and @aaroh/svelte-ui. Built on the aaroh motion engine.","author":{"name":"Quilonix","email":"hello@quilonix.com"},"license":"MIT","homepage":"https://aaroh.dev/ui","repository":{"type":"git","url":"git+https://github.com/quilonix/aaroh.git","directory":"packages/ui"},"keywords":["design-system","design-tokens","css-variables","theme","ui","aaroh","quilonix"],"sideEffects":["**/*.css"],"type":"module","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/types/index.d.ts"},"./themes/heritage":"./dist/themes/heritage.css","./themes/modern":"./dist/themes/modern.css","./themes/minimal":"./dist/themes/minimal.css","./components/button":"./dist/components/button.css","./components/input":"./dist/components/input.css","./components/card":"./dist/components/card.css","./components/modal":"./dist/components/modal.css","./components/select":"./dist/components/select.css","./components/tabs":"./dist/components/tabs.css","./components/toast":"./dist/components/toast.css","./components/badge":"./dist/components/badge.css","./components/tooltip":"./dist/components/tooltip.css","./components/checkbox":"./dist/components/checkbox.css","./components/radio":"./dist/components/radio.css","./components/textarea":"./dist/components/textarea.css","./components/switch":"./dist/components/switch.css","./components/accordion":"./dist/components/accordion.css","./components/ai":"./dist/components/ai.css","./components/animation":"./dist/components/animation.css","./components/avatar":"./dist/components/avatar.css","./components/carousel":"./dist/components/carousel.css","./components/dashboard":"./dist/components/dashboard.css","./components/drawer":"./dist/components/drawer.css","./components/dropdown-menu":"./dist/components/dropdown-menu.css","./components/ecommerce":"./dist/components/ecommerce.css","./components/forms":"./dist/components/forms.css","./components/media":"./dist/components/media.css","./components/progress":"./dist/components/progress.css","./components/skeleton":"./dist/components/skeleton.css","./components/social":"./dist/components/social.css","./a11y/focus-ring":"./dist/a11y/focus-ring.css","./a11y/visually-hidden":"./dist/a11y/visually-hidden.css","./a11y/forced-colors":"./dist/a11y/forced-colors.css","./tokens":{"import":"./dist/tokens.js","require":"./dist/tokens.cjs","types":"./dist/types/tokens.d.ts"}},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/types/index.d.ts","scripts":{"build":"vite build && tsc -p tsconfig.build.json && node scripts/build-theme-css.mjs","dev":"vite build --watch","typecheck":"tsc --noEmit","test":"vitest run --environment happy-dom","test:watch":"vitest watch --environment happy-dom","test:coverage":"vitest run --environment happy-dom --coverage","lint":"eslint src","lint:fix":"eslint src --fix","clean":"rimraf dist coverage"},"devDependencies":{"@aaroh/tsconfig":"workspace:*","@vitest/coverage-v8":"^2.1.0","happy-dom":"^15.0.0","rimraf":"^6.0.0","typescript":"^5.6.0","vite":"^5.4.0","vitest":"^2.1.0"},"_id":"@aaroh/ui@0.1.0","gitHead":"dac68ded305eb50bba86a6e3bde2895985902412","bugs":{"url":"https://github.com/quilonix/aaroh/issues"},"_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-V7MUB5WL2l3R2GGHNvVJsIuQ3OneFsld8ImXCOZnqlq5cSmKtnIMN8yAGE7rfKyzPZmRKQVFlB+opTL3Rf2DCg==","shasum":"3c9dc7c0a9806c346f41acd39e2e778e32dd680e","tarball":"https://registry.npmjs.org/@aaroh/ui/-/ui-0.1.0.tgz","fileCount":143,"unpackedSize":537341,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCUM7y3E8WJ4K6sVXjBdVgvGDZWz6RWmHThbHbTftB08gIhALSOHcy5sSZvUwiQPXSjQ0U3kZthSvoEOYlXNKGNBBtT"}]},"_npmUser":{"name":"manvanth.gowda.m","email":"appumanu3214@gmail.com"},"directories":{},"maintainers":[{"name":"manvanth.gowda.m","email":"appumanu3214@gmail.com"},{"name":"mithun50","email":"mithungowda.b7411@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.0_1783678866847_0.06996176725729564"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-10T10:21:06.645Z","0.1.0":"2026-07-10T10:21:06.993Z","modified":"2026-07-10T10:21:07.356Z"},"maintainers":[{"name":"manvanth.gowda.m","email":"appumanu3214@gmail.com"},{"name":"mithun50","email":"mithungowda.b7411@gmail.com"}],"description":"Aaroh Design System — Part of the Aaroh ecosystem. Framework-agnostic design tokens, theme engine, and base component styles that power @aaroh/react-ui, @aaroh/vue-ui, and @aaroh/svelte-ui. Built on the aaroh motion engine.","homepage":"https://aaroh.dev/ui","keywords":["design-system","design-tokens","css-variables","theme","ui","aaroh","quilonix"],"repository":{"type":"git","url":"git+https://github.com/quilonix/aaroh.git","directory":"packages/ui"},"author":{"name":"Quilonix","email":"hello@quilonix.com"},"bugs":{"url":"https://github.com/quilonix/aaroh/issues"},"license":"MIT","readme":"# @aaroh/ui\n\nThe framework-independent design system core behind the Aaroh UI ecosystem.\n\n`@aaroh/ui` provides design tokens, a theme engine, accessibility primitives,\nicon primitives, and 27 component CSS files. It powers\n[`@aaroh/react-ui`](../react-ui), [`@aaroh/vue-ui`](../vue-ui), and\n[`@aaroh/svelte-ui`](../svelte-ui) — but you can also use it on its own with\nvanilla HTML or any framework.\n\n## Installation\n\n```bash\nnpm install @aaroh/ui\n```\n\n## Quick Start\n\nImport a theme and the component CSS files you need:\n\n```typescript\n// 1. Import a theme (applies CSS custom properties)\nimport '@aaroh/ui/themes/heritage';\n\n// 2. Import component styles you use\nimport '@aaroh/ui/components/button';\nimport '@aaroh/ui/components/input';\nimport '@aaroh/ui/components/card';\n```\n\nThat's it. Your HTML elements with the correct CSS classes will now be styled.\nNo JavaScript runtime required for styling — it's all CSS custom properties.\n\n```html\n<div data-aaroh-theme=\"heritage\">\n  <button class=\"aaroh-btn aaroh-btn-solid aaroh-btn-md aaroh-btn-pill\">\n    Get Started\n  </button>\n</div>\n```\n\n## Theme Engine\n\nAaroh ships three built-in themes. Switching between them is instant — no\nre-render, no style recalculation.\n\n### CSS-only approach (recommended)\n\nImport the theme CSS file you want. The styles scope to\n`[data-aaroh-theme=\"name\"]`:\n\n```typescript\n// Pick one:\nimport '@aaroh/ui/themes/heritage'; // Dark, gold-accented, luxurious\nimport '@aaroh/ui/themes/modern'; // Clean, bright, contemporary\nimport '@aaroh/ui/themes/minimal'; // Subtle, neutral, low-contrast\n```\n\nSet the `data-aaroh-theme` attribute on a root element:\n\n```html\n<html data-aaroh-theme=\"heritage\">\n  <!-- All components inside inherit the theme -->\n</html>\n```\n\n### Runtime switching (JavaScript)\n\nFor dynamic theme switching, use the `applyTheme` / `removeTheme` API:\n\n```typescript\nimport { applyTheme, removeTheme, heritage, modern } from '@aaroh/ui';\n\n// Apply a theme at runtime\nconst handle = applyTheme(document.documentElement, heritage);\n\n// Later — switch to another theme\nremoveTheme(handle);\nconst newHandle = applyTheme(document.documentElement, modern);\n```\n\n`removeTheme` restores the element to its exact pre-application state. This\nround-trip guarantee means you can safely apply and remove themes without side\neffects.\n\n## Available Themes\n\n| Theme      | Style                          | Color Scheme |\n| ---------- | ------------------------------ | ------------ |\n| `heritage` | Dark, gold-accented, luxurious | Dark         |\n| `modern`   | Clean, bright, contemporary    | Light        |\n| `minimal`  | Subtle, neutral, understated   | Light        |\n\n## Custom Themes\n\nEvery theme satisfies the `AarohTheme` interface. Create your own:\n\n```typescript\nimport type { AarohTheme } from '@aaroh/ui';\nimport { generateThemeCSS, applyTheme } from '@aaroh/ui';\n\nconst myTheme: AarohTheme = {\n  name: 'ocean',\n  displayName: 'Ocean Blue',\n  colorScheme: 'dark',\n  colors: {\n    primary: '#0EA5E9',\n    primaryHover: '#38BDF8',\n    primaryActive: '#0284C7',\n    primaryForeground: '#FFFFFF',\n    secondary: '#64748B',\n    secondaryHover: '#94A3B8',\n    secondaryActive: '#475569',\n    secondaryForeground: '#FFFFFF',\n    accent: '#06B6D4',\n    accentHover: '#22D3EE',\n    accentForeground: '#FFFFFF',\n    destructive: '#EF4444',\n    destructiveHover: '#F87171',\n    destructiveForeground: '#FFFFFF',\n    success: '#22C55E',\n    successForeground: '#FFFFFF',\n    warning: '#F59E0B',\n    warningForeground: '#000000',\n    info: '#3B82F6',\n    infoForeground: '#FFFFFF',\n    background: '#0F172A',\n    surface: '#1E293B',\n    surfaceElevated: '#334155',\n    foreground: '#F8FAFC',\n    muted: '#94A3B8',\n    disabled: '#475569',\n    border: '#334155',\n    borderHover: '#475569',\n    borderFocus: '#0EA5E9',\n    input: '#1E293B',\n    ring: '#0EA5E9',\n  },\n  shape: {\n    radius: '0.5rem',\n    buttonRadius: '0.5rem',\n    inputRadius: '0.375rem',\n    cardRadius: '0.75rem',\n    modalRadius: '1rem',\n  },\n};\n\n// Generate CSS at build time\nconst css = generateThemeCSS(myTheme);\n// → '[data-aaroh-theme=\"ocean\"] { color-scheme: dark; --aaroh-primary: #0EA5E9; ... }'\n\n// Or apply at runtime\napplyTheme(document.documentElement, myTheme);\n```\n\nThe `AarohTheme` contract also supports optional sections for `typography`,\n`surface`, `elevation`, `border`, and `icon` customization.\n\n## Available Components\n\nAll 27 component CSS files, importable individually:\n\n| Import Path                          | Component     |\n| ------------------------------------ | ------------- |\n| `@aaroh/ui/components/accordion`     | Accordion     |\n| `@aaroh/ui/components/ai`            | AI Chat       |\n| `@aaroh/ui/components/animation`     | Animation     |\n| `@aaroh/ui/components/avatar`        | Avatar        |\n| `@aaroh/ui/components/badge`         | Badge         |\n| `@aaroh/ui/components/button`        | Button        |\n| `@aaroh/ui/components/card`          | Card          |\n| `@aaroh/ui/components/carousel`      | Carousel      |\n| `@aaroh/ui/components/checkbox`      | Checkbox      |\n| `@aaroh/ui/components/dashboard`     | Dashboard     |\n| `@aaroh/ui/components/drawer`        | Drawer        |\n| `@aaroh/ui/components/dropdown-menu` | Dropdown Menu |\n| `@aaroh/ui/components/ecommerce`     | E-Commerce    |\n| `@aaroh/ui/components/forms`         | Forms         |\n| `@aaroh/ui/components/input`         | Input         |\n| `@aaroh/ui/components/media`         | Media         |\n| `@aaroh/ui/components/modal`         | Modal         |\n| `@aaroh/ui/components/progress`      | Progress      |\n| `@aaroh/ui/components/radio`         | Radio         |\n| `@aaroh/ui/components/select`        | Select        |\n| `@aaroh/ui/components/skeleton`      | Skeleton      |\n| `@aaroh/ui/components/social`        | Social        |\n| `@aaroh/ui/components/switch`        | Switch        |\n| `@aaroh/ui/components/tabs`          | Tabs          |\n| `@aaroh/ui/components/textarea`      | Textarea      |\n| `@aaroh/ui/components/toast`         | Toast         |\n| `@aaroh/ui/components/tooltip`       | Tooltip       |\n\nEach file is tree-shakeable — import only what you use and your bundle stays\nsmall.\n\n## Design Tokens\n\nImport tokens for use in JavaScript/TypeScript:\n\n```typescript\nimport {\n  gold,\n  navy,\n  emerald,\n  crimson,\n  slate,\n  sand,\n  spacing,\n  radius,\n  shadow,\n  zIndex,\n  fontFamily,\n  fontSize,\n  fontWeight,\n  duration,\n  easing,\n} from '@aaroh/ui/tokens';\n```\n\nTokens cover:\n\n- **Colors** — `gold`, `navy`, `emerald`, `crimson`, `slate`, `sand` (full\n  scales)\n- **Spacing** — consistent spacing scale\n- **Radius** — border-radius values\n- **Shadow** — elevation shadows\n- **Z-Index** — layering stack\n- **Typography** — font families, sizes, weights, letter-spacing\n- **Motion** — durations, easings, motion intensity\n- **Border** — widths, styles\n- **Gradient** — angles, stops\n- **Icon** — stroke widths, sizes\n- **Surface** — textures, blend modes\n\n## Accessibility Primitives\n\nThree CSS utility imports for accessibility:\n\n```typescript\nimport '@aaroh/ui/a11y/focus-ring'; // Consistent focus ring styling\nimport '@aaroh/ui/a11y/visually-hidden'; // Screen-reader-only utility\nimport '@aaroh/ui/a11y/forced-colors'; // Windows High Contrast mode support\n```\n\nThese give you accessible focus indicators, a `.visually-hidden` class for\nscreen-reader text, and forced-color-mode overrides that ensure components\nremain usable in high-contrast environments.\n\n## Icon Primitives\n\nBuilt-in decorative icon primitives for use with buttons and components:\n\n```typescript\nimport { rosetteIcon, petalIcon, latticeIcon, motifDataUri } from '@aaroh/ui';\nimport type { IconPrimitive } from '@aaroh/ui';\n```\n\nAn `IconPrimitive` is a simple object with an `svg` string property. Pass it to\nany UI component's `icon` prop.\n\n## Architecture\n\n`@aaroh/ui` is the shared foundation. The framework packages (`@aaroh/react-ui`,\n`@aaroh/vue-ui`, `@aaroh/svelte-ui`) contain zero styling logic — they delegate\nclass name computation to this package's className builders and reference the\nCSS files exported here.\n\n```\n@aaroh/ui (this package)\n├── themes/         → CSS custom property definitions\n├── components/     → Component CSS (class-based)\n├── tokens/         → JS/TS design token values\n├── a11y/           → Accessibility CSS utilities\n├── icons/          → SVG icon primitives\n└── className builders → shared logic for computing CSS class strings\n        │\n        ├── @aaroh/react-ui (renders React elements, imports CSS from here)\n        ├── @aaroh/vue-ui   (renders Vue elements, imports CSS from here)\n        └── @aaroh/svelte-ui (returns attribute objects, imports CSS from here)\n```\n\n## License\n\nMIT © [Quilonix](https://quilonix.com)\n","readmeFilename":"README.md","_rev":"1-e89dc1a77c825f410515f0bc468c36c1"}