@studiolxd/brand 41.1.0 → 43.0.0

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 (41) hide show
  1. package/CHANGELOG.md +118 -0
  2. package/dist/_shared/datepicker.js +75 -78
  3. package/dist/_types/atoms/AsyncMultiSelect/AsyncMultiSelect.d.ts +28 -5
  4. package/dist/_types/atoms/AsyncSelect/AsyncSelect.d.ts +26 -6
  5. package/dist/_types/atoms/InputPhone/InputPhone.d.ts +15 -4
  6. package/dist/_types/atoms/MultiSelect/MultiSelect.d.ts +20 -1
  7. package/dist/_types/atoms/NumberInput/NumberInput.d.ts +14 -4
  8. package/dist/_types/atoms/OtpInput/OtpInput.d.ts +15 -4
  9. package/dist/_types/atoms/Select/Select.d.ts +18 -1
  10. package/dist/_types/atoms/TimeSelect/TimeSelect.d.ts +34 -6
  11. package/dist/_types/messages/BrandMessages.d.ts +31 -1
  12. package/dist/_types/messages/index.d.ts +1 -1
  13. package/dist/_types/molecules/Calendar/Calendar.d.ts +44 -13
  14. package/dist/_types/molecules/DatePicker/DatePicker.d.ts +56 -26
  15. package/dist/_types/molecules/DatePicker/dateMask.d.ts +9 -2
  16. package/dist/_types/molecules/DateTimeField/DateTimeField.d.ts +12 -12
  17. package/dist/_types/molecules/DocsSearch/DocsSearch.d.ts +31 -12
  18. package/dist/_types/molecules/FilterBar/FilterBar.d.ts +10 -1
  19. package/dist/_types/molecules/InputField/InputField.d.ts +16 -2
  20. package/dist/_types/molecules/MultiSelectField/MultiSelectField.d.ts +9 -1
  21. package/dist/_types/molecules/PasswordField/PasswordField.d.ts +22 -2
  22. package/dist/_types/molecules/SearchForm/SearchForm.d.ts +18 -6
  23. package/dist/_types/molecules/SelectField/SelectField.d.ts +5 -0
  24. package/dist/_types/molecules/TimeField/TimeField.d.ts +9 -2
  25. package/dist/_types/molecules/_shared/calendarGrid.d.ts +6 -2
  26. package/dist/async-multi-select.js +50 -49
  27. package/dist/async-select.js +89 -88
  28. package/dist/calendar.js +87 -86
  29. package/dist/docs-search.js +38 -37
  30. package/dist/filter-bar.css +1 -1
  31. package/dist/filter-bar.js +19 -17
  32. package/dist/input-field.js +66 -65
  33. package/dist/input-phone.js +39 -38
  34. package/dist/multi-select.js +109 -108
  35. package/dist/number-input.js +61 -60
  36. package/dist/otp-input.js +86 -85
  37. package/dist/password-field.js +46 -45
  38. package/dist/search-form.js +35 -34
  39. package/dist/select.js +75 -71
  40. package/dist/time-select.js +57 -56
  41. package/package.json +1 -1
@@ -29,9 +29,16 @@ export interface TimeFieldProps {
29
29
  helperText?: string;
30
30
  /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
31
31
  className?: string;
32
- /** aria-label del desplegable de horas. Default: "Horas" (castellano). */
32
+ /**
33
+ * aria-label del desplegable de horas. **Sin default**: sin él, el texto
34
+ * sale de `timeSelect.hours` del `BrandMessagesProvider`, que el
35
+ * `TimeSelect` de dentro lee por contexto.
36
+ */
33
37
  hoursLabel?: string;
34
- /** aria-label del desplegable de minutos. Default: "Minutos" (castellano). */
38
+ /**
39
+ * aria-label del desplegable de minutos. **Sin default**: sin él, sale de
40
+ * `timeSelect.minutes` del `BrandMessagesProvider`.
41
+ */
35
42
  minutesLabel?: string;
36
43
  onChange?: (value: TimeValue) => void;
37
44
  onBlur?: React.FocusEventHandler<HTMLButtonElement>;
@@ -51,10 +51,14 @@ export interface CalendarMonthNavOptions {
51
51
  /**
52
52
  * Nombre accesible del botón de retroceso. Depende de la vista: «Mes
53
53
  * anterior» sobre la rejilla de días, «Años anteriores» sobre la de años.
54
+ *
55
+ * Opcional porque sin `navigable` no se pinta ningún botón: quien la monta
56
+ * lee el texto de su catálogo **solo cuando hay flechas**, y un calendario
57
+ * estático no exige un texto que nadie va a ver.
54
58
  */
55
- previousLabel: string;
59
+ previousLabel?: string;
56
60
  /** Nombre accesible del botón de avance, también según la vista. */
57
- nextLabel: string;
61
+ nextLabel?: string;
58
62
  prevDisabled?: boolean;
59
63
  nextDisabled?: boolean;
60
64
  onPrev: () => void;
@@ -1,47 +1,48 @@
1
1
  'use client';
2
2
  import './async-multi-select.css';
3
- import { Icon as e } from "./icon.js";
4
- import { Spinner as t } from "./spinner.js";
5
- import { forwardRef as n, useCallback as r, useEffect as ee, useId as i, useRef as a, useState as o } from "react";
3
+ import { n as e } from "./_shared/brandmessagescontext.js";
4
+ import { Icon as t } from "./icon.js";
5
+ import { Spinner as n } from "./spinner.js";
6
+ import { forwardRef as r, useCallback as ee, useEffect as te, useId as i, useRef as a, useState as o } from "react";
6
7
  import { jsx as s, jsxs as c } from "react/jsx-runtime";
7
8
  import { Popover as l } from "@base-ui/react/popover";
8
9
  //#region src/stories/atoms/AsyncMultiSelect/AsyncMultiSelect.tsx
9
- function te(e, t) {
10
+ function u(e, t) {
10
11
  typeof e == "function" ? e(t) : e && (e.current = t);
11
12
  }
12
- var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange: f, selectedOptions: p, placeholder: m = "Buscar…", disabled: h, readOnly: g, size: _ = "md", debounceMs: v = 300, id: y, name: b, error: x = !1, required: S, onBlur: C, className: w, "aria-label": T, "aria-describedby": ne, removeLabel: re = (e) => `Quitar ${e}`, emptyMessage: ie = "Sin resultados", loadingLabel: E = "Buscando…", container: D }, O) {
13
- let [k, A] = o(!1), [j, M] = o(""), [N, P] = o(!1), [F, I] = o([]), [L, R] = o(!1), [z, B] = o(-1), [V, H] = o(d), [U, W] = o([]), G = a(null), K = a(0), q = a(null), J = a(null), Y = i(), ae = i(), X = u === void 0 ? V : u, oe = X.map((e) => p?.find((t) => t.value === e) ?? U.find((t) => t.value === e) ?? {
13
+ var d = r(function({ onSearch: r, value: d, defaultValue: f = [], onValueChange: p, selectedOptions: ne, placeholder: m, disabled: h, readOnly: g, size: _ = "md", debounceMs: v = 300, id: re, name: y, error: b = !1, required: ie, onBlur: ae, className: x, "aria-label": S, "aria-describedby": C, removeLabel: w, emptyMessage: T, loadingLabel: E, container: D }, oe) {
14
+ let O = e("asyncMultiSelect"), [k, A] = o(!1), [j, M] = o(""), [N, P] = o(!1), [F, I] = o([]), [L, R] = o(!1), [z, B] = o(-1), [V, H] = o(f), [U, W] = o([]), G = a(null), K = a(0), q = a(null), J = a(null), Y = i(), se = i(), X = d === void 0 ? V : d, ce = X.map((e) => ne?.find((t) => t.value === e) ?? U.find((t) => t.value === e) ?? {
14
15
  value: e,
15
16
  label: e
16
- }), Z = (e) => `${ae}-opt-${e}`, Q = r(async (e) => {
17
+ }), Z = (e) => `${se}-opt-${e}`, Q = ee(async (e) => {
17
18
  let t = ++K.current;
18
19
  P(!0), R(!1);
19
20
  try {
20
- let r = await n(e);
21
+ let n = await r(e);
21
22
  if (t !== K.current) return;
22
- I(r), B(-1);
23
+ I(n), B(-1);
23
24
  } catch {
24
25
  if (t !== K.current) return;
25
26
  I([]), B(-1);
26
27
  } finally {
27
28
  t === K.current && (P(!1), R(!0));
28
29
  }
29
- }, [n]);
30
- ee(() => () => {
30
+ }, [r]);
31
+ te(() => () => {
31
32
  K.current += 1, G.current && clearTimeout(G.current);
32
33
  }, []);
33
- function se(e) {
34
+ function le(e) {
34
35
  let t = e.target.value;
35
36
  M(t), k || A(!0), G.current && clearTimeout(G.current), G.current = setTimeout(() => void Q(t), v);
36
37
  }
37
- function ce(e) {
38
+ function ue(e) {
38
39
  h || g || k || (e.preventDefault(), q.current?.focus(), B(-1), M(""), I([]), R(!1), A(!0), Q(""));
39
40
  }
40
41
  function $(e, t) {
41
42
  let n = X.includes(e) ? X.filter((t) => t !== e) : [...X, e];
42
- t && W((e) => e.some((e) => e.value === t.value) ? e : [...e, t]), u === void 0 && H(n), f?.(n);
43
+ t && W((e) => e.some((e) => e.value === t.value) ? e : [...e, t]), d === void 0 && H(n), p?.(n);
43
44
  }
44
- function le(e) {
45
+ function de(e) {
45
46
  if (e.key === "ArrowDown") e.preventDefault(), k ? B((e) => Math.min(e + 1, F.length - 1)) : (A(!0), Q(j));
46
47
  else if (e.key === "ArrowUp") e.preventDefault(), B((e) => Math.max(e - 1, -1));
47
48
  else if (e.key === "Enter" && z >= 0 && F[z]) e.preventDefault(), $(F[z].value, F[z]), q.current?.focus();
@@ -52,7 +53,7 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
52
53
  $(e);
53
54
  }
54
55
  }
55
- function ue(e, t) {
56
+ function fe(e, t) {
56
57
  if (!e) {
57
58
  if (t.reason === "outside-press") {
58
59
  let e = t.event?.target;
@@ -61,61 +62,61 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
61
62
  A(!1), M(""), B(-1);
62
63
  }
63
64
  }
64
- let de = [
65
+ let pe = [
65
66
  "async-multi-select",
66
67
  _ === "md" ? "" : `async-multi-select--${_}`,
67
68
  h ? "async-multi-select--disabled" : "",
68
69
  k ? "async-multi-select--open" : "",
69
- x ? "async-multi-select--error" : "",
70
- w ?? ""
71
- ].filter(Boolean).join(" "), fe = ["async-multi-select__content", _ === "md" ? "" : `async-multi-select__content--${_}`].filter(Boolean).join(" ");
70
+ b ? "async-multi-select--error" : "",
71
+ x ?? ""
72
+ ].filter(Boolean).join(" "), me = ["async-multi-select__content", _ === "md" ? "" : `async-multi-select__content--${_}`].filter(Boolean).join(" ");
72
73
  return /* @__PURE__ */ c(l.Root, {
73
74
  open: k,
74
- onOpenChange: ue,
75
+ onOpenChange: fe,
75
76
  children: [/* @__PURE__ */ c("div", {
76
77
  ref: J,
77
- className: de,
78
+ className: pe,
78
79
  "data-popup-open": k || void 0,
79
80
  children: [/* @__PURE__ */ c("div", {
80
81
  className: "async-multi-select__input-area",
81
82
  children: [
82
- oe.map((t) => /* @__PURE__ */ c("span", {
83
+ ce.map((e) => /* @__PURE__ */ c("span", {
83
84
  className: "async-multi-select__pill",
84
85
  children: [/* @__PURE__ */ s("span", {
85
86
  className: "async-multi-select__pill-label",
86
- children: t.label
87
+ children: e.label
87
88
  }), !h && !g && /* @__PURE__ */ s("button", {
88
89
  type: "button",
89
90
  className: "async-multi-select__pill-remove",
90
- "aria-label": re(t.label),
91
+ "aria-label": O("remove", w)(e.label),
91
92
  tabIndex: -1,
92
- onMouseDown: (e) => {
93
- e.preventDefault(), $(t.value);
93
+ onMouseDown: (t) => {
94
+ t.preventDefault(), $(e.value);
94
95
  },
95
- children: /* @__PURE__ */ s(e, {
96
+ children: /* @__PURE__ */ s(t, {
96
97
  name: "close",
97
98
  size: "xs"
98
99
  })
99
100
  })]
100
- }, t.value)),
101
+ }, e.value)),
101
102
  /* @__PURE__ */ s("input", {
102
103
  ref: (e) => {
103
- q.current = e, te(O, e);
104
+ q.current = e, u(oe, e);
104
105
  },
105
- id: y,
106
+ id: re,
106
107
  type: "text",
107
108
  className: "async-multi-select__input",
108
109
  value: j,
109
- onChange: se,
110
- onPointerDown: ce,
111
- onKeyDown: le,
112
- placeholder: X.length === 0 ? m : void 0,
110
+ onChange: le,
111
+ onPointerDown: ue,
112
+ onKeyDown: de,
113
+ placeholder: X.length === 0 ? O("placeholder", m) : void 0,
113
114
  disabled: h,
114
115
  readOnly: g,
115
- "aria-label": T,
116
- "aria-describedby": ne,
117
- "aria-invalid": x || void 0,
118
- "aria-required": S || void 0,
116
+ "aria-label": S,
117
+ "aria-describedby": C,
118
+ "aria-invalid": b || void 0,
119
+ "aria-required": ie || void 0,
119
120
  "aria-expanded": k,
120
121
  "aria-haspopup": "listbox",
121
122
  "aria-controls": k ? Y : void 0,
@@ -123,15 +124,15 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
123
124
  autoComplete: "off",
124
125
  role: "combobox",
125
126
  "aria-autocomplete": "list",
126
- onBlur: C
127
+ onBlur: ae
127
128
  }),
128
- b && X.map((e) => /* @__PURE__ */ s("input", {
129
+ y && X.map((e) => /* @__PURE__ */ s("input", {
129
130
  type: "hidden",
130
- name: b,
131
+ name: y,
131
132
  value: e
132
133
  }, e))
133
134
  ]
134
- }), N && /* @__PURE__ */ s(t, {
135
+ }), N && /* @__PURE__ */ s(n, {
135
136
  size: "sm",
136
137
  "aria-hidden": !0
137
138
  })]
@@ -143,25 +144,25 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
143
144
  align: "start",
144
145
  sideOffset: -1,
145
146
  children: /* @__PURE__ */ s(l.Popup, {
146
- className: fe,
147
+ className: me,
147
148
  initialFocus: !1,
148
149
  finalFocus: !1,
149
150
  children: /* @__PURE__ */ c("div", {
150
151
  role: "listbox",
151
152
  "aria-multiselectable": "true",
152
- "aria-label": T ?? m,
153
+ "aria-label": S ?? O("placeholder", m),
153
154
  id: Y,
154
155
  children: [
155
156
  N && /* @__PURE__ */ s("div", {
156
157
  className: "async-multi-select__loading",
157
- children: /* @__PURE__ */ s(t, {
158
+ children: /* @__PURE__ */ s(n, {
158
159
  size: "sm",
159
- label: E
160
+ label: O("loading", E)
160
161
  })
161
162
  }),
162
163
  !N && L && F.length === 0 && /* @__PURE__ */ s("div", {
163
164
  className: "async-multi-select__empty",
164
- children: ie
165
+ children: O("empty", T)
165
166
  }),
166
167
  !N && F.map((e, t) => {
167
168
  let n = X.includes(e.value), r = z === t;
@@ -193,4 +194,4 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
193
194
  });
194
195
  });
195
196
  //#endregion
196
- export { u as AsyncMultiSelect };
197
+ export { d as AsyncMultiSelect };
@@ -1,154 +1,155 @@
1
1
  'use client';
2
2
  import './async-select.css';
3
- import { Icon as e } from "./icon.js";
4
- import { Spinner as t } from "./spinner.js";
5
- import { forwardRef as n, useCallback as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
6
- import { jsx as c, jsxs as l } from "react/jsx-runtime";
7
- import { Popover as u } from "@base-ui/react/popover";
3
+ import { n as e } from "./_shared/brandmessagescontext.js";
4
+ import { Icon as t } from "./icon.js";
5
+ import { Spinner as n } from "./spinner.js";
6
+ import { forwardRef as r, useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
7
+ import { jsx as l, jsxs as u } from "react/jsx-runtime";
8
+ import { Popover as d } from "@base-ui/react/popover";
8
9
  //#region src/stories/atoms/AsyncSelect/AsyncSelect.tsx
9
10
  function ee(e, t) {
10
11
  typeof e == "function" ? e(t) : e && (e.current = t);
11
12
  }
12
- var d = n(function({ onSearch: n, value: d, onValueChange: f, selectedOption: p, placeholder: m = "Buscar…", disabled: h, readOnly: g, size: _ = "md", debounceMs: v = 300, id: y, name: b, error: x = !1, required: S, onBlur: C, className: w, "aria-label": T, "aria-describedby": E, emptyMessage: D = "Sin resultados", loadingLabel: te = "Buscando…", clearLabel: ne = "Limpiar selección", container: re }, ie) {
13
- let [O, k] = s(!1), [A, j] = s(""), [M, N] = s(!1), [P, F] = s([]), [ae, I] = s(!1), [L, R] = s(-1), [z, B] = s(null), [V, H] = s(null), U = o(null), W = o(0), G = o(null), K = o(null), q = a(), oe = a(), J = d === void 0 ? z : d, se = p === void 0 ? V : p, Y = (e) => `${oe}-opt-${e}`, X = r(async (e) => {
14
- let t = ++W.current;
15
- N(!0), I(!1);
13
+ var f = r(function({ onSearch: r, value: f, onValueChange: p, selectedOption: m, placeholder: h, disabled: g, readOnly: _, size: v = "md", debounceMs: y = 300, id: b, name: x, error: S = !1, required: te, onBlur: ne, className: C, "aria-label": w, "aria-describedby": T, emptyMessage: re, loadingLabel: ie, clearLabel: ae, container: E }, D) {
14
+ let O = e("asyncSelect"), [k, A] = c(!1), [j, M] = c(""), [N, P] = c(!1), [F, I] = c([]), [oe, L] = c(!1), [R, z] = c(-1), [B, V] = c(null), [H, U] = c(null), W = s(null), G = s(0), K = s(null), q = s(null), J = o(), se = o(), Y = f === void 0 ? B : f, ce = m === void 0 ? H : m, X = (e) => `${se}-opt-${e}`, Z = i(async (e) => {
15
+ let t = ++G.current;
16
+ P(!0), L(!1);
16
17
  try {
17
- let r = await n(e);
18
- if (t !== W.current) return;
19
- F(r), R(-1);
18
+ let n = await r(e);
19
+ if (t !== G.current) return;
20
+ I(n), z(-1);
20
21
  } catch {
21
- if (t !== W.current) return;
22
- F([]), R(-1);
22
+ if (t !== G.current) return;
23
+ I([]), z(-1);
23
24
  } finally {
24
- t === W.current && (N(!1), I(!0));
25
+ t === G.current && (P(!1), L(!0));
25
26
  }
26
- }, [n]);
27
- i(() => () => {
28
- W.current += 1, U.current && clearTimeout(U.current);
27
+ }, [r]);
28
+ a(() => () => {
29
+ G.current += 1, W.current && clearTimeout(W.current);
29
30
  }, []);
30
- function ce(e) {
31
+ function le(e) {
31
32
  let t = e.target.value;
32
- j(t), U.current && clearTimeout(U.current), U.current = setTimeout(() => void X(t), v);
33
+ M(t), W.current && clearTimeout(W.current), W.current = setTimeout(() => void Z(t), y);
33
34
  }
34
- function Z(e) {
35
- h || g || O || (e.preventDefault(), G.current?.focus(), R(-1), j(""), F([]), I(!1), k(!0), X(""));
35
+ function ue(e) {
36
+ g || _ || k || (e.preventDefault(), K.current?.focus(), z(-1), M(""), I([]), L(!1), A(!0), Z(""));
36
37
  }
37
38
  function Q(e) {
38
- d === void 0 && (B(e.value), H(e)), f?.(e.value, e), k(!1), R(-1), j("");
39
+ f === void 0 && (V(e.value), U(e)), p?.(e.value, e), A(!1), z(-1), M("");
39
40
  }
40
41
  function $() {
41
- d === void 0 && (B(null), H(null)), f?.(null, null), j(""), F([]), I(!1), G.current?.focus();
42
+ f === void 0 && (V(null), U(null)), p?.(null, null), M(""), I([]), L(!1), K.current?.focus();
42
43
  }
43
- function le(e) {
44
+ function de(e) {
44
45
  e.stopPropagation(), $();
45
46
  }
46
- function ue(e) {
47
- e.key === "ArrowDown" ? (e.preventDefault(), O ? R((e) => Math.min(e + 1, P.length - 1)) : (k(!0), X(A))) : e.key === "ArrowUp" ? (e.preventDefault(), R((e) => Math.max(e - 1, -1))) : e.key === "Enter" && L >= 0 && P[L] ? (e.preventDefault(), Q(P[L])) : e.key === "Escape" ? (k(!1), j(""), R(-1)) : e.key === "Tab" ? (k(!1), R(-1)) : (e.key === "Backspace" || e.key === "Delete") && A === "" && J && !h && !g ? (e.preventDefault(), $()) : !O && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), j(e.key), k(!0), F([]), I(!1), U.current && clearTimeout(U.current), U.current = setTimeout(() => void X(e.key), v));
47
+ function fe(e) {
48
+ e.key === "ArrowDown" ? (e.preventDefault(), k ? z((e) => Math.min(e + 1, F.length - 1)) : (A(!0), Z(j))) : e.key === "ArrowUp" ? (e.preventDefault(), z((e) => Math.max(e - 1, -1))) : e.key === "Enter" && R >= 0 && F[R] ? (e.preventDefault(), Q(F[R])) : e.key === "Escape" ? (A(!1), M(""), z(-1)) : e.key === "Tab" ? (A(!1), z(-1)) : (e.key === "Backspace" || e.key === "Delete") && j === "" && Y && !g && !_ ? (e.preventDefault(), $()) : !k && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), M(e.key), A(!0), I([]), L(!1), W.current && clearTimeout(W.current), W.current = setTimeout(() => void Z(e.key), y));
48
49
  }
49
- function de(e, t) {
50
+ function pe(e, t) {
50
51
  if (!e) {
51
52
  if (t.reason === "outside-press") {
52
53
  let e = t.event?.target;
53
- if (e instanceof Node && K.current?.contains(e)) return;
54
+ if (e instanceof Node && q.current?.contains(e)) return;
54
55
  }
55
- k(!1), j(""), R(-1);
56
+ A(!1), M(""), z(-1);
56
57
  }
57
58
  }
58
- let fe = O ? A : se?.label ?? "", pe = [
59
+ let me = k ? j : ce?.label ?? "", he = [
59
60
  "async-select",
60
- _ === "md" ? "" : `async-select--${_}`,
61
- h ? "async-select--disabled" : "",
62
- x ? "async-select--error" : "",
63
- w ?? ""
64
- ].filter(Boolean).join(" "), me = ["async-select__content", _ === "md" ? "" : `async-select__content--${_}`].filter(Boolean).join(" ");
65
- return /* @__PURE__ */ l(u.Root, {
66
- open: O,
67
- onOpenChange: de,
68
- children: [/* @__PURE__ */ l("div", {
69
- ref: K,
70
- className: pe,
71
- "data-popup-open": O || void 0,
61
+ v === "md" ? "" : `async-select--${v}`,
62
+ g ? "async-select--disabled" : "",
63
+ S ? "async-select--error" : "",
64
+ C ?? ""
65
+ ].filter(Boolean).join(" "), ge = ["async-select__content", v === "md" ? "" : `async-select__content--${v}`].filter(Boolean).join(" ");
66
+ return /* @__PURE__ */ u(d.Root, {
67
+ open: k,
68
+ onOpenChange: pe,
69
+ children: [/* @__PURE__ */ u("div", {
70
+ ref: q,
71
+ className: he,
72
+ "data-popup-open": k || void 0,
72
73
  children: [
73
- /* @__PURE__ */ c("input", {
74
+ /* @__PURE__ */ l("input", {
74
75
  ref: (e) => {
75
- G.current = e, ee(ie, e);
76
+ K.current = e, ee(D, e);
76
77
  },
77
- id: y,
78
+ id: b,
78
79
  type: "text",
79
80
  className: "async-select__input",
80
- value: fe,
81
- onChange: ce,
82
- onPointerDown: Z,
83
- onKeyDown: ue,
84
- placeholder: m,
85
- disabled: h,
86
- readOnly: g,
87
- "aria-label": T,
88
- "aria-describedby": E,
89
- "aria-invalid": x || void 0,
90
- "aria-required": S || void 0,
91
- "aria-expanded": O,
81
+ value: me,
82
+ onChange: le,
83
+ onPointerDown: ue,
84
+ onKeyDown: fe,
85
+ placeholder: O("placeholder", h),
86
+ disabled: g,
87
+ readOnly: _,
88
+ "aria-label": w,
89
+ "aria-describedby": T,
90
+ "aria-invalid": S || void 0,
91
+ "aria-required": te || void 0,
92
+ "aria-expanded": k,
92
93
  "aria-haspopup": "listbox",
93
- "aria-controls": O ? q : void 0,
94
- "aria-activedescendant": L >= 0 ? Y(L) : void 0,
94
+ "aria-controls": k ? J : void 0,
95
+ "aria-activedescendant": R >= 0 ? X(R) : void 0,
95
96
  autoComplete: "off",
96
97
  role: "combobox",
97
98
  "aria-autocomplete": "list",
98
- onBlur: C
99
+ onBlur: ne
99
100
  }),
100
- b && /* @__PURE__ */ c("input", {
101
+ x && /* @__PURE__ */ l("input", {
101
102
  type: "hidden",
102
- name: b,
103
- value: J ?? ""
103
+ name: x,
104
+ value: Y ?? ""
104
105
  }),
105
- M && /* @__PURE__ */ c(t, {
106
+ N && /* @__PURE__ */ l(n, {
106
107
  size: "sm",
107
108
  "aria-hidden": !0
108
109
  }),
109
- !M && J && !h && !g && /* @__PURE__ */ c("button", {
110
+ !N && Y && !g && !_ && /* @__PURE__ */ l("button", {
110
111
  type: "button",
111
112
  className: "async-select__clear",
112
- "aria-label": ne,
113
+ "aria-label": O("clear", ae),
113
114
  tabIndex: -1,
114
- onMouseDown: le,
115
- children: /* @__PURE__ */ c(e, {
115
+ onMouseDown: de,
116
+ children: /* @__PURE__ */ l(t, {
116
117
  name: "close",
117
118
  size: "xs"
118
119
  })
119
120
  })
120
121
  ]
121
- }), /* @__PURE__ */ c(u.Portal, {
122
- container: re,
123
- children: /* @__PURE__ */ c(u.Positioner, {
122
+ }), /* @__PURE__ */ l(d.Portal, {
123
+ container: E,
124
+ children: /* @__PURE__ */ l(d.Positioner, {
124
125
  className: "async-select__positioner",
125
- anchor: K,
126
+ anchor: q,
126
127
  align: "start",
127
128
  sideOffset: -1,
128
- children: /* @__PURE__ */ c(u.Popup, {
129
- className: me,
129
+ children: /* @__PURE__ */ l(d.Popup, {
130
+ className: ge,
130
131
  initialFocus: !1,
131
132
  finalFocus: !1,
132
- children: /* @__PURE__ */ l("div", {
133
+ children: /* @__PURE__ */ u("div", {
133
134
  role: "listbox",
134
- "aria-label": T ?? m,
135
- id: q,
135
+ "aria-label": w ?? O("placeholder", h),
136
+ id: J,
136
137
  children: [
137
- M && /* @__PURE__ */ c("div", {
138
+ N && /* @__PURE__ */ l("div", {
138
139
  className: "async-select__loading",
139
- children: /* @__PURE__ */ c(t, {
140
+ children: /* @__PURE__ */ l(n, {
140
141
  size: "sm",
141
- label: te
142
+ label: O("loading", ie)
142
143
  })
143
144
  }),
144
- !M && ae && P.length === 0 && /* @__PURE__ */ c("div", {
145
+ !N && oe && F.length === 0 && /* @__PURE__ */ l("div", {
145
146
  className: "async-select__empty",
146
- children: D
147
+ children: O("empty", re)
147
148
  }),
148
- !M && P.map((e, t) => {
149
- let n = e.value === J, r = L === t;
150
- return /* @__PURE__ */ c("div", {
151
- id: Y(t),
149
+ !N && F.map((e, t) => {
150
+ let n = e.value === Y, r = R === t;
151
+ return /* @__PURE__ */ l("div", {
152
+ id: X(t),
152
153
  role: "option",
153
154
  "aria-selected": n,
154
155
  className: [
@@ -169,4 +170,4 @@ var d = n(function({ onSearch: n, value: d, onValueChange: f, selectedOption: p,
169
170
  });
170
171
  });
171
172
  //#endregion
172
- export { d as AsyncSelect };
173
+ export { f as AsyncSelect };