{"_id":"@anil-labs/select-svelte","name":"@anil-labs/select-svelte","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@anil-labs/select-svelte","version":"0.1.0","description":"Svelte 5 headless adapter for @anil-labs/select — a reactive store wrapper you compose into your own components.","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"sideEffects":false,"keywords":["svelte","svelte5","headless","runes","select","combobox","multiselect","tags","autocomplete","a11y","typescript"],"engines":{"node":">=20"},"license":"MIT","author":"Er. Anil Kumar Thakur <anilkumarthakur60@gmail.com>","repository":{"type":"git","url":"git+https://github.com/anilkumarthakur60/select.git","directory":"packages/svelte"},"homepage":"https://github.com/anilkumarthakur60/select/tree/main/packages/svelte#readme","bugs":"https://github.com/anilkumarthakur60/select/issues","publishConfig":{"access":"public"},"dependencies":{"@anil-labs/select-core":"^0.1.0"},"devDependencies":{"@vitest/coverage-v8":"^4.1.5","tsup":"^8.5.1","typescript":"~6.0.0","vitest":"^4.1.5","svelte":"5.55.5","jsdom":"^29.0.2","@types/node":"^24.12.2"},"peerDependencies":{"svelte":"^5.0.0"},"scripts":{"clean":"rm -rf dist coverage","build":"tsup","dev":"tsup --watch","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","typecheck":"tsc --noEmit","lint":"eslint ."},"_nodeVersion":"24.18.0","_id":"@anil-labs/select-svelte@0.1.0","dist":{"integrity":"sha512-LpxlYc0LMKLfDUEyfdJIo0pinHcXCqw7g4RNXO9Lv3wPaCeMM/Pk49StfIe9Fl24t0ATBXnwbOgN9K3iKza4oA==","shasum":"5aa7d333e4c990c13363748f8b196547b8046e15","tarball":"https://registry.npmjs.org/@anil-labs/select-svelte/-/select-svelte-0.1.0.tgz","fileCount":7,"unpackedSize":9536,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDK0oyJqSEYxB8vxPRUlFETXuNPjIIakf0HnClI+U2U5AIhAIV0MUAx3HIILLWDkeChh1oPxzjrivZCuY91LvO9R0Vc"}]},"_npmUser":{"name":"anilkumarthakur","email":"anilkumarthakur60@gmail.com"},"directories":{},"maintainers":[{"name":"anilkumarthakur","email":"anilkumarthakur60@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/select-svelte_0.1.0_1784650666327_0.5324912897703118"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-21T16:17:46.134Z","0.1.0":"2026-07-21T16:17:46.455Z","modified":"2026-07-21T16:17:46.664Z"},"maintainers":[{"name":"anilkumarthakur","email":"anilkumarthakur60@gmail.com"}],"description":"Svelte 5 headless adapter for @anil-labs/select — a reactive store wrapper you compose into your own components.","homepage":"https://github.com/anilkumarthakur60/select/tree/main/packages/svelte#readme","keywords":["svelte","svelte5","headless","runes","select","combobox","multiselect","tags","autocomplete","a11y","typescript"],"repository":{"type":"git","url":"git+https://github.com/anilkumarthakur60/select.git","directory":"packages/svelte"},"author":"Er. Anil Kumar Thakur <anilkumarthakur60@gmail.com>","bugs":"https://github.com/anilkumarthakur60/select/issues","license":"MIT","readme":"# @anil-labs/select-svelte\n\nSvelte 5 adapter for [`@anil-labs/select`](https://github.com/anilkumarthakur60/select).\n\nThis adapter is **headless**: it ships no precompiled `.svelte` component. Doing\nso would force both this package and its consumers onto `vite-plugin-svelte` and\npin a Svelte version into the tarball. Instead you get a small reactive wrapper\naround the shared\n[`@anil-labs/select-core`](https://github.com/anilkumarthakur60/select/tree/main/packages/core)\nmachine, which you compose into your own components.\n\n## Install\n\n```sh\nnpm install @anil-labs/select-svelte @anil-labs/select-core\n```\n\n## Usage\n\n```svelte\n<script lang=\"ts\">\n  import { createSelectAdapter, toSvelteProps } from '@anil-labs/select-svelte'\n  import '@anil-labs/select-core/styles.css'\n\n  const select = createSelectAdapter({\n    options: ['apple', 'banana', 'cherry'],\n    mode: 'multiple',\n  })\n\n  let tick = $state(0)\n  $effect(() => select.subscribe(() => tick++))\n</script>\n\n<div {...toSvelteProps(select.machine.getRootProps())}>\n  <input {...toSvelteProps(select.machine.getInputProps())} />\n  {#if select.machine.getState().isOpen}\n    <ul {...toSvelteProps(select.machine.getMenuProps())}>\n      {#each select.machine.getFilteredOptions() as option, i}\n        <li {...toSvelteProps(select.machine.getOptionProps(i))}>{option.label}</li>\n      {/each}\n    </ul>\n  {/if}\n</div>\n```\n\n`tick` is read inside the markup so Svelte re-renders on machine notifications —\nrunes cannot observe external pub/sub on their own.\n\n`toSvelteProps` maps the core's Vue-JSX-style event keys (`onMousedown`) to\nSvelte 5's lowercased ones (`onmousedown`).\n\n## Styles\n\nThe stylesheet lives in `@anil-labs/select-core` so every adapter shares one\ncopy — importing it from this package will not work.\n\n## License\n\nMIT © [Er. Anil Kumar Thakur](https://github.com/anilkumarthakur60)\n","readmeFilename":"","_rev":"1-671504ff790b8a45d11638105f949ae5"}