@pinfold/react 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,59 @@
-# Temporary Holding Version
+# @pinfold/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Hooks-first, config-driven, accessible React components. One subpath per component, so
+an unused component adds nothing to your bundle. React 18+, TypeScript or JavaScript.
+
+```bash
+npm install @pinfold/react @pinfold/css
+```
+
+```js
+// app entry, once
+import '@pinfold/css/core.css';
+import '@pinfold/css/accordion.css';
+```
+
+```jsx
+import { useAccordion } from '@pinfold/react/accordion';
+
+function Support() {
+  const Faq = useAccordion({
+    items: [
+      { title: 'Shipping', content: 'Ships in 2 days.' },
+      { title: 'Returns', content: '30 days, no questions.', badge: 'New' },
+    ],
+  });
+  return <Faq />;
+}
+```
+
+The value `useAccordion` returns is the component, its controller (`Faq.toggle(id)`,
+`Faq.openAll()`) and its parts (`<Faq.Trigger id>`, `<Faq.Panel id>`).
+
+In a Server Component, use the non-hook twin from the same import path:
+
+```jsx
+import { defineAccordion } from '@pinfold/react/accordion';
+
+export default async function Page() {
+  const Faq = defineAccordion({ items: await getFaq(), fields: { id: 'slug', title: 'question', content: 'answer' } });
+  return <Faq />;
+}
+```
+
+Global defaults: `defineConfig({ theme, radius, stylePack, defaults: { accordion: {...} } })`,
+passed once to `<PinfoldProvider config={config}>`.
+
+| Import | What |
+| --- | --- |
+| `@pinfold/react` | `PinfoldProvider`, `defineConfig`, `usePinfold`, and helpers for building your own components |
+| `@pinfold/react/accordion` | `useAccordion`, `defineAccordion`, `Accordion` and the types |
+| `@pinfold/react/accordion/lazy` | a code-split `Accordion` |
+
+Also in the package, generated from the components' metadata: `llms.txt` and `llms-full.txt`
+(model-readable docs), `schema/<name>.json` (JSON Schema of each config) and `registry/` (the
+shadcn registry).
+
+Full spec: [docs/components/accordion.md](../../docs/components/accordion.md).
+
+MIT © Indranil Bhattacharya

package/accordion/lazy/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "main": "../../dist/accordion/lazy.cjs",
+  "module": "../../dist/accordion/lazy.js",
+  "types": "../../dist/accordion/lazy.d.cts"
+}

package/accordion/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "main": "../dist/accordion/index.cjs",
+  "module": "../dist/accordion/index.js",
+  "types": "../dist/accordion/index.d.cts"
+}

package/dist/accordion/client.cjs

