asheeui 0.6.15 → 0.7.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 (183) hide show
  1. package/dist/AsheeUIProvider.js +22 -24
  2. package/dist/components/accordion/Accordion.js +79 -173
  3. package/dist/components/accordion/accordion-config.js +12 -13
  4. package/dist/components/accordion/accordion-styles.js +21 -24
  5. package/dist/components/autocomplete/Autocomplete.js +78 -136
  6. package/dist/components/autocomplete/autocomplete-config.js +7 -12
  7. package/dist/components/button/Button.d.ts +29 -1
  8. package/dist/components/button/Button.d.ts.map +1 -1
  9. package/dist/components/button/Button.js +47 -108
  10. package/dist/components/button/button-config.js +16 -17
  11. package/dist/components/button/button-styles.js +10 -11
  12. package/dist/components/card/Card.d.ts +36 -16
  13. package/dist/components/card/Card.d.ts.map +1 -1
  14. package/dist/components/card/Card.js +115 -205
  15. package/dist/components/card/card-config.js +24 -21
  16. package/dist/components/card/card-styles.js +19 -22
  17. package/dist/components/carousel/Carousel.js +123 -248
  18. package/dist/components/carousel/carousel-config.js +24 -25
  19. package/dist/components/carousel/carousel-styles.js +14 -16
  20. package/dist/components/chip/Chip.js +84 -191
  21. package/dist/components/chip/chip-config.js +13 -14
  22. package/dist/components/chip/chip-styles.js +22 -26
  23. package/dist/components/date-picker/Calendar.d.ts +3 -3
  24. package/dist/components/date-picker/Calendar.d.ts.map +1 -1
  25. package/dist/components/date-picker/Calendar.js +141 -222
  26. package/dist/components/date-picker/DatePicker.d.ts +5 -5
  27. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  28. package/dist/components/date-picker/DatePicker.js +122 -220
  29. package/dist/components/date-picker/TimeSpinner.js +58 -82
  30. package/dist/components/date-picker/date-picker-config.d.ts +4 -4
  31. package/dist/components/date-picker/date-picker-config.d.ts.map +1 -1
  32. package/dist/components/date-picker/date-picker-config.js +10 -11
  33. package/dist/components/date-picker/date-picker-styles.js +44 -45
  34. package/dist/components/date-picker/date-picker.helpers.d.ts +4 -4
  35. package/dist/components/date-picker/date-picker.helpers.d.ts.map +1 -1
  36. package/dist/components/date-picker/date-picker.helpers.js +74 -102
  37. package/dist/components/drawer/Drawer.d.ts +26 -8
  38. package/dist/components/drawer/Drawer.d.ts.map +1 -1
  39. package/dist/components/drawer/Drawer.js +54 -131
  40. package/dist/components/drawer/drawer-config.js +14 -15
  41. package/dist/components/drawer/drawer-styles.js +38 -42
  42. package/dist/components/field/FieldShell.js +49 -56
  43. package/dist/components/field/field-config.js +17 -18
  44. package/dist/components/field/field-styles.js +8 -8
  45. package/dist/components/image/Image.d.ts +7 -7
  46. package/dist/components/image/Image.d.ts.map +1 -1
  47. package/dist/components/image/Image.js +65 -132
  48. package/dist/components/image/image-config.js +17 -18
  49. package/dist/components/image/image-styles.js +14 -15
  50. package/dist/components/input/Input.js +65 -150
  51. package/dist/components/input/PasswordInput.js +30 -49
  52. package/dist/components/input/input-config.js +7 -7
  53. package/dist/components/input/input-styles.js +9 -10
  54. package/dist/components/keyboard/KeyboardContext.js +10 -11
  55. package/dist/components/keyboard/KeyboardProvider.js +100 -181
  56. package/dist/components/keyboard/OnScreenKeyboard.d.ts.map +1 -1
  57. package/dist/components/keyboard/OnScreenKeyboard.js +159 -166
  58. package/dist/components/keyboard/keyboard-config.js +59 -57
  59. package/dist/components/keyboard/keyboard-styles.js +10 -11
  60. package/dist/components/keyboard/use-keyboard-field.js +29 -21
  61. package/dist/components/link/Link.js +47 -137
  62. package/dist/components/link/link-config.js +14 -15
  63. package/dist/components/link/link-styles.js +25 -29
  64. package/dist/components/marquee/Marquee.js +55 -144
  65. package/dist/components/marquee/marquee-config.js +18 -19
  66. package/dist/components/marquee/marquee-styles.js +13 -15
  67. package/dist/components/modal/Modal.d.ts +26 -10
  68. package/dist/components/modal/Modal.d.ts.map +1 -1
  69. package/dist/components/modal/Modal.js +56 -136
  70. package/dist/components/modal/modal-config.js +15 -16
  71. package/dist/components/modal/modal-styles.js +13 -14
  72. package/dist/components/multi-select/MultiSelect.d.ts +18 -2
  73. package/dist/components/multi-select/MultiSelect.d.ts.map +1 -1
  74. package/dist/components/multi-select/MultiSelect.js +149 -283
  75. package/dist/components/multi-select/multi-select-config.d.ts +23 -18
  76. package/dist/components/multi-select/multi-select-config.d.ts.map +1 -1
  77. package/dist/components/multi-select/multi-select-config.js +18 -21
  78. package/dist/components/multi-select/multi-select-styles.js +17 -20
  79. package/dist/components/radio/Radio.js +43 -80
  80. package/dist/components/radio/RadioGroup.js +57 -155
  81. package/dist/components/radio/radio-config.js +15 -16
  82. package/dist/components/radio/radio-context.js +6 -6
  83. package/dist/components/radio/radio-styles.js +55 -60
  84. package/dist/components/resizable-screen/ResizableScreen.js +87 -177
  85. package/dist/components/resizable-screen/resizable-screen-config.js +16 -17
  86. package/dist/components/select/Select.d.ts +3 -2
  87. package/dist/components/select/Select.d.ts.map +1 -1
  88. package/dist/components/select/Select.js +97 -195
  89. package/dist/components/select/select-config.js +8 -9
  90. package/dist/components/select/select-styles.js +5 -5
  91. package/dist/components/select-menu/SelectMenu.d.ts.map +1 -1
  92. package/dist/components/select-menu/SelectMenu.js +102 -196
  93. package/dist/components/select-menu/select-menu-config.js +12 -12
  94. package/dist/components/select-menu/use-select-floating.d.ts +11 -1
  95. package/dist/components/select-menu/use-select-floating.d.ts.map +1 -1
  96. package/dist/components/select-menu/use-select-floating.js +41 -48
  97. package/dist/components/sidebar/Sidebar.d.ts +43 -22
  98. package/dist/components/sidebar/Sidebar.d.ts.map +1 -1
  99. package/dist/components/sidebar/Sidebar.js +146 -331
  100. package/dist/components/sidebar/sidebar-config.d.ts +98 -31
  101. package/dist/components/sidebar/sidebar-config.d.ts.map +1 -1
  102. package/dist/components/sidebar/sidebar-config.js +47 -33
  103. package/dist/components/sidebar/sidebar-styles.js +27 -32
  104. package/dist/components/spinner/spinner-config.js +12 -13
  105. package/dist/components/spinner/spinner-styles.js +13 -14
  106. package/dist/components/spinner/spinner.js +39 -82
  107. package/dist/components/switch/Switch.js +62 -154
  108. package/dist/components/switch/switch-config.js +11 -12
  109. package/dist/components/switch/switch-styles.js +14 -16
  110. package/dist/components/table/Table.js +64 -186
  111. package/dist/components/table/table-config.js +17 -18
  112. package/dist/components/table/table-styles.js +48 -52
  113. package/dist/components/tabs/Tabs.d.ts +16 -8
  114. package/dist/components/tabs/Tabs.d.ts.map +1 -1
  115. package/dist/components/tabs/Tabs.js +93 -208
  116. package/dist/components/tabs/tabs-config.d.ts +42 -20
  117. package/dist/components/tabs/tabs-config.d.ts.map +1 -1
  118. package/dist/components/tabs/tabs-config.js +26 -18
  119. package/dist/components/tabs/tabs-styles.js +15 -17
  120. package/dist/components/textarea/Textarea.js +52 -138
  121. package/dist/components/textarea/textarea-config.js +10 -11
  122. package/dist/components/textarea/textarea-styles.js +9 -10
  123. package/dist/components/toast/ToastContext.js +22 -26
  124. package/dist/components/toast/ToastItem.js +82 -144
  125. package/dist/components/toast/ToastProvider.d.ts.map +1 -1
  126. package/dist/components/toast/ToastProvider.js +128 -190
  127. package/dist/components/toast/toast-config.js +23 -24
  128. package/dist/components/toast/toast-styles.js +50 -55
  129. package/dist/components/toast/use-pausable-timeout.js +17 -13
  130. package/dist/components/tooltip/Tooltip.d.ts +5 -0
  131. package/dist/components/tooltip/Tooltip.d.ts.map +1 -1
  132. package/dist/components/tooltip/Tooltip.js +68 -158
  133. package/dist/components/tooltip/tooltip-config.d.ts +25 -0
  134. package/dist/components/tooltip/tooltip-config.d.ts.map +1 -1
  135. package/dist/components/tooltip/tooltip-config.js +26 -22
  136. package/dist/components/tooltip/tooltip-styles.js +15 -17
  137. package/dist/config/default-config.js +11 -34
  138. package/dist/config/resolve-color.js +23 -23
  139. package/dist/config/resolve-config.d.ts.map +1 -1
  140. package/dist/config/resolve-config.js +14 -12
  141. package/dist/icons/ArrowLeftIcon.js +16 -19
  142. package/dist/icons/CalendarIcon.js +43 -24
  143. package/dist/icons/CheckIcon.js +16 -19
  144. package/dist/icons/ChevronDownIcon.js +15 -21
  145. package/dist/icons/ChevronLeftIcon.js +16 -19
  146. package/dist/icons/ChevronRightIcon.js +16 -19
  147. package/dist/icons/ChevronUpIcon.js +16 -19
  148. package/dist/icons/ClearIcon.js +26 -22
  149. package/dist/icons/ClockIcon.js +20 -22
  150. package/dist/icons/CloseIcon.js +26 -22
  151. package/dist/icons/ErrorIcon.js +16 -19
  152. package/dist/icons/ExternalLinkIcon.js +25 -23
  153. package/dist/icons/EyeIcon.js +20 -22
  154. package/dist/icons/EyeOffIcon.js +21 -22
  155. package/dist/icons/InfoIcon.js +16 -19
  156. package/dist/icons/SearchIcon.js +25 -22
  157. package/dist/icons/WarningIcon.js +16 -19
  158. package/dist/index.js +65 -163
  159. package/dist/libs/context.js +10 -13
  160. package/dist/libs/index.js +1 -0
  161. package/dist/libs/registry.js +10 -12
  162. package/dist/libs/use-floating-z-index.d.ts +32 -0
  163. package/dist/libs/use-floating-z-index.d.ts.map +1 -0
  164. package/dist/libs/use-floating-z-index.js +16 -0
  165. package/dist/libs/use-isomorphic-layout-effect.js +5 -5
  166. package/dist/scripts/AsheeThemeScript.js +35 -44
  167. package/dist/shared/radius.d.ts.map +1 -1
  168. package/dist/shared/radius.js +12 -13
  169. package/dist/shared/variant.js +46 -134
  170. package/dist/theme/color.js +28 -28
  171. package/dist/theme/controller.d.ts.map +1 -1
  172. package/dist/theme/controller.js +65 -178
  173. package/dist/theme/useTheme.js +13 -44
  174. package/dist/utils/cn.js +7 -7
  175. package/dist/utils/index.d.ts +1 -0
  176. package/dist/utils/index.d.ts.map +1 -1
  177. package/dist/utils/index.js +1 -0
  178. package/dist/utils/merge-object.js +13 -14
  179. package/dist/utils/resolve-token.js +11 -14
  180. package/dist/utils/stacking.d.ts +76 -0
  181. package/dist/utils/stacking.d.ts.map +1 -0
  182. package/dist/utils/stacking.js +34 -0
  183. package/package.json +12 -11
