@pinfold/react 0.0.0-stage → 0.2.0

package/dist/accordion/client.js

@@ -0,0 +1,490 @@
+'use client';
+import {
+  renderSlot,
+  slotProps,
+  usePinfoldComponent
+} from "../chunk-BPPCPHHU.js";
+import {
+  useControllableState,
+  useEvent,
+  useId,
+  usePinfold
+} from "../chunk-Q232PTPW.js";
+
+// src/accordion/useAccordion.tsx
+import * as React2 from "react";
+import {
+  accordionFocusTarget,
+  accordionPartIds,
+  accordionRowId,
+  ariaAttr,
+  closeAllAccordion,
+  dataAttr,
+  initialAccordionValue,
+  mapAccordionFields,
+  mergeProps as mergeProps2,
+  openAllAccordion,
+  setAccordionItem,
+  warnOnce,
+  __DEV__
+} from "@pinfold/core";
+
+// src/accordion/AccordionView.tsx
+import * as React from "react";
+import { accordionRowsJoined, cn, dimensionVars, mergeProps, resolveNode, shouldMountPanel } from "@pinfold/core";
+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 = slotProps(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 mergeProps(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(
+    mergeProps(
+      slot(ctx, "root", {
+        className: a.unstyled ? config.className : cn("pinfold", B, config.className),
+        style: { ...dimensionVars("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") && accordionRowsJoined(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,
+    mergeProps(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,
+    mergeProps(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 }, renderSlot(
+    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 = resolveNode((_a = item.config.icon) != null ? _a : ctx.config.icon, item);
+  const endIconNode = resolveNode((_b = item.config.endIcon) != null ? _b : ctx.config.endIcon, item);
+  const descriptionNode = resolveNode(description, item);
+  const badgeNode = resolveNode(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) }, resolveNode(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 renderSlot(
+    ctx.config,
+    "indicator",
+    mergeProps(
+      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 = resolveNode(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,
+    mergeProps(slot(ctx, "panel", { className: cls(ctx, `${B}__panel`) }, item), extra != null ? extra : {})
+  );
+  const body = children != null ? children : shouldMountPanel(a.mountPanels, item.open, ctx.everOpened.has(item.id)) ? resolveNode(item.config.content, item) : null;
+  return renderSlot(
+    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 = usePinfold();
+  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 import("../validate-WKHQNNGD.js").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 = useId(idProp);
+  const triggerRefs = React2.useRef([]);
+  const itemConfigs = React2.useMemo(
+    () => mapAccordionFields(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 = accordionRowId(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, ...accordionPartIds(baseId, id) };
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemConfigs, baseId, allDisabled, JSON.stringify(config.disabledIds)]
+  );
+  const [value, setValue] = useControllableState({
+    value: controlled,
+    defaultValue: () => initialAccordionValue(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 = useEvent((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 = useEvent(
+    (id, open, reason, event) => commit(setAccordionItem(value, items, id, open, rules), { id, open, reason, event })
+  );
+  const focusItem = useEvent((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 = useEvent((event, index) => {
+    const next = accordionFocusTarget(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: useEvent((id) => change(id, true, "api")),
+    close: useEvent((id) => change(id, false, "api")),
+    toggle: useEvent((id) => change(id, !isOpen(id), "api")),
+    openAll: useEvent(() => commit(openAllAccordion(value, items, rules), { open: true, reason: "api" })),
+    closeAll: useEvent(() => commit(closeAllAccordion(value, items, rules), { open: false, reason: "api" })),
+    focusItem,
+    render: (props) => renderRoot(viewRef.current, props),
+    getRootProps: (props) => mergeProps2(
+      {
+        "data-pinfold": "accordion",
+        "data-orientation": orientation,
+        "data-mode": mode,
+        "data-disabled": dataAttr(allDisabled),
+        dir
+      },
+      props
+    ),
+    getItemProps: (item, props) => mergeProps2(
+      {
+        "data-state": item.open ? "open" : "closed",
+        "data-disabled": dataAttr(item.disabled),
+        "data-index": item.index
+      },
+      props
+    ),
+    getHeaderProps: (item, props) => mergeProps2(
+      {
+        role: "heading",
+        "aria-level": headingLevel,
+        "data-state": item.open ? "open" : "closed"
+      },
+      props
+    ),
+    getTriggerProps: (item, props) => mergeProps2(
+      {
+        type: "button",
+        id: item.triggerId,
+        "aria-expanded": item.open,
+        "aria-controls": item.panelId,
+        "aria-disabled": ariaAttr(item.disabled),
+        "data-state": item.open ? "open" : "closed",
+        "data-disabled": dataAttr(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) => mergeProps2(
+      {
+        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];
+      warnOnce(
+        __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 = usePinfoldComponent(
+    "Accordion",
+    accordionState,
+    (props) => renderRoot(viewRef.current, props),
+    buildParts
+  );
+  const onFound = useEvent((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";
+export {
+  Accordion,
+  useAccordion
+};

package/dist/accordion/index.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var client_cjs = require('./client.cjs');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/accordion/index.ts
+function defineAccordion(config) {
+  const Tag = client_cjs.Accordion;
+  const Defined = ((props) => React__namespace.createElement(Tag, { ...config, ...props }));
+  Defined.config = config;
+  Defined.displayName = "DefinedAccordion";
+  return Defined;
+}
+
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () { return client_cjs.Accordion; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return client_cjs.Accordion; }
+});
+Object.defineProperty(exports, "useAccordion", {
+  enumerable: true,
+  get: function () { return client_cjs.useAccordion; }
+});
+exports.defineAccordion = defineAccordion;

package/dist/accordion/index.d.cts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { A as AccordionConfig, a as AccordionMappedConfig, b as AccordionApi, c as AnyAccordionConfig, d as AccordionRootProps } from '../types-N0Yo4zGa.cjs';
+export { e as AccordionAppearanceConfig, f as AccordionBehaviourConfig, g as AccordionDimensions, h as AccordionGap, i as AccordionIndicator, j as AccordionItemConfig, k as AccordionItemId, l as AccordionItemState, m as AccordionNode, n as AccordionOptions, o as AccordionOverflow, p as AccordionPartProps, q as AccordionParts, r as AccordionRadius, s as AccordionSlot, t as AccordionState, u as AccordionValueDetails, v as AccordionVariant } from '../types-N0Yo4zGa.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;
+
+/** What `defineAccordion` returns: a component with the config baked in. */
+type DefinedAccordion<Config = AnyAccordionConfig> = ((props: AccordionRootProps) => React.ReactElement) & {
+    config: Config;
+    displayName?: string;
+};
+/**
+ * The non-hook twin of `useAccordion`, for Server Components (and anywhere a
+ * hook can't run). Same config, same tag:
+ *
+ *   const Faq = defineAccordion({ items: await getFaq() });
+ *   return <Faq />;
+ *
+ * The server renders the full HTML (every title and panel) and the client
+ * hydrates it. From a Server Component the config must be serialisable: plain
+ * data and server-rendered JSX, no functions. For a controller (`Faq.toggle`)
+ * use `useAccordion` in a client component.
+ */
+declare function defineAccordion<Id extends string = string>(config: AccordionConfig<Id>): DefinedAccordion<AccordionConfig<Id>>;
+declare function defineAccordion<Row extends object>(config: AccordionMappedConfig<Row>): DefinedAccordion<AccordionMappedConfig<Row>>;
+
+export { Accordion, AccordionApi, AccordionConfig, AccordionMappedConfig, AccordionRootProps, AnyAccordionConfig, Accordion as default, defineAccordion, useAccordion };
+export type { DefinedAccordion };

package/dist/accordion/index.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { A as AccordionConfig, a as AccordionMappedConfig, b as AccordionApi, c as AnyAccordionConfig, d as AccordionRootProps } from '../types-N0Yo4zGa.js';
+export { e as AccordionAppearanceConfig, f as AccordionBehaviourConfig, g as AccordionDimensions, h as AccordionGap, i as AccordionIndicator, j as AccordionItemConfig, k as AccordionItemId, l as AccordionItemState, m as AccordionNode, n as AccordionOptions, o as AccordionOverflow, p as AccordionPartProps, q as AccordionParts, r as AccordionRadius, s as AccordionSlot, t as AccordionState, u as AccordionValueDetails, v as AccordionVariant } from '../types-N0Yo4zGa.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;
+
+/** What `defineAccordion` returns: a component with the config baked in. */
+type DefinedAccordion<Config = AnyAccordionConfig> = ((props: AccordionRootProps) => React.ReactElement) & {
+    config: Config;
+    displayName?: string;
+};
+/**
+ * The non-hook twin of `useAccordion`, for Server Components (and anywhere a
+ * hook can't run). Same config, same tag:
+ *
+ *   const Faq = defineAccordion({ items: await getFaq() });
+ *   return <Faq />;
+ *
+ * The server renders the full HTML (every title and panel) and the client
+ * hydrates it. From a Server Component the config must be serialisable: plain
+ * data and server-rendered JSX, no functions. For a controller (`Faq.toggle`)
+ * use `useAccordion` in a client component.
+ */
+declare function defineAccordion<Id extends string = string>(config: AccordionConfig<Id>): DefinedAccordion<AccordionConfig<Id>>;
+declare function defineAccordion<Row extends object>(config: AccordionMappedConfig<Row>): DefinedAccordion<AccordionMappedConfig<Row>>;
+
+export { Accordion, AccordionApi, AccordionConfig, AccordionMappedConfig, AccordionRootProps, AnyAccordionConfig, Accordion as default, defineAccordion, useAccordion };
+export type { DefinedAccordion };

package/dist/accordion/index.js

@@ -0,0 +1,14 @@
+import { Accordion } from './client.js';
+export { Accordion, Accordion as default, useAccordion } from './client.js';
+import * as React from 'react';
+
+// src/accordion/index.ts
+function defineAccordion(config) {
+  const Tag = Accordion;
+  const Defined = ((props) => React.createElement(Tag, { ...config, ...props }));
+  Defined.config = config;
+  Defined.displayName = "DefinedAccordion";
+  return Defined;
+}
+
+export { defineAccordion };