{"_id":"@cujuju/solidjs-chip-flyout","_rev":"3-e2b9cda021e504eb489f8b2b0a509b61","name":"@cujuju/solidjs-chip-flyout","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@cujuju/solidjs-chip-flyout","version":"0.1.0","keywords":["solidjs","filter","flyout","chip","tri-state","multi-select","popover"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-chip-flyout@0.1.0","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/chip-flyout","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"0f0c3976013a3a68147c67bb33b051ce057f4c77","tarball":"https://registry.npmjs.org/@cujuju/solidjs-chip-flyout/-/solidjs-chip-flyout-0.1.0.tgz","fileCount":14,"integrity":"sha512-U95ULaD5sOvJd1waWe6T50k5bdh6lXplELub64olIgzuUBwUTPj7yr++xPNFLQmk0rNJXLBFgNfc0RlQvclGww==","signatures":[{"sig":"MEUCIQCfThxzPN7CnPhsNan7WEOPLB+uRF6nzOlNVS2x6ydidwIgauhRAlPxryzWEqt03hT8E69v4F+ToxZ3upWZSPD5hps=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":87916},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-chip-flyout-0.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"solid":"./src/index.ts","types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./src/chip-flyout.css"},"scripts":{"test":"vitest run","build":"vite build","test:watch":"vitest"},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"_resolved":"C:\\Users\\shawn\\AppData\\Local\\Temp\\5dff0cc8828f3029d90f8a45c417de9b\\cujuju-solidjs-chip-flyout-0.1.0.tgz","_integrity":"sha512-U95ULaD5sOvJd1waWe6T50k5bdh6lXplELub64olIgzuUBwUTPj7yr++xPNFLQmk0rNJXLBFgNfc0RlQvclGww==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/chip-flyout"},"_npmVersion":"11.12.1","description":"Filter flyout primitive for SolidJS — a trigger button opening a Portal'd glass menu of tri-state or multi-select chips, with optional server-backed typeahead.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.8.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^3.2.4","vite-plugin-solid":"^2.11.12","@cujuju/solidjs-hooks":"2.0.0","@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1","@cujuju/solidjs-glass-menu":"0.1.0","@cujuju/solidjs-tri-state-chip":"0.1.0"},"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-hooks":"2.0.0","@cujuju/solidjs-glass-menu":"0.1.0","@cujuju/solidjs-tri-state-chip":"0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-chip-flyout_0.1.0_1779002512476_0.10234259001084789","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@cujuju/solidjs-chip-flyout","version":"0.1.1","keywords":["solidjs","filter","flyout","chip","tri-state","multi-select","popover"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-chip-flyout@0.1.1","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/chip-flyout","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"2bcc657a9abb56c222b428bbbab7d6d8b06177e7","tarball":"https://registry.npmjs.org/@cujuju/solidjs-chip-flyout/-/solidjs-chip-flyout-0.1.1.tgz","fileCount":14,"integrity":"sha512-bP5LBLdlU0oybXCHdEikkFSqgSqMlfns2ErBHDkLcX21htflTDA95l8xdQIAcgk3Jaik8+an54PFH62Jjo+3TQ==","signatures":[{"sig":"MEQCIB9zQmdweNd/gdGPXE5KwyfZFSdO3g17S1GHdTApsMkTAiAJnXl/yhUI8jvYFDjJ6bAHG7DNlZEb/t7ZpXhdPxnaiQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":91448},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-chip-flyout-0.1.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"solid":"./src/index.ts","types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./src/chip-flyout.css"},"scripts":{"test":"vitest run","build":"vite build","test:watch":"vitest"},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"_resolved":"/tmp/7741e7ad8028634721822db9ac0c1015/cujuju-solidjs-chip-flyout-0.1.1.tgz","_integrity":"sha512-bP5LBLdlU0oybXCHdEikkFSqgSqMlfns2ErBHDkLcX21htflTDA95l8xdQIAcgk3Jaik8+an54PFH62Jjo+3TQ==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/chip-flyout"},"_npmVersion":"12.0.1","description":"Filter flyout primitive for SolidJS — a trigger button opening a Portal'd glass menu of tri-state or multi-select chips, with optional server-backed typeahead.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^3.2.4","vite-plugin-solid":"^2.11.12","@cujuju/solidjs-hooks":"2.0.0","@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1","@cujuju/solidjs-glass-menu":"0.2.0","@cujuju/solidjs-tri-state-chip":"0.2.0"},"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-hooks":"2.0.0","@cujuju/solidjs-glass-menu":"0.2.0","@cujuju/solidjs-tri-state-chip":"0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-chip-flyout_0.1.1_1784887087187_0.47995387764541064","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@cujuju/solidjs-chip-flyout","version":"0.1.2","description":"Filter flyout primitive for SolidJS — a trigger button opening a Portal'd glass menu of tri-state or multi-select chips, with optional server-backed typeahead.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","solid":"./src/index.ts","import":"./dist/index.js"},"./styles.css":"./src/chip-flyout.css"},"sideEffects":["**/*.css"],"license":"MIT","author":{"name":"Cujuju"},"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/chip-flyout"},"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/chip-flyout","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"keywords":["solidjs","filter","flyout","chip","tri-state","multi-select","popover"],"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-glass-menu":"^0.2.1","@cujuju/solidjs-tri-state-chip":"^0.2.0","@cujuju/solidjs-hooks":"^2.0.0"},"devDependencies":{"@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1","jsdom":"^24.0.0","vite-plugin-solid":"^2.11.12","vitest":"^3.2.4","@cujuju/solidjs-glass-menu":"^0.2.1","@cujuju/solidjs-hooks":"^2.0.0","@cujuju/solidjs-tri-state-chip":"^0.2.0"},"publishConfig":{"access":"public"},"scripts":{"test":"vitest run","test:watch":"vitest","build":"vite build"},"_id":"@cujuju/solidjs-chip-flyout@0.1.2","_integrity":"sha512-BCxGBaUMT8T2ydk8yrOvoj1ikL8X1e+Z/hRTImgWrUGt+ZlgpLQYVtNaPfOTQsd4UwNuaePMmeSXeqgoc9TpfA==","_resolved":"/tmp/a6a0f6696bfdb60599e9c6831410d295/cujuju-solidjs-chip-flyout-0.1.2.tgz","_from":"file:cujuju-solidjs-chip-flyout-0.1.2.tgz","_nodeVersion":"24.18.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-BCxGBaUMT8T2ydk8yrOvoj1ikL8X1e+Z/hRTImgWrUGt+ZlgpLQYVtNaPfOTQsd4UwNuaePMmeSXeqgoc9TpfA==","shasum":"1cb91cea1e2716898ad2995b3fccc56759b0cfd4","tarball":"https://registry.npmjs.org/@cujuju/solidjs-chip-flyout/-/solidjs-chip-flyout-0.1.2.tgz","fileCount":14,"unpackedSize":91454,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCYip23JDZ7tFXWpoW/AGdMTLmclshRJBRbONAW5rRnOwIgRDYQFEoJ/iIQ7PtX+SR3cAcF8DCcg3C2pz0SU5LCtu8="}]},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"directories":{},"maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/solidjs-chip-flyout_0.1.2_1784888184438_0.6618008822770267"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-17T07:21:52.386Z","modified":"2026-07-24T10:16:24.726Z","0.1.0":"2026-05-17T07:21:52.638Z","0.1.1":"2026-07-24T09:58:07.320Z","0.1.2":"2026-07-24T10:16:24.580Z"},"bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"author":{"name":"Cujuju"},"license":"MIT","homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/chip-flyout","keywords":["solidjs","filter","flyout","chip","tri-state","multi-select","popover"],"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/chip-flyout"},"description":"Filter flyout primitive for SolidJS — a trigger button opening a Portal'd glass menu of tri-state or multi-select chips, with optional server-backed typeahead.","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"readme":"# @cujuju/solidjs-chip-flyout\n\nA filter **flyout** primitive for SolidJS: a secondary-button-sized\ntrigger that opens a Portal'd [glass menu](../glass-menu) of selectable\nchips. Two selection modes, optional server-backed typeahead, and the\npositioning / dismiss lifecycle handled for you.\n\n- **`tri-state`** — each chip cycles unselected → included → excluded.\n- **`multi`** — each chip toggles unselected ↔ included.\n\nThe panel follows the trigger via `getBoundingClientRect`, clamps\ninside the viewport, and dismisses on outside click, Escape, viewport\nresize, and page scroll (in-panel scroll is preserved).\n\n## Install\n\n```sh\npnpm add @cujuju/solidjs-chip-flyout \\\n  @cujuju/solidjs-glass-menu @cujuju/solidjs-tri-state-chip @cujuju/solidjs-hooks\n```\n\n## Usage\n\n```tsx\nimport { ChipFlyout, EMPTY_TRI_STATE, type TriStateValue } from '@cujuju/solidjs-chip-flyout';\n\nconst [tags, setTags] = createSignal<TriStateValue>({ ...EMPTY_TRI_STATE });\n\n<ChipFlyout\n  mode=\"tri-state\"\n  label=\"Tags\"\n  options={[{ value: 'action', label: 'Action' }, { value: 'drama', label: 'Drama' }]}\n  value={tags()}\n  onChange={setTags}\n/>;\n```\n\nMulti-select:\n\n```tsx\n<ChipFlyout mode=\"multi\" label=\"Genres\" options={opts} value={genres()} onChange={setGenres} />\n```\n\n## Props\n\n| Prop | Type | Notes |\n|------|------|-------|\n| `mode` | `'tri-state' \\| 'multi'` | Selection model. |\n| `label` | `string` | Trigger text + default panel title. |\n| `options` | `ChipOption[]` | `{ value, label, group? }`. Options sharing a `group` render under a header. |\n| `value` / `onChange` | `TriStateValue` / `string[]` | Shape depends on `mode`. |\n| `panelTitle` | `string?` | Overrides the panel header text. |\n| `sort` | `boolean?` | Sort options alphabetically. |\n| `disabled` | `boolean?` | |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | Default `bottom-start`. |\n| `panelMinWidth` / `panelMaxWidth` | `number?` | Default 280 / 480. |\n| `open` / `onOpenChange` | `boolean?` / `(b) => void` | Optional controlled open state. |\n| `loading`, `hasMore`, `onLoadMore`, `searchValue`, `onSearchInput`, `topSlot` | — | Server-backed typeahead extensions; each is independent. |\n\n## Styling\n\n`ChipFlyout` registers its own stylesheet and pulls the glass surface +\nmenu chrome transitively through `@cujuju/solidjs-glass-menu`. Chip\ncolors are themed via the `--ctc-*` variables (see\n`@cujuju/solidjs-tri-state-chip`), pre-mapped to the host palette.\n\nIt references host theme tokens directly — `--color-*`, `--font-size-*`\n(`xs`, `2xs`, `sm`, `base`), `--radius-*` (`sm`, `md`, `btn`),\n`--height-btn`, `--spacing-xs`, `--spacing-sm`, `--transition-speed`,\nand the alpha scales `--color-primary-alpha-10`,\n`--color-success-alpha-{15,20,25}`, `--color-danger-alpha-{15,25}`.\n`--z-flyout` has an inline fallback (`1000`).\n\n## License\n\nMIT\n","readmeFilename":"README.md"}