@skdx/react 0.26.0

package/README.md

@@ -0,0 +1,133 @@
+# @skdx/react
+
+Headless, accessible, unstyled React components for the SkandaDX design system.
+
+Every component ships **behavior, accessibility, and state — no styles**. Components render plain semantic HTML decorated with `data-*` attributes; you (or a SkandaDX brand package) style them with CSS against those attributes, typically using the `--skdx-*` tokens from [`@skdx/tokens`](../tokens/skdxtokens.md). One component tree, any brand.
+
+```text
+@skdx/react (behavior) + --skdx-* variables (theme) + your CSS (skin) = branded UI
+```
+
+## Installation
+
+```sh
+pnpm add @skdx/react
+# or: npm install @skdx/react
+```
+
+React 18 or 19 is required (`react` and `react-dom` are peer dependencies). The only runtime dependency is `@floating-ui/react-dom`, used for positioning overlays. The package ships ESM and CJS builds with TypeScript declarations and is tree-shakeable (`sideEffects: false`).
+
+## Quick start
+
+```tsx
+import {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from '@skdx/react';
+
+<Dialog>
+  <DialogTrigger>Open settings</DialogTrigger>
+  <DialogPortal>
+    <DialogOverlay className="overlay" />
+    <DialogContent className="panel">
+      <DialogTitle>Settings</DialogTitle>…<DialogClose>Close</DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</Dialog>;
+```
+
+Nothing is styled until you say so:
+
+```css
+.panel {
+  background: var(--skdx-color-semantic-surface);
+  color: var(--skdx-color-semantic-text);
+  border-radius: var(--skdx-radius-lg);
+  box-shadow: var(--skdx-shadow-overlay);
+  padding: var(--skdx-space-6);
+}
+.panel[data-state='open'] {
+  animation: fade-in var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+}
+```
+
+## Design principles
+
+### Compound components
+
+Complex widgets are broken into small parts (`Tabs` + `TabsList` + `TabsTrigger` + `TabsContent`) that communicate through context. You compose exactly the DOM you want and style each part separately.
+
+### `asChild` — render onto your own element
+
+Every DOM-rendering part accepts `asChild`. Instead of rendering its own tag, the component merges its props, behavior, and ref onto your child element:
+
+```tsx
+<DialogTrigger asChild>
+  <MyDesignSystemButton>Open</MyDesignSystemButton>
+</DialogTrigger>
+```
+
+### Data attributes are the styling API
+
+Components expose their state as `data-*` attributes instead of class names — `data-state="open"`, `data-disabled`, `data-loading`, `data-orientation="horizontal"`, and so on. CSS attribute selectors do the rest; no styling props, no theme provider.
+
+### Controlled or uncontrolled — your choice
+
+Stateful components follow the `value` / `defaultValue` / `onValueChange` convention (`open` / `defaultOpen` / `onOpenChange` for overlays). Pass the controlled prop to own the state, or the `default*` prop to let the component manage it.
+
+### Accessible by default
+
+Parts render the correct roles, ARIA attributes, and keyboard interactions: focus trapping and scroll locking in modal overlays, roving tabindex in composite widgets (menus, toolbars, radio groups, trees), typeahead in selects and menus, and dismiss via <kbd>Esc</kbd> or outside-click.
+
+## Components
+
+| Category      | Components                                                                                                                                                             |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Basic         | `Button`, `Label`, `Separator`, `Avatar`, `Badge`, `Kbd`, `Card`, `SplitButton`, `Progress`                                                                            |
+| Feedback      | `Alert`, `Skeleton`, `Spinner`, `Toast` (with `ToastProvider`/`ToastViewport`)                                                                                         |
+| Layout        | `AspectRatio`, `ScrollArea`, `Resizable` (panel group / panel / handle), `Carousel`                                                                                    |
+| Form controls | `Form`, `TextField`, `Textarea`, `NumberField`, `PinInput`, `TagsInput`, `FileUpload`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`, `Rating`, `Toggle`, `ToggleGroup` |
+| Disclosure    | `Collapsible`, `Accordion`, `Tabs`                                                                                                                                     |
+| Navigation    | `Toolbar`, `NavigationMenu`, `Breadcrumb`, `Pagination`, `Menubar`                                                                                                     |
+| Data display  | `Table` (with sorting and selection state), `Tree`, `Timeline`                                                                                                         |
+| Date          | `Calendar` (plus date helpers: `addDays`, `addMonths`, `isSameDay`, `isSameMonth`, `getVisibleWeeks`), `DatePicker`                                                    |
+| Overlays      | `Dialog`, `AlertDialog`, `Popover`, `Tooltip` (with `TooltipProvider`), `HoverCard`, `DropdownMenu`, `ContextMenu`, `Select`, `Combobox`, `Command`                    |
+
+59 components in total. Each lives in `src/<name>/` with its parts, types, tests, and an `index.ts` barrel colocated; every part and its props type are exported from the package root (`TabsTrigger`, `TabsTriggerProps`, …), by way of that folder's `index.ts`.
+
+App-level providers: wrap your app in `ToastProvider` (plus a `ToastViewport`) to use toasts, and `TooltipProvider` to share tooltip delay behavior.
+
+## Core building blocks
+
+The low-level utilities the components are built from are exported too, so brand packages and custom components can follow the same conventions:
+
+| Export                            | What it does                                                                     |
+| --------------------------------- | -------------------------------------------------------------------------------- |
+| `Slot`                            | Merges props/ref onto a child element — the engine behind `asChild`              |
+| `Primitive`                       | `Primitive.div`, `Primitive.button`, … — base parts that all accept `asChild`    |
+| `composeEventHandlers`            | Chains a user handler with an internal one, honoring `preventDefault`            |
+| `Portal`                          | Renders children into `document.body` (or a custom container)                    |
+| `VisuallyHidden`                  | Hides content visually, keeps it for screen readers                              |
+| `composeRefs` / `useComposedRefs` | Merge multiple refs into one                                                     |
+| `useControllableState`            | The controlled/uncontrolled state pattern in hook form                           |
+| `useCallbackRef`                  | Stable function identity for callbacks in effects                                |
+| `createSafeContext`               | Context factory that throws a helpful error when a part is used outside its root |
+
+## Theming
+
+This package never reads theme values at runtime — theming happens entirely in CSS. Generate or apply `--skdx-*` variables with `@skdx/tokens` (`foundationToCss` once, then `applyTheme` / `themeToCss` per theme), then reference them in the stylesheets that target these components' data attributes. Switching `data-skdx-theme` on `<html>` re-brands every component instantly. See the [tokens README](../tokens/skdxtokens.md) for the full variable reference.
+
+## Development
+
+```sh
+pnpm --filter @skdx/react build       # tsup → dist/
+pnpm --filter @skdx/react test        # vitest + testing-library
+pnpm --filter @skdx/react typecheck   # tsc --noEmit
+```
+
+Component demos live in the docs portal (`apps/docs`): `pnpm --filter @skdx/docs dev`.

package/dist/accordion/Accordion.cjs

@@ -0,0 +1 @@
+"use strict";var eo=Object.create;var x=Object.defineProperty;var to=Object.getOwnPropertyDescriptor;var ro=Object.getOwnPropertyNames;var no=Object.getPrototypeOf,io=Object.prototype.hasOwnProperty;var co=(o,t)=>{for(var e in t)x(o,e,{get:t[e],enumerable:!0})},N=(o,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of ro(t))!io.call(o,r)&&r!==e&&x(o,r,{get:()=>t[r],enumerable:!(n=to(t,r))||n.enumerable});return o};var v=(o,t,e)=>(e=o!=null?eo(no(o)):{},N(t||!o||!o.__esModule?x(e,"default",{value:o,enumerable:!0}):e,o)),ao=o=>N(x({},"__esModule",{value:!0}),o);var mo={};co(mo,{Accordion:()=>S,AccordionContent:()=>L,AccordionHeader:()=>k,AccordionItem:()=>T,AccordionProvider:()=>V,AccordionTrigger:()=>E,useAccordionContext:()=>f});module.exports=ao(mo);var p=v(require("react"),1),h=require("../utils/createContext.cjs"),w=require("../utils/part.cjs"),I=require("../utils/primitive.cjs"),M=require("../utils/useControllableState.cjs"),D=require("../utils/useRovingFocus.cjs"),b=require("react/jsx-runtime"),[V,f]=(0,h.createSafeContext)("Accordion"),S=p.forwardRef((o,t)=>{let{type:e,value:n,defaultValue:r,onValueChange:i,disabled:d=!1,orientation:a="vertical",collapsible:c=!1,...u}=o,P=p.useMemo(()=>n===void 0?void 0:Array.isArray(n)?n:[n].filter(Boolean),[n]),[s=[],m]=(0,M.useControllableState)({prop:P,defaultProp:r===void 0?[]:Array.isArray(r)?r:[r],onChange:l=>{i?.(e==="single"?l[0]??"":l)}}),F=p.useCallback(l=>{m((R=[])=>e==="single"?[l]:[...R,l])},[m,e]),U=p.useCallback(l=>{e==="single"&&!c||m((R=[])=>R.filter(oo=>oo!==l))},[m,e,c]),j=(0,D.useRovingFocus)({orientation:a,loop:!0,itemSelector:"[data-skdx-accordion-trigger]"});return(0,b.jsx)(V,{value:s,onItemOpen:F,onItemClose:U,type:e,collapsible:c,disabled:d,orientation:a,children:(0,b.jsx)(I.Primitive.div,{"data-orientation":a,...u,...(0,w.skdxPart)("accordion","root",u.className),ref:t,onKeyDown:(0,I.composeEventHandlers)(u.onKeyDown,j)})})});S.displayName="Accordion";var C=v(require("react"),1),O=require("../utils/createContext.cjs"),K=require("../utils/part.cjs"),B=require("../utils/primitive.cjs");var H=require("react/jsx-runtime"),[so,A]=(0,O.createSafeContext)("AccordionItem"),T=C.forwardRef(({value:o,disabled:t,...e},n)=>{let r=f("AccordionItem"),i=r.value.includes(o),d=r.disabled||t||!1,a=C.useId(),c=C.useId();return(0,H.jsx)(so,{open:i,disabled:d,triggerId:a,contentId:c,value:o,children:(0,H.jsx)(B.Primitive.div,{"data-state":i?"open":"closed","data-disabled":d?"":void 0,"data-orientation":r.orientation,...e,...(0,K.skdxPart)("accordion","item",e.className),ref:n})})});T.displayName="AccordionItem";var q=v(require("react"),1),z=require("../utils/part.cjs"),G=require("../utils/primitive.cjs");var J=require("react/jsx-runtime"),k=q.forwardRef((o,t)=>{let e=A("AccordionHeader");return(0,J.jsx)(G.Primitive.h3,{"data-state":e.open?"open":"closed","data-disabled":e.disabled?"":void 0,...o,...(0,z.skdxPart)("accordion","header",o.className),ref:t})});k.displayName="AccordionHeader";var Q=v(require("react"),1),W=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var X=require("react/jsx-runtime"),E=Q.forwardRef((o,t)=>{let e=f("AccordionTrigger"),n=A("AccordionTrigger"),{open:r,disabled:i,value:d}=n;return(0,X.jsx)(y.Primitive.button,{type:"button",id:n.triggerId,"aria-controls":n.contentId,"aria-expanded":r,"data-skdx-accordion-trigger":"","data-state":r?"open":"closed","data-disabled":i?"":void 0,"data-orientation":e.orientation,disabled:i,...o,...(0,W.skdxPart)("accordion","trigger",o.className),ref:t,onClick:(0,y.composeEventHandlers)(o.onClick,()=>{r?e.onItemClose(d):e.onItemOpen(d)})})});E.displayName="AccordionTrigger";var g=v(require("react"),1),Y=require("../utils/composeRefs.cjs"),Z=require("../utils/part.cjs"),_=require("../utils/primitive.cjs");var $=require("react/jsx-runtime"),L=g.forwardRef(({forceMount:o,hiddenUntilFound:t,...e},n)=>{let r=f("AccordionContent"),i=A("AccordionContent"),d=g.useRef(null),a=(0,Y.useComposedRefs)(n,d),{open:c,value:u}=i,{onItemOpen:P}=r;return g.useLayoutEffect(()=>{let s=d.current;if(!t||!s)return;c?s.removeAttribute("hidden"):s.setAttribute("hidden","until-found");let m=()=>P(u);return s.addEventListener("beforematch",m),()=>s.removeEventListener("beforematch",m)},[t,c,P,u]),!c&&!o&&!t?null:(0,$.jsx)(_.Primitive.div,{role:"region",id:i.contentId,"aria-labelledby":i.triggerId,"data-state":c?"open":"closed","data-disabled":i.disabled?"":void 0,"data-orientation":r.orientation,hidden:!c,...e,...(0,Z.skdxPart)("accordion","content",e.className),ref:a})});L.displayName="AccordionContent";0&&(module.exports={Accordion,AccordionContent,AccordionHeader,AccordionItem,AccordionProvider,AccordionTrigger,useAccordionContext});

package/dist/accordion/Accordion.d.cts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { AccordionContextValue } from './types.cjs';
+export declare const AccordionProvider: {
+    (props: AccordionContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAccordionContext: (consumerName: string) => AccordionContextValue;
+/**
+ * Root of an accordion: owns which item(s) are open and hands state down to
+ * `AccordionItem` / `AccordionHeader` / `AccordionTrigger` / `AccordionContent`
+ * via context. Renders a plain `<div>` with `data-orientation`, and wires up
+ * roving-focus arrow-key navigation between triggers (Home/End jump to the
+ * first/last trigger; wraps at the ends).
+ *
+ * `type="single"` allows only one open item at a time (add `collapsible` to
+ * allow closing it back to none); `type="multiple"` allows any number open.
+ * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible defaultValue="item-1">
+ *   <AccordionItem value="item-1">
+ *     <AccordionHeader>
+ *       <AccordionTrigger>Section one</AccordionTrigger>
+ *     </AccordionHeader>
+ *     <AccordionContent>Content for section one.</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionHeader>
+ *       <AccordionTrigger>Section two</AccordionTrigger>
+ *     </AccordionHeader>
+ *     <AccordionContent>Content for section two.</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: React.ForwardRefExoticComponent<(Omit<import("./types.cjs").AccordionSingleProps, "ref"> | Omit<import("./types.cjs").AccordionMultipleProps, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/dist/accordion/Accordion.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { AccordionContextValue } from './types.js';
+export declare const AccordionProvider: {
+    (props: AccordionContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAccordionContext: (consumerName: string) => AccordionContextValue;
+/**
+ * Root of an accordion: owns which item(s) are open and hands state down to
+ * `AccordionItem` / `AccordionHeader` / `AccordionTrigger` / `AccordionContent`
+ * via context. Renders a plain `<div>` with `data-orientation`, and wires up
+ * roving-focus arrow-key navigation between triggers (Home/End jump to the
+ * first/last trigger; wraps at the ends).
+ *
+ * `type="single"` allows only one open item at a time (add `collapsible` to
+ * allow closing it back to none); `type="multiple"` allows any number open.
+ * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible defaultValue="item-1">
+ *   <AccordionItem value="item-1">
+ *     <AccordionHeader>
+ *       <AccordionTrigger>Section one</AccordionTrigger>
+ *     </AccordionHeader>
+ *     <AccordionContent>Content for section one.</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionHeader>
+ *       <AccordionTrigger>Section two</AccordionTrigger>
+ *     </AccordionHeader>
+ *     <AccordionContent>Content for section two.</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: React.ForwardRefExoticComponent<(Omit<import("./types.js").AccordionSingleProps, "ref"> | Omit<import("./types.js").AccordionMultipleProps, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/dist/accordion/Accordion.js

@@ -0,0 +1 @@
+import*as p from"react";import{createSafeContext as w}from"../utils/createContext.js";import{skdxPart as M}from"../utils/part.js";import{composeEventHandlers as D,Primitive as V}from"../utils/primitive.js";import{useControllableState as S}from"../utils/useControllableState.js";import{useRovingFocus as O}from"../utils/useRovingFocus.js";import{jsx as x}from"react/jsx-runtime";var[K,u]=w("Accordion"),B=p.forwardRef((t,i)=>{let{type:o,value:r,defaultValue:e,onValueChange:n,disabled:d=!1,orientation:a="vertical",collapsible:c=!1,...f}=t,C=p.useMemo(()=>r===void 0?void 0:Array.isArray(r)?r:[r].filter(Boolean),[r]),[s=[],m]=S({prop:C,defaultProp:e===void 0?[]:Array.isArray(e)?e:[e],onChange:l=>{n?.(o==="single"?l[0]??"":l)}}),E=p.useCallback(l=>{m((P=[])=>o==="single"?[l]:[...P,l])},[m,o]),L=p.useCallback(l=>{o==="single"&&!c||m((P=[])=>P.filter(h=>h!==l))},[m,o,c]),N=O({orientation:a,loop:!0,itemSelector:"[data-skdx-accordion-trigger]"});return x(K,{value:s,onItemOpen:E,onItemClose:L,type:o,collapsible:c,disabled:d,orientation:a,children:x(V.div,{"data-orientation":a,...f,...M("accordion","root",f.className),ref:i,onKeyDown:D(f.onKeyDown,N)})})});B.displayName="Accordion";import*as v from"react";import{createSafeContext as q}from"../utils/createContext.js";import{skdxPart as z}from"../utils/part.js";import{Primitive as G}from"../utils/primitive.js";import{jsx as I}from"react/jsx-runtime";var[J,A]=q("AccordionItem"),y=v.forwardRef(({value:t,disabled:i,...o},r)=>{let e=u("AccordionItem"),n=e.value.includes(t),d=e.disabled||i||!1,a=v.useId(),c=v.useId();return I(J,{open:n,disabled:d,triggerId:a,contentId:c,value:t,children:I(G.div,{"data-state":n?"open":"closed","data-disabled":d?"":void 0,"data-orientation":e.orientation,...o,...z("accordion","item",o.className),ref:r})})});y.displayName="AccordionItem";import*as R from"react";import{skdxPart as Q}from"../utils/part.js";import{Primitive as W}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var b=R.forwardRef((t,i)=>{let o=A("AccordionHeader");return X(W.h3,{"data-state":o.open?"open":"closed","data-disabled":o.disabled?"":void 0,...t,...Q("accordion","header",t.className),ref:i})});b.displayName="AccordionHeader";import*as H from"react";import{skdxPart as Y}from"../utils/part.js";import{composeEventHandlers as Z,Primitive as _}from"../utils/primitive.js";import{jsx as $}from"react/jsx-runtime";var T=H.forwardRef((t,i)=>{let o=u("AccordionTrigger"),r=A("AccordionTrigger"),{open:e,disabled:n,value:d}=r;return $(_.button,{type:"button",id:r.triggerId,"aria-controls":r.contentId,"aria-expanded":e,"data-skdx-accordion-trigger":"","data-state":e?"open":"closed","data-disabled":n?"":void 0,"data-orientation":o.orientation,disabled:n,...t,...Y("accordion","trigger",t.className),ref:i,onClick:Z(t.onClick,()=>{e?o.onItemClose(d):o.onItemOpen(d)})})});T.displayName="AccordionTrigger";import*as g from"react";import{useComposedRefs as F}from"../utils/composeRefs.js";import{skdxPart as U}from"../utils/part.js";import{Primitive as j}from"../utils/primitive.js";import{jsx as oo}from"react/jsx-runtime";var k=g.forwardRef(({forceMount:t,hiddenUntilFound:i,...o},r)=>{let e=u("AccordionContent"),n=A("AccordionContent"),d=g.useRef(null),a=F(r,d),{open:c,value:f}=n,{onItemOpen:C}=e;return g.useLayoutEffect(()=>{let s=d.current;if(!i||!s)return;c?s.removeAttribute("hidden"):s.setAttribute("hidden","until-found");let m=()=>C(f);return s.addEventListener("beforematch",m),()=>s.removeEventListener("beforematch",m)},[i,c,C,f]),!c&&!t&&!i?null:oo(j.div,{role:"region",id:n.contentId,"aria-labelledby":n.triggerId,"data-state":c?"open":"closed","data-disabled":n.disabled?"":void 0,"data-orientation":e.orientation,hidden:!c,...o,...U("accordion","content",o.className),ref:a})});k.displayName="AccordionContent";export{B as Accordion,k as AccordionContent,b as AccordionHeader,y as AccordionItem,K as AccordionProvider,T as AccordionTrigger,u as useAccordionContext};

package/dist/accordion/AccordionContent.d.cts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { AccordionContentProps } from './types.cjs';
+/**
+ * Panel for an {@link AccordionItem}. Renders a `<div role="region">` with
+ * the `id` referenced by its trigger's `aria-controls`, `aria-labelledby`
+ * pointing back at the trigger, `data-state`, `data-disabled`,
+ * `data-orientation`, and the `hidden` attribute while closed. Unmounts when
+ * closed unless `forceMount` or `hiddenUntilFound` is set.
+ *
+ * `forceMount` and `hiddenUntilFound` are not two spellings of the same
+ * thing. Both keep the panel mounted, but `forceMount` hides it outright
+ * (`hidden=""` — out of the accessibility tree and out of find-in-page),
+ * while `hiddenUntilFound` renders `hidden="until-found"` so the browser can
+ * still search the closed panel's text and reveal it. `hiddenUntilFound`
+ * implies `forceMount`.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem value="item-1">
+ *   <AccordionHeader>
+ *     <AccordionTrigger>Section one</AccordionTrigger>
+ *   </AccordionHeader>
+ *   <AccordionContent>Content for section one.</AccordionContent>
+ * </AccordionItem>
+ * ```
+ */
+export declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/accordion/AccordionContent.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { AccordionContentProps } from './types.js';
+/**
+ * Panel for an {@link AccordionItem}. Renders a `<div role="region">` with
+ * the `id` referenced by its trigger's `aria-controls`, `aria-labelledby`
+ * pointing back at the trigger, `data-state`, `data-disabled`,
+ * `data-orientation`, and the `hidden` attribute while closed. Unmounts when
+ * closed unless `forceMount` or `hiddenUntilFound` is set.
+ *
+ * `forceMount` and `hiddenUntilFound` are not two spellings of the same
+ * thing. Both keep the panel mounted, but `forceMount` hides it outright
+ * (`hidden=""` — out of the accessibility tree and out of find-in-page),
+ * while `hiddenUntilFound` renders `hidden="until-found"` so the browser can
+ * still search the closed panel's text and reveal it. `hiddenUntilFound`
+ * implies `forceMount`.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem value="item-1">
+ *   <AccordionHeader>
+ *     <AccordionTrigger>Section one</AccordionTrigger>
+ *   </AccordionHeader>
+ *   <AccordionContent>Content for section one.</AccordionContent>
+ * </AccordionItem>
+ * ```
+ */
+export declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/accordion/AccordionHeader.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { AccordionHeaderProps } from './types.cjs';
+/**
+ * Heading wrapper for an {@link AccordionTrigger}, giving the section an
+ * `<h3>` in the accessibility tree. Renders a plain `<h3>` with `data-state`
+ * and `data-disabled` mirroring its {@link AccordionItem}.
+ *
+ * @example
+ * ```tsx
+ * <AccordionHeader>
+ *   <AccordionTrigger>Section one</AccordionTrigger>
+ * </AccordionHeader>
+ * ```
+ */
+export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/accordion/AccordionHeader.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { AccordionHeaderProps } from './types.js';
+/**
+ * Heading wrapper for an {@link AccordionTrigger}, giving the section an
+ * `<h3>` in the accessibility tree. Renders a plain `<h3>` with `data-state`
+ * and `data-disabled` mirroring its {@link AccordionItem}.
+ *
+ * @example
+ * ```tsx
+ * <AccordionHeader>
+ *   <AccordionTrigger>Section one</AccordionTrigger>
+ * </AccordionHeader>
+ * ```
+ */
+export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/accordion/AccordionItem.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { AccordionItemContextValue, AccordionItemProps } from './types.cjs';
+export declare const AccordionItemProvider: {
+    (props: AccordionItemContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAccordionItemContext: (consumerName: string) => AccordionItemContextValue;
+/**
+ * A single expandable section within an {@link Accordion}. Renders a plain
+ * `<div>` with `data-state` (`"open"` | `"closed"`), `data-disabled` and
+ * `data-orientation`, and provides the item's `open`/`disabled` state and
+ * generated `id`s to its `AccordionHeader` / `AccordionTrigger` / `AccordionContent`.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem value="item-1">
+ *   <AccordionHeader>
+ *     <AccordionTrigger>Section one</AccordionTrigger>
+ *   </AccordionHeader>
+ *   <AccordionContent>Content for section one.</AccordionContent>
+ * </AccordionItem>
+ * ```
+ */
+export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/accordion/AccordionItem.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { AccordionItemContextValue, AccordionItemProps } from './types.js';
+export declare const AccordionItemProvider: {
+    (props: AccordionItemContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAccordionItemContext: (consumerName: string) => AccordionItemContextValue;
+/**
+ * A single expandable section within an {@link Accordion}. Renders a plain
+ * `<div>` with `data-state` (`"open"` | `"closed"`), `data-disabled` and
+ * `data-orientation`, and provides the item's `open`/`disabled` state and
+ * generated `id`s to its `AccordionHeader` / `AccordionTrigger` / `AccordionContent`.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem value="item-1">
+ *   <AccordionHeader>
+ *     <AccordionTrigger>Section one</AccordionTrigger>
+ *   </AccordionHeader>
+ *   <AccordionContent>Content for section one.</AccordionContent>
+ * </AccordionItem>
+ * ```
+ */
+export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/accordion/AccordionTrigger.d.cts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { AccordionTriggerProps } from './types.cjs';
+/**
+ * Toggle button for an {@link AccordionItem}. Renders a `<button type="button">`
+ * with `aria-controls` pointing at the item's content, `aria-expanded`,
+ * `data-state`, `data-disabled` and `data-orientation`. Part of the roving
+ * tab stop the {@link Accordion} root manages — Arrow Up/Down (or Left/Right
+ * when `orientation="horizontal"`) moves focus between sibling triggers, and
+ * Home/End jump to the first/last one. Clicking (or Enter/Space) opens or
+ * closes the item.
+ *
+ * @example
+ * ```tsx
+ * <AccordionHeader>
+ *   <AccordionTrigger>Section one</AccordionTrigger>
+ * </AccordionHeader>
+ * ```
+ */
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/accordion/AccordionTrigger.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { AccordionTriggerProps } from './types.js';
+/**
+ * Toggle button for an {@link AccordionItem}. Renders a `<button type="button">`
+ * with `aria-controls` pointing at the item's content, `aria-expanded`,
+ * `data-state`, `data-disabled` and `data-orientation`. Part of the roving
+ * tab stop the {@link Accordion} root manages — Arrow Up/Down (or Left/Right
+ * when `orientation="horizontal"`) moves focus between sibling triggers, and
+ * Home/End jump to the first/last one. Clicking (or Enter/Space) opens or
+ * closes the item.
+ *
+ * @example
+ * ```tsx
+ * <AccordionHeader>
+ *   <AccordionTrigger>Section one</AccordionTrigger>
+ * </AccordionHeader>
+ * ```
+ */
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/accordion/index.d.cts

@@ -0,0 +1,6 @@
+export * from './Accordion.cjs';
+export { AccordionItem } from './AccordionItem.cjs';
+export { AccordionHeader } from './AccordionHeader.cjs';
+export { AccordionTrigger } from './AccordionTrigger.cjs';
+export { AccordionContent } from './AccordionContent.cjs';
+export type { AccordionProps, AccordionSingleProps, AccordionMultipleProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionContentProps, } from './types.cjs';

package/dist/accordion/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Accordion.js';
+export { AccordionItem } from './AccordionItem.js';
+export { AccordionHeader } from './AccordionHeader.js';
+export { AccordionTrigger } from './AccordionTrigger.js';
+export { AccordionContent } from './AccordionContent.js';
+export type { AccordionProps, AccordionSingleProps, AccordionMultipleProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionContentProps, } from './types.js';

package/dist/accordion/types.d.cts

@@ -0,0 +1,131 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Shared state distributed from {@link Accordion} to its items via context. Not part of the public API. */
+export interface AccordionContextValue {
+    value: string[];
+    onItemOpen: (value: string) => void;
+    onItemClose: (value: string) => void;
+    type: 'single' | 'multiple';
+    collapsible: boolean;
+    disabled: boolean;
+    orientation: 'horizontal' | 'vertical';
+}
+interface AccordionBaseProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Prevents every item's trigger from opening/closing when set.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Layout axis, exposed as `data-orientation` and used to pick Arrow Left/Right
+     * vs Arrow Up/Down for keyboard navigation between triggers.
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+/** Props for the {@link Accordion} root when `type="single"` — only one item can be open at a time. */
+export interface AccordionSingleProps extends AccordionBaseProps {
+    /** Restricts the accordion to a single open item. */
+    type: 'single';
+    /**
+     * Value of the currently open item, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own open item internally.
+     */
+    value?: string;
+    /**
+     * Value of the initially open item, for uncontrolled usage.
+     * @default undefined — starts with every item closed.
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new open item's value whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Allow closing the open item so all items can be closed.
+     * @default false
+     */
+    collapsible?: boolean;
+}
+/** Props for the {@link Accordion} root when `type="multiple"` — any number of items can be open at once. */
+export interface AccordionMultipleProps extends AccordionBaseProps {
+    /** Allows multiple items to be open simultaneously. */
+    type: 'multiple';
+    /**
+     * Values of the currently open items, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own open items internally.
+     */
+    value?: string[];
+    /**
+     * Values of the initially open items, for uncontrolled usage.
+     * @default undefined — starts with every item closed.
+     */
+    defaultValue?: string[];
+    /**
+     * Fires with the new set of open item values whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string[]) => void;
+}
+/** Props for the {@link Accordion} root — a discriminated union on `type` picking single- or multiple-item expansion. */
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+/** @internal Normalized union of {@link AccordionSingleProps} and {@link AccordionMultipleProps} used inside the `Accordion` implementation. Not part of the public API. */
+export type AccordionImplProps = AccordionBaseProps & {
+    type: 'single' | 'multiple';
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string & string[]) => void;
+    collapsible?: boolean;
+};
+/** @internal Shared state distributed from {@link AccordionItem} to its header/trigger/content via context. Not part of the public API. */
+export interface AccordionItemContextValue {
+    open: boolean;
+    disabled: boolean;
+    triggerId: string;
+    contentId: string;
+    value: string;
+}
+/** Props for {@link AccordionItem}, a single expandable section within an {@link Accordion}. */
+export interface AccordionItemProps extends PrimitivePropsWithRef<'div'> {
+    /** Unique identifier matched against the accordion root's open value(s). */
+    value: string;
+    /**
+     * Prevents this item's trigger from opening/closing, independent of the
+     * accordion root's `disabled`.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for {@link AccordionHeader}, the heading wrapper around an {@link AccordionTrigger}. */
+export interface AccordionHeaderProps extends PrimitivePropsWithRef<'h3'> {
+}
+/** Props for {@link AccordionTrigger}, the button that opens/closes its {@link AccordionItem}. */
+export interface AccordionTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link AccordionContent}, the panel revealed when its {@link AccordionItem} is open. */
+export interface AccordionContentProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Keep this panel mounted (hidden via the `hidden` attribute) even while
+     * closed, instead of unmounting it. Useful for animation libraries that
+     * need the outgoing panel present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * Keep this panel mounted while closed as `hidden="until-found"` instead of
+     * `hidden=""`, so browser find-in-page (and same-page fragment navigation)
+     * can search the closed panel's text and expand the item to reveal a match.
+     * Implies `forceMount`.
+     *
+     * Support caveat: `hidden="until-found"` and its `beforematch` event are
+     * Chromium-first and still uneven across browsers. Where unsupported the
+     * attribute degrades to a plain `hidden`, so the panel stays correctly
+     * hidden — you lose find-in-page, not correctness. It also applies
+     * `content-visibility: hidden` rather than `display: none`, so a brand
+     * layer must not additionally set `display: none` on closed panels or the
+     * text becomes unsearchable again.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+}
+export {};