{"_id":"@cujuju/solidjs-pill-toggle","_rev":"2-c4cd6aa2990ff47a27ac51ec3a071dec","name":"@cujuju/solidjs-pill-toggle","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@cujuju/solidjs-pill-toggle","version":"0.1.0","keywords":["solidjs","toggle","switch","ios-switch","pill"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-pill-toggle@0.1.0","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/pill-toggle","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"ce1d307a9cab2b17a23e1ba0cb78fa50d40a8bf2","tarball":"https://registry.npmjs.org/@cujuju/solidjs-pill-toggle/-/solidjs-pill-toggle-0.1.0.tgz","fileCount":15,"integrity":"sha512-N7q/Kk9qCaFHgVrfymcNdI/8Ok+qkT4ulD6dd7+01sz+rxKx+9G52Vvxuitn5s0WMb3FFvGY5+JCtU00QINj4w==","signatures":[{"sig":"MEUCIDArpn5pR23zCgfEKF+nJosh4k952To2oe0vc21WafF5AiEAw6k9cCFc4qBomRC8lIGSBrKJdCQ0jCERNrJFaZiIcZo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44232},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-pill-toggle-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\\35c425fdfbbb8667fd0673e87d07c582\\cujuju-solidjs-pill-toggle-0.1.0.tgz","_integrity":"sha512-N7q/Kk9qCaFHgVrfymcNdI/8Ok+qkT4ulD6dd7+01sz+rxKx+9G52Vvxuitn5s0WMb3FFvGY5+JCtU00QINj4w==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/pill-toggle"},"_npmVersion":"11.12.1","description":"iOS-style pill toggle for SolidJS — icons, loading/readOnly, press effects, a11y switch role.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.8.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^29.0.2","vitest":"^3.2.4","vite-plugin-solid":"^2.11.12","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"solid-js":">=1.7.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-pill-toggle_0.1.0_1777341467217_0.922127694593972","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@cujuju/solidjs-pill-toggle","version":"0.2.0","description":"iOS-style pill toggle for SolidJS — icons, loading/readOnly, press effects, a11y switch role.","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/pill-toggle"},"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/pill-toggle","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"keywords":["solidjs","toggle","switch","ios-switch","pill"],"peerDependencies":{"solid-js":">=1.7.0"},"devDependencies":{"@testing-library/jest-dom":"^6.9.1","jsdom":"^29.0.2","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-pill-toggle@0.2.0","_integrity":"sha512-q63JDGLtpgavS6h1MmfE0k0yqy8k9c42iSofBPs8gm/RSmVrMEcnHn080mO+V2Ja9tiRy18p7o8gj+U+YJcjOA==","_resolved":"/tmp/1c1c83eebead8966dcc021504b4df147/cujuju-solidjs-pill-toggle-0.2.0.tgz","_from":"file:cujuju-solidjs-pill-toggle-0.2.0.tgz","_nodeVersion":"24.18.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-q63JDGLtpgavS6h1MmfE0k0yqy8k9c42iSofBPs8gm/RSmVrMEcnHn080mO+V2Ja9tiRy18p7o8gj+U+YJcjOA==","shasum":"102d7a071028bd9cb170f0a15f56f268771e0c5e","tarball":"https://registry.npmjs.org/@cujuju/solidjs-pill-toggle/-/solidjs-pill-toggle-0.2.0.tgz","fileCount":15,"unpackedSize":45010,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFQbh5AAtynfQNzr4YT10choApBzfTjBW8JJXn8iZZ3QAiEA+VOEt80g8qO2BZ3H4gc/xdGMKQ4OYaBiGMLp1D5WNIY="}]},"_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-pill-toggle_0.2.0_1784887077339_0.9083356729455965"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-28T01:57:47.093Z","modified":"2026-07-24T09:57:57.625Z","0.1.0":"2026-04-28T01:57:47.343Z","0.2.0":"2026-07-24T09:57:57.468Z"},"bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"author":{"name":"Cujuju"},"license":"MIT","homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/pill-toggle","keywords":["solidjs","toggle","switch","ios-switch","pill"],"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/pill-toggle"},"description":"iOS-style pill toggle for SolidJS — icons, loading/readOnly, press effects, a11y switch role.","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"readme":"# @cujuju/solidjs-pill-toggle\n\niOS-style pill toggle for SolidJS. Icons, loading/readOnly/disabled states, press effects, `role=\"switch\"` a11y, indeterminate (\"mixed\") state.\n\n## Install\n\n```\npnpm add @cujuju/solidjs-pill-toggle\n```\n\nStylesheet is side-effect-imported via the entrypoint; or `import '@cujuju/solidjs-pill-toggle/styles.css'` manually.\n\n## Usage\n\n```tsx\nimport { PillToggle } from '@cujuju/solidjs-pill-toggle';\nconst [on, setOn] = createSignal(false);\n\n<PillToggle\n  enabled={on()}\n  onToggle={() => setOn(!on())}\n  size=\"md\"\n  ariaLabel=\"Notifications\"\n/>\n```\n\n## API\n\n| Prop | Default | Description |\n|---|---|---|\n| `enabled` | (required) | Controlled on/off state. |\n| `onToggle` | (required) | Fired on click / Space keypress. |\n| `indeterminate` | `false` | Renders a \"mixed\" visual state (centered, dimmed dot) and emits `aria-checked=\"mixed\"` for partially-selected group toggles. `enabled` is still the prediction of what the next commit would set; consumer decides target state in `onToggle`. |\n| `size` | `'md'` | `'xs'` (24×12), `'sm'` (28×14), `'md'` (32×18), `'lg'` (40×22). |\n| `width`, `height`, `dotSize` | (preset) | Raw overrides. Numbers → px. |\n| `onColor`, `offColor`, `dotColor` | (CSS vars) | Direct color overrides. |\n| `disabled` | `false` | Non-interactive, dimmed. |\n| `readOnly` | `false` | Non-interactive but Tab-focusable and not dimmed to disabled level. |\n| `loading` | `false` | Shows spinner inside dot. Sets `aria-busy`. |\n| `onIcon`, `offIcon` | — | JSX inside the dot when `enabled` / `!enabled`. |\n| `animation` | `'linear'` | `'linear'` / `'ease'` / `'bounce'` / `'none'`. |\n| `transitionMs`, `easing` | (preset) | Raw animation overrides. |\n| `pressEffect` | `'none'` | `'scale'` (dot briefly shrinks) or `'ripple'` (radial flash). |\n| `ariaLabel`, `ariaLabelledBy`, `title` | — | a11y / tooltip. |\n| `class`, `style`, `dataAttr` | — | Passthrough. |\n\n## Animation preset defaults\n\n| `animation` | `transitionMs` | `easing` |\n|---|---|---|\n| `linear` | 150 | `linear` |\n| `ease` | 150 | `cubic-bezier(0.4, 0, 0.2, 1)` |\n| `bounce` | 300 | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` |\n| `none` | 0 | — |\n\nExplicit `transitionMs` / `easing` override the preset per-property. `prefers-reduced-motion` collapses to `none`.\n\n## Theming\n\n```css\n:root {\n  --tp-on-bg: #10b981;\n  --tp-off-bg: #334155;\n  --tp-dot: #ffffff;\n  --tp-dot-mixed: color-mix(in srgb, var(--tp-dot) 55%, transparent); /* indeterminate dot fill */\n  --tp-disabled-opacity: 0.5;\n  --tp-readonly-opacity: 0.85;\n  --tp-focus-ring: 2px solid #6366f1;\n  --tp-focus-ring-offset: 2px;\n}\n```\n\n## A11y\n\nEmits `role=\"switch\"` with `aria-checked` (`\"true\"` / `\"false\"` / `\"mixed\"`). Space toggles (Enter does not, matching the `role=\"switch\"` spec). Full `:focus-visible` ring.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}