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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/patterns/accordion/accordion.d.ts +18 -8
  2. package/dist/patterns/accordion/accordion.d.ts.map +1 -1
  3. package/dist/patterns/accordion/accordion.js +102 -96
  4. package/dist/patterns/accordion/expandable-card.d.ts +8 -2
  5. package/dist/patterns/accordion/expandable-card.d.ts.map +1 -1
  6. package/dist/patterns/accordion/expandable-card.js +58 -54
  7. package/dist/styles/components.css +1 -1
  8. package/package.json +1 -1
package/dist/patterns/accordion/accordion.d.ts CHANGED
@@ -29,27 +29,37 @@ export interface AccordionProps {
29
29
  className?: string;
30
30
  /** Classes for the content wrapper (padding etc.). */
31
31
  childrenClassName?: string;
32
- /** Classes added to the header button while open. */
32
+ /** Classes added to the header while open. */
33
33
  activeTitleClassName?: string;
34
- /** Classes for the header row inside the button. */
34
+ /** Classes for the header row (padding, text size). */
35
35
  headerClassName?: string;
36
- /** Classes for the header button itself (e.g. to drop its bottom border). Applied open or closed. */
36
+ /** Classes for the header itself, the bordered strip around the row (e.g. to drop its bottom border). Applied open or closed. */
37
37
  buttonClassName?: string;
38
+ /** Level of the heading element that wraps the trigger. Defaults to 4. */
39
+ headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
38
40
  /** `true` (default) shows a rotating chevron; `false` shows plus / minus. */
39
41
  showToggle?: boolean;
40
42
  /** Set false to hide the built-in chevron / plus-minus indicator entirely (caller renders its own). */
41
43
  showIndicator?: boolean;
42
- /** Rendered before the expand/collapse indicator (e.g. a row actions menu). Clicks do not toggle the accordion. */
44
+ /**
45
+ * Rendered before the title, outside the trigger button (e.g. a select-all checkbox).
46
+ * Interactive content belongs here, not in `title`: a button cannot contain other controls.
47
+ */
48
+ headerStart?: ReactNode;
49
+ /** Rendered before the expand/collapse indicator, outside the trigger button (e.g. a row actions menu). */
43
50
  headerActions?: ReactNode;
44
51
  /** When true, content mounts only while open (and for the length of the close animation). */
45
52
  lazyMount?: boolean;
46
53
  }
47
54
  /**
48
- * A collapsible section: a full-width header button over a panel that slides open
49
- * (grid-rows 0fr → 1fr, 300ms) and fades in. Built on React Aria `Disclosure`, so the header
50
- * is a real button with `aria-expanded` / `aria-controls`, and the panel is labelled by it.
55
+ * A collapsible section: a full-width header over a panel that slides open (grid-rows
56
+ * 0fr → 1fr, 300ms) and fades in. Built on React Aria `Disclosure`, following the WAI-ARIA
57
+ * accordion pattern: the title is a button (`aria-expanded` / `aria-controls`) inside a
58
+ * heading, and the panel is labelled by it. The button's hit area is stretched over the whole
59
+ * header, so a click anywhere on it toggles; `headerStart` and `headerActions` sit above that
60
+ * area as siblings of the button, so their clicks never toggle and the markup stays valid.
51
61
  */
