@giddaa-housing/ui 0.1.0 → 1.1.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 (315) hide show
  1. package/README.md +18 -6
  2. package/css/base.css +37 -0
  3. package/css/components.css +135 -0
  4. package/css/generated/shared.css +1 -0
  5. package/css/giddaa.css +402 -0
  6. package/css/preset.css +77 -0
  7. package/css/styles.css +2 -0
  8. package/css/theme.css +255 -0
  9. package/dist/accordion.d.ts +9 -10
  10. package/dist/accordion.js +41 -117
  11. package/dist/activity-timeline.d.ts +29 -0
  12. package/dist/activity-timeline.js +97 -0
  13. package/dist/alert.d.ts +8 -9
  14. package/dist/alert.js +53 -141
  15. package/dist/auth-layout.d.ts +23 -0
  16. package/dist/auth-layout.js +153 -0
  17. package/dist/avatar.d.ts +6 -6
  18. package/dist/avatar.js +40 -142
  19. package/dist/badge.d.ts +12 -13
  20. package/dist/badge.js +66 -114
  21. package/dist/bar-chart.d.ts +136 -114
  22. package/dist/bar-chart.js +244 -297
  23. package/dist/breadcrumb.d.ts +5 -5
  24. package/dist/breadcrumb.js +56 -148
  25. package/dist/bullet-chart.d.ts +33 -33
  26. package/dist/bullet-chart.js +123 -183
  27. package/dist/button-BZIeyUw6.d.ts +17 -0
  28. package/dist/button-group.d.ts +13 -16
  29. package/dist/button-group.js +38 -163
  30. package/dist/button.d.ts +2 -19
  31. package/dist/button.js +90 -142
  32. package/dist/calendar.d.ts +6 -6
  33. package/dist/calendar.js +134 -288
  34. package/dist/card.d.ts +14 -16
  35. package/dist/card.js +58 -174
  36. package/dist/carousel.d.ts +34 -35
  37. package/dist/carousel.js +319 -378
  38. package/dist/chart.d.ts +58 -59
  39. package/dist/chart.js +350 -466
  40. package/dist/checkbox.d.ts +10 -12
  41. package/dist/checkbox.js +84 -84
  42. package/dist/cn-BI_4DMBf.js +23 -0
  43. package/dist/collapsible.d.ts +7 -8
  44. package/dist/collapsible.js +23 -77
  45. package/dist/combobox.d.ts +10 -10
  46. package/dist/combobox.js +220 -696
  47. package/dist/cta.d.ts +64 -0
  48. package/dist/cta.js +192 -0
  49. package/dist/currency-selector.d.ts +41 -0
  50. package/dist/currency-selector.js +114 -0
  51. package/dist/data-table.d.ts +164 -0
  52. package/dist/data-table.js +673 -0
  53. package/dist/date-picker.d.ts +27 -20
  54. package/dist/date-picker.js +122 -520
  55. package/dist/details-card.d.ts +19 -0
  56. package/dist/details-card.js +118 -0
  57. package/dist/dialog.d.ts +13 -14
  58. package/dist/dialog.js +117 -320
  59. package/dist/dropdown-menu.d.ts +14 -14
  60. package/dist/dropdown-menu.js +170 -365
  61. package/dist/dropzone.d.ts +55 -55
  62. package/dist/dropzone.js +328 -467
  63. package/dist/editorial-card.d.ts +27 -0
  64. package/dist/editorial-card.js +144 -0
  65. package/dist/empty-state.d.ts +8 -9
  66. package/dist/empty-state.js +48 -135
  67. package/dist/field.d.ts +23 -25
  68. package/dist/field.js +111 -327
  69. package/dist/filter.d.ts +118 -0
  70. package/dist/filter.js +775 -0
  71. package/dist/footer.d.ts +40 -0
  72. package/dist/footer.js +227 -0
  73. package/dist/funnel-chart.d.ts +38 -41
  74. package/dist/funnel-chart.js +168 -563
  75. package/dist/gallery-indicator.d.ts +17 -0
  76. package/dist/gallery-indicator.js +75 -0
  77. package/dist/heatmap-chart.d.ts +95 -0
  78. package/dist/heatmap-chart.js +197 -0
  79. package/dist/infotip.d.ts +10 -0
  80. package/dist/infotip.js +40 -0
  81. package/dist/input-CfoEJ8A6.d.ts +12 -0
  82. package/dist/input-group.d.ts +16 -19
  83. package/dist/input-group.js +92 -372
  84. package/dist/input-size-context-C-SFx9sx.d.ts +10 -0
  85. package/dist/input-size-context.d.ts +2 -11
  86. package/dist/input-size-context.js +14 -20
  87. package/dist/input.d.ts +2 -13
  88. package/dist/input.js +23 -79
  89. package/dist/item.d.ts +7 -8
  90. package/dist/item.js +22 -89
  91. package/dist/kpi-card.d.ts +18 -20
  92. package/dist/kpi-card.js +84 -232
  93. package/dist/label.d.ts +6 -6
  94. package/dist/label.js +39 -66
  95. package/dist/line-chart.d.ts +88 -89
  96. package/dist/line-chart.js +143 -262
  97. package/dist/logo.d.ts +4 -4
  98. package/dist/logo.js +87 -141
  99. package/dist/map-indicator.d.ts +13 -0
  100. package/dist/map-indicator.js +83 -0
  101. package/dist/match.d.ts +15 -0
  102. package/dist/match.js +68 -0
  103. package/dist/media-gallery-hero.d.ts +58 -0
  104. package/dist/media-gallery-hero.js +201 -0
  105. package/dist/media-player.d.ts +60 -0
  106. package/dist/media-player.js +919 -0
  107. package/dist/multi-step-form.d.ts +56 -0
  108. package/dist/multi-step-form.js +342 -0
  109. package/dist/number-input.d.ts +34 -34
  110. package/dist/number-input.js +62 -413
  111. package/dist/page-header.d.ts +10 -11
  112. package/dist/page-header.js +34 -107
  113. package/dist/pagination.d.ts +17 -20
  114. package/dist/pagination.js +132 -341
  115. package/dist/password-input.d.ts +5 -12
  116. package/dist/password-input.js +32 -354
  117. package/dist/phone-input.d.ts +19 -19
  118. package/dist/phone-input.js +232 -561
  119. package/dist/photo-gallery.d.ts +20 -20
  120. package/dist/photo-gallery.js +314 -746
  121. package/dist/picker-lzgmsNfG.js +32 -0
  122. package/dist/pie-chart.d.ts +60 -60
  123. package/dist/pie-chart.js +141 -184
  124. package/dist/popover.d.ts +9 -9
  125. package/dist/popover.js +60 -156
  126. package/dist/price-tag.d.ts +34 -0
  127. package/dist/price-tag.js +118 -0
  128. package/dist/progress.d.ts +18 -16
  129. package/dist/progress.js +156 -300
  130. package/dist/property-listing-card.d.ts +29 -0
  131. package/dist/property-listing-card.js +117 -0
  132. package/dist/radar-chart.d.ts +108 -0
  133. package/dist/radar-chart.js +172 -0
  134. package/dist/radio-group.d.ts +11 -13
  135. package/dist/radio-group.js +47 -96
  136. package/dist/review-block.d.ts +18 -0
  137. package/dist/review-block.js +154 -0
  138. package/dist/rich-text-editor.d.ts +30 -14
  139. package/dist/rich-text-editor.js +594 -979
  140. package/dist/scatter-chart.d.ts +140 -0
  141. package/dist/scatter-chart.js +248 -0
  142. package/dist/search-input.d.ts +8 -15
  143. package/dist/search-input.js +58 -408
  144. package/dist/select.d.ts +8 -8
  145. package/dist/select.js +131 -291
  146. package/dist/separator.d.ts +8 -9
  147. package/dist/separator.js +31 -70
  148. package/dist/sheet.d.ts +11 -11
  149. package/dist/sheet.js +84 -262
  150. package/dist/sidebar.d.ts +32 -37
  151. package/dist/sidebar.js +380 -1055
  152. package/dist/size-context-D4mYvcg8.d.ts +10 -0
  153. package/dist/size-context.d.ts +2 -11
  154. package/dist/size-context.js +14 -18
  155. package/dist/skeleton.d.ts +4 -5
  156. package/dist/skeleton.js +9 -45
  157. package/dist/slider.d.ts +27 -0
  158. package/dist/slider.js +81 -0
  159. package/dist/sparkline.d.ts +43 -46
  160. package/dist/sparkline.js +223 -561
  161. package/dist/stepper.d.ts +23 -24
  162. package/dist/stepper.js +149 -276
  163. package/dist/styles.css +9995 -2
  164. package/dist/switch.d.ts +10 -12
  165. package/dist/switch.js +49 -106
  166. package/dist/table-card.d.ts +35 -0
  167. package/dist/table-card.js +125 -0
  168. package/dist/table.d.ts +18 -14
  169. package/dist/table.js +114 -182
  170. package/dist/tabs.d.ts +23 -15
  171. package/dist/tabs.js +62 -149
  172. package/dist/tag.d.ts +22 -23
  173. package/dist/tag.js +104 -156
  174. package/dist/testimonial-block.d.ts +33 -0
  175. package/dist/testimonial-block.js +208 -0
  176. package/dist/textarea-IS_D8pXf.d.ts +11 -0
  177. package/dist/textarea.d.ts +2 -12
  178. package/dist/textarea.js +20 -74
  179. package/dist/time-picker.d.ts +11 -11
  180. package/dist/time-picker.js +247 -464
  181. package/dist/toast.d.ts +16 -18
  182. package/dist/toast.js +154 -310
  183. package/dist/tooltip.d.ts +9 -10
  184. package/dist/tooltip.js +33 -91
  185. package/dist/tree-map.d.ts +54 -57
  186. package/dist/tree-map.js +231 -646
  187. package/dist/use-uncontrolled-CLfM1XbB.js +21 -0
  188. package/dist/waterfall-chart.d.ts +126 -0
  189. package/dist/waterfall-chart.js +480 -0
  190. package/package.json +123 -34
  191. package/dist/accordion.js.map +0 -1
  192. package/dist/alert.js.map +0 -1
  193. package/dist/avatar.js.map +0 -1
  194. package/dist/badge.js.map +0 -1
  195. package/dist/bar-chart.js.map +0 -1
  196. package/dist/base.css +0 -32
  197. package/dist/breadcrumb.js.map +0 -1
  198. package/dist/bullet-chart.js.map +0 -1
  199. package/dist/button-group.js.map +0 -1
  200. package/dist/button.js.map +0 -1
  201. package/dist/calendar.js.map +0 -1
  202. package/dist/card.js.map +0 -1
  203. package/dist/carousel.js.map +0 -1
  204. package/dist/chart.js.map +0 -1
  205. package/dist/checkbox.js.map +0 -1
  206. package/dist/collapsible.js.map +0 -1
  207. package/dist/combobox.js.map +0 -1
  208. package/dist/date-picker.js.map +0 -1
  209. package/dist/dialog.js.map +0 -1
  210. package/dist/dropdown-menu.js.map +0 -1
  211. package/dist/dropzone.js.map +0 -1
  212. package/dist/empty-state.js.map +0 -1
  213. package/dist/field.js.map +0 -1
  214. package/dist/files/red-hat-display-latin-300-italic.woff +0 -0
  215. package/dist/files/red-hat-display-latin-300-italic.woff2 +0 -0
  216. package/dist/files/red-hat-display-latin-300-normal.woff +0 -0
  217. package/dist/files/red-hat-display-latin-300-normal.woff2 +0 -0
  218. package/dist/files/red-hat-display-latin-400-italic.woff +0 -0
  219. package/dist/files/red-hat-display-latin-400-italic.woff2 +0 -0
  220. package/dist/files/red-hat-display-latin-400-normal.woff +0 -0
  221. package/dist/files/red-hat-display-latin-400-normal.woff2 +0 -0
  222. package/dist/files/red-hat-display-latin-500-italic.woff +0 -0
  223. package/dist/files/red-hat-display-latin-500-italic.woff2 +0 -0
  224. package/dist/files/red-hat-display-latin-500-normal.woff +0 -0
  225. package/dist/files/red-hat-display-latin-500-normal.woff2 +0 -0
  226. package/dist/files/red-hat-display-latin-600-italic.woff +0 -0
  227. package/dist/files/red-hat-display-latin-600-italic.woff2 +0 -0
  228. package/dist/files/red-hat-display-latin-600-normal.woff +0 -0
  229. package/dist/files/red-hat-display-latin-600-normal.woff2 +0 -0
  230. package/dist/files/red-hat-display-latin-700-italic.woff +0 -0
  231. package/dist/files/red-hat-display-latin-700-italic.woff2 +0 -0
  232. package/dist/files/red-hat-display-latin-700-normal.woff +0 -0
  233. package/dist/files/red-hat-display-latin-700-normal.woff2 +0 -0
  234. package/dist/files/red-hat-display-latin-800-italic.woff +0 -0
  235. package/dist/files/red-hat-display-latin-800-italic.woff2 +0 -0
  236. package/dist/files/red-hat-display-latin-800-normal.woff +0 -0
  237. package/dist/files/red-hat-display-latin-800-normal.woff2 +0 -0
  238. package/dist/files/red-hat-display-latin-900-italic.woff +0 -0
  239. package/dist/files/red-hat-display-latin-900-italic.woff2 +0 -0
  240. package/dist/files/red-hat-display-latin-900-normal.woff +0 -0
  241. package/dist/files/red-hat-display-latin-900-normal.woff2 +0 -0
  242. package/dist/files/red-hat-display-latin-ext-300-italic.woff +0 -0
  243. package/dist/files/red-hat-display-latin-ext-300-italic.woff2 +0 -0
  244. package/dist/files/red-hat-display-latin-ext-300-normal.woff +0 -0
  245. package/dist/files/red-hat-display-latin-ext-300-normal.woff2 +0 -0
  246. package/dist/files/red-hat-display-latin-ext-400-italic.woff +0 -0
  247. package/dist/files/red-hat-display-latin-ext-400-italic.woff2 +0 -0
  248. package/dist/files/red-hat-display-latin-ext-400-normal.woff +0 -0
  249. package/dist/files/red-hat-display-latin-ext-400-normal.woff2 +0 -0
  250. package/dist/files/red-hat-display-latin-ext-500-italic.woff +0 -0
  251. package/dist/files/red-hat-display-latin-ext-500-italic.woff2 +0 -0
  252. package/dist/files/red-hat-display-latin-ext-500-normal.woff +0 -0
  253. package/dist/files/red-hat-display-latin-ext-500-normal.woff2 +0 -0
  254. package/dist/files/red-hat-display-latin-ext-600-italic.woff +0 -0
  255. package/dist/files/red-hat-display-latin-ext-600-italic.woff2 +0 -0
  256. package/dist/files/red-hat-display-latin-ext-600-normal.woff +0 -0
  257. package/dist/files/red-hat-display-latin-ext-600-normal.woff2 +0 -0
  258. package/dist/files/red-hat-display-latin-ext-700-italic.woff +0 -0
  259. package/dist/files/red-hat-display-latin-ext-700-italic.woff2 +0 -0
  260. package/dist/files/red-hat-display-latin-ext-700-normal.woff +0 -0
  261. package/dist/files/red-hat-display-latin-ext-700-normal.woff2 +0 -0
  262. package/dist/files/red-hat-display-latin-ext-800-italic.woff +0 -0
  263. package/dist/files/red-hat-display-latin-ext-800-italic.woff2 +0 -0
  264. package/dist/files/red-hat-display-latin-ext-800-normal.woff +0 -0
  265. package/dist/files/red-hat-display-latin-ext-800-normal.woff2 +0 -0
  266. package/dist/files/red-hat-display-latin-ext-900-italic.woff +0 -0
  267. package/dist/files/red-hat-display-latin-ext-900-italic.woff2 +0 -0
  268. package/dist/files/red-hat-display-latin-ext-900-normal.woff +0 -0
  269. package/dist/files/red-hat-display-latin-ext-900-normal.woff2 +0 -0
  270. package/dist/funnel-chart.js.map +0 -1
  271. package/dist/index.d.ts +0 -87
  272. package/dist/index.js +0 -10448
  273. package/dist/index.js.map +0 -1
  274. package/dist/input-group.js.map +0 -1
  275. package/dist/input-size-context.js.map +0 -1
  276. package/dist/input.js.map +0 -1
  277. package/dist/item.js.map +0 -1
  278. package/dist/kpi-card.js.map +0 -1
  279. package/dist/label.js.map +0 -1
  280. package/dist/line-chart.js.map +0 -1
  281. package/dist/logo.js.map +0 -1
  282. package/dist/number-input.js.map +0 -1
  283. package/dist/page-header.js.map +0 -1
  284. package/dist/pagination.js.map +0 -1
  285. package/dist/password-input.js.map +0 -1
  286. package/dist/phone-input.js.map +0 -1
  287. package/dist/photo-gallery.js.map +0 -1
  288. package/dist/pie-chart.js.map +0 -1
  289. package/dist/popover.js.map +0 -1
  290. package/dist/progress.js.map +0 -1
  291. package/dist/radio-group.js.map +0 -1
  292. package/dist/red-hat-display.css +0 -2
  293. package/dist/rich-text-editor.js.map +0 -1
  294. package/dist/search-input.js.map +0 -1
  295. package/dist/select.js.map +0 -1
  296. package/dist/separator.js.map +0 -1
  297. package/dist/sheet.js.map +0 -1
  298. package/dist/sidebar.js.map +0 -1
  299. package/dist/size-context.js.map +0 -1
  300. package/dist/skeleton.js.map +0 -1
  301. package/dist/sparkline.js.map +0 -1
  302. package/dist/stepper.js.map +0 -1
  303. package/dist/switch.js.map +0 -1
  304. package/dist/tab-list.d.ts +0 -38
  305. package/dist/tab-list.js +0 -394
  306. package/dist/tab-list.js.map +0 -1
  307. package/dist/table.js.map +0 -1
  308. package/dist/tabs.js.map +0 -1
  309. package/dist/tag.js.map +0 -1
  310. package/dist/textarea.js.map +0 -1
  311. package/dist/theme/giddaa.css +0 -2
  312. package/dist/time-picker.js.map +0 -1
  313. package/dist/toast.js.map +0 -1
  314. package/dist/tooltip.js.map +0 -1
  315. package/dist/tree-map.js.map +0 -1
