{"_id":"@cujuju/solidjs-collapsible","_rev":"2-f521c78088c41cde395ddc890321ac41","name":"@cujuju/solidjs-collapsible","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@cujuju/solidjs-collapsible","version":"0.1.0","keywords":["solidjs","collapsible","accordion","disclosure","section"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-collapsible@0.1.0","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/collapsible","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"ae36ec1b919ee6deecf4504ecb3c89cf9a34dff0","tarball":"https://registry.npmjs.org/@cujuju/solidjs-collapsible/-/solidjs-collapsible-0.1.0.tgz","fileCount":15,"integrity":"sha512-J+hTviyUHKBPEdbT6LhsSHs2J6By/LxrYkncEZbiXQkXATkOQWVFPHNW689+K0AazYKM80K2R1o0rp6ra1sojg==","signatures":[{"sig":"MEYCIQCedrDEgBOIW1qL9niF/4jS9/D6rdb/tu/7oW8bq29TbQIhAMw/EhsXxQOwb3N1TZX5KufRBQy7goQYFutlMrfEn7rj","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":56425},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-collapsible-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\\e5de9e8a2fe9a58a31b302a9fdf096d3\\cujuju-solidjs-collapsible-0.1.0.tgz","_integrity":"sha512-J+hTviyUHKBPEdbT6LhsSHs2J6By/LxrYkncEZbiXQkXATkOQWVFPHNW689+K0AazYKM80K2R1o0rp6ra1sojg==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/collapsible"},"_npmVersion":"11.12.1","description":"Collapsible section for SolidJS — persisted open state, forceOpen override, panel + section variants, full a11y.","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","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"solid-js":">=1.7.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-collapsible_0.1.0_1777341442905_0.6306507391434608","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@cujuju/solidjs-collapsible","version":"0.2.0","description":"Collapsible section for SolidJS — persisted open state, forceOpen override, panel + section variants, full a11y.","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/collapsible"},"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/collapsible","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"keywords":["solidjs","collapsible","accordion","disclosure","section"],"peerDependencies":{"solid-js":">=1.7.0"},"devDependencies":{"@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-collapsible@0.2.0","_integrity":"sha512-thcRjyCZkWZWHRM3TQ9I0C4jaAGbMgg2RpMr13m2WB6JdU3JJVLO0fHP9othIvT1NKToRTPKeyjf14y0I/KLAA==","_resolved":"/tmp/3363b77e51d79a0c8d3c7d421801647c/cujuju-solidjs-collapsible-0.2.0.tgz","_from":"file:cujuju-solidjs-collapsible-0.2.0.tgz","_nodeVersion":"24.18.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-thcRjyCZkWZWHRM3TQ9I0C4jaAGbMgg2RpMr13m2WB6JdU3JJVLO0fHP9othIvT1NKToRTPKeyjf14y0I/KLAA==","shasum":"e9969ad74e2089ccb3cd5c59f45de59764634275","tarball":"https://registry.npmjs.org/@cujuju/solidjs-collapsible/-/solidjs-collapsible-0.2.0.tgz","fileCount":15,"unpackedSize":57295,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDH84PVMQCmcOMbaz6rRkE/wkSHUtWe/IL5cd6HQpqv2QIhAIDH5gUSM8r0fH8r+JhS/qlzNAY33kjmrmo2kW4jCNSp"}]},"_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-collapsible_0.2.0_1784887072370_0.4617925705700858"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-28T01:57:22.780Z","modified":"2026-07-24T09:57:52.634Z","0.1.0":"2026-04-28T01:57:23.070Z","0.2.0":"2026-07-24T09:57:52.492Z"},"bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"author":{"name":"Cujuju"},"license":"MIT","homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/collapsible","keywords":["solidjs","collapsible","accordion","disclosure","section"],"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/collapsible"},"description":"Collapsible section for SolidJS — persisted open state, forceOpen override, panel + section variants, full a11y.","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"readme":"# @cujuju/solidjs-collapsible\n\nCollapsible section for SolidJS. Persisted open state, `forceOpen` override with manual-toggle semantics, `'section'` and `'panel'` visual variants, full a11y (`aria-expanded` / `aria-controls` / `role=\"region\"`), keyboard-friendly.\n\n## Install\n\n```\npnpm add @cujuju/solidjs-collapsible\n```\n\nStylesheet auto-imported via entrypoint (or import `@cujuju/solidjs-collapsible/styles.css` manually).\n\n## Usage\n\n```tsx\nimport { Collapsible } from '@cujuju/solidjs-collapsible';\n\n<Collapsible\n  title=\"Filters\"\n  storageKey=\"search-filters\"\n  storageKeyPrefix=\"myapp:section:\"\n  count={activeFilters().length}\n>\n  <FiltersPanel />\n</Collapsible>\n```\n\n## Hook + component\n\n- **`useCollapsible`** is the state-machine hook (for consumers who want custom visuals).\n- **`<Collapsible>`** is the batteries-included component.\n\n```tsx\nimport { useCollapsible } from '@cujuju/solidjs-collapsible';\n\nconst state = useCollapsible({ storageKey: 'myapp:filters' });\n<button onClick={state.toggle}>\n  {state.open() ? 'Collapse' : 'Expand'}\n</button>\n<Show when={state.open()}>...content...</Show>\n```\n\n## API\n\n### `<Collapsible>` props\n\n| Prop | Default | Description |\n|---|---|---|\n| `title` | (required) | string or JSX. |\n| `children` | (required) | Content body. |\n| `count` | — | Optional number rendered as `(N)` after the title. |\n| `actions` | — | Right-aligned JSX in the header row. |\n| `icon` | `▶` | Single icon; rotates 90° when open. |\n| `openIcon`, `closedIcon` | — | Distinct icons per state (overrides `icon`). |\n| `storageKey` | — | localStorage key for persistence. If omitted, state is ephemeral. |\n| `storageKeyPrefix` | `''` | Prefix prepended to `storageKey`. Empty by default — consumers control their own namespace. |\n| `defaultOpen` | `true` | Initial value when no persisted state exists. |\n| `forceOpen` | — | Override value (e.g., from an \"expand all\" button). See semantics below. |\n| `onChange(open)` | — | Fires whenever the effective open state changes. |\n| `uppercase` | `false` | Applies uppercase + letter-spacing to the title. |\n| `variant` | `'section'` | `'section'` (transparent header) or `'panel'` (card with background + border). |\n| `lazyMount` | `false` | Render children only after first open. |\n| `keepMounted` | `true` | Keep DOM when closed (hidden via CSS). Set false to unmount on close. |\n| `animated` | `false` | Animate content height on toggle. |\n| `ariaLabel`, `id` | — | a11y hooks. |\n| `class`, `headerClass`, `contentClass` | — | Style passthrough. |\n\n### `useCollapsible(options)`\n\nSame state-related options as the component plus `forceOpen` is an **accessor** (`() => boolean | null | undefined`) rather than a value.\n\nReturns `{ open, toggle, setOpen, manuallyToggled, reset }`.\n\n## `forceOpen` + `manuallyToggled` semantics\n\nDesigned for \"Expand All\" / \"Collapse All\" buttons where the user can still override per-section:\n\n```\nforceOpen: null              → section respects its own local state\nforceOpen: true              → section opens (unless manuallyToggled is true)\nuser toggles (open→closed)   → manuallyToggled = true; user's choice sticks\nforceOpen: true (unchanged)  → no effect; user's choice still wins\nforceOpen: false             → NEW value: manuallyToggled resets, section closes\nforceOpen: true              → NEW value: manuallyToggled resets, section opens\n```\n\nDetection is **by value**: re-asserting the same `forceOpen` value is a no-op. Only a *change* to a different value resets `manuallyToggled`.\n\n## Theming\n\n```css\n:root {\n  --cl-arrow-color-open: #64748b;\n  --cl-arrow-color-closed: #f59e0b;\n  --cl-title-color: #64748b;\n  --cl-title-size: 14px;\n  --cl-title-weight: 600;\n  --cl-title-tracking: 0.08em;\n  --cl-count-color: #94a3b8;\n  --cl-panel-bg: #1e293b;\n  --cl-panel-border: #334155;\n  --cl-panel-radius: 4px;\n  --cl-animation-duration: 180ms;\n}\n```\n\n## A11y\n\n- Header: `<button>` with `aria-expanded` + `aria-controls`.\n- Content: `role=\"region\"` with `aria-labelledby` pointing back to the header id.\n- Arrow icons: `aria-hidden=\"true\"` (decorative).\n- Space/Enter toggle (native button behavior).\n- `prefers-reduced-motion` disables arrow rotation and height transitions.\n\n## Animation caveat\n\nWhen `animated={true}`, the open→close transition uses `max-height`. If the content height changes while open (e.g., a list grows), the transition on the NEXT close will time against the stale height. Content is rendered normally — this is not a visible-overflow bug, just potentially an animation-timing oddity. Wire up a ResizeObserver yourself to re-measure if your content is dynamic and you care about the close-animation accuracy.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}