{"_id":"@aaroh/vue-ui","name":"@aaroh/vue-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aaroh/vue-ui","version":"0.1.0","description":"Aaroh UI for Vue — Accessible, themeable components powered by the aaroh motion engine via @aaroh/vue (^0.1.0).","author":{"name":"Quilonix","email":"hello@quilonix.com"},"license":"MIT","homepage":"https://aaroh.dev/ui/vue","repository":{"type":"git","url":"git+https://github.com/quilonix/aaroh.git","directory":"packages/vue-ui"},"keywords":["aaroh","vue","ui","components","design-system","accessible","themeable"],"sideEffects":false,"type":"module","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/types/index.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","dev":"vite build --watch","typecheck":"tsc --noEmit","test":"vitest run --environment happy-dom","test:watch":"vitest watch --environment happy-dom","lint":"eslint src","lint:fix":"eslint src --fix","clean":"rimraf dist"},"peerDependencies":{"vue":">=3.4.0"},"dependencies":{"@aaroh/ui":"workspace:*","@aaroh/vue":"workspace:*","aaroh":"workspace:*"},"devDependencies":{"@aaroh/tsconfig":"workspace:*","@vitejs/plugin-vue":"^5.0.0","@vue/test-utils":"^2.4.6","happy-dom":"^15.0.0","vue":"^3.4.0","rimraf":"^6.0.0","typescript":"^5.6.0","vite":"^5.4.0","vitest":"^2.1.0"},"_id":"@aaroh/vue-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-FYypdTPkIUerWHlX+X7yWVhXq4kxbZqtL1NL13d/XgHXR1Fp9LbOwxbAIbeM7FPVzk1Twq0sd75LZvY6NOpu1w==","shasum":"032e10b09e3f62255c03692429f7bc265b9280ce","tarball":"https://registry.npmjs.org/@aaroh/vue-ui/-/vue-ui-0.1.0.tgz","fileCount":62,"unpackedSize":716909,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDqlHnm47k5WgiML5Z9e7aBVkkYJxLiz4rYNRZh+Zb2kwIhAPXtUiLS2nFUlumqGqsJ0fUlF9eZ+6yliiIs57Gmcgpv"}]},"_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/vue-ui_0.1.0_1783679042399_0.9558963093461965"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-10T10:24:02.281Z","0.1.0":"2026-07-10T10:24:02.586Z","modified":"2026-07-10T10:24:02.908Z"},"maintainers":[{"name":"manvanth.gowda.m","email":"appumanu3214@gmail.com"},{"name":"mithun50","email":"mithungowda.b7411@gmail.com"}],"description":"Aaroh UI for Vue — Accessible, themeable components powered by the aaroh motion engine via @aaroh/vue (^0.1.0).","homepage":"https://aaroh.dev/ui/vue","keywords":["aaroh","vue","ui","components","design-system","accessible","themeable"],"repository":{"type":"git","url":"git+https://github.com/quilonix/aaroh.git","directory":"packages/vue-ui"},"author":{"name":"Quilonix","email":"hello@quilonix.com"},"bugs":{"url":"https://github.com/quilonix/aaroh/issues"},"license":"MIT","readme":"# @aaroh/vue-ui\n\nAccessible, themeable Vue components powered by the [Aaroh](https://aaroh.dev)\ndesign system.\n\n27 production-ready components with `v-model` support, slot-based content, and\nfull TypeScript types. All visuals come from [`@aaroh/ui`](../ui) — themes\nswitch instantly with a single CSS import.\n\n## Installation\n\n```bash\nnpm install @aaroh/vue-ui @aaroh/ui\n```\n\n## Setup\n\nImport a theme and component CSS in your app entry:\n\n```typescript\n// main.ts (Vite) or plugins/aaroh.ts (Nuxt)\n\n// 1. Pick a theme\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\n### Nuxt Setup\n\nCreate a plugin to load CSS globally:\n\n```typescript\n// plugins/aaroh.client.ts\nimport '@aaroh/ui/themes/heritage';\nimport '@aaroh/ui/components/button';\nimport '@aaroh/ui/components/input';\nimport '@aaroh/ui/components/card';\n\nexport default defineNuxtPlugin(() => {});\n```\n\nOr import in `nuxt.config.ts`:\n\n```typescript\nexport default defineNuxtConfig({\n  css: [\n    '@aaroh/ui/themes/heritage',\n    '@aaroh/ui/components/button',\n    '@aaroh/ui/components/input',\n    '@aaroh/ui/components/card',\n  ],\n});\n```\n\n## Quick Example\n\n```vue\n<script setup>\nimport { AButton, AInput, ACard } from '@aaroh/vue-ui';\nimport { ref } from 'vue';\n\nconst email = ref('');\n</script>\n\n<template>\n  <ACard variant=\"elevated\" size=\"md\">\n    <template #default>\n      <AInput\n        v-model=\"email\"\n        label=\"Email\"\n        placeholder=\"you@example.com\"\n        size=\"md\"\n      />\n      <AButton variant=\"solid\" size=\"md\">Sign Up</AButton>\n      <AButton variant=\"ghost\" size=\"md\">Cancel</AButton>\n    </template>\n  </ACard>\n</template>\n```\n\n## Component Naming\n\nAll components use the `A` prefix to avoid collisions with native HTML elements\nand other libraries:\n\n| Component    | Vue Name        |\n| ------------ | --------------- |\n| Accordion    | `AAccordion`    |\n| AI Chat      | `AAI`           |\n| Animation    | `AAnimation`    |\n| Avatar       | `AAvatar`       |\n| Badge        | `ABadge`        |\n| Button       | `AButton`       |\n| Card         | `ACard`         |\n| Carousel     | `ACarousel`     |\n| Checkbox     | `ACheckbox`     |\n| Dashboard    | `ADashboard`    |\n| Drawer       | `ADrawer`       |\n| DropdownMenu | `ADropdownMenu` |\n| Ecommerce    | `AEcommerce`    |\n| Forms        | `AForms`        |\n| Input        | `AInput`        |\n| Media        | `AMedia`        |\n| Modal        | `AModal`        |\n| Progress     | `AProgress`     |\n| Radio        | `ARadio`        |\n| Select       | `ASelect`       |\n| Skeleton     | `ASkeleton`     |\n| Social       | `ASocial`       |\n| Switch       | `ASwitch`       |\n| Tabs         | `ATabs`         |\n| Textarea     | `ATextarea`     |\n| Toast        | `AToast`        |\n| Tooltip      | `ATooltip`      |\n\n## v-model Support\n\nForm components support Vue's `v-model` for two-way binding:\n\n```vue\n<script setup>\nimport { AInput, ATextarea, ACheckbox, ASwitch } from '@aaroh/vue-ui';\nimport { ref } from 'vue';\n\nconst name = ref('');\nconst bio = ref('');\nconst agree = ref(false);\nconst notifications = ref(true);\n</script>\n\n<template>\n  <AInput v-model=\"name\" label=\"Name\" />\n  <ATextarea v-model=\"bio\" label=\"Bio\" />\n  <ACheckbox v-model=\"agree\" label=\"I agree to the terms\" />\n  <ASwitch v-model=\"notifications\" label=\"Enable notifications\" />\n</template>\n```\n\n## Slot-Based Content\n\nComponents use Vue's default slot for content projection:\n\n```vue\n<template>\n  <AButton variant=\"solid\" size=\"md\">\n    <!-- Default slot for button text -->\n    Get Started\n  </AButton>\n\n  <ACard variant=\"elevated\">\n    <!-- Default slot for card content -->\n    <h3>Card Title</h3>\n    <p>Card content goes here.</p>\n  </ACard>\n\n  <AModal>\n    <!-- Default slot for modal body -->\n    <p>Are you sure you want to proceed?</p>\n  </AModal>\n</template>\n```\n\n## Props Patterns\n\nProps follow the same conventions as the React and Svelte packages:\n\n```vue\n<template>\n  <!-- Variants -->\n  <AButton variant=\"solid\" />\n  <AButton variant=\"outline\" />\n  <AButton variant=\"ghost\" />\n  <AButton variant=\"gradient\" />\n\n  <!-- Sizes -->\n  <AButton size=\"xs\" />\n  <AButton size=\"sm\" />\n  <AButton size=\"md\" />\n  <AButton size=\"lg\" />\n  <AButton size=\"xl\" />\n\n  <!-- Shapes -->\n  <AButton shape=\"pill\" />\n  <AButton shape=\"rounded\" />\n  <AButton shape=\"square\" />\n\n  <!-- Semantic colors -->\n  <AButton color=\"default\" />\n  <AButton color=\"destructive\" />\n  <AButton color=\"success\" />\n  <AButton color=\"warning\" />\n</template>\n```\n\n## Accessibility\n\nAll components include built-in accessibility:\n\n- Correct ARIA attributes applied automatically\n- Keyboard navigation out of the box\n- Focus ring styling via `@aaroh/ui/a11y/focus-ring`\n- Dev-mode warnings for missing accessibility props (e.g., icon-only buttons\n  without `ariaLabel`)\n- Respects `prefers-reduced-motion`\n\n```vue\n<template>\n  <!-- Icon-only button — ariaLabel required -->\n  <AButton :icon=\"menuIcon\" aria-label=\"Open menu\" />\n</template>\n```\n\n## Theming\n\nSwap CSS imports to change themes — no component changes needed:\n\n```typescript\n// Switch from heritage to modern\nimport '@aaroh/ui/themes/modern';\n```\n\nRuntime switching:\n\n```vue\n<script setup>\nimport { applyTheme, removeTheme, heritage, modern } from '@aaroh/ui';\nimport { ref } from 'vue';\n\nconst handle = ref(null);\n\nfunction switchTheme(theme) {\n  if (handle.value) removeTheme(handle.value);\n  handle.value = applyTheme(document.documentElement, theme);\n}\n</script>\n\n<template>\n  <AButton @click=\"switchTheme(heritage)\">Heritage</AButton>\n  <AButton @click=\"switchTheme(modern)\">Modern</AButton>\n</template>\n```\n\n## Vue Compatibility\n\n- **Vue 3.4+** required (uses modern `defineComponent` features)\n- **Nuxt 3** — full SSR support via plugins or CSS config\n- **Vite** — zero-config, just import and use\n- **Astro** — works with `client:*` directives\n\n## TypeScript\n\nFull types ship with the package:\n\n```typescript\nimport type { AButtonProps, AInputProps, ACardProps } from '@aaroh/vue-ui';\n```\n\n## Peer Dependencies\n\n- `vue` >= 3.4.0\n\n## License\n\nMIT © [Quilonix](https://quilonix.com)\n","readmeFilename":"README.md","_rev":"1-77a2a09cd5699286f8e85df9a86beef7"}