@next-degree/pickle-shared-js 0.3.22 → 0.3.24

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 (49) hide show
  1. package/dist/app/layout.css +106 -5
  2. package/dist/app/layout.css.map +1 -1
  3. package/dist/app/page.cjs +364 -4
  4. package/dist/app/page.cjs.map +1 -1
  5. package/dist/app/page.js +369 -4
  6. package/dist/app/page.js.map +1 -1
  7. package/dist/components/demos/InputDemo.cjs +175 -0
  8. package/dist/components/demos/InputDemo.cjs.map +1 -0
  9. package/dist/components/demos/InputDemo.d.cts +5 -0
  10. package/dist/components/demos/InputDemo.d.ts +5 -0
  11. package/dist/components/demos/InputDemo.js +152 -0
  12. package/dist/components/demos/InputDemo.js.map +1 -0
  13. package/dist/components/demos/SelectDemo.cjs +323 -0
  14. package/dist/components/demos/SelectDemo.cjs.map +1 -0
  15. package/dist/components/demos/SelectDemo.d.cts +5 -0
  16. package/dist/components/demos/SelectDemo.d.ts +5 -0
  17. package/dist/components/demos/SelectDemo.js +295 -0
  18. package/dist/components/demos/SelectDemo.js.map +1 -0
  19. package/dist/components/demos/index.cjs +362 -2
  20. package/dist/components/demos/index.cjs.map +1 -1
  21. package/dist/components/demos/index.js +367 -2
  22. package/dist/components/demos/index.js.map +1 -1
  23. package/dist/components/ui/ErrorMessage.cjs +41 -0
  24. package/dist/components/ui/ErrorMessage.cjs.map +1 -0
  25. package/dist/components/ui/ErrorMessage.d.cts +9 -0
  26. package/dist/components/ui/ErrorMessage.d.ts +9 -0
  27. package/dist/components/ui/ErrorMessage.js +18 -0
  28. package/dist/components/ui/ErrorMessage.js.map +1 -0
  29. package/dist/components/ui/Input.cjs +159 -0
  30. package/dist/components/ui/Input.cjs.map +1 -0
  31. package/dist/components/ui/Input.d.cts +22 -0
  32. package/dist/components/ui/Input.d.ts +22 -0
  33. package/dist/components/ui/Input.js +138 -0
  34. package/dist/components/ui/Input.js.map +1 -0
  35. package/dist/components/ui/Select.cjs +124 -105
  36. package/dist/components/ui/Select.cjs.map +1 -1
  37. package/dist/components/ui/Select.d.cts +3 -1
  38. package/dist/components/ui/Select.d.ts +3 -1
  39. package/dist/components/ui/Select.js +124 -105
  40. package/dist/components/ui/Select.js.map +1 -1
  41. package/dist/index.cjs +311 -190
  42. package/dist/index.cjs.map +1 -1
  43. package/dist/index.d.cts +1 -0
  44. package/dist/index.d.ts +1 -0
  45. package/dist/index.js +301 -181
  46. package/dist/index.js.map +1 -1
  47. package/dist/styles/globals.css +106 -5
  48. package/dist/styles/globals.css.map +1 -1
  49. package/package.json +1 -1
