{"_id":"@eidhachem/forms-shadcn-vue","_rev":"2-774dfde58e800cc2b34dfe9b98aac4cc","name":"@eidhachem/forms-shadcn-vue","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@eidhachem/forms-shadcn-vue","version":"0.1.0","keywords":["vue","shadcn","shadcn-vue","forms","adapter","typescript"],"license":"UNLICENSED","_id":"@eidhachem/forms-shadcn-vue@0.1.0","maintainers":[{"name":"eidhachem","email":"eidhachem1@gmail.com"}],"dist":{"shasum":"ae42742db13d0350629c501e4ff733ce588ad639","tarball":"https://registry.npmjs.org/@eidhachem/forms-shadcn-vue/-/forms-shadcn-vue-0.1.0.tgz","fileCount":7,"integrity":"sha512-sUO30l5ipjyr7U87pR3Flggq6FHI4cwxFlvwQqR68HEr570h4uxrwEncy3ANJ4kUsbjNohN0HKfnShQ/nDe2Lg==","signatures":[{"sig":"MEUCIATXs4bnpUKwWwKPdMWE4Ht9z+TOKCMr8CpaZU1vMOjCAiEAmVOY0LsV3XBJHWj759dD+HqBrn8VDBm65CB43HC2D0I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":81861},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"443c15dda2a1f68028259f819ac30d30f4fb218d","scripts":{"dev":"vite build --watch","test":"vitest run","build":"vite build","clean":"rimraf dist","typecheck":"vue-tsc --noEmit -p tsconfig.json"},"_npmUser":{"name":"eidhachem","email":"eidhachem1@gmail.com"},"_npmVersion":"10.8.2","description":"Official @eidhachem/forms UI adapter for shadcn-vue: maps built-in field types to shadcn-vue components.","directories":{},"sideEffects":false,"_nodeVersion":"20.19.6","dependencies":{"@eidhachem/forms":"workspace:^"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","vite":"^5.4.11","rimraf":"^6.0.1","vue-tsc":"^2.1.10","typescript":"^5.7.2","vite-plugin-dts":"^4.3.0","@vitejs/plugin-vue":"^5.2.1"},"peerDependencies":{"vue":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/forms-shadcn-vue_0.1.0_1787302889807_0.22598391393556572","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@eidhachem/forms-shadcn-vue","version":"0.1.1","description":"Official @eidhachem/forms UI adapter for shadcn-vue: maps built-in field types to shadcn-vue components.","type":"module","license":"UNLICENSED","engines":{"node":">=20"},"sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"scripts":{"build":"vite build","dev":"vite build --watch","typecheck":"vue-tsc --noEmit -p tsconfig.json","test":"vitest run","clean":"rimraf dist"},"dependencies":{"@eidhachem/forms":"^0.1.1"},"peerDependencies":{"vue":"^3.4.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.1","rimraf":"^6.0.1","typescript":"^5.7.2","vite":"^5.4.11","vite-plugin-dts":"^4.3.0","vue":"^3.5.13","vue-tsc":"^2.1.10"},"publishConfig":{"access":"public"},"keywords":["vue","shadcn","shadcn-vue","forms","adapter","typescript"],"_id":"@eidhachem/forms-shadcn-vue@0.1.1","gitHead":"443c15dda2a1f68028259f819ac30d30f4fb218d","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-wjtwG808nE8gmyLvJgG2AUj7buh0vTJrpW7j9uOz7EECyV+L4dBfV3Gg2cLKEsrNevsyQL8WNX6QQtwkPYo0uw==","shasum":"ab3423536f892a6de37e3e75efae2656fa70827e","tarball":"https://registry.npmjs.org/@eidhachem/forms-shadcn-vue/-/forms-shadcn-vue-0.1.1.tgz","fileCount":7,"unpackedSize":85601,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCPnspAPfTeH3KLx1Bgh1I3rPYBsNZHyuyY8zFIXdyuHwIgfrkZjaQtzwENuIZfsHS7DScdBJQmb09fekfXJxEOCU0="}]},"_npmUser":{"name":"eidhachem","email":"eidhachem1@gmail.com"},"directories":{},"maintainers":[{"name":"eidhachem","email":"eidhachem1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/forms-shadcn-vue_0.1.1_1787320686139_0.11930678298535757"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-21T09:01:29.671Z","modified":"2026-08-21T13:58:06.511Z","0.1.0":"2026-08-21T09:01:29.958Z","0.1.1":"2026-08-21T13:58:06.303Z"},"license":"UNLICENSED","keywords":["vue","shadcn","shadcn-vue","forms","adapter","typescript"],"description":"Official @eidhachem/forms UI adapter for shadcn-vue: maps built-in field types to shadcn-vue components.","maintainers":[{"name":"eidhachem","email":"eidhachem1@gmail.com"}],"readme":"# @sowlutions/forms-shadcn-vue\n\n> **Status:** `createShadcnVueAdapter()` maps a high-confidence core subset\n> of `@sowlutions/forms`'s built-in field types onto real\n> [shadcn-vue](https://www.shadcn-vue.com) components (built on\n> [Reka UI](https://reka-ui.com) primitives + Tailwind CSS). See\n> [ADR-024](../../docs/architecture/decisions/ADR-024-shadcn-vue-adapter.md)\n> for the full per-type breakdown and why the mapped set is smaller than\n> `@sowlutions/forms-nuxt-ui`'s.\n\n## Setup\n\nshadcn-vue has no installable component library at all: its CLI\n(`npx shadcn-vue add ...`) copies component source directly into your own\napp (typically `src/components/ui/*`), which you then own. There is no\nfixed package this adapter could import components from even if it wanted\nto — so, like `@sowlutions/forms-nuxt-ui` (for an unrelated reason), it takes\nyour already-imported components as a parameter, once:\n\n```sh\nnpx shadcn-vue@latest add button input textarea checkbox switch radio-group select slider label\n```\n\n```ts\n// e.g. src/plugins/forms-shadcn-vue.ts\nimport { Label } from '@/components/ui/label';\nimport { Input } from '@/components/ui/input';\nimport { Textarea } from '@/components/ui/textarea';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Switch } from '@/components/ui/switch';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';\nimport { Slider } from '@/components/ui/slider';\nimport { createShadcnVueAdapter } from '@sowlutions/forms-shadcn-vue';\nimport { registerAdapter, setDefaultAdapter } from '@sowlutions/forms';\n\nregisterAdapter(\n  createShadcnVueAdapter({\n    Label,\n    Input,\n    Textarea,\n    Checkbox,\n    Switch,\n    RadioGroup,\n    RadioGroupItem,\n    Select,\n    SelectTrigger,\n    SelectValue,\n    SelectContent,\n    SelectItem,\n    Slider,\n  }),\n);\nsetDefaultAdapter('shadcn-vue');\n```\n\nFrom then on, `FormRenderer`/`FieldRenderer` render every mapped field type\nthrough the real shadcn-vue component — no further wiring per form or per\nfield. This works the same in Nuxt (`@sowlutions/forms-nuxt`) or a plain Vue\napp; nothing here is Nuxt-specific.\n\n### Why not shadcn-vue's own `Form` components?\n\nshadcn-vue also ships `Form`/`FormField`/`FormItem`/`FormLabel`/\n`FormMessage` — but those are built directly on\n[vee-validate](https://vee-validate.logaretm.com/), a different form\nlibrary, and aren't used here. This adapter's label/description/error\nlayout is instead a small, deliberately plain replacement\n(`FieldShell`, internal) built from shadcn-vue's own `Label` primitive —\nsee ADR-024.\n\n## Supported field types\n\n`text`, `password`, `email`, `tel`, `url`, `search`, `number`, `textarea`,\n`checkbox`, `switch`, `radio`, `select`, `range`.\n\nDeliberately unmapped — `supports()` returns `false` and\n`resolveFieldComponentOrThrow` throws a clear error rather than rendering\nsilently-wrong UI (rule 11): `multiselect`/`autocomplete`/`combobox`/\n`checkbox-group`/`tags`/`color`/`rating`/`otp`/`currency`/`percentage`/the\n`file`/`image`/`file-list`/`image-list` family (no verified, high-\nconfidence shadcn-vue component was installed/tested for these — a real\nproject needing one can extend this adapter, see ADR-024); `phone` (no\nnative component); the date/time family (needs `@internationalized/date`-\nshaped values, same reasoning as ADR-018); structural types; `custom`\n(bypasses adapter resolution, ADR-013 §3).\n\n## Passing per-field config (options, min/max/step, ...)\n\nSame two channels as `@sowlutions/forms-nuxt-ui` (see ADR-023): `field.props`\nand the field's typed per-type config both merge into the resolved\ncomponent's props, `props` winning on a collision.\n\n```ts\n{ name: 'country', type: 'select', props: { options: [{ label: 'USA', value: 'us' }] } }\n{ name: 'volume', type: 'range', props: { min: 0, max: 10, step: 1 } }\n```\n\n`radio`/`select` read `options` (an array of `@sowlutions/forms`'\n`SelectOption` — `label`/`value`/`disabled`/`description`) and compose one\n`RadioGroupItem`/`SelectItem` per entry themselves — see ADR-024 for why\nthis needed a different wrapper shape than Nuxt UI's single generic one.\n\n`range`'s value is a single number; the underlying Reka UI `Slider`\nalways models an array (even for one thumb) — this adapter wraps/unwraps\nthat conversion, so `field.props`'s only relevant keys are `min`/`max`/\n`step`.\n\nSee the repository root [README](../../README.md) and\n[docs/architecture](../../docs/architecture) for the full architecture and\nroadmap.\n","readmeFilename":"README.md"}