@pinfold/react 0.1.0 → 0.2.0

package/dist/accordion/client.cjs

@@ -34,6 +34,11 @@ var _core = require('@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" }),
@@ -58,18 +63,25 @@ function slot(ctx, name, base, item) {
 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", config.dimensions), ...config.style },
+        style: { ..._core.dimensionVars.call(void 0, "accordion", dimensions), ...config.style },
         "data-variant": a.variant,
         "data-size": a.size,
         "data-tone": a.tone,
-        // Only an explicit radius; otherwise the provider's preset or a style pack reaches the root by inheritance.
-        "data-pinfold-radius": config.radius,
         "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,
@@ -117,23 +129,24 @@ function renderHeader(ctx, item, extra, children) {
   ));
 }
 function TriggerContent({ ctx, item }) {
-  var _a, _b;
-  const { icon, title, description, badge } = item.config;
-  const iconNode = _core.resolveNode.call(void 0, icon, 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((_a = ctx.config.overflow) == null ? void 0 : _a.title, "wrap") }, item) }, _core.resolveNode.call(void 0, title, item)), descriptionNode ? /* @__PURE__ */ React.createElement(
+  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((_b = ctx.config.overflow) == null ? void 0 : _b.description, { lines: 2 }) },
+        { 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, renderIndicator(ctx, item));
+  ) : 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;
@@ -184,7 +197,7 @@ 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;
+  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 {
@@ -203,7 +216,7 @@ function useAccordion(input) {
     id: idProp
   } = config;
   if (process.env.NODE_ENV !== "production") {
-    void Promise.resolve().then(() => _interopRequireWildcard(require("../validate-ELH6OKK3.cjs"))).then((m) => m.validateAccordion(input, config));
+    void Promise.resolve().then(() => _interopRequireWildcard(require("../validate-EQHBH4NH.cjs"))).then((m) => m.validateAccordion(input, config));
   }
   const appearance = {
     variant: (_a = config.variant) != null ? _a : "solid",
@@ -211,12 +224,13 @@ function useAccordion(input) {
     tone: (_c = config.tone) != null ? _c : ctx.tone,
     indicator: (_d = config.indicator) != null ? _d : "chevron",
     indicatorPosition: (_e = config.indicatorPosition) != null ? _e : "end",
-    headingLevel: (_f = config.headingLevel) != null ? _f : 3,
-    animate: (_g = config.animate) != null ? _g : !ctx.disableAnimation,
-    dividers: (_h = config.dividers) != null ? _h : true,
-    mountPanels: (_i = config.mountPanels) != null ? _i : config.unmountClosed ? "open" : "always",
-    hiddenUntilFound: (_j = config.hiddenUntilFound) != null ? _j : true,
-    unstyled: (_k = config.unstyled) != null ? _k : false
+    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);
@@ -229,10 +243,13 @@ function useAccordion(input) {
   );
   const items = React2.useMemo(
     () => itemConfigs.map((item, index) => {
+      var _a2, _b2;
       const id = _core.accordionRowId.call(void 0, item, index);
-      return { id, index, disabled: allDisabled || !!item.disabled, config: item, ..._core.accordionPartIds.call(void 0, baseId, id) };
+      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) };
     }),
-    [itemConfigs, baseId, allDisabled]
+    // 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,

package/dist/accordion/client.d.cts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { A as AccordionConfig, a as AccordionApi } from '../types-BZqk8btE.cjs';
+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(config: AccordionConfig): React.ReactElement;
+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;
 }
@@ -26,6 +27,8 @@ declare namespace Accordion {
  * Arrow/Home/End navigation between headers. Behaviour rules live in
  * `@pinfold/core` (accordion.logic.ts); this hook wires them to React.
  */
-declare function useAccordion(input: AccordionConfig): AccordionApi;
+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, useAccordion };
+export { Accordion, AccordionApi, AccordionConfig, AccordionMappedConfig, useAccordion };