package/dist/combobox.js CHANGED
@@ -1,713 +1,237 @@
1
- // src/components/ui/combobox.tsx
2
- import { Combobox as ComboboxPrimitive } from "@base-ui/react";
3
- import { cva as cva4 } from "class-variance-authority";
1
+ "use client";
2
+ import { t as cn } from "./cn-BI_4DMBf.js";
3
+ import { SizeProvider, useComponentSize } from "./size-context.js";
4
+ import { Button } from "./button.js";
5
+ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
4
6
  import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
7
+ import { jsx, jsxs } from "react/jsx-runtime";
8
+ import { cva } from "class-variance-authority";
5
9
  import * as React from "react";
6
-
7
- // src/lib/cn.ts
8
- import { clsx } from "clsx";
9
- import { extendTailwindMerge } from "tailwind-merge";
10
- var twMerge = extendTailwindMerge({
11
- extend: {
12
- classGroups: {
13
- "font-size": [
14
- {
15
- text: [
16
- "gdt-display",
17
- "gdt-h1",
18
- "gdt-h2",
19
- "gdt-h3",
20
- "gdt-h4",
21
- "gdt-h5",
22
- "gdt-xl",
23
- "gdt-lg",
24
- "gdt-md",
25
- "gdt-sm",
26
- "gdt-xs",
27
- "gdt-subtext",
28
- "gdt-capitalized"
29
- ]
30
- }
31
- ]
32
- }
33
- }
10
+ import { Combobox as Combobox$1 } from "@base-ui/react";
11
+ //#region src/combobox.tsx
12
+ const ComboboxSelectionContext = React.createContext({ multiple: false });
13
+ function Combobox({ multiple, children, size, ...props }) {
14
+ return /* @__PURE__ */ jsx(SizeProvider, {
15
+ size,
16
+ children: /* @__PURE__ */ jsx(ComboboxSelectionContext.Provider, {
17
+ value: { multiple: multiple === true },
18
+ children: /* @__PURE__ */ jsx(Combobox$1.Root, {
19
+ multiple,
20
+ ...props,
21
+ children
22
+ })
23
+ })
24
+ });
25
+ }
26
+ const comboboxTriggerVariants = cva("group/combobox-trigger flex w-fit min-w-0 items-center justify-between rounded-full border border-line bg-canvas text-left font-normal whitespace-nowrap text-fg-primary shadow-none outline-none transition-[background-color,border-color,border-radius,box-shadow,color] select-none hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus data-focused:border-line-focus data-focused:inset-ring-1 data-focused:inset-ring-line-focus data-popup-open:rounded-2xl data-popup-open:border-line-focus data-popup-open:inset-ring-1 data-popup-open:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:shadow-none data-[invalid=true]:border-line-danger data-[invalid=true]:text-fg-danger *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:min-w-0 *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
27
+ variants: { size: {
28
+ sm: "h-8 gap-2 px-3 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
29
+ md: "h-10 gap-2 px-3.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
30
+ lg: "h-12 gap-2.5 px-4 pr-5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
31
+ } },
32
+ defaultVariants: { size: "md" }
33
+ });
34
+ const comboboxInputVariants = cva("w-auto has-data-popup-open:rounded-2xl has-data-popup-open:border-line-focus has-data-popup-open:inset-ring-1 has-data-popup-open:inset-ring-line-focus", {
35
+ variants: { size: {
36
+ sm: "",
37
+ md: "",
38
+ lg: ""
39
+ } },
40
+ defaultVariants: { size: "md" }
41
+ });
42
+ const comboboxContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width))] origin-(--transform-origin) overflow-hidden border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:mb-1 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", {
43
+ variants: { size: {
44
+ sm: "rounded-lg p-1",
45
+ md: "rounded-xl p-1.5",
46
+ lg: "rounded-[18px] p-2"
47
+ } },
48
+ defaultVariants: { size: "md" }
49
+ });
50
+ const comboboxItemVariants = cva("group/combobox-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none select-none data-highlighted:bg-surface data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
51
+ variants: { size: {
52
+ sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs",
53
+ md: "gap-2 rounded-md px-4 py-2 text-gdt-sm",
54
+ lg: "gap-2.5 rounded-md px-4 py-2.5 text-gdt-md"
55
+ } },
56
+ defaultVariants: { size: "md" }
57
+ });
58
+ const comboboxChipsVariants = cva("flex flex-wrap items-center gap-1 rounded-full border border-line bg-canvas bg-clip-padding text-fg-primary transition-[background-color,border-color,box-shadow,color] focus-within:border-line-focus focus-within:inset-ring-1 focus-within:inset-ring-line-focus has-aria-invalid:border-line-danger has-aria-invalid:text-fg-danger has-aria-invalid:shadow-none has-data-[slot=combobox-chip]:px-1 has-data-popup-open:rounded-2xl has-data-popup-open:border-line-focus has-data-popup-open:inset-ring-1 has-data-popup-open:inset-ring-line-focus", {
59
+ variants: { size: {
60
+ sm: "min-h-8 px-2.5 py-1 text-gdt-xs",
61
+ md: "min-h-10 px-3 py-1.5 text-gdt-sm",
62
+ lg: "min-h-12 px-4 py-2 text-gdt-md"
63
+ } },
64
+ defaultVariants: { size: "md" }
65
+ });
66
+ const comboboxChipVariants = cva("flex w-fit items-center justify-center gap-1 rounded-sm bg-surface font-medium whitespace-nowrap text-fg-primary has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", {
67
+ variants: { size: {
68
+ sm: "h-5 px-1.5 text-gdt-xs",
69
+ md: "h-[calc(--spacing(5.25))] px-1.5 text-gdt-xs",
70
+ lg: "h-6 px-2 text-gdt-sm"
71
+ } },
72
+ defaultVariants: { size: "md" }
34
73
  });
