{"_id":"@aaroh/svelte-ui","name":"@aaroh/svelte-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aaroh/svelte-ui","version":"0.1.0","description":"Aaroh UI for Svelte — Accessible, themeable components powered by the aaroh motion engine via @aaroh/svelte (^0.1.0).","author":{"name":"Quilonix","email":"hello@quilonix.com"},"license":"MIT","homepage":"https://aaroh.dev/ui/svelte","repository":{"type":"git","url":"git+https://github.com/quilonix/aaroh.git","directory":"packages/svelte-ui"},"keywords":["aaroh","svelte","ui","components","design-system","accessible","themeable"],"sideEffects":false,"type":"module","exports":{".":{"import":"./dist/index.js","types":"./dist/types/index.d.ts"}},"main":"./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":{"svelte":">=5.0.0"},"dependencies":{"@aaroh/ui":"workspace:*","@aaroh/svelte":"workspace:*","aaroh":"workspace:*"},"devDependencies":{"@aaroh/tsconfig":"workspace:*","@testing-library/svelte":"^5.0.0","happy-dom":"^15.0.0","svelte":"^5.0.0","rimraf":"^6.0.0","typescript":"^5.6.0","vite":"^5.4.0","vitest":"^2.1.0"},"_id":"@aaroh/svelte-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-XXmprUD4kCknoXr8FU5i2GzYxL7iksFC9XEPGv4jSqc+cveWqf9mt/enzs2IIaquswlKcvvcF4lxbueQlsezCQ==","shasum":"346af41af1c46f530c6717d4d3aaf68cd0ea6eba","tarball":"https://registry.npmjs.org/@aaroh/svelte-ui/-/svelte-ui-0.1.0.tgz","fileCount":60,"unpackedSize":151970,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDy0J7vIyrtWS5jFB2ZOm1M2T5RML04ChD+TE9o1J7ssgIgd74WJPIQ3UyBcahrwWPQmD33O6UFbDqvamA0Q8NzVS8="}]},"_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/svelte-ui_0.1.0_1783679070725_0.8117548059483914"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-10T10:24:30.589Z","0.1.0":"2026-07-10T10:24:30.867Z","modified":"2026-07-10T10:24:31.264Z"},"maintainers":[{"name":"manvanth.gowda.m","email":"appumanu3214@gmail.com"},{"name":"mithun50","email":"mithungowda.b7411@gmail.com"}],"description":"Aaroh UI for Svelte — Accessible, themeable components powered by the aaroh motion engine via @aaroh/svelte (^0.1.0).","homepage":"https://aaroh.dev/ui/svelte","keywords":["aaroh","svelte","ui","components","design-system","accessible","themeable"],"repository":{"type":"git","url":"git+https://github.com/quilonix/aaroh.git","directory":"packages/svelte-ui"},"author":{"name":"Quilonix","email":"hello@quilonix.com"},"bugs":{"url":"https://github.com/quilonix/aaroh/issues"},"license":"MIT","readme":"# @aaroh/svelte-ui\n\nAccessible, themeable Svelte utilities powered by the [Aaroh](https://aaroh.dev)\ndesign system.\n\n27 props-builder functions that compute class names and HTML attributes for you\nto spread onto native elements. All visuals come from [`@aaroh/ui`](../ui) —\nthemes switch with a single CSS import.\n\n## Installation\n\n```bash\nnpm install @aaroh/svelte-ui @aaroh/ui\n```\n\n## Setup\n\nImport a theme and component CSS in your app entry or layout:\n\n```typescript\n// src/routes/+layout.svelte or src/app.ts\nimport '@aaroh/ui/themes/heritage';\nimport '@aaroh/ui/components/button';\nimport '@aaroh/ui/components/input';\nimport '@aaroh/ui/components/card';\n```\n\n### SvelteKit Setup\n\nIn SvelteKit, import CSS in your root layout:\n\n```svelte\n<!-- src/routes/+layout.svelte -->\n<script>\n  import '@aaroh/ui/themes/heritage';\n  import '@aaroh/ui/components/button';\n  import '@aaroh/ui/components/input';\n  import '@aaroh/ui/components/card';\n</script>\n\n<slot />\n```\n\n## The Props-Builder Pattern\n\nUnlike traditional component libraries, `@aaroh/svelte-ui` exports **functions**\n— not components. Each function returns an object of attributes (class, aria-\\*,\ndisabled, etc.) that you spread onto native HTML elements.\n\nThis gives you full control over your markup while getting computed\naccessibility attributes and class names for free.\n\n```svelte\n<script>\n  import { buttonProps } from '@aaroh/svelte-ui';\n\n  const attrs = buttonProps({ variant: 'solid', size: 'md', hasChildren: true });\n</script>\n\n<button {...attrs}>Get Started</button>\n```\n\n### Why this pattern?\n\n- **No Svelte compiler needed at build** — the package is pure TypeScript\n- **Full control over your markup** — you own the `<button>`, not a wrapper\n- **Composable** — combine with your own classes, event handlers, transitions\n- **SSR-safe** — the functions are pure and work in any environment\n- **Svelte 5 runes-friendly** — works with `$derived` for reactive props\n\n## Quick Example\n\n```svelte\n<script>\n  import { buttonProps, inputProps, cardProps } from '@aaroh/svelte-ui';\n\n  let email = $state('');\n\n  const card = cardProps({ variant: 'elevated', size: 'md' });\n  const input = inputProps({ size: 'md', label: 'Email' });\n  const submitBtn = buttonProps({ variant: 'solid', size: 'md', hasChildren: true });\n  const cancelBtn = buttonProps({ variant: 'ghost', size: 'md', hasChildren: true });\n</script>\n\n<div {...card}>\n  <input\n    {...input}\n    type=\"email\"\n    placeholder=\"you@example.com\"\n    bind:value={email}\n  />\n  <button {...submitBtn}>Sign Up</button>\n  <button {...cancelBtn}>Cancel</button>\n</div>\n```\n\n## All 27 Props Builders\n\n| Function              | For Component |\n| --------------------- | ------------- |\n| `accordionProps()`    | Accordion     |\n| `aiProps()`           | AI Chat       |\n| `animationProps()`    | Animation     |\n| `avatarProps()`       | Avatar        |\n| `badgeProps()`        | Badge         |\n| `buttonProps()`       | Button        |\n| `cardProps()`         | Card          |\n| `carouselProps()`     | Carousel      |\n| `checkboxProps()`     | Checkbox      |\n| `dashboardProps()`    | Dashboard     |\n| `drawerProps()`       | Drawer        |\n| `dropdownMenuProps()` | Dropdown Menu |\n| `ecommerceProps()`    | E-Commerce    |\n| `formsProps()`        | Forms         |\n| `inputProps()`        | Input         |\n| `mediaProps()`        | Media         |\n| `modalProps()`        | Modal         |\n| `progressProps()`     | Progress      |\n| `radioProps()`        | Radio         |\n| `selectProps()`       | Select        |\n| `skeletonProps()`     | Skeleton      |\n| `socialProps()`       | Social        |\n| `switchProps()`       | Switch        |\n| `tabsProps()`         | Tabs          |\n| `textareaProps()`     | Textarea      |\n| `toastProps()`        | Toast         |\n| `tooltipProps()`      | Tooltip       |\n\n## Spreading Attributes\n\nThe returned objects contain everything the native element needs:\n\n```svelte\n<script>\n  import { buttonProps } from '@aaroh/svelte-ui';\n\n  // Returns: { class, type, disabled, 'aria-disabled', 'aria-busy', 'aria-label' }\n  const attrs = buttonProps({\n    variant: 'outline',\n    size: 'lg',\n    color: 'destructive',\n    loading: true,\n    hasChildren: true,\n  });\n</script>\n\n<!-- Spread gives you: class=\"aaroh-btn ...\" type=\"button\" aria-busy=\"true\" disabled -->\n<button {...attrs}>Deleting...</button>\n```\n\nYou can add your own attributes alongside the spread:\n\n```svelte\n<button {...attrs} onclick={handleClick} id=\"my-button\">\n  Click Me\n</button>\n```\n\n## Reactive Props with Svelte 5 Runes\n\nUse `$derived` to recompute attributes reactively:\n\n```svelte\n<script>\n  import { buttonProps } from '@aaroh/svelte-ui';\n\n  let loading = $state(false);\n\n  const attrs = $derived(\n    buttonProps({\n      variant: 'solid',\n      size: 'md',\n      loading,\n      hasChildren: true,\n    })\n  );\n\n  async function handleSubmit() {\n    loading = true;\n    await submitForm();\n    loading = false;\n  }\n</script>\n\n<button {...attrs} onclick={handleSubmit}>Submit</button>\n```\n\n## Icons\n\nUse the `resolveIconSvg` helper to render icon SVGs:\n\n```svelte\n<script>\n  import { buttonProps, resolveIconSvg } from '@aaroh/svelte-ui';\n  import { rosetteIcon } from '@aaroh/ui';\n\n  const attrs = buttonProps({\n    variant: 'ghost',\n    icon: rosetteIcon,\n    ariaLabel: 'Menu',\n    hasChildren: false,\n  });\n\n  const iconSvg = resolveIconSvg(rosetteIcon);\n</script>\n\n<button {...attrs}>\n  {#if iconSvg}\n    <span class=\"aaroh-btn-motif\" aria-hidden=\"true\">{@html iconSvg}</span>\n  {/if}\n</button>\n```\n\n## Theming\n\nSame CSS-import approach as all Aaroh UI packages:\n\n```svelte\n<script>\n  // Swap this import to change themes\n  import '@aaroh/ui/themes/modern';\n</script>\n```\n\nRuntime switching:\n\n```svelte\n<script>\n  import { applyTheme, removeTheme, heritage, modern } from '@aaroh/ui';\n  import { buttonProps } from '@aaroh/svelte-ui';\n\n  let handle = $state(null);\n\n  function switchTheme(theme) {\n    if (handle) removeTheme(handle);\n    handle = applyTheme(document.documentElement, theme);\n  }\n</script>\n\n<button {...buttonProps({ variant: 'solid', hasChildren: true })} onclick={() => switchTheme(heritage)}>\n  Heritage\n</button>\n<button {...buttonProps({ variant: 'outline', hasChildren: true })} onclick={() => switchTheme(modern)}>\n  Modern\n</button>\n```\n\n## SvelteKit Compatibility\n\n`@aaroh/svelte-ui` is fully SSR-safe:\n\n- Props builders are pure functions — no DOM access\n- Works in `+page.svelte`, `+layout.svelte`, and `+page.server.ts` contexts\n- CSS imports are handled by Vite's CSS pipeline\n- Compatible with SvelteKit's prerendering and static adapter\n\n## Svelte Compatibility\n\n- **Svelte 5** — full runes support (`$state`, `$derived`, `$effect`)\n- **Svelte 4** — works with reactive declarations (`$:`)\n- **SvelteKit** — SSR, prerendering, all adapters\n- **Vite** — zero-config\n\n## TypeScript\n\nFull types ship with the package:\n\n```typescript\nimport type { ButtonProps, ButtonAttributes } from '@aaroh/svelte-ui';\nimport type { InputProps, CardProps } from '@aaroh/svelte-ui';\n```\n\n## Peer Dependencies\n\n- `svelte` >= 5.0.0\n\n## License\n\nMIT © [Quilonix](https://quilonix.com)\n","readmeFilename":"README.md","_rev":"1-1fbbe6e6caf5752ef69e31bc80adb57b"}