@pibit.ai/cure-design-system 0.6.8 → 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/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"}

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

@@ -0,0 +1,56 @@
+import { ReactNode, Ref } from 'react';
+import { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+export interface TextAreaBaseProps extends AriaTextAreaProps {
+    ref?: Ref<HTMLTextAreaElement>;
+    /**
+     * TextArea size.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+}
+/** The bare `<textarea>`, for use inside your own React Aria `TextField`. */
+export declare const TextAreaBase: {
+    ({ className, style, size, ...props }: TextAreaBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface TextAreaProps extends AriaTextFieldProps {
+    /** Label text for the textarea. */
+    label?: string;
+    /** Helper text below the textarea. Shown as the error message when `isInvalid`. */
+    hint?: ReactNode;
+    /** Tooltip shown after the label. */
+    tooltip?: string;
+    /** Class name for the `<textarea>` itself (`className` styles the field wrapper). */
+    textAreaClassName?: TextAreaBaseProps["className"];
+    /** Ref for the field wrapper. */
+    ref?: Ref<HTMLDivElement>;
+    /** Ref for the `<textarea>`, e.g. to measure it for auto-grow. */
+    textAreaRef?: TextAreaBaseProps["ref"];
+    /** Hide the required asterisk on the label. */
+    hideRequiredIndicator?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Visible height in rows. */
+    rows?: number;
+    /** Visible width in columns. */
+    cols?: number;
+    /**
+     * TextArea size.
+     * @default "sm"
+     */
+    size?: TextAreaBaseProps["size"];
+}
+/**
+ * A multi-line text field built on React Aria `TextField` + `TextArea`, with the
+ * same label and hint as `Input`. Validation goes through `isInvalid` + `hint`;
+ * a character count is the caller's to render.
+ *
+ * @example
+ * <TextArea label="Description" rows={4} value={value} onChange={setValue} />
+ * <TextArea label="Reason" isRequired isInvalid hint="Required" />
+ */
+export declare const TextArea: {
+    ({ label, hint, tooltip, textAreaRef, hideRequiredIndicator, textAreaClassName, placeholder, className, rows, cols, size, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/primitives/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,cAAc,IAAI,kBAAkB,EACrC,MAAM,uBAAuB,CAAC;AA+C/B,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,6EAA6E;AAC7E,eAAO,MAAM,YAAY;2CAKtB,iBAAiB;;CAkCnB,CAAC;AAIF,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qFAAqF;IACrF,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACnD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,kEAAkE;IAClE,WAAW,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACvC,+CAA+C;IAC/C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;CAClC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;0IAalB,aAAa;;CAsCf,CAAC"}

package/dist/primitives/textarea/textarea.js

@@ -0,0 +1,107 @@
+import { jsx as i, jsxs as h, Fragment as y } from "react/jsx-runtime";
+import { TextField as w, TextArea as k } from "react-aria-components";
+import { cx as x } from "../../utils/cn.js";
+import { HintText as z } from "../input/hint-text.js";
+import { Label as T } from "../input/label.js";
+const n = (r) => `url(data:image/svg+xml;base64,${btoa(
+  `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2L2 10" stroke="${r}" stroke-linecap="round"/><path d="M11 7L7 11" stroke="${r}" stroke-linecap="round"/></svg>`
+)})`, A = {
+  "--resize-handle-bg": n("#D5D7DA"),
+  "--resize-handle-bg-dark": n("#373A41")
+}, v = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-md"
+}, D = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm"
+}, B = {
+  sm: "p-[7px]",
+  md: "py-2 px-3",
+  lg: "py-3 px-3.5"
+}, m = ({
+  className: r,
+  style: t,
+  size: s = "sm",
+  ...o
+}) => /* @__PURE__ */ i(
+  k,
+  {
+    ...o,
+    style: (e) => ({
+      ...A,
+      ...typeof t == "function" ? t(e) : t
+    }),
+    className: (e) => x(
+      "w-full scroll-py-3 rounded-lg bg-primary border border-secondary transition duration-100 ease-linear placeholder:text-placeholder_subtle autofill:rounded-lg autofill:text-primary focus:outline-hidden text-primary",
+      v[s],
+      B[s],
+      // Resize handle
+      "[&::-webkit-resizer]:bg-(image:--resize-handle-bg) [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-(image:--resize-handle-bg-dark)",
+      e.isFocused && !e.isDisabled && "border-brand",
+      e.isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled border-disabled",
+      // Frozen to platform-ui on purpose: an unfocused invalid textarea keeps its
+      // normal border, and the error shows in the hint text. The red ring only
+      // appears on focus. Unlike `Input`, there is no `border-error`. platform-ui
+      // callers that want a red border at rest (the inline-edit cells) pass
+      // `ring-2 ring-error` through `textAreaClassName`. Bringing this in line
+      // with `Input` is a visible change, so it is left for a design decision.
+      e.isInvalid && "ring-error_subtle",
+      e.isInvalid && e.isFocused && "ring-2 ring-error",
+      typeof r == "function" ? r(e) : r
+    )
+  }
+);
+m.displayName = "TextAreaBase";
+const F = ({
+  label: r,
+  hint: t,
+  tooltip: s,
+  textAreaRef: o,
+  hideRequiredIndicator: e,
+  textAreaClassName: g,
+  placeholder: p,
+  className: l,
+  rows: b,
+  cols: c,
+  size: d = "sm",
+  ...u
+}) => /* @__PURE__ */ i(
+  w,
+  {
+    ...u,
+    className: (a) => x(
+      "group flex h-max w-full flex-col items-start justify-start gap-1.5",
+      typeof l == "function" ? l(a) : l
+    ),
+    children: ({ isInvalid: a, isRequired: f }) => /* @__PURE__ */ h(y, { children: [
+      r && /* @__PURE__ */ i(
+        T,
+        {
+          className: D[d],
+          isRequired: f && !e,
+          tooltip: s,
+          children: r
+        }
+      ),
+      /* @__PURE__ */ i(
+        m,
+        {
+          placeholder: p,
+          className: g,
+          ref: o,
+          rows: b,
+          cols: c,
+          size: d
+        }
+      ),
+      t && /* @__PURE__ */ i(z, { isInvalid: a, children: t })
+    ] })
+  }
+);
+F.displayName = "TextArea";
+export {
+  F as TextArea,
+  m as TextAreaBase
+};