35
- function cn(...inputs) {
36
- return twMerge(clsx(inputs));
37
- }
38
-
39
- // src/components/ui/button.tsx
40
- import { Button as ButtonPrimitive } from "@base-ui/react/button";
41
- import { cva } from "class-variance-authority";
42
- import { Loader } from "lucide-react";
43
-
44
- // src/components/ui/size-context.tsx
45
- import { createContext, useContext } from "react";
46
- import { Fragment, jsx } from "react/jsx-runtime";
47
- var SizeContext = createContext(void 0);
48
- function SizeProvider({
49
- children,
50
- size
51
- }) {
52
- if (!size) {
53
- return /* @__PURE__ */ jsx(Fragment, { children });
54
- }
55
- return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
56
- }
57
- function useComponentSize(size, fallback = "md") {
58
- const inheritedSize = useContext(SizeContext);
59
- return size ?? inheritedSize ?? fallback;
60
- }
61
-
62
- // src/components/ui/button.tsx
63
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
64
- var buttonVariants = cva(
65
- "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
66
- {
67
- variants: {
68
- variant: {
69
- primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
70
- "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
71
- secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
72
- "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
73
- tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
74
- "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
75
- ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
76
- danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
77
- "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
78
- "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
79
- "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
80
- },
81
- size: {
82
- sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
83
- md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
84
- lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
85
- xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
86
- icon: "size-10",
87
- "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
88
- "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
89
- "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
90
- "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
91
- }
92
- },
93
- defaultVariants: {
94
- variant: "primary",
95
- size: "md"
96
- }
97
- }
98
- );
99
- function Button({
100
- className,
101
- variant = "primary",
102
- size,
103
- isLoading = false,
104
- children,
105
- disabled = false,
106
- ...props
107
- }) {
108
- const inheritedSize = useComponentSize();
109
- const resolvedSize = size ?? inheritedSize;
110
- const _disabled = disabled || isLoading;
111
- return /* @__PURE__ */ jsxs(
112
- ButtonPrimitive,
113
- {
114
- "data-slot": "button",
115
- className: cn(buttonVariants({ variant, size: resolvedSize, className })),
116
- disabled: _disabled,
117
- ...props,
118
- children: [
119
- isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
120
- " ",
121
- children
122
- ]
123
- }
124
- );
125
- }
126
-
127
- // src/components/ui/input-group.tsx
128
- import { cva as cva3 } from "class-variance-authority";
129
-
130
- // src/components/ui/input.tsx
131
- import { Input as InputPrimitive } from "@base-ui/react/input";
132
- import { cva as cva2 } from "class-variance-authority";
133
-
134
- // src/components/ui/input-size-context.tsx
135
- import { createContext as createContext2, useContext as useContext2 } from "react";
136
- import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
137
- var InputSizeContext = createContext2(
138
- void 0
139
- );
140
- function InputSizeProvider({
141
- children,
142
- size
143
- }) {
144
- if (!size) {
145
- return /* @__PURE__ */ jsx3(Fragment2, { children });
146
- }
147
- return /* @__PURE__ */ jsx3(InputSizeContext.Provider, { value: size, children });
148
- }
149
- function useInputComponentSize(size, fallback = "md") {
150
- const inheritedSize = useContext2(InputSizeContext);
151
- return size ?? inheritedSize ?? fallback;
152
- }
153
-
154
- // src/components/ui/input.tsx
155
- import { jsx as jsx4 } from "react/jsx-runtime";
156
- var inputVariants = cva2(
157
- "flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-muted hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-muted disabled:placeholder:text-fg-muted aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none",
158
- {
159
- variants: {
160
- size: {
161
- sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
162
- md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
163
- lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
164
- xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
165
- }
166
- },
167
- defaultVariants: {
168
- size: "md"
169
- }
170
- }
171
- );
172
- function Input({ className, size, type, ...props }) {
173
- const resolvedSize = useInputComponentSize(size);
174
- return /* @__PURE__ */ jsx4(
175
- InputPrimitive,
176
- {
177
- type,
178
- "data-slot": "input",
179
- "data-size": resolvedSize,
180
- className: cn(inputVariants({ size: resolvedSize }), className),
181
- ...props
182
- }
183
- );
184
- }
185
-
186
- // src/components/ui/input-group.tsx
187
- import { jsx as jsx5 } from "react/jsx-runtime";
188
- var inputGroupVariants = cva3(
189
- "group/input-group relative flex w-full min-w-0 items-center rounded-full has-[textarea]:rounded-xl has-data-[align=block-end]:rounded-xl has-data-[align=block-start]:rounded-xl border border-line bg-canvas transition-[background-color,border-color,box-shadow,color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:border-line-subtle has-disabled:bg-surface has-disabled:text-fg-muted focus-within:border-line-focus focus-within:inset-ring-1 inset-ring-line-focus has-[[data-slot][aria-invalid=true]]:border-line-danger has-[[data-slot][aria-invalid=true]]:inset-shadow-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pl-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pl-2.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pl-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pl-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pr-2 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pr-2.5 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pr-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pr-3",
190
- {
191
- variants: {
192
- size: {
193
- sm: "h-8",
194
- md: "h-10",
195
- lg: "h-12",
196
- xl: "h-14"
197
- }
198
- },
199
- defaultVariants: {
200
- size: "md"
201
- }
202
- }
203
- );
204
- function InputGroup({
205
- className,
206
- size,
207
- ...props
208
- }) {
209
- const inheritedSize = useComponentSize();
210
- const resolvedSize = size ?? inheritedSize;
211
- const componentSize = resolvedSize === "xl" ? void 0 : resolvedSize;
212
- return /* @__PURE__ */ jsx5(SizeProvider, { size: componentSize, children: /* @__PURE__ */ jsx5(InputSizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx5(
213
- "div",
214
- {
215
- "data-slot": "input-group",
216
- "data-size": resolvedSize,
217
- role: "group",
218
- className: cn(inputGroupVariants({ size: resolvedSize }), className),
219
- ...props
220
- }
221
- ) }) });
222
- }
223
- var inputGroupAddonVariants = cva3(
224
- "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-gdt-sm font-normal text-fg-secondary select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[size=lg]/input-group:[&>svg:not([class*='size-'])]:size-4.5 group-data-[size=xl]/input-group:[&>svg:not([class*='size-'])]:size-5 [&>svg:not([class*='size-'])]:size-4",
225
- {
226
- variants: {
227
- align: {
228
- "inline-start": "order-first group-data-[size=sm]/input-group:pl-3 group-data-[size=md]/input-group:pl-3.5 group-data-[size=lg]/input-group:pl-4 group-data-[size=xl]/input-group:pl-4.5 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
229
- "inline-end": "order-last group-data-[size=sm]/input-group:pr-3 group-data-[size=md]/input-group:pr-3.5 group-data-[size=lg]/input-group:pr-4 group-data-[size=xl]/input-group:pr-4.5 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
230
- "block-start": "order-first w-full justify-start px-3 group-data-[size=md]/input-group:px-3.5 group-data-[size=lg]/input-group:px-4 group-data-[size=xl]/input-group:px-4.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
231
- "block-end": "order-last w-full justify-start px-3 group-data-[size=md]/input-group:px-3.5 group-data-[size=lg]/input-group:px-4 group-data-[size=xl]/input-group:px-4.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
232
- }
233
- },
234
- defaultVariants: {
235
- align: "inline-start"
236
- }
237
- }
238
- );
239
- function InputGroupAddon({
240
- className,
241
- align = "inline-start",
242
- ...props
243
- }) {
244
- return (
245
- // biome-ignore lint/a11y/useSemanticElements: addon is a structural wrapper for grouped input affordances.
246
- // biome-ignore lint/a11y/useKeyWithClickEvents: click only forwards focus to the sibling input and is not a standalone action target.
247
- /* @__PURE__ */ jsx5(
248
- "div",
249
- {
250
- role: "group",
251
- "data-slot": "input-group-addon",
252
- "data-align": align,
253
- className: cn(inputGroupAddonVariants({ align }), className),
254
- onClick: (e) => {
255
- if (e.target.closest("button")) {
256
- return;
257
- }
258
- e.currentTarget.parentElement?.querySelector("input")?.focus();
259
- },
260
- ...props
261
- }
262
- )
263
- );
264
- }
265
- var inputGroupButtonVariants = cva3(
266
- "flex items-center gap-2 text-sm shadow-none rounded-full",
267
- {
268
- variants: {
269
- size: {
270
- xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
271
- sm: "",
272
- "icon-xs": "size-6 p-0 has-[>svg]:p-0",
273
- "icon-sm": "size-8 p-0 has-[>svg]:p-0"
274
- }
275
- },
276
- defaultVariants: {
277
- size: "xs"
278
- }
279
- }
280
- );
281
- function InputGroupButton({
282
- className,
283
- type = "button",
284
- variant = "ghost",
285
- size = "xs",
286
- ...props
287
- }) {
288
- return /* @__PURE__ */ jsx5(
289
- Button,
290
- {
291
- type,
292
- "data-size": size,
293
- variant,
294
- className: cn(inputGroupButtonVariants({ size }), className),
295
- ...props
296
- }
297
- );
298
- }
299
- function InputGroupInput({
300
- className,
301
- size,
302
- ...props
303
- }) {
304
- return /* @__PURE__ */ jsx5(
305
- Input,
306
- {
307
- "data-slot": "input-group-control",
308
- size,
309
- className: cn(
310
- "flex-1 rounded-none border-0 bg-transparent shadow-none inset-shadow-none inset-ring-0 focus:border-transparent focus:shadow-none focus:inset-shadow-none focus-visible:border-transparent focus-visible:shadow-none focus-visible:ring-0 focus-visible:inset-ring-0 focus-visible:inset-shadow-none disabled:bg-transparent aria-invalid:ring-0 aria-invalid:inset-ring-0 dark:bg-transparent dark:disabled:bg-transparent",
311
- className
312
- ),
313
- ...props
314
- }
315
- );
316
- }
317
-
318
- // src/components/ui/combobox.tsx
319
- import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
320
- var ComboboxSelectionContext = React.createContext({ multiple: false });
321
- function Combobox({
322
- multiple,
323
- children,
324
- size,
325
- ...props
326
- }) {
327
- return /* @__PURE__ */ jsx6(SizeProvider, { size, children: /* @__PURE__ */ jsx6(
328
- ComboboxSelectionContext.Provider,
329
- {
330
- value: { multiple: multiple === true },
331
- children: /* @__PURE__ */ jsx6(ComboboxPrimitive.Root, { multiple, ...props, children })
332
- }
333
- ) });
334
- }
335
- var comboboxTriggerVariants = cva4(
336
- "group/combobox-trigger flex w-fit min-w-0 items-center justify-between rounded-full border border-line bg-canvas text-left font-normal whitespace-nowrap text-fg-primary shadow-none outline-none transition-[background-color,border-color,border-radius,box-shadow,color] select-none hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus data-focused:border-line-focus data-focused:inset-ring-1 data-focused:inset-ring-line-focus data-popup-open:rounded-2xl data-popup-open:border-line-focus data-popup-open:inset-ring-1 data-popup-open:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:shadow-none data-[invalid=true]:border-line-danger data-[invalid=true]:text-fg-danger *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:min-w-0 *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
337
- {
338
- variants: {
339
- size: {
340
- sm: "h-8 gap-2 px-3 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
341
- md: "h-10 gap-2 px-3.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
342
- lg: "h-12 gap-2.5 px-4 pr-5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
343
- }
344
- },
345
- defaultVariants: {
346
- size: "md"
347
- }
348
- }
349
- );
350
- var comboboxInputVariants = cva4(
351
- "w-auto has-data-popup-open:rounded-2xl has-data-popup-open:border-line-focus has-data-popup-open:inset-ring-1 has-data-popup-open:inset-ring-line-focus",
352
- {
353
- variants: {
354
- size: {
355
- sm: "",
356
- md: "",
357
- lg: ""
358
- }
359
- },
360
- defaultVariants: {
361
- size: "md"
362
- }
363
- }
364
- );
365
- var comboboxContentVariants = cva4(
366
- "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width))] origin-(--transform-origin) overflow-hidden border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:mb-1 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
367
- {
368
- variants: {
369
- size: {
370
- sm: "rounded-lg p-1",
371
- md: "rounded-xl p-1.5",
372
- lg: "rounded-[18px] p-2"
373
- }
374
- },
375
- defaultVariants: {
376
- size: "md"
377
- }
378
- }
379
- );
380
- var comboboxItemVariants = cva4(
381
- "group/combobox-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none select-none data-highlighted:bg-surface data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
382
- {
383
- variants: {
384
- size: {
385
- sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs",
386
- md: "gap-2 rounded-md px-4 py-2 text-gdt-sm",
387
- lg: "gap-2.5 rounded-md px-4 py-2.5 text-gdt-md"
388
- }
389
- },
390
- defaultVariants: {
391
- size: "md"
392
- }
393
- }
394
- );
395
- var comboboxChipsVariants = cva4(
396
- "flex flex-wrap items-center gap-1 rounded-full border border-line bg-canvas bg-clip-padding text-fg-primary transition-[background-color,border-color,box-shadow,color] focus-within:border-line-focus focus-within:inset-ring-1 focus-within:inset-ring-line-focus has-aria-invalid:border-line-danger has-aria-invalid:text-fg-danger has-aria-invalid:shadow-none has-data-[slot=combobox-chip]:px-1 has-data-popup-open:rounded-2xl has-data-popup-open:border-line-focus has-data-popup-open:inset-ring-1 has-data-popup-open:inset-ring-line-focus",
397
- {
398
- variants: {
399
- size: {
400
- sm: "min-h-8 px-2.5 py-1 text-gdt-xs",
401
- md: "min-h-10 px-3 py-1.5 text-gdt-sm",
402
- lg: "min-h-12 px-4 py-2 text-gdt-md"
403
- }
404
- },
405
- defaultVariants: {
406
- size: "md"
407
- }
408
- }
409
- );
410
- var comboboxChipVariants = cva4(
411
- "flex w-fit items-center justify-center gap-1 rounded-sm bg-surface font-medium whitespace-nowrap text-fg-primary has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
412
- {
413
- variants: {
414
- size: {
415
- sm: "h-5 px-1.5 text-gdt-xs",
416
- md: "h-[calc(--spacing(5.25))] px-1.5 text-gdt-xs",
417
- lg: "h-6 px-2 text-gdt-sm"
418
- }
419
- },
420
- defaultVariants: {
421
- size: "md"
422
- }
423
- }
424
- );
425
74
  function ComboboxValue({ ...props }) {
426
- return /* @__PURE__ */ jsx6(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
427
- }
428
- function ComboboxTrigger({
429
- className,
430
- children,
431
- ...props
432
- }) {
433
- const resolvedSize = useComponentSize();
434
- return /* @__PURE__ */ jsxs2(
435
- ComboboxPrimitive.Trigger,
436
- {
437
- "data-slot": "combobox-trigger",
438
- "data-size": resolvedSize,
439
- className: cn(comboboxTriggerVariants({ size: resolvedSize }), className),
440
- ...props,
441
- children: [
442
- children,
443
- /* @__PURE__ */ jsx6(
444
- ComboboxPrimitive.Icon,
445
- {
446
- render: /* @__PURE__ */ jsx6(ChevronDownIcon, { className: "text-line-strong transition-transform group-data-disabled/combobox-trigger:text-fg-caption-placeholder group-data-popup-open/combobox-trigger:rotate-180" })
447
- }
448
- )
449
- ]
450
- }
451
- );
75
+ return /* @__PURE__ */ jsx(Combobox$1.Value, {
76
+ "data-slot": "combobox-value",
77
+ ...props
78
+ });
79
+ }
80
+ function ComboboxTrigger({ className, children, ...props }) {
81
+ const resolvedSize = useComponentSize();
82
+ return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
83
+ "data-slot": "combobox-trigger",
84
+ "data-size": resolvedSize,
85
+ className: cn(comboboxTriggerVariants({ size: resolvedSize }), className),
86
+ ...props,
87
+ children: [children, /* @__PURE__ */ jsx(Combobox$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-line-strong transition-transform group-data-disabled/combobox-trigger:text-fg-caption-placeholder group-data-popup-open/combobox-trigger:rotate-180" }) })]
88
+ });
452
89
  }
453
90
  function ComboboxClear({ className, ...props }) {
454
- return /* @__PURE__ */ jsx6(
455
- ComboboxPrimitive.Clear,
456
- {
457
- "data-slot": "combobox-clear",
458
- className: cn(className),
459
- ...props,
460
- render: /* @__PURE__ */ jsx6(InputGroupButton, { variant: "ghost", size: "icon-xs", children: /* @__PURE__ */ jsx6(XIcon, { className: "pointer-events-none" }) })
461
- }
462
- );
463
- }
464
- function ComboboxInput({
465
- className,
466
- children,
467
- disabled = false,
468
- showTrigger = true,
469
- showClear = false,
470
- ...props
471
- }) {
472
- const resolvedSize = useComponentSize();
473
- return /* @__PURE__ */ jsxs2(
474
- InputGroup,
475
- {
476
- className: cn(comboboxInputVariants({ size: resolvedSize }), className),
477
- children: [
478
- /* @__PURE__ */ jsx6(
479
- ComboboxPrimitive.Input,
480
- {
481
- render: /* @__PURE__ */ jsx6(InputGroupInput, { disabled }),
482
- ...props
483
- }
484
- ),
485
- /* @__PURE__ */ jsxs2(InputGroupAddon, { align: "inline-end", children: [
486
- showTrigger && /* @__PURE__ */ jsx6(
487
- InputGroupButton,
488
- {
489
- size: "icon-xs",
490
- variant: "ghost",
491
- render: /* @__PURE__ */ jsx6(ComboboxTrigger, {}),
492
- "data-slot": "input-group-button",
493
- className: "h-6 border-0 bg-transparent p-0 shadow-none inset-ring-0 group-has-data-[slot=combobox-clear]/input-group:hidden hover:border-transparent focus-visible:border-transparent focus-visible:inset-ring-0 data-popup-open:border-transparent data-popup-open:bg-transparent data-popup-open:inset-ring-0 data-pressed:bg-transparent",
494
- disabled
495
- }
496
- ),
497
- showClear && /* @__PURE__ */ jsx6(ComboboxClear, { disabled })
498
- ] }),
499
- children
500
- ]
501
- }
502
- );
503
- }
504
- function ComboboxContent({
505
- className,
506
- side = "bottom",
507
- sideOffset = 6,
508
- align = "start",
509
- alignOffset = 0,
510
- anchor,
511
- ...props
512
- }) {
513
- const resolvedSize = useComponentSize();
514
- return /* @__PURE__ */ jsx6(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
515
- ComboboxPrimitive.Positioner,
516
- {
517
- side,
518
- sideOffset,
519
- align,
520
- alignOffset,
521
- anchor,
522
- className: "isolate z-50",
523
- children: /* @__PURE__ */ jsx6(
524
- ComboboxPrimitive.Popup,
525
- {
526
- "data-slot": "combobox-content",
527
- "data-chips": !!anchor,
528
- className: cn(
529
- "group/combobox-content",
530
- comboboxContentVariants({ size: resolvedSize }),
531
- className
532
- ),
533
- ...props
534
- }
535
- )
536
- }
537
- ) });
91
+ return /* @__PURE__ */ jsx(Combobox$1.Clear, {
92
+ "data-slot": "combobox-clear",
93
+ className: cn(className),
94
+ ...props,
95
+ render: /* @__PURE__ */ jsx(InputGroupButton, {
96
+ variant: "ghost",
97
+ size: "icon-xs",
98
+ children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
99
+ })
100
+ });
101
+ }
102
+ function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
103
+ const resolvedSize = useComponentSize();
104
+ return /* @__PURE__ */ jsxs(InputGroup, {
105
+ className: cn(comboboxInputVariants({ size: resolvedSize }), className),
106
+ children: [
107
+ /* @__PURE__ */ jsx(Combobox$1.Input, {
108
+ render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
109
+ ...props
110
+ }),
111
+ /* @__PURE__ */ jsxs(InputGroupAddon, {
112
+ align: "inline-end",
113
+ children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
114
+ size: "icon-xs",
115
+ variant: "ghost",
116
+ render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
117
+ "data-slot": "input-group-button",
118
+ className: "h-6 border-0 bg-transparent p-0 shadow-none inset-ring-0 group-has-data-[slot=combobox-clear]/input-group:hidden hover:border-transparent focus-visible:border-transparent focus-visible:inset-ring-0 data-popup-open:border-transparent data-popup-open:bg-transparent data-popup-open:inset-ring-0 data-pressed:bg-transparent",
119
+ disabled
120
+ }), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
121
+ }),
122
+ children
123
+ ]
124
+ });
125
+ }
126
+ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
127
+ const resolvedSize = useComponentSize();
128
+ return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
129
+ side,
130
+ sideOffset,
131
+ align,
132
+ alignOffset,
133
+ anchor,
134
+ className: "isolate z-50",
135
+ children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
136
+ "data-slot": "combobox-content",
137
+ "data-chips": !!anchor,
138
+ className: cn("group/combobox-content", comboboxContentVariants({ size: resolvedSize }), className),
139
+ ...props
140
+ })
141
+ }) });
538
142
  }
