@next-degree/pickle-shared-js 0.3.27 → 0.3.30

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 (73) hide show
  1. package/dist/app/layout.css +30 -2
  2. package/dist/app/layout.css.map +1 -1
  3. package/dist/app/page.cjs +324 -114
  4. package/dist/app/page.cjs.map +1 -1
  5. package/dist/app/page.js +302 -92
  6. package/dist/app/page.js.map +1 -1
  7. package/dist/components/demos/ComboboxDemo.cjs +91 -52
  8. package/dist/components/demos/ComboboxDemo.cjs.map +1 -1
  9. package/dist/components/demos/ComboboxDemo.js +84 -45
  10. package/dist/components/demos/ComboboxDemo.js.map +1 -1
  11. package/dist/components/demos/CounterDemo.cjs +270 -0
  12. package/dist/components/demos/CounterDemo.cjs.map +1 -0
  13. package/dist/components/demos/CounterDemo.d.cts +5 -0
  14. package/dist/components/demos/CounterDemo.d.ts +5 -0
  15. package/dist/components/demos/CounterDemo.js +238 -0
  16. package/dist/components/demos/CounterDemo.js.map +1 -0
  17. package/dist/components/demos/InputDemo.cjs +74 -35
  18. package/dist/components/demos/InputDemo.cjs.map +1 -1
  19. package/dist/components/demos/InputDemo.js +59 -30
  20. package/dist/components/demos/InputDemo.js.map +1 -1
  21. package/dist/components/demos/SelectDemo.cjs +83 -53
  22. package/dist/components/demos/SelectDemo.cjs.map +1 -1
  23. package/dist/components/demos/SelectDemo.js +73 -43
  24. package/dist/components/demos/SelectDemo.js.map +1 -1
  25. package/dist/components/demos/index.cjs +322 -112
  26. package/dist/components/demos/index.cjs.map +1 -1
  27. package/dist/components/demos/index.js +300 -90
  28. package/dist/components/demos/index.js.map +1 -1
  29. package/dist/components/primitives/tooltip.cjs +75 -0
  30. package/dist/components/primitives/tooltip.cjs.map +1 -0
  31. package/dist/components/primitives/tooltip.d.cts +9 -0
  32. package/dist/components/primitives/tooltip.d.ts +9 -0
  33. package/dist/components/primitives/tooltip.js +38 -0
  34. package/dist/components/primitives/tooltip.js.map +1 -0
  35. package/dist/components/ui/Combobox.cjs +78 -40
  36. package/dist/components/ui/Combobox.cjs.map +1 -1
  37. package/dist/components/ui/Combobox.d.cts +5 -2
  38. package/dist/components/ui/Combobox.d.ts +5 -2
  39. package/dist/components/ui/Combobox.js +71 -33
  40. package/dist/components/ui/Combobox.js.map +1 -1
  41. package/dist/components/ui/Counter.cjs +248 -0
  42. package/dist/components/ui/Counter.cjs.map +1 -0
  43. package/dist/components/ui/Counter.d.cts +28 -0
  44. package/dist/components/ui/Counter.d.ts +28 -0
  45. package/dist/components/ui/Counter.js +214 -0
  46. package/dist/components/ui/Counter.js.map +1 -0
  47. package/dist/components/ui/Input.cjs +67 -28
  48. package/dist/components/ui/Input.cjs.map +1 -1
  49. package/dist/components/ui/Input.d.cts +2 -1
  50. package/dist/components/ui/Input.d.ts +2 -1
  51. package/dist/components/ui/Input.js +54 -25
  52. package/dist/components/ui/Input.js.map +1 -1
  53. package/dist/components/ui/Label.cjs +54 -16
  54. package/dist/components/ui/Label.cjs.map +1 -1
  55. package/dist/components/ui/Label.d.cts +2 -1
  56. package/dist/components/ui/Label.d.ts +2 -1
  57. package/dist/components/ui/Label.js +44 -16
  58. package/dist/components/ui/Label.js.map +1 -1
  59. package/dist/components/ui/Select.cjs +75 -46
  60. package/dist/components/ui/Select.cjs.map +1 -1
  61. package/dist/components/ui/Select.d.cts +3 -2
  62. package/dist/components/ui/Select.d.ts +3 -2
  63. package/dist/components/ui/Select.js +67 -38
  64. package/dist/components/ui/Select.js.map +1 -1
  65. package/dist/index.cjs +323 -138
  66. package/dist/index.cjs.map +1 -1
  67. package/dist/index.d.cts +1 -0
  68. package/dist/index.d.ts +1 -0
  69. package/dist/index.js +295 -111
  70. package/dist/index.js.map +1 -1
  71. package/dist/styles/globals.css +30 -2
  72. package/dist/styles/globals.css.map +1 -1
  73. package/package.json +1 -1
@@ -35,7 +35,7 @@ __export(Select_exports, {
35
35
  });