@@ -0,0 +1,295 @@
1
+ // src/components/ui/Select.tsx
2
+ import * as SelectPrimitive from "@radix-ui/react-select";
3
+ import { CheckIcon, ChevronDownIcon, X } from "lucide-react";
4
+ import {
5
+ forwardRef as forwardRef2,
6
+ useEffect,
7
+ useRef,
8
+ useState
9
+ } from "react";
10
+
11
+ // src/lib/utils.ts
12
+ import { clsx } from "clsx";
13
+ import { twMerge } from "tailwind-merge";
14
+ function cn(...inputs) {
15
+ return twMerge(clsx(inputs));
16
+ }
17
+
18
+ // src/components/ui/ErrorMessage.tsx
19
+ import { jsx } from "react/jsx-runtime";
20
+ function ErrorMessage({ message, className, ...props }) {
21
+ if (!message) return null;
22
+ return /* @__PURE__ */ jsx("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
23
+ }
24
+ var ErrorMessage_default = ErrorMessage;
25
+
26
+ // src/components/ui/Label.tsx
27
+ import { jsx as jsx2 } from "react/jsx-runtime";
28
+ function Label({ text, className, ...props }) {
29
+ if (!text) return null;
30
+ return /* @__PURE__ */ jsx2(
31
+ "label",
32
+ {
33
+ className: cn(
34
+ "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
35
+ className
36
+ ),
37
+ ...props,
38
+ children: text
39
+ }
40
+ );
41
+ }
42
+ var Label_default = Label;
43
+
44
+ // src/components/ui/Chip.tsx
45
+ import { cva } from "cva";
46
+ import { twMerge as twMerge2 } from "tailwind-merge";
47
+ import { jsx as jsx3 } from "react/jsx-runtime";
48
+ var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx3("div", { className: twMerge2(chipVariants({ variant, size, className })), ...props });
49
+ var chipVariants = cva(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
50
+ variants: {
51
+ variant: {
52
+ neutral: ["text-grey-80", "border-grey-10"],
53
+ primary: ["text-purple-100", "border-purple-20"],
54
+ danger: ["text-pumpkin-100", "border-pumpkin-20"],
55
+ onboarding: ["text-green-100", "bg-green-10", "cursor-pointer"],
56
+ onboardingSelected: ["text-white", "bg-green-90", "cursor-pointer"]
57
+ },
58
+ size: {
59
+ small: ["text-sm", "leading-5", "px-2", "py-1", "gap-1.5"],
60
+ medium: ["text-base", "leading-6", "px-3", "py-2", "gap-2"]
61
+ }
62
+ },
63
+ defaultVariants: {
64
+ variant: "neutral",
65
+ size: "medium"
66
+ }
67
+ });
68
+ var Chip_default = Chip;
69
+
70
+ // src/components/primitives/separator.tsx
71
+ import * as SeparatorPrimitive from "@radix-ui/react-separator";
72
+ import * as React from "react";
73
+ import { jsx as jsx4 } from "react/jsx-runtime";
74
+ var Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx4(
75
+ SeparatorPrimitive.Root,
76
+ {
77
+ ref,
78
+ decorative,
79
+ orientation,
80
+ className: cn(
81
+ "shrink-0 bg-grey-10",
82
+ orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
83
+ className
84
+ ),
85
+ ...props
86
+ }
87
+ ));
88
+ Separator.displayName = SeparatorPrimitive.Root.displayName;
89
+
90
+ // src/components/ui/Select.tsx
91
+ import { jsx as jsx5, jsxs } from "react/jsx-runtime";
92
+ var Select = forwardRef2(
93
+ ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
94
+ const { value, defaultValue, dir, className, onChange, ...rest } = props;
95
+ const [selected, setSelected] = useState([]);
96
+ const [open, setOpen] = useState(false);
97
+ const containerRef = useRef(null);
98
+ useEffect(() => {
99
+ if (!value) return setSelected([]);
100
+ setSelected(Array.isArray(value) ? value : [value]);
101
+ }, [value]);
102
+ const toggleOpen = () => setOpen((prev) => !prev);
103
+ const closeOnEscape = (event) => event.key === "Escape" && setOpen(false);
104
+ const setValueOnEnter = (event, value2) => event.key === "Enter" && handleChange(value2);
105
+ const chipLabels = selected?.map((s) => options?.find(({ value: value2 }) => value2 === s)).filter(Boolean);
106
+ function handleLabels() {
107
+ if (multiselect) {
108
+ return selected.map((o) => options?.find((option) => option.value === o)?.title).join(", ");
109
+ }
110
+ return options?.find((option) => option.value === selected.join())?.title;
111
+ }
112
+ function handleOnOpenChange(isOpen) {
113
+ if (!multiselect || isOpen) setOpen(isOpen);
114
+ }
115
+ function handleChange(newValue) {
116
+ let newSelected = [];
117
+ setSelected((prev) => {
118
+ newSelected = prev.includes(newValue) ? prev.filter((item) => item !== newValue) : [...prev, newValue];
119
+ return multiselect ? newSelected : [newValue];
120
+ });
121
+ onChange?.(multiselect ? newSelected : newValue);
122
+ }
123
+ return /* @__PURE__ */ jsxs(
124
+ "div",
125
+ {
126
+ className: cn("flex flex-col space-y-1", className),
127
+ ref: containerRef,
128
+ "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
129
+ children: [
130
+ /* @__PURE__ */ jsx5(Label_default, { text: label, className: classNames?.label }),
131
+ /* @__PURE__ */ jsxs(
132
+ SelectPrimitive.Root,
133
+ {
134
+ open,
135
+ value: selected.join(","),
136
+ onOpenChange: handleOnOpenChange,
137
+ onValueChange: multiselect ? void 0 : handleChange,
138
+ defaultValue: typeof defaultValue === "string" ? defaultValue : void 0,
139
+ dir: dir === "rtl" ? "rtl" : "ltr",
140
+ ...rest,
141
+ children: [
142
+ /* @__PURE__ */ jsxs(
143
+ SelectPrimitive.Trigger,
144
+ {
145
+ ref,
146
+ className: cn(
147
+ "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",
148
+ classNames?.trigger
149
+ ),
150
+ children: [
151
+ /* @__PURE__ */ jsx5("span", { className: "truncate", children: /* @__PURE__ */ jsx5(
152
+ SelectPrimitive.Value,
153
+ {
154
+ placeholder: placeholder ?? "Select an option",
155
+ "aria-label": handleLabels(),
156
+ children: handleLabels()
157
+ }
158
+ ) }),
159
+ /* @__PURE__ */ jsx5(
160
+ ChevronDownIcon,
161
+ {
162
+ className: "transform text-black group-data-[state=open]:rotate-180",
163
+ size: "16"
164
+ }
165
+ )
166
+ ]
167
+ }
168
+ ),
169
+ /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx5(
170
+ SelectPrimitive.Content,
171
+ {
172
+ hideWhenDetached: true,
173
+ 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",
174
+ position: "popper",
175
+ sideOffset: 4,
176
+ onPointerDownOutside: toggleOpen,
177
+ onKeyDown: closeOnEscape,
178
+ children: /* @__PURE__ */ jsxs(SelectPrimitive.Viewport, { children: [
179
+ multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx5(
180
+ SelectPrimitive.Group,
181
+ {
182
+ className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
183
+ "data-testid": "selected-labels",
184
+ children: chipLabels?.map(
185
+ (chip) => chip && /* @__PURE__ */ jsxs(Chip_default, { size: "small", variant: "primary", children: [
186
+ /* @__PURE__ */ jsx5("span", { children: chip.title }),
187
+ /* @__PURE__ */ jsx5(
188
+ X,
189
+ {
190
+ size: 18,
191
+ "data-testid": `chip-remove-${chip.value}`,
192
+ className: "cursor-pointer",
193
+ onClick: () => handleChange(chip.value)
194
+ }
195
+ )
196
+ ] }, chip.title)
197
+ )
198
+ }
199
+ ),
200
+ /* @__PURE__ */ jsx5(Separator, {}),
201
+ options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ jsxs(
202
+ SelectPrimitive.Item,
203
+ {
204
+ value: value2,
205
+ 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",
206
+ "data-state": selected.includes(value2) ? "checked" : "unchecked",
207
+ onKeyDown: (e) => setValueOnEnter(e, value2),
208
+ onClick: () => handleChange(value2),
209
+ children: [
210
+ /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children: title }),
211
+ /* @__PURE__ */ jsx5(
212
+ CheckIcon,
213
+ {
214
+ className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
215
+ size: 16
216
+ }
217
+ )
218
+ ]
219
+ },
220
+ id2
221
+ ))
222
+ ] })
223
+ }
224
+ ) })
225
+ ]
226
+ }
227
+ ),
228
+ /* @__PURE__ */ jsx5(ErrorMessage_default, { message: error, className: "mt-1" })
229
+ ]
230
+ }
231
+ );
232
+ }
233
+ );
234
+ Select.displayName = "Select";
235
+ var Select_default = Select;
236
+
237
+ // src/components/demos/SelectDemo.tsx
238
+ import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
239
+ function SelectDemo() {
240
+ return /* @__PURE__ */ jsxs2("div", { className: "m-4", children: [
241
+ /* @__PURE__ */ jsx6("h3", { children: "Select" }),
242
+ /* @__PURE__ */ jsxs2("div", { className: "flex max-w-sm flex-col gap-4 mt-2", children: [
243
+ /* @__PURE__ */ jsx6(
244
+ Select_default,
245
+ {
246
+ label: "Label - Singleselect",
247
+ placeholder: "Select an option",
248
+ options: [
249
+ { id: "1", value: "1", title: "Option 1" },
250
+ { id: "2", value: "2", title: "Option 2" },
251
+ { id: "3", value: "3", title: "Option 3" }
252
+ ]
253
+ }
254
+ ),
255
+ /* @__PURE__ */ jsx6(
256
+ Select_default,
257
+ {
258
+ multiselect: true,
259
+ label: "Label - Multiselect",
260
+ placeholder: "Select an option",
261
+ options: [
262
+ { id: "1", value: "1", title: "Option 1" },
263
+ { id: "2", value: "2", title: "Option 2" },
264
+ { id: "3", value: "3", title: "Option 3" },
265
+ { id: "4", value: "4", title: "Option 4" },
266
+ { id: "5", value: "5", title: "Option 5" },
267
+ { id: "6", value: "6", title: "Option 6" },
268
+ { id: "7", value: "7", title: "Option 7" },
269
+ { id: "8", value: "8", title: "Option 8" },
270
+ { id: "9", value: "9", title: "Option 9" },
271
+ { id: "10", value: "10", title: "Option 10" }
272
+ ]
273
+ }
274
+ ),
275
+ /* @__PURE__ */ jsx6(
276
+ Select_default,
277
+ {
278
+ disabled: true,
279
+ label: "Label - Disabled",
280
+ placeholder: "Select an option",
281
+ options: [
282
+ { id: "1", value: "1", title: "Option 1" },
283
+ { id: "2", value: "2", title: "Option 2" },
284
+ { id: "3", value: "3", title: "Option 3" }
285
+ ]
286
+ }
287
+ )
288
+ ] })
289
+ ] });
290
+ }
291
+ var SelectDemo_default = SelectDemo;
292
+ export {
293
+ SelectDemo_default as default
294
+ };
295
+ //# sourceMappingURL=SelectDemo.js.map
@@ -0,0 +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","../../../src/components/demos/SelectDemo.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\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\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 space-y-1', className)}\n ref={containerRef}\n data-testid={`${(label ?? id)?.toLowerCase()}-select-element`}\n >\n <Label text={label} className={classNames?.label} />\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 <ErrorMessage message={error} className=\"mt-1\" />\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}\n\nfunction Label({ text, 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 </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","import Select from '@/components/ui/Select'\n\nfunction SelectDemo() {\n return (\n <div className='m-4'>\n <h3>Select</h3>\n <div className=\"flex max-w-sm flex-col gap-4 mt-2\">\n <Select\n label=\"Label - Singleselect\"\n placeholder=\"Select an option\"\n options={[\n { id: '1', value: '1', title: 'Option 1' },\n { id: '2', value: '2', title: 'Option 2' },\n { id: '3', value: '3', title: 'Option 3' },\n ]}\n />\n <Select\n multiselect\n label=\"Label - Multiselect\"\n placeholder=\"Select an option\"\n options={[\n { id: '1', value: '1', title: 'Option 1' },\n { id: '2', value: '2', title: 'Option 2' },\n { id: '3', value: '3', title: 'Option 3' },\n { id: '4', value: '4', title: 'Option 4' },\n { id: '5', value: '5', title: 'Option 5' },\n { id: '6', value: '6', title: 'Option 6' },\n { id: '7', value: '7', title: 'Option 7' },\n { id: '8', value: '8', title: 'Option 8' },\n { id: '9', value: '9', title: 'Option 9' },\n { id: '10', value: '10', title: 'Option 10' },\n ]}\n />\n <Select\n disabled\n label=\"Label - Disabled\"\n placeholder=\"Select an option\"\n options={[\n { id: '1', value: '1', title: 'Option 1' },\n { id: '2', value: '2', title: 'Option 2' },\n { id: '3', value: '3', title: 'Option 3' },\n ]}\n />\n </div>\n </div>\n )\n}\n\nexport default SelectDemo"],"mappings":"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","names":["forwardRef","jsx","twMerge","jsx","jsx","jsx","forwardRef","value","id","jsx","jsxs"]}