539
143
  function ComboboxList({ className, ...props }) {
540
- return /* @__PURE__ */ jsx6(
541
- ComboboxPrimitive.List,
542
- {
543
- "data-slot": "combobox-list",
544
- className: cn(
545
- "no-scrollbar max-h-(--available-height) space-y-0.5 scroll-py-1 overflow-y-auto overscroll-contain data-empty:p-0",
546
- className
547
- ),
548
- ...props
549
- }
550
- );
551
- }
552
- function ComboboxItem({
553
- className,
554
- children,
555
- ...props
556
- }) {
557
- const { multiple } = React.useContext(ComboboxSelectionContext);
558
- const resolvedSize = useComponentSize();
559
- return /* @__PURE__ */ jsxs2(
560
- ComboboxPrimitive.Item,
561
- {
562
- "data-slot": "combobox-item",
563
- className: cn(
564
- comboboxItemVariants({ size: resolvedSize }),
565
- !multiple && "data-selected:bg-surface-brand-subtle data-selected:font-medium data-selected:text-fg-brand",
566
- className
567
- ),
568
- ...props,
569
- children: [
570
- multiple ? /* @__PURE__ */ jsx6(
571
- ComboboxPrimitive.ItemIndicator,
572
- {
573
- keepMounted: true,
574
- className: "flex size-5 shrink-0 items-center justify-center rounded-sm border border-line bg-canvas text-transparent transition-[background-color,border-color,color] group-data-selected/combobox-item:border-action-primary group-data-selected/combobox-item:bg-action-primary group-data-selected/combobox-item:text-fg-on-brand group-data-disabled/combobox-item:border-line-subtle group-data-disabled/combobox-item:bg-surface group-data-disabled/combobox-item:text-fg-caption-placeholder [&>svg]:size-3",
575
- children: /* @__PURE__ */ jsx6(CheckIcon, {})
576
- }
577
- ) : null,
578
- /* @__PURE__ */ jsx6("span", { className: "flex min-w-0 flex-1 shrink-0 gap-2 whitespace-nowrap", children })
579
- ]
580
- }
581
- );
144
+ return /* @__PURE__ */ jsx(Combobox$1.List, {
145
+ "data-slot": "combobox-list",
146
+ className: cn("no-scrollbar max-h-(--available-height) space-y-0.5 scroll-py-1 overflow-y-auto overscroll-contain data-empty:p-0", className),
147
+ ...props
148
+ });
149
+ }
150
+ function ComboboxItem({ className, children, ...props }) {
151
+ const { multiple } = React.useContext(ComboboxSelectionContext);
152
+ const resolvedSize = useComponentSize();
153
+ return /* @__PURE__ */ jsxs(Combobox$1.Item, {
154
+ "data-slot": "combobox-item",
155
+ className: cn(comboboxItemVariants({ size: resolvedSize }), !multiple && "data-selected:bg-surface-brand-subtle data-selected:font-medium data-selected:text-fg-brand", className),
156
+ ...props,
157
+ children: [multiple ? /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
158
+ keepMounted: true,
159
+ className: "flex size-5 shrink-0 items-center justify-center rounded-sm border border-line bg-canvas text-transparent transition-[background-color,border-color,color] group-data-selected/combobox-item:border-action-primary group-data-selected/combobox-item:bg-action-primary group-data-selected/combobox-item:text-fg-on-brand group-data-disabled/combobox-item:border-line-subtle group-data-disabled/combobox-item:bg-surface group-data-disabled/combobox-item:text-fg-caption-placeholder [&>svg]:size-3",
160
+ children: /* @__PURE__ */ jsx(CheckIcon, {})
161
+ }) : null, /* @__PURE__ */ jsx("span", {
162
+ className: "flex min-w-0 flex-1 shrink-0 gap-2 whitespace-nowrap",
163
+ children
164
+ })]
165
+ });
582
166
  }