36
36
  module.exports = __toCommonJS(Select_exports);
37
37
  var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
38
- var import_lucide_react = require("lucide-react");
38
+ var import_lucide_react2 = require("lucide-react");
39
39
  var import_react = require("react");
40
40
 
41
41
  // src/lib/utils.ts
@@ -53,32 +53,60 @@ function ErrorMessage({ message, className, ...props }) {
53
53
  }
54
54
  var ErrorMessage_default = ErrorMessage;
55
55
 
56
- // src/components/ui/Label.tsx
56
+ // src/components/primitives/tooltip.tsx
57
+ var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
58
+ var React = __toESM(require("react"), 1);
57
59
  var import_jsx_runtime2 = require("react/jsx-runtime");
58
- function Label({ text, required, className, ...props }) {
60
+ var TooltipProvider = TooltipPrimitive.Provider;
61
+ var Tooltip = TooltipPrimitive.Root;
62
+ var TooltipTrigger = TooltipPrimitive.Trigger;
63
+ var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
64
+ TooltipPrimitive.Content,
65
+ {
66
+ ref,
67
+ sideOffset,
68
+ className: cn(
69
+ "z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
70
+ className
71
+ ),
72
+ ...props
73
+ }
74
+ ));
75
+ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
76
+
77
+ // src/components/ui/Label.tsx
78
+ var import_lucide_react = require("lucide-react");
79
+ var import_jsx_runtime3 = require("react/jsx-runtime");
80
+ function Label({ text, required, description, className, ...props }) {
59
81
  if (!text) return null;
60
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
61
- "label",
62
- {
63
- className: cn(
64
- "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
65
- className
66
- ),
67
- ...props,
68
- children: [
69
- text,
70
- required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-red-600", children: "\xA0*" })
71
- ]
72
- }
73
- );
82
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full flex-row gap-1", children: [
83
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
84
+ "label",
85
+ {
86
+ className: cn(
87
+ "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
88
+ className
89
+ ),
90
+ ...props,
91
+ children: [
92
+ text,
93
+ required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-red-600", children: "\xA0*" })
94
+ ]
95
+ }
96
+ ),
97
+ !!description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Tooltip, { children: [
98
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.InfoIcon, { className: "h-4 w-4" }) }),
99
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipContent, { className: "max-w-48", children: description })
100
+ ] }) })
101
+ ] });
74
102
  }
75
103
  var Label_default = Label;
76
104
 
77
105
  // src/components/ui/Chip.tsx
78
106
  var import_cva = require("cva");
79
107
  var import_tailwind_merge2 = require("tailwind-merge");
