@pibit.ai/cure-design-system 0.6.7 → 0.6.9

package/dist/patterns/accordion/accordion.d.ts

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react';
+/**
+ * Hides any outer AccordionGroup from what is rendered inside it. React Aria joins every
+ * Disclosure to the nearest group, so without this an accordion (or a Collapsible) nested in
+ * another accordion's panel would become one more item of the outer group.
+ */
+export declare const IsolateFromAccordionGroup: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface AccordionProps {
+    /**
+     * Identifies the item inside an `AccordionGroup`, which then owns its open state
+     * (`defaultOpen` / `isOpen` are ignored). Without an id the accordion stays independent,
+     * even inside a group.
+     */
+    id?: string;
+    title: string | ReactNode;
+    titleIcon?: ReactNode;
+    subtitle?: string;
+    children: ReactNode;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Controlled open state (outside a group). */
+    isOpen?: boolean;
+    /** Called with the new open state whenever the header is pressed. */
+    onOpenChange?: (isOpen: boolean) => void;
+    isDisabled?: boolean;
+    /** Classes for the outer wrapper. */
+    className?: string;
+    /** Classes for the content wrapper (padding etc.). */
+    childrenClassName?: string;
+    /** Classes added to the header button while open. */
+    activeTitleClassName?: string;
+    /** Classes for the header row inside the button. */
+    headerClassName?: string;
+    /** Classes for the header button itself (e.g. to drop its bottom border). Applied open or closed. */
+    buttonClassName?: string;
+    /** `true` (default) shows a rotating chevron; `false` shows plus / minus. */
+    showToggle?: boolean;
+    /** Set false to hide the built-in chevron / plus-minus indicator entirely (caller renders its own). */
+    showIndicator?: boolean;
+    /** Rendered before the expand/collapse indicator (e.g. a row actions menu). Clicks do not toggle the accordion. */
+    headerActions?: ReactNode;
+    /** When true, content mounts only while open (and for the length of the close animation). */
+    lazyMount?: boolean;
+}
+/**
+ * A collapsible section: a full-width header button over a panel that slides open
+ * (grid-rows 0fr → 1fr, 300ms) and fades in. Built on React Aria `Disclosure`, so the header
+ * is a real button with `aria-expanded` / `aria-controls`, and the panel is labelled by it.
+ */
+export declare const Accordion: ({ id, children, title, titleIcon, subtitle, defaultOpen, isOpen, onOpenChange, isDisabled, className, childrenClassName, activeTitleClassName, headerClassName, buttonClassName, showToggle, showIndicator, headerActions, lazyMount, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export interface AccordionGroupProps {
+    /** Initially open item (single mode). */
+    defaultOpenId?: string;
+    /** Initially open items. In single mode only the first is used. */
+    defaultOpenIds?: string[];
+    /** Controlled open items. */
+    openIds?: string[];
+    /** Called with the new open items whenever one is opened or closed. */
+    onOpenIdsChange?: (openIds: string[]) => void;
+    /** Allow several items open at once. */
+    multiple?: boolean;
+    /** Allow closing an open item by pressing its header. Without it an open item stays open. */
+    collapsible?: boolean;
+    isDisabled?: boolean;
+    children: ReactNode;
+}
+/**
+ * Coordinates the `Accordion`s (with an `id`) rendered anywhere below it: single or multiple
+ * expansion, controlled (`openIds` + `onOpenIdsChange`) or uncontrolled. Renders no element
+ * of its own, so it can wrap items laid out by the parent.
+ */
+export declare function AccordionGroup({ defaultOpenId, defaultOpenIds, openIds: controlledOpenIds, onOpenIdsChange, multiple, collapsible, isDisabled, children, }: AccordionGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=accordion.d.ts.map

package/dist/patterns/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/patterns/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAenG;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAE9E,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qEAAqE;IACrE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oDAAoD;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qGAAqG;IACrG,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uGAAuG;IACvG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mHAAmH;IACnH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6FAA6F;IAC7F,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,GAAI,yOAmBvB,cAAc,4CAoEhB,CAAC;AAiDF,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uEAAuE;IACvE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,aAAa,EACb,cAAc,EACd,OAAO,EAAE,iBAAiB,EAC1B,eAAe,EACf,QAAgB,EAChB,WAAmB,EACnB,UAAkB,EAClB,QAAQ,GACT,EAAE,mBAAmB,2CA6BrB"}

package/dist/patterns/accordion/accordion.js

@@ -0,0 +1,151 @@
+import { jsx as o, jsxs as w, Fragment as A } from "react/jsx-runtime";
+import { ChevronDown as D, Minus as G, Plus as M } from "@untitledui/icons";
+import { useControlledState as O } from "@react-stately/utils";
+import { useContext as j, useMemo as q, useState as K, useEffect as W } from "react";
+import { DisclosureGroupStateContext as S, Disclosure as F, Button as _, DisclosurePanel as b } from "react-aria-components";
+import { cx as d } from "../../utils/cn.js";
+const B = 300, I = ({ children: r }) => /* @__PURE__ */ o(S.Provider, { value: null, children: r }), U = ({
+  id: r,
+  children: t,
+  title: n,
+  titleIcon: u,
+  subtitle: e,
+  defaultOpen: s,
+  isOpen: a,
+  onOpenChange: x,
+  isDisabled: p,
+  className: i,
+  childrenClassName: l,
+  activeTitleClassName: N,
+  headerClassName: y,
+  buttonClassName: m,
+  showToggle: c = !0,
+  showIndicator: f = !0,
+  headerActions: h,
+  lazyMount: T = !1
+}) => {
+  const P = j(S), g = P != null && r != null, k = /* @__PURE__ */ o(
+    F,
+    {
+      id: g ? r : void 0,
+      isExpanded: g ? void 0 : a,
+      defaultExpanded: g ? void 0 : s,
+      onExpandedChange: x,
+      isDisabled: p,
+      className: d("rounded-md", i),
+      children: ({ isExpanded: v }) => /* @__PURE__ */ w(A, { children: [
+        /* @__PURE__ */ o(
+          _,
+          {
+            slot: "trigger",
+            className: d(
+              "flex flex-col items-start w-full cursor-pointer gap-3 text-left border-b border-secondary",
+              m,
+              v && N
+            ),
+            children: /* @__PURE__ */ w("div", { className: d("flex items-center w-full cursor-pointer py-3", y), children: [
+              /* @__PURE__ */ w("div", { className: "flex flex-1 gap-3 justify-start items-center", children: [
+                u,
+                typeof n == "string" ? /* @__PURE__ */ o("h4", { className: "text-[16px]", children: n }) : n,
+                e && /* @__PURE__ */ o("span", { className: "text-sm text-secondary", children: e })
+              ] }),
+              h ? /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "p-1.5 mx-2 flex shrink-0 items-center",
+                  onClick: (C) => C.stopPropagation(),
+                  onPointerDown: (C) => C.stopPropagation(),
+                  children: h
+                }
+              ) : null,
+              f ? c ? /* @__PURE__ */ o(
+                "span",
+                {
+                  className: d(
+                    "p-1 ml-auto shrink-0 transform transition-transform duration-300",
+                    v ? "rotate-180" : "rotate-0"
+                  ),
+                  children: /* @__PURE__ */ o(D, { strokeWidth: 1.25, color: "var(--color-fg-quaternary)" })
+                }
+              ) : /* @__PURE__ */ w("span", { className: "ml-auto transform transition-transform duration-300", children: [
+                v ? /* @__PURE__ */ o(G, { size: 16, strokeWidth: 1.25, color: "var(--color-fg-quaternary)" }) : /* @__PURE__ */ o(M, { size: 16, strokeWidth: 1.25, color: "var(--color-fg-quaternary)" }),
+                " "
+              ] }) : null
+            ] })
+          }
+        ),
+        /* @__PURE__ */ o(R, { isExpanded: v, lazyMount: T, childrenClassName: l, children: t })
+      ] })
+    }
+  );
+  return P != null && !g ? /* @__PURE__ */ o(I, { children: k }) : k;
+}, R = ({
+  isExpanded: r,
+  lazyMount: t,
+  childrenClassName: n,
+  children: u
+}) => {
+  const [e, s] = K(!t || r);
+  return W(() => {
+    if (!t) return;
+    if (r) {
+      s(!0);
+      return;
+    }
+    const a = window.setTimeout(() => s(!1), B);
+    return () => window.clearTimeout(a);
+  }, [r, t]), /* @__PURE__ */ o(
+    b,
+    {
+      className: d(
+        "grid motion-safe:transition-[grid-template-rows] motion-safe:duration-300 motion-safe:ease-in-out will-change-[grid-template-rows]",
+        r ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      children: /* @__PURE__ */ o("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: d(
+            "pt-4 pb-1 motion-safe:transition-opacity motion-safe:duration-200 motion-safe:ease-out",
+            r ? "opacity-100" : "opacity-0",
+            n
+          ),
+          children: /* @__PURE__ */ o(I, { children: e && u })
+        }
+      ) })
+    }
+  );
+};
+function V({
+  defaultOpenId: r,
+  defaultOpenIds: t,
+  openIds: n,
+  onOpenIdsChange: u,
+  multiple: e = !1,
+  collapsible: s = !1,
+  isDisabled: a = !1,
+  children: x
+}) {
+  const p = t ?? (r != null ? [r] : []), [i, l] = O(
+    n,
+    e ? p : p.slice(0, 1),
+    u
+  ), N = q(() => {
+    const y = (m) => {
+      const c = String(m), f = i.includes(c);
+      f && !s || l(e ? f ? i.filter((h) => h !== c) : [...i, c] : f ? [] : [c]);
+    };
+    return {
+      allowsMultipleExpanded: e,
+      isDisabled: a,
+      expandedKeys: new Set(i),
+      toggleKey: y,
+      setExpandedKeys: (m) => l(Array.from(m, String))
+    };
+  }, [s, a, e, i, l]);
+  return /* @__PURE__ */ o(S.Provider, { value: N, children: x });
+}
+export {
+  U as Accordion,
+  V as AccordionGroup,
+  I as IsolateFromAccordionGroup
+};