@@ -0,0 +1,491 @@
+"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }'use client';
+
+
+
+
+var _chunkDQWSDHRYcjs = require('../chunk-DQWSDHRY.cjs');
+
+
+
+
+
+var _chunkVPKVOJHAcjs = require('../chunk-VPKVOJHA.cjs');
+
+// src/accordion/useAccordion.tsx
+var _react = require('react'); var React2 = _interopRequireWildcard(_react); var React = _interopRequireWildcard(_react);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _core = require('@pinfold/core');
+
+// src/accordion/AccordionView.tsx
+
+
+var B = "pinfold-accordion";
+var RADIUS_SCALE = { none: 0, sm: 0.6, md: 1, lg: 1.5, full: 2.4 };
+var GAP = { none: "0px", sm: "var(--pinfold-space-2)", md: "var(--pinfold-space-3)", lg: "var(--pinfold-space-5)" };
+var own = (map, key) => typeof key === "string" && Object.prototype.hasOwnProperty.call(map, key);
+var radiusValue = (r) => own(RADIUS_SCALE, r) ? `calc(var(--pinfold-acc-radius-unit) * ${RADIUS_SCALE[r]})` : r;
+var gapValue = (g) => own(GAP, g) ? GAP[g] : g;
+var GLYPHS = {
+  chevron: /* @__PURE__ */ React.createElement("path", { d: "M4 6.5 8 10.5 12 6.5" }),
+  caret: /* @__PURE__ */ React.createElement("path", { d: "M6 4l5 4-5 4z", fill: "currentColor", stroke: "none" }),
+  arrow: /* @__PURE__ */ React.createElement("path", { d: "M8 3.5v9M4.5 9 8 12.5 11.5 9" }),
+  plus: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("path", { d: "M8 3.5v9", className: `${B}__indicator-bar` }), /* @__PURE__ */ React.createElement("path", { d: "M3.5 8h9" }))
+};
+function overflowProps(policy, fallback) {
+  const p = policy != null ? policy : fallback;
+  if (typeof p === "object") return { "data-overflow": "clamp", style: { "--pinfold-lines": String(p.lines) } };
+  return { "data-overflow": p };
+}
+function slot(ctx, name, base, item) {
+  var _a, _b, _c, _d;
+  const merged = _chunkDQWSDHRYcjs.slotProps.call(void 0, ctx.config, name, base);
+  const perItem = item == null ? void 0 : item.config;
+  if (!((_a = perItem == null ? void 0 : perItem.classNames) == null ? void 0 : _a[name]) && !((_b = perItem == null ? void 0 : perItem.styles) == null ? void 0 : _b[name])) return merged;
+  return _core.mergeProps.call(void 0, merged, {
+    className: (_c = perItem.classNames) == null ? void 0 : _c[name],
+    style: (_d = perItem.styles) == null ? void 0 : _d[name]
+  });
+}
+function renderRoot(ctx, rootProps) {
+  var _a, _b;
+  const { api, config, a } = ctx;
+  const dimensions = {
+    radius: radiusValue(config.radius),
+    itemRadius: radiusValue(config.itemRadius),
+    gap: gapValue(config.gap),
+    ...config.dimensions
+  };
+  const props = api.getRootProps(
+    _core.mergeProps.call(void 0, 
+      slot(ctx, "root", {
+        className: a.unstyled ? config.className : _core.cn.call(void 0, "pinfold", B, config.className),
+        style: { ..._core.dimensionVars.call(void 0, "accordion", dimensions), ...config.style },
+        "data-variant": a.variant,
+        "data-size": a.size,
+        "data-tone": a.tone,
+        "data-indicator-position": a.indicatorPosition,
+        "data-static-indicator": a.animateIndicator ? void 0 : "",
+        "data-dividers": a.dividers ? "" : void 0,
+        // Separated or filled rows with no gap join into one group (cards and ghost always touch).
+        "data-joined": (a.variant === "separated" || a.variant === "filled") && _core.accordionRowsJoined.call(void 0, a.variant, dimensions.gap) ? "" : void 0,
+        "data-animate": a.animate ? "" : void 0,
+        "data-unstyled": a.unstyled ? "" : void 0,
+        "data-scroll": ((_a = config.dimensions) == null ? void 0 : _a.panelMaxHeight) != null ? "" : void 0,
+        "data-clamp": ((_b = config.dimensions) == null ? void 0 : _b.maxHeight) != null ? "" : void 0,
+        "data-until-found": a.hiddenUntilFound ? "" : void 0
+      }),
+      rootProps
+    )
+  );
+  return /* @__PURE__ */ React.createElement("div", { ...props }, api.items.map((item) => renderItem(ctx, item)));
+}
+function renderItem(ctx, item, extra) {
+  const { api, config } = ctx;
+  const props = api.getItemProps(
+    item,
+    _core.mergeProps.call(void 0, slot(ctx, "item", { className: cls(ctx, `${B}__item`) }, item), extra != null ? extra : {})
+  );
+  const header = renderHeader(ctx, item);
+  const panel = renderPanel(ctx, item);
+  if (config.renderItem) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: item.id }, config.renderItem({ state: item, props, header, panel }));
+  }
+  return /* @__PURE__ */ React.createElement("div", { key: item.id, ...props }, header, panel);
+}
+function renderHeader(ctx, item, extra, children) {
+  const { api, a } = ctx;
+  const headerProps = api.getHeaderProps(
+    item,
+    slot(ctx, "header", { className: cls(ctx, `${B}__header`) }, item)
+  );
+  const triggerProps = api.getTriggerProps(
+    item,
+    _core.mergeProps.call(void 0, slot(ctx, "trigger", { className: cls(ctx, `${B}__trigger`) }, item), extra != null ? extra : {})
+  );
+  delete headerProps.role;
+  delete headerProps["aria-level"];
+  const Heading = "h" + a.headingLevel;
+  return /* @__PURE__ */ React.createElement(Heading, { ...headerProps }, _chunkDQWSDHRYcjs.renderSlot.call(void 0, 
+    ctx.config,
+    "trigger",
+    triggerProps,
+    item,
+    children != null ? children : /* @__PURE__ */ React.createElement(TriggerContent, { ctx, item }),
+    (props, kids) => /* @__PURE__ */ React.createElement("button", { ...props }, kids)
+  ));
+}
+function TriggerContent({ ctx, item }) {
+  var _a, _b, _c, _d;
+  const { title, description, badge } = item.config;
+  const iconNode = _core.resolveNode.call(void 0, (_a = item.config.icon) != null ? _a : ctx.config.icon, item);
+  const endIconNode = _core.resolveNode.call(void 0, (_b = item.config.endIcon) != null ? _b : ctx.config.endIcon, item);
+  const descriptionNode = _core.resolveNode.call(void 0, description, item);
+  const badgeNode = _core.resolveNode.call(void 0, badge, item);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, iconNode ? /* @__PURE__ */ React.createElement("span", { ...slot(ctx, "icon", { className: cls(ctx, `${B}__icon`), "aria-hidden": "true" }, item) }, iconNode) : null, /* @__PURE__ */ React.createElement("span", { ...slot(ctx, "label", { className: cls(ctx, `${B}__label`) }, item) }, /* @__PURE__ */ React.createElement("span", { ...slot(ctx, "title", { className: cls(ctx, `${B}__title`), ...overflowProps((_c = ctx.config.overflow) == null ? void 0 : _c.title, "wrap") }, item) }, _core.resolveNode.call(void 0, title, item)), descriptionNode ? /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ...slot(
+        ctx,
+        "description",
+        { className: cls(ctx, `${B}__description`), ...overflowProps((_d = ctx.config.overflow) == null ? void 0 : _d.description, { lines: 2 }) },
+        item
+      )
+    },
+    descriptionNode
+  ) : null), badgeNode ? /* @__PURE__ */ React.createElement("span", { ...slot(ctx, "badge", { className: cls(ctx, `${B}__badge`) }, item) }, badgeNode) : null, endIconNode ? /* @__PURE__ */ React.createElement("span", { ...slot(ctx, "endIcon", { className: cls(ctx, `${B}__end-icon`), "aria-hidden": "true" }, item) }, endIconNode) : null, renderIndicator(ctx, item));
+}
+function renderIndicator(ctx, item, extra) {
+  var _a;
+  const chosen = (_a = item.config.indicator) != null ? _a : ctx.a.indicator;
+  return _chunkDQWSDHRYcjs.renderSlot.call(void 0, 
+    ctx.config,
+    "indicator",
+    _core.mergeProps.call(void 0, 
+      slot(ctx, "indicator", { className: cls(ctx, `${B}__indicator`), "aria-hidden": "true" }, item),
+      extra != null ? extra : {}
+    ),
+    item,
+    null,
+    (props) => /* @__PURE__ */ React.createElement(Indicator, { ...props, indicator: chosen, state: item })
+  );
+}
+function Indicator({
+  indicator,
+  state,
+  ...props
+}) {
+  var _a;
+  if (indicator === "none") return null;
+  if (typeof indicator !== "string") {
+    const node = _core.resolveNode.call(void 0, indicator, state);
+    return node ? /* @__PURE__ */ React.createElement("span", { ...props }, node) : null;
+  }
+  const glyph = (_a = GLYPHS[indicator != null ? indicator : "chevron"]) != null ? _a : GLYPHS.chevron;
+  return /* @__PURE__ */ React.createElement("span", { ...props }, /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", fill: "none", focusable: "false" }, /* @__PURE__ */ React.createElement("g", { stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }, glyph)));
+}
+function renderPanel(ctx, item, extra, children) {
+  const { api, a, config } = ctx;
+  const panelProps = api.getPanelProps(
+    item,
+    _core.mergeProps.call(void 0, slot(ctx, "panel", { className: cls(ctx, `${B}__panel`) }, item), extra != null ? extra : {})
+  );
+  const body = children != null ? children : _core.shouldMountPanel.call(void 0, a.mountPanels, item.open, ctx.everOpened.has(item.id)) ? _core.resolveNode.call(void 0, item.config.content, item) : null;
+  return _chunkDQWSDHRYcjs.renderSlot.call(void 0, 
+    config,
+    "panel",
+    panelProps,
+    item,
+    /* @__PURE__ */ React.createElement("div", { ...slot(ctx, "content", { className: cls(ctx, `${B}__content`) }, item) }, body),
+    (props, kids) => /* @__PURE__ */ React.createElement("div", { ...props }, /* @__PURE__ */ React.createElement("div", { className: cls(ctx, `${B}__panel-inner`), ref: ctx.findable(item) }, kids))
+  );
+}
+var cls = (ctx, name) => ctx.a.unstyled ? void 0 : name;
+
+// src/accordion/useAccordion.tsx
+function useAccordion(input) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const ctx = _chunkVPKVOJHAcjs.usePinfold.call(void 0, );
+  const config = ctx.defaults.accordion ? { ...ctx.defaults.accordion, ...defined(input) } : input;
+  const {
+    mode = "single",
+    collapsible = true,
+    disabled: allDisabled = false,
+    value: controlled,
+    defaultValue,
+    onValueChange,
+    onBeforeChange,
+    onItemToggle,
+    orientation = "vertical",
+    dir = ctx.dir,
+    loop = true,
+    syncWithHash = false,
+    id: idProp
+  } = config;
+  if (process.env.NODE_ENV !== "production") {
+    void Promise.resolve().then(() => _interopRequireWildcard(require("../validate-EQHBH4NH.cjs"))).then((m) => m.validateAccordion(input, config));
+  }
+  const appearance = {
+    variant: (_a = config.variant) != null ? _a : "solid",
+    size: (_b = config.size) != null ? _b : ctx.size,
+    tone: (_c = config.tone) != null ? _c : ctx.tone,
+    indicator: (_d = config.indicator) != null ? _d : "chevron",
+    indicatorPosition: (_e = config.indicatorPosition) != null ? _e : "end",
+    animateIndicator: (_f = config.animateIndicator) != null ? _f : true,
+    headingLevel: (_g = config.headingLevel) != null ? _g : 3,
+    animate: (_h = config.animate) != null ? _h : !ctx.disableAnimation,
+    dividers: (_i = config.dividers) != null ? _i : true,
+    mountPanels: (_j = config.mountPanels) != null ? _j : config.unmountClosed ? "open" : "always",
+    hiddenUntilFound: (_k = config.hiddenUntilFound) != null ? _k : true,
+    unstyled: (_l = config.unstyled) != null ? _l : false
+  };
+  const headingLevel = appearance.headingLevel;
+  const baseId = _chunkVPKVOJHAcjs.useId.call(void 0, idProp);
+  const triggerRefs = React2.useRef([]);
+  const itemConfigs = React2.useMemo(
+    () => _core.mapAccordionFields.call(void 0, Array.isArray(config.items) ? config.items : [], config.fields),
+    // `fields` is plain data: key it by content so an inline object does not remap every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [config.items, JSON.stringify(config.fields)]
+  );
+  const items = React2.useMemo(
+    () => itemConfigs.map((item, index) => {
+      var _a2, _b2;
+      const id = _core.accordionRowId.call(void 0, item, index);
+      const disabled = allDisabled || !!item.disabled || ((_b2 = (_a2 = config.disabledIds) == null ? void 0 : _a2.indexOf(id)) != null ? _b2 : -1) !== -1;
+      return { id, index, disabled, config: item, ..._core.accordionPartIds.call(void 0, baseId, id) };
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemConfigs, baseId, allDisabled, JSON.stringify(config.disabledIds)]
+  );
+  const [value, setValue] = _chunkVPKVOJHAcjs.useControllableState.call(void 0, {
+    value: controlled,
+    defaultValue: () => _core.initialAccordionValue.call(void 0, itemConfigs, defaultValue, mode)
+  });
+  const everOpened = React2.useRef(/* @__PURE__ */ new Set());
+  value.forEach((id) => everOpened.current.add(id));
+  const isOpen = React2.useCallback((id) => value.indexOf(id) !== -1, [value]);
+  const rules = { mode, collapsible, disabled: allDisabled };
+  const commit = _chunkVPKVOJHAcjs.useEvent.call(void 0, (next, details) => {
+    if (!next) return false;
+    if ((onBeforeChange == null ? void 0 : onBeforeChange(details)) === false) return false;
+    setValue(next);
+    onValueChange == null ? void 0 : onValueChange(next, details);
+    if (details.id != null) onItemToggle == null ? void 0 : onItemToggle(details.id, details.open);
+    if (syncWithHash && details.id != null && (details.reason === "click" || details.reason === "keyboard")) {
+      writeHash(details.open ? details.id : null);
+    }
+    return true;
+  });
+  const change = _chunkVPKVOJHAcjs.useEvent.call(void 0, 
+    (id, open, reason, event) => commit(_core.setAccordionItem.call(void 0, value, items, id, open, rules), { id, open, reason, event })
+  );
+  const focusItem = _chunkVPKVOJHAcjs.useEvent.call(void 0, (index) => {
+    var _a2;
+    (_a2 = triggerRefs.current[index]) == null ? void 0 : _a2.focus();
+  });
+  React2.useEffect(() => {
+    if (!syncWithHash) return;
+    const fromHash = () => {
+      var _a2, _b2;
+      const id = readHash();
+      const row = id != null ? items.find((i) => i.id === id) : void 0;
+      if (!row) return;
+      change(row.id, true, "hash");
+      (_b2 = (_a2 = triggerRefs.current[row.index]) == null ? void 0 : _a2.scrollIntoView) == null ? void 0 : _b2.call(_a2, { block: "start" });
+    };
+    fromHash();
+    window.addEventListener("hashchange", fromHash);
+    return () => window.removeEventListener("hashchange", fromHash);
+  }, [syncWithHash, items, change]);
+  const state = React2.useMemo(
+    () => items.map((item) => ({ ...item, open: isOpen(item.id) })),
+    [items, isOpen]
+  );
+  const onTriggerKeyDown = _chunkVPKVOJHAcjs.useEvent.call(void 0, (event, index) => {
+    const next = _core.accordionFocusTarget.call(void 0, event.key, index, items.length, { orientation, dir, loop });
+    if (next === null) return;
+    event.preventDefault();
+    focusItem(next);
+  });
+  const viewRef = React2.useRef(null);
+  const panels = React2.useRef(/* @__PURE__ */ new Map());
+  const accordionState = {
+    items: state,
+    value,
+    isOpen,
+    open: _chunkVPKVOJHAcjs.useEvent.call(void 0, (id) => change(id, true, "api")),
+    close: _chunkVPKVOJHAcjs.useEvent.call(void 0, (id) => change(id, false, "api")),
+    toggle: _chunkVPKVOJHAcjs.useEvent.call(void 0, (id) => change(id, !isOpen(id), "api")),
+    openAll: _chunkVPKVOJHAcjs.useEvent.call(void 0, () => commit(_core.openAllAccordion.call(void 0, value, items, rules), { open: true, reason: "api" })),
+    closeAll: _chunkVPKVOJHAcjs.useEvent.call(void 0, () => commit(_core.closeAllAccordion.call(void 0, value, items, rules), { open: false, reason: "api" })),
+    focusItem,
+    render: (props) => renderRoot(viewRef.current, props),
+    getRootProps: (props) => _core.mergeProps.call(void 0, 
+      {
+        "data-pinfold": "accordion",
+        "data-orientation": orientation,
+        "data-mode": mode,
+        "data-disabled": _core.dataAttr.call(void 0, allDisabled),
+        dir
+      },
+      props
+    ),
+    getItemProps: (item, props) => _core.mergeProps.call(void 0, 
+      {
+        "data-state": item.open ? "open" : "closed",
+        "data-disabled": _core.dataAttr.call(void 0, item.disabled),
+        "data-index": item.index
+      },
+      props
+    ),
+    getHeaderProps: (item, props) => _core.mergeProps.call(void 0, 
+      {
+        role: "heading",
+        "aria-level": headingLevel,
+        "data-state": item.open ? "open" : "closed"
+      },
+      props
+    ),
+    getTriggerProps: (item, props) => _core.mergeProps.call(void 0, 
+      {
+        type: "button",
+        id: item.triggerId,
+        "aria-expanded": item.open,
+        "aria-controls": item.panelId,
+        "aria-disabled": _core.ariaAttr.call(void 0, item.disabled),
+        "data-state": item.open ? "open" : "closed",
+        "data-disabled": _core.dataAttr.call(void 0, item.disabled),
+        ref: (node) => {
+          triggerRefs.current[item.index] = node;
+        },
+        onClick: (event) => {
+          if (item.disabled) {
+            event.preventDefault();
+            return;
+          }
+          change(item.id, !isOpen(item.id), event.detail === 0 ? "keyboard" : "click", event);
+        },
+        onKeyDown: (event) => onTriggerKeyDown(event, item.index)
+      },
+      props
+    ),
+    getPanelProps: (item, props) => _core.mergeProps.call(void 0, 
+      {
+        id: item.panelId,
+        role: "region",
+        "aria-labelledby": item.triggerId,
+        "data-state": item.open ? "open" : "closed",
+        ref: (node) => trackPanel(panels.current, item, node, appearance.animate)
+      },
+      props
+    )
+  };
+  const buildParts = () => {
+    const pick = (props) => {
+      var _a2;
+      const rows = viewRef.current.api.items;
+      const found = props.index != null ? rows[props.index] : props.id != null ? rows.find((row) => row.id === props.id) : rows[0];
+      _core.warnOnce.call(void 0, 
+        _core.__DEV__ && !found,
+        `Accordion: no row matches ${JSON.stringify((_a2 = props.id) != null ? _a2 : props.index)}. Sub-components address a row by \`id\` or \`index\`.`
+      );
+      return found;
+    };
+    const box = (props) => ({ className: props.className, style: props.style });
+    return {
+      Item: (props) => {
+        const item = pick(props);
+        return item ? renderItem(viewRef.current, item, box(props)) : null;
+      },
+      Trigger: (props) => {
+        const item = pick(props);
+        return item ? renderHeader(viewRef.current, item, box(props), props.children) : null;
+      },
+      Panel: (props) => {
+        const item = pick(props);
+        return item ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, renderPanel(viewRef.current, item, box(props), props.children)) : null;
+      },
+      Indicator: (props) => {
+        const item = pick(props);
+        return item ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, renderIndicator(viewRef.current, item, box(props))) : null;
+      }
+    };
+  };
+  const api = _chunkDQWSDHRYcjs.usePinfoldComponent.call(void 0, 
+    "Accordion",
+    accordionState,
+    (props) => renderRoot(viewRef.current, props),
+    buildParts
+  );
+  const onFound = _chunkVPKVOJHAcjs.useEvent.call(void 0, (id) => change(id, true, "find-in-page"));
+  const findable2 = (item) => (node) => untilFound(node, appearance.hiddenUntilFound && !item.open, appearance.animate, () => onFound(item.id));
+  viewRef.current = { api, config, a: appearance, everOpened: everOpened.current, findable: findable2 };
+  return api;
+}
+function trackPanel(map, item, node, animate) {
+  if (!node) return;
+  const prev = map.get(item.id);
+  map.set(item.id, { node, open: item.open, timer: prev == null ? void 0 : prev.timer });
+  if (!prev || prev.node !== node || prev.open === item.open || !animate) return;
+  if (prev.timer) clearTimeout(prev.timer);
+  node.setAttribute("data-transition", item.open ? "opening" : "closing");
+  const done = () => node.removeAttribute("data-transition");
+  map.get(item.id).timer = setTimeout(done, transitionMs(node));
+}
+var findable = /* @__PURE__ */ new WeakMap();
+function untilFound(node, hide, animate, onFound) {
+  var _a;
+  if (!node) return;
+  const prev = findable.get(node);
+  findable.set(node, { onFound, hide });
+  if (!prev) node.addEventListener("beforematch", () => {
+    var _a2;
+    return (_a2 = findable.get(node)) == null ? void 0 : _a2.onFound();
+  });
+  if (!hide) {
+    if (node.hasAttribute("hidden")) node.removeAttribute("hidden");
+    return;
+  }
+  if (node.getAttribute("hidden") === "until-found") return;
+  const apply = () => {
+    var _a2;
+    if ((_a2 = findable.get(node)) == null ? void 0 : _a2.hide) node.setAttribute("hidden", "until-found");
+  };
+  const wait = animate && prev && !prev.hide ? transitionMs((_a = node.parentElement) != null ? _a : node) : 0;
+  if (wait) setTimeout(apply, wait);
+  else apply();
+}
+function transitionMs(node) {
+  if (typeof getComputedStyle === "undefined") return 0;
+  const style = getComputedStyle(node);
+  const parse = (list) => list.split(",").map((s) => (s.trim().endsWith("ms") ? parseFloat(s) : parseFloat(s) * 1e3) || 0);
+  const durations = parse(style.transitionDuration || "0s");
+  const delays = parse(style.transitionDelay || "0s");
+  return Math.max(0, ...durations.map((d, i) => {
+    var _a;
+    return d + ((_a = delays[i]) != null ? _a : 0);
+  }));
+}
+function readHash() {
+  const raw = typeof location !== "undefined" ? location.hash.slice(1) : "";
+  if (!raw) return null;
+  try {
+    return decodeURIComponent(raw);
+  } catch (e) {
+    return raw;
+  }
+}
+function writeHash(id) {
+  if (typeof history === "undefined") return;
+  const url = location.pathname + location.search + (id != null ? "#" + encodeURIComponent(id) : "");
+  history.replaceState(history.state, "", url);
+}
+function defined(obj) {
+  const out = {};
+  for (const k in obj) if (obj[k] !== void 0) out[k] = obj[k];
+  return out;
+}
+
+// src/accordion/Accordion.tsx
+function Accordion(config) {
+  return useAccordion(config).render();
+}
+Accordion.displayName = "Accordion";
+
+
+
+exports.Accordion = Accordion; exports.useAccordion = useAccordion;