80
- var import_jsx_runtime3 = require("react/jsx-runtime");
81
- var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)(chipVariants({ variant, size, className })), ...props });
108
+ var import_jsx_runtime4 = require("react/jsx-runtime");
109
+ var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)(chipVariants({ variant, size, className })), ...props });
82
110
  var chipVariants = (0, import_cva.cva)(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
83
111
  variants: {
84
112
  variant: {
@@ -102,9 +130,9 @@ var Chip_default = Chip;
102
130
 
103
131
  // src/components/primitives/separator.tsx
104
132
  var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
105
- var React = __toESM(require("react"), 1);
106
- var import_jsx_runtime4 = require("react/jsx-runtime");
107
- var Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
133
+ var React2 = __toESM(require("react"), 1);
134
+ var import_jsx_runtime5 = require("react/jsx-runtime");
135
+ var Separator = React2.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
108
136
  SeparatorPrimitive.Root,
109
137
  {
110
138
  ref,
@@ -121,9 +149,9 @@ var Separator = React.forwardRef(({ className, orientation = "horizontal", decor
121
149
  Separator.displayName = SeparatorPrimitive.Root.displayName;
122
150
 
123
151
  // src/components/ui/Select.tsx
124
- var import_jsx_runtime5 = require("react/jsx-runtime");
152
+ var import_jsx_runtime6 = require("react/jsx-runtime");
125
153
  var Select = (0, import_react.forwardRef)(
126
- ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
154
+ ({ label, options, placeholder, multiselect, description, classNames, error, id, ...props }, ref) => {
127
155
  const { value, defaultValue, dir, className, onChange, ...rest } = props;
128
156
  const [selected, setSelected] = (0, import_react.useState)([]);
129
157
  const [open, setOpen] = (0, import_react.useState)(false);
@@ -153,23 +181,24 @@ var Select = (0, import_react.forwardRef)(
153
181
  });
154
182
  onChange?.(multiselect ? newSelected : newValue);
155
183
  }
156
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
184
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
157
185
  "div",
158
186
  {
159
- className: cn("flex flex-col gap-1", className),
187
+ className: cn("flex w-full flex-col gap-1", className),
160
188
  ref: containerRef,
161
189
  "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
162
190
  children: [
163
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
191
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
164
192
  Label_default,
165
193
  {
166
194
  text: label,
167
195
  htmlFor: props.name,
168
196
  required: props.required,
197
+ description,
169
198
  className: classNames?.label
170
199
  }
171
200
  ),
172
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
201
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
173
202
  SelectPrimitive.Root,
174
203
  {
175
204
  open,
@@ -180,16 +209,16 @@ var Select = (0, import_react.forwardRef)(
180
209
  dir: dir === "rtl" ? "rtl" : "ltr",
181
210
  ...rest,
182
211
  children: [
183
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
212
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
184
213
  SelectPrimitive.Trigger,
185
214
  {
186
215
  ref,
187
216
  className: cn(
188
- "group flex h-11 min-w-80 flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
217
+ "group flex h-11 w-full flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
189
218
  classNames?.trigger
190
219
  ),
191
220
  children: [
192
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
221
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
193
222
  SelectPrimitive.Value,
194
223
  {
195
224
  placeholder: placeholder ?? "Select an option",
@@ -197,8 +226,8 @@ var Select = (0, import_react.forwardRef)(
197
226
  children: handleLabels()
198
227
  }
199
228
  ) }),
200
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
201
- import_lucide_react.ChevronDownIcon,
229
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
230
+ import_lucide_react2.ChevronDownIcon,
202
231
  {
203
232
  className: "transform text-black group-data-[state=open]:rotate-180",
204
233
  size: "16"
@@ -207,7 +236,7 @@ var Select = (0, import_react.forwardRef)(
207
236
  ]
208
237
  }
209
238
  ),
210
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
239
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
211
240
  SelectPrimitive.Content,
212
241
  {
213
242
  hideWhenDetached: true,
@@ -216,17 +245,17 @@ var Select = (0, import_react.forwardRef)(
216
245
  sideOffset: 4,
217
246
  onPointerDownOutside: toggleOpen,
218
247
  onKeyDown: closeOnEscape,
219
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(SelectPrimitive.Viewport, { children: [
220
- multiselect && !!chipLabels?.length && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
248
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SelectPrimitive.Viewport, { children: [
249
+ multiselect && !!chipLabels?.length && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
221
250
  SelectPrimitive.Group,
222
251
  {
223
252
  className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
224
253
  "data-testid": "selected-labels",
225
254
  children: chipLabels?.map(
226
- (chip) => chip && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Chip_default, { size: "small", variant: "primary", children: [
227
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: chip.title }),
228
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
229
- import_lucide_react.X,
255
+ (chip) => chip && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Chip_default, { size: "small", variant: "primary", children: [
256
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: chip.title }),
257
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
258
+ import_lucide_react2.X,
230
259
  {
231
260
  size: 18,
232
261
  "data-testid": `chip-remove-${chip.value}`,
@@ -238,8 +267,8 @@ var Select = (0, import_react.forwardRef)(
238
267
  )
239
268
  }
240
269
  ),
241
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Separator, {}),
242
- options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
270
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Separator, {}),
271
+ options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
243
272
  SelectPrimitive.Item,
244
273
  {
245
274
  value: value2,
@@ -248,9 +277,9 @@ var Select = (0, import_react.forwardRef)(
248
277
  onKeyDown: (e) => setValueOnEnter(e, value2),
249
278
  onClick: () => handleChange(value2),
250
279
  children: [
251
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ItemText, { children: title }),
252
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
253
- import_lucide_react.CheckIcon,
280
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPrimitive.ItemText, { children: title }),
281
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
282
+ import_lucide_react2.CheckIcon,
254
283
  {
255
284
  className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
256
285
  size: 16
@@ -266,7 +295,7 @@ var Select = (0, import_react.forwardRef)(
266
295
  ]
267
296
  }
268
297
  ),
269
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage_default, { message: error })
298
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorMessage_default, { message: error })
270
299
  ]
271
300
  }
272
301
  );
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ui/Select.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/ui/Label.tsx","../../../src/components/ui/Chip.tsx","../../../src/components/primitives/separator.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { CheckIcon, ChevronDownIcon, X } from 'lucide-react'\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n useEffect,\n useRef,\n useState,\n} from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport Chip from '@/components/ui/Chip'\nimport { Separator } from '@/components/primitives/separator'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'onChange'> {\n label?: string\n value?: string | string[]\n options?: { id: string | number; value: string; title: string }[]\n placeholder?: string\n multiselect?: boolean\n onChange?: (value: string | string[]) => void\n classNames?: { label?: string; trigger?: string }\n error?: string\n}\n\nconst Select = forwardRef<HTMLButtonElement, Props>(\n ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {\n const { value, defaultValue, dir, className, onChange, ...rest } = props\n const [selected, setSelected] = useState<string[]>([])\n const [open, setOpen] = useState(false)\n const containerRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (!value) return setSelected([])\n setSelected(Array.isArray(value) ? value : [value])\n }, [value])\n\n const toggleOpen = () => setOpen((prev) => !prev)\n const closeOnEscape = (event: KeyboardEvent) => event.key === 'Escape' && setOpen(false)\n const setValueOnEnter = (event: KeyboardEvent, value: string) =>\n event.key === 'Enter' && handleChange(value)\n\n const chipLabels = selected\n ?.map((s) => options?.find(({ value }) => value === s))\n .filter(Boolean)\n\n function handleLabels() {\n if (multiselect) {\n return selected.map((o) => options?.find((option) => option.value === o)?.title).join(', ')\n }\n return options?.find((option) => option.value === selected.join())?.title\n }\n\n function handleOnOpenChange(isOpen: boolean) {\n if (!multiselect || isOpen) setOpen(isOpen)\n }\n\n function handleChange(newValue: string) {\n let newSelected: string[] = []\n setSelected((prev) => {\n newSelected = prev.includes(newValue)\n ? prev.filter((item) => item !== newValue)\n : [...prev, newValue]\n return multiselect ? newSelected : [newValue]\n })\n onChange?.(multiselect ? newSelected : newValue)\n }\n\n return (\n <div\n className={cn('flex flex-col gap-1', className)}\n ref={containerRef}\n data-testid={`${(label ?? id)?.toLowerCase()}-select-element`}\n >\n <Label\n text={label}\n htmlFor={props.name}\n required={props.required}\n className={classNames?.label}\n />\n\n <SelectPrimitive.Root\n open={open}\n value={selected.join(',')}\n onOpenChange={handleOnOpenChange}\n onValueChange={multiselect ? undefined : handleChange}\n defaultValue={typeof defaultValue === 'string' ? defaultValue : undefined}\n dir={dir === 'rtl' ? 'rtl' : 'ltr'}\n {...rest}\n >\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'group flex h-11 min-w-80 flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40',\n classNames?.trigger\n )}\n >\n <span className=\"truncate\">\n <SelectPrimitive.Value\n placeholder={placeholder ?? 'Select an option'}\n aria-label={handleLabels()}\n >\n {handleLabels()}\n </SelectPrimitive.Value>\n </span>\n\n <ChevronDownIcon\n className=\"transform text-black group-data-[state=open]:rotate-180\"\n size=\"16\"\n />\n </SelectPrimitive.Trigger>\n\n <SelectPrimitive.Portal container={containerRef.current}>\n <SelectPrimitive.Content\n hideWhenDetached\n className=\"z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg\"\n position=\"popper\"\n sideOffset={4}\n onPointerDownOutside={toggleOpen}\n onKeyDown={closeOnEscape}\n >\n <SelectPrimitive.Viewport>\n {multiselect && !!chipLabels?.length && (\n <SelectPrimitive.Group\n className=\"mb-2 flex flex-row flex-wrap gap-1 px-2\"\n data-testid=\"selected-labels\"\n >\n {chipLabels?.map(\n (chip) =>\n chip && (\n <Chip key={chip.title} size=\"small\" variant=\"primary\">\n <span>{chip.title}</span>\n <X\n size={18}\n data-testid={`chip-remove-${chip.value}`}\n className=\"cursor-pointer\"\n onClick={() => handleChange(chip.value)}\n />\n </Chip>\n )\n )}\n </SelectPrimitive.Group>\n )}\n <Separator />\n {options?.map(({ id, title, value }) => (\n <SelectPrimitive.Item\n key={id}\n value={value}\n className=\"group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100\"\n data-state={selected.includes(value) ? 'checked' : 'unchecked'}\n onKeyDown={(e) => setValueOnEnter(e, value)}\n onClick={() => handleChange(value)}\n >\n <SelectPrimitive.ItemText>{title}</SelectPrimitive.ItemText>\n <CheckIcon\n className=\"absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block\"\n size={16}\n />\n </SelectPrimitive.Item>\n ))}\n </SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n </SelectPrimitive.Root>\n\n <ErrorMessage message={error} />\n </div>\n )\n }\n)\n\nSelect.displayName = 'Select'\n\nexport default Select\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n if (!message) return null\n\n return (\n <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n {message}\n </p>\n )\n}\n\nexport default ErrorMessage\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n text?: string\n required?: boolean\n}\n\nfunction Label({ text, required, className, ...props }: Readonly<Props>) {\n if (!text) return null\n\n return (\n <label\n className={cn(\n 'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n className\n )}\n {...props}\n >\n {text}\n {required && <span className=\"text-red-600\">&nbsp;*</span>}\n </label>\n )\n}\n\nexport default Label\n","import { cva, type VariantProps } from 'cva'\nimport React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\ninterface ChipProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof chipVariants> {}\n\nconst Chip = ({ className, variant, size, ...props }: ChipProps) => (\n <div className={twMerge(chipVariants({ variant, size, className }))} {...props} />\n)\n\nconst chipVariants = cva(['flex', 'items-center', 'rounded-3xl', 'border', 'w-fit'], {\n variants: {\n variant: {\n neutral: ['text-grey-80', 'border-grey-10'],\n primary: ['text-purple-100', 'border-purple-20'],\n danger: ['text-pumpkin-100', 'border-pumpkin-20'],\n onboarding: ['text-green-100', 'bg-green-10', 'cursor-pointer'],\n onboardingSelected: ['text-white', 'bg-green-90', 'cursor-pointer'],\n },\n size: {\n small: ['text-sm', 'leading-5', 'px-2', 'py-1', 'gap-1.5'],\n medium: ['text-base', 'leading-6', 'px-3', 'py-2', 'gap-2'],\n },\n },\n defaultVariants: {\n variant: 'neutral',\n size: 'medium',\n },\n})\n\nexport default Chip\n","'use client'\r\n\r\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\r\nimport * as React from 'react'\r\n\r\nimport { cn } from '@/lib/utils'\r\n\r\nconst Separator = React.forwardRef<\r\n React.ElementRef<typeof SeparatorPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\r\n>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (\r\n <SeparatorPrimitive.Root\r\n ref={ref}\r\n decorative={decorative}\r\n orientation={orientation}\r\n className={cn(\r\n 'shrink-0 bg-grey-10',\r\n orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nSeparator.displayName = SeparatorPrimitive.Root.displayName\r\n\r\nexport { Separator }\r\n"],"mappings":"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","names":["import_jsx_runtime","import_tailwind_merge","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","value","id"]}
1
+ {"version":3,"sources":["../../../src/components/ui/Select.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/primitives/tooltip.tsx","../../../src/components/ui/Label.tsx","../../../src/components/ui/Chip.tsx","../../../src/components/primitives/separator.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { CheckIcon, ChevronDownIcon, X } from 'lucide-react'\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n useEffect,\n useRef,\n useState,\n} from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport Chip from '@/components/ui/Chip'\nimport { Separator } from '@/components/primitives/separator'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'onChange'> {\n label?: string\n value?: string | string[]\n options?: { id: string | number; value: string; title: string }[]\n placeholder?: string\n multiselect?: boolean\n description?: string\n error?: string\n classNames?: { label?: string; trigger?: string }\n onChange?: (value: string | string[]) => void\n}\n\nconst Select = forwardRef<HTMLButtonElement, Props>(\n (\n { label, options, placeholder, multiselect, description, classNames, error, id, ...props },\n ref\n ) => {\n const { value, defaultValue, dir, className, onChange, ...rest } = props\n const [selected, setSelected] = useState<string[]>([])\n const [open, setOpen] = useState(false)\n const containerRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (!value) return setSelected([])\n setSelected(Array.isArray(value) ? value : [value])\n }, [value])\n\n const toggleOpen = () => setOpen((prev) => !prev)\n const closeOnEscape = (event: KeyboardEvent) => event.key === 'Escape' && setOpen(false)\n const setValueOnEnter = (event: KeyboardEvent, value: string) =>\n event.key === 'Enter' && handleChange(value)\n\n const chipLabels = selected\n ?.map((s) => options?.find(({ value }) => value === s))\n .filter(Boolean)\n\n function handleLabels() {\n if (multiselect) {\n return selected.map((o) => options?.find((option) => option.value === o)?.title).join(', ')\n }\n return options?.find((option) => option.value === selected.join())?.title\n }\n\n function handleOnOpenChange(isOpen: boolean) {\n if (!multiselect || isOpen) setOpen(isOpen)\n }\n\n function handleChange(newValue: string) {\n let newSelected: string[] = []\n setSelected((prev) => {\n newSelected = prev.includes(newValue)\n ? prev.filter((item) => item !== newValue)\n : [...prev, newValue]\n return multiselect ? newSelected : [newValue]\n })\n onChange?.(multiselect ? newSelected : newValue)\n }\n\n return (\n <div\n className={cn('flex w-full flex-col gap-1', className)}\n ref={containerRef}\n data-testid={`${(label ?? id)?.toLowerCase()}-select-element`}\n >\n <Label\n text={label}\n htmlFor={props.name}\n required={props.required}\n description={description}\n className={classNames?.label}\n />\n\n <SelectPrimitive.Root\n open={open}\n value={selected.join(',')}\n onOpenChange={handleOnOpenChange}\n onValueChange={multiselect ? undefined : handleChange}\n defaultValue={typeof defaultValue === 'string' ? defaultValue : undefined}\n dir={dir === 'rtl' ? 'rtl' : 'ltr'}\n {...rest}\n >\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'group flex h-11 w-full flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40',\n classNames?.trigger\n )}\n >\n <span className=\"truncate\">\n <SelectPrimitive.Value\n placeholder={placeholder ?? 'Select an option'}\n aria-label={handleLabels()}\n >\n {handleLabels()}\n </SelectPrimitive.Value>\n </span>\n\n <ChevronDownIcon\n className=\"transform text-black group-data-[state=open]:rotate-180\"\n size=\"16\"\n />\n </SelectPrimitive.Trigger>\n\n <SelectPrimitive.Portal container={containerRef.current}>\n <SelectPrimitive.Content\n hideWhenDetached\n className=\"z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg\"\n position=\"popper\"\n sideOffset={4}\n onPointerDownOutside={toggleOpen}\n onKeyDown={closeOnEscape}\n >\n <SelectPrimitive.Viewport>\n {multiselect && !!chipLabels?.length && (\n <SelectPrimitive.Group\n className=\"mb-2 flex flex-row flex-wrap gap-1 px-2\"\n data-testid=\"selected-labels\"\n >\n {chipLabels?.map(\n (chip) =>\n chip && (\n <Chip key={chip.title} size=\"small\" variant=\"primary\">\n <span>{chip.title}</span>\n <X\n size={18}\n data-testid={`chip-remove-${chip.value}`}\n className=\"cursor-pointer\"\n onClick={() => handleChange(chip.value)}\n />\n </Chip>\n )\n )}\n </SelectPrimitive.Group>\n )}\n <Separator />\n {options?.map(({ id, title, value }) => (\n <SelectPrimitive.Item\n key={id}\n value={value}\n className=\"group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100\"\n data-state={selected.includes(value) ? 'checked' : 'unchecked'}\n onKeyDown={(e) => setValueOnEnter(e, value)}\n onClick={() => handleChange(value)}\n >\n <SelectPrimitive.ItemText>{title}</SelectPrimitive.ItemText>\n <CheckIcon\n className=\"absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block\"\n size={16}\n />\n </SelectPrimitive.Item>\n ))}\n </SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n </SelectPrimitive.Root>\n\n <ErrorMessage message={error} />\n </div>\n )\n }\n)\n\nSelect.displayName = 'Select'\n\nexport default Select\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n if (!message) return null\n\n return (\n <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n {message}\n </p>\n )\n}\n\nexport default ErrorMessage\n","'use client'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n 'z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',\n className\n )}\n {...props}\n />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/primitives/tooltip'\nimport { InfoIcon } from 'lucide-react'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n text?: string\n required?: boolean\n description?: string\n}\n\nfunction Label({ text, required, description, className, ...props }: Readonly<Props>) {\n if (!text) return null\n\n return (\n <div className=\"flex w-full flex-row gap-1\">\n <label\n className={cn(\n 'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n className\n )}\n {...props}\n >\n {text}\n {required && <span className=\"text-red-600\">&nbsp;*</span>}\n </label>\n\n {!!description && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <InfoIcon className=\"h-4 w-4\" />\n </TooltipTrigger>\n <TooltipContent className=\"max-w-48\">{description}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n )\n}\n\nexport default Label\n","import { cva, type VariantProps } from 'cva'\nimport React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\ninterface ChipProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof chipVariants> {}\n\nconst Chip = ({ className, variant, size, ...props }: ChipProps) => (\n <div className={twMerge(chipVariants({ variant, size, className }))} {...props} />\n)\n\nconst chipVariants = cva(['flex', 'items-center', 'rounded-3xl', 'border', 'w-fit'], {\n variants: {\n variant: {\n neutral: ['text-grey-80', 'border-grey-10'],\n primary: ['text-purple-100', 'border-purple-20'],\n danger: ['text-pumpkin-100', 'border-pumpkin-20'],\n onboarding: ['text-green-100', 'bg-green-10', 'cursor-pointer'],\n onboardingSelected: ['text-white', 'bg-green-90', 'cursor-pointer'],\n },\n size: {\n small: ['text-sm', 'leading-5', 'px-2', 'py-1', 'gap-1.5'],\n medium: ['text-base', 'leading-6', 'px-3', 'py-2', 'gap-2'],\n },\n },\n defaultVariants: {\n variant: 'neutral',\n size: 'medium',\n },\n})\n\nexport default Chip\n","'use client'\r\n\r\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\r\nimport * as React from 'react'\r\n\r\nimport { cn } from '@/lib/utils'\r\n\r\nconst Separator = React.forwardRef<\r\n React.ElementRef<typeof SeparatorPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\r\n>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (\r\n <SeparatorPrimitive.Root\r\n ref={ref}\r\n decorative={decorative}\r\n orientation={orientation}\r\n className={cn(\r\n 'shrink-0 bg-grey-10',\r\n orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nSeparator.displayName = SeparatorPrimitive.Root.displayName\r\n\r\nexport { Separator }\r\n"],"mappings":"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","names":["import_lucide_react","import_jsx_runtime","import_jsx_runtime","import_tailwind_merge","import_jsx_runtime","React","import_jsx_runtime","import_jsx_runtime","value","id"]}
@@ -11,12 +11,13 @@ interface Props extends Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'onCh
11
11
  }[];
12
12
  placeholder?: string;
13
13
  multiselect?: boolean;
14
- onChange?: (value: string | string[]) => void;
14
+ description?: string;
15
+ error?: string;
15
16
  classNames?: {
16
17
  label?: string;
17
18
  trigger?: string;
18
19
  };
19
- error?: string;
20
+ onChange?: (value: string | string[]) => void;
20
21
  }
21
22
  declare const Select: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
22
23
 
@@ -11,12 +11,13 @@ interface Props extends Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'onCh
11
11
  }[];
12
12
  placeholder?: string;
13
13
  multiselect?: boolean;
14
- onChange?: (value: string | string[]) => void;
14
+ description?: string;
15
+ error?: string;
15
16
  classNames?: {
16
17
  label?: string;
17
18
  trigger?: string;
18
19
  };
19
- error?: string;
20
+ onChange?: (value: string | string[]) => void;
20
21
  }
21
22
  declare const Select: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
22
23
 
@@ -4,7 +4,7 @@
4
4
  import * as SelectPrimitive from "@radix-ui/react-select";
5
5
  import { CheckIcon, ChevronDownIcon, X } from "lucide-react";
6
6
  import {
7
- forwardRef as forwardRef2,
7
+ forwardRef as forwardRef3,
8
8
  useEffect,
9
9
  useRef,
10
10
  useState
@@ -25,32 +25,60 @@ function ErrorMessage({ message, className, ...props }) {
25
25
  }
26
26
  var ErrorMessage_default = ErrorMessage;
27
27
 
28
+ // src/components/primitives/tooltip.tsx
29
+ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
30
+ import * as React from "react";
31
+ import { jsx as jsx2 } from "react/jsx-runtime";
32
+ var TooltipProvider = TooltipPrimitive.Provider;
33
+ var Tooltip = TooltipPrimitive.Root;
34
+ var TooltipTrigger = TooltipPrimitive.Trigger;
35
+ var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx2(
36
+ TooltipPrimitive.Content,
37
+ {
38
+ ref,
39
+ sideOffset,
40
+ className: cn(
41
+ "z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
42
+ className
43
+ ),
44
+ ...props
45
+ }
46
+ ));
47
+ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
48
+
28
49
  // src/components/ui/Label.tsx
29
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
30
- function Label({ text, required, className, ...props }) {
50
+ import { InfoIcon } from "lucide-react";
51
+ import { jsx as jsx3, jsxs } from "react/jsx-runtime";
52
+ function Label({ text, required, description, className, ...props }) {
31
53
  if (!text) return null;
32
- return /* @__PURE__ */ jsxs(
33
- "label",
34
- {
35
- className: cn(
36
- "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
37
- className
38
- ),
39
- ...props,
40
- children: [
41
- text,
42
- required && /* @__PURE__ */ jsx2("span", { className: "text-red-600", children: "\xA0*" })
43
- ]
44
- }
45
- );
54
+ return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row gap-1", children: [
55
+ /* @__PURE__ */ jsxs(
56
+ "label",
57
+ {
58
+ className: cn(
59
+ "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
60
+ className
61
+ ),
62
+ ...props,
63
+ children: [
64
+ text,
65
+ required && /* @__PURE__ */ jsx3("span", { className: "text-red-600", children: "\xA0*" })
66
+ ]
67
+ }
68
+ ),
69
+ !!description && /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
70
+ /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(InfoIcon, { className: "h-4 w-4" }) }),
71
+ /* @__PURE__ */ jsx3(TooltipContent, { className: "max-w-48", children: description })
72
+ ] }) })
73
+ ] });
46
74
  }
