@next-degree/pickle-shared-js 0.3.24 → 0.3.27
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 +0 -11
- package/dist/app/layout.css.map +1 -1
- package/dist/app/page.cjs +40 -16
- package/dist/app/page.cjs.map +1 -1
- package/dist/app/page.js +66 -42
- package/dist/app/page.js.map +1 -1
- package/dist/components/demos/ComboboxDemo.cjs +15 -8
- package/dist/components/demos/ComboboxDemo.cjs.map +1 -1
- package/dist/components/demos/ComboboxDemo.js +25 -18
- package/dist/components/demos/ComboboxDemo.js.map +1 -1
- package/dist/components/demos/InputDemo.cjs +18 -7
- package/dist/components/demos/InputDemo.cjs.map +1 -1
- package/dist/components/demos/InputDemo.js +24 -13
- package/dist/components/demos/InputDemo.js.map +1 -1
- package/dist/components/demos/SelectDemo.cjs +19 -7
- package/dist/components/demos/SelectDemo.cjs.map +1 -1
- package/dist/components/demos/SelectDemo.js +29 -17
- package/dist/components/demos/SelectDemo.js.map +1 -1
- package/dist/components/demos/index.cjs +40 -16
- package/dist/components/demos/index.cjs.map +1 -1
- package/dist/components/demos/index.js +66 -42
- package/dist/components/demos/index.js.map +1 -1
- package/dist/components/ui/Combobox.cjs +14 -8
- package/dist/components/ui/Combobox.cjs.map +1 -1
- package/dist/components/ui/Combobox.js +21 -15
- package/dist/components/ui/Combobox.js.map +1 -1
- package/dist/components/ui/Input.cjs +17 -6
- package/dist/components/ui/Input.cjs.map +1 -1
- package/dist/components/ui/Input.js +20 -9
- package/dist/components/ui/Input.js.map +1 -1
- package/dist/components/ui/Label.cjs +6 -3
- 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 +7 -4
- package/dist/components/ui/Label.js.map +1 -1
- package/dist/components/ui/Select.cjs +17 -6
- package/dist/components/ui/Select.cjs.map +1 -1
- package/dist/components/ui/Select.js +25 -14
- package/dist/components/ui/Select.js.map +1 -1
- package/dist/index.cjs +36 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +64 -42
- package/dist/index.js.map +1 -1
- package/dist/styles/globals.css +0 -11
- package/dist/styles/globals.css.map +1 -1
- package/package.json +1 -1
|
@@ -46,9 +46,9 @@ var ErrorMessage_default = ErrorMessage;
|
|
|
46
46
|
|
|
47
47
|
// src/components/ui/Label.tsx
|
|
48
48
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
49
|
-
function Label({ text, className, ...props }) {
|
|
49
|
+
function Label({ text, required, className, ...props }) {
|
|
50
50
|
if (!text) return null;
|
|
51
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.
|
|
51
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
52
52
|
"label",
|
|
53
53
|
{
|
|
54
54
|
className: cn(
|
|
@@ -56,7 +56,10 @@ function Label({ text, className, ...props }) {
|
|
|
56
56
|
className
|
|
57
57
|
),
|
|
58
58
|
...props,
|
|
59
|
-
children:
|
|
59
|
+
children: [
|
|
60
|
+
text,
|
|
61
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-red-600", children: "\xA0*" })
|
|
62
|
+
]
|
|
60
63
|
}
|
|
61
64
|
);
|
|
62
65
|
}
|
|
@@ -74,8 +77,16 @@ var Input = (0, import_react.forwardRef)(
|
|
|
74
77
|
const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
|
|
75
78
|
const hasIcon = !!icon;
|
|
76
79
|
const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
|
|
77
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "group flex w-full flex-col", "data-testid": `input-wrapper-${props.id}`, children: [
|
|
78
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
80
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
|
|
81
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
82
|
+
Label_default,
|
|
83
|
+
{
|
|
84
|
+
text: label,
|
|
85
|
+
htmlFor: props.name,
|
|
86
|
+
required: props.required,
|
|
87
|
+
className: classNames?.label
|
|
88
|
+
}
|
|
89
|
+
),
|
|
79
90
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex flex-row items-center", children: [
|
|
80
91
|
IconComponent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
81
92
|
IconComponent,
|
|
@@ -104,7 +115,7 @@ var Input = (0, import_react.forwardRef)(
|
|
|
104
115
|
}
|
|
105
116
|
)
|
|
106
117
|
] }),
|
|
107
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage_default, { message: error
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage_default, { message: error })
|
|
108
119
|
] });
|
|
109
120
|
}
|
|
110
121
|
);
|
|
@@ -166,7 +177,7 @@ function InputDemo() {
|
|
|
166
177
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { children: "Input" }),
|
|
167
178
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2 md:flex-row", children: [
|
|
168
179
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input_default, { theme: "dark", icon: "Search" }) }),
|
|
169
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input_default, {}) }),
|
|
180
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input_default, { label: "Required input", required: true }) }),
|
|
170
181
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input_default, { icon: "MapPin" }) })
|
|
171
182
|
] })
|
|
172
183
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/demos/InputDemo.tsx","../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/ui/Label.tsx"],"sourcesContent":["import Input from '@/components/ui/Input'\n\nfunction InputDemo() {\n return (\n <div className
|
|
1
|
+
{"version":3,"sources":["../../../src/components/demos/InputDemo.tsx","../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/ui/Label.tsx"],"sourcesContent":["import Input from '@/components/ui/Input'\n\nfunction InputDemo() {\n return (\n <div className=\"m-4\">\n <h3>Input</h3>\n <div className=\"flex flex-col gap-2 md:flex-row\">\n <div className=\"bg-green-80 p-2\">\n <Input theme=\"dark\" icon=\"Search\" />\n </div>\n <div className=\"p-2\">\n <Input label=\"Required input\" required />\n </div>\n <div className=\"p-2\">\n <Input icon=\"MapPin\" />\n </div>\n </div>\n </div>\n )\n}\n\nexport default InputDemo\n","import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n icon?: keyof typeof icons\n onClear?: () => void\n classNames?: { label?: string }\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>(\n ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {\n const handleClear = () => {\n onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n onClear?.()\n }\n\n const IconComponent = icon && icons[icon]\n\n const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n const hasIcon = !!icon\n\n const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n return (\n <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n {label && (\n <Label\n text={label}\n htmlFor={props.name}\n required={props.required}\n className={classNames?.label}\n />\n )}\n <div className=\"relative flex flex-row items-center\">\n {IconComponent && (\n <IconComponent\n className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n />\n )}\n <input\n className={cn(inputVariants({ theme, hasIcon }))}\n ref={ref}\n placeholder={placeholder}\n value={value}\n onChange={onChange}\n data-testid={`input-element-${props.id}`}\n {...props}\n />\n {hasIcon && value && (\n <X\n className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n onClick={handleClear}\n data-testid=\"clear-button\"\n />\n )}\n </div>\n\n <ErrorMessage message={error} />\n </div>\n )\n }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n [\n 'border-input',\n 'placeholder:text-muted-foreground',\n 'focus-visible:ring-ring',\n 'inline-flex',\n 'w-full',\n 'h-11',\n 'items-center',\n 'justify-start',\n 'gap-3',\n 'rounded-lg',\n 'bg-transparent',\n 'px-3',\n 'pt-0.5',\n 'text-sm',\n 'shadow-sm',\n 'ring-grey-50',\n 'transition-colors',\n 'focus-visible:outline-none',\n 'focus-visible:ring-1',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'appearance-none',\n '[&::-webkit-search-cancel-button]:appearance-none',\n '[&::-webkit-search-decoration]:appearance-none',\n '[&::-webkit-search-results-button]:appearance-none',\n '[&::-webkit-search-results-decoration]:appearance-none',\n '[&::-ms-clear]:display-none',\n '[&::-ms-reveal]:display-none',\n ],\n {\n variants: {\n theme: {\n light: 'text-grey-80 border',\n dark: 'text-white',\n },\n hasIcon: {\n false: 'pl-3',\n true: 'pl-8',\n },\n },\n defaultVariants: {\n theme: 'light',\n hasIcon: false,\n },\n }\n)\n\nexport default Input\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"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -19,10 +19,10 @@ function ErrorMessage({ message, className, ...props }) {
|
|
|
19
19
|
var ErrorMessage_default = ErrorMessage;
|
|
20
20
|
|
|
21
21
|
// src/components/ui/Label.tsx
|
|
22
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
23
|
-
function Label({ text, className, ...props }) {
|
|
22
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
23
|
+
function Label({ text, required, className, ...props }) {
|
|
24
24
|
if (!text) return null;
|
|
25
|
-
return /* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ jsxs(
|
|
26
26
|
"label",
|
|
27
27
|
{
|
|
28
28
|
className: cn(
|
|
@@ -30,14 +30,17 @@ function Label({ text, className, ...props }) {
|
|
|
30
30
|
className
|
|
31
31
|
),
|
|
32
32
|
...props,
|
|
33
|
-
children:
|
|
33
|
+
children: [
|
|
34
|
+
text,
|
|
35
|
+
required && /* @__PURE__ */ jsx2("span", { className: "text-red-600", children: "\xA0*" })
|
|
36
|
+
]
|
|
34
37
|
}
|
|
35
38
|
);
|
|
36
39
|
}
|
|
37
40
|
var Label_default = Label;
|
|
38
41
|
|
|
39
42
|
// src/components/ui/Input.tsx
|
|
40
|
-
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
43
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
41
44
|
var Input = forwardRef(
|
|
42
45
|
({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
|
|
43
46
|
const handleClear = () => {
|
|
@@ -48,9 +51,17 @@ var Input = forwardRef(
|
|
|
48
51
|
const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
|
|
49
52
|
const hasIcon = !!icon;
|
|
50
53
|
const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
|
|
51
|
-
return /* @__PURE__ */
|
|
52
|
-
label && /* @__PURE__ */ jsx3(
|
|
53
|
-
|
|
54
|
+
return /* @__PURE__ */ jsxs2("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
|
|
55
|
+
label && /* @__PURE__ */ jsx3(
|
|
56
|
+
Label_default,
|
|
57
|
+
{
|
|
58
|
+
text: label,
|
|
59
|
+
htmlFor: props.name,
|
|
60
|
+
required: props.required,
|
|
61
|
+
className: classNames?.label
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ jsxs2("div", { className: "relative flex flex-row items-center", children: [
|
|
54
65
|
IconComponent && /* @__PURE__ */ jsx3(
|
|
55
66
|
IconComponent,
|
|
56
67
|
{
|
|
@@ -78,7 +89,7 @@ var Input = forwardRef(
|
|
|
78
89
|
}
|
|
79
90
|
)
|
|
80
91
|
] }),
|
|
81
|
-
/* @__PURE__ */ jsx3(ErrorMessage_default, { message: error
|
|
92
|
+
/* @__PURE__ */ jsx3(ErrorMessage_default, { message: error })
|
|
82
93
|
] });
|
|
83
94
|
}
|
|
84
95
|
);
|
|
@@ -134,13 +145,13 @@ var inputVariants = cva(
|
|
|
134
145
|
var Input_default = Input;
|
|
135
146
|
|
|
136
147
|
// src/components/demos/InputDemo.tsx
|
|
137
|
-
import { jsx as jsx4, jsxs as
|
|
148
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
138
149
|
function InputDemo() {
|
|
139
|
-
return /* @__PURE__ */
|
|
150
|
+
return /* @__PURE__ */ jsxs3("div", { className: "m-4", children: [
|
|
140
151
|
/* @__PURE__ */ jsx4("h3", { children: "Input" }),
|
|
141
|
-
/* @__PURE__ */
|
|
152
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2 md:flex-row", children: [
|
|
142
153
|
/* @__PURE__ */ jsx4("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ jsx4(Input_default, { theme: "dark", icon: "Search" }) }),
|
|
143
|
-
/* @__PURE__ */ jsx4("div", { className: "p-2", children: /* @__PURE__ */ jsx4(Input_default, {}) }),
|
|
154
|
+
/* @__PURE__ */ jsx4("div", { className: "p-2", children: /* @__PURE__ */ jsx4(Input_default, { label: "Required input", required: true }) }),
|
|
144
155
|
/* @__PURE__ */ jsx4("div", { className: "p-2", children: /* @__PURE__ */ jsx4(Input_default, { icon: "MapPin" }) })
|
|
145
156
|
] })
|
|
146
157
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/ui/Label.tsx","../../../src/components/demos/InputDemo.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n icon?: keyof typeof icons\n onClear?: () => void\n classNames?: { label?: string }\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>(\n ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {\n const handleClear = () => {\n onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n onClear?.()\n }\n\n const IconComponent = icon && icons[icon]\n\n const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n const hasIcon = !!icon\n\n const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n return (\n <div className=\"group flex w-full flex-col\" data-testid={`input-wrapper-${props.id}`}>\n {label && (\n <Label
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/ui/Label.tsx","../../../src/components/demos/InputDemo.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n icon?: keyof typeof icons\n onClear?: () => void\n classNames?: { label?: string }\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>(\n ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {\n const handleClear = () => {\n onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n onClear?.()\n }\n\n const IconComponent = icon && icons[icon]\n\n const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n const hasIcon = !!icon\n\n const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n return (\n <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n {label && (\n <Label\n text={label}\n htmlFor={props.name}\n required={props.required}\n className={classNames?.label}\n />\n )}\n <div className=\"relative flex flex-row items-center\">\n {IconComponent && (\n <IconComponent\n className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n />\n )}\n <input\n className={cn(inputVariants({ theme, hasIcon }))}\n ref={ref}\n placeholder={placeholder}\n value={value}\n onChange={onChange}\n data-testid={`input-element-${props.id}`}\n {...props}\n />\n {hasIcon && value && (\n <X\n className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n onClick={handleClear}\n data-testid=\"clear-button\"\n />\n )}\n </div>\n\n <ErrorMessage message={error} />\n </div>\n )\n }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n [\n 'border-input',\n 'placeholder:text-muted-foreground',\n 'focus-visible:ring-ring',\n 'inline-flex',\n 'w-full',\n 'h-11',\n 'items-center',\n 'justify-start',\n 'gap-3',\n 'rounded-lg',\n 'bg-transparent',\n 'px-3',\n 'pt-0.5',\n 'text-sm',\n 'shadow-sm',\n 'ring-grey-50',\n 'transition-colors',\n 'focus-visible:outline-none',\n 'focus-visible:ring-1',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'appearance-none',\n '[&::-webkit-search-cancel-button]:appearance-none',\n '[&::-webkit-search-decoration]:appearance-none',\n '[&::-webkit-search-results-button]:appearance-none',\n '[&::-webkit-search-results-decoration]:appearance-none',\n '[&::-ms-clear]:display-none',\n '[&::-ms-reveal]:display-none',\n ],\n {\n variants: {\n theme: {\n light: 'text-grey-80 border',\n dark: 'text-white',\n },\n hasIcon: {\n false: 'pl-3',\n true: 'pl-8',\n },\n },\n defaultVariants: {\n theme: 'light',\n hasIcon: false,\n },\n }\n)\n\nexport default Input\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 Input from '@/components/ui/Input'\n\nfunction InputDemo() {\n return (\n <div className=\"m-4\">\n <h3>Input</h3>\n <div className=\"flex flex-col gap-2 md:flex-row\">\n <div className=\"bg-green-80 p-2\">\n <Input theme=\"dark\" icon=\"Search\" />\n </div>\n <div className=\"p-2\">\n <Input label=\"Required input\" required />\n </div>\n <div className=\"p-2\">\n <Input icon=\"MapPin\" />\n </div>\n </div>\n </div>\n )\n}\n\nexport default InputDemo\n"],"mappings":"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","names":["jsx","jsx","jsxs","jsx","jsxs"]}
|
|
@@ -56,9 +56,9 @@ var ErrorMessage_default = ErrorMessage;
|
|
|
56
56
|
|
|
57
57
|
// src/components/ui/Label.tsx
|
|
58
58
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
59
|
-
function Label({ text, className, ...props }) {
|
|
59
|
+
function Label({ text, required, className, ...props }) {
|
|
60
60
|
if (!text) return null;
|
|
61
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.
|
|
61
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
62
62
|
"label",
|
|
63
63
|
{
|
|
64
64
|
className: cn(
|
|
@@ -66,7 +66,10 @@ function Label({ text, className, ...props }) {
|
|
|
66
66
|
className
|
|
67
67
|
),
|
|
68
68
|
...props,
|
|
69
|
-
children:
|
|
69
|
+
children: [
|
|
70
|
+
text,
|
|
71
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-red-600", children: "\xA0*" })
|
|
72
|
+
]
|
|
70
73
|
}
|
|
71
74
|
);
|
|
72
75
|
}
|
|
@@ -154,11 +157,19 @@ var Select = (0, import_react.forwardRef)(
|
|
|
154
157
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
155
158
|
"div",
|
|
156
159
|
{
|
|
157
|
-
className: cn("flex flex-col
|
|
160
|
+
className: cn("flex flex-col gap-1", className),
|
|
158
161
|
ref: containerRef,
|
|
159
162
|
"data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
|
|
160
163
|
children: [
|
|
161
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
165
|
+
Label_default,
|
|
166
|
+
{
|
|
167
|
+
text: label,
|
|
168
|
+
htmlFor: props.name,
|
|
169
|
+
required: props.required,
|
|
170
|
+
className: classNames?.label
|
|
171
|
+
}
|
|
172
|
+
),
|
|
162
173
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
163
174
|
SelectPrimitive.Root,
|
|
164
175
|
{
|
|
@@ -256,7 +267,7 @@ var Select = (0, import_react.forwardRef)(
|
|
|
256
267
|
]
|
|
257
268
|
}
|
|
258
269
|
),
|
|
259
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage_default, { message: error
|
|
270
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage_default, { message: error })
|
|
260
271
|
]
|
|
261
272
|
}
|
|
262
273
|
);
|
|
@@ -270,10 +281,11 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
|
270
281
|
function SelectDemo() {
|
|
271
282
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "m-4", children: [
|
|
272
283
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { children: "Select" }),
|
|
273
|
-
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex max-w-sm flex-col gap-4
|
|
284
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-2 flex max-w-sm flex-col gap-4", children: [
|
|
274
285
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
275
286
|
Select_default,
|
|
276
287
|
{
|
|
288
|
+
required: true,
|
|
277
289
|
label: "Label - Singleselect",
|
|
278
290
|
placeholder: "Select an option",
|
|
279
291
|
options: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/demos/SelectDemo.tsx","../../../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":["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","'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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,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;;;ACNX,IAAAA,sBAAA;AAJJ,SAAS,MAAM,EAAE,MAAM,WAAW,GAAG,MAAM,GAAoB;AAC7D,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,EACH;AAEJ;AAEA,IAAO,gBAAQ;;;ACxBf,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;;;AL0DxC,IAAAC,sBAAA;AAlDR,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;AAGhD,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,2BAA2B,SAAS;AAAA,QAClD,KAAK;AAAA,QACL,eAAa,IAAI,SAAS,KAAK,YAAY,CAAC;AAAA,QAE5C;AAAA,uDAAC,iBAAM,MAAM,OAAO,WAAW,YAAY,OAAO;AAAA,UAElD;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,UACA,6CAAC,wBAAa,SAAS,OAAO,WAAU,QAAO;AAAA;AAAA;AAAA,IACjD;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ;;;ADzKT,IAAAC,sBAAA;AAHN,SAAS,aAAa;AACpB,SACE,8CAAC,SAAI,WAAU,OACb;AAAA,iDAAC,QAAG,oBAAM;AAAA,IACV,8CAAC,SAAI,WAAU,qCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,SAAS;AAAA,YACP,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,UAC3C;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,aAAW;AAAA,UACX,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,SAAS;AAAA,YACP,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,MAAM,OAAO,MAAM,OAAO,YAAY;AAAA,UAC9C;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,UAAQ;AAAA,UACR,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,SAAS;AAAA,YACP,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,YACzC,EAAE,IAAI,KAAK,OAAO,KAAK,OAAO,WAAW;AAAA,UAC3C;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,IAAO,qBAAQ;","names":["import_jsx_runtime","import_tailwind_merge","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","value","id","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/demos/SelectDemo.tsx","../../../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":["import Select from '@/components/ui/Select'\n\nfunction SelectDemo() {\n return (\n <div className=\"m-4\">\n <h3>Select</h3>\n <div className=\"mt-2 flex max-w-sm flex-col gap-4\">\n <Select\n required\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\n","'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":"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","names":["import_jsx_runtime","import_tailwind_merge","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","value","id","import_jsx_runtime"]}
|
|
@@ -24,10 +24,10 @@ function ErrorMessage({ message, className, ...props }) {
|
|
|
24
24
|
var ErrorMessage_default = ErrorMessage;
|
|
25
25
|
|
|
26
26
|
// src/components/ui/Label.tsx
|
|
27
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
28
|
-
function Label({ text, className, ...props }) {
|
|
27
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
28
|
+
function Label({ text, required, className, ...props }) {
|
|
29
29
|
if (!text) return null;
|
|
30
|
-
return /* @__PURE__ */
|
|
30
|
+
return /* @__PURE__ */ jsxs(
|
|
31
31
|
"label",
|
|
32
32
|
{
|
|
33
33
|
className: cn(
|
|
@@ -35,7 +35,10 @@ function Label({ text, className, ...props }) {
|
|
|
35
35
|
className
|
|
36
36
|
),
|
|
37
37
|
...props,
|
|
38
|
-
children:
|
|
38
|
+
children: [
|
|
39
|
+
text,
|
|
40
|
+
required && /* @__PURE__ */ jsx2("span", { className: "text-red-600", children: "\xA0*" })
|
|
41
|
+
]
|
|
39
42
|
}
|
|
40
43
|
);
|
|
41
44
|
}
|
|
@@ -88,7 +91,7 @@ var Separator = React.forwardRef(({ className, orientation = "horizontal", decor
|
|
|
88
91
|
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
|
89
92
|
|
|
90
93
|
// src/components/ui/Select.tsx
|
|
91
|
-
import { jsx as jsx5, jsxs } from "react/jsx-runtime";
|
|
94
|
+
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
92
95
|
var Select = forwardRef2(
|
|
93
96
|
({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
|
|
94
97
|
const { value, defaultValue, dir, className, onChange, ...rest } = props;
|
|
@@ -120,15 +123,23 @@ var Select = forwardRef2(
|
|
|
120
123
|
});
|
|
121
124
|
onChange?.(multiselect ? newSelected : newValue);
|
|
122
125
|
}
|
|
123
|
-
return /* @__PURE__ */
|
|
126
|
+
return /* @__PURE__ */ jsxs2(
|
|
124
127
|
"div",
|
|
125
128
|
{
|
|
126
|
-
className: cn("flex flex-col
|
|
129
|
+
className: cn("flex flex-col gap-1", className),
|
|
127
130
|
ref: containerRef,
|
|
128
131
|
"data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
|
|
129
132
|
children: [
|
|
130
|
-
/* @__PURE__ */ jsx5(
|
|
131
|
-
|
|
133
|
+
/* @__PURE__ */ jsx5(
|
|
134
|
+
Label_default,
|
|
135
|
+
{
|
|
136
|
+
text: label,
|
|
137
|
+
htmlFor: props.name,
|
|
138
|
+
required: props.required,
|
|
139
|
+
className: classNames?.label
|
|
140
|
+
}
|
|
141
|
+
),
|
|
142
|
+
/* @__PURE__ */ jsxs2(
|
|
132
143
|
SelectPrimitive.Root,
|
|
133
144
|
{
|
|
134
145
|
open,
|
|
@@ -139,7 +150,7 @@ var Select = forwardRef2(
|
|
|
139
150
|
dir: dir === "rtl" ? "rtl" : "ltr",
|
|
140
151
|
...rest,
|
|
141
152
|
children: [
|
|
142
|
-
/* @__PURE__ */
|
|
153
|
+
/* @__PURE__ */ jsxs2(
|
|
143
154
|
SelectPrimitive.Trigger,
|
|
144
155
|
{
|
|
145
156
|
ref,
|
|
@@ -175,14 +186,14 @@ var Select = forwardRef2(
|
|
|
175
186
|
sideOffset: 4,
|
|
176
187
|
onPointerDownOutside: toggleOpen,
|
|
177
188
|
onKeyDown: closeOnEscape,
|
|
178
|
-
children: /* @__PURE__ */
|
|
189
|
+
children: /* @__PURE__ */ jsxs2(SelectPrimitive.Viewport, { children: [
|
|
179
190
|
multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx5(
|
|
180
191
|
SelectPrimitive.Group,
|
|
181
192
|
{
|
|
182
193
|
className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
|
|
183
194
|
"data-testid": "selected-labels",
|
|
184
195
|
children: chipLabels?.map(
|
|
185
|
-
(chip) => chip && /* @__PURE__ */
|
|
196
|
+
(chip) => chip && /* @__PURE__ */ jsxs2(Chip_default, { size: "small", variant: "primary", children: [
|
|
186
197
|
/* @__PURE__ */ jsx5("span", { children: chip.title }),
|
|
187
198
|
/* @__PURE__ */ jsx5(
|
|
188
199
|
X,
|
|
@@ -198,7 +209,7 @@ var Select = forwardRef2(
|
|
|
198
209
|
}
|
|
199
210
|
),
|
|
200
211
|
/* @__PURE__ */ jsx5(Separator, {}),
|
|
201
|
-
options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */
|
|
212
|
+
options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ jsxs2(
|
|
202
213
|
SelectPrimitive.Item,
|
|
203
214
|
{
|
|
204
215
|
value: value2,
|
|
@@ -225,7 +236,7 @@ var Select = forwardRef2(
|
|
|
225
236
|
]
|
|
226
237
|
}
|
|
227
238
|
),
|
|
228
|
-
/* @__PURE__ */ jsx5(ErrorMessage_default, { message: error
|
|
239
|
+
/* @__PURE__ */ jsx5(ErrorMessage_default, { message: error })
|
|
229
240
|
]
|
|
230
241
|
}
|
|
231
242
|
);
|
|
@@ -235,14 +246,15 @@ Select.displayName = "Select";
|
|
|
235
246
|
var Select_default = Select;
|
|
236
247
|
|
|
237
248
|
// src/components/demos/SelectDemo.tsx
|
|
238
|
-
import { jsx as jsx6, jsxs as
|
|
249
|
+
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
239
250
|
function SelectDemo() {
|
|
240
|
-
return /* @__PURE__ */
|
|
251
|
+
return /* @__PURE__ */ jsxs3("div", { className: "m-4", children: [
|
|
241
252
|
/* @__PURE__ */ jsx6("h3", { children: "Select" }),
|
|
242
|
-
/* @__PURE__ */
|
|
253
|
+
/* @__PURE__ */ jsxs3("div", { className: "mt-2 flex max-w-sm flex-col gap-4", children: [
|
|
243
254
|
/* @__PURE__ */ jsx6(
|
|
244
255
|
Select_default,
|
|
245
256
|
{
|
|
257
|
+
required: true,
|
|
246
258
|
label: "Label - Singleselect",
|
|
247
259
|
placeholder: "Select an option",
|
|
248
260
|
options: [
|