package/dist/accordion/client.d.cts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { A as AccordionConfig, a as AccordionMappedConfig, b as AccordionApi } from '../types-CkcgnWwL.cjs';
+import '@pinfold/core';
+
+/**
+ * Thin JSX wrapper over `useAccordion()`, for one-off accordions that never
+ * need the controller. It adds nothing the hook does not already do.
+ */
+declare function Accordion<Id extends string = string>(config: AccordionConfig<Id>): React.ReactElement;
+declare function Accordion<Row extends object>(config: AccordionMappedConfig<Row>): React.ReactElement;
+declare namespace Accordion {
+    var displayName: string;
+}
+
+/**
+ * The accordion, as a hook that hands back a component.
+ *
+ *   const Faq = useAccordion({ items });
+ *   return <Faq className="mt-8" />;
+ *
+ * The same value is the controller (`Faq.toggle(id)`, `Faq.value`) and carries
+ * its own parts (`<Faq.Trigger id="a" />`) for layouts the config cannot
+ * express. One object, three levels of commitment.
+ *
+ * Implements the WAI-ARIA Accordion pattern: button triggers inside headings,
+ * `aria-expanded` / `aria-controls`, panels as labelled regions, and
+ * Arrow/Home/End navigation between headers. Behaviour rules live in
+ * `@pinfold/core` (accordion.logic.ts); this hook wires them to React.
+ */
+declare function useAccordion<Id extends string = string>(config: AccordionConfig<Id>): AccordionApi<Id>;
+/** Raw records, mapped onto rows by `fields`. Ids come from the data, so they are `string`. */
+declare function useAccordion<Row extends object>(config: AccordionMappedConfig<Row>): AccordionApi;
+
+export { Accordion, AccordionApi, AccordionConfig, AccordionMappedConfig, useAccordion };

