{"_id":"@cujuju/solidjs-tri-state-chip","_rev":"2-1047c92f652a308c1ffab3348f8bff72","name":"@cujuju/solidjs-tri-state-chip","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@cujuju/solidjs-tri-state-chip","version":"0.1.0","keywords":["solidjs","tri-state","filter","chip","include-exclude"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-tri-state-chip@0.1.0","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/tri-state-chip","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"9c2dbe473eceb41babeac485fd829bc21815bc7b","tarball":"https://registry.npmjs.org/@cujuju/solidjs-tri-state-chip/-/solidjs-tri-state-chip-0.1.0.tgz","fileCount":15,"integrity":"sha512-aX1TeYnL0FVig/T9QLq4U26I0kRGZm6zYHarjSX1BtTXGU9JWtDcWiGnKJJIu+5wzQCX2N/Qc2Y4fp/Df0HVTw==","signatures":[{"sig":"MEUCIHIuz3UFPOk3a+BQyngu/S69F2/6uLiA0Ha2ueWpfAWxAiEAxnRFhe7T5sTQ06rFuK/qF3J5jzZ/MKAP5VlOgIhUrj4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44363},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-tri-state-chip-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/styles.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\\bb0afd5db34543d0c92421804788a547\\cujuju-solidjs-tri-state-chip-0.1.0.tgz","_integrity":"sha512-aX1TeYnL0FVig/T9QLq4U26I0kRGZm6zYHarjSX1BtTXGU9JWtDcWiGnKJJIu+5wzQCX2N/Qc2Y4fp/Df0HVTw==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/tri-state-chip"},"_npmVersion":"11.12.1","description":"Tri-state filter chip for SolidJS — include / exclude / neutral cycling, theme via CSS vars, plus pure state helpers (cycleTriState, applyTriState, tristateOf).","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","@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"solid-js":">=1.7.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-tri-state-chip_0.1.0_1778526744140_0.3710300276855387","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@cujuju/solidjs-tri-state-chip","version":"0.2.0","description":"Tri-state filter chip for SolidJS — include / exclude / neutral cycling, theme via CSS vars, plus pure state helpers (cycleTriState, applyTriState, tristateOf).","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/styles.css"},"sideEffects":["**/*.css"],"license":"MIT","author":{"name":"Cujuju"},"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/tri-state-chip"},"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/tri-state-chip","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"keywords":["solidjs","tri-state","filter","chip","include-exclude"],"peerDependencies":{"solid-js":">=1.7.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"},"publishConfig":{"access":"public"},"scripts":{"test":"vitest run","test:watch":"vitest","build":"vite build"},"_id":"@cujuju/solidjs-tri-state-chip@0.2.0","_integrity":"sha512-2SHlD4fTk9Xsmxjiskz5HYW8sKYAuQJx65znnKKFBYVifkObvcg2R0IZHd4/Ctvc+W1SUkg8x/qQroBimWAB4w==","_resolved":"/tmp/8e5d6d9711c7650d3b2545555df1a493/cujuju-solidjs-tri-state-chip-0.2.0.tgz","_from":"file:cujuju-solidjs-tri-state-chip-0.2.0.tgz","_nodeVersion":"24.18.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-2SHlD4fTk9Xsmxjiskz5HYW8sKYAuQJx65znnKKFBYVifkObvcg2R0IZHd4/Ctvc+W1SUkg8x/qQroBimWAB4w==","shasum":"021b78a7d987ebe8869f5c453f7cda360cd14ea5","tarball":"https://registry.npmjs.org/@cujuju/solidjs-tri-state-chip/-/solidjs-tri-state-chip-0.2.0.tgz","fileCount":15,"unpackedSize":98132,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEPBCplJPmJoKgb3LVb+NdptgY8xXfs1RR6ZAoflQI/ZAiEAjmkKNUoWhJIJojNc2DaDtnf7G1qmiKbe3xVNtM/e8Xc="}]},"_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-tri-state-chip_0.2.0_1784887080405_0.7681200823454832"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T19:12:24.063Z","modified":"2026-07-24T09:58:00.751Z","0.1.0":"2026-05-11T19:12:24.288Z","0.2.0":"2026-07-24T09:58:00.591Z"},"bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"author":{"name":"Cujuju"},"license":"MIT","homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/tri-state-chip","keywords":["solidjs","tri-state","filter","chip","include-exclude"],"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/tri-state-chip"},"description":"Tri-state filter chip for SolidJS — include / exclude / neutral cycling, theme via CSS vars, plus pure state helpers (cycleTriState, applyTriState, tristateOf).","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"readme":"# @cujuju/solidjs-tri-state-chip\n\nA single tri-state filter chip for SolidJS. One button cycling `unselected` → `included` → `excluded` → `unselected` on click. Ships pure state helpers (`cycleTriState`, `applyTriState`, `tristateOf`, `EMPTY_TRI_STATE`) so callsites can manage upstream `TriStateValue` shape without re-implementing the disjoint-set math.\n\nNot a popover. Just the chip. Drop it inside whatever filter shell you already have (popover, inline bar, drawer) — the panel, dismissal, and viewport clamping are your concern.\n\n## Install\n\n```\npnpm add @cujuju/solidjs-tri-state-chip\n```\n\nStylesheet is side-effect-imported via the entrypoint; or `import '@cujuju/solidjs-tri-state-chip/styles.css'` manually.\n\n## Usage\n\n```tsx\nimport {\n  TriStateChip,\n  applyTriState,\n  tristateOf,\n  EMPTY_TRI_STATE,\n  type TriStateValue,\n} from '@cujuju/solidjs-tri-state-chip';\nimport { createSignal, For } from 'solid-js';\n\nconst [value, setValue] = createSignal<TriStateValue>(EMPTY_TRI_STATE);\nconst options = ['action', 'comedy', 'drama'];\n\n<For each={options}>\n  {(opt) => (\n    <TriStateChip\n      label={opt}\n      value={tristateOf(value(), opt)}\n      onCycle={(next) => setValue(applyTriState(value(), opt, next))}\n    />\n  )}\n</For>\n```\n\n## API — `<TriStateChip>`\n\n| Prop | Default | Description |\n|---|---|---|\n| `label` | (required) | Chip body content. Plain text or JSX. |\n| `value` | (required) | Current state: `'unselected'` / `'included'` / `'excluded'`. |\n| `onCycle` | (required) | Fires with the next state on click. |\n| `disabled` | `false` | Non-interactive, dimmed. |\n| `nextState` | `cycleTriState` | Override the cycle order. |\n| `includePrefix` | `'+ '` | Glyph shown before the label when included. Pass `''` to suppress. |\n| `excludePrefix` | `'− '` | Glyph shown before the label when excluded. |\n| `ariaLabel` | — | Override for screen readers. |\n| `class`, `style`, `dataAttr` | — | Passthrough. |\n\n## API — state helpers\n\n```ts\ntype TriState = 'unselected' | 'included' | 'excluded';\ninterface TriStateValue { included: string[]; excluded: string[] }\n\nconst EMPTY_TRI_STATE: TriStateValue;\ncycleTriState(current: TriState): TriState;\ntristateOf(value: TriStateValue, item: string): TriState;\napplyTriState(value: TriStateValue, item: string, next: TriState): TriStateValue;\n```\n\nAll pure, no Solid dependency — safe to import in stores, tests, or workers.\n\n## Theming\n\n```css\n:root {\n  --ctc-bg: transparent;\n  --ctc-color: inherit;\n  --ctc-border: 1px solid currentColor;\n  --ctc-border-hover: 1px solid #6366f1;\n\n  --ctc-bg-included: rgba(16, 185, 129, 0.15);\n  --ctc-color-included: #10b981;\n  --ctc-border-included: 1px solid #10b981;\n  --ctc-bg-included-hover: rgba(16, 185, 129, 0.25);\n\n  --ctc-bg-excluded: rgba(244, 63, 94, 0.15);\n  --ctc-color-excluded: #f43f5e;\n  --ctc-border-excluded: 1px solid #f43f5e;\n  --ctc-bg-excluded-hover: rgba(244, 63, 94, 0.25);\n\n  --ctc-padding: 5px 10px;\n  --ctc-radius: 6px;\n  --ctc-font-size: 0.875rem;\n  --ctc-font-weight: 500;\n  --ctc-transition: 150ms ease;\n  --ctc-disabled-opacity: 0.5;\n  --ctc-focus-ring: 2px solid #6366f1;\n  --ctc-focus-ring-offset: 2px;\n}\n```\n\n## A11y\n\nThe chip emits `aria-pressed=\"true\"` when the state is `included` or `excluded`, and `aria-pressed=\"false\"` when `unselected`. The include-vs-exclude distinction is carried visually (color, prefix glyph) and via `data-state=\"included\" | \"excluded\" | \"unselected\"` on the root for CSS / automation. `aria-pressed=\"mixed\"` is intentionally NOT used — per W3C, `mixed` is reserved for partially-selected groups, not for distinguishing two pressed flavors of a single toggle. Pass `ariaLabel=\"Genre: action (included)\"` from the consumer if richer screen-reader output is needed.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}