package/dist/accordion/client.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { A as AccordionConfig, a as AccordionApi } from '../types-BZqk8btE.js';
+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(config: AccordionConfig): React.ReactElement;
+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;
 }
@@ -26,6 +27,8 @@ declare namespace Accordion {
  * Arrow/Home/End navigation between headers. Behaviour rules live in
  * `@pinfold/core` (accordion.logic.ts); this hook wires them to React.
  */
-declare function useAccordion(input: AccordionConfig): AccordionApi;
+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, useAccordion };
+export { Accordion, AccordionApi, AccordionConfig, AccordionMappedConfig, useAccordion };

package/dist/accordion/client.js

@@ -31,8 +31,13 @@ import {
 
 // src/accordion/AccordionView.tsx
 import * as React from "react";
-import { cn, dimensionVars, mergeProps, resolveNode, shouldMountPanel } from "@pinfold/core";
+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" }),
@@ -57,18 +62,25 @@ function slot(ctx, name, base, item) {
 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", config.dimensions), ...config.style },
+        style: { ...dimensionVars("accordion", dimensions), ...config.style },
         "data-variant": a.variant,
         "data-size": a.size,
         "data-tone": a.tone,
-        // Only an explicit radius; otherwise the provider's preset or a style pack reaches the root by inheritance.
-        "data-pinfold-radius": config.radius,
         "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,
@@ -116,23 +128,24 @@ function renderHeader(ctx, item, extra, children) {
   ));
 }
 function TriggerContent({ ctx, item }) {
-  var _a, _b;
-  const { icon, title, description, badge } = item.config;
-  const iconNode = resolveNode(icon, 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((_a = ctx.config.overflow) == null ? void 0 : _a.title, "wrap") }, item) }, resolveNode(title, item)), descriptionNode ? /* @__PURE__ */ React.createElement(
+  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((_b = ctx.config.overflow) == null ? void 0 : _b.description, { lines: 2 }) },
+        { 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, renderIndicator(ctx, item));
+  ) : 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;
@@ -183,7 +196,7 @@ 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;
+  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 {
@@ -202,7 +215,7 @@ function useAccordion(input) {
     id: idProp
   } = config;
   if (process.env.NODE_ENV !== "production") {
-    void import("../validate-D3GJ2276.js").then((m) => m.validateAccordion(input, config));
+    void import("../validate-WKHQNNGD.js").then((m) => m.validateAccordion(input, config));
   }
   const appearance = {
     variant: (_a = config.variant) != null ? _a : "solid",
@@ -210,12 +223,13 @@ function useAccordion(input) {
     tone: (_c = config.tone) != null ? _c : ctx.tone,
     indicator: (_d = config.indicator) != null ? _d : "chevron",
     indicatorPosition: (_e = config.indicatorPosition) != null ? _e : "end",
-    headingLevel: (_f = config.headingLevel) != null ? _f : 3,
-    animate: (_g = config.animate) != null ? _g : !ctx.disableAnimation,
-    dividers: (_h = config.dividers) != null ? _h : true,
-    mountPanels: (_i = config.mountPanels) != null ? _i : config.unmountClosed ? "open" : "always",
-    hiddenUntilFound: (_j = config.hiddenUntilFound) != null ? _j : true,
-    unstyled: (_k = config.unstyled) != null ? _k : false
+    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);
@@ -228,10 +242,13 @@ function useAccordion(input) {
   );
   const items = React2.useMemo(
     () => itemConfigs.map((item, index) => {
+      var _a2, _b2;
       const id = accordionRowId(item, index);
-      return { id, index, disabled: allDisabled || !!item.disabled, config: item, ...accordionPartIds(baseId, id) };
+      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) };
     }),
-    [itemConfigs, baseId, allDisabled]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemConfigs, baseId, allDisabled, JSON.stringify(config.disabledIds)]
   );
   const [value, setValue] = useControllableState({
     value: controlled,

package/dist/accordion/index.cjs

@@ -27,7 +27,8 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/accordion/index.ts
 function defineAccordion(config) {
-  const Defined = ((props) => React__namespace.createElement(client_cjs.Accordion, { ...config, ...props }));
+  const Tag = client_cjs.Accordion;
+  const Defined = ((props) => React__namespace.createElement(Tag, { ...config, ...props }));
   Defined.config = config;
   Defined.displayName = "DefinedAccordion";
   return Defined;

package/dist/accordion/index.d.cts

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { A as AccordionConfig, a as AccordionApi, b as AccordionRootProps } from '../types-x01Q5sqz.cjs';
-export { c as AccordionAppearanceConfig, d as AccordionBehaviourConfig, e as AccordionDimensions, f as AccordionIndicator, g as AccordionItemConfig, h as AccordionItemState, i as AccordionNode, j as AccordionOverflow, k as AccordionPartProps, l as AccordionParts, m as AccordionSlot, n as AccordionState, o as AccordionValueDetails, p as AccordionVariant } from '../types-x01Q5sqz.cjs';
+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(config: AccordionConfig): React.ReactElement;
+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;
 }
@@ -27,11 +28,13 @@ declare namespace Accordion {
  * Arrow/Home/End navigation between headers. Behaviour rules live in
  * `@pinfold/core` (accordion.logic.ts); this hook wires them to React.
  */
-declare function useAccordion(input: AccordionConfig): AccordionApi;
+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 = ((props: AccordionRootProps) => React.ReactElement) & {
-    config: AccordionConfig;
+type DefinedAccordion<Config = AnyAccordionConfig> = ((props: AccordionRootProps) => React.ReactElement) & {
+    config: Config;
     displayName?: string;
 };
 /**
@@ -46,7 +49,8 @@ type DefinedAccordion = ((props: AccordionRootProps) => React.ReactElement) & {
  * data and server-rendered JSX, no functions. For a controller (`Faq.toggle`)
  * use `useAccordion` in a client component.
  */
-declare function defineAccordion(config: AccordionConfig): DefinedAccordion;
+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, AccordionRootProps, Accordion as default, defineAccordion, useAccordion };
+export { Accordion, AccordionApi, AccordionConfig, AccordionMappedConfig, AccordionRootProps, AnyAccordionConfig, Accordion as default, defineAccordion, useAccordion };
 export type { DefinedAccordion };

package/dist/accordion/index.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { A as AccordionConfig, a as AccordionApi, b as AccordionRootProps } from '../types-x01Q5sqz.js';
-export { c as AccordionAppearanceConfig, d as AccordionBehaviourConfig, e as AccordionDimensions, f as AccordionIndicator, g as AccordionItemConfig, h as AccordionItemState, i as AccordionNode, j as AccordionOverflow, k as AccordionPartProps, l as AccordionParts, m as AccordionSlot, n as AccordionState, o as AccordionValueDetails, p as AccordionVariant } from '../types-x01Q5sqz.js';
+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(config: AccordionConfig): React.ReactElement;
+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;
 }
@@ -27,11 +28,13 @@ declare namespace Accordion {
  * Arrow/Home/End navigation between headers. Behaviour rules live in
  * `@pinfold/core` (accordion.logic.ts); this hook wires them to React.
  */
-declare function useAccordion(input: AccordionConfig): AccordionApi;
+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 = ((props: AccordionRootProps) => React.ReactElement) & {
-    config: AccordionConfig;
+type DefinedAccordion<Config = AnyAccordionConfig> = ((props: AccordionRootProps) => React.ReactElement) & {
+    config: Config;
     displayName?: string;
 };
 /**
@@ -46,7 +49,8 @@ type DefinedAccordion = ((props: AccordionRootProps) => React.ReactElement) & {
  * data and server-rendered JSX, no functions. For a controller (`Faq.toggle`)
  * use `useAccordion` in a client component.
  */
-declare function defineAccordion(config: AccordionConfig): DefinedAccordion;
+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, AccordionRootProps, Accordion as default, defineAccordion, useAccordion };
+export { Accordion, AccordionApi, AccordionConfig, AccordionMappedConfig, AccordionRootProps, AnyAccordionConfig, Accordion as default, defineAccordion, useAccordion };
 export type { DefinedAccordion };

package/dist/accordion/index.js

@@ -4,7 +4,8 @@ import * as React from 'react';
 
 // src/accordion/index.ts
 function defineAccordion(config) {
-  const Defined = ((props) => React.createElement(Accordion, { ...config, ...props }));
+  const Tag = Accordion;
+  const Defined = ((props) => React.createElement(Tag, { ...config, ...props }));
   Defined.config = config;
   Defined.displayName = "DefinedAccordion";
   return Defined;

package/dist/accordion/lazy.d.cts

@@ -1,6 +1,7 @@
-import * as React from 'react';
 import * as _pinfold_core from '@pinfold/core';
-import { A as AccordionConfig } from '../types-BZqk8btE.cjs';
+import * as React from 'react';
+import { c as AnyAccordionConfig } from '../types-CkcgnWwL.cjs';
+export { A as AccordionConfig, a as AccordionMappedConfig } from '../types-CkcgnWwL.cjs';
 
 /**
  * Code-split entry point. Nothing accordion-related enters the main bundle
@@ -8,8 +9,8 @@ import { A as AccordionConfig } from '../types-BZqk8btE.cjs';
  *
  *   import { Accordion } from '@pinfold/react/accordion/lazy';
  */
-declare const Accordion: React.ComponentType<AccordionConfig & {
+declare const Accordion: React.ComponentType<AnyAccordionConfig & {
     lazy?: _pinfold_core.PinfoldLazy;
 }>;
 
-export { Accordion, AccordionConfig, Accordion as default };
+export { Accordion, Accordion as default };

package/dist/accordion/lazy.d.ts

@@ -1,6 +1,7 @@
-import * as React from 'react';
 import * as _pinfold_core from '@pinfold/core';
-import { A as AccordionConfig } from '../types-BZqk8btE.js';
+import * as React from 'react';
+import { c as AnyAccordionConfig } from '../types-CkcgnWwL.js';
+export { A as AccordionConfig, a as AccordionMappedConfig } from '../types-CkcgnWwL.js';
 
 /**
  * Code-split entry point. Nothing accordion-related enters the main bundle
@@ -8,8 +9,8 @@ import { A as AccordionConfig } from '../types-BZqk8btE.js';
  *
  *   import { Accordion } from '@pinfold/react/accordion/lazy';
  */
-declare const Accordion: React.ComponentType<AccordionConfig & {
+declare const Accordion: React.ComponentType<AnyAccordionConfig & {
     lazy?: _pinfold_core.PinfoldLazy;
 }>;
 
-export { Accordion, AccordionConfig, Accordion as default };
+export { Accordion, Accordion as default };

package/dist/client.d.cts

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { PinfoldTheme, PinfoldRadius, PinfoldDir, PinfoldSize, PinfoldTone, PinfoldStylePack, PinfoldLazy, PropsBag } from '@pinfold/core';
-import { S as SlotOverrides } from './types-BZqk8btE.cjs';
-import { AccordionConfig } from './accordion/client.cjs';
-export { P as PinfoldComponent, b as SlotRenderer, c as Slottable, u as usePinfoldComponent } from './types-BZqk8btE.cjs';
+import { d as AccordionOptions, S as SlotOverrides } from './types-CkcgnWwL.cjs';
+export { P as PinfoldComponent, e as SlotRenderer, f as Slottable, u as usePinfoldComponent } from './types-CkcgnWwL.cjs';
 
 /** Per-component defaults. Data, state and ids never belong here, only how components look and behave. */
 interface PinfoldComponentDefaults {
-    accordion?: Partial<Omit<AccordionConfig, 'items' | 'fields' | 'value' | 'defaultValue' | 'id'>>;
+    accordion?: Omit<AccordionOptions, 'value' | 'defaultValue' | 'disabledIds' | 'id'>;
 }
 /**
  * The global config, usually in `pinfold.config.ts` (or `.js`):

package/dist/client.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { PinfoldTheme, PinfoldRadius, PinfoldDir, PinfoldSize, PinfoldTone, PinfoldStylePack, PinfoldLazy, PropsBag } from '@pinfold/core';
-import { S as SlotOverrides } from './types-BZqk8btE.js';
-import { AccordionConfig } from './accordion/client.js';
-export { P as PinfoldComponent, b as SlotRenderer, c as Slottable, u as usePinfoldComponent } from './types-BZqk8btE.js';
+import { d as AccordionOptions, S as SlotOverrides } from './types-CkcgnWwL.js';
+export { P as PinfoldComponent, e as SlotRenderer, f as Slottable, u as usePinfoldComponent } from './types-CkcgnWwL.js';
 
 /** Per-component defaults. Data, state and ids never belong here, only how components look and behave. */
 interface PinfoldComponentDefaults {
-    accordion?: Partial<Omit<AccordionConfig, 'items' | 'fields' | 'value' | 'defaultValue' | 'id'>>;
+    accordion?: Omit<AccordionOptions, 'value' | 'defaultValue' | 'disabledIds' | 'id'>;
 }
 /**
  * The global config, usually in `pinfold.config.ts` (or `.js`):

package/dist/index.d.cts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { PinfoldTheme, PinfoldRadius, PinfoldDir, PinfoldSize, PinfoldTone, PinfoldStylePack, PinfoldLazy, PropsBag } from '@pinfold/core';
-import { S as SlotOverrides } from './types-x01Q5sqz.cjs';
-import { AccordionConfig } from './accordion/index.cjs';
-export { P as PinfoldComponent, q as SlotRenderer, r as Slottable, u as usePinfoldComponent } from './types-x01Q5sqz.cjs';
+import { S as SlotOverrides } from './types-N0Yo4zGa.cjs';
+import { AccordionOptions } from './accordion/index.cjs';
+export { P as PinfoldComponent, w as SlotRenderer, x as Slottable, y as usePinfoldComponent } from './types-N0Yo4zGa.cjs';
 
 /** Per-component defaults. Data, state and ids never belong here, only how components look and behave. */
 interface PinfoldComponentDefaults {
-    accordion?: Partial<Omit<AccordionConfig, 'items' | 'fields' | 'value' | 'defaultValue' | 'id'>>;
+    accordion?: Omit<AccordionOptions, 'value' | 'defaultValue' | 'disabledIds' | 'id'>;
 }
 /**
  * The global config, usually in `pinfold.config.ts` (or `.js`):

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { PinfoldTheme, PinfoldRadius, PinfoldDir, PinfoldSize, PinfoldTone, PinfoldStylePack, PinfoldLazy, PropsBag } from '@pinfold/core';
-import { S as SlotOverrides } from './types-x01Q5sqz.js';
-import { AccordionConfig } from './accordion/index.js';
-export { P as PinfoldComponent, q as SlotRenderer, r as Slottable, u as usePinfoldComponent } from './types-x01Q5sqz.js';
+import { S as SlotOverrides } from './types-N0Yo4zGa.js';
+import { AccordionOptions } from './accordion/index.js';
+export { P as PinfoldComponent, w as SlotRenderer, x as Slottable, y as usePinfoldComponent } from './types-N0Yo4zGa.js';
 
 /** Per-component defaults. Data, state and ids never belong here, only how components look and behave. */
 interface PinfoldComponentDefaults {
-    accordion?: Partial<Omit<AccordionConfig, 'items' | 'fields' | 'value' | 'defaultValue' | 'id'>>;
+    accordion?: Omit<AccordionOptions, 'value' | 'defaultValue' | 'disabledIds' | 'id'>;
 }
 /**
  * The global config, usually in `pinfold.config.ts` (or `.js`):