52
- 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;
62
+ export declare const Accordion: ({ id, children, title, titleIcon, subtitle, defaultOpen, isOpen, onOpenChange, isDisabled, className, childrenClassName, activeTitleClassName, headerClassName, buttonClassName, headingLevel, showToggle, showIndicator, headerStart, headerActions, lazyMount, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
53
63
  export interface AccordionGroupProps {
54
64
  /** Initially open item (single mode). */
55
65
  defaultOpenId?: string;
package/dist/patterns/accordion/accordion.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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,8CAA8C;IAC9C,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iIAAiI;IACjI,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,6EAA6E;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uGAAuG;IACvG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2GAA2G;IAC3G,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6FAA6F;IAC7F,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,GAAI,oQAqBvB,cAAc,4CA4EhB,CAAC;AAqDF,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 CHANGED
@@ -1,151 +1,157 @@
1
- import { jsx as o, jsxs as w, Fragment as A } from "react/jsx-runtime";
2
- import { ChevronDown as D, Minus as G, Plus as M } from "@untitledui/icons";
3
- import { useControlledState as O } from "@react-stately/utils";
4
- import { useContext as j, useMemo as q, useState as K, useEffect as W } from "react";
5
- import { DisclosureGroupStateContext as S, Disclosure as F, Button as _, DisclosurePanel as b } from "react-aria-components";
6
- import { cx as d } from "../../utils/cn.js";
7
- const B = 300, I = ({ children: r }) => /* @__PURE__ */ o(S.Provider, { value: null, children: r }), U = ({
1
+ import { jsx as e, jsxs as C, Fragment as G } from "react/jsx-runtime";
2
+ import { ChevronDown as W, Minus as j, Plus as q } from "@untitledui/icons";
3
+ import { useControlledState as K } from "@react-stately/utils";
4
+ import { useContext as M, useMemo as z, useState as D, useEffect as F } from "react";
5
+ import { DisclosureGroupStateContext as S, Disclosure as _, Button as B, DisclosurePanel as H } from "react-aria-components";
6
+ import { cx as a } from "../../utils/cn.js";
7
+ const R = 300, b = ({ children: r }) => /* @__PURE__ */ e(S.Provider, { value: null, children: r }), Y = ({
8
8
  id: r,
9
- children: t,
9
+ children: o,
10
10
  title: n,
11
- titleIcon: u,
12
- subtitle: e,
11
+ titleIcon: d,
12
+ subtitle: t,
13
13
  defaultOpen: s,
14
- isOpen: a,
15
- onOpenChange: x,
16
- isDisabled: p,
14
+ isOpen: l,
15
+ onOpenChange: f,
16
+ isDisabled: m,
17
17
  className: i,
18
- childrenClassName: l,
19
- activeTitleClassName: N,
20
- headerClassName: y,
21
- buttonClassName: m,
22
- showToggle: c = !0,
23
- showIndicator: f = !0,
24
- headerActions: h,
25
- lazyMount: T = !1
18
+ childrenClassName: c,
19
+ activeTitleClassName: x,
20
+ headerClassName: N,
21
+ buttonClassName: p,
22
+ headingLevel: u = 4,
23
+ showToggle: h = !0,
24
+ showIndicator: w = !0,
25
+ headerStart: T,
26
+ headerActions: k,
27
+ lazyMount: A = !1
26
28
  }) => {
27
- const P = j(S), g = P != null && r != null, k = /* @__PURE__ */ o(
28
- F,
29
+ const I = M(S), v = I != null && r != null, P = `h${u}`, y = m ? "cursor-not-allowed" : "cursor-pointer", O = /* @__PURE__ */ e(
30
+ _,
29
31
  {
30
- id: g ? r : void 0,
31
- isExpanded: g ? void 0 : a,
32
- defaultExpanded: g ? void 0 : s,
33
- onExpandedChange: x,
34
- isDisabled: p,
35
- className: d("rounded-md", i),
36
- children: ({ isExpanded: v }) => /* @__PURE__ */ w(A, { children: [
37
- /* @__PURE__ */ o(
38
- _,
32
+ id: v ? r : void 0,
33
+ isExpanded: v ? void 0 : l,
34
+ defaultExpanded: v ? void 0 : s,
35
+ onExpandedChange: f,
36
+ isDisabled: m,
37
+ className: a("rounded-md", i),
38
+ children: ({ isExpanded: g }) => /* @__PURE__ */ C(G, { children: [
39
+ /* @__PURE__ */ e(
40
+ "div",
39
41
  {
40
- slot: "trigger",
41
- className: d(
42
- "flex flex-col items-start w-full cursor-pointer gap-3 text-left border-b border-secondary",
43
- m,
44
- v && N
42
+ className: a(
43
+ "relative flex flex-col items-start w-full gap-3 text-left border-b border-secondary",
44
+ y,
45
+ p,
46
+ g && x
45
47
  ),
46
- children: /* @__PURE__ */ w("div", { className: d("flex items-center w-full cursor-pointer py-3", y), children: [
47
- /* @__PURE__ */ w("div", { className: "flex flex-1 gap-3 justify-start items-center", children: [
48
- u,
49
- typeof n == "string" ? /* @__PURE__ */ o("h4", { className: "text-[16px]", children: n }) : n,
50
- e && /* @__PURE__ */ o("span", { className: "text-sm text-secondary", children: e })
51
- ] }),
52
- h ? /* @__PURE__ */ o(
53
- "div",
48
+ children: /* @__PURE__ */ C("div", { className: a("flex items-center w-full py-3", y, N), children: [
49
+ T ? /* @__PURE__ */ e("div", { className: "relative z-10 mr-3 flex shrink-0 items-center", children: T }) : null,
50
+ /* @__PURE__ */ e(P, { className: "flex flex-1", children: /* @__PURE__ */ C(
51
+ B,
54
52
  {
55
- className: "p-1.5 mx-2 flex shrink-0 items-center",
56
- onClick: (C) => C.stopPropagation(),
57
- onPointerDown: (C) => C.stopPropagation(),
58
- children: h
53
+ slot: "trigger",
54
+ className: a(
55
+ "flex flex-1 gap-3 justify-start items-center text-left outline-none after:absolute after:inset-0 after:rounded-[inherit]",
56
+ "data-[focus-visible]:outline-none data-[focus-visible]:after:outline-2 data-[focus-visible]:after:-outline-offset-2 data-[focus-visible]:after:outline-focus-ring",
57
+ y
58
+ ),
59
+ children: [
60
+ d,
61
+ typeof n == "string" ? /* @__PURE__ */ e("span", { className: "text-[16px]", children: n }) : n,
62
+ t && /* @__PURE__ */ e("span", { className: "text-sm text-secondary", children: t })
63
+ ]
59
64
  }
60
- ) : null,
61
- f ? c ? /* @__PURE__ */ o(
65
+ ) }),
66
+ k ? /* @__PURE__ */ e("div", { className: "relative z-10 p-1.5 mx-2 flex shrink-0 items-center", children: k }) : null,
67
+ w ? h ? /* @__PURE__ */ e(
62
68
  "span",
63
69
  {
64
- className: d(
70
+ "aria-hidden": "true",
71
+ className: a(
65
72
  "p-1 ml-auto shrink-0 transform transition-transform duration-300",
66
- v ? "rotate-180" : "rotate-0"
73
+ g ? "rotate-180" : "rotate-0"
67
74
  ),
68
- children: /* @__PURE__ */ o(D, { strokeWidth: 1.25, color: "var(--color-fg-quaternary)" })
75
+ children: /* @__PURE__ */ e(W, { strokeWidth: 1.25, color: "var(--color-fg-quaternary)" })
69
76
  }
70
- ) : /* @__PURE__ */ w("span", { className: "ml-auto transform transition-transform duration-300", children: [
71
- 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)" }),
72
- " "
73
- ] }) : null
77
+ ) : /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "ml-auto", children: g ? /* @__PURE__ */ e(j, { size: 16, strokeWidth: 1.25, color: "var(--color-fg-quaternary)" }) : /* @__PURE__ */ e(q, { size: 16, strokeWidth: 1.25, color: "var(--color-fg-quaternary)" }) }) : null
74
78
  ] })
75
79
  }
76
80
  ),
77
- /* @__PURE__ */ o(R, { isExpanded: v, lazyMount: T, childrenClassName: l, children: t })
81
+ /* @__PURE__ */ e($, { isExpanded: g, lazyMount: A, childrenClassName: c, children: o })
78
82
  ] })
79
83
  }
80
84
  );
81
- return P != null && !g ? /* @__PURE__ */ o(I, { children: k }) : k;
82
- }, R = ({
85
+ return I != null && !v ? /* @__PURE__ */ e(b, { children: O }) : O;
86
+ }, $ = ({
83
87
  isExpanded: r,
84
- lazyMount: t,
88
+ lazyMount: o,
85
89
  childrenClassName: n,
86
- children: u
90
+ children: d
87
91
  }) => {
88
- const [e, s] = K(!t || r);
89
- return W(() => {
90
- if (!t) return;
92
+ const [t, s] = D(r);
93
+ F(() => {
94
+ if (!o) return;
91
95
  if (r) {
92
96
  s(!0);
93
97
  return;
94
98
  }
95
- const a = window.setTimeout(() => s(!1), B);
96
- return () => window.clearTimeout(a);
97
- }, [r, t]), /* @__PURE__ */ o(
98
- b,
99
+ const f = window.setTimeout(() => s(!1), R);
100
+ return () => window.clearTimeout(f);
101
+ }, [r, o]);
102
+ const l = !o || r || t;
103
+ return /* @__PURE__ */ e(
104
+ H,
99
105
  {
100
- className: d(
106
+ className: a(
101
107
  "grid motion-safe:transition-[grid-template-rows] motion-safe:duration-300 motion-safe:ease-in-out will-change-[grid-template-rows]",
102
108
  r ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
103
109
  ),
104
- children: /* @__PURE__ */ o("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ o(
110
+ children: /* @__PURE__ */ e("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ e(
105
111
  "div",
106
112
  {
107
- className: d(
113
+ className: a(
108
114
  "pt-4 pb-1 motion-safe:transition-opacity motion-safe:duration-200 motion-safe:ease-out",
109
115
  r ? "opacity-100" : "opacity-0",
110
116
  n
111
117
  ),
112
- children: /* @__PURE__ */ o(I, { children: e && u })
118
+ children: /* @__PURE__ */ e(b, { children: l && d })
113
119
  }
114
120
  ) })
115
121
  }
116
122
  );
117
123
  };
118
- function V({
124
+ function Z({
119
125
  defaultOpenId: r,
120
- defaultOpenIds: t,
126
+ defaultOpenIds: o,
121
127
  openIds: n,
122
- onOpenIdsChange: u,
123
- multiple: e = !1,
128
+ onOpenIdsChange: d,
129
+ multiple: t = !1,
124
130
  collapsible: s = !1,
125
- isDisabled: a = !1,
126
- children: x
131
+ isDisabled: l = !1,
132
+ children: f
127
133
  }) {
128
- const p = t ?? (r != null ? [r] : []), [i, l] = O(
134
+ const m = o ?? (r != null ? [r] : []), [i, c] = K(
129
135
  n,
130
- e ? p : p.slice(0, 1),
131
- u
132
- ), N = q(() => {
133
- const y = (m) => {
134
- const c = String(m), f = i.includes(c);
135
- f && !s || l(e ? f ? i.filter((h) => h !== c) : [...i, c] : f ? [] : [c]);
136
+ t ? m : m.slice(0, 1),
137
+ d
138
+ ), x = z(() => {
139
+ const N = (p) => {
140
+ const u = String(p), h = i.includes(u);
141
+ h && !s || c(t ? h ? i.filter((w) => w !== u) : [...i, u] : h ? [] : [u]);
136
142
  };
137
143
  return {
138
- allowsMultipleExpanded: e,
139
- isDisabled: a,
144
+ allowsMultipleExpanded: t,
145
+ isDisabled: l,
140
146
  expandedKeys: new Set(i),
141
- toggleKey: y,
142
- setExpandedKeys: (m) => l(Array.from(m, String))
147
+ toggleKey: N,
148
+ setExpandedKeys: (p) => c(Array.from(p, String))
143
149
  };
144
- }, [s, a, e, i, l]);
145
- return /* @__PURE__ */ o(S.Provider, { value: N, children: x });
150
+ }, [s, l, t, i, c]);
151
+ return /* @__PURE__ */ e(S.Provider, { value: x, children: f });
146
152
  }
147
153
  export {
148
- U as Accordion,
149
- V as AccordionGroup,
150
- I as IsolateFromAccordionGroup
154
+ Y as Accordion,
155
+ Z as AccordionGroup,
156
+ b as IsolateFromAccordionGroup
151
157
  };
package/dist/patterns/accordion/expandable-card.d.ts CHANGED
@@ -13,11 +13,17 @@ export interface ExpandableCardProps {
13
13
  onExpandedChange?: (isExpanded: boolean) => void;
14
14
  /** Show the on/off switch in the header. */
15
15
  showToggle?: boolean;
16
- /** Initial switch state. */
16
+ /** Initial switch state when uncontrolled. */
17
17
  defaultToggled?: boolean;
18
+ /** Controlled switch state. */
19
+ isToggled?: boolean;
18
20
  /** Called when the switch changes. Changing it never expands or collapses the card. */
19
21
  onToggle?: (checked: boolean) => void;
20
22
  isToggleDisabled?: boolean;
23
+ /** Accessible name of the switch. Defaults to `Enable <title>`. */
24
+ toggleLabel?: string;
25
+ /** Stops the card from expanding or collapsing. */
26
+ isDisabled?: boolean;
21
27
  children?: ReactNode;
22
28
  className?: string;
23
29
  }
@@ -26,5 +32,5 @@ export interface ExpandableCardProps {
26
32
  * with an optional on/off switch in the header. Clicking anywhere on the header expands it;
27
33
  * the chevron is the keyboard-accessible trigger.
28
34
  */
29
- export declare const ExpandableCard: ({ showToggle, title, description, icon, iconBgColor, defaultExpanded, isExpanded, onExpandedChange, defaultToggled, onToggle, children, className, isToggleDisabled, }: ExpandableCardProps) => import("react/jsx-runtime").JSX.Element;
35
+ export declare const ExpandableCard: ({ showToggle, title, description, icon, iconBgColor, defaultExpanded, isExpanded, onExpandedChange, defaultToggled, isToggled: controlledIsToggled, onToggle, toggleLabel, isDisabled, children, className, isToggleDisabled, }: ExpandableCardProps) => import("react/jsx-runtime").JSX.Element;
30
36
  //# sourceMappingURL=expandable-card.d.ts.map
package/dist/patterns/accordion/expandable-card.d.ts.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"expandable-card.d.ts","sourceRoot":"","sources":["../../../src/patterns/accordion/expandable-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU1E,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,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,iOAiB5B,mBAAmB,4CAoFrB,CAAC"}
package/dist/patterns/accordion/expandable-card.js CHANGED
@@ -1,85 +1,89 @@
1
- import { jsx as e, jsxs as t, Fragment as k } from "react/jsx-runtime";
2
- import { ChevronDown as z } from "@untitledui/icons";
3
- import { useState as D, useRef as j } from "react";
4
- import { Disclosure as E, DisclosurePanel as F } from "react-aria-components";
5
- import { cx as a } from "../../utils/cn.js";
6
- import { IsolateFromAccordionGroup as I } from "./accordion.js";
7
- import { Toggle as P } from "../../primitives/toggle/toggle.js";
8
- import { ButtonUtility as R } from "../../primitives/button/button-utility.js";
9
- const K = ({
10
- showToggle: f = !0,
11
- title: o,
12
- description: x,
13
- icon: n,
14
- iconBgColor: g = "var(--color-bg-warning-secondary)",
15
- defaultExpanded: p = !1,
16
- isExpanded: u,
1
+ import { jsx as e, jsxs as o, Fragment as T } from "react/jsx-runtime";
2
+ import { ChevronDown as j } from "@untitledui/icons";
3
+ import { useControlledState as E } from "@react-stately/utils";
4
+ import { useRef as A, Children as D } from "react";
5
+ import { Disclosure as F, DisclosurePanel as I } from "react-aria-components";
6
+ import { cx as t } from "../../utils/cn.js";
7
+ import { IsolateFromAccordionGroup as P } from "./accordion.js";
8
+ import { Toggle as R } from "../../primitives/toggle/toggle.js";
9
+ import { ButtonUtility as S } from "../../primitives/button/button-utility.js";
10
+ const q = (s) => D.toArray(s).some((r) => r !== ""), O = ({
11
+ showToggle: s = !0,
12
+ title: r,
13
+ description: f,
14
+ icon: i,
15
+ iconBgColor: p = "var(--color-bg-warning-secondary)",
16
+ defaultExpanded: u = !1,
17
+ isExpanded: x,
17
18
  onExpandedChange: h,
18
- defaultToggled: v = !0,
19
- onToggle: i,
19
+ defaultToggled: b = !0,
20
+ isToggled: N,
21
+ onToggle: y,
22
+ toggleLabel: v,
23
+ isDisabled: a = !1,
20
24
  children: l,
21
- className: b,
22
- isToggleDisabled: N = !1
25
+ className: C,
26
+ isToggleDisabled: k = !1
23
27
  }) => {
24
- const [d, y] = D(v), c = j(null), C = (r) => {
25
- y(r), i == null || i(r);
26
- };
27
- return /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
28
- E,
28
+ const [d, w] = E(N, b, y), c = A(null);
29
+ return /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
30
+ F,
29
31
  {
30
- isExpanded: u,
31
- defaultExpanded: p,
32
+ isExpanded: x,
33
+ defaultExpanded: u,
32
34
  onExpandedChange: h,
33
- className: a("bg-white rounded-lg border border-[var(--color-border-secondary)]", b),
34
- children: ({ isExpanded: r, state: w }) => /* @__PURE__ */ t(k, { children: [
35
- /* @__PURE__ */ t(
35
+ isDisabled: a,
36
+ className: t("bg-primary rounded-lg border border-secondary", C),
37
+ children: ({ isExpanded: m, state: z }) => /* @__PURE__ */ o(T, { children: [
38
+ /* @__PURE__ */ o(
36
39
  "div",
37
40
  {
38
- className: "flex items-center gap-4 p-3 cursor-pointer",
39
- onClick: (s) => {
40
- var m;
41
- (m = c.current) != null && m.contains(s.target) || w.toggle();
41
+ className: t("flex items-center gap-4 p-3", a ? "cursor-not-allowed" : "cursor-pointer"),
42
+ onClick: (n) => {
43
+ var g;
44
+ a || (g = c.current) != null && g.contains(n.target) || z.toggle();
42
45
  },
43
46
  children: [
44
- /* @__PURE__ */ t("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
45
- n && /* @__PURE__ */ e(
47
+ /* @__PURE__ */ o("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
48
+ i && /* @__PURE__ */ e(
46
49
  "div",
47
50
  {
48
51
  className: "flex items-center justify-center size-8 rounded-lg shrink-0",
49
- style: { backgroundColor: g },
50
- children: n
52
+ style: { backgroundColor: p },
53
+ children: i
51
54
  }
52
55
  ),
53
- /* @__PURE__ */ t("div", { className: "flex flex-col flex-1 min-w-0", children: [
54
- /* @__PURE__ */ e("p", { className: "text-[var(--color-text-secondary)] text-md font-medium leading-6", children: o }),
55
- /* @__PURE__ */ e("p", { className: "text-[var(--color-text-tertiary)] text-sm font-normal leading-5", children: x })
56
+ /* @__PURE__ */ o("div", { className: "flex flex-col flex-1 min-w-0", children: [
57
+ /* @__PURE__ */ e("p", { className: "text-secondary text-md font-medium leading-6", children: r }),
58
+ /* @__PURE__ */ e("p", { className: "text-tertiary text-sm font-normal leading-5", children: f })
56
59
  ] })
57
60
  ] }),
58
- /* @__PURE__ */ t("div", { className: "flex items-center gap-2 shrink-0", children: [
59
- f && /* @__PURE__ */ e("div", { onClick: (s) => s.stopPropagation(), children: /* @__PURE__ */ e(
60
- P,
61
+ /* @__PURE__ */ o("div", { className: "flex items-center gap-2 shrink-0", children: [
62
+ s && /* @__PURE__ */ e("div", { onClick: (n) => n.stopPropagation(), children: /* @__PURE__ */ e(
63
+ R,
61
64
  {
62
65
  size: "sm",
66
+ "aria-label": v ?? `Enable ${r}`,
63
67
  isSelected: d,
64
- onChange: C,
65
- isDisabled: N,
68
+ onChange: w,
69
+ isDisabled: k,
66
70
  disabledClasses: d ? "bg-brand-solid" : ""
67
71
  }
68
72
  ) }),
69
73
  /* @__PURE__ */ e("div", { ref: c, className: "contents", children: /* @__PURE__ */ e(
70
- R,
74
+ S,
71
75
  {
72
76
  slot: "trigger",
73
77
  size: "xs",
74
78
  color: "tertiary",
75
- "aria-label": o,
79
+ "aria-label": r,
76
80
  icon: /* @__PURE__ */ e(
77
- z,
81
+ j,
78
82
  {
79
83
  size: 20,
80
- className: a(
81
- "text-[var(--color-text-quaternary)] transition-transform duration-200",
82
- r && "rotate-180"
84
+ className: t(
85
+ "text-quaternary transition-transform duration-200",
86
+ m && "rotate-180"
83
87
  )
84
88
  }
85
89
  )
@@ -89,11 +93,11 @@ const K = ({
89
93
  ]
90
94
  }
91
95
  ),
92
- 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 }) })
96
+ q(l) && /* @__PURE__ */ e(I, { className: "[&[hidden]]:hidden", children: /* @__PURE__ */ e("div", { className: t("px-3 pb-3 pt-3", m && "animate-in fade-in duration-200"), children: l }) })
93
97
  ] })
94
98
  }
95
99
  ) });
96
100
  };
97
101
  export {
98
- K as ExpandableCard
102
+ O as ExpandableCard
99
103
  };