{"_id":"@accretion-ui/react","_rev":"4-149cc788438fe59f4fdcc5d82be402a1","name":"@accretion-ui/react","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.0":{"name":"@accretion-ui/react","version":"0.2.0","_id":"@accretion-ui/react@0.2.0","maintainers":[{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"}],"dist":{"shasum":"25c33c7737546ae116fd8552bd67a086764fe17c","tarball":"https://registry.npmjs.org/@accretion-ui/react/-/react-0.2.0.tgz","fileCount":8,"integrity":"sha512-yBWwshEpdmJi66a7lCIe/qPMTYUZrzybj67WJknMUBuattCULfCtOqawh8/Ba47JbGTx82OBMeZ+r19HTfs/Ig==","signatures":[{"sig":"MEUCIHjkv4Zi9s29J1EFanej/yF2ZOgIAkCrfSo+uCrUAL8+AiEA++oLqMmJBj154bk0N6MF6JMq3/uf4ZGNkjn8OOVjXVU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32121},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"e09583475480a694ea2886986c7761328fd44369","scripts":{"build":"tsup src/index.ts --format esm,cjs --dts --external react --external react-dom --clean --minify && cp src/styles.css dist/styles.css && cp README.md dist/README.md"},"_npmUser":{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"},"_npmVersion":"11.10.1","description":"Native React Accordion components generated from the shared Accretion UI source.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"25.7.0","_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.0_1773130491023_0.2682149691082638","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@accretion-ui/react","version":"0.2.1","_id":"@accretion-ui/react@0.2.1","maintainers":[{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"}],"dist":{"shasum":"0340d00f51b8201abe62f56a7ee6332f5fb2d7e4","tarball":"https://registry.npmjs.org/@accretion-ui/react/-/react-0.2.1.tgz","fileCount":8,"integrity":"sha512-UywUaQzD79C28YpaPq4N+hOV5NVzgfnuz0rvig0bwtz/2SquJkdBE5AOR7G4snuvR8YjOGWCT1ArjVg0wXBC4A==","signatures":[{"sig":"MEUCIQDwLHrLOd+mJggXamWKwjb3ET4kuQVqhkS8URVHAynfrwIgPVVatxwh/qzWJQFFtltg+zXcbCkHmQrXDleYDubEkug=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32121},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"e09583475480a694ea2886986c7761328fd44369","scripts":{"build":"tsup src/index.ts --format esm,cjs --dts --external react --external react-dom --clean --minify && cp src/styles.css dist/styles.css && cp README.md dist/README.md"},"_npmUser":{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"},"_npmVersion":"11.10.1","description":"Native React Accordion components generated from the shared Accretion UI source.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"25.7.0","_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.1_1773193252049_0.9182991718542823","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@accretion-ui/react","version":"0.2.2","_id":"@accretion-ui/react@0.2.2","maintainers":[{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"}],"dist":{"shasum":"da8b9bed98d68358e14a7ea61c1e0dd1420c6943","tarball":"https://registry.npmjs.org/@accretion-ui/react/-/react-0.2.2.tgz","fileCount":8,"integrity":"sha512-b1+pIQcZSMSf8QJ6CTQV9PxlnbXDId+QbgsZcx8Kv4KJX/MzKwh2kYayB8S1JTf2EsSwggARnLjnIw3jOqzBKA==","signatures":[{"sig":"MEYCIQCPj/5oPsGjERH10+HfwSHRjes1HYC4WEeIZfrYLTBwvAIhALFpfGiBgiuoEyY886bJvGMoJiMc1WAcnCuM9qsi1Xzn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35010},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"cc5b1afdd385675e129ca2b164a580717975657b","scripts":{"build":"tsup src/index.ts --format esm,cjs --dts --external react --external react-dom --clean --minify && cp src/styles.css dist/styles.css && cp README.md dist/README.md"},"_npmUser":{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"},"_npmVersion":"11.10.1","description":"Native React Accordion components generated from the shared Accretion UI source.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"25.7.0","_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.2_1773219808624_0.7315990179598006","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"@accretion-ui/react","version":"0.2.3","description":"Native React Accordion components generated from the shared Accretion UI source.","type":"module","sideEffects":["./dist/styles.css"],"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsup src/index.ts --format esm,cjs --dts --external react --external react-dom --clean --minify && cp src/styles.css dist/styles.css && cp README.md dist/README.md"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"gitHead":"cc5b1afdd385675e129ca2b164a580717975657b","_id":"@accretion-ui/react@0.2.3","_nodeVersion":"25.7.0","_npmVersion":"11.10.1","dist":{"integrity":"sha512-QIbM2jXiNeU3U558HWW1/oy2fXbnZZdulbJOWCIuurc6g3FPdwwMdUo9/fIE3CYUH25LH/X52Ogoedfi5qTvrQ==","shasum":"0ba554515ea2282e08e2ce77f5de2ace1ae2c6de","tarball":"https://registry.npmjs.org/@accretion-ui/react/-/react-0.2.3.tgz","fileCount":8,"unpackedSize":35010,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDzL92ye/MHFiWYVEQV/NHZMaY7w/UjGK5+ZfC9quc/QgIgUqBw7JJhrK0XwD1rY8IuLS5qPVoEFmRxGObAZp0mY7I="}]},"_npmUser":{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"},"directories":{},"maintainers":[{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.2.3_1773238185856_0.1869240696261283"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-10T08:14:50.969Z","modified":"2026-03-11T14:09:46.176Z","0.2.0":"2026-03-10T08:14:51.194Z","0.2.1":"2026-03-11T01:40:52.184Z","0.2.2":"2026-03-11T09:03:28.827Z","0.2.3":"2026-03-11T14:09:46.021Z"},"description":"Native React Accordion components generated from the shared Accretion UI source.","maintainers":[{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"}],"readme":"# `@accretion-ui/react`\n\nNative React Accordion primitives from the Accretion UI shared source layer.\n\n## Install\n\n```bash\nnpm install @accretion-ui/react react react-dom\n```\n\n## Use\n\nImport the shared stylesheet once near the app root:\n\n```tsx\nimport '@accretion-ui/react/styles.css';\n```\n\nUse the compound API:\n\n```tsx\nimport {\n  Accordion,\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n  type AccordionValueOutput,\n} from '@accretion-ui/react';\n\nexport function Example() {\n  const handleValueChange = (value: AccordionValueOutput) => {\n    console.log(value);\n  };\n\n  return (\n    <Accordion\n      defaultValue=\"delivery\"\n      id=\"faq-accordion\"\n      onValueChange={handleValueChange}\n    >\n      <AccordionItem value=\"delivery\">\n        <AccordionHeader>\n          <AccordionTrigger showIndicator={false}>\n            <span>Delivery timeline</span>\n            <span aria-hidden=\"true\">Custom</span>\n          </AccordionTrigger>\n        </AccordionHeader>\n        <AccordionPanel>\n          Server-rendered React markup is present before hydration and remains stable after interaction.\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n```\n\nClosed panel content is not mounted by default. Set `keepMounted` on `AccordionPanel` when a hidden panel must stay in the DOM.\nShared types such as `AccordionValueInput`, `AccordionValueOutput`, `AccordionOrientation`, and `AccordionSize` are exported from the package entry point.\nSet `showIndicator={false}` on `AccordionTrigger` when you want to replace the default chevron with fully custom trigger content.\n\n## Styling Requirements\n\nThe package expects `@accretion-ui/react/styles.css` to be loaded before rendering the Accordion. The stylesheet exposes CSS variables such as:\n\n- `--ac-accordion-root-border-color`\n- `--ac-accordion-root-border-color-open`\n- `--ac-accordion-trigger-background-open`\n- `--ac-accordion-trigger-min-height`\n- `--ac-accordion-panel-padding-inline`\n- `--ac-accordion-panel-padding-block-start`\n- `--ac-accordion-focus-ring-color`\n- `--ac-accordion-focus-ring-offset`\n\n## SSR Expectations\n\nThe package is designed for client-first usage with SSR validation included in this repo through the Next.js smoke app.\n\n- Deterministic item ids render on the server when you provide a stable Accordion `id`.\n- Closed panel containers stay in the DOM for stable `aria-controls` relationships, while panel content is unmounted by default unless `keepMounted` or `hiddenUntilFound` is enabled.\n- `hiddenUntilFound` is corrected after hydration because React DOM serializes the initial `hidden` attribute as a boolean during SSR.\n\n## Storybook\n\nRun the local React Storybook from the repo root:\n\n```bash\nnpm run storybook:react\n```\n\nPublished Chromatic Storybook:\n\n- [https://69ae3d6f019c2b8f497fdd28-zwrtooohxn.chromatic.com/](https://69ae3d6f019c2b8f497fdd28-zwrtooohxn.chromatic.com/)\n\nWhen Chromatic is republished, update this Storybook link and the root README link in the repo.\n\n## Testing And Development Notes\n\n- Unit and integration coverage lives in the repo root under `testing/`.\n- SSR smoke validation uses `smoke-apps/react-next`.\n- Browser smoke checks run with `npm run smoke:react`.\n","readmeFilename":"README.md"}