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

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 (38) hide show
  1. package/dist/index.d.ts +1 -0
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +92 -88
  4. package/dist/patterns/table/TableWrapper.d.ts.map +1 -1
  5. package/dist/patterns/table/TableWrapper.js +291 -287
  6. package/dist/patterns/table/index.d.ts +1 -1
  7. package/dist/patterns/table/index.d.ts.map +1 -1
  8. package/dist/patterns/table/storyHelpers/useMockTableState.d.ts.map +1 -1
  9. package/dist/patterns/table/toolbar/AlignDropdown.d.ts.map +1 -1
  10. package/dist/patterns/table/toolbar/AlignDropdown.js +5 -11
  11. package/dist/patterns/table/toolbar/GroupByDropdown.d.ts.map +1 -1
  12. package/dist/patterns/table/toolbar/GroupByDropdown.js +48 -43
  13. package/dist/patterns/table/toolbar/TableToolbar.d.ts +2 -0
  14. package/dist/patterns/table/toolbar/TableToolbar.d.ts.map +1 -1
  15. package/dist/patterns/table/toolbar/TableToolbar.js +2 -1
  16. package/dist/patterns/table/toolbar/index.d.ts +1 -1
  17. package/dist/patterns/table/toolbar/index.d.ts.map +1 -1
  18. package/dist/patterns/table/toolbar/tableToolbarHelpers.d.ts +10 -1
  19. package/dist/patterns/table/toolbar/tableToolbarHelpers.d.ts.map +1 -1
  20. package/dist/patterns/table/toolbar/tableToolbarHelpers.js +116 -116
  21. package/dist/patterns/table/types.d.ts +1 -0
  22. package/dist/patterns/table/types.d.ts.map +1 -1
  23. package/dist/primitives/multi-chips-select/MultiChipsSelect.d.ts +20 -0
  24. package/dist/primitives/multi-chips-select/MultiChipsSelect.d.ts.map +1 -0
  25. package/dist/primitives/multi-chips-select/MultiChipsSelect.js +233 -0
  26. package/dist/primitives/multi-chips-select/index.d.ts +3 -0
  27. package/dist/primitives/multi-chips-select/index.d.ts.map +1 -0
  28. package/dist/primitives/multi-chips-select/tagKeyFromLabel.d.ts +3 -0
  29. package/dist/primitives/multi-chips-select/tagKeyFromLabel.d.ts.map +1 -0
  30. package/dist/primitives/multi-chips-select/tagKeyFromLabel.js +6 -0
  31. package/dist/primitives/select/ExpandableSearchInput.d.ts +3 -1
  32. package/dist/primitives/select/ExpandableSearchInput.d.ts.map +1 -1
  33. package/dist/primitives/select/ExpandableSearchInput.js +100 -78
  34. package/dist/primitives/select/SearchInput.d.ts +5 -1
  35. package/dist/primitives/select/SearchInput.d.ts.map +1 -1
  36. package/dist/primitives/select/SearchInput.js +94 -74
  37. package/dist/styles/components.css +1 -1
  38. package/package.json +1 -1
@@ -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 Cmd+K / Ctrl+K 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,gFAAgF;IAChF,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 a ⌘K hint. */
16
17
  shortcut?: boolean;