package/dist/patterns/accordion/collapsible.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { ButtonProps as AriaButtonProps, DisclosurePanelProps, DisclosureProps } from 'react-aria-components';
+export interface CollapsibleProps extends Omit<DisclosureProps, "isExpanded" | "defaultExpanded" | "onExpandedChange" | "id" | "className" | "children"> {
+    /** Controlled open state. */
+    isOpen?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Unstyled show / hide region: a `CollapsibleTrigger` button and a `CollapsibleContent`
+ * panel, with no animation. Built on React Aria `Disclosure`; for a styled, animated
+ * section use `Accordion`.
+ */
+export declare function Collapsible({ isOpen, defaultOpen, onOpenChange, className, children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+export type CollapsibleTriggerProps = Omit<AriaButtonProps, "slot">;
+/** The button that opens and closes its `Collapsible`. Unstyled; pass `className`. */
+export declare function CollapsibleTrigger(props: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapsibleContentProps extends Omit<DisclosurePanelProps, "className" | "children"> {
+    className?: string;
+    children?: ReactNode;
+    /** Keep the children mounted while closed (they are hidden). By default they unmount. */
+    forceMount?: boolean;
+}
+/** The region a `Collapsible` shows and hides. Takes no space while closed. */
+export declare function CollapsibleContent({ className, children, forceMount, ...props }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/patterns/accordion/collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/patterns/accordion/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAKL,KAAK,WAAW,IAAI,eAAe,EACnC,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AAI/B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,eAAe,EACf,YAAY,GAAG,iBAAiB,GAAG,kBAAkB,GAAG,IAAI,GAAG,WAAW,GAAG,UAAU,CACxF;IACC,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAcjH;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAEpE,sFAAsF;AACtF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAEhE;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,UAAU,CAAC;IACnG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,+EAA+E;AAC/E,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAOhH"}

package/dist/patterns/accordion/collapsible.js

@@ -0,0 +1,30 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as s } from "react";
+import { Disclosure as d, Button as a, DisclosureStateContext as p, DisclosurePanel as u } from "react-aria-components";
+import { cx as c } from "../../utils/cn.js";
+import { IsolateFromAccordionGroup as m } from "./accordion.js";
+function E({ isOpen: o, defaultOpen: n, onOpenChange: t, className: i, children: e, ...l }) {
+  return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
+    d,
+    {
+      ...l,
+      isExpanded: o,
+      defaultExpanded: n,
+      onExpandedChange: t,
+      className: i,
+      children: e
+    }
+  ) });
+}
+function b(o) {
+  return /* @__PURE__ */ r(a, { ...o, slot: "trigger" });
+}
+function D({ className: o, children: n, forceMount: t = !1, ...i }) {
+  const e = s(p);
+  return /* @__PURE__ */ r(u, { ...i, className: c("[&[hidden]]:hidden", o), children: t || e != null && e.isExpanded ? n : null });
+}
+export {
+  E as Collapsible,
+  D as CollapsibleContent,
+  b as CollapsibleTrigger
+};

package/dist/patterns/accordion/expandable-card.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export interface ExpandableCardProps {
+    title: string;
+    description: string;
+    /** Rendered in a rounded 32px tile before the title. */
+    icon?: ReactNode;
+    /** Background of the icon tile (any CSS colour). */
+    iconBgColor?: string;
+    /** Initial expanded state when uncontrolled. */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state. */
+    isExpanded?: boolean;
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /** Show the on/off switch in the header. */
+    showToggle?: boolean;
+    /** Initial switch state. */
+    defaultToggled?: boolean;
+    /** Called when the switch changes. Changing it never expands or collapses the card. */
+    onToggle?: (checked: boolean) => void;
+    isToggleDisabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * A bordered card with an icon, title and description that expands to show its children,
+ * with an optional on/off switch in the header. Clicking anywhere on the header expands it;
+ * the chevron is the keyboard-accessible trigger.
+ */
+export declare const ExpandableCard: ({ showToggle, title, description, icon, iconBgColor, defaultExpanded, isExpanded, onExpandedChange, defaultToggled, onToggle, children, className, isToggleDisabled, }: ExpandableCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=expandable-card.d.ts.map

package/dist/patterns/accordion/expandable-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-card.d.ts","sourceRoot":"","sources":["../../../src/patterns/accordion/expandable-card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO1E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,wKAc5B,mBAAmB,4CAuFrB,CAAC"}

package/dist/patterns/accordion/expandable-card.js

@@ -0,0 +1,99 @@
+import { jsx as e, jsxs as t, Fragment as k } from "react/jsx-runtime";
+import { ChevronDown as z } from "@untitledui/icons";
+import { useState as D, useRef as j } from "react";
+import { Disclosure as E, DisclosurePanel as F } from "react-aria-components";
+import { cx as a } from "../../utils/cn.js";
+import { IsolateFromAccordionGroup as I } from "./accordion.js";
+import { Toggle as P } from "../../primitives/toggle/toggle.js";
+import { ButtonUtility as R } from "../../primitives/button/button-utility.js";
+const K = ({
+  showToggle: f = !0,
+  title: o,
+  description: x,
+  icon: n,
+  iconBgColor: g = "var(--color-bg-warning-secondary)",
+  defaultExpanded: p = !1,
+  isExpanded: u,
+  onExpandedChange: h,
+  defaultToggled: v = !0,
+  onToggle: i,
+  children: l,
+  className: b,
+  isToggleDisabled: N = !1
+}) => {
+  const [d, y] = D(v), c = j(null), C = (r) => {
+    y(r), i == null || i(r);
+  };
+  return /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
+    E,
+    {
+      isExpanded: u,
+      defaultExpanded: p,
+      onExpandedChange: h,
+      className: a("bg-white rounded-lg border border-[var(--color-border-secondary)]", b),
+      children: ({ isExpanded: r, state: w }) => /* @__PURE__ */ t(k, { children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "flex items-center gap-4 p-3 cursor-pointer",
+            onClick: (s) => {
+              var m;
+              (m = c.current) != null && m.contains(s.target) || w.toggle();
+            },
+            children: [
+              /* @__PURE__ */ t("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+                n && /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "flex items-center justify-center size-8 rounded-lg shrink-0",
+                    style: { backgroundColor: g },
+                    children: n
+                  }
+                ),
+                /* @__PURE__ */ t("div", { className: "flex flex-col flex-1 min-w-0", children: [
+                  /* @__PURE__ */ e("p", { className: "text-[var(--color-text-secondary)] text-md font-medium leading-6", children: o }),
+                  /* @__PURE__ */ e("p", { className: "text-[var(--color-text-tertiary)] text-sm font-normal leading-5", children: x })
+                ] })
+              ] }),
+              /* @__PURE__ */ t("div", { className: "flex items-center gap-2 shrink-0", children: [
+                f && /* @__PURE__ */ e("div", { onClick: (s) => s.stopPropagation(), children: /* @__PURE__ */ e(
+                  P,
+                  {
+                    size: "sm",
+                    isSelected: d,
+                    onChange: C,
+                    isDisabled: N,
+                    disabledClasses: d ? "bg-brand-solid" : ""
+                  }
+                ) }),
+                /* @__PURE__ */ e("div", { ref: c, className: "contents", children: /* @__PURE__ */ e(
+                  R,
+                  {
+                    slot: "trigger",
+                    size: "xs",
+                    color: "tertiary",
+                    "aria-label": o,
+                    icon: /* @__PURE__ */ e(
+                      z,
+                      {
+                        size: 20,
+                        className: a(
+                          "text-[var(--color-text-quaternary)] transition-transform duration-200",
+                          r && "rotate-180"
+                        )
+                      }
+                    )
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ),
+        l && /* @__PURE__ */ e(F, { className: "[&[hidden]]:hidden", children: /* @__PURE__ */ e("div", { className: a("px-3 pb-3 pt-3", r && "animate-in fade-in duration-200"), children: l }) })
+      ] })
+    }
+  ) });
+};
+export {
+  K as ExpandableCard
+};

package/dist/patterns/accordion/index.d.ts

@@ -0,0 +1,4 @@
+export { Accordion, AccordionGroup, type AccordionProps, type AccordionGroupProps } from './accordion';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, type CollapsibleProps, type CollapsibleTriggerProps, type CollapsibleContentProps, } from './collapsible';
+export { ExpandableCard, type ExpandableCardProps } from './expandable-card';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvG,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,GAC7B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/patterns/table/toolbar/GroupByDropdown.js

@@ -3,9 +3,9 @@ import { useState as p, useEffect as O, useMemo as y } from "react";
 import { cx as R } from "../../../utils/cn.js";
 import { TOOLBAR_ICONS as _ } from "../toolbar-icons.js";
 import { resolveColumnLabel as c } from "./tableToolbarHelpers.js";
-import { RadioGroup as A, RadioButton as S } from "./ToolbarRadio.js";
 import { Dropdown as v } from "../../../primitives/dropdown/dropdown.js";
 import { Button as m } from "../../../primitives/button/button.js";
+import { RadioGroup as A, RadioButton as S } from "../../../primitives/radio/radio.js";
 const E = /* @__PURE__ */ new Set([
   "string",
   "number",

package/dist/patterns/table/toolbar/ToolbarRadio.d.ts

@@ -1,18 +1,6 @@
-import { FC, ReactNode, Ref } from 'react';
-import { RadioGroupProps as AriaRadioGroupProps, RadioProps as AriaRadioProps } from 'react-aria-components';
-interface RadioGroupContextType {
-    size?: "sm" | "md";
-}
-interface RadioButtonProps extends AriaRadioProps {
-    size?: "sm" | "md";
-    label?: ReactNode;
-    ref?: Ref<HTMLLabelElement>;
-}
-export declare const RadioButton: FC<RadioButtonProps>;
-interface RadioGroupProps extends RadioGroupContextType, AriaRadioGroupProps {
-    children: ReactNode;
-    className?: string;
-}
-export declare const RadioGroup: FC<RadioGroupProps>;
-export {};
+/**
+ * @deprecated Internal alias kept so code and tests that import `./ToolbarRadio` keep working.
+ * Import from `@/primitives/radio` instead.
+ */
+export { RadioButton, RadioGroup } from '../../../primitives/radio';
 //# sourceMappingURL=ToolbarRadio.d.ts.map

package/dist/patterns/table/toolbar/ToolbarRadio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarRadio.d.ts","sourceRoot":"","sources":["../../../../src/patterns/table/toolbar/ToolbarRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAGL,KAAK,eAAe,IAAI,mBAAmB,EAC3C,KAAK,UAAU,IAAI,cAAc,EAClC,MAAM,uBAAuB,CAAC;AAG/B,UAAU,qBAAqB;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAwCD,UAAU,gBAAiB,SAAQ,cAAc;IAC/C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA6B5C,CAAC;AAEF,UAAU,eAAgB,SAAQ,qBAAqB,EAAE,mBAAmB;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAM1C,CAAC"}
+{"version":3,"file":"ToolbarRadio.d.ts","sourceRoot":"","sources":["../../../../src/patterns/table/toolbar/ToolbarRadio.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/primitives/radio/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioButton, RadioButtonBase, RadioGroup, type RadioButtonProps, type RadioButtonBaseProps, type RadioGroupProps, type RadioSize, } from './radio';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,eAAe,EACf,UAAU,EACV,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,SAAS,GACf,MAAM,SAAS,CAAC"}

package/dist/primitives/radio/radio.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode, Ref } from 'react';
+import { RadioGroupProps as AriaRadioGroupProps, RadioProps as AriaRadioProps } from 'react-aria-components';
+export type RadioSize = "xs" | "sm" | "md";
+interface RadioGroupContextType {
+    size?: RadioSize;
+}
+export interface RadioButtonBaseProps {
+    /** `xs` and `sm` are a 16px circle, `md` is 20px. */
+    size?: RadioSize;
+    className?: string;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+/**
+ * The circle on its own, for rows that handle selection themselves (menu rows, option cards
+ * built from buttons). Frozen to platform-ui's `base/radio-buttons`.
+ */
+export declare const RadioButtonBase: {
+    ({ className, isFocusVisible, isSelected, isDisabled, size }: RadioButtonBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface RadioButtonProps extends AriaRadioProps {
+    /** Overrides the group's `size` for this radio. */
+    size?: RadioSize;
+    label?: ReactNode;
+    /** Secondary text under the label. */
+    hint?: ReactNode;
+    /**
+     * Replaces the built-in circle and label, for option cards that lay out their own content.
+     * Render `RadioButtonBase` inside it to keep the circle. The option stays a React Aria radio.
+     */
+    children?: AriaRadioProps["children"];
+    ref?: Ref<HTMLLabelElement>;
+}
+/**
+ * A radio option built on React Aria. Use it inside a `RadioGroup`.
+ *
+ * @example
+ * <RadioGroup aria-label="Format" value={format} onChange={setFormat}>
+ *   <RadioButton value="csv" label="CSV" hint="Opens in any spreadsheet" />
+ *   <RadioButton value="xlsx" label="Excel" />
+ * </RadioGroup>
+ */
+export declare const RadioButton: {
+    ({ label, hint, className, size, children, ...ariaRadioProps }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface RadioGroupProps extends RadioGroupContextType, AriaRadioGroupProps {
+    /** Size of every radio in the group, unless a radio sets its own. */
+    size?: RadioSize;
+    children: ReactNode;
+    className?: string;
+}
+/** A React Aria radio group. Stacks its options in a column; pass `className="flex-row"` for a row. */
+export declare const RadioGroup: {
+    ({ children, className, size, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=radio.d.ts.map

package/dist/primitives/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/primitives/radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAGL,KAAK,eAAe,IAAI,mBAAmB,EAC3C,KAAK,UAAU,IAAI,cAAc,EAElC,MAAM,uBAAuB,CAAC;AAG/B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,UAAU,qBAAqB;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAID,MAAM,WAAW,oBAAoB;IACnC,qDAAqD;IACrD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe;kEAAwE,oBAAoB;;CAoBvH,CAAC;AASF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;oEAAmE,gBAAgB;;CAmD1G,CAAC;AAGF,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,EAAE,mBAAmB;IACjF,qEAAqE;IACrE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,uGAAuG;AACvG,eAAO,MAAM,UAAU;8CAAoD,eAAe;;CAMzF,CAAC"}

package/dist/primitives/radio/radio.js

@@ -0,0 +1,75 @@
+import { jsx as i, jsxs as u, Fragment as h } from "react/jsx-runtime";
+import { createContext as N, useContext as v, useId as R } from "react";
+import { RadioGroup as z, Radio as B, Text as w } from "react-aria-components";
+import { cx as a } from "../../utils/cn.js";
+const x = N(null), f = ({ className: e, isFocusVisible: t, isSelected: o, isDisabled: r, size: n = "sm" }) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: a(
+      "flex size-4 min-h-4 min-w-4 cursor-pointer appearance-none items-center justify-center rounded-full bg-primary ring-1 ring-primary ring-inset",
+      n === "md" && "size-5 min-h-5 min-w-5",
+      o && !r && "bg-brand-solid ring-bg-brand-solid",
+      r && "cursor-not-allowed border-disabled bg-disabled_subtle",
+      t && "outline-2 outline-offset-2 outline-focus-ring",
+      e
+    ),
+    children: /* @__PURE__ */ i(
+      "div",
+      {
+        className: a(
+          "size-1.5 rounded-full bg-fg-white opacity-0 transition-inherit-all",
+          n === "md" && "size-2",
+          r && "bg-fg-disabled_subtle",
+          o && "opacity-100"
+        )
+      }
+    )
+  }
+);
+f.displayName = "RadioButtonBase";
+const d = {
+  xs: { root: "gap-2", textWrapper: "", label: "text-xs font-medium", hint: "text-xs" },
+  sm: { root: "gap-2", textWrapper: "", label: "text-sm font-medium", hint: "text-sm" },
+  md: { root: "gap-3", textWrapper: "gap-0.5", label: "text-md font-medium", hint: "text-md" }
+}, G = ({ label: e, hint: t, className: o, size: r, children: n, ...m }) => {
+  const c = v(x), s = r ?? (c == null ? void 0 : c.size) ?? "sm", p = R(), b = e && t && !m["aria-label"] && !m["aria-labelledby"] ? p : void 0;
+  return /* @__PURE__ */ i(
+    B,
+    {
+      "aria-labelledby": b,
+      ...m,
+      className: (l) => a(
+        // `relative` keeps React Aria's hidden input inside the label, so focusing it never scrolls the page.
+        "relative flex items-start",
+        l.isDisabled && "cursor-not-allowed",
+        d[s].root,
+        typeof o == "function" ? o(l) : o
+      ),
+      children: n ?? (({ isSelected: l, isDisabled: g, isFocusVisible: y }) => /* @__PURE__ */ u(h, { children: [
+        /* @__PURE__ */ i(
+          f,
+          {
+            size: s,
+            isSelected: l,
+            isDisabled: g,
+            isFocusVisible: y,
+            className: e || t ? "mt-0.5" : ""
+          }
+        ),
+        (e || t) && /* @__PURE__ */ u("div", { className: a("inline-flex flex-col", d[s].textWrapper), children: [
+          e && /* @__PURE__ */ i("p", { id: p, className: a("text-secondary select-none", d[s].label), children: e }),
+          t && // The description slot sets the input's aria-describedby, so the hint reads as a description.
+          /* @__PURE__ */ i(w, { slot: "description", className: a("text-tertiary", d[s].hint), children: t })
+        ] })
+      ] }))
+    }
+  );
+};
+G.displayName = "RadioButton";
+const W = ({ children: e, className: t, size: o = "sm", ...r }) => /* @__PURE__ */ i(x.Provider, { value: { size: o }, children: /* @__PURE__ */ i(z, { ...r, className: a("flex flex-col gap-4", t), children: e }) });
+W.displayName = "RadioGroup";
+export {
+  G as RadioButton,
+  f as RadioButtonBase,
+  W as RadioGroup
+};

package/dist/primitives/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { TextArea, TextAreaBase, type TextAreaProps, type TextAreaBaseProps } from './textarea';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC"}