@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.
- package/dist/app/layout.css +30 -2
- package/dist/app/layout.css.map +1 -1
- package/dist/app/page.cjs +324 -114
- package/dist/app/page.cjs.map +1 -1
- package/dist/app/page.js +302 -92
- package/dist/app/page.js.map +1 -1
- package/dist/components/demos/ComboboxDemo.cjs +91 -52
- package/dist/components/demos/ComboboxDemo.cjs.map +1 -1
- package/dist/components/demos/ComboboxDemo.js +84 -45
- package/dist/components/demos/ComboboxDemo.js.map +1 -1
- package/dist/components/demos/CounterDemo.cjs +270 -0
- package/dist/components/demos/CounterDemo.cjs.map +1 -0
- package/dist/components/demos/CounterDemo.d.cts +5 -0
- package/dist/components/demos/CounterDemo.d.ts +5 -0
- package/dist/components/demos/CounterDemo.js +238 -0
- package/dist/components/demos/CounterDemo.js.map +1 -0
- package/dist/components/demos/InputDemo.cjs +74 -35
- package/dist/components/demos/InputDemo.cjs.map +1 -1
- package/dist/components/demos/InputDemo.js +59 -30
- package/dist/components/demos/InputDemo.js.map +1 -1
- package/dist/components/demos/SelectDemo.cjs +83 -53
- package/dist/components/demos/SelectDemo.cjs.map +1 -1
- package/dist/components/demos/SelectDemo.js +73 -43
- package/dist/components/demos/SelectDemo.js.map +1 -1
- package/dist/components/demos/index.cjs +322 -112
- package/dist/components/demos/index.cjs.map +1 -1
- package/dist/components/demos/index.js +300 -90
- package/dist/components/demos/index.js.map +1 -1
- package/dist/components/primitives/tooltip.cjs +75 -0
- package/dist/components/primitives/tooltip.cjs.map +1 -0
- package/dist/components/primitives/tooltip.d.cts +9 -0
- package/dist/components/primitives/tooltip.d.ts +9 -0
- package/dist/components/primitives/tooltip.js +38 -0
- package/dist/components/primitives/tooltip.js.map +1 -0
- package/dist/components/ui/Combobox.cjs +78 -40
- package/dist/components/ui/Combobox.cjs.map +1 -1
- package/dist/components/ui/Combobox.d.cts +5 -2
- package/dist/components/ui/Combobox.d.ts +5 -2
- package/dist/components/ui/Combobox.js +71 -33
- package/dist/components/ui/Combobox.js.map +1 -1
- package/dist/components/ui/Counter.cjs +248 -0
- package/dist/components/ui/Counter.cjs.map +1 -0
- package/dist/components/ui/Counter.d.cts +28 -0
- package/dist/components/ui/Counter.d.ts +28 -0
- package/dist/components/ui/Counter.js +214 -0
- package/dist/components/ui/Counter.js.map +1 -0
- package/dist/components/ui/Input.cjs +67 -28
- package/dist/components/ui/Input.cjs.map +1 -1
- package/dist/components/ui/Input.d.cts +2 -1
- package/dist/components/ui/Input.d.ts +2 -1
- package/dist/components/ui/Input.js +54 -25
- package/dist/components/ui/Input.js.map +1 -1
- package/dist/components/ui/Label.cjs +54 -16
- package/dist/components/ui/Label.cjs.map +1 -1
- package/dist/components/ui/Label.d.cts +2 -1
- package/dist/components/ui/Label.d.ts +2 -1
- package/dist/components/ui/Label.js +44 -16
- package/dist/components/ui/Label.js.map +1 -1
- package/dist/components/ui/Select.cjs +75 -46
- package/dist/components/ui/Select.cjs.map +1 -1
- package/dist/components/ui/Select.d.cts +3 -2
- package/dist/components/ui/Select.d.ts +3 -2
- package/dist/components/ui/Select.js +67 -38
- package/dist/components/ui/Select.js.map +1 -1
- package/dist/index.cjs +323 -138
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +295 -111
- package/dist/index.js.map +1 -1
- package/dist/styles/globals.css +30 -2
- package/dist/styles/globals.css.map +1 -1
- 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
|
|
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/
|
|
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
|
-
|
|
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,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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
|
|
81
|
-
var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0,
|
|
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
|
|
106
|
-
var
|
|
107
|
-
var Separator =
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
201
|
-
|
|
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,
|
|
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,
|
|
220
|
-
multiselect && !!chipLabels?.length && /* @__PURE__ */ (0,
|
|
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,
|
|
227
|
-
/* @__PURE__ */ (0,
|
|
228
|
-
/* @__PURE__ */ (0,
|
|
229
|
-
|
|
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,
|
|
242
|
-
options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ (0,
|
|
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,
|
|
252
|
-
/* @__PURE__ */ (0,
|
|
253
|
-
|
|
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,
|
|
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\"> *</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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAiC;AACjC,0BAA8C;AAC9C,mBAOO;;;ACXP,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ACOI;AAJJ,SAAS,aAAa,EAAE,SAAS,WAAW,GAAG,MAAM,GAAoB;AACvE,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,4CAAC,OAAE,WAAW,GAAG,6BAA6B,SAAS,GAAI,GAAG,OAC3D,mBACH;AAEJ;AAEA,IAAO,uBAAQ;;;ACLX,IAAAA,sBAAA;AAJJ,SAAS,MAAM,EAAE,MAAM,UAAU,WAAW,GAAG,MAAM,GAAoB;AACvE,MAAI,CAAC,KAAM,QAAO;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,YAAY,6CAAC,UAAK,WAAU,gBAAe,mBAAO;AAAA;AAAA;AAAA,EACrD;AAEJ;AAEA,IAAO,gBAAQ;;;AC1Bf,iBAAuC;AAEvC,IAAAC,yBAAwB;AAOtB,IAAAC,sBAAA;AADF,IAAM,OAAO,CAAC,EAAE,WAAW,SAAS,MAAM,GAAG,MAAM,MACjD,6CAAC,SAAI,eAAW,gCAAQ,aAAa,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC,GAAI,GAAG,OAAO;AAGlF,IAAM,mBAAe,gBAAI,CAAC,QAAQ,gBAAgB,eAAe,UAAU,OAAO,GAAG;AAAA,EACnF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,gBAAgB,gBAAgB;AAAA,MAC1C,SAAS,CAAC,mBAAmB,kBAAkB;AAAA,MAC/C,QAAQ,CAAC,oBAAoB,mBAAmB;AAAA,MAChD,YAAY,CAAC,kBAAkB,eAAe,gBAAgB;AAAA,MAC9D,oBAAoB,CAAC,cAAc,eAAe,gBAAgB;AAAA,IACpE;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,CAAC,WAAW,aAAa,QAAQ,QAAQ,SAAS;AAAA,MACzD,QAAQ,CAAC,aAAa,aAAa,QAAQ,QAAQ,OAAO;AAAA,IAC5D;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;AAED,IAAO,eAAQ;;;AC9Bf,yBAAoC;AACpC,YAAuB;AAQrB,IAAAC,sBAAA;AAJF,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,MAAM,GAAG,QACzE;AAAA,EAAoB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,eAAe,mBAAmB;AAAA,MAClD;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAiC,wBAAK;;;ALwDxC,IAAAC,sBAAA;AAjDR,IAAM,aAAS;AAAA,EACb,CAAC,EAAE,OAAO,SAAS,aAAa,aAAa,YAAY,OAAO,IAAI,GAAG,MAAM,GAAG,QAAQ;AACtF,UAAM,EAAE,OAAO,cAAc,KAAK,WAAW,UAAU,GAAG,KAAK,IAAI;AACnE,UAAM,CAAC,UAAU,WAAW,QAAI,uBAAmB,CAAC,CAAC;AACrD,UAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,UAAM,mBAAe,qBAAuB,IAAI;AAEhD,gCAAU,MAAM;AACd,UAAI,CAAC,MAAO,QAAO,YAAY,CAAC,CAAC;AACjC,kBAAY,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAAA,IACpD,GAAG,CAAC,KAAK,CAAC;AAEV,UAAM,aAAa,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI;AAChD,UAAM,gBAAgB,CAAC,UAAyB,MAAM,QAAQ,YAAY,QAAQ,KAAK;AACvF,UAAM,kBAAkB,CAAC,OAAsBC,WAC7C,MAAM,QAAQ,WAAW,aAAaA,MAAK;AAE7C,UAAM,aAAa,UACf,IAAI,CAAC,MAAM,SAAS,KAAK,CAAC,EAAE,OAAAA,OAAM,MAAMA,WAAU,CAAC,CAAC,EACrD,OAAO,OAAO;AAEjB,aAAS,eAAe;AACtB,UAAI,aAAa;AACf,eAAO,SAAS,IAAI,CAAC,MAAM,SAAS,KAAK,CAAC,WAAW,OAAO,UAAU,CAAC,GAAG,KAAK,EAAE,KAAK,IAAI;AAAA,MAC5F;AACA,aAAO,SAAS,KAAK,CAAC,WAAW,OAAO,UAAU,SAAS,KAAK,CAAC,GAAG;AAAA,IACtE;AAEA,aAAS,mBAAmB,QAAiB;AAC3C,UAAI,CAAC,eAAe,OAAQ,SAAQ,MAAM;AAAA,IAC5C;AAEA,aAAS,aAAa,UAAkB;AACtC,UAAI,cAAwB,CAAC;AAC7B,kBAAY,CAAC,SAAS;AACpB,sBAAc,KAAK,SAAS,QAAQ,IAChC,KAAK,OAAO,CAAC,SAAS,SAAS,QAAQ,IACvC,CAAC,GAAG,MAAM,QAAQ;AACtB,eAAO,cAAc,cAAc,CAAC,QAAQ;AAAA,MAC9C,CAAC;AACD,iBAAW,cAAc,cAAc,QAAQ;AAAA,IACjD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,KAAK;AAAA,QACL,eAAa,IAAI,SAAS,KAAK,YAAY,CAAC;AAAA,QAE5C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,SAAS,MAAM;AAAA,cACf,UAAU,MAAM;AAAA,cAChB,WAAW,YAAY;AAAA;AAAA,UACzB;AAAA,UAEA;AAAA,YAAiB;AAAA,YAAhB;AAAA,cACC;AAAA,cACA,OAAO,SAAS,KAAK,GAAG;AAAA,cACxB,cAAc;AAAA,cACd,eAAe,cAAc,SAAY;AAAA,cACzC,cAAc,OAAO,iBAAiB,WAAW,eAAe;AAAA,cAChE,KAAK,QAAQ,QAAQ,QAAQ;AAAA,cAC5B,GAAG;AAAA,cAEJ;AAAA;AAAA,kBAAiB;AAAA,kBAAhB;AAAA,oBACC;AAAA,oBACA,WAAW;AAAA,sBACT;AAAA,sBACA,YAAY;AAAA,oBACd;AAAA,oBAEA;AAAA,mEAAC,UAAK,WAAU,YACd;AAAA,wBAAiB;AAAA,wBAAhB;AAAA,0BACC,aAAa,eAAe;AAAA,0BAC5B,cAAY,aAAa;AAAA,0BAExB,uBAAa;AAAA;AAAA,sBAChB,GACF;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAU;AAAA,0BACV,MAAK;AAAA;AAAA,sBACP;AAAA;AAAA;AAAA,gBACF;AAAA,gBAEA,6CAAiB,wBAAhB,EAAuB,WAAW,aAAa,SAC9C;AAAA,kBAAiB;AAAA,kBAAhB;AAAA,oBACC,kBAAgB;AAAA,oBAChB,WAAU;AAAA,oBACV,UAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,sBAAsB;AAAA,oBACtB,WAAW;AAAA,oBAEX,wDAAiB,0BAAhB,EACE;AAAA,qCAAe,CAAC,CAAC,YAAY,UAC5B;AAAA,wBAAiB;AAAA,wBAAhB;AAAA,0BACC,WAAU;AAAA,0BACV,eAAY;AAAA,0BAEX,sBAAY;AAAA,4BACX,CAAC,SACC,QACE,8CAAC,gBAAsB,MAAK,SAAQ,SAAQ,WAC1C;AAAA,2EAAC,UAAM,eAAK,OAAM;AAAA,8BAClB;AAAA,gCAAC;AAAA;AAAA,kCACC,MAAM;AAAA,kCACN,eAAa,eAAe,KAAK,KAAK;AAAA,kCACtC,WAAU;AAAA,kCACV,SAAS,MAAM,aAAa,KAAK,KAAK;AAAA;AAAA,8BACxC;AAAA,iCAPS,KAAK,KAQhB;AAAA,0BAEN;AAAA;AAAA,sBACF;AAAA,sBAEF,6CAAC,aAAU;AAAA,sBACV,SAAS,IAAI,CAAC,EAAE,IAAAC,KAAI,OAAO,OAAAD,OAAM,MAChC;AAAA,wBAAiB;AAAA,wBAAhB;AAAA,0BAEC,OAAOA;AAAA,0BACP,WAAU;AAAA,0BACV,cAAY,SAAS,SAASA,MAAK,IAAI,YAAY;AAAA,0BACnD,WAAW,CAAC,MAAM,gBAAgB,GAAGA,MAAK;AAAA,0BAC1C,SAAS,MAAM,aAAaA,MAAK;AAAA,0BAEjC;AAAA,yEAAiB,0BAAhB,EAA0B,iBAAM;AAAA,4BACjC;AAAA,8BAAC;AAAA;AAAA,gCACC,WAAU;AAAA,gCACV,MAAM;AAAA;AAAA,4BACR;AAAA;AAAA;AAAA,wBAXKC;AAAA,sBAYP,CACD;AAAA,uBACH;AAAA;AAAA,gBACF,GACF;AAAA;AAAA;AAAA,UACF;AAAA,UAEA,6CAAC,wBAAa,SAAS,OAAO;AAAA;AAAA;AAAA,IAChC;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ;","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\"> *</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
|
-
|
|
14
|
+
description?: string;
|
|
15
|
+
error?: string;
|
|
15
16
|
classNames?: {
|
|
16
17
|
label?: string;
|
|
17
18
|
trigger?: string;
|
|
18
19
|
};
|
|
19
|
-
|
|
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
|
-
|
|
14
|
+
description?: string;
|
|
15
|
+
error?: string;
|
|
15
16
|
classNames?: {
|
|
16
17
|
label?: string;
|
|
17
18
|
trigger?: string;
|
|
18
19
|
};
|
|
19
|
-
|
|
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
|
|
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 {
|
|
30
|
-
|
|
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
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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
|
|
53
|
-
var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */
|
|
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
|
|
78
|
-
import { jsx as
|
|
79
|
-
var Separator =
|
|
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
|
|
97
|
-
var Select =
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
200
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
224
|
-
/* @__PURE__ */
|
|
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__ */
|
|
270
|
+
/* @__PURE__ */ jsx6(ErrorMessage_default, { message: error })
|
|
242
271
|
]
|
|
243
272
|
}
|
|
244
273
|
);
|