package/dist/accordion/client.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { A as AccordionConfig, a as AccordionMappedConfig, b as AccordionApi } from '../types-CkcgnWwL.js';
+import '@pinfold/core';
+
+/**
+ * Thin JSX wrapper over `useAccordion()`, for one-off accordions that never
+ * need the controller. It adds nothing the hook does not already do.
+ */
+declare function Accordion<Id extends string = string>(config: AccordionConfig<Id>): React.ReactElement;
+declare function Accordion<Row extends object>(config: AccordionMappedConfig<Row>): React.ReactElement;
+declare namespace Accordion {
+    var displayName: string;
+}
+
+/**
+ * The accordion, as a hook that hands back a component.
+ *
+ *   const Faq = useAccordion({ items });
+ *   return <Faq className="mt-8" />;
+ *
+ * The same value is the controller (`Faq.toggle(id)`, `Faq.value`) and carries
+ * its own parts (`<Faq.Trigger id="a" />`) for layouts the config cannot
+ * express. One object, three levels of commitment.
+ *
+ * Implements the WAI-ARIA Accordion pattern: button triggers inside headings,
+ * `aria-expanded` / `aria-controls`, panels as labelled regions, and
+ * Arrow/Home/End navigation between headers. Behaviour rules live in
+ * `@pinfold/core` (accordion.logic.ts); this hook wires them to React.
+ */
+declare function useAccordion<Id extends string = string>(config: AccordionConfig<Id>): AccordionApi<Id>;
+/** Raw records, mapped onto rows by `fields`. Ids come from the data, so they are `string`. */
+declare function useAccordion<Row extends object>(config: AccordionMappedConfig<Row>): AccordionApi;
+
+export { Accordion, AccordionApi, AccordionConfig, AccordionMappedConfig, useAccordion };