{"_id":"@cjlapao/ui-kit-vue","name":"@cjlapao/ui-kit-vue","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@cjlapao/ui-kit-vue","version":"0.2.0","private":false,"type":"module","scripts":{"build":"vite build && npm run build:types && npm run build:css","build:types":"vue-tsc -p tsconfig.build.json","build:css":"tailwindcss -i ./src/styles.css -o ./dist/index.css","dev":"vite build --watch","lint":"vue-tsc --noEmit","test":"vitest run --coverage","test:watch":"vitest","generate:icons":"tsx scripts/generate-vue-icons.ts"},"main":"dist/index.cjs","module":"dist/index.js","types":"dist/types/vue/src/index.d.ts","exports":{".":{"types":"./dist/types/vue/src/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/index.css"},"peerDependencies":{"vue":"^3.5.0","vue-router":"^4.0.0"},"peerDependenciesMeta":{"vue-router":{"optional":true}},"publishConfig":{"access":"public","registry":"https://npm.pkg.github.com"},"dependencies":{"classnames":"^2.5.1","clsx":"^2.1.1","crypto-js":"^4.2.0","tailwind-merge":"^3.6.0"},"devDependencies":{"@tailwindcss/cli":"^4.3.1","@types/crypto-js":"^4.2.2","@types/node":"^24.0.0","@vitejs/plugin-vue":"^5.2.0","@vitest/coverage-v8":"^4.1.9","@vue/test-utils":"^2.4.6","jsdom":"^29.1.1","tailwindcss":"^4.3.1","tsx":"^4.22.4","typescript":"~5.9.0","vite":"^6.3.0","vitest":"^4.1.9","vue":"^3.5.0","vue-router":"^4.5.0","vue-tsc":"^2.2.0"},"gitHead":"6afc8087973c15fef76380fa3ae7638b90250db7","_id":"@cjlapao/ui-kit-vue@0.2.0","description":"Vue 3 port of [`@cjlapao/ui-kit`](../README.md). Same components, same Tailwind design system, same theme/utility layer — the framework-agnostic TypeScript (theme class maps, utils, most types) is **shared with the React kit** via re-exports from `../comm","_nodeVersion":"24.12.0","_npmVersion":"11.8.0","dist":{"integrity":"sha512-Gan9fVyyaMNxK2jERp761jdXRfu247+QiudJUGfW7Y6eGi8dhFmLN5TPRfjm5qwk4Kr8W8gvJzTR9f8iI9MQxQ==","shasum":"93dda22a9be571608d13354b239f0ca96aec0658","tarball":"https://registry.npmjs.org/@cjlapao/ui-kit-vue/-/ui-kit-vue-0.2.0.tgz","fileCount":304,"unpackedSize":2818923,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCY5QRwQrgmfa1Y44YOLCKC2EsiB+CkDYrdp9aLnf7poQIhAOpGgHt+/cuTb3CQXqyyCFbi2freI/ivbUYWUOpWvWaG"}]},"_npmUser":{"name":"cjlapao","email":"cjlapao@gmail.com"},"directories":{},"maintainers":[{"name":"cjlapao","email":"cjlapao@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-kit-vue_0.2.0_1786553357791_0.4839388422587807"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-12T16:49:17.618Z","0.2.0":"2026-08-12T16:49:17.987Z","modified":"2026-08-12T16:49:18.219Z"},"maintainers":[{"name":"cjlapao","email":"cjlapao@gmail.com"}],"description":"Vue 3 port of [`@cjlapao/ui-kit`](../README.md). Same components, same Tailwind design system, same theme/utility layer — the framework-agnostic TypeScript (theme class maps, utils, most types) is **shared with the React kit** via re-exports from `../comm","readme":"# @cjlapao/ui-kit-vue\n\nVue 3 port of [`@cjlapao/ui-kit`](../README.md). Same components, same Tailwind\ndesign system, same theme/utility layer — the framework-agnostic TypeScript\n(theme class maps, utils, most types) is **shared with the React kit** via\nre-exports from `../common`, so both kits stay in sync by construction.\n\n## Usage\n\n```ts\nimport { createApp } from \"vue\";\nimport { BottomSheetProvider, IconProvider, renderIcon } from \"@cjlapao/ui-kit-vue\";\nimport \"@cjlapao/ui-kit-vue/styles.css\";\n```\n\n```vue\n<template>\n  <IconProvider :render-icon=\"renderIcon\">\n    <BottomSheetProvider>\n      <Button variant=\"solid\" color=\"brand\" leading-icon=\"Add\">New item</Button>\n    </BottomSheetProvider>\n  </IconProvider>\n</template>\n```\n\n### React → Vue API mapping\n\n| React | Vue |\n| --- | --- |\n| `className` prop | `class` attr (fallthrough, conflict-aware merge) |\n| `children` | default slot |\n| ReactNode props (`title`, `actions`, …) | string prop **or** named slot of the same name |\n| `value` + `onChange` | `v-model` (`modelValue` / `update:modelValue`) |\n| `onClose` / `onToggle` / … | emits: `@close`, `@toggle`, … |\n| hooks (`useTheme`, `useStepper`, …) | composables with the same names returning `Ref`s |\n| `IconProvider` / `BottomSheetProvider` contexts | same-named provider components (provide/inject) |\n\nSee [CONVENTIONS.md](./CONVENTIONS.md) for the full conversion rules.\n\n## Development\n\n```bash\nnpm install\nnpm run lint            # vue-tsc typecheck\nnpm run build           # vite lib build + d.ts\nnpm run generate:icons  # regenerate vue/src/icons from react/src/icons\n```\n\nIcons are generated — edit `react/src/icons/components/*.tsx` and re-run\n`npm run generate:icons`; never edit `vue/src/icons` by hand.\n\n## Demo\n\n```bash\ncd demo\nnpm install\nnpm run dev   # http://localhost:5175\n```\n\nThe demo mirrors the React demo (`../demo`) page-for-page and consumes the kit\nsource directly via a Vite alias.\n","readmeFilename":"README.md","_rev":"1-e0a14f9c0fc44883cb38b2f7553854a1"}