583
167
  function ComboboxGroup({ className, ...props }) {
584
- return /* @__PURE__ */ jsx6(
585
- ComboboxPrimitive.Group,
586
- {
587
- "data-slot": "combobox-group",
588
- className: cn("scroll-my-1 space-y-0.5", className),
589
- ...props
590
- }
591
- );
592
- }
593
- function ComboboxLabel({
594
- className,
595
- ...props
596
- }) {
597
- return /* @__PURE__ */ jsx6(
598
- ComboboxPrimitive.GroupLabel,
599
- {
600
- "data-slot": "combobox-label",
601
- className: cn("px-3 py-1 text-gdt-xs text-fg-secondary", className),
602
- ...props
603
- }
604
- );
168
+ return /* @__PURE__ */ jsx(Combobox$1.Group, {
169
+ "data-slot": "combobox-group",
170
+ className: cn("scroll-my-1 space-y-0.5", className),
171
+ ...props
172
+ });
173
+ }
174
+ function ComboboxLabel({ className, ...props }) {
175
+ return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
176
+ "data-slot": "combobox-label",
177
+ className: cn("px-3 py-1 text-gdt-xs text-fg-secondary", className),
178
+ ...props
179
+ });
605
180
  }
606
181
  function ComboboxCollection({ ...props }) {
607
- return /* @__PURE__ */ jsx6(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
182
+ return /* @__PURE__ */ jsx(Combobox$1.Collection, {
183
+ "data-slot": "combobox-collection",
184
+ ...props
185
+ });
608
186
  }
609
187
  function ComboboxEmpty({ className, ...props }) {
610
- return /* @__PURE__ */ jsx6(
611
- ComboboxPrimitive.Empty,
612
- {
613
- "data-slot": "combobox-empty",
614
- className: cn(
615
- "hidden w-full justify-center py-2 text-center text-gdt-sm text-fg-secondary group-data-empty/combobox-content:flex",
616
- className
617
- ),
618
- ...props
619
- }
620
- );
621
- }
622
- function ComboboxSeparator({
623
- className,
624
- ...props
625
- }) {
626
- return /* @__PURE__ */ jsx6(
627
- ComboboxPrimitive.Separator,
628
- {
629
- "data-slot": "combobox-separator",
630
- className: cn("pointer-events-none my-1 h-px bg-line-subtle", className),
631
- ...props
632
- }
633
- );
634
- }
635
- function ComboboxChips({
636
- className,
637
- ...props
638
- }) {
639
- const resolvedSize = useComponentSize();
640
- return /* @__PURE__ */ jsx6(
641
- ComboboxPrimitive.Chips,
642
- {
643
- "data-slot": "combobox-chips",
644
- className: cn(comboboxChipsVariants({ size: resolvedSize }), className),
645
- ...props
646
- }
647
- );
648
- }
649
- function ComboboxChip({
650
- className,
651
- children,
652
- showRemove = true,
653
- ...props
654
- }) {
655
- const resolvedSize = useComponentSize();
656
- return /* @__PURE__ */ jsxs2(
657
- ComboboxPrimitive.Chip,
658
- {
659
- "data-slot": "combobox-chip",
660
- className: cn(comboboxChipVariants({ size: resolvedSize }), className),
661
- ...props,
662
- children: [
663
- children,
664
- showRemove && /* @__PURE__ */ jsx6(
665
- ComboboxPrimitive.ChipRemove,
666
- {
667
- className: "-ml-1 opacity-50 hover:opacity-100",
668
- "data-slot": "combobox-chip-remove",
669
- render: /* @__PURE__ */ jsx6(Button, { variant: "ghost", size: "icon-xs", children: /* @__PURE__ */ jsx6(XIcon, { className: "pointer-events-none" }) })
670
- }
671
- )
672
- ]
673
- }
674
- );
675
- }
676
- function ComboboxChipsInput({
677
- className,
678
- ...props
679
- }) {
680
- return /* @__PURE__ */ jsx6(
681
- ComboboxPrimitive.Input,
682
- {
683
- "data-slot": "combobox-chip-input",
684
- className: cn(
685
- "min-w-16 flex-1 bg-transparent text-fg-primary outline-none placeholder:text-fg-muted",
686
- className
687
- ),
688
- ...props
689
- }
690
- );
188
+ return /* @__PURE__ */ jsx(Combobox$1.Empty, {
189
+ "data-slot": "combobox-empty",
190
+ className: cn("hidden w-full justify-center py-2 text-center text-gdt-sm text-fg-secondary group-data-empty/combobox-content:flex", className),
191
+ ...props
192
+ });
193
+ }
194
+ function ComboboxSeparator({ className, ...props }) {
195
+ return /* @__PURE__ */ jsx(Combobox$1.Separator, {
196
+ "data-slot": "combobox-separator",
197
+ className: cn("pointer-events-none my-1 h-px bg-line-subtle", className),
198
+ ...props
199
+ });
200
+ }
201
+ function ComboboxChips({ className, ...props }) {
202
+ const resolvedSize = useComponentSize();
203
+ return /* @__PURE__ */ jsx(Combobox$1.Chips, {
204
+ "data-slot": "combobox-chips",
205
+ className: cn(comboboxChipsVariants({ size: resolvedSize }), className),
206
+ ...props
207
+ });
208
+ }
209
+ function ComboboxChip({ className, children, showRemove = true, ...props }) {
210
+ const resolvedSize = useComponentSize();
211
+ return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
212
+ "data-slot": "combobox-chip",
213
+ className: cn(comboboxChipVariants({ size: resolvedSize }), className),
214
+ ...props,
215
+ children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
216
+ className: "-ml-1 opacity-50 hover:opacity-100",
217
+ "data-slot": "combobox-chip-remove",
218
+ render: /* @__PURE__ */ jsx(Button, {
219
+ variant: "ghost",
220
+ size: "icon-xs",
221
+ children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
222
+ })
223
+ })]
224
+ });
225
+ }
226
+ function ComboboxChipsInput({ className, ...props }) {
227
+ return /* @__PURE__ */ jsx(Combobox$1.Input, {
228
+ "data-slot": "combobox-chip-input",
229
+ className: cn("min-w-16 flex-1 bg-transparent text-fg-primary outline-none placeholder:text-fg-caption-placeholder", className),
230
+ ...props
231
+ });
691
232
  }
692
233
  function useComboboxAnchor() {
693
- return React.useRef(null);
234
+ return React.useRef(null);
694
235
  }
695
- export {
696
- Combobox,
697
- ComboboxChip,
698
- ComboboxChips,
699
- ComboboxChipsInput,
700
- ComboboxCollection,
701
- ComboboxContent,
702
- ComboboxEmpty,
703
- ComboboxGroup,
704
- ComboboxInput,
705
- ComboboxItem,
706
- ComboboxLabel,
707
- ComboboxList,
708
- ComboboxSeparator,
709
- ComboboxTrigger,
710
- ComboboxValue,
711
- useComboboxAnchor
712
- };
713
- //# sourceMappingURL=combobox.js.map
236
+ //#endregion
237
+ export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };