@pibit.ai/cure-design-system 0.3.21 → 0.3.24

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 (68) hide show
  1. package/dist/index.d.ts +3 -1
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +157 -136
  4. package/dist/patterns/table/TableWrapper.d.ts.map +1 -1
  5. package/dist/patterns/table/TableWrapper.js +330 -323
  6. package/dist/patterns/table/index.d.ts +5 -2
  7. package/dist/patterns/table/index.d.ts.map +1 -1
  8. package/dist/patterns/table/integrateTableUndoRedo.d.ts +41 -0
  9. package/dist/patterns/table/integrateTableUndoRedo.d.ts.map +1 -0
  10. package/dist/patterns/table/integrateTableUndoRedo.js +63 -0
  11. package/dist/patterns/table/storyHelpers/useMockTableState.d.ts +3 -1
  12. package/dist/patterns/table/storyHelpers/useMockTableState.d.ts.map +1 -1
  13. package/dist/patterns/table/table.d.ts +2 -1
  14. package/dist/patterns/table/table.d.ts.map +1 -1
  15. package/dist/patterns/table/table.js +181 -155
  16. package/dist/patterns/table/tableUndoRedo.d.ts +38 -0
  17. package/dist/patterns/table/tableUndoRedo.d.ts.map +1 -0
  18. package/dist/patterns/table/tableUndoRedo.js +147 -0
  19. package/dist/patterns/table/toolbar/AlignDropdown.d.ts.map +1 -1
  20. package/dist/patterns/table/toolbar/AlignDropdown.js +5 -11
  21. package/dist/patterns/table/toolbar/ColumnHeaderMenu.d.ts +4 -0
  22. package/dist/patterns/table/toolbar/ColumnHeaderMenu.d.ts.map +1 -1
  23. package/dist/patterns/table/toolbar/ColumnHeaderMenu.js +81 -77
  24. package/dist/patterns/table/toolbar/GroupByDropdown.d.ts.map +1 -1
  25. package/dist/patterns/table/toolbar/GroupByDropdown.js +48 -43
  26. package/dist/patterns/table/toolbar/TableToolbar.d.ts +12 -1
  27. package/dist/patterns/table/toolbar/TableToolbar.d.ts.map +1 -1
  28. package/dist/patterns/table/toolbar/TableToolbar.js +164 -114
  29. package/dist/patterns/table/toolbar/index.d.ts +2 -2
  30. package/dist/patterns/table/toolbar/index.d.ts.map +1 -1
  31. package/dist/patterns/table/toolbar/tableToolbarHelpers.d.ts +10 -1
  32. package/dist/patterns/table/toolbar/tableToolbarHelpers.d.ts.map +1 -1
  33. package/dist/patterns/table/toolbar/tableToolbarHelpers.js +116 -116
  34. package/dist/patterns/table/toolbar/useUndoRedoShortcuts.d.ts +9 -0
  35. package/dist/patterns/table/toolbar/useUndoRedoShortcuts.d.ts.map +1 -0
  36. package/dist/patterns/table/toolbar/useUndoRedoShortcuts.js +21 -0
  37. package/dist/patterns/table/types.d.ts +5 -1
  38. package/dist/patterns/table/types.d.ts.map +1 -1
  39. package/dist/patterns/table/useTableUndoRedo.d.ts +41 -0
  40. package/dist/patterns/table/useTableUndoRedo.d.ts.map +1 -0
  41. package/dist/patterns/table/useTableUndoRedo.js +168 -0
  42. package/dist/primitives/badge/badge.js +5 -5
  43. package/dist/primitives/input/input.d.ts +1 -1
  44. package/dist/primitives/input/input.d.ts.map +1 -1
  45. package/dist/primitives/input/input.js +63 -62
  46. package/dist/primitives/multi-chips-select/MultiChipsSelect.d.ts +20 -0
  47. package/dist/primitives/multi-chips-select/MultiChipsSelect.d.ts.map +1 -0
  48. package/dist/primitives/multi-chips-select/MultiChipsSelect.js +233 -0
  49. package/dist/primitives/multi-chips-select/index.d.ts +3 -0
  50. package/dist/primitives/multi-chips-select/index.d.ts.map +1 -0
  51. package/dist/primitives/multi-chips-select/tagKeyFromLabel.d.ts +3 -0
  52. package/dist/primitives/multi-chips-select/tagKeyFromLabel.d.ts.map +1 -0
  53. package/dist/primitives/multi-chips-select/tagKeyFromLabel.js +6 -0
  54. package/dist/primitives/select/ExpandableSearchInput.d.ts +3 -1
  55. package/dist/primitives/select/ExpandableSearchInput.d.ts.map +1 -1
  56. package/dist/primitives/select/ExpandableSearchInput.js +100 -78
  57. package/dist/primitives/select/SearchInput.d.ts +5 -1
  58. package/dist/primitives/select/SearchInput.d.ts.map +1 -1
  59. package/dist/primitives/select/SearchInput.js +101 -80
  60. package/dist/primitives/select/combobox.d.ts.map +1 -1
  61. package/dist/primitives/select/combobox.js +48 -47
  62. package/dist/primitives/select/multi-select.d.ts.map +1 -1
  63. package/dist/primitives/select/multi-select.js +50 -49
  64. package/dist/styles/components.css +1 -1
  65. package/dist/utils/keyboard-shortcut.d.ts +4 -0
  66. package/dist/utils/keyboard-shortcut.d.ts.map +1 -0
  67. package/dist/utils/keyboard-shortcut.js +29 -0
  68. package/package.json +1 -1