47
75
  var Label_default = Label;
48
76
 
49
77
  // src/components/ui/Chip.tsx
50
78
  import { cva } from "cva";
51
79
  import { twMerge as twMerge2 } from "tailwind-merge";
52
- import { jsx as jsx3 } from "react/jsx-runtime";
53
- var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx3("div", { className: twMerge2(chipVariants({ variant, size, className })), ...props });
80
+ import { jsx as jsx4 } from "react/jsx-runtime";
81
+ var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx4("div", { className: twMerge2(chipVariants({ variant, size, className })), ...props });
54
82
  var chipVariants = cva(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
55
83
  variants: {
56
84
  variant: {
@@ -74,9 +102,9 @@ var Chip_default = Chip;
74
102
 
75
103
  // src/components/primitives/separator.tsx
76
104
  import * as SeparatorPrimitive from "@radix-ui/react-separator";
77
- import * as React from "react";
78
- import { jsx as jsx4 } from "react/jsx-runtime";
79
- var Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx4(
105
+ import * as React2 from "react";
106
+ import { jsx as jsx5 } from "react/jsx-runtime";
107
+ var Separator = React2.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx5(
80
108
  SeparatorPrimitive.Root,
81
109
  {
82
110
  ref,
@@ -93,9 +121,9 @@ var Separator = React.forwardRef(({ className, orientation = "horizontal", decor
93
121
  Separator.displayName = SeparatorPrimitive.Root.displayName;
94
122
 
95
123
  // src/components/ui/Select.tsx
96
- import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
97
- var Select = forwardRef2(
98
- ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
124
+ import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
125
+ var Select = forwardRef3(
126
+ ({ label, options, placeholder, multiselect, description, classNames, error, id, ...props }, ref) => {
99
127
  const { value, defaultValue, dir, className, onChange, ...rest } = props;
100
128
  const [selected, setSelected] = useState([]);
101
129
  const [open, setOpen] = useState(false);
@@ -128,16 +156,17 @@ var Select = forwardRef2(
128
156
  return /* @__PURE__ */ jsxs2(
129
157
  "div",
130
158
  {
131
- className: cn("flex flex-col gap-1", className),
159
+ className: cn("flex w-full flex-col gap-1", className),
132
160
  ref: containerRef,
133
161
  "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
134
162
  children: [
135
- /* @__PURE__ */ jsx5(
163
+ /* @__PURE__ */ jsx6(
136
164
  Label_default,
137
165
  {
138
166
  text: label,
139
167
  htmlFor: props.name,
140
168
  required: props.required,
169
+ description,
141
170
  className: classNames?.label
142
171
  }
143
172
  ),
@@ -157,11 +186,11 @@ var Select = forwardRef2(
157
186
  {
158
187
  ref,
159
188
  className: cn(
160
- "group flex h-11 min-w-80 flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
189
+ "group flex h-11 w-full flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
161
190
  classNames?.trigger
162
191
  ),
163
192
  children: [
164
- /* @__PURE__ */ jsx5("span", { className: "truncate", children: /* @__PURE__ */ jsx5(
193
+ /* @__PURE__ */ jsx6("span", { className: "truncate", children: /* @__PURE__ */ jsx6(
165
194
  SelectPrimitive.Value,
166
195
  {
167
196
  placeholder: placeholder ?? "Select an option",
@@ -169,7 +198,7 @@ var Select = forwardRef2(
169
198
  children: handleLabels()
170
199
  }
171
200
  ) }),
172
- /* @__PURE__ */ jsx5(
201
+ /* @__PURE__ */ jsx6(
173
202
  ChevronDownIcon,
174
203
  {
175
204
  className: "transform text-black group-data-[state=open]:rotate-180",
@@ -179,7 +208,7 @@ var Select = forwardRef2(
179
208
  ]
180
209
  }
181
210
  ),
182
- /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx5(
211
+ /* @__PURE__ */ jsx6(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx6(
183
212
  SelectPrimitive.Content,
184
213
  {
185
214
  hideWhenDetached: true,
@@ -189,15 +218,15 @@ var Select = forwardRef2(
189
218
  onPointerDownOutside: toggleOpen,
190
219
  onKeyDown: closeOnEscape,
191
220
  children: /* @__PURE__ */ jsxs2(SelectPrimitive.Viewport, { children: [
192
- multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx5(
221
+ multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx6(
193
222
  SelectPrimitive.Group,
194
223
  {
195
224
  className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
196
225
  "data-testid": "selected-labels",
197
226
  children: chipLabels?.map(
198
227
  (chip) => chip && /* @__PURE__ */ jsxs2(Chip_default, { size: "small", variant: "primary", children: [
199
- /* @__PURE__ */ jsx5("span", { children: chip.title }),
200
- /* @__PURE__ */ jsx5(
228
+ /* @__PURE__ */ jsx6("span", { children: chip.title }),
229
+ /* @__PURE__ */ jsx6(
201
230
  X,
202
231
  {
203
232
  size: 18,
@@ -210,7 +239,7 @@ var Select = forwardRef2(
210
239
  )
211
240
  }
212
241
  ),
213
- /* @__PURE__ */ jsx5(Separator, {}),
242
+ /* @__PURE__ */ jsx6(Separator, {}),
214
243
  options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ jsxs2(
215
244
  SelectPrimitive.Item,
216
245
  {
@@ -220,8 +249,8 @@ var Select = forwardRef2(
220
249
  onKeyDown: (e) => setValueOnEnter(e, value2),
221
250
  onClick: () => handleChange(value2),
222
251
  children: [
223
- /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children: title }),
224
- /* @__PURE__ */ jsx5(
252
+ /* @__PURE__ */ jsx6(SelectPrimitive.ItemText, { children: title }),
253
+ /* @__PURE__ */ jsx6(
225
254
  CheckIcon,
226
255
  {
227
256
  className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
@@ -238,7 +267,7 @@ var Select = forwardRef2(
238
267
  ]
239
268
  }
240
269
  ),
241
- /* @__PURE__ */ jsx5(ErrorMessage_default, { message: error })
270
+ /* @__PURE__ */ jsx6(ErrorMessage_default, { message: error })
242
271
  ]
243
272
  }
244
273
  );