@@ -1,284 +1,150 @@
1
1
  "use client";
2
- import { jsx as l, jsxs as S, Fragment as Re } from "react/jsx-runtime";
3
- import { useClick as Ue, useDismiss as je, useRole as Ve, useInteractions as $e } from "@floating-ui/react";
4
- import { forwardRef as Be, useId as Ge, useState as B, useMemo as A, useCallback as z } from "react";
5
- import { ChevronDownIcon as He } from "../../icons/ChevronDownIcon.js";
6
- import { CloseIcon as Qe } from "../../icons/CloseIcon.js";
7
- import { useAsheeConfig as he } from "../../libs/context.js";
8
- import { resolveCascade as m, resolveRadiusKey as G, resolveClassKey as N } from "../../utils/resolve-token.js";
9
- import { Button as We } from "../button/Button.js";
10
- import { Chip as qe } from "../chip/Chip.js";
11
- import { FieldShell as Je } from "../field/FieldShell.js";
12
- import { SelectMenu as Xe } from "../select-menu/SelectMenu.js";
13
- import { FALLBACK_MULTI_SELECT_CONFIG as s } from "./multi-select-config.js";
14
- import { MULTI_SELECT_HEIGHT_CLASS as Ye, MULTI_SELECT_PADDING_CLASS as Ze, MULTI_SELECT_FONT_CLASS as Ce, STATUS_BORDER_CLASS as er } from "./multi-select-styles.js";
15
- import { RADIUS_CLASS as rr } from "../../shared/radius.js";
16
- import { useSelectFloating as sr } from "../select-menu/use-select-floating.js";
17
- import { cn as v } from "../../utils/cn.js";
18
- const tr = Be(
19
- ({
20
- options: _ = [],
21
- value: n,
22
- onChange: u,
23
- InputLabel: T = "Select Options...",
24
- isSearch: H = !0,
25
- searchPlaceholder: Q = "Search...",
26
- searchInputName: h = "multiselect-search",
27
- belowList: W,
28
- chipOptions: L,
29
- handleRemoveChip: i,
30
- handleAddChip: f,
31
- chipLabel: E,
32
- disableChipDisplay: q = !1,
33
- variant: J,
34
- color: X,
35
- size: Y,
36
- radius: Z,
37
- status: C,
38
- label: ee,
39
- labelAlign: re,
40
- description: w,
41
- message: k,
42
- required: se,
43
- isLoading: M,
44
- disabled: c,
45
- containerClassName: te,
46
- id: le,
47
- className: oe,
48
- menu: ae,
49
- chip: a,
50
- style: ne,
51
- startContent: ie,
52
- endContent: ce
53
- }, x) => {
54
- var R, U, j, V;
55
- const p = he(), e = (R = p.components) == null ? void 0 : R.multiSelect, ue = Ge(), y = le ?? ue, [b, de] = B(!1), [me, fe] = B(""), g = m(
56
- Y,
57
- e == null ? void 0 : e.size,
58
- void 0,
59
- s.size
60
- ), Se = m(
61
- J,
62
- e == null ? void 0 : e.variant,
63
- p.defaultVariant,
64
- s.variant
65
- ), D = m(
66
- X,
67
- e == null ? void 0 : e.color,
68
- p.defaultColor,
69
- s.color
70
- ), F = G(
71
- Z,
72
- e == null ? void 0 : e.radius,
73
- p.defaultRadius,
74
- s.radius
75
- ), ve = m(
76
- a == null ? void 0 : a.color,
77
- (U = e == null ? void 0 : e.chip) == null ? void 0 : U.color,
78
- D,
79
- s.chip.color
80
- ), xe = m(
81
- a == null ? void 0 : a.size,
82
- (j = e == null ? void 0 : e.chip) == null ? void 0 : j.size,
83
- void 0,
84
- s.chip.size
85
- ), pe = G(
86
- a == null ? void 0 : a.radius,
87
- (V = e == null ? void 0 : e.chip) == null ? void 0 : V.radius,
88
- F,
89
- s.chip.radius
90
- ), d = C ?? s.status, ye = d === "error" ? "danger" : d === "success" ? "success" : d === "warning" ? "warning" : D, be = m(
91
- re,
92
- e == null ? void 0 : e.labelAlign,
93
- void 0,
94
- s.labelAlign
95
- ), ge = N(
96
- g,
97
- Ye,
98
- s.size
99
- ), Ie = N(
100
- g,
101
- Ze,
102
- s.size
103
- ), Ne = N(
104
- g,
105
- Ce,
106
- s.size
107
- ), _e = N(
108
- pe,
109
- rr,
110
- s.chip.radius
111
- ), { refs: K, context: I, isPositioned: Le, floatingStyles: we } = sr({
112
- isOpen: b,
113
- onOpenChange: de,
114
- disabled: c
115
- }), Ae = Ue(I, { enabled: !c }), ze = je(I), Te = Ve(I, { role: "listbox" }), { getReferenceProps: Ee, getFloatingProps: ke } = $e([
116
- Ae,
117
- ze,
118
- Te
119
- ]), o = A(() => L !== void 0 ? L : Array.isArray(n) ? _.filter((r) => n.includes(r.value)) : [], [L, n, _]), O = z(
120
- (r) => o.some((t) => t.value === r),
121
- [o]
122
- ), Me = z(
123
- (r) => {
124
- const t = O(r.value);
125
- if (f || i)
126
- t ? i == null || i(r.value) : f == null || f(r);
127
- else if (u) {
128
- const $ = n ?? [], Oe = t ? $.filter((Pe) => Pe !== r.value) : [...$, r.value];
129
- u(Oe);
130
- }
131
- },
132
- [O, f, i, u, n]
133
- ), P = z(
134
- (r) => {
135
- i ? i(r) : u && Array.isArray(n) && u(n.filter((t) => t !== r));
136
- },
137
- [i, u, n]
138
- ), De = A(
139
- () => o.map((r) => r.value),
140
- [o]
141
- ), Fe = A(() => o.length > 0 ? `${o.length} selected` : T, [o.length, T]), Ke = Ee();
142
- return /* @__PURE__ */ l(
143
- Je,
144
- {
145
- id: y,
146
- label: ee,
147
- labelAlign: be,
148
- description: w,
149
- descriptionId: w ? `${y}-description` : void 0,
150
- message: k,
151
- messageId: k ? `${y}-message` : void 0,
152
- status: d,
153
- required: se,
154
- isLoading: M,
155
- children: /* @__PURE__ */ S(
156
- "div",
157
- {
158
- className: v("w-full flex flex-col gap-3", te),
159
- style: ne,
160
- children: [
161
- /* @__PURE__ */ S("div", { className: "relative w-full", children: [
162
- /* @__PURE__ */ l(
163
- We,
164
- {
165
- ref: (r) => {
166
- K.setReference(r), typeof x == "function" ? x(r) : x && (x.current = r);
167
- },
168
- type: "button",
169
- variant: Se,
170
- color: ye,
171
- size: g,
172
- radius: F,
173
- isDisabled: c,
174
- isLoading: M,
175
- fullWidth: !0,
176
- animate: !1,
177
- "aria-expanded": b,
178
- "aria-haspopup": "listbox",
179
- "aria-invalid": d === "error",
180
- "aria-describedby": [w ? `${y}-description` : void 0].filter(Boolean).join(" ") || void 0,
181
- className: v(
182
- "font-normal text-left justify-between",
183
- er[d],
184
- ge,
185
- Ie,
186
- Ne,
187
- oe
188
- ),
189
- startContent: ie,
190
- endContent: /* @__PURE__ */ S(Re, { children: [
191
- ce,
192
- /* @__PURE__ */ l(
193
- He,
194
- {
195
- className: v(
196
- "shrink-0 text-foreground/70 transition-transform duration-200",
197
- b && "rotate-180"
198
- )
199
- }
200
- )
201
- ] }),
202
- ...Ke,
203
- children: /* @__PURE__ */ l(
204
- "span",
205
- {
206
- className: v(
207
- "truncate",
208
- o.length > 0 ? "text-foreground" : "text-foreground/70"
209
- ),
210
- children: Fe
211
- }
212
- )
213
- }
214
- ),
215
- /* @__PURE__ */ l(
216
- Xe,
217
- {
218
- isOpen: b,
219
- floatingStyles: we,
220
- context: I,
221
- getFloatingProps: ke,
222
- setFloatingRef: K.setFloating,
223
- isPositioned: Le,
224
- options: _,
225
- selectedValues: De,
226
- onSelectMenuOption: Me,
227
- isSearch: H,
228
- searchPlaceholder: Q,
229
- searchInputName: h,
230
- searchQuery: me,
231
- onSearchChange: fe,
232
- belowList: W,
233
- menuProps: ae,
234
- menuConfig: e == null ? void 0 : e.menu
235
- }
236
- )
237
- ] }),
238
- !q && /* @__PURE__ */ S("div", { className: "flex flex-col gap-1.5", children: [
239
- E && /* @__PURE__ */ l("span", { className: "text-xs font-medium text-foreground/70", children: E }),
240
- /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1.5 p-2 min-h-12 bg-secondary/20 border border-dashed border-border rounded-lg items-center", children: o.length === 0 ? /* @__PURE__ */ l("span", { className: "text-xs text-foreground/70 px-2 py-1", children: "No selections made" }) : o.map((r) => /* @__PURE__ */ S(
241
- qe,
242
- {
243
- variant: "bordered",
244
- color: ve,
245
- size: xe,
246
- isDisabled: c,
247
- className: v(
248
- "inline-flex items-center gap-1.5 font-medium shadow-xs",
249
- _e
250
- ),
251
- children: [
252
- /* @__PURE__ */ l("span", { children: r.label }),
253
- /* @__PURE__ */ l(
254
- "button",
255
- {
256
- type: "button",
257
- tabIndex: c ? -1 : 0,
258
- onClick: (t) => {
259
- t.stopPropagation(), c || P(r.value);
260
- },
261
- onKeyDown: (t) => {
262
- (t.key === "Enter" || t.key === " ") && !c && (t.stopPropagation(), P(r.value));
263
- },
264
- "aria-label": `Remove ${r.label}`,
265
- className: "inline-flex items-center justify-center h-3.5 w-3.5 rounded-full hover:bg-black/20 dark:hover:bg-white/20 transition-colors cursor-pointer shrink-0",
266
- children: /* @__PURE__ */ l(Qe, { className: "w-3 h-3" })
267
- }
268
- )
269
- ]
270
- },
271
- String(r.value)
272
- )) })
273
- ] })
274
- ]
275
- }
276
- )
277
- }
278
- );
279
- }
280
- );
281
- tr.displayName = "MultiSelect";
282
- export {
283
- tr as MultiSelect
284
- };
2
+ "use client";
3
+ import { cn as e } from "../../utils/cn.js";
4
+ import { useAsheeConfig as t } from "../../libs/context.js";
5
+ import { ChevronDownIcon as n } from "../../icons/ChevronDownIcon.js";
6
+ import { RADIUS_CLASS as ee } from "../../shared/radius.js";
7
+ import { resolveCascade as r, resolveClassKey as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
8
+ import { FieldShell as te } from "../field/FieldShell.js";
9
+ import { Button as ne } from "../button/Button.js";
10
+ import { SelectMenu as o } from "../select-menu/SelectMenu.js";
11
+ import { useSelectFloating as s } from "../select-menu/use-select-floating.js";
12
+ import { CloseIcon as re } from "../../icons/CloseIcon.js";
13
+ import { Chip as ie } from "../chip/Chip.js";
14
+ import { FALLBACK_MULTI_SELECT_CONFIG as c } from "./multi-select-config.js";
15
+ import { MULTI_SELECT_FONT_CLASS as ae, MULTI_SELECT_HEIGHT_CLASS as oe, MULTI_SELECT_PADDING_CLASS as se, STATUS_BORDER_CLASS as ce } from "./multi-select-styles.js";
16
+ import { forwardRef as l, useCallback as u, useId as d, useMemo as f, useState as p } from "react";
17
+ import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
18
+ import { useClick as le, useDismiss as ue, useInteractions as de, useRole as fe } from "@floating-ui/react";
19
+ //#region src/components/multi-select/MultiSelect.tsx
20
+ var _ = l(({ options: l = [], value: _, onChange: v, InputLabel: y = "Select Options...", isSearch: pe = !0, searchPlaceholder: me = "Search...", searchInputName: he = "multiselect-search", belowList: ge, chipOptions: b, handleRemoveChip: x, handleAddChip: S, chipLabel: C, disableChipDisplay: w = !1, variant: T, color: E, size: D, radius: O, status: k, label: A, labelAlign: j, description: M, message: N, required: P, isLoading: F, disabled: I, containerClassName: L, id: _e, className: ve, menu: ye, chip: R, style: be, startContent: xe, endContent: Se }, z) => {
21
+ let B = t(), V = B.components?.multiSelect, Ce = d(), H = _e ?? Ce, [U, we] = p(!1), [Te, Ee] = p(""), W = r(D, V?.size, void 0, c.size), De = r(T, V?.variant, B.defaultVariant, c.variant), G = r(E, V?.color, B.defaultColor, c.color), K = a(O, V?.radius, B.defaultRadius, c.radius), Oe = R?.className, ke = r(R?.color, V?.chip?.color, G, c.chip.color), Ae = r(R?.size, V?.chip?.size, void 0, c.chip.size), je = a(R?.radius, V?.chip?.radius, K, c.chip.radius), q = k ?? c.status, Me = q === "error" ? "danger" : q === "success" ? "success" : q === "warning" ? "warning" : G, Ne = r(j, V?.labelAlign, void 0, c.labelAlign), Pe = i(W, oe, c.size), Fe = i(W, se, c.size), Ie = i(W, ae, c.size), Le = i(je, ee, c.chip.radius), { refs: J, context: Y, isPositioned: X, floatingStyles: Re } = s({
22
+ isOpen: U,
23
+ onOpenChange: we,
24
+ disabled: I
25
+ }), ze = le(Y, { enabled: !I }), Be = ue(Y), Ve = fe(Y, { role: "listbox" }), { getReferenceProps: He, getFloatingProps: Ue } = de([
26
+ ze,
27
+ Be,
28
+ Ve
29
+ ]), Z = f(() => b === void 0 ? Array.isArray(_) ? l.filter((e) => _.includes(e.value)) : [] : b, [
30
+ b,
31
+ _,
32
+ l
33
+ ]), Q = u((e) => Z.some((t) => t.value === e), [Z]), We = u((e) => {
34
+ let t = Q(e.value);
35
+ if (S || x) t ? x?.(e.value) : S?.(e);
36
+ else if (v) {
37
+ let n = _ ?? [];
38
+ v(t ? n.filter((t) => t !== e.value) : [...n, e.value]);
39
+ }
40
+ }, [
41
+ Q,
42
+ S,
43
+ x,
44
+ v,
45
+ _
46
+ ]), $ = u((e) => {
47
+ x ? x(e) : v && Array.isArray(_) && v(_.filter((t) => t !== e));
48
+ }, [
49
+ x,
50
+ v,
51
+ _
52
+ ]), Ge = f(() => Z.map((e) => e.value), [Z]), Ke = f(() => Z.length > 0 ? `${Z.length} selected` : y, [Z.length, y]), qe = He();
53
+ return /* @__PURE__ */ h(te, {
54
+ id: H,
55
+ label: A,
56
+ labelAlign: Ne,
57
+ description: M,
58
+ descriptionId: M ? `${H}-description` : void 0,
59
+ message: N,
60
+ messageId: N ? `${H}-message` : void 0,
61
+ status: q,
62
+ required: P,
63
+ isLoading: F,
64
+ children: /* @__PURE__ */ g("div", {
65
+ className: e("w-full flex flex-col gap-3", L),
66
+ style: be,
67
+ children: [/* @__PURE__ */ g("div", {
68
+ className: "relative w-full",
69
+ children: [/* @__PURE__ */ h(ne, {
70
+ ref: (e) => {
71
+ J.setReference(e), typeof z == "function" ? z(e) : z && (z.current = e);
72
+ },
73
+ type: "button",
74
+ variant: De,
75
+ color: Me,
76
+ size: W,
77
+ radius: K,
78
+ isDisabled: I,
79
+ isLoading: F,
80
+ fullWidth: !0,
81
+ animate: !1,
82
+ "aria-expanded": U,
83
+ "aria-haspopup": "listbox",
84
+ "aria-invalid": q === "error",
85
+ "aria-describedby": [M ? `${H}-description` : void 0].filter(Boolean).join(" ") || void 0,
86
+ className: e("font-normal text-left justify-between", ce[q], Pe, Fe, Ie, ve),
87
+ startContent: xe,
88
+ endContent: /* @__PURE__ */ g(m, { children: [Se, /* @__PURE__ */ h(n, { className: e("shrink-0 text-foreground/70 transition-transform duration-200", U && "rotate-180") })] }),
89
+ ...qe,
90
+ children: /* @__PURE__ */ h("span", {
91
+ className: e("truncate", Z.length > 0 ? "text-foreground" : "text-foreground/70"),
92
+ children: Ke
93
+ })
94
+ }), /* @__PURE__ */ h(o, {
95
+ isOpen: U,
96
+ floatingStyles: Re,
97
+ context: Y,
98
+ getFloatingProps: Ue,
99
+ setFloatingRef: J.setFloating,
100
+ isPositioned: X,
101
+ options: l,
102
+ selectedValues: Ge,
103
+ onSelectMenuOption: We,
104
+ isSearch: pe,
105
+ searchPlaceholder: me,
106
+ searchInputName: he,
107
+ searchQuery: Te,
108
+ onSearchChange: Ee,
109
+ belowList: ge,
110
+ menuProps: ye,
111
+ menuConfig: V?.menu
112
+ })]
113
+ }), !w && /* @__PURE__ */ g("div", {
114
+ className: "flex flex-col gap-1.5",
115
+ children: [C && /* @__PURE__ */ h("span", {
116
+ className: "text-xs font-medium text-foreground/70",
117
+ children: C
118
+ }), /* @__PURE__ */ h("div", {
119
+ className: "flex flex-wrap gap-1.5 p-2 min-h-12 bg-secondary/20 border border-dashed border-border rounded-lg items-center",
120
+ children: Z.length === 0 ? /* @__PURE__ */ h("span", {
121
+ className: "text-xs text-foreground/70 px-2 py-1",
122
+ children: "No selections made"
123
+ }) : Z.map((t) => /* @__PURE__ */ g(ie, {
124
+ variant: "bordered",
125
+ color: ke,
126
+ size: Ae,
127
+ isDisabled: I,
128
+ className: e("inline-flex items-center gap-1.5 font-medium shadow-xs", Le, Oe),
129
+ children: [/* @__PURE__ */ h("span", { children: t.label }), /* @__PURE__ */ h("button", {
130
+ type: "button",
131
+ tabIndex: I ? -1 : 0,
132
+ onClick: (e) => {
133
+ e.stopPropagation(), I || $(t.value);
134
+ },
135
+ onKeyDown: (e) => {
136
+ (e.key === "Enter" || e.key === " ") && !I && (e.stopPropagation(), $(t.value));
137
+ },
138
+ "aria-label": `Remove ${t.label}`,
139
+ className: "inline-flex items-center justify-center h-3.5 w-3.5 rounded-full hover:bg-black/20 dark:hover:bg-white/20 transition-colors cursor-pointer shrink-0",
140
+ children: /* @__PURE__ */ h(re, { className: "w-3 h-3" })
141
+ })]
142
+ }, String(t.value)))
143
+ })]
144
+ })]
145
+ })
146
+ });
147
+ });
148
+ _.displayName = "MultiSelect";
149
+ //#endregion
150
+ export { _ as MultiSelect };
@@ -1,6 +1,28 @@
1
1
  import { Color, Radius, Size, Variant } from '../../shared';
2
2
  import { InputConfig } from '../input';
3
3
  import { MenuConfig } from '../select-menu';
4
+ /**
5
+ * Configuration for selected value chips.
6
+ * Controls the appearance of chips in the selected values section.
7
+ */
8
+ export interface MultiSelectChipConfig {
9
+ /**
10
+ * Visual style variant for chips.
11
+ */
12
+ variant?: Variant;
13
+ /**
14
+ * Theme accent color for chips.
15
+ */
16
+ color?: Color;
17
+ /**
18
+ * Corner rounding for chips.
19
+ */
20
+ radius?: Radius;
21
+ /**
22
+ * Size scale for chips.
23
+ */
24
+ size?: Size;
25
+ }
4
26
  /**
5
27
  * Theme configuration options for the MultiSelect component.
6
28
  *
@@ -17,24 +39,7 @@ export interface MultiSelectConfig extends InputConfig {
17
39
  * Configuration for selected value chips.
18
40
  * Controls the appearance of chips in the selected values section.
19
41
  */
20
- chip?: {
21
- /**
22
- * Visual style variant for chips.
23
- */
24
- variant?: Variant;
25
- /**
26
- * Theme accent color for chips.
27
- */
28
- color?: Color;
29
- /**
30
- * Corner rounding for chips.
31
- */
32
- radius?: Radius;
33
- /**
34
- * Size scale for chips.
35
- */
36
- size?: Size;
37
- };
42
+ chip?: MultiSelectChipConfig;
38
43
  }
39
44
  /**
40
45
  * Default config values registered for the MultiSelect component.
@@ -1 +1 @@
1
- {"version":3,"file":"multi-select-config.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE;QACL;;WAEG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAElB;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QAEd;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAEhB;;WAEG;QACH,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAKtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;CAQ/B,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}
1
+ {"version":3,"file":"multi-select-config.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAKtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;CAQ/B,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}
@@ -1,23 +1,20 @@
1
1
  "use client";
2
- import { registerComponentDefaults as t } from "../../libs/registry.js";
3
- import { FALLBACK_FIELD_CONFIG as i } from "../field/field-config.js";
4
- import { defaultInputConfig as o } from "../input/input-config.js";
5
- const e = {
6
- ...o,
7
- chip: {
8
- size: "sm"
9
- }
10
- }, l = {
11
- ...i,
12
- chip: {
13
- size: "sm",
14
- color: "primary",
15
- radius: "sm",
16
- variant: "solid"
17
- }
18
- };
19
- t("multiSelect", e);
20
- export {
21
- l as FALLBACK_MULTI_SELECT_CONFIG,
22
- e as defaultMultiSelectConfig
2
+ import { registerComponentDefaults as e } from "../../libs/registry.js";
3
+ import { FALLBACK_FIELD_CONFIG as t } from "../field/field-config.js";
4
+ import { defaultInputConfig as n } from "../input/input-config.js";
5
+ //#region src/components/multi-select/multi-select-config.ts
6
+ var r = {
7
+ ...n,
8
+ chip: { size: "sm" }
9
+ }, i = {
10
+ ...t,
11
+ chip: {
12
+ size: "sm",
13
+ color: "primary",
14
+ radius: "sm",
15
+ variant: "solid"
16
+ }
23
17
  };
18
+ e("multiSelect", r);
19
+ //#endregion
20
+ export { i as FALLBACK_MULTI_SELECT_CONFIG, r as defaultMultiSelectConfig };
@@ -1,21 +1,18 @@
1
1
  "use client";
2
- import { FIELD_STATUS_BORDER_CLASS as S } from "../field/field-styles.js";
3
- const t = {
4
- sm: "h-9",
5
- md: "h-10",
6
- lg: "h-11"
7
- }, L = {
8
- sm: "px-2.5",
9
- md: "px-3",
10
- lg: "px-3.5"
11
- }, T = {
12
- sm: "text-sm",
13
- md: "text-base",
14
- lg: "text-lg"
15
- }, s = S;
16
- export {
17
- T as MULTI_SELECT_FONT_CLASS,
18
- t as MULTI_SELECT_HEIGHT_CLASS,
19
- L as MULTI_SELECT_PADDING_CLASS,
20
- s as STATUS_BORDER_CLASS
21
- };
2
+ import { FIELD_STATUS_BORDER_CLASS as e } from "../field/field-styles.js";
3
+ //#region src/components/multi-select/multi-select-styles.ts
4
+ var t = {
5
+ sm: "h-9",
6
+ md: "h-10",
7
+ lg: "h-11"
8
+ }, n = {
9
+ sm: "px-2.5",
10
+ md: "px-3",
11
+ lg: "px-3.5"
12
+ }, r = {
13
+ sm: "text-sm",
14
+ md: "text-base",
15
+ lg: "text-lg"
16
+ }, i = e;
17
+ //#endregion
18
+ export { r as MULTI_SELECT_FONT_CLASS, t as MULTI_SELECT_HEIGHT_CLASS, n as MULTI_SELECT_PADDING_CLASS, i as STATUS_BORDER_CLASS };