@@ -0,0 +1,3 @@
1
+ /** Lowercase label and collapse whitespace to single underscores (other characters unchanged). */
2
+ export declare function tagKeyFromLabel(label: string): string;
3
+ //# sourceMappingURL=tagKeyFromLabel.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tagKeyFromLabel.d.ts","sourceRoot":"","sources":["../../../src/primitives/multi-chips-select/tagKeyFromLabel.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAErD"}
@@ -0,0 +1,6 @@
1
+ function r(e) {
2
+ return e.trim().toLowerCase().replace(/\s+/g, "_");
3
+ }
4
+ export {
5
+ r as tagKeyFromLabel
6
+ };
@@ -12,8 +12,10 @@ export interface ExpandableSearchInputProps {
12
12
  "aria-label"?: string;
13
13
  /** When false, the search field stays expanded. Default true. */
14
14
  collapsible?: boolean;
15
+ /** When true, registers the platform-specific primary shortcut to expand and focus the search input. */
16
+ shortcut?: boolean;
15
17
  /** When true, the control is greyed out and can't be expanded or typed in. */
16
18
  isDisabled?: boolean;
17
19
  }
18
- export declare const ExpandableSearchInput: ({ size, placeholder, value, onChange, onBlur, onFocus, onKeyDown, className, expandedWidth, "aria-label": ariaLabel, collapsible, isDisabled, }: ExpandableSearchInputProps) => import("react/jsx-runtime").JSX.Element;
20
+ export declare const ExpandableSearchInput: ({ size, placeholder, value, onChange, onBlur, onFocus, onKeyDown, className, expandedWidth, "aria-label": ariaLabel, collapsible, shortcut, isDisabled, }: ExpandableSearchInputProps) => import("react/jsx-runtime").JSX.Element;
19
21
  //# sourceMappingURL=ExpandableSearchInput.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandableSearchInput.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/ExpandableSearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAKD,eAAO,MAAM,qBAAqB,GAAI,iJAanC,0BAA0B,4CAsH5B,CAAC"}
