@skybin-tech/nebula-ui 0.0.22 → 0.0.25
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/cjs/components/Accordion/Accordion.cjs +18 -0
- package/dist/cjs/components/Accordion/Accordion.cjs.map +1 -0
- package/dist/cjs/components/Checkbox/Checkbox.cjs +10 -0
- package/dist/cjs/components/Checkbox/Checkbox.cjs.map +1 -0
- package/dist/cjs/components/Pagination/Pagination.cjs +110 -0
- package/dist/cjs/components/Pagination/Pagination.cjs.map +1 -0
- package/dist/cjs/components/Skeleton/Skeleton.cjs +11 -0
- package/dist/cjs/components/Skeleton/Skeleton.cjs.map +1 -0
- package/dist/cjs/components/Tooltip/Tooltip.cjs +16 -0
- package/dist/cjs/components/Tooltip/Tooltip.cjs.map +1 -0
- package/dist/cjs/index.cjs +35 -4
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/primitives/accordion.cjs +67 -0
- package/dist/cjs/primitives/accordion.cjs.map +1 -0
- package/dist/cjs/primitives/badge.cjs +4 -1
- package/dist/cjs/primitives/badge.cjs.map +1 -1
- package/dist/cjs/primitives/select.cjs +2 -0
- package/dist/cjs/primitives/select.cjs.map +1 -1
- package/dist/cjs/primitives/skeleton.cjs +16 -0
- package/dist/cjs/primitives/skeleton.cjs.map +1 -0
- package/dist/cjs/primitives/tooltip.cjs +46 -0
- package/dist/cjs/primitives/tooltip.cjs.map +1 -0
- package/dist/components/Accordion/Accordion.d.ts +5 -0
- package/dist/components/Accordion/Accordion.d.ts.map +1 -0
- package/dist/components/Accordion/Accordion.js +18 -0
- package/dist/components/Accordion/Accordion.js.map +1 -0
- package/dist/components/Accordion/index.d.ts +2 -0
- package/dist/components/Accordion/index.d.ts.map +1 -0
- package/dist/components/Badge/Badge.d.ts +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +5 -0
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.js +10 -0
- package/dist/components/Checkbox/Checkbox.js.map +1 -0
- package/dist/components/Form/index.d.ts +1 -1
- package/dist/components/Form/index.d.ts.map +1 -1
- package/dist/components/Pagination/Pagination.d.ts +29 -0
- package/dist/components/Pagination/Pagination.d.ts.map +1 -0
- package/dist/components/Pagination/Pagination.js +93 -0
- package/dist/components/Pagination/Pagination.js.map +1 -0
- package/dist/components/Pagination/index.d.ts +2 -0
- package/dist/components/Pagination/index.d.ts.map +1 -0
- package/dist/components/Skeleton/Skeleton.d.ts +8 -0
- package/dist/components/Skeleton/Skeleton.d.ts.map +1 -0
- package/dist/components/Skeleton/Skeleton.js +11 -0
- package/dist/components/Skeleton/Skeleton.js.map +1 -0
- package/dist/components/Skeleton/index.d.ts +3 -0
- package/dist/components/Skeleton/index.d.ts.map +1 -0
- package/dist/components/Tooltip/Tooltip.d.ts +8 -0
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -0
- package/dist/components/Tooltip/Tooltip.js +16 -0
- package/dist/components/Tooltip/Tooltip.js.map +1 -0
- package/dist/components/Tooltip/index.d.ts +3 -0
- package/dist/components/Tooltip/index.d.ts.map +1 -0
- package/dist/index.d.ts +10 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +33 -2
- package/dist/index.js.map +1 -1
- package/dist/primitives/accordion.d.ts +8 -0
- package/dist/primitives/accordion.d.ts.map +1 -0
- package/dist/primitives/accordion.js +49 -0
- package/dist/primitives/accordion.js.map +1 -0
- package/dist/primitives/badge.d.ts +1 -1
- package/dist/primitives/badge.d.ts.map +1 -1
- package/dist/primitives/badge.js +4 -1
- package/dist/primitives/badge.js.map +1 -1
- package/dist/primitives/select.js +4 -2
- package/dist/primitives/select.js.map +1 -1
- package/dist/primitives/skeleton.d.ts +3 -0
- package/dist/primitives/skeleton.d.ts.map +1 -0
- package/dist/primitives/skeleton.js +16 -0
- package/dist/primitives/skeleton.js.map +1 -0
- package/dist/primitives/tooltip.d.ts +8 -0
- package/dist/primitives/tooltip.d.ts.map +1 -0
- package/dist/primitives/tooltip.js +28 -0
- package/dist/primitives/tooltip.js.map +1 -0
- package/package.json +70 -1
- package/dist/cjs/components/Form/Select.cjs +0 -156
- package/dist/cjs/components/Form/Select.cjs.map +0 -1
- package/dist/components/Form/Select.js +0 -156
- package/dist/components/Form/Select.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/primitives/skeleton.tsx"],"names":[],"mappings":"AAEA,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAO9E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "../utils/cn.js";
|
|
4
|
+
function Skeleton({ className, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsx(
|
|
6
|
+
"div",
|
|
7
|
+
{
|
|
8
|
+
className: cn("animate-pulse rounded-md bg-muted", className),
|
|
9
|
+
...props
|
|
10
|
+
}
|
|
11
|
+
);
|
|
12
|
+
}
|
|
13
|
+
export {
|
|
14
|
+
Skeleton
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=skeleton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton.js","sources":["../../src/primitives/skeleton.tsx"],"sourcesContent":["import { cn } from \"@/utils/index\"\n\nfunction Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n {...props}\n />\n )\n}\n\nexport { Skeleton }\n"],"names":[],"mappings":";;;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA+C;AAC/E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,qCAAqC,SAAS;AAAA,MAC3D,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
3
|
+
declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
|
|
4
|
+
declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
|
|
5
|
+
declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
8
|
+
//# sourceMappingURL=tooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/primitives/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAG3D,QAAA,MAAM,eAAe,iDAA4B,CAAA;AACjD,QAAA,MAAM,OAAO,yCAAwB,CAAA;AACrC,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAE/C,QAAA,MAAM,cAAc,gKAelB,CAAA;AAGF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
5
|
+
import { cn } from "../utils/cn.js";
|
|
6
|
+
const TooltipProvider = TooltipPrimitive.Provider;
|
|
7
|
+
const Tooltip = TooltipPrimitive.Root;
|
|
8
|
+
const TooltipTrigger = TooltipPrimitive.Trigger;
|
|
9
|
+
const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
10
|
+
TooltipPrimitive.Content,
|
|
11
|
+
{
|
|
12
|
+
ref,
|
|
13
|
+
sideOffset,
|
|
14
|
+
className: cn(
|
|
15
|
+
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground 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",
|
|
16
|
+
className
|
|
17
|
+
),
|
|
18
|
+
...props
|
|
19
|
+
}
|
|
20
|
+
) }));
|
|
21
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
22
|
+
export {
|
|
23
|
+
Tooltip,
|
|
24
|
+
TooltipContent,
|
|
25
|
+
TooltipProvider,
|
|
26
|
+
TooltipTrigger
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip.js","sources":["../../src/primitives/tooltip.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\nimport { cn } from \"@/utils/index\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\nconst Tooltip = TooltipPrimitive.Root\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.Portal>\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground 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\",\n className\n )}\n {...props}\n />\n </TooltipPrimitive.Portal>\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"],"names":[],"mappings":";;;;;AAIA,MAAM,kBAAkB,iBAAiB;AACzC,MAAM,UAAU,iBAAiB;AACjC,MAAM,iBAAiB,iBAAiB;AAExC,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,SAAS,QAC1C,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,GACF,CACD;AACD,eAAe,cAAc,iBAAiB,QAAQ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skybin-tech/nebula-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.25",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"author": "Anwar <anwar@skybin.io>",
|
|
6
6
|
"description": "Reusable React component library with form validation using shadcn/ui patterns, react-hook-form, and Zod",
|
|
@@ -221,6 +221,56 @@
|
|
|
221
221
|
"types": "./dist/hooks/useToast.d.ts",
|
|
222
222
|
"default": "./dist/cjs/hooks/useToast.cjs"
|
|
223
223
|
}
|
|
224
|
+
},
|
|
225
|
+
"./components/Checkbox": {
|
|
226
|
+
"import": {
|
|
227
|
+
"types": "./dist/components/Checkbox/Checkbox.d.ts",
|
|
228
|
+
"default": "./dist/components/Checkbox/Checkbox.js"
|
|
229
|
+
},
|
|
230
|
+
"require": {
|
|
231
|
+
"types": "./dist/components/Checkbox/Checkbox.d.ts",
|
|
232
|
+
"default": "./dist/cjs/components/Checkbox/Checkbox.cjs"
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
"./components/Tooltip": {
|
|
236
|
+
"import": {
|
|
237
|
+
"types": "./dist/components/Tooltip/index.d.ts",
|
|
238
|
+
"default": "./dist/components/Tooltip/index.js"
|
|
239
|
+
},
|
|
240
|
+
"require": {
|
|
241
|
+
"types": "./dist/components/Tooltip/index.d.ts",
|
|
242
|
+
"default": "./dist/cjs/components/Tooltip/index.cjs"
|
|
243
|
+
}
|
|
244
|
+
},
|
|
245
|
+
"./components/Skeleton": {
|
|
246
|
+
"import": {
|
|
247
|
+
"types": "./dist/components/Skeleton/index.d.ts",
|
|
248
|
+
"default": "./dist/components/Skeleton/index.js"
|
|
249
|
+
},
|
|
250
|
+
"require": {
|
|
251
|
+
"types": "./dist/components/Skeleton/index.d.ts",
|
|
252
|
+
"default": "./dist/cjs/components/Skeleton/index.cjs"
|
|
253
|
+
}
|
|
254
|
+
},
|
|
255
|
+
"./components/Accordion": {
|
|
256
|
+
"import": {
|
|
257
|
+
"types": "./dist/components/Accordion/index.d.ts",
|
|
258
|
+
"default": "./dist/components/Accordion/index.js"
|
|
259
|
+
},
|
|
260
|
+
"require": {
|
|
261
|
+
"types": "./dist/components/Accordion/index.d.ts",
|
|
262
|
+
"default": "./dist/cjs/components/Accordion/index.cjs"
|
|
263
|
+
}
|
|
264
|
+
},
|
|
265
|
+
"./components/Pagination": {
|
|
266
|
+
"import": {
|
|
267
|
+
"types": "./dist/components/Pagination/index.d.ts",
|
|
268
|
+
"default": "./dist/components/Pagination/index.js"
|
|
269
|
+
},
|
|
270
|
+
"require": {
|
|
271
|
+
"types": "./dist/components/Pagination/index.d.ts",
|
|
272
|
+
"default": "./dist/cjs/components/Pagination/index.cjs"
|
|
273
|
+
}
|
|
224
274
|
}
|
|
225
275
|
},
|
|
226
276
|
"typesVersions": {
|
|
@@ -284,6 +334,21 @@
|
|
|
284
334
|
],
|
|
285
335
|
"hooks/useToast": [
|
|
286
336
|
"./dist/hooks/useToast.d.ts"
|
|
337
|
+
],
|
|
338
|
+
"components/Checkbox": [
|
|
339
|
+
"./dist/components/Checkbox/Checkbox.d.ts"
|
|
340
|
+
],
|
|
341
|
+
"components/Tooltip": [
|
|
342
|
+
"./dist/components/Tooltip/index.d.ts"
|
|
343
|
+
],
|
|
344
|
+
"components/Skeleton": [
|
|
345
|
+
"./dist/components/Skeleton/index.d.ts"
|
|
346
|
+
],
|
|
347
|
+
"components/Accordion": [
|
|
348
|
+
"./dist/components/Accordion/index.d.ts"
|
|
349
|
+
],
|
|
350
|
+
"components/Pagination": [
|
|
351
|
+
"./dist/components/Pagination/index.d.ts"
|
|
287
352
|
]
|
|
288
353
|
}
|
|
289
354
|
},
|
|
@@ -317,6 +382,8 @@
|
|
|
317
382
|
"@radix-ui/react-switch": ">=1.0.0",
|
|
318
383
|
"@radix-ui/react-toast": ">=1.0.0",
|
|
319
384
|
"@radix-ui/react-toggle": ">=1.0.0",
|
|
385
|
+
"@radix-ui/react-tooltip": ">=1.0.0",
|
|
386
|
+
"@radix-ui/react-accordion": ">=1.0.0",
|
|
320
387
|
"class-variance-authority": ">=0.7.0",
|
|
321
388
|
"clsx": ">=2.0.0",
|
|
322
389
|
"cmdk": ">=1.0.0",
|
|
@@ -360,6 +427,8 @@
|
|
|
360
427
|
"@radix-ui/react-switch": "^1.2.6",
|
|
361
428
|
"@radix-ui/react-toast": "^1.2.15",
|
|
362
429
|
"@radix-ui/react-toggle": "^1.1.10",
|
|
430
|
+
"@radix-ui/react-tooltip": "^1.2.7",
|
|
431
|
+
"@radix-ui/react-accordion": "^1.2.11",
|
|
363
432
|
"@storybook/addon-a11y": "^10.2.17",
|
|
364
433
|
"@storybook/addon-docs": "^10.2.17",
|
|
365
434
|
"@storybook/addon-onboarding": "^10.2.17",
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
-
const React = require("react");
|
|
6
|
-
const reactHookForm = require("react-hook-form");
|
|
7
|
-
const classVarianceAuthority = require("class-variance-authority");
|
|
8
|
-
const cn = require("../../utils/cn.cjs");
|
|
9
|
-
const variants = require("./variants.cjs");
|
|
10
|
-
const context = require("./context.cjs");
|
|
11
|
-
const select = require("../../primitives/select.cjs");
|
|
12
|
-
const label = require("../../primitives/label.cjs");
|
|
13
|
-
const selectSizeVariants = classVarianceAuthority.cva(
|
|
14
|
-
"",
|
|
15
|
-
{
|
|
16
|
-
variants: {
|
|
17
|
-
size: {
|
|
18
|
-
sm: "h-8 text-xs",
|
|
19
|
-
md: "h-10 text-sm",
|
|
20
|
-
lg: "h-12 text-base"
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
defaultVariants: {
|
|
24
|
-
size: "md"
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
|
-
function Select({
|
|
29
|
-
name,
|
|
30
|
-
label: label$1,
|
|
31
|
-
helperText,
|
|
32
|
-
showError = true,
|
|
33
|
-
error: customError,
|
|
34
|
-
size,
|
|
35
|
-
variant,
|
|
36
|
-
fullWidth = true,
|
|
37
|
-
className,
|
|
38
|
-
disabled,
|
|
39
|
-
options = [],
|
|
40
|
-
placeholder,
|
|
41
|
-
allowClear,
|
|
42
|
-
id: providedId,
|
|
43
|
-
control: externalControl,
|
|
44
|
-
children,
|
|
45
|
-
// Validation props
|
|
46
|
-
required,
|
|
47
|
-
validate
|
|
48
|
-
}) {
|
|
49
|
-
const generatedId = React.useId();
|
|
50
|
-
const inputId = providedId ?? generatedId;
|
|
51
|
-
const formConfigContext = React.useContext(context.FormConfigContext);
|
|
52
|
-
const formConfig = formConfigContext ?? {};
|
|
53
|
-
const rhfContext = reactHookForm.useFormContext();
|
|
54
|
-
const control = externalControl ?? rhfContext?.control;
|
|
55
|
-
React.useEffect(() => {
|
|
56
|
-
if (formConfigContext?.registerFieldValidation) {
|
|
57
|
-
const rules = {};
|
|
58
|
-
if (required !== void 0) rules.required = required;
|
|
59
|
-
if (validate !== void 0) rules.validate = validate;
|
|
60
|
-
formConfigContext.registerFieldValidation({
|
|
61
|
-
name,
|
|
62
|
-
type: "string",
|
|
63
|
-
rules
|
|
64
|
-
});
|
|
65
|
-
return () => {
|
|
66
|
-
formConfigContext.unregisterFieldValidation(name);
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
}, [formConfigContext, name, required, validate]);
|
|
70
|
-
const { field, fieldState } = reactHookForm.useController({
|
|
71
|
-
name,
|
|
72
|
-
control
|
|
73
|
-
});
|
|
74
|
-
const fieldError = fieldState.error?.message;
|
|
75
|
-
const errorMessage = customError ?? fieldError;
|
|
76
|
-
const hasError = !!errorMessage;
|
|
77
|
-
const effectiveSize = size ?? formConfig.size ?? "md";
|
|
78
|
-
const effectiveDisabled = disabled ?? formConfig.disabled;
|
|
79
|
-
const effectiveVariant = hasError ? "error" : variant;
|
|
80
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn("space-y-1.5", fullWidth && "w-full"), children: [
|
|
81
|
-
label$1 && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
82
|
-
label.Label,
|
|
83
|
-
{
|
|
84
|
-
htmlFor: inputId,
|
|
85
|
-
className: variants.labelVariants({ required: !!required }),
|
|
86
|
-
children: [
|
|
87
|
-
label$1,
|
|
88
|
-
formConfig.colon && ":"
|
|
89
|
-
]
|
|
90
|
-
}
|
|
91
|
-
),
|
|
92
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
93
|
-
select.Select,
|
|
94
|
-
{
|
|
95
|
-
value: field.value?.toString() ?? "",
|
|
96
|
-
onValueChange: (value) => {
|
|
97
|
-
if (value === "" && allowClear) {
|
|
98
|
-
field.onChange("");
|
|
99
|
-
} else {
|
|
100
|
-
field.onChange(value);
|
|
101
|
-
}
|
|
102
|
-
},
|
|
103
|
-
disabled: effectiveDisabled,
|
|
104
|
-
children: [
|
|
105
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
106
|
-
select.SelectTrigger,
|
|
107
|
-
{
|
|
108
|
-
id: inputId,
|
|
109
|
-
"aria-invalid": hasError,
|
|
110
|
-
"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
|
|
111
|
-
className: cn.cn(
|
|
112
|
-
selectSizeVariants({ size: effectiveSize }),
|
|
113
|
-
effectiveVariant === "error" && "border-destructive focus:ring-destructive",
|
|
114
|
-
effectiveVariant === "success" && "border-green-500 focus:ring-green-500",
|
|
115
|
-
className
|
|
116
|
-
),
|
|
117
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder })
|
|
118
|
-
}
|
|
119
|
-
),
|
|
120
|
-
/* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
|
|
121
|
-
allowClear && field.value && /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Clear selection" }) }),
|
|
122
|
-
children ?? options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
123
|
-
select.SelectItem,
|
|
124
|
-
{
|
|
125
|
-
value: option.value.toString(),
|
|
126
|
-
disabled: option.disabled,
|
|
127
|
-
children: option.label
|
|
128
|
-
},
|
|
129
|
-
option.value
|
|
130
|
-
))
|
|
131
|
-
] })
|
|
132
|
-
]
|
|
133
|
-
}
|
|
134
|
-
),
|
|
135
|
-
showError && hasError && /* @__PURE__ */ jsxRuntime.jsx(
|
|
136
|
-
"p",
|
|
137
|
-
{
|
|
138
|
-
id: `${inputId}-error`,
|
|
139
|
-
className: "text-sm text-destructive",
|
|
140
|
-
role: "alert",
|
|
141
|
-
children: errorMessage
|
|
142
|
-
}
|
|
143
|
-
),
|
|
144
|
-
helperText && !hasError && /* @__PURE__ */ jsxRuntime.jsx(
|
|
145
|
-
"p",
|
|
146
|
-
{
|
|
147
|
-
id: `${inputId}-helper`,
|
|
148
|
-
className: "text-sm text-muted-foreground",
|
|
149
|
-
children: helperText
|
|
150
|
-
}
|
|
151
|
-
)
|
|
152
|
-
] });
|
|
153
|
-
}
|
|
154
|
-
Select.displayName = "Select";
|
|
155
|
-
exports.Select = Select;
|
|
156
|
-
//# sourceMappingURL=Select.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Form/Select.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useContext, useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { labelVariants } from \"./variants\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport {\n Select as ShadcnSelect,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"../../primitives/select\";\nimport { Label } from \"../../primitives/label\";\n\nconst selectSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-8 text-xs\",\n md: \"h-10 text-sm\",\n lg: \"h-12 text-base\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nexport interface SelectOption {\n label: string;\n value: string | number;\n disabled?: boolean;\n}\n\nexport interface SelectProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends VariantProps<typeof selectSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the select */\n label?: string;\n /** Helper text displayed below the select */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** Whether the select should take full width */\n fullWidth?: boolean;\n /** Options for the select */\n options?: SelectOption[];\n /** Placeholder text */\n placeholder?: string;\n /** Allow clear selection */\n allowClear?: boolean;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Children (alternative to options prop) */\n children?: ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Additional class name */\n className?: string;\n /** ID for the select */\n id?: string;\n /** Variant style */\n variant?: \"default\" | \"error\" | \"success\";\n \n // Validation props\n /** Field is required */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Select component with form integration\n * \n * This is a wrapper around the shadcn/ui Select primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Select \n * name=\"country\" \n * label=\"Country\" \n * required\n * options={[\n * { label: \"USA\", value: \"us\" },\n * { label: \"Canada\", value: \"ca\" },\n * ]} \n * />\n * ```\n */\nexport function Select<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n fullWidth = true,\n className,\n disabled,\n options = [],\n placeholder,\n allowClear,\n id: providedId,\n control: externalControl,\n children,\n // Validation props\n required,\n validate,\n}: SelectProps<TFieldValues, TName>) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"string\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n \n // Determine variant based on error state\n const effectiveVariant = hasError ? \"error\" : variant;\n\n return (\n <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\n {label && (\n <Label\n htmlFor={inputId}\n className={labelVariants({ required: !!required })}\n >\n {label}\n {formConfig.colon && \":\"}\n </Label>\n )}\n \n <ShadcnSelect\n value={field.value?.toString() ?? \"\"}\n onValueChange={(value) => {\n // Handle clear selection\n if (value === \"\" && allowClear) {\n field.onChange(\"\");\n } else {\n field.onChange(value);\n }\n }}\n disabled={effectiveDisabled}\n >\n <SelectTrigger\n id={inputId}\n aria-invalid={hasError}\n aria-describedby={\n hasError\n ? `${inputId}-error`\n : helperText\n ? `${inputId}-helper`\n : undefined\n }\n className={cn(\n selectSizeVariants({ size: effectiveSize }),\n effectiveVariant === \"error\" && \"border-destructive focus:ring-destructive\",\n effectiveVariant === \"success\" && \"border-green-500 focus:ring-green-500\",\n className\n )}\n >\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {allowClear && field.value && (\n <SelectItem value=\"\">\n <span className=\"text-muted-foreground\">Clear selection</span>\n </SelectItem>\n )}\n {children ?? options.map((option) => (\n <SelectItem\n key={option.value}\n value={option.value.toString()}\n disabled={option.disabled}\n >\n {option.label}\n </SelectItem>\n ))}\n </SelectContent>\n </ShadcnSelect>\n\n {showError && hasError && (\n <p\n id={`${inputId}-error`}\n className=\"text-sm text-destructive\"\n role=\"alert\"\n >\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p\n id={`${inputId}-helper`}\n className=\"text-sm text-muted-foreground\"\n >\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\nSelect.displayName = \"Select\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","labelVariants","ShadcnSelect","jsx","SelectTrigger","SelectValue","SelectContent","SelectItem"],"mappings":"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"}
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useId, useContext, useEffect } from "react";
|
|
4
|
-
import { useFormContext, useController } from "react-hook-form";
|
|
5
|
-
import { cva } from "class-variance-authority";
|
|
6
|
-
import { cn } from "../../utils/cn.js";
|
|
7
|
-
import { labelVariants } from "./variants.js";
|
|
8
|
-
import { FormConfigContext } from "./context.js";
|
|
9
|
-
import { Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../primitives/select.js";
|
|
10
|
-
import { Label } from "../../primitives/label.js";
|
|
11
|
-
const selectSizeVariants = cva(
|
|
12
|
-
"",
|
|
13
|
-
{
|
|
14
|
-
variants: {
|
|
15
|
-
size: {
|
|
16
|
-
sm: "h-8 text-xs",
|
|
17
|
-
md: "h-10 text-sm",
|
|
18
|
-
lg: "h-12 text-base"
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
defaultVariants: {
|
|
22
|
-
size: "md"
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
);
|
|
26
|
-
function Select({
|
|
27
|
-
name,
|
|
28
|
-
label,
|
|
29
|
-
helperText,
|
|
30
|
-
showError = true,
|
|
31
|
-
error: customError,
|
|
32
|
-
size,
|
|
33
|
-
variant,
|
|
34
|
-
fullWidth = true,
|
|
35
|
-
className,
|
|
36
|
-
disabled,
|
|
37
|
-
options = [],
|
|
38
|
-
placeholder,
|
|
39
|
-
allowClear,
|
|
40
|
-
id: providedId,
|
|
41
|
-
control: externalControl,
|
|
42
|
-
children,
|
|
43
|
-
// Validation props
|
|
44
|
-
required,
|
|
45
|
-
validate
|
|
46
|
-
}) {
|
|
47
|
-
const generatedId = useId();
|
|
48
|
-
const inputId = providedId ?? generatedId;
|
|
49
|
-
const formConfigContext = useContext(FormConfigContext);
|
|
50
|
-
const formConfig = formConfigContext ?? {};
|
|
51
|
-
const rhfContext = useFormContext();
|
|
52
|
-
const control = externalControl ?? rhfContext?.control;
|
|
53
|
-
useEffect(() => {
|
|
54
|
-
if (formConfigContext?.registerFieldValidation) {
|
|
55
|
-
const rules = {};
|
|
56
|
-
if (required !== void 0) rules.required = required;
|
|
57
|
-
if (validate !== void 0) rules.validate = validate;
|
|
58
|
-
formConfigContext.registerFieldValidation({
|
|
59
|
-
name,
|
|
60
|
-
type: "string",
|
|
61
|
-
rules
|
|
62
|
-
});
|
|
63
|
-
return () => {
|
|
64
|
-
formConfigContext.unregisterFieldValidation(name);
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
}, [formConfigContext, name, required, validate]);
|
|
68
|
-
const { field, fieldState } = useController({
|
|
69
|
-
name,
|
|
70
|
-
control
|
|
71
|
-
});
|
|
72
|
-
const fieldError = fieldState.error?.message;
|
|
73
|
-
const errorMessage = customError ?? fieldError;
|
|
74
|
-
const hasError = !!errorMessage;
|
|
75
|
-
const effectiveSize = size ?? formConfig.size ?? "md";
|
|
76
|
-
const effectiveDisabled = disabled ?? formConfig.disabled;
|
|
77
|
-
const effectiveVariant = hasError ? "error" : variant;
|
|
78
|
-
return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", fullWidth && "w-full"), children: [
|
|
79
|
-
label && /* @__PURE__ */ jsxs(
|
|
80
|
-
Label,
|
|
81
|
-
{
|
|
82
|
-
htmlFor: inputId,
|
|
83
|
-
className: labelVariants({ required: !!required }),
|
|
84
|
-
children: [
|
|
85
|
-
label,
|
|
86
|
-
formConfig.colon && ":"
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
),
|
|
90
|
-
/* @__PURE__ */ jsxs(
|
|
91
|
-
Select$1,
|
|
92
|
-
{
|
|
93
|
-
value: field.value?.toString() ?? "",
|
|
94
|
-
onValueChange: (value) => {
|
|
95
|
-
if (value === "" && allowClear) {
|
|
96
|
-
field.onChange("");
|
|
97
|
-
} else {
|
|
98
|
-
field.onChange(value);
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
disabled: effectiveDisabled,
|
|
102
|
-
children: [
|
|
103
|
-
/* @__PURE__ */ jsx(
|
|
104
|
-
SelectTrigger,
|
|
105
|
-
{
|
|
106
|
-
id: inputId,
|
|
107
|
-
"aria-invalid": hasError,
|
|
108
|
-
"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
|
|
109
|
-
className: cn(
|
|
110
|
-
selectSizeVariants({ size: effectiveSize }),
|
|
111
|
-
effectiveVariant === "error" && "border-destructive focus:ring-destructive",
|
|
112
|
-
effectiveVariant === "success" && "border-green-500 focus:ring-green-500",
|
|
113
|
-
className
|
|
114
|
-
),
|
|
115
|
-
children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
|
|
116
|
-
}
|
|
117
|
-
),
|
|
118
|
-
/* @__PURE__ */ jsxs(SelectContent, { children: [
|
|
119
|
-
allowClear && field.value && /* @__PURE__ */ jsx(SelectItem, { value: "", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Clear selection" }) }),
|
|
120
|
-
children ?? options.map((option) => /* @__PURE__ */ jsx(
|
|
121
|
-
SelectItem,
|
|
122
|
-
{
|
|
123
|
-
value: option.value.toString(),
|
|
124
|
-
disabled: option.disabled,
|
|
125
|
-
children: option.label
|
|
126
|
-
},
|
|
127
|
-
option.value
|
|
128
|
-
))
|
|
129
|
-
] })
|
|
130
|
-
]
|
|
131
|
-
}
|
|
132
|
-
),
|
|
133
|
-
showError && hasError && /* @__PURE__ */ jsx(
|
|
134
|
-
"p",
|
|
135
|
-
{
|
|
136
|
-
id: `${inputId}-error`,
|
|
137
|
-
className: "text-sm text-destructive",
|
|
138
|
-
role: "alert",
|
|
139
|
-
children: errorMessage
|
|
140
|
-
}
|
|
141
|
-
),
|
|
142
|
-
helperText && !hasError && /* @__PURE__ */ jsx(
|
|
143
|
-
"p",
|
|
144
|
-
{
|
|
145
|
-
id: `${inputId}-helper`,
|
|
146
|
-
className: "text-sm text-muted-foreground",
|
|
147
|
-
children: helperText
|
|
148
|
-
}
|
|
149
|
-
)
|
|
150
|
-
] });
|
|
151
|
-
}
|
|
152
|
-
Select.displayName = "Select";
|
|
153
|
-
export {
|
|
154
|
-
Select
|
|
155
|
-
};
|
|
156
|
-
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../src/components/Form/Select.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useContext, useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { labelVariants } from \"./variants\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport {\n Select as ShadcnSelect,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"../../primitives/select\";\nimport { Label } from \"../../primitives/label\";\n\nconst selectSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-8 text-xs\",\n md: \"h-10 text-sm\",\n lg: \"h-12 text-base\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nexport interface SelectOption {\n label: string;\n value: string | number;\n disabled?: boolean;\n}\n\nexport interface SelectProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends VariantProps<typeof selectSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the select */\n label?: string;\n /** Helper text displayed below the select */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** Whether the select should take full width */\n fullWidth?: boolean;\n /** Options for the select */\n options?: SelectOption[];\n /** Placeholder text */\n placeholder?: string;\n /** Allow clear selection */\n allowClear?: boolean;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Children (alternative to options prop) */\n children?: ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Additional class name */\n className?: string;\n /** ID for the select */\n id?: string;\n /** Variant style */\n variant?: \"default\" | \"error\" | \"success\";\n \n // Validation props\n /** Field is required */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Select component with form integration\n * \n * This is a wrapper around the shadcn/ui Select primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Select \n * name=\"country\" \n * label=\"Country\" \n * required\n * options={[\n * { label: \"USA\", value: \"us\" },\n * { label: \"Canada\", value: \"ca\" },\n * ]} \n * />\n * ```\n */\nexport function Select<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n fullWidth = true,\n className,\n disabled,\n options = [],\n placeholder,\n allowClear,\n id: providedId,\n control: externalControl,\n children,\n // Validation props\n required,\n validate,\n}: SelectProps<TFieldValues, TName>) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"string\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n \n // Determine variant based on error state\n const effectiveVariant = hasError ? \"error\" : variant;\n\n return (\n <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\n {label && (\n <Label\n htmlFor={inputId}\n className={labelVariants({ required: !!required })}\n >\n {label}\n {formConfig.colon && \":\"}\n </Label>\n )}\n \n <ShadcnSelect\n value={field.value?.toString() ?? \"\"}\n onValueChange={(value) => {\n // Handle clear selection\n if (value === \"\" && allowClear) {\n field.onChange(\"\");\n } else {\n field.onChange(value);\n }\n }}\n disabled={effectiveDisabled}\n >\n <SelectTrigger\n id={inputId}\n aria-invalid={hasError}\n aria-describedby={\n hasError\n ? `${inputId}-error`\n : helperText\n ? `${inputId}-helper`\n : undefined\n }\n className={cn(\n selectSizeVariants({ size: effectiveSize }),\n effectiveVariant === \"error\" && \"border-destructive focus:ring-destructive\",\n effectiveVariant === \"success\" && \"border-green-500 focus:ring-green-500\",\n className\n )}\n >\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {allowClear && field.value && (\n <SelectItem value=\"\">\n <span className=\"text-muted-foreground\">Clear selection</span>\n </SelectItem>\n )}\n {children ?? options.map((option) => (\n <SelectItem\n key={option.value}\n value={option.value.toString()}\n disabled={option.disabled}\n >\n {option.label}\n </SelectItem>\n ))}\n </SelectContent>\n </ShadcnSelect>\n\n {showError && hasError && (\n <p\n id={`${inputId}-error`}\n className=\"text-sm text-destructive\"\n role=\"alert\"\n >\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p\n id={`${inputId}-helper`}\n className=\"text-sm text-muted-foreground\"\n >\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\nSelect.displayName = \"Select\";\n"],"names":["useRHFFormContext","ShadcnSelect"],"mappings":"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"}
|