18
+ /** When true, registers Cmd+K / Ctrl+K 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;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,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sFAAsF;IACtF,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,76 +1,77 @@
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 b, Fragment as N } from "react/jsx-runtime";
2
+ import { useRef as C, useCallback as f, useEffect as I, useMemo as E } from "react";
3
+ import { SearchMd as L, XClose as z } from "@untitledui/icons";
4
+ import { ComboBox as P, Group as R, Input as _ } from "react-aria-components";
5
+ import { cx as u } from "../../utils/cn.js";
6
+ import { sizes as x } from "./select.js";
7
+ import { ButtonUtility as j } from "../button/button-utility.js";
8
+ const q = {
9
9
  sm: "h-8",
10
10
  md: "h-9",
11
11
  lg: "h-11"
12
- }, _ = ({
12
+ }, B = ({
13
13
  size: i,
14
- shortcut: c,
15
- placeholder: s,
16
- shortcutClassName: m,
17
- onKeyDown: l,
18
- onClear: t,
14
+ shortcut: s,
15
+ placeholder: p,
16
+ shortcutClassName: d,
17
+ onKeyDown: m,
18
+ onClear: o,
19
19
  hasValue: r,
20
- className: o
21
- }) => /* @__PURE__ */ e(
22
- C,
20
+ className: l
21
+ }) => /* @__PURE__ */ n(
22
+ R,
23
23
  {
24
- className: ({ isFocusWithin: a, isDisabled: p }) => n(
24
+ className: ({ isFocusWithin: a, isDisabled: c }) => u(
25
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",
26
+ c && "cursor-not-allowed bg-disabled_subtle",
27
27
  a && "ring-1 ring-brand",
28
- z[i],
29
- b[i].root,
30
- o
28
+ q[i],
29
+ x[i].root,
30
+ l
31
31
  ),
32
- children: ({ isDisabled: a }) => /* @__PURE__ */ u(y, { children: [
33
- /* @__PURE__ */ e(
34
- k,
32
+ children: ({ isDisabled: a }) => /* @__PURE__ */ b(N, { children: [
33
+ /* @__PURE__ */ n(
34
+ L,
35
35
  {
36
36
  color: "var(--color-utility-gray-300)",
37
37
  className: "pointer-events-none size-4 flex-shrink-0"
38
38
  }
39
39
  ),
40
- /* @__PURE__ */ e("div", { className: "relative flex w-full items-center gap-2", children: /* @__PURE__ */ e(
41
- I,
40
+ /* @__PURE__ */ n("div", { className: "relative flex w-full items-center gap-2", children: /* @__PURE__ */ n(
41
+ _,
42
42
  {
43
- placeholder: s,
44
- onKeyDown: l,
45
- className: n(
43
+ placeholder: p,
44
+ onKeyDown: m,
45
+ className: u(
46
46
  "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"
47
+ r && "pr-6",
48
+ s && !r && "pr-12"
48
49
  )
49
50
  }
50
51
  ) }),
51
- /* @__PURE__ */ u("div", { className: "flex-shrink-0", children: [
52
- r && !a && /* @__PURE__ */ e(
53
- S,
52
+ /* @__PURE__ */ b("div", { className: "flex-shrink-0", children: [
53
+ r && !a && /* @__PURE__ */ n(
54
+ j,
54
55
  {
55
- icon: /* @__PURE__ */ e(v, { size: 14 }),
56
+ icon: /* @__PURE__ */ n(z, { size: 14 }),
56
57
  color: "tertiary",
57
- onClick: t,
58
+ onClick: o,
58
59
  "aria-label": "Clear search"
59
60
  }
60
61
  ),
61
- c && !r && /* @__PURE__ */ e(
62
+ s && !r && /* @__PURE__ */ n(
62
63
  "div",
63
64
  {
64
- className: n(
65
+ className: u(
65
66
  "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
67
  a && "to-bg-disabled_subtle",
67
- b[i].shortcut,
68
- m
68
+ x[i].shortcut,
69
+ d
69
70
  ),
70
- children: /* @__PURE__ */ e(
71
+ children: /* @__PURE__ */ n(
71
72
  "span",
72
73
  {
73
- className: n(
74
+ className: u(
74
75
  "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
75
76
  a && "bg-transparent text-disabled"
76
77
  ),
@@ -84,53 +85,72 @@ const z = {
84
85
  ] })
85
86
  }
86
87
  );
87
- function G({
88
+ function H({
88
89
  size: i = "sm",
89
- shortcut: c = !1,
90
- placeholder: s,
90
+ shortcut: s = !1,
91
+ registerShortcut: p,
92
+ placeholder: d,
91
93
  shortcutClassName: m,
92
- value: l,
93
- onChange: t,
94
- onKeyDown: r,
95
- className: o,
96
- "aria-label": a,
97
- ...p
94
+ value: o,
95
+ onChange: r,
96
+ onKeyDown: l,
97
+ className: a,
98
+ isDisabled: c = !1,
99
+ "aria-label": w,
100
+ ...k
98
101
  }) {
99
- const f = h(
100
- (d) => {
101
- d.key === "Enter" && (d.preventDefault(), d.stopPropagation()), r == null || r(d);
102
+ const h = C(null), y = p ?? s, g = f(() => {
103
+ var e, t;
104
+ (t = (e = h.current) == null ? void 0 : e.querySelector("input")) == null || t.focus();
105
+ }, []);
106
+ I(() => {
107
+ if (!y || c) return;
108
+ const e = (t) => {
109
+ (t.metaKey || t.ctrlKey) && !t.shiftKey && !t.altKey && t.key.toLowerCase() === "k" && (t.preventDefault(), t.stopPropagation(), g());
110
+ };
111
+ return window.addEventListener("keydown", e, { capture: !0 }), () => window.removeEventListener("keydown", e, { capture: !0 });
112
+ }, [y, c, g]);
113
+ const v = f(
114
+ (e) => {
115
+ if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "k") {
116
+ e.preventDefault(), e.stopPropagation();
117
+ return;
118
+ }
119
+ e.key === "Enter" && (e.preventDefault(), e.stopPropagation()), l == null || l(e);
102
120
  },
103
- [r]
104
- ), x = h(() => {
105
- t == null || t("");
106
- }, [t]), g = N(() => !!l && l.length > 0, [l]);
107
- return /* @__PURE__ */ e(
108
- w,
121
+ [l]
122
+ ), K = f(() => {
123
+ r == null || r("");
124
+ }, [r]), S = E(() => !!o && o.length > 0, [o]);
125
+ return /* @__PURE__ */ n(
126
+ P,
109
127
  {
110
- ...p,
111
- inputValue: l,
112
- onInputChange: t,
128
+ ...k,
129
+ ref: h,
130
+ inputValue: o,
131
+ onInputChange: r,
113
132
  menuTrigger: "manual",
114
133
  items: [],
115
134
  allowsCustomValue: !0,
116
- "aria-label": a || s || "Search",
117
- className: n("w-xs", o),
118
- children: () => /* @__PURE__ */ e(
119
- _,
135
+ isDisabled: c,
136
+ "aria-label": w || d || "Search",
137
+ className: u("w-xs", a),
138
+ children: () => /* @__PURE__ */ n(
139
+ B,
120
140
  {
121
141
  size: i,
122
- shortcut: c,
123
- placeholder: s,
142
+ shortcut: s,
143
+ placeholder: d,
124
144
  shortcutClassName: m,
125
- onKeyDown: f,
126
- onClear: x,
127
- hasValue: g,
128
- className: o
145
+ onKeyDown: v,
146
+ onClear: K,
147
+ hasValue: S,
148
+ className: a
129
149
  }
130
150
  )
131
151
  }
132
152
  );
133
153
  }
134
154
  export {
135
- G as default
155
+ H as default
136
156
  };