1
+ {"version":3,"file":"ExpandableSearchInput.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/ExpandableSearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAKD,eAAO,MAAM,qBAAqB,GAAI,2JAcnC,0BAA0B,4CAqJ5B,CAAC"}
@@ -1,108 +1,130 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import { useState as F, useRef as l, useEffect as u, useCallback as S } from "react";
3
- import { SearchMd as L } from "@untitledui/icons";
4
- import { ButtonUtility as T } from "../button/button-utility.js";
5
- import _ from "./SearchInput.js";
6
- import { cx as w } from "../../utils/cn.js";
7
- import { motion as p } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
8
- import { AnimatePresence as j } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
9
- const M = { sm: 36, md: 40, lg: 44 }, P = 300, X = ({
10
- size: h = "sm",
11
- placeholder: x,
12
- value: d,
13
- onChange: N,
14
- onBlur: m,
15
- onFocus: v,
16
- onKeyDown: f,
17
- className: k,
18
- expandedWidth: C = P,
19
- "aria-label": y,
20
- collapsible: t = !0,
21
- isDisabled: g = !1
1
+ import { jsx as c } from "react/jsx-runtime";
2
+ import { useState as F, useRef as E, useEffect as p, useCallback as h } from "react";
3
+ import { SearchMd as T } from "@untitledui/icons";
4
+ import { ButtonUtility as _ } from "../button/button-utility.js";
5
+ import j from "./SearchInput.js";
6
+ import { cx as K } from "../../utils/cn.js";
7
+ import { motion as x } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
8
+ import { AnimatePresence as G } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
9
+ const M = { sm: 36, md: 40, lg: 44 }, U = 300, Z = ({
10
+ size: w = "sm",
11
+ placeholder: S,
12
+ value: u,
13
+ onChange: C,
14
+ onBlur: f,
15
+ onFocus: L,
16
+ onKeyDown: d,
17
+ className: N,
18
+ expandedWidth: q = U,
19
+ "aria-label": g,
20
+ collapsible: r = !0,
21
+ shortcut: y = !1,
22
+ isDisabled: m = !1
22
23
  }) => {
23
- const n = !!(d != null && d.trim()), [q, a] = F(t ? n : !0), o = !t || q, c = l(null), E = l(t), A = M[h];
24
- u(() => {
25
- const e = E.current === !1;
26
- E.current = t, !t || n ? a(!0) : e && t && a(!1);
27
- }, [t, n]), u(() => {
28
- var r;
29
- if (!t || !o) return;
30
- const e = (r = c.current) == null ? void 0 : r.querySelector("input");
31
- if (!e) return;
32
- const i = requestAnimationFrame(() => e.focus());
33
- return () => cancelAnimationFrame(i);
34
- }, [t, o]), u(() => {
35
- if (!t || !o) return;
36
- const e = (i) => {
37
- var r;
38
- (r = c.current) != null && r.contains(i.target) || n || a(!1);
24
+ const i = !!(u != null && u.trim()), [I, a] = F(r ? i : !0), o = !r || I, s = E(null), l = E(r), A = M[w];
25
+ p(() => {
26
+ const t = l.current === !1;
27
+ l.current = r, !r || i ? a(!0) : t && r && a(!1);
28
+ }, [r, i]), p(() => {
29
+ var n;
30
+ if (!r || !o) return;
31
+ const t = (n = s.current) == null ? void 0 : n.querySelector("input");
32
+ if (!t) return;
33
+ const e = requestAnimationFrame(() => t.focus());
34
+ return () => cancelAnimationFrame(e);
35
+ }, [r, o]), p(() => {
36
+ if (!r || !o) return;
37
+ const t = (e) => {
38
+ var n;
39
+ (n = s.current) != null && n.contains(e.target) || i || a(!1);
39
40
  };
40
- return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
41
- }, [t, o, n]);
42
- const I = S(
43
- (e) => {
44
- var r;
45
- const i = e.relatedTarget;
46
- i && ((r = c.current) != null && r.contains(i)) || (t && !n && a(!1), m == null || m(e));
41
+ return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
42
+ }, [r, o, i]);
43
+ const P = h(
44
+ (t) => {
45
+ var n;
46
+ const e = t.relatedTarget;
47
+ e && ((n = s.current) != null && n.contains(e)) || (r && !i && a(!1), f == null || f(t));
47
48
  },
48
- [m, n, t]
49
- ), R = S(
50
- (e) => {
51
- var i, r;
52
- e.key === "Escape" && t && !n && (a(!1), (r = (i = c.current) == null ? void 0 : i.querySelector("button")) == null || r.focus()), f == null || f(e);
49
+ [f, i, r]
50
+ ), R = h(
51
+ (t) => {
52
+ var n, v;
53
+ if ((t.metaKey || t.ctrlKey) && !t.shiftKey && !t.altKey && t.key.toLowerCase() === "k") {
54
+ t.preventDefault(), t.stopPropagation();
55
+ return;
56
+ }
57
+ t.key === "Escape" && r && !i && (a(!1), (v = (n = s.current) == null ? void 0 : n.querySelector("button")) == null || v.focus()), d == null || d(t);
53
58
  },
54
- [f, n, t]
55
- ), W = { type: "spring", damping: 25, stiffness: 300 };
56
- return /* @__PURE__ */ s(
57
- p.div,
59
+ [d, i, r]
60
+ ), k = h(() => {
61
+ var t, e;
62
+ if (r && !o) {
63
+ a(!0);
64
+ return;
65
+ }
66
+ (e = (t = s.current) == null ? void 0 : t.querySelector("input")) == null || e.focus();
67
+ }, [r, o]);
68
+ p(() => {
69
+ if (!y || m) return;
70
+ const t = (e) => {
71
+ (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "k" && (e.preventDefault(), e.stopPropagation(), k());
72
+ };
73
+ return window.addEventListener("keydown", t, { capture: !0 }), () => window.removeEventListener("keydown", t, { capture: !0 });
74
+ }, [y, m, k]);
75
+ const W = { type: "spring", damping: 25, stiffness: 300 };
76
+ return /* @__PURE__ */ c(
77
+ x.div,
58
78
  {
59
- ref: c,
60
- className: w("flex items-center overflow-hidden", k),
61
- onBlur: I,
62
- animate: { width: o ? C : A },
79
+ ref: s,
80
+ className: K("flex items-center overflow-hidden", N),
81
+ onBlur: P,
82
+ animate: { width: o ? q : A },
63
83
  transition: W,
64
- children: /* @__PURE__ */ s(j, { initial: !1, mode: "popLayout", children: o ? /* @__PURE__ */ s(
65
- p.div,
84
+ children: /* @__PURE__ */ c(G, { initial: !1, mode: "popLayout", children: o ? /* @__PURE__ */ c(
85
+ x.div,
66
86
  {
67
87
  initial: { opacity: 0 },
68
88
  animate: { opacity: 1 },
69
89
  exit: { opacity: 0 },
70
90
  transition: { duration: 0.08 },
71
91
  className: "min-w-0 flex-1",
72
- children: /* @__PURE__ */ s(
73
- _,
92
+ children: /* @__PURE__ */ c(
93
+ j,
74
94
  {
75
- size: h,
76
- placeholder: x,
77
- value: d,
78
- onChange: N,
79
- onFocus: v,
95
+ size: w,
96
+ placeholder: S,
97
+ value: u,
98
+ onChange: C,
99
+ onFocus: L,
80
100
  onKeyDown: R,
81
101
  className: "w-full min-w-0",
82
- "aria-label": y,
83
- isDisabled: g
102
+ "aria-label": g,
103
+ shortcut: y,
104
+ registerShortcut: !1,
105
+ isDisabled: m
84
106
  }
85
107
  )
86
108
  },
87
109
  "input"
88
- ) : /* @__PURE__ */ s(
89
- p.div,
110
+ ) : /* @__PURE__ */ c(
111
+ x.div,
90
112
  {
91
113
  initial: { opacity: 0 },
92
114
  animate: { opacity: 1 },
93
115
  exit: { opacity: 0 },
94
116
  transition: { duration: 0.08 },
95
117
  className: "flex flex-shrink-0",
96
- children: /* @__PURE__ */ s(
97
- T,
118
+ children: /* @__PURE__ */ c(
119
+ _,
98
120
  {
99
- icon: L,
121
+ icon: T,
100
122
  size: "xs",
101
123
  color: "tertiary",
102
- isDisabled: g,
103
- tooltip: y || x || "Search",
104
- className: w(
105
- n && "bg-brand_subtle text-brand-500 hover:text-brand-600 hover:bg-brand_subtle/80"
124
+ isDisabled: m,
125
+ tooltip: g || S || "Search",
126
+ className: K(
127
+ i && "bg-brand_subtle text-brand-500 hover:text-brand-600 hover:bg-brand_subtle/80"
106
128
  ),
107
129
  onClick: () => a(!0)
108
130
  }
@@ -114,5 +136,5 @@ const M = { sm: 36, md: 40, lg: 44 }, P = 300, X = ({
114
136
  );
115
137
  };
116
138
  export {
117
- X as ExpandableSearchInput
139
+ Z as ExpandableSearchInput
118
140
  };
@@ -13,14 +13,18 @@ interface SearchInputProps {
13
13
  isDisabled?: boolean;
14
14
  isRequired?: boolean;
15
15
  isInvalid?: boolean;
16
+ /** When true, shows the platform-specific primary keyboard shortcut hint (⌘K on Apple platforms, Ctrl+K elsewhere). */
16
17
  shortcut?: boolean;
18
+ /** When true, registers the platform-specific primary shortcut to focus the input. Defaults to `shortcut`. */
19
+ registerShortcut?: boolean;
17
20
  shortcutClassName?: string;
18
21
  className?: string;
19
22
  "aria-label"?: string;
20
23
  }
21
- export default function SearchInput({ size, shortcut, placeholder, shortcutClassName, value, onChange, onKeyDown, className, "aria-label": ariaLabel, ...props }: Omit<SearchInputProps, "size" | "shortcut"> & {
24
+ export default function SearchInput({ size, shortcut, registerShortcut, placeholder, shortcutClassName, value, onChange, onKeyDown, className, isDisabled, "aria-label": ariaLabel, ...props }: Omit<SearchInputProps, "size" | "shortcut" | "registerShortcut"> & {
22
25
  size?: "sm" | "md" | "lg";
23
26
  shortcut?: boolean;
27
+ registerShortcut?: boolean;
24
28
  }): import("react/jsx-runtime").JSX.Element;
25
29
  export {};
26
30
  //# sourceMappingURL=SearchInput.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAWf,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkGD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAW,EACX,QAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG;IAC/C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CA8CA"}
1
+ {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAYf,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uHAAuH;IACvH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8GAA8G;IAC9G,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmGD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAW,EACX,QAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAkB,EAClB,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,UAAU,GAAG,kBAAkB,CAAC,GAAG;IACpE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,2CA4EA"}
@@ -1,81 +1,83 @@
1
- import { jsx as e, jsxs as u, Fragment as y } from "react/jsx-runtime";
2
- import { useCallback as h, useMemo as N } from "react";
3
- import { SearchMd as k, XClose as v } from "@untitledui/icons";
4
- import { ComboBox as w, Group as C, Input as I } from "react-aria-components";
5
- import { cx as n } from "../../utils/cn.js";
6
- import { sizes as b } from "./select.js";
7
- import { ButtonUtility as S } from "../button/button-utility.js";
8
- const z = {
1
+ import { jsx as n, jsxs as g, Fragment as N } from "react/jsx-runtime";
2
+ import { useRef as C, useCallback as f, useEffect as I, useMemo as L } from "react";
3
+ import { SearchMd as E, XClose as P } from "@untitledui/icons";
4
+ import { ComboBox as z, Group as R, Input as _ } from "react-aria-components";
5
+ import { cx as u } from "../../utils/cn.js";
6
+ import { getPlatformShortcutLabel as j } from "../../utils/keyboard-shortcut.js";
7
+ import { sizes as x } from "./select.js";
8
+ import { ButtonUtility as q } from "../button/button-utility.js";
9
+ const B = {
9
10
  sm: "h-8",
10
11
  md: "h-9",
11
12
  lg: "h-11"
12
- }, _ = ({
13
- size: i,
14
- shortcut: c,
15
- placeholder: s,
16
- shortcutClassName: m,
17
- onKeyDown: l,
18
- onClear: t,
13
+ }, G = ({
14
+ size: s,
15
+ shortcut: i,
16
+ placeholder: p,
17
+ shortcutClassName: d,
18
+ onKeyDown: m,
19
+ onClear: o,
19
20
  hasValue: r,
20
- className: o
21
- }) => /* @__PURE__ */ e(
22
- C,
21
+ className: l
22
+ }) => /* @__PURE__ */ n(
23
+ R,
23
24
  {
24
- className: ({ isFocusWithin: a, isDisabled: p }) => n(
25
- "relative flex w-full items-center gap-2 rounded-md bg-primary ring-1 ring-secondary outline-hidden transition-shadow duration-100 ease-linear ring-inset",
26
- p && "cursor-not-allowed bg-disabled_subtle",
25
+ className: ({ isFocusWithin: a, isDisabled: c }) => u(
26
+ "relative flex w-full items-center gap-2 rounded-md bg-primary outline-hidden transition-shadow duration-100 ease-linear ring-inset",
27
+ c && "cursor-not-allowed bg-disabled_subtle",
27
28
  a && "ring-1 ring-brand",
28
- z[i],
29
- b[i].root,
30
- o
29
+ B[s],
30
+ x[s].root,
31
+ l
31
32
  ),
32
- children: ({ isDisabled: a }) => /* @__PURE__ */ u(y, { children: [
33
- /* @__PURE__ */ e(
34
- k,
33
+ children: ({ isDisabled: a }) => /* @__PURE__ */ g(N, { children: [
34
+ /* @__PURE__ */ n(
35
+ E,
35
36
  {
36
37
  color: "var(--color-utility-gray-300)",
37
38
  className: "pointer-events-none size-4 flex-shrink-0"
38
39
  }
39
40
  ),
40
- /* @__PURE__ */ e("div", { className: "relative flex w-full items-center gap-2", children: /* @__PURE__ */ e(
41
- I,
41
+ /* @__PURE__ */ n("div", { className: "relative flex w-full items-center gap-2", children: /* @__PURE__ */ n(
42
+ _,
42
43
  {
43
- placeholder: s,
44
- onKeyDown: l,
45
- className: n(
44
+ placeholder: p,
45
+ onKeyDown: m,
46
+ className: u(
46
47
  "z-10 w-full appearance-none bg-transparent text-sm text-primary caret-alpha-black/90 placeholder:text-placeholder_subtle focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled",
47
- r && "pr-6"
48
+ r && "pr-6",
49
+ i && !r && "pr-12"
48
50
  )
49
51
  }
50
52
  ) }),
51
- /* @__PURE__ */ u("div", { className: "flex-shrink-0", children: [
52
- r && !a && /* @__PURE__ */ e(
53
- S,
53
+ /* @__PURE__ */ g("div", { className: "flex-shrink-0", children: [
54
+ r && !a && /* @__PURE__ */ n(
55
+ q,
54
56
  {
55
- icon: /* @__PURE__ */ e(v, { size: 14 }),
57
+ icon: /* @__PURE__ */ n(P, { size: 14 }),
56
58
  color: "tertiary",
57
- onClick: t,
59
+ onClick: o,
58
60
  "aria-label": "Clear search"
59
61
  }
60
62
  ),
61
- c && !r && /* @__PURE__ */ e(
63
+ i && !r && /* @__PURE__ */ n(
62
64
  "div",
63
65
  {
64
- className: n(
65
- "absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
66
+ className: u(
67
+ "pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent pl-8",
66
68
  a && "to-bg-disabled_subtle",
67
- b[i].shortcut,
68
- m
69
+ x[s].shortcut,
70
+ d
69
71
  ),
70
- children: /* @__PURE__ */ e(
72
+ children: /* @__PURE__ */ n(
71
73
  "span",
72
74
  {
73
- className: n(
75
+ className: u(
74
76
  "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
75
77
  a && "bg-transparent text-disabled"
76
78
  ),
77
79
  "aria-hidden": "true",
78
- children: "K"
80
+ children: j(["meta"], "K")
79
81
  }
80
82
  )
81
83
  }
@@ -84,53 +86,72 @@ const z = {
84
86
  ] })
85
87
  }
86
88
  );
87
- function G({
88
- size: i = "sm",
89
- shortcut: c = !1,
90
- placeholder: s,
89
+ function O({
90
+ size: s = "sm",
91
+ shortcut: i = !1,
92
+ registerShortcut: p,
93
+ placeholder: d,
91
94
  shortcutClassName: m,
92
- value: l,
93
- onChange: t,
94
- onKeyDown: r,
95
- className: o,
96
- "aria-label": a,
97
- ...p
95
+ value: o,
96
+ onChange: r,
97
+ onKeyDown: l,
98
+ className: a,
99
+ isDisabled: c = !1,
100
+ "aria-label": w,
101
+ ...k
98
102
  }) {
99
- const f = h(
100
- (d) => {
101
- d.key === "Enter" && (d.preventDefault(), d.stopPropagation()), r == null || r(d);
103
+ const h = C(null), y = p ?? i, b = f(() => {
104
+ var e, t;
105
+ (t = (e = h.current) == null ? void 0 : e.querySelector("input")) == null || t.focus();
106
+ }, []);
107
+ I(() => {
108
+ if (!y || c) return;
109
+ const e = (t) => {
110
+ (t.metaKey || t.ctrlKey) && !t.shiftKey && !t.altKey && t.key.toLowerCase() === "k" && (t.preventDefault(), t.stopPropagation(), b());
111
+ };
112
+ return window.addEventListener("keydown", e, { capture: !0 }), () => window.removeEventListener("keydown", e, { capture: !0 });
113
+ }, [y, c, b]);
114
+ const v = f(
115
+ (e) => {
116
+ if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "k") {
117
+ e.preventDefault(), e.stopPropagation();
118
+ return;
119
+ }
120
+ e.key === "Enter" && (e.preventDefault(), e.stopPropagation()), l == null || l(e);
102
121
  },
103
- [r]
104
- ), x = h(() => {
105
- t == null || t("");
106
- }, [t]), g = N(() => !!l && l.length > 0, [l]);
107
- return /* @__PURE__ */ e(
108
- w,
122
+ [l]
123
+ ), S = f(() => {
124
+ r == null || r("");
125
+ }, [r]), K = L(() => !!o && o.length > 0, [o]);
126
+ return /* @__PURE__ */ n(
127
+ z,
109
128
  {
110
- ...p,
111
- inputValue: l,
112
- onInputChange: t,
129
+ ...k,
130
+ ref: h,
131
+ inputValue: o,
132
+ onInputChange: r,
113
133
  menuTrigger: "manual",
114
134
  items: [],
115
135
  allowsCustomValue: !0,
116
- "aria-label": a || s || "Search",
117
- className: n("w-xs", o),
118
- children: () => /* @__PURE__ */ e(
119
- _,
136
+ isDisabled: c,
137
+ "aria-label": w || d || "Search",
138
+ className: u("w-xs", a),
139
+ children: () => /* @__PURE__ */ n(
140
+ G,
120
141
  {
121
- size: i,
122
- shortcut: c,
123
- placeholder: s,
142
+ size: s,
143
+ shortcut: i,
144
+ placeholder: d,
124
145
  shortcutClassName: m,
125
- onKeyDown: f,
126
- onClear: x,
127
- hasValue: g,
128
- className: o
146
+ onKeyDown: v,
147
+ onClear: S,
148
+ hasValue: K,
149
+ className: a
129
150
  }
130
151
  )
131
152
  }
132
153
  );
133
154
  }
134
155
  export {
135
- G as default
156
+ O as default
136
157
  };
@@ -1 +1 @@
1
- {"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,aAAa,EAEd,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAElC,YAAY,IAAI,gBAAgB,EACjC,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,UAAU,CAAC;AAQlB,UAAU,aACR,SACE,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EAC7D,aAAa,CAAC,cAAc,CAAC,EAC7B,WAAW;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;IACvD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAyND,eAAO,MAAM,QAAQ,GAAI,oGAStB,aAAa,4CAmEf,CAAC"}
1
+ {"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,aAAa,EAEd,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAElC,YAAY,IAAI,gBAAgB,EACjC,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,UAAU,CAAC;AASlB,UAAU,aACR,SACE,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EAC7D,aAAa,CAAC,cAAc,CAAC,EAC7B,WAAW;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;IACvD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAyND,eAAO,MAAM,QAAQ,GAAI,oGAStB,aAAa,4CAmEf,CAAC"}