@skybin-tech/nebula-ui 0.0.29 → 0.0.31
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/_virtual/_rolldown/runtime.cjs +1 -1
- package/dist/cjs/components/Accordion/Accordion.cjs.map +1 -1
- package/dist/cjs/components/Alert/Alert.cjs.map +1 -1
- package/dist/cjs/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/cjs/components/Button/Button.cjs.map +1 -1
- package/dist/cjs/components/Card/Card.cjs.map +1 -1
- package/dist/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs.map +1 -1
- package/dist/cjs/components/Form/Checkbox.cjs.map +1 -1
- package/dist/cjs/components/Form/Combobox.cjs.map +1 -1
- package/dist/cjs/components/Form/CountryPicker.cjs.map +1 -1
- package/dist/cjs/components/Form/CountrySelect.cjs.map +1 -1
- package/dist/cjs/components/Form/DatePicker.cjs +8 -2
- package/dist/cjs/components/Form/DatePicker.cjs.map +1 -1
- package/dist/cjs/components/Form/DateTimePicker.cjs +202 -0
- package/dist/cjs/components/Form/DateTimePicker.cjs.map +1 -0
- package/dist/cjs/components/Form/FieldLayout.cjs.map +1 -1
- package/dist/cjs/components/Form/Form.cjs +9 -8
- package/dist/cjs/components/Form/Form.cjs.map +1 -1
- package/dist/cjs/components/Form/FormSwitch.cjs.map +1 -1
- package/dist/cjs/components/Form/PasswordRevealToggle.cjs +21 -0
- package/dist/cjs/components/Form/PasswordRevealToggle.cjs.map +1 -0
- package/dist/cjs/components/Form/PhoneInput.cjs.map +1 -1
- package/dist/cjs/components/Form/Radio.cjs.map +1 -1
- package/dist/cjs/components/Form/Select.cjs.map +1 -1
- package/dist/cjs/components/Form/TextArea.cjs.map +1 -1
- package/dist/cjs/components/Form/TextBox.cjs +29 -14
- package/dist/cjs/components/Form/TextBox.cjs.map +1 -1
- package/dist/cjs/components/Form/TimePicker.cjs +111 -0
- package/dist/cjs/components/Form/TimePicker.cjs.map +1 -0
- package/dist/cjs/components/Form/context.cjs +1 -1
- package/dist/cjs/components/Form/context.cjs.map +1 -1
- package/dist/cjs/components/Form/hooks.cjs.map +1 -1
- package/dist/cjs/components/Form/index.cjs +7 -0
- package/dist/cjs/components/Form/variants.cjs.map +1 -1
- package/dist/cjs/components/Input/Input.cjs +32 -4
- package/dist/cjs/components/Input/Input.cjs.map +1 -1
- package/dist/cjs/components/Label/Label.cjs.map +1 -1
- package/dist/cjs/components/Pagination/Pagination.cjs.map +1 -1
- package/dist/cjs/components/Separator/Separator.cjs.map +1 -1
- package/dist/cjs/components/Switch/Switch.cjs.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.cjs.map +1 -1
- package/dist/cjs/components/Textarea/Textarea.cjs.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/hooks/useDebounce.cjs.map +1 -1
- package/dist/cjs/hooks/useToggle.cjs.map +1 -1
- package/dist/cjs/index.cjs +7 -0
- package/dist/cjs/primitives/accordion.cjs.map +1 -1
- package/dist/cjs/primitives/alert.cjs.map +1 -1
- package/dist/cjs/primitives/badge.cjs.map +1 -1
- package/dist/cjs/primitives/breadcrumb.cjs.map +1 -1
- package/dist/cjs/primitives/button.cjs.map +1 -1
- package/dist/cjs/primitives/checkbox.cjs.map +1 -1
- package/dist/cjs/primitives/command.cjs.map +1 -1
- package/dist/cjs/primitives/dialog.cjs.map +1 -1
- package/dist/cjs/primitives/dropdown-menu.cjs.map +1 -1
- package/dist/cjs/primitives/input-otp.cjs.map +1 -1
- package/dist/cjs/primitives/label.cjs.map +1 -1
- package/dist/cjs/primitives/progress.cjs.map +1 -1
- package/dist/cjs/primitives/radio-group.cjs.map +1 -1
- package/dist/cjs/primitives/scroll-area.cjs.map +1 -1
- package/dist/cjs/primitives/select.cjs.map +1 -1
- package/dist/cjs/primitives/sheet.cjs.map +1 -1
- package/dist/cjs/primitives/slider.cjs.map +1 -1
- package/dist/cjs/primitives/switch.cjs.map +1 -1
- package/dist/cjs/primitives/table.cjs.map +1 -1
- package/dist/cjs/primitives/toast.cjs.map +1 -1
- package/dist/cjs/primitives/toggle.cjs.map +1 -1
- package/dist/cjs/utils/cn.cjs.map +1 -1
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Form/Checkbox.js.map +1 -1
- package/dist/components/Form/Combobox.js.map +1 -1
- package/dist/components/Form/CountryPicker.js.map +1 -1
- package/dist/components/Form/CountrySelect.js.map +1 -1
- package/dist/components/Form/DatePicker.d.ts.map +1 -1
- package/dist/components/Form/DatePicker.js +9 -3
- package/dist/components/Form/DatePicker.js.map +1 -1
- package/dist/components/Form/DateTimePicker.d.ts +28 -0
- package/dist/components/Form/DateTimePicker.d.ts.map +1 -0
- package/dist/components/Form/DateTimePicker.js +202 -0
- package/dist/components/Form/DateTimePicker.js.map +1 -0
- package/dist/components/Form/FieldLayout.js.map +1 -1
- package/dist/components/Form/Form.js +9 -8
- package/dist/components/Form/Form.js.map +1 -1
- package/dist/components/Form/FormSwitch.js.map +1 -1
- package/dist/components/Form/PasswordRevealToggle.d.ts +7 -0
- package/dist/components/Form/PasswordRevealToggle.d.ts.map +1 -0
- package/dist/components/Form/PasswordRevealToggle.js +21 -0
- package/dist/components/Form/PasswordRevealToggle.js.map +1 -0
- package/dist/components/Form/PhoneInput.js.map +1 -1
- package/dist/components/Form/Radio.js.map +1 -1
- package/dist/components/Form/Select.js.map +1 -1
- package/dist/components/Form/TextArea.js.map +1 -1
- package/dist/components/Form/TextBox.d.ts +5 -0
- package/dist/components/Form/TextBox.d.ts.map +1 -1
- package/dist/components/Form/TextBox.js +30 -15
- package/dist/components/Form/TextBox.js.map +1 -1
- package/dist/components/Form/TimePicker.d.ts +14 -0
- package/dist/components/Form/TimePicker.d.ts.map +1 -0
- package/dist/components/Form/TimePicker.js +111 -0
- package/dist/components/Form/TimePicker.js.map +1 -0
- package/dist/components/Form/context.d.ts +1 -1
- package/dist/components/Form/context.d.ts.map +1 -1
- package/dist/components/Form/context.js +1 -1
- package/dist/components/Form/context.js.map +1 -1
- package/dist/components/Form/index.d.ts +6 -0
- package/dist/components/Form/index.d.ts.map +1 -1
- package/dist/components/Form/index.js +4 -1
- package/dist/components/Input/Input.d.ts +14 -2
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/components/Input/Input.js +34 -6
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -1
- package/dist/primitives/accordion.js.map +1 -1
- package/dist/primitives/breadcrumb.js.map +1 -1
- package/dist/primitives/checkbox.js.map +1 -1
- package/dist/primitives/command.js.map +1 -1
- package/dist/primitives/dialog.js.map +1 -1
- package/dist/primitives/dropdown-menu.js.map +1 -1
- package/dist/primitives/input-otp.js.map +1 -1
- package/dist/primitives/progress.js.map +1 -1
- package/dist/primitives/radio-group.js.map +1 -1
- package/dist/primitives/scroll-area.js.map +1 -1
- package/dist/primitives/select.js.map +1 -1
- package/dist/primitives/sheet.js.map +1 -1
- package/dist/primitives/slider.js.map +1 -1
- package/dist/primitives/switch.js.map +1 -1
- package/dist/primitives/table.js.map +1 -1
- package/dist/primitives/toast.js.map +1 -1
- package/package.json +22 -22
|
@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
}
|
|
17
17
|
return to;
|
|
18
18
|
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
|
|
20
20
|
value: mod,
|
|
21
21
|
enumerable: true
|
|
22
22
|
}) : target, mod));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.cjs","names":[],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport {\r\n Accordion as AccordionPrimitive,\r\n AccordionItem as AccordionItemPrimitive,\r\n AccordionTrigger as AccordionTriggerPrimitive,\r\n AccordionContent as AccordionContentPrimitive,\r\n} from \"../../primitives/accordion\"\r\n\r\nexport const Accordion = AccordionPrimitive\r\n\r\nexport const AccordionItem = forwardRef<\r\n ElementRef<typeof AccordionItemPrimitive>,\r\n ComponentPropsWithoutRef<typeof AccordionItemPrimitive>\r\n>((props, ref) => <AccordionItemPrimitive ref={ref} {...props} />)\r\nAccordionItem.displayName = \"AccordionItem\"\r\n\r\nexport const AccordionTrigger = forwardRef<\r\n ElementRef<typeof AccordionTriggerPrimitive>,\r\n ComponentPropsWithoutRef<typeof AccordionTriggerPrimitive>\r\n>((props, ref) => <AccordionTriggerPrimitive ref={ref} {...props} />)\r\nAccordionTrigger.displayName = \"AccordionTrigger\"\r\n\r\nexport const AccordionContent = forwardRef<\r\n ElementRef<typeof AccordionContentPrimitive>,\r\n ComponentPropsWithoutRef<typeof AccordionContentPrimitive>\r\n>((props, ref) => <AccordionContentPrimitive ref={ref} {...props} />)\r\nAccordionContent.displayName = \"AccordionContent\"\r\n"],"mappings":";;;;;AASA,IAAa,YAAY,kBAAA;AAEzB,IAAa,iBAAA,
|
|
1
|
+
{"version":3,"file":"Accordion.cjs","names":[],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport {\r\n Accordion as AccordionPrimitive,\r\n AccordionItem as AccordionItemPrimitive,\r\n AccordionTrigger as AccordionTriggerPrimitive,\r\n AccordionContent as AccordionContentPrimitive,\r\n} from \"../../primitives/accordion\"\r\n\r\nexport const Accordion = AccordionPrimitive\r\n\r\nexport const AccordionItem = forwardRef<\r\n ElementRef<typeof AccordionItemPrimitive>,\r\n ComponentPropsWithoutRef<typeof AccordionItemPrimitive>\r\n>((props, ref) => <AccordionItemPrimitive ref={ref} {...props} />)\r\nAccordionItem.displayName = \"AccordionItem\"\r\n\r\nexport const AccordionTrigger = forwardRef<\r\n ElementRef<typeof AccordionTriggerPrimitive>,\r\n ComponentPropsWithoutRef<typeof AccordionTriggerPrimitive>\r\n>((props, ref) => <AccordionTriggerPrimitive ref={ref} {...props} />)\r\nAccordionTrigger.displayName = \"AccordionTrigger\"\r\n\r\nexport const AccordionContent = forwardRef<\r\n ElementRef<typeof AccordionContentPrimitive>,\r\n ComponentPropsWithoutRef<typeof AccordionContentPrimitive>\r\n>((props, ref) => <AccordionContentPrimitive ref={ref} {...props} />)\r\nAccordionContent.displayName = \"AccordionContent\"\r\n"],"mappings":";;;;;AASA,IAAa,YAAY,kBAAA;AAEzB,IAAa,iBAAA,GAAgB,MAAA,WAAA,EAG1B,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAA,eAAD;CAA6B;CAAK,GAAI;AAAQ,CAAA,CAAC;AACjE,cAAc,cAAc;AAE5B,IAAa,oBAAA,GAAmB,MAAA,WAAA,EAG7B,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAA,kBAAD;CAAgC;CAAK,GAAI;AAAQ,CAAA,CAAC;AACpE,iBAAiB,cAAc;AAE/B,IAAa,oBAAA,GAAmB,MAAA,WAAA,EAG7B,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAA,kBAAD;CAAgC;CAAK,GAAI;AAAQ,CAAA,CAAC;AACpE,iBAAiB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.cjs","names":[],"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport {\r\n Alert as AlertPrimitive,\r\n AlertTitle as AlertTitlePrimitive,\r\n AlertDescription as AlertDescriptionPrimitive,\r\n} from \"../../primitives/alert\"\r\n\r\nexport const Alert = forwardRef<\r\n ElementRef<typeof AlertPrimitive>,\r\n ComponentPropsWithoutRef<typeof AlertPrimitive>\r\n>((props, ref) => <AlertPrimitive ref={ref} {...props} />)\r\nAlert.displayName = \"Alert\"\r\n\r\nexport const AlertTitle = forwardRef<\r\n ElementRef<typeof AlertTitlePrimitive>,\r\n ComponentPropsWithoutRef<typeof AlertTitlePrimitive>\r\n>((props, ref) => <AlertTitlePrimitive ref={ref} {...props} />)\r\nAlertTitle.displayName = \"AlertTitle\"\r\n\r\nexport const AlertDescription = forwardRef<\r\n ElementRef<typeof AlertDescriptionPrimitive>,\r\n ComponentPropsWithoutRef<typeof AlertDescriptionPrimitive>\r\n>((props, ref) => <AlertDescriptionPrimitive ref={ref} {...props} />)\r\nAlertDescription.displayName = \"AlertDescription\"\r\n"],"mappings":";;;;;AAQA,IAAa,SAAA,
|
|
1
|
+
{"version":3,"file":"Alert.cjs","names":[],"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport {\r\n Alert as AlertPrimitive,\r\n AlertTitle as AlertTitlePrimitive,\r\n AlertDescription as AlertDescriptionPrimitive,\r\n} from \"../../primitives/alert\"\r\n\r\nexport const Alert = forwardRef<\r\n ElementRef<typeof AlertPrimitive>,\r\n ComponentPropsWithoutRef<typeof AlertPrimitive>\r\n>((props, ref) => <AlertPrimitive ref={ref} {...props} />)\r\nAlert.displayName = \"Alert\"\r\n\r\nexport const AlertTitle = forwardRef<\r\n ElementRef<typeof AlertTitlePrimitive>,\r\n ComponentPropsWithoutRef<typeof AlertTitlePrimitive>\r\n>((props, ref) => <AlertTitlePrimitive ref={ref} {...props} />)\r\nAlertTitle.displayName = \"AlertTitle\"\r\n\r\nexport const AlertDescription = forwardRef<\r\n ElementRef<typeof AlertDescriptionPrimitive>,\r\n ComponentPropsWithoutRef<typeof AlertDescriptionPrimitive>\r\n>((props, ref) => <AlertDescriptionPrimitive ref={ref} {...props} />)\r\nAlertDescription.displayName = \"AlertDescription\"\r\n"],"mappings":";;;;;AAQA,IAAa,SAAA,GAAQ,MAAA,WAAA,EAGlB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAA,OAAD;CAAqB;CAAK,GAAI;AAAQ,CAAA,CAAC;AACzD,MAAM,cAAc;AAEpB,IAAa,cAAA,GAAa,MAAA,WAAA,EAGvB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAA,YAAD;CAA0B;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC9D,WAAW,cAAc;AAEzB,IAAa,oBAAA,GAAmB,MAAA,WAAA,EAG7B,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAA,kBAAD;CAAgC;CAAK,GAAI;AAAQ,CAAA,CAAC;AACpE,iBAAiB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.cjs","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport {\r\n Avatar as AvatarPrimitive,\r\n AvatarImage as AvatarImagePrimitive,\r\n AvatarFallback as AvatarFallbackPrimitive,\r\n} from \"../../primitives/avatar\"\r\n\r\nexport const Avatar = forwardRef<\r\n ElementRef<typeof AvatarPrimitive>,\r\n ComponentPropsWithoutRef<typeof AvatarPrimitive>\r\n>((props, ref) => <AvatarPrimitive ref={ref} {...props} />)\r\nAvatar.displayName = \"Avatar\"\r\n\r\nexport const AvatarImage = forwardRef<\r\n ElementRef<typeof AvatarImagePrimitive>,\r\n ComponentPropsWithoutRef<typeof AvatarImagePrimitive>\r\n>((props, ref) => <AvatarImagePrimitive ref={ref} {...props} />)\r\nAvatarImage.displayName = \"AvatarImage\"\r\n\r\nexport const AvatarFallback = forwardRef<\r\n ElementRef<typeof AvatarFallbackPrimitive>,\r\n ComponentPropsWithoutRef<typeof AvatarFallbackPrimitive>\r\n>((props, ref) => <AvatarFallbackPrimitive ref={ref} {...props} />)\r\nAvatarFallback.displayName = \"AvatarFallback\"\r\n"],"mappings":";;;;;AAQA,IAAa,UAAA,
|
|
1
|
+
{"version":3,"file":"Avatar.cjs","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport {\r\n Avatar as AvatarPrimitive,\r\n AvatarImage as AvatarImagePrimitive,\r\n AvatarFallback as AvatarFallbackPrimitive,\r\n} from \"../../primitives/avatar\"\r\n\r\nexport const Avatar = forwardRef<\r\n ElementRef<typeof AvatarPrimitive>,\r\n ComponentPropsWithoutRef<typeof AvatarPrimitive>\r\n>((props, ref) => <AvatarPrimitive ref={ref} {...props} />)\r\nAvatar.displayName = \"Avatar\"\r\n\r\nexport const AvatarImage = forwardRef<\r\n ElementRef<typeof AvatarImagePrimitive>,\r\n ComponentPropsWithoutRef<typeof AvatarImagePrimitive>\r\n>((props, ref) => <AvatarImagePrimitive ref={ref} {...props} />)\r\nAvatarImage.displayName = \"AvatarImage\"\r\n\r\nexport const AvatarFallback = forwardRef<\r\n ElementRef<typeof AvatarFallbackPrimitive>,\r\n ComponentPropsWithoutRef<typeof AvatarFallbackPrimitive>\r\n>((props, ref) => <AvatarFallbackPrimitive ref={ref} {...props} />)\r\nAvatarFallback.displayName = \"AvatarFallback\"\r\n"],"mappings":";;;;;AAQA,IAAa,UAAA,GAAS,MAAA,WAAA,EAGnB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,QAAD;CAAsB;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC1D,OAAO,cAAc;AAErB,IAAa,eAAA,GAAc,MAAA,WAAA,EAGxB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,aAAD;CAA2B;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC/D,YAAY,cAAc;AAE1B,IAAa,kBAAA,GAAiB,MAAA,WAAA,EAG3B,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,gBAAD;CAA8B;CAAK,GAAI;AAAQ,CAAA,CAAC;AAClE,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","names":[],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\r\nimport { type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { ButtonPrimitive, buttonVariants as buttonVariantsPrimitive } from \"../../primitives/button\"\r\n\r\n// Re-exported for consumers that compose custom button styles\r\n// eslint-disable-next-line react-refresh/only-export-components\r\nexport const buttonVariants = buttonVariantsPrimitive;\r\n\r\ntype PrimitiveVariant = NonNullable<VariantProps<typeof buttonVariants>[\"variant\"]>;\r\ntype PrimitiveSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\r\n\r\nconst variantMap: Record<string, PrimitiveVariant> = {\r\n primary: \"default\",\r\n secondary: \"secondary\",\r\n outline: \"outline\",\r\n ghost: \"ghost\",\r\n danger: \"destructive\",\r\n};\r\n\r\nconst sizeMap: Record<string, PrimitiveSize> = {\r\n sm: \"sm\",\r\n md: \"default\",\r\n lg: \"lg\",\r\n};\r\n\r\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n /** Visual style variant */\r\n variant?: keyof typeof variantMap;\r\n /** Size of the button */\r\n size?: keyof typeof sizeMap;\r\n /** Stretch button to full container width */\r\n fullWidth?: boolean;\r\n /** Show a loading spinner and disable interaction */\r\n loading?: boolean;\r\n /** Render as child element via Slot (e.g. wrap a Link) */\r\n asChild?: boolean;\r\n children: ReactNode;\r\n}\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\r\n {\r\n children,\r\n variant = \"primary\",\r\n size = \"md\",\r\n fullWidth = false,\r\n loading = false,\r\n disabled,\r\n className,\r\n asChild = false,\r\n style,\r\n ...props\r\n },\r\n ref\r\n) {\r\n return (\r\n <ButtonPrimitive\r\n ref={ref}\r\n variant={variantMap[variant]}\r\n size={sizeMap[size]}\r\n asChild={asChild}\r\n disabled={disabled || loading}\r\n className={cn(fullWidth && \"w-full\", \"relative cursor-pointer\", className)}\r\n style={style}\r\n {...props}\r\n >\r\n {asChild ? (\r\n children\r\n ) : (\r\n <>\r\n {loading && (\r\n <span className=\"absolute inset-0 flex items-center justify-center\">\r\n <span className=\"size-4 border-2 border-current border-r-transparent rounded-full animate-spin\" />\r\n </span>\r\n )}\r\n <span className={cn(\"inline-flex items-center gap-2\", loading && \"invisible\")}>{children}</span>\r\n </>\r\n )}\r\n </ButtonPrimitive>\r\n );\r\n});\r\n\r\nButton.displayName = \"Button\";\r\n"],"mappings":";;;;;;;AAOA,IAAa,iBAAiB,eAAA;AAK9B,IAAM,aAA+C;CACnD,SAAS;CACT,WAAW;CACX,SAAS;CACT,OAAO;CACP,QAAQ;AACV;AAEA,IAAM,UAAyC;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAgBA,IAAa,UAAA,
|
|
1
|
+
{"version":3,"file":"Button.cjs","names":[],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\r\nimport { type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { ButtonPrimitive, buttonVariants as buttonVariantsPrimitive } from \"../../primitives/button\"\r\n\r\n// Re-exported for consumers that compose custom button styles\r\n// eslint-disable-next-line react-refresh/only-export-components\r\nexport const buttonVariants = buttonVariantsPrimitive;\r\n\r\ntype PrimitiveVariant = NonNullable<VariantProps<typeof buttonVariants>[\"variant\"]>;\r\ntype PrimitiveSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\r\n\r\nconst variantMap: Record<string, PrimitiveVariant> = {\r\n primary: \"default\",\r\n secondary: \"secondary\",\r\n outline: \"outline\",\r\n ghost: \"ghost\",\r\n danger: \"destructive\",\r\n};\r\n\r\nconst sizeMap: Record<string, PrimitiveSize> = {\r\n sm: \"sm\",\r\n md: \"default\",\r\n lg: \"lg\",\r\n};\r\n\r\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n /** Visual style variant */\r\n variant?: keyof typeof variantMap;\r\n /** Size of the button */\r\n size?: keyof typeof sizeMap;\r\n /** Stretch button to full container width */\r\n fullWidth?: boolean;\r\n /** Show a loading spinner and disable interaction */\r\n loading?: boolean;\r\n /** Render as child element via Slot (e.g. wrap a Link) */\r\n asChild?: boolean;\r\n children: ReactNode;\r\n}\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\r\n {\r\n children,\r\n variant = \"primary\",\r\n size = \"md\",\r\n fullWidth = false,\r\n loading = false,\r\n disabled,\r\n className,\r\n asChild = false,\r\n style,\r\n ...props\r\n },\r\n ref\r\n) {\r\n return (\r\n <ButtonPrimitive\r\n ref={ref}\r\n variant={variantMap[variant]}\r\n size={sizeMap[size]}\r\n asChild={asChild}\r\n disabled={disabled || loading}\r\n className={cn(fullWidth && \"w-full\", \"relative cursor-pointer\", className)}\r\n style={style}\r\n {...props}\r\n >\r\n {asChild ? (\r\n children\r\n ) : (\r\n <>\r\n {loading && (\r\n <span className=\"absolute inset-0 flex items-center justify-center\">\r\n <span className=\"size-4 border-2 border-current border-r-transparent rounded-full animate-spin\" />\r\n </span>\r\n )}\r\n <span className={cn(\"inline-flex items-center gap-2\", loading && \"invisible\")}>{children}</span>\r\n </>\r\n )}\r\n </ButtonPrimitive>\r\n );\r\n});\r\n\r\nButton.displayName = \"Button\";\r\n"],"mappings":";;;;;;;AAOA,IAAa,iBAAiB,eAAA;AAK9B,IAAM,aAA+C;CACnD,SAAS;CACT,WAAW;CACX,SAAS;CACT,OAAO;CACP,QAAQ;AACV;AAEA,IAAM,UAAyC;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAgBA,IAAa,UAAA,GAAS,MAAA,WAAA,CAA2C,SAAS,OACxE,EACE,UACA,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,UACA,WACA,UAAU,OACV,OACA,GAAG,SAEL,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,QAAD;EACO;EACL,SAAS,WAAW;EACpB,MAAM,QAAQ;EACL;EACT,UAAU,YAAY;EACtB,WAAW,WAAA,GAAG,aAAa,UAAU,2BAA2B,SAAS;EAClE;EACP,GAAI;EAEH,UAAA,UACC,WAEA,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACG,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,gFAAiF,CAAA;EAC7F,CAAA,GAER,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,WAAA,GAAG,kCAAkC,WAAW,WAAW;GAAI;EAAe,CAAA,CAC/F,EAAA,CAAA;CAEW,CAAA;AAErB,CAAC;AAED,OAAO,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.cjs","names":[],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport {\r\n Card as CardPrimitive,\r\n CardHeader as CardHeaderPrimitive,\r\n CardTitle as CardTitlePrimitive,\r\n CardDescription as CardDescriptionPrimitive,\r\n CardContent as CardContentPrimitive,\r\n CardFooter as CardFooterPrimitive,\r\n} from \"../../primitives/card\"\r\n\r\nexport const Card = forwardRef<\r\n ElementRef<typeof CardPrimitive>,\r\n ComponentPropsWithoutRef<typeof CardPrimitive>\r\n>((props, ref) => <CardPrimitive ref={ref} {...props} />)\r\nCard.displayName = \"Card\"\r\n\r\nexport const CardHeader = forwardRef<\r\n ElementRef<typeof CardHeaderPrimitive>,\r\n ComponentPropsWithoutRef<typeof CardHeaderPrimitive>\r\n>((props, ref) => <CardHeaderPrimitive ref={ref} {...props} />)\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nexport const CardTitle = forwardRef<\r\n ElementRef<typeof CardTitlePrimitive>,\r\n ComponentPropsWithoutRef<typeof CardTitlePrimitive>\r\n>((props, ref) => <CardTitlePrimitive ref={ref} {...props} />)\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nexport const CardDescription = forwardRef<\r\n ElementRef<typeof CardDescriptionPrimitive>,\r\n ComponentPropsWithoutRef<typeof CardDescriptionPrimitive>\r\n>((props, ref) => <CardDescriptionPrimitive ref={ref} {...props} />)\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\nexport const CardContent = forwardRef<\r\n ElementRef<typeof CardContentPrimitive>,\r\n ComponentPropsWithoutRef<typeof CardContentPrimitive>\r\n>((props, ref) => <CardContentPrimitive ref={ref} {...props} />)\r\nCardContent.displayName = \"CardContent\"\r\n\r\nexport const CardFooter = forwardRef<\r\n ElementRef<typeof CardFooterPrimitive>,\r\n ComponentPropsWithoutRef<typeof CardFooterPrimitive>\r\n>((props, ref) => <CardFooterPrimitive ref={ref} {...props} />)\r\nCardFooter.displayName = \"CardFooter\"\r\n"],"mappings":";;;;;AAWA,IAAa,QAAA,
|
|
1
|
+
{"version":3,"file":"Card.cjs","names":[],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport {\r\n Card as CardPrimitive,\r\n CardHeader as CardHeaderPrimitive,\r\n CardTitle as CardTitlePrimitive,\r\n CardDescription as CardDescriptionPrimitive,\r\n CardContent as CardContentPrimitive,\r\n CardFooter as CardFooterPrimitive,\r\n} from \"../../primitives/card\"\r\n\r\nexport const Card = forwardRef<\r\n ElementRef<typeof CardPrimitive>,\r\n ComponentPropsWithoutRef<typeof CardPrimitive>\r\n>((props, ref) => <CardPrimitive ref={ref} {...props} />)\r\nCard.displayName = \"Card\"\r\n\r\nexport const CardHeader = forwardRef<\r\n ElementRef<typeof CardHeaderPrimitive>,\r\n ComponentPropsWithoutRef<typeof CardHeaderPrimitive>\r\n>((props, ref) => <CardHeaderPrimitive ref={ref} {...props} />)\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nexport const CardTitle = forwardRef<\r\n ElementRef<typeof CardTitlePrimitive>,\r\n ComponentPropsWithoutRef<typeof CardTitlePrimitive>\r\n>((props, ref) => <CardTitlePrimitive ref={ref} {...props} />)\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nexport const CardDescription = forwardRef<\r\n ElementRef<typeof CardDescriptionPrimitive>,\r\n ComponentPropsWithoutRef<typeof CardDescriptionPrimitive>\r\n>((props, ref) => <CardDescriptionPrimitive ref={ref} {...props} />)\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\nexport const CardContent = forwardRef<\r\n ElementRef<typeof CardContentPrimitive>,\r\n ComponentPropsWithoutRef<typeof CardContentPrimitive>\r\n>((props, ref) => <CardContentPrimitive ref={ref} {...props} />)\r\nCardContent.displayName = \"CardContent\"\r\n\r\nexport const CardFooter = forwardRef<\r\n ElementRef<typeof CardFooterPrimitive>,\r\n ComponentPropsWithoutRef<typeof CardFooterPrimitive>\r\n>((props, ref) => <CardFooterPrimitive ref={ref} {...props} />)\r\nCardFooter.displayName = \"CardFooter\"\r\n"],"mappings":";;;;;AAWA,IAAa,QAAA,GAAO,MAAA,WAAA,EAGjB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,MAAD;CAAoB;CAAK,GAAI;AAAQ,CAAA,CAAC;AACxD,KAAK,cAAc;AAEnB,IAAa,cAAA,GAAa,MAAA,WAAA,EAGvB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,YAAD;CAA0B;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC9D,WAAW,cAAc;AAEzB,IAAa,aAAA,GAAY,MAAA,WAAA,EAGtB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,WAAD;CAAyB;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC7D,UAAU,cAAc;AAExB,IAAa,mBAAA,GAAkB,MAAA,WAAA,EAG5B,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,iBAAD;CAA+B;CAAK,GAAI;AAAQ,CAAA,CAAC;AACnE,gBAAgB,cAAc;AAE9B,IAAa,eAAA,GAAc,MAAA,WAAA,EAGxB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,aAAD;CAA2B;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC/D,YAAY,cAAc;AAE1B,IAAa,cAAA,GAAa,MAAA,WAAA,EAGvB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,YAAD;CAA0B;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC9D,WAAW,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport { Checkbox as CheckboxPrimitive } from \"../../primitives/checkbox\"\r\n\r\nexport type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive>\r\n\r\nexport const Checkbox = forwardRef<\r\n ElementRef<typeof CheckboxPrimitive>,\r\n CheckboxProps\r\n>((props, ref) => <CheckboxPrimitive ref={ref} {...props} />)\r\nCheckbox.displayName = \"Checkbox\"\r\n"],"mappings":";;;;;;AAQA,IAAa,YAAA,
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport { Checkbox as CheckboxPrimitive } from \"../../primitives/checkbox\"\r\n\r\nexport type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive>\r\n\r\nexport const Checkbox = forwardRef<\r\n ElementRef<typeof CheckboxPrimitive>,\r\n CheckboxProps\r\n>((props, ref) => <CheckboxPrimitive ref={ref} {...props} />)\r\nCheckbox.displayName = \"Checkbox\"\r\n"],"mappings":";;;;;;AAQA,IAAa,YAAA,GAAW,MAAA,WAAA,EAGrB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAA,UAAD;CAAwB;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC5D,SAAS,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.cjs","names":[],"sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from \"react\"\r\nimport {\r\n DropdownMenu as DropdownMenuPrimitive,\r\n DropdownMenuTrigger as DropdownMenuTriggerPrimitive,\r\n DropdownMenuContent as DropdownMenuContentPrimitive,\r\n DropdownMenuItem as DropdownMenuItemPrimitive,\r\n DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,\r\n DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,\r\n DropdownMenuLabel as DropdownMenuLabelPrimitive,\r\n DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,\r\n DropdownMenuShortcut as DropdownMenuShortcutPrimitive,\r\n DropdownMenuGroup as DropdownMenuGroupPrimitive,\r\n DropdownMenuPortal as DropdownMenuPortalPrimitive,\r\n DropdownMenuSub as DropdownMenuSubPrimitive,\r\n DropdownMenuSubContent as DropdownMenuSubContentPrimitive,\r\n DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive,\r\n DropdownMenuRadioGroup as DropdownMenuRadioGroupPrimitive,\r\n} from \"../../primitives/dropdown-menu\"\r\n\r\n// Root / context-only components (no DOM element to ref)\r\nexport function DropdownMenu(props: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive>) {\r\n return <DropdownMenuPrimitive {...props} />\r\n}\r\n\r\nexport function DropdownMenuPortal(props: ComponentPropsWithoutRef<typeof DropdownMenuPortalPrimitive>) {\r\n return <DropdownMenuPortalPrimitive {...props} />\r\n}\r\n\r\nexport function DropdownMenuSub(props: ComponentPropsWithoutRef<typeof DropdownMenuSubPrimitive>) {\r\n return <DropdownMenuSubPrimitive {...props} />\r\n}\r\n\r\n// DOM-rendering components (forwardRef)\r\nexport const DropdownMenuTrigger = forwardRef<\r\n ElementRef<typeof DropdownMenuTriggerPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuTriggerPrimitive>\r\n>((props, ref) => <DropdownMenuTriggerPrimitive ref={ref} {...props} />)\r\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\"\r\n\r\nexport const DropdownMenuGroup = forwardRef<\r\n ElementRef<typeof DropdownMenuGroupPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuGroupPrimitive>\r\n>((props, ref) => <DropdownMenuGroupPrimitive ref={ref} {...props} />)\r\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\"\r\n\r\nexport const DropdownMenuRadioGroup = forwardRef<\r\n ElementRef<typeof DropdownMenuRadioGroupPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuRadioGroupPrimitive>\r\n>((props, ref) => <DropdownMenuRadioGroupPrimitive ref={ref} {...props} />)\r\nDropdownMenuRadioGroup.displayName = \"DropdownMenuRadioGroup\"\r\n\r\nexport const DropdownMenuContent = forwardRef<\r\n ElementRef<typeof DropdownMenuContentPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuContentPrimitive>\r\n>((props, ref) => <DropdownMenuContentPrimitive ref={ref} {...props} />)\r\nDropdownMenuContent.displayName = \"DropdownMenuContent\"\r\n\r\nexport const DropdownMenuSubContent = forwardRef<\r\n ElementRef<typeof DropdownMenuSubContentPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuSubContentPrimitive>\r\n>((props, ref) => <DropdownMenuSubContentPrimitive ref={ref} {...props} />)\r\nDropdownMenuSubContent.displayName = \"DropdownMenuSubContent\"\r\n\r\nexport const DropdownMenuSubTrigger = forwardRef<\r\n ElementRef<typeof DropdownMenuSubTriggerPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuSubTriggerPrimitive>\r\n>((props, ref) => <DropdownMenuSubTriggerPrimitive ref={ref} {...props} />)\r\nDropdownMenuSubTrigger.displayName = \"DropdownMenuSubTrigger\"\r\n\r\nexport const DropdownMenuItem = forwardRef<\r\n ElementRef<typeof DropdownMenuItemPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuItemPrimitive>\r\n>((props, ref) => <DropdownMenuItemPrimitive ref={ref} {...props} />)\r\nDropdownMenuItem.displayName = \"DropdownMenuItem\"\r\n\r\nexport const DropdownMenuCheckboxItem = forwardRef<\r\n ElementRef<typeof DropdownMenuCheckboxItemPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuCheckboxItemPrimitive>\r\n>((props, ref) => <DropdownMenuCheckboxItemPrimitive ref={ref} {...props} />)\r\nDropdownMenuCheckboxItem.displayName = \"DropdownMenuCheckboxItem\"\r\n\r\nexport const DropdownMenuRadioItem = forwardRef<\r\n ElementRef<typeof DropdownMenuRadioItemPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuRadioItemPrimitive>\r\n>((props, ref) => <DropdownMenuRadioItemPrimitive ref={ref} {...props} />)\r\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\"\r\n\r\nexport const DropdownMenuLabel = forwardRef<\r\n ElementRef<typeof DropdownMenuLabelPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuLabelPrimitive>\r\n>((props, ref) => <DropdownMenuLabelPrimitive ref={ref} {...props} />)\r\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\"\r\n\r\nexport const DropdownMenuSeparator = forwardRef<\r\n ElementRef<typeof DropdownMenuSeparatorPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuSeparatorPrimitive>\r\n>((props, ref) => <DropdownMenuSeparatorPrimitive ref={ref} {...props} />)\r\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\"\r\n\r\n// Utility span — no ref needed\r\nexport function DropdownMenuShortcut(props: HTMLAttributes<HTMLSpanElement>) {\r\n return <DropdownMenuShortcutPrimitive {...props} />\r\n}\r\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\r\n"],"mappings":";;;;;AAqBA,SAAgB,aAAa,OAA+D;CAC1F,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,cAAD,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,SAAgB,mBAAmB,OAAqE;CACtG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,oBAAD,EAA6B,GAAI,MAAQ,CAAA;AAClD;AAEA,SAAgB,gBAAgB,OAAkE;CAChG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,iBAAD,EAA0B,GAAI,MAAQ,CAAA;AAC/C;AAGA,IAAa,uBAAA,
|
|
1
|
+
{"version":3,"file":"DropdownMenu.cjs","names":[],"sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from \"react\"\r\nimport {\r\n DropdownMenu as DropdownMenuPrimitive,\r\n DropdownMenuTrigger as DropdownMenuTriggerPrimitive,\r\n DropdownMenuContent as DropdownMenuContentPrimitive,\r\n DropdownMenuItem as DropdownMenuItemPrimitive,\r\n DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,\r\n DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,\r\n DropdownMenuLabel as DropdownMenuLabelPrimitive,\r\n DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,\r\n DropdownMenuShortcut as DropdownMenuShortcutPrimitive,\r\n DropdownMenuGroup as DropdownMenuGroupPrimitive,\r\n DropdownMenuPortal as DropdownMenuPortalPrimitive,\r\n DropdownMenuSub as DropdownMenuSubPrimitive,\r\n DropdownMenuSubContent as DropdownMenuSubContentPrimitive,\r\n DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive,\r\n DropdownMenuRadioGroup as DropdownMenuRadioGroupPrimitive,\r\n} from \"../../primitives/dropdown-menu\"\r\n\r\n// Root / context-only components (no DOM element to ref)\r\nexport function DropdownMenu(props: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive>) {\r\n return <DropdownMenuPrimitive {...props} />\r\n}\r\n\r\nexport function DropdownMenuPortal(props: ComponentPropsWithoutRef<typeof DropdownMenuPortalPrimitive>) {\r\n return <DropdownMenuPortalPrimitive {...props} />\r\n}\r\n\r\nexport function DropdownMenuSub(props: ComponentPropsWithoutRef<typeof DropdownMenuSubPrimitive>) {\r\n return <DropdownMenuSubPrimitive {...props} />\r\n}\r\n\r\n// DOM-rendering components (forwardRef)\r\nexport const DropdownMenuTrigger = forwardRef<\r\n ElementRef<typeof DropdownMenuTriggerPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuTriggerPrimitive>\r\n>((props, ref) => <DropdownMenuTriggerPrimitive ref={ref} {...props} />)\r\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\"\r\n\r\nexport const DropdownMenuGroup = forwardRef<\r\n ElementRef<typeof DropdownMenuGroupPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuGroupPrimitive>\r\n>((props, ref) => <DropdownMenuGroupPrimitive ref={ref} {...props} />)\r\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\"\r\n\r\nexport const DropdownMenuRadioGroup = forwardRef<\r\n ElementRef<typeof DropdownMenuRadioGroupPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuRadioGroupPrimitive>\r\n>((props, ref) => <DropdownMenuRadioGroupPrimitive ref={ref} {...props} />)\r\nDropdownMenuRadioGroup.displayName = \"DropdownMenuRadioGroup\"\r\n\r\nexport const DropdownMenuContent = forwardRef<\r\n ElementRef<typeof DropdownMenuContentPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuContentPrimitive>\r\n>((props, ref) => <DropdownMenuContentPrimitive ref={ref} {...props} />)\r\nDropdownMenuContent.displayName = \"DropdownMenuContent\"\r\n\r\nexport const DropdownMenuSubContent = forwardRef<\r\n ElementRef<typeof DropdownMenuSubContentPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuSubContentPrimitive>\r\n>((props, ref) => <DropdownMenuSubContentPrimitive ref={ref} {...props} />)\r\nDropdownMenuSubContent.displayName = \"DropdownMenuSubContent\"\r\n\r\nexport const DropdownMenuSubTrigger = forwardRef<\r\n ElementRef<typeof DropdownMenuSubTriggerPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuSubTriggerPrimitive>\r\n>((props, ref) => <DropdownMenuSubTriggerPrimitive ref={ref} {...props} />)\r\nDropdownMenuSubTrigger.displayName = \"DropdownMenuSubTrigger\"\r\n\r\nexport const DropdownMenuItem = forwardRef<\r\n ElementRef<typeof DropdownMenuItemPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuItemPrimitive>\r\n>((props, ref) => <DropdownMenuItemPrimitive ref={ref} {...props} />)\r\nDropdownMenuItem.displayName = \"DropdownMenuItem\"\r\n\r\nexport const DropdownMenuCheckboxItem = forwardRef<\r\n ElementRef<typeof DropdownMenuCheckboxItemPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuCheckboxItemPrimitive>\r\n>((props, ref) => <DropdownMenuCheckboxItemPrimitive ref={ref} {...props} />)\r\nDropdownMenuCheckboxItem.displayName = \"DropdownMenuCheckboxItem\"\r\n\r\nexport const DropdownMenuRadioItem = forwardRef<\r\n ElementRef<typeof DropdownMenuRadioItemPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuRadioItemPrimitive>\r\n>((props, ref) => <DropdownMenuRadioItemPrimitive ref={ref} {...props} />)\r\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\"\r\n\r\nexport const DropdownMenuLabel = forwardRef<\r\n ElementRef<typeof DropdownMenuLabelPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuLabelPrimitive>\r\n>((props, ref) => <DropdownMenuLabelPrimitive ref={ref} {...props} />)\r\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\"\r\n\r\nexport const DropdownMenuSeparator = forwardRef<\r\n ElementRef<typeof DropdownMenuSeparatorPrimitive>,\r\n ComponentPropsWithoutRef<typeof DropdownMenuSeparatorPrimitive>\r\n>((props, ref) => <DropdownMenuSeparatorPrimitive ref={ref} {...props} />)\r\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\"\r\n\r\n// Utility span — no ref needed\r\nexport function DropdownMenuShortcut(props: HTMLAttributes<HTMLSpanElement>) {\r\n return <DropdownMenuShortcutPrimitive {...props} />\r\n}\r\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\r\n"],"mappings":";;;;;AAqBA,SAAgB,aAAa,OAA+D;CAC1F,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,cAAD,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,SAAgB,mBAAmB,OAAqE;CACtG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,oBAAD,EAA6B,GAAI,MAAQ,CAAA;AAClD;AAEA,SAAgB,gBAAgB,OAAkE;CAChG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,iBAAD,EAA0B,GAAI,MAAQ,CAAA;AAC/C;AAGA,IAAa,uBAAA,GAAsB,MAAA,WAAA,EAGhC,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,qBAAD;CAAmC;CAAK,GAAI;AAAQ,CAAA,CAAC;AACvE,oBAAoB,cAAc;AAElC,IAAa,qBAAA,GAAoB,MAAA,WAAA,EAG9B,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,mBAAD;CAAiC;CAAK,GAAI;AAAQ,CAAA,CAAC;AACrE,kBAAkB,cAAc;AAEhC,IAAa,0BAAA,GAAyB,MAAA,WAAA,EAGnC,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,wBAAD;CAAsC;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC1E,uBAAuB,cAAc;AAErC,IAAa,uBAAA,GAAsB,MAAA,WAAA,EAGhC,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,qBAAD;CAAmC;CAAK,GAAI;AAAQ,CAAA,CAAC;AACvE,oBAAoB,cAAc;AAElC,IAAa,0BAAA,GAAyB,MAAA,WAAA,EAGnC,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,wBAAD;CAAsC;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC1E,uBAAuB,cAAc;AAErC,IAAa,0BAAA,GAAyB,MAAA,WAAA,EAGnC,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,wBAAD;CAAsC;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC1E,uBAAuB,cAAc;AAErC,IAAa,oBAAA,GAAmB,MAAA,WAAA,EAG7B,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,kBAAD;CAAgC;CAAK,GAAI;AAAQ,CAAA,CAAC;AACpE,iBAAiB,cAAc;AAE/B,IAAa,4BAAA,GAA2B,MAAA,WAAA,EAGrC,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,0BAAD;CAAwC;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC5E,yBAAyB,cAAc;AAEvC,IAAa,yBAAA,GAAwB,MAAA,WAAA,EAGlC,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,uBAAD;CAAqC;CAAK,GAAI;AAAQ,CAAA,CAAC;AACzE,sBAAsB,cAAc;AAEpC,IAAa,qBAAA,GAAoB,MAAA,WAAA,EAG9B,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,mBAAD;CAAiC;CAAK,GAAI;AAAQ,CAAA,CAAC;AACrE,kBAAkB,cAAc;AAEhC,IAAa,yBAAA,GAAwB,MAAA,WAAA,EAGlC,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,uBAAD;CAAqC;CAAK,GAAI;AAAQ,CAAA,CAAC;AACzE,sBAAsB,cAAc;AAGpC,SAAgB,qBAAqB,OAAwC;CAC3E,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,sBAAD,EAA+B,GAAI,MAAQ,CAAA;AACpD;AACA,qBAAqB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../../src/components/Form/Checkbox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { Checkbox as ShadcnCheckbox } from \"../../primitives/checkbox\";\r\nimport { Label } from \"../../primitives/label\";\r\nimport type * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\r\n\r\nconst checkboxSizeVariants = cva(\r\n \"\",\r\n {\r\n variants: {\r\n size: {\r\n sm: \"h-4 w-4\",\r\n md: \"h-5 w-5\",\r\n lg: \"h-6 w-6\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n }\r\n);\r\n\r\nconst labelVariants = cva(\r\n \"text-sm font-medium cursor-pointer select-none\",\r\n {\r\n variants: {\r\n required: {\r\n true: \"after:content-['*'] after:ml-0.5 after:text-destructive\",\r\n false: \"\",\r\n },\r\n disabled: {\r\n true: \"cursor-not-allowed opacity-50\",\r\n false: \"\",\r\n },\r\n },\r\n defaultVariants: {\r\n required: false,\r\n disabled: false,\r\n },\r\n }\r\n);\r\n\r\nexport interface CheckboxProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\r\n VariantProps<typeof checkboxSizeVariants> {\r\n /** Field name - required for form integration */\r\n name: TName;\r\n /** Label text for the checkbox */\r\n label?: ReactNode;\r\n /** Helper text displayed below the checkbox */\r\n helperText?: string;\r\n /** Whether to show the error message */\r\n showError?: boolean;\r\n /** Custom error message (overrides form error) */\r\n error?: string;\r\n /** External control (for use outside Form) */\r\n control?: Control<TFieldValues>;\r\n /** Variant style */\r\n variant?: \"default\" | \"error\";\r\n \r\n // Validation props\r\n /** Field is required (must be checked) */\r\n required?: boolean | string;\r\n /** Custom validation function */\r\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Checkbox component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui Checkbox primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" required />\r\n * <Checkbox name=\"newsletter\" label=\"Subscribe to newsletter\" />\r\n * ```\r\n */\r\nfunction CheckboxInner<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n {\r\n name,\r\n label,\r\n helperText,\r\n showError = true,\r\n error: customError,\r\n size,\r\n variant,\r\n className,\r\n disabled,\r\n id: providedId,\r\n control: externalControl,\r\n // Validation props\r\n required,\r\n validate,\r\n ...props\r\n }: CheckboxProps<TFieldValues, TName>,\r\n ref: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>>\r\n) {\r\n const generatedId = useId();\r\n const inputId = providedId ?? generatedId;\r\n \r\n // Try to get form context\r\n const formConfigContext = useContext(FormConfigContext);\r\n const formConfig: FormConfig = formConfigContext ?? {};\r\n \r\n // Get form context from react-hook-form\r\n const rhfContext = useRHFFormContext<TFieldValues>();\r\n const control = externalControl ?? rhfContext?.control;\r\n\r\n // Register validation rules with the form\r\n useEffect(() => {\r\n if (formConfigContext?.registerFieldValidation) {\r\n const rules: FieldValidationRules = {};\r\n \r\n if (required !== undefined) rules.required = required;\r\n if (validate !== undefined) rules.validate = validate;\r\n\r\n formConfigContext.registerFieldValidation({\r\n name: name as string,\r\n type: \"boolean\",\r\n rules,\r\n });\r\n\r\n return () => {\r\n formConfigContext.unregisterFieldValidation(name as string);\r\n };\r\n }\r\n }, [formConfigContext, name, required, validate]);\r\n\r\n // Use controller for form integration\r\n const { field, fieldState } = useController<TFieldValues, TName>({\r\n name,\r\n control,\r\n });\r\n\r\n const fieldError = fieldState.error?.message;\r\n const errorMessage = customError ?? fieldError;\r\n const hasError = !!errorMessage;\r\n \r\n // Merge sizes - prop takes precedence over form config\r\n const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n const effectiveDisabled = disabled ?? formConfig.disabled;\r\n \r\n // Determine variant based on error state\r\n const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n return (\r\n <div className=\"space-y-1.5\">\r\n <div className=\"flex items-center gap-2\">\r\n <ShadcnCheckbox\r\n {...props}\r\n ref={ref}\r\n id={inputId}\r\n checked={field.value ?? false}\r\n onCheckedChange={(checked) => field.onChange(checked === true)}\r\n onBlur={field.onBlur}\r\n disabled={effectiveDisabled}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError\r\n ? `${inputId}-error`\r\n : helperText\r\n ? `${inputId}-helper`\r\n : undefined\r\n }\r\n className={cn(\r\n checkboxSizeVariants({ size: effectiveSize }),\r\n effectiveVariant === \"error\" && \"border-destructive\",\r\n className\r\n )}\r\n />\r\n \r\n {label && (\r\n <Label\r\n htmlFor={inputId}\r\n className={labelVariants({ required: !!required, disabled: effectiveDisabled })}\r\n >\r\n {label}\r\n </Label>\r\n )}\r\n </div>\r\n\r\n {showError && hasError && (\r\n <p\r\n id={`${inputId}-error`}\r\n className=\"text-sm text-destructive ml-7\"\r\n role=\"alert\"\r\n >\r\n {errorMessage}\r\n </p>\r\n )}\r\n \r\n {helperText && !hasError && (\r\n <p\r\n id={`${inputId}-helper`}\r\n className=\"text-sm text-muted-foreground ml-7\"\r\n >\r\n {helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\n// Use forwardRef with generic support\r\nexport const Checkbox = forwardRef(CheckboxInner) as <\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n props: CheckboxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>> }\r\n) => React.ReactElement;\r\n\r\n(Checkbox as React.FC).displayName = \"Checkbox\";\r\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,wBAAA,
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../../src/components/Form/Checkbox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { Checkbox as ShadcnCheckbox } from \"../../primitives/checkbox\";\r\nimport { Label } from \"../../primitives/label\";\r\nimport type * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\r\n\r\nconst checkboxSizeVariants = cva(\r\n \"\",\r\n {\r\n variants: {\r\n size: {\r\n sm: \"h-4 w-4\",\r\n md: \"h-5 w-5\",\r\n lg: \"h-6 w-6\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n }\r\n);\r\n\r\nconst labelVariants = cva(\r\n \"text-sm font-medium cursor-pointer select-none\",\r\n {\r\n variants: {\r\n required: {\r\n true: \"after:content-['*'] after:ml-0.5 after:text-destructive\",\r\n false: \"\",\r\n },\r\n disabled: {\r\n true: \"cursor-not-allowed opacity-50\",\r\n false: \"\",\r\n },\r\n },\r\n defaultVariants: {\r\n required: false,\r\n disabled: false,\r\n },\r\n }\r\n);\r\n\r\nexport interface CheckboxProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\r\n VariantProps<typeof checkboxSizeVariants> {\r\n /** Field name - required for form integration */\r\n name: TName;\r\n /** Label text for the checkbox */\r\n label?: ReactNode;\r\n /** Helper text displayed below the checkbox */\r\n helperText?: string;\r\n /** Whether to show the error message */\r\n showError?: boolean;\r\n /** Custom error message (overrides form error) */\r\n error?: string;\r\n /** External control (for use outside Form) */\r\n control?: Control<TFieldValues>;\r\n /** Variant style */\r\n variant?: \"default\" | \"error\";\r\n \r\n // Validation props\r\n /** Field is required (must be checked) */\r\n required?: boolean | string;\r\n /** Custom validation function */\r\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Checkbox component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui Checkbox primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" required />\r\n * <Checkbox name=\"newsletter\" label=\"Subscribe to newsletter\" />\r\n * ```\r\n */\r\nfunction CheckboxInner<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n {\r\n name,\r\n label,\r\n helperText,\r\n showError = true,\r\n error: customError,\r\n size,\r\n variant,\r\n className,\r\n disabled,\r\n id: providedId,\r\n control: externalControl,\r\n // Validation props\r\n required,\r\n validate,\r\n ...props\r\n }: CheckboxProps<TFieldValues, TName>,\r\n ref: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>>\r\n) {\r\n const generatedId = useId();\r\n const inputId = providedId ?? generatedId;\r\n \r\n // Try to get form context\r\n const formConfigContext = useContext(FormConfigContext);\r\n const formConfig: FormConfig = formConfigContext ?? {};\r\n \r\n // Get form context from react-hook-form\r\n const rhfContext = useRHFFormContext<TFieldValues>();\r\n const control = externalControl ?? rhfContext?.control;\r\n\r\n // Register validation rules with the form\r\n useEffect(() => {\r\n if (formConfigContext?.registerFieldValidation) {\r\n const rules: FieldValidationRules = {};\r\n \r\n if (required !== undefined) rules.required = required;\r\n if (validate !== undefined) rules.validate = validate;\r\n\r\n formConfigContext.registerFieldValidation({\r\n name: name as string,\r\n type: \"boolean\",\r\n rules,\r\n });\r\n\r\n return () => {\r\n formConfigContext.unregisterFieldValidation(name as string);\r\n };\r\n }\r\n }, [formConfigContext, name, required, validate]);\r\n\r\n // Use controller for form integration\r\n const { field, fieldState } = useController<TFieldValues, TName>({\r\n name,\r\n control,\r\n });\r\n\r\n const fieldError = fieldState.error?.message;\r\n const errorMessage = customError ?? fieldError;\r\n const hasError = !!errorMessage;\r\n \r\n // Merge sizes - prop takes precedence over form config\r\n const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n const effectiveDisabled = disabled ?? formConfig.disabled;\r\n \r\n // Determine variant based on error state\r\n const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n return (\r\n <div className=\"space-y-1.5\">\r\n <div className=\"flex items-center gap-2\">\r\n <ShadcnCheckbox\r\n {...props}\r\n ref={ref}\r\n id={inputId}\r\n checked={field.value ?? false}\r\n onCheckedChange={(checked) => field.onChange(checked === true)}\r\n onBlur={field.onBlur}\r\n disabled={effectiveDisabled}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError\r\n ? `${inputId}-error`\r\n : helperText\r\n ? `${inputId}-helper`\r\n : undefined\r\n }\r\n className={cn(\r\n checkboxSizeVariants({ size: effectiveSize }),\r\n effectiveVariant === \"error\" && \"border-destructive\",\r\n className\r\n )}\r\n />\r\n \r\n {label && (\r\n <Label\r\n htmlFor={inputId}\r\n className={labelVariants({ required: !!required, disabled: effectiveDisabled })}\r\n >\r\n {label}\r\n </Label>\r\n )}\r\n </div>\r\n\r\n {showError && hasError && (\r\n <p\r\n id={`${inputId}-error`}\r\n className=\"text-sm text-destructive ml-7\"\r\n role=\"alert\"\r\n >\r\n {errorMessage}\r\n </p>\r\n )}\r\n \r\n {helperText && !hasError && (\r\n <p\r\n id={`${inputId}-helper`}\r\n className=\"text-sm text-muted-foreground ml-7\"\r\n >\r\n {helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\n// Use forwardRef with generic support\r\nexport const Checkbox = forwardRef(CheckboxInner) as <\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n props: CheckboxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>> }\r\n) => React.ReactElement;\r\n\r\n(Checkbox as React.FC).displayName = \"Checkbox\";\r\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.cjs","names":[],"sources":["../../../../src/components/Form/Combobox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useMemo, useState } from \"react\";\r\nimport { Check, ChevronsUpDown } from \"lucide-react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from \"../../primitives/command\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport type { SelectOption } from \"./Select\";\r\n\r\nconst comboboxVariants = cva(\"w-full justify-between font-normal\", {\r\n variants: {\r\n size: {\r\n sm: \"h-8 text-xs\",\r\n md: \"h-10 text-sm\",\r\n lg: \"h-12 text-base\",\r\n },\r\n variant: {\r\n default: \"border-input\",\r\n error: \"border-destructive\",\r\n success: \"border-green-500\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n variant: \"default\",\r\n },\r\n});\r\n\r\nexport interface ComboboxProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof comboboxVariants> {\r\n name: TName;\r\n label?: string;\r\n helperText?: string;\r\n showError?: boolean;\r\n error?: string;\r\n fullWidth?: boolean;\r\n placeholder?: string;\r\n searchPlaceholder?: string;\r\n emptyText?: string;\r\n options?: SelectOption[];\r\n disabled?: boolean;\r\n className?: string;\r\n id?: string;\r\n control?: Control<TFieldValues>;\r\n required?: boolean | string;\r\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nexport function Combobox<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n name,\r\n label,\r\n helperText,\r\n showError = true,\r\n error: customError,\r\n size,\r\n variant,\r\n fullWidth = true,\r\n placeholder = \"Select option\",\r\n searchPlaceholder = \"Search...\",\r\n emptyText = \"No option found.\",\r\n options = [],\r\n disabled,\r\n className,\r\n id: providedId,\r\n control: externalControl,\r\n required,\r\n validate,\r\n}: ComboboxProps<TFieldValues, TName>) {\r\n const generatedId = useId();\r\n const inputId = providedId ?? generatedId;\r\n const [open, setOpen] = useState(false);\r\n const formConfigContext = useContext(FormConfigContext);\r\n const formConfig: FormConfig = formConfigContext ?? {};\r\n const rhfContext = useRHFFormContext<TFieldValues>();\r\n const control = externalControl ?? rhfContext?.control;\r\n\r\n const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n useEffect(() => {\r\n if (registerFieldValidation) {\r\n const rules: FieldValidationRules = {};\r\n if (required !== undefined) rules.required = required;\r\n if (validate !== undefined) rules.validate = validate;\r\n\r\n registerFieldValidation({\r\n name: name as string,\r\n type: \"string\",\r\n rules,\r\n });\r\n\r\n return () => {\r\n unregisterFieldValidation?.(name as string);\r\n };\r\n }\r\n }, [\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n name,\r\n required,\r\n validate,\r\n ]);\r\n\r\n const { field, fieldState } = useController<TFieldValues, TName>({\r\n name,\r\n control,\r\n });\r\n\r\n const selectedOption = useMemo(\r\n () => options.find((option) => option.value.toString() === field.value?.toString()),\r\n [field.value, options]\r\n );\r\n\r\n const fieldError = fieldState.error?.message;\r\n const errorMessage = customError ?? fieldError;\r\n const hasError = !!errorMessage;\r\n const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n const effectiveDisabled = disabled ?? formConfig.disabled;\r\n const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n return (\r\n <FieldLayout\r\n inputId={inputId}\r\n label={label}\r\n required={!!required}\r\n helperText={helperText}\r\n errorMessage={showError ? errorMessage : undefined}\r\n showError={showError}\r\n fullWidth={fullWidth}\r\n formConfig={formConfig}\r\n >\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id={inputId}\r\n type=\"button\"\r\n variant=\"outline\"\r\n role=\"combobox\"\r\n aria-expanded={open}\r\n disabled={effectiveDisabled}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError\r\n ? `${inputId}-error`\r\n : helperText\r\n ? `${inputId}-helper`\r\n : undefined\r\n }\r\n className={cn(\r\n comboboxVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n !field.value && \"text-muted-foreground\",\r\n className\r\n )}\r\n >\r\n {selectedOption?.label ?? placeholder}\r\n <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-[320px] p-0\" align=\"start\">\r\n <Command>\r\n <CommandInput placeholder={searchPlaceholder} />\r\n <CommandList>\r\n <CommandEmpty>{emptyText}</CommandEmpty>\r\n <CommandGroup>\r\n {options.map((option) => (\r\n <CommandItem\r\n key={option.value}\r\n value={option.label}\r\n disabled={option.disabled}\r\n onSelect={() => {\r\n field.onChange(option.value.toString());\r\n setOpen(false);\r\n }}\r\n >\r\n <Check\r\n className={cn(\r\n \"mr-2 h-4 w-4\",\r\n field.value?.toString() === option.value.toString()\r\n ? \"opacity-100\"\r\n : \"opacity-0\"\r\n )}\r\n />\r\n {option.label}\r\n </CommandItem>\r\n ))}\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n </FieldLayout>\r\n );\r\n}\r\n\r\nCombobox.displayName = \"Combobox\";\r\n"],"mappings":";;;;;;;;;;;;;;AAqBA,IAAM,oBAAA,
|
|
1
|
+
{"version":3,"file":"Combobox.cjs","names":[],"sources":["../../../../src/components/Form/Combobox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useMemo, useState } from \"react\";\r\nimport { Check, ChevronsUpDown } from \"lucide-react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from \"../../primitives/command\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport type { SelectOption } from \"./Select\";\r\n\r\nconst comboboxVariants = cva(\"w-full justify-between font-normal\", {\r\n variants: {\r\n size: {\r\n sm: \"h-8 text-xs\",\r\n md: \"h-10 text-sm\",\r\n lg: \"h-12 text-base\",\r\n },\r\n variant: {\r\n default: \"border-input\",\r\n error: \"border-destructive\",\r\n success: \"border-green-500\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n variant: \"default\",\r\n },\r\n});\r\n\r\nexport interface ComboboxProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof comboboxVariants> {\r\n name: TName;\r\n label?: string;\r\n helperText?: string;\r\n showError?: boolean;\r\n error?: string;\r\n fullWidth?: boolean;\r\n placeholder?: string;\r\n searchPlaceholder?: string;\r\n emptyText?: string;\r\n options?: SelectOption[];\r\n disabled?: boolean;\r\n className?: string;\r\n id?: string;\r\n control?: Control<TFieldValues>;\r\n required?: boolean | string;\r\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nexport function Combobox<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n name,\r\n label,\r\n helperText,\r\n showError = true,\r\n error: customError,\r\n size,\r\n variant,\r\n fullWidth = true,\r\n placeholder = \"Select option\",\r\n searchPlaceholder = \"Search...\",\r\n emptyText = \"No option found.\",\r\n options = [],\r\n disabled,\r\n className,\r\n id: providedId,\r\n control: externalControl,\r\n required,\r\n validate,\r\n}: ComboboxProps<TFieldValues, TName>) {\r\n const generatedId = useId();\r\n const inputId = providedId ?? generatedId;\r\n const [open, setOpen] = useState(false);\r\n const formConfigContext = useContext(FormConfigContext);\r\n const formConfig: FormConfig = formConfigContext ?? {};\r\n const rhfContext = useRHFFormContext<TFieldValues>();\r\n const control = externalControl ?? rhfContext?.control;\r\n\r\n const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n useEffect(() => {\r\n if (registerFieldValidation) {\r\n const rules: FieldValidationRules = {};\r\n if (required !== undefined) rules.required = required;\r\n if (validate !== undefined) rules.validate = validate;\r\n\r\n registerFieldValidation({\r\n name: name as string,\r\n type: \"string\",\r\n rules,\r\n });\r\n\r\n return () => {\r\n unregisterFieldValidation?.(name as string);\r\n };\r\n }\r\n }, [\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n name,\r\n required,\r\n validate,\r\n ]);\r\n\r\n const { field, fieldState } = useController<TFieldValues, TName>({\r\n name,\r\n control,\r\n });\r\n\r\n const selectedOption = useMemo(\r\n () => options.find((option) => option.value.toString() === field.value?.toString()),\r\n [field.value, options]\r\n );\r\n\r\n const fieldError = fieldState.error?.message;\r\n const errorMessage = customError ?? fieldError;\r\n const hasError = !!errorMessage;\r\n const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n const effectiveDisabled = disabled ?? formConfig.disabled;\r\n const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n return (\r\n <FieldLayout\r\n inputId={inputId}\r\n label={label}\r\n required={!!required}\r\n helperText={helperText}\r\n errorMessage={showError ? errorMessage : undefined}\r\n showError={showError}\r\n fullWidth={fullWidth}\r\n formConfig={formConfig}\r\n >\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id={inputId}\r\n type=\"button\"\r\n variant=\"outline\"\r\n role=\"combobox\"\r\n aria-expanded={open}\r\n disabled={effectiveDisabled}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError\r\n ? `${inputId}-error`\r\n : helperText\r\n ? `${inputId}-helper`\r\n : undefined\r\n }\r\n className={cn(\r\n comboboxVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n !field.value && \"text-muted-foreground\",\r\n className\r\n )}\r\n >\r\n {selectedOption?.label ?? placeholder}\r\n <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-[320px] p-0\" align=\"start\">\r\n <Command>\r\n <CommandInput placeholder={searchPlaceholder} />\r\n <CommandList>\r\n <CommandEmpty>{emptyText}</CommandEmpty>\r\n <CommandGroup>\r\n {options.map((option) => (\r\n <CommandItem\r\n key={option.value}\r\n value={option.label}\r\n disabled={option.disabled}\r\n onSelect={() => {\r\n field.onChange(option.value.toString());\r\n setOpen(false);\r\n }}\r\n >\r\n <Check\r\n className={cn(\r\n \"mr-2 h-4 w-4\",\r\n field.value?.toString() === option.value.toString()\r\n ? \"opacity-100\"\r\n : \"opacity-0\"\r\n )}\r\n />\r\n {option.label}\r\n </CommandItem>\r\n ))}\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n </FieldLayout>\r\n );\r\n}\r\n\r\nCombobox.displayName = \"Combobox\";\r\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountryPicker.cjs","names":[],"sources":["../../../../src/components/Form/CountryPicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useMemo, useState } from \"react\";\r\nimport { Check, ChevronsUpDown } from \"lucide-react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from \"../../primitives/command\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport {\r\n COUNTRIES,\r\n filterCountries,\r\n getCountryByCode,\r\n getCountryFlag,\r\n sortCountriesWithPriority,\r\n type Country,\r\n} from \"../../data/countries\";\r\n\r\nexport interface CountryPickerProps {\r\n value?: string;\r\n onValueChange: (value: string) => void;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n compact?: boolean;\r\n include?: string[];\r\n exclude?: string[];\r\n priorityCountries?: string[];\r\n className?: string;\r\n id?: string;\r\n required?: boolean;\r\n \"aria-invalid\"?: boolean;\r\n \"aria-describedby\"?: string;\r\n}\r\n\r\nfunction resolveCountries(\r\n include?: string[],\r\n exclude?: string[],\r\n priorityCountries?: string[]\r\n): Country[] {\r\n let countries = COUNTRIES;\r\n\r\n if (include?.length) {\r\n const includeSet = new Set(include.map((code) => code.toUpperCase()));\r\n countries = countries.filter((country) => includeSet.has(country.code));\r\n }\r\n\r\n if (exclude?.length) {\r\n const excludeSet = new Set(exclude.map((code) => code.toUpperCase()));\r\n countries = countries.filter((country) => !excludeSet.has(country.code));\r\n }\r\n\r\n return sortCountriesWithPriority(countries, priorityCountries);\r\n}\r\n\r\nexport function CountryPicker({\r\n value,\r\n onValueChange,\r\n placeholder = \"Select country\",\r\n disabled,\r\n compact = false,\r\n include,\r\n exclude,\r\n priorityCountries,\r\n className,\r\n id,\r\n required,\r\n \"aria-invalid\": ariaInvalid,\r\n \"aria-describedby\": ariaDescribedBy,\r\n}: CountryPickerProps) {\r\n const [open, setOpen] = useState(false);\r\n const countries = useMemo(\r\n () => resolveCountries(include, exclude, priorityCountries),\r\n [include, exclude, priorityCountries]\r\n );\r\n const selectedCountry = value ? getCountryByCode(value) : undefined;\r\n\r\n return (\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id={id}\r\n type=\"button\"\r\n variant=\"outline\"\r\n role=\"combobox\"\r\n aria-expanded={open}\r\n aria-required={required}\r\n aria-invalid={ariaInvalid}\r\n aria-describedby={ariaDescribedBy}\r\n disabled={disabled}\r\n className={cn(\r\n \"justify-between font-normal\",\r\n compact ? \"h-full w-auto shrink-0 border-0 bg-transparent px-2 shadow-none hover:bg-transparent\" : \"w-full\",\r\n !value && \"text-muted-foreground\",\r\n className\r\n )}\r\n >\r\n {selectedCountry ? (\r\n <span className=\"flex min-w-0 items-center gap-2 truncate\">\r\n <span aria-hidden=\"true\">{getCountryFlag(selectedCountry.code)}</span>\r\n {!compact && <span className=\"truncate\">{selectedCountry.name}</span>}\r\n </span>\r\n ) : (\r\n <span className=\"truncate\">{compact ? \"…\" : placeholder}</span>\r\n )}\r\n {!compact && <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-[320px] p-0\" align=\"start\">\r\n <Command\r\n filter={(itemValue, search) => {\r\n const country = countries.find(\r\n (entry) => entry.code.toLowerCase() === itemValue.toLowerCase()\r\n );\r\n if (!country) {\r\n return 0;\r\n }\r\n\r\n return filterCountries([country], search).length > 0 ? 1 : 0;\r\n }}\r\n >\r\n <CommandInput placeholder=\"Search country...\" />\r\n <CommandList>\r\n <CommandEmpty>No country found.</CommandEmpty>\r\n <CommandGroup>\r\n {countries.map((country) => (\r\n <CommandItem\r\n key={country.code}\r\n value={country.code}\r\n onSelect={(currentValue) => {\r\n onValueChange(currentValue.toUpperCase());\r\n setOpen(false);\r\n }}\r\n >\r\n <Check\r\n className={cn(\r\n \"mr-2 h-4 w-4\",\r\n value === country.code ? \"opacity-100\" : \"opacity-0\"\r\n )}\r\n />\r\n <span aria-hidden=\"true\" className=\"mr-2\">\r\n {getCountryFlag(country.code)}\r\n </span>\r\n <span className=\"truncate\">{country.name}</span>\r\n <span className=\"ml-auto text-xs text-muted-foreground\">\r\n {country.dialCode}\r\n </span>\r\n </CommandItem>\r\n ))}\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n}\r\n\r\n"],"mappings":";;;;;;;;;;;AAwCA,SAAS,iBACP,SACA,SACA,mBACW;CACX,IAAI,YAAY,kBAAA;CAEhB,IAAI,SAAS,QAAQ;EACnB,MAAM,aAAa,IAAI,IAAI,QAAQ,KAAK,SAAS,KAAK,YAAY,CAAC,CAAC;EACpE,YAAY,UAAU,QAAQ,YAAY,WAAW,IAAI,QAAQ,IAAI,CAAC;CACxE;CAEA,IAAI,SAAS,QAAQ;EACnB,MAAM,aAAa,IAAI,IAAI,QAAQ,KAAK,SAAS,KAAK,YAAY,CAAC,CAAC;EACpE,YAAY,UAAU,QAAQ,YAAY,CAAC,WAAW,IAAI,QAAQ,IAAI,CAAC;CACzE;CAEA,OAAO,kBAAA,0BAA0B,WAAW,iBAAiB;AAC/D;AAEA,SAAgB,cAAc,EAC5B,OACA,eACA,cAAc,kBACd,UACA,UAAU,OACV,SACA,SACA,mBACA,WACA,IACA,UACA,gBAAgB,aAChB,oBAAoB,mBACC;CACrB,MAAM,CAAC,MAAM,YAAA,
|
|
1
|
+
{"version":3,"file":"CountryPicker.cjs","names":[],"sources":["../../../../src/components/Form/CountryPicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useMemo, useState } from \"react\";\r\nimport { Check, ChevronsUpDown } from \"lucide-react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from \"../../primitives/command\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport {\r\n COUNTRIES,\r\n filterCountries,\r\n getCountryByCode,\r\n getCountryFlag,\r\n sortCountriesWithPriority,\r\n type Country,\r\n} from \"../../data/countries\";\r\n\r\nexport interface CountryPickerProps {\r\n value?: string;\r\n onValueChange: (value: string) => void;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n compact?: boolean;\r\n include?: string[];\r\n exclude?: string[];\r\n priorityCountries?: string[];\r\n className?: string;\r\n id?: string;\r\n required?: boolean;\r\n \"aria-invalid\"?: boolean;\r\n \"aria-describedby\"?: string;\r\n}\r\n\r\nfunction resolveCountries(\r\n include?: string[],\r\n exclude?: string[],\r\n priorityCountries?: string[]\r\n): Country[] {\r\n let countries = COUNTRIES;\r\n\r\n if (include?.length) {\r\n const includeSet = new Set(include.map((code) => code.toUpperCase()));\r\n countries = countries.filter((country) => includeSet.has(country.code));\r\n }\r\n\r\n if (exclude?.length) {\r\n const excludeSet = new Set(exclude.map((code) => code.toUpperCase()));\r\n countries = countries.filter((country) => !excludeSet.has(country.code));\r\n }\r\n\r\n return sortCountriesWithPriority(countries, priorityCountries);\r\n}\r\n\r\nexport function CountryPicker({\r\n value,\r\n onValueChange,\r\n placeholder = \"Select country\",\r\n disabled,\r\n compact = false,\r\n include,\r\n exclude,\r\n priorityCountries,\r\n className,\r\n id,\r\n required,\r\n \"aria-invalid\": ariaInvalid,\r\n \"aria-describedby\": ariaDescribedBy,\r\n}: CountryPickerProps) {\r\n const [open, setOpen] = useState(false);\r\n const countries = useMemo(\r\n () => resolveCountries(include, exclude, priorityCountries),\r\n [include, exclude, priorityCountries]\r\n );\r\n const selectedCountry = value ? getCountryByCode(value) : undefined;\r\n\r\n return (\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id={id}\r\n type=\"button\"\r\n variant=\"outline\"\r\n role=\"combobox\"\r\n aria-expanded={open}\r\n aria-required={required}\r\n aria-invalid={ariaInvalid}\r\n aria-describedby={ariaDescribedBy}\r\n disabled={disabled}\r\n className={cn(\r\n \"justify-between font-normal\",\r\n compact ? \"h-full w-auto shrink-0 border-0 bg-transparent px-2 shadow-none hover:bg-transparent\" : \"w-full\",\r\n !value && \"text-muted-foreground\",\r\n className\r\n )}\r\n >\r\n {selectedCountry ? (\r\n <span className=\"flex min-w-0 items-center gap-2 truncate\">\r\n <span aria-hidden=\"true\">{getCountryFlag(selectedCountry.code)}</span>\r\n {!compact && <span className=\"truncate\">{selectedCountry.name}</span>}\r\n </span>\r\n ) : (\r\n <span className=\"truncate\">{compact ? \"…\" : placeholder}</span>\r\n )}\r\n {!compact && <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-[320px] p-0\" align=\"start\">\r\n <Command\r\n filter={(itemValue, search) => {\r\n const country = countries.find(\r\n (entry) => entry.code.toLowerCase() === itemValue.toLowerCase()\r\n );\r\n if (!country) {\r\n return 0;\r\n }\r\n\r\n return filterCountries([country], search).length > 0 ? 1 : 0;\r\n }}\r\n >\r\n <CommandInput placeholder=\"Search country...\" />\r\n <CommandList>\r\n <CommandEmpty>No country found.</CommandEmpty>\r\n <CommandGroup>\r\n {countries.map((country) => (\r\n <CommandItem\r\n key={country.code}\r\n value={country.code}\r\n onSelect={(currentValue) => {\r\n onValueChange(currentValue.toUpperCase());\r\n setOpen(false);\r\n }}\r\n >\r\n <Check\r\n className={cn(\r\n \"mr-2 h-4 w-4\",\r\n value === country.code ? \"opacity-100\" : \"opacity-0\"\r\n )}\r\n />\r\n <span aria-hidden=\"true\" className=\"mr-2\">\r\n {getCountryFlag(country.code)}\r\n </span>\r\n <span className=\"truncate\">{country.name}</span>\r\n <span className=\"ml-auto text-xs text-muted-foreground\">\r\n {country.dialCode}\r\n </span>\r\n </CommandItem>\r\n ))}\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n}\r\n\r\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountrySelect.cjs","names":[],"sources":["../../../../src/components/Form/CountrySelect.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport { CountryPicker } from \"./CountryPicker\";\r\n\r\nconst countrySelectVariants = cva(\"\", {\r\n variants: {\r\n size: {\r\n sm: \"h-8 text-xs\",\r\n md: \"h-10 text-sm\",\r\n lg: \"h-12 text-base\",\r\n },\r\n variant: {\r\n default: \"border-input focus-visible:ring-ring\",\r\n error: \"border-destructive focus-visible:ring-destructive\",\r\n success: \"border-green-500 focus-visible:ring-green-500\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n variant: \"default\",\r\n },\r\n});\r\n\r\nexport interface CountrySelectProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof countrySelectVariants> {\r\n name: TName;\r\n label?: string;\r\n helperText?: string;\r\n showError?: boolean;\r\n error?: string;\r\n fullWidth?: boolean;\r\n placeholder?: string;\r\n allowClear?: boolean;\r\n disabled?: boolean;\r\n className?: string;\r\n id?: string;\r\n control?: Control<TFieldValues>;\r\n include?: string[];\r\n exclude?: string[];\r\n priorityCountries?: string[];\r\n /** Field is required (`true` or custom error message string) */\r\n required?: boolean | string;\r\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nexport function CountrySelect<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n name,\r\n label,\r\n helperText,\r\n showError = true,\r\n error: customError,\r\n size,\r\n variant,\r\n fullWidth = true,\r\n placeholder = \"Select a country\",\r\n allowClear,\r\n disabled,\r\n className,\r\n id: providedId,\r\n control: externalControl,\r\n include,\r\n exclude,\r\n priorityCountries,\r\n required,\r\n validate,\r\n}: CountrySelectProps<TFieldValues, TName>) {\r\n const generatedId = useId();\r\n const inputId = providedId ?? generatedId;\r\n const formConfigContext = useContext(FormConfigContext);\r\n const formConfig: FormConfig = formConfigContext ?? {};\r\n const rhfContext = useRHFFormContext<TFieldValues>();\r\n const control = externalControl ?? rhfContext?.control;\r\n\r\n const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n useEffect(() => {\r\n if (registerFieldValidation) {\r\n const rules: FieldValidationRules = {};\r\n if (required !== undefined) rules.required = required;\r\n if (validate !== undefined) rules.validate = validate;\r\n\r\n registerFieldValidation({\r\n name: name as string,\r\n type: \"string\",\r\n rules,\r\n });\r\n\r\n return () => {\r\n unregisterFieldValidation?.(name as string);\r\n };\r\n }\r\n }, [\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n name,\r\n required,\r\n validate,\r\n ]);\r\n\r\n const { field, fieldState } = useController<TFieldValues, TName>({\r\n name,\r\n control,\r\n });\r\n\r\n const fieldError = fieldState.error?.message;\r\n const errorMessage = customError ?? fieldError;\r\n const hasError = !!errorMessage;\r\n const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n const effectiveDisabled = disabled ?? formConfig.disabled;\r\n const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n return (\r\n <FieldLayout\r\n inputId={inputId}\r\n label={label}\r\n required={!!required}\r\n helperText={helperText}\r\n errorMessage={showError ? errorMessage : undefined}\r\n showError={showError}\r\n fullWidth={fullWidth}\r\n formConfig={formConfig}\r\n >\r\n <div className=\"flex gap-2\">\r\n <CountryPicker\r\n id={inputId}\r\n value={field.value ?? \"\"}\r\n onValueChange={(value) => field.onChange(value)}\r\n placeholder={placeholder}\r\n disabled={effectiveDisabled}\r\n include={include}\r\n exclude={exclude}\r\n priorityCountries={priorityCountries}\r\n required={!!required}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError\r\n ? `${inputId}-error`\r\n : helperText\r\n ? `${inputId}-helper`\r\n : undefined\r\n }\r\n className={cn(\r\n countrySelectVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n className\r\n )}\r\n />\r\n {allowClear && field.value && (\r\n <button\r\n type=\"button\"\r\n className=\"text-sm text-muted-foreground hover:text-foreground\"\r\n onClick={() => field.onChange(\"\")}\r\n disabled={effectiveDisabled}\r\n >\r\n Clear\r\n </button>\r\n )}\r\n </div>\r\n </FieldLayout>\r\n );\r\n}\r\n\r\nCountrySelect.displayName = \"CountrySelect\";\r\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,yBAAA,
|
|
1
|
+
{"version":3,"file":"CountrySelect.cjs","names":[],"sources":["../../../../src/components/Form/CountrySelect.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport { CountryPicker } from \"./CountryPicker\";\r\n\r\nconst countrySelectVariants = cva(\"\", {\r\n variants: {\r\n size: {\r\n sm: \"h-8 text-xs\",\r\n md: \"h-10 text-sm\",\r\n lg: \"h-12 text-base\",\r\n },\r\n variant: {\r\n default: \"border-input focus-visible:ring-ring\",\r\n error: \"border-destructive focus-visible:ring-destructive\",\r\n success: \"border-green-500 focus-visible:ring-green-500\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n variant: \"default\",\r\n },\r\n});\r\n\r\nexport interface CountrySelectProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof countrySelectVariants> {\r\n name: TName;\r\n label?: string;\r\n helperText?: string;\r\n showError?: boolean;\r\n error?: string;\r\n fullWidth?: boolean;\r\n placeholder?: string;\r\n allowClear?: boolean;\r\n disabled?: boolean;\r\n className?: string;\r\n id?: string;\r\n control?: Control<TFieldValues>;\r\n include?: string[];\r\n exclude?: string[];\r\n priorityCountries?: string[];\r\n /** Field is required (`true` or custom error message string) */\r\n required?: boolean | string;\r\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nexport function CountrySelect<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n name,\r\n label,\r\n helperText,\r\n showError = true,\r\n error: customError,\r\n size,\r\n variant,\r\n fullWidth = true,\r\n placeholder = \"Select a country\",\r\n allowClear,\r\n disabled,\r\n className,\r\n id: providedId,\r\n control: externalControl,\r\n include,\r\n exclude,\r\n priorityCountries,\r\n required,\r\n validate,\r\n}: CountrySelectProps<TFieldValues, TName>) {\r\n const generatedId = useId();\r\n const inputId = providedId ?? generatedId;\r\n const formConfigContext = useContext(FormConfigContext);\r\n const formConfig: FormConfig = formConfigContext ?? {};\r\n const rhfContext = useRHFFormContext<TFieldValues>();\r\n const control = externalControl ?? rhfContext?.control;\r\n\r\n const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n useEffect(() => {\r\n if (registerFieldValidation) {\r\n const rules: FieldValidationRules = {};\r\n if (required !== undefined) rules.required = required;\r\n if (validate !== undefined) rules.validate = validate;\r\n\r\n registerFieldValidation({\r\n name: name as string,\r\n type: \"string\",\r\n rules,\r\n });\r\n\r\n return () => {\r\n unregisterFieldValidation?.(name as string);\r\n };\r\n }\r\n }, [\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n name,\r\n required,\r\n validate,\r\n ]);\r\n\r\n const { field, fieldState } = useController<TFieldValues, TName>({\r\n name,\r\n control,\r\n });\r\n\r\n const fieldError = fieldState.error?.message;\r\n const errorMessage = customError ?? fieldError;\r\n const hasError = !!errorMessage;\r\n const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n const effectiveDisabled = disabled ?? formConfig.disabled;\r\n const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n return (\r\n <FieldLayout\r\n inputId={inputId}\r\n label={label}\r\n required={!!required}\r\n helperText={helperText}\r\n errorMessage={showError ? errorMessage : undefined}\r\n showError={showError}\r\n fullWidth={fullWidth}\r\n formConfig={formConfig}\r\n >\r\n <div className=\"flex gap-2\">\r\n <CountryPicker\r\n id={inputId}\r\n value={field.value ?? \"\"}\r\n onValueChange={(value) => field.onChange(value)}\r\n placeholder={placeholder}\r\n disabled={effectiveDisabled}\r\n include={include}\r\n exclude={exclude}\r\n priorityCountries={priorityCountries}\r\n required={!!required}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError\r\n ? `${inputId}-error`\r\n : helperText\r\n ? `${inputId}-helper`\r\n : undefined\r\n }\r\n className={cn(\r\n countrySelectVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n className\r\n )}\r\n />\r\n {allowClear && field.value && (\r\n <button\r\n type=\"button\"\r\n className=\"text-sm text-muted-foreground hover:text-foreground\"\r\n onClick={() => field.onChange(\"\")}\r\n disabled={effectiveDisabled}\r\n >\r\n Clear\r\n </button>\r\n )}\r\n </div>\r\n </FieldLayout>\r\n );\r\n}\r\n\r\nCountrySelect.displayName = \"CountrySelect\";\r\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,yBAAA,GAAwB,yBAAA,IAAA,CAAI,IAAI;CACpC,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AA0BD,SAAgB,cAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,cAAc,oBACd,YACA,UACA,WACA,IAAI,YACJ,SAAS,iBACT,SACA,SACA,mBACA,UACA,YAC0C;CAC1C,MAAM,eAAA,GAAc,MAAA,MAAA,CAAM;CAC1B,MAAM,UAAU,cAAc;CAC9B,MAAM,qBAAA,GAAoB,MAAA,WAAA,CAAW,gBAAA,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CACrD,MAAM,cAAA,GAAa,gBAAA,eAAA,CAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAE/C,MAAM,0BAA0B,mBAAmB;CACnD,MAAM,4BAA4B,mBAAmB;CAErD,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,yBAAyB;GAC3B,MAAM,QAA8B,CAAC;GACrC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,wBAAwB;IAChB;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,4BAA4B,IAAc;GAC5C;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,gBAAA,GAAe,gBAAA,cAAA,CAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CACnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAA,aAAD;EACW;EACF;EACP,UAAU,CAAC,CAAC;EACA;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACA;EACC;EAEZ,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,eAAD;IACE,IAAI;IACJ,OAAO,MAAM,SAAS;IACtB,gBAAgB,UAAU,MAAM,SAAS,KAAK;IACjC;IACb,UAAU;IACD;IACA;IACU;IACnB,UAAU,CAAC,CAAC;IACZ,gBAAc;IACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;IAER,WAAW,WAAA,GACT,sBAAsB;KAAE,MAAM;KAAe,SAAS;IAAiB,CAAC,GACxE,SACF;GACD,CAAA,GACA,cAAc,MAAM,SACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe,MAAM,SAAS,EAAE;IAChC,UAAU;IACX,UAAA;GAEO,CAAA,CAEP;;CACM,CAAA;AAEjB;AAEA,cAAc,cAAc"}
|
|
@@ -13,6 +13,12 @@ let react_hook_form = require("react-hook-form");
|
|
|
13
13
|
let lucide_react = require("lucide-react");
|
|
14
14
|
let date_fns = require("date-fns");
|
|
15
15
|
//#region src/components/Form/DatePicker.tsx
|
|
16
|
+
function toStartOfDay(value) {
|
|
17
|
+
if (!value || value === "") return;
|
|
18
|
+
const date = value instanceof Date ? value : new Date(value);
|
|
19
|
+
if (Number.isNaN(date.getTime())) return;
|
|
20
|
+
return (0, date_fns.startOfDay)(date);
|
|
21
|
+
}
|
|
16
22
|
var datePickerVariants = (0, class_variance_authority.cva)("w-full justify-start text-left font-normal", {
|
|
17
23
|
variants: {
|
|
18
24
|
size: {
|
|
@@ -66,7 +72,7 @@ function DatePicker({ name, label, helperText, showError = true, error: customEr
|
|
|
66
72
|
name,
|
|
67
73
|
control
|
|
68
74
|
});
|
|
69
|
-
const selectedDate =
|
|
75
|
+
const selectedDate = toStartOfDay(field.value);
|
|
70
76
|
const fieldError = fieldState.error?.message;
|
|
71
77
|
const errorMessage = customError ?? fieldError;
|
|
72
78
|
const hasError = !!errorMessage;
|
|
@@ -107,7 +113,7 @@ function DatePicker({ name, label, helperText, showError = true, error: customEr
|
|
|
107
113
|
mode: "single",
|
|
108
114
|
selected: selectedDate,
|
|
109
115
|
onSelect: (date) => {
|
|
110
|
-
field.onChange(date
|
|
116
|
+
field.onChange(date ? (0, date_fns.startOfDay)(date) : "");
|
|
111
117
|
setOpen(false);
|
|
112
118
|
}
|
|
113
119
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.cjs","names":[],"sources":["../../../../src/components/Form/DatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useState } from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { CalendarIcon } from \"lucide-react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport { Calendar } from \"../../primitives/calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\n\r\nconst datePickerVariants = cva(\"w-full justify-start text-left font-normal\", {\r\n variants: {\r\n size: {\r\n sm: \"h-8 text-xs\",\r\n md: \"h-10 text-sm\",\r\n lg: \"h-12 text-base\",\r\n },\r\n variant: {\r\n default: \"border-input\",\r\n error: \"border-destructive\",\r\n success: \"border-green-500\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n variant: \"default\",\r\n },\r\n});\r\n\r\nexport interface DatePickerProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof datePickerVariants> {\r\n name: TName;\r\n label?: string;\r\n helperText?: string;\r\n showError?: boolean;\r\n error?: string;\r\n fullWidth?: boolean;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n className?: string;\r\n id?: string;\r\n control?: Control<TFieldValues>;\r\n required?: boolean | string;\r\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nexport function DatePicker<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n name,\r\n label,\r\n helperText,\r\n showError = true,\r\n error: customError,\r\n size,\r\n variant,\r\n fullWidth = true,\r\n placeholder = \"Pick a date\",\r\n disabled,\r\n className,\r\n id: providedId,\r\n control: externalControl,\r\n required,\r\n validate,\r\n}: DatePickerProps<TFieldValues, TName>) {\r\n const generatedId = useId();\r\n const inputId = providedId ?? generatedId;\r\n const [open, setOpen] = useState(false);\r\n const formConfigContext = useContext(FormConfigContext);\r\n const formConfig: FormConfig = formConfigContext ?? {};\r\n const rhfContext = useRHFFormContext<TFieldValues>();\r\n const control = externalControl ?? rhfContext?.control;\r\n\r\n const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n useEffect(() => {\r\n if (registerFieldValidation) {\r\n const rules: FieldValidationRules = {};\r\n if (required !== undefined) rules.required = required;\r\n if (validate !== undefined) rules.validate = validate;\r\n\r\n registerFieldValidation({\r\n name: name as string,\r\n type: \"date\",\r\n rules,\r\n });\r\n\r\n return () => {\r\n unregisterFieldValidation?.(name as string);\r\n };\r\n }\r\n }, [\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n name,\r\n required,\r\n validate,\r\n ]);\r\n\r\n const { field, fieldState } = useController<TFieldValues, TName>({\r\n name,\r\n control,\r\n });\r\n\r\n const selectedDate =
|
|
1
|
+
{"version":3,"file":"DatePicker.cjs","names":[],"sources":["../../../../src/components/Form/DatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useState } from \"react\";\r\nimport { format, startOfDay } from \"date-fns\";\r\nimport { CalendarIcon } from \"lucide-react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport { Calendar } from \"../../primitives/calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\n\r\nfunction toStartOfDay(value: unknown): Date | undefined {\r\n if (!value || value === \"\") {\r\n return undefined;\r\n }\r\n\r\n const date = value instanceof Date ? value : new Date(value as string | number);\r\n if (Number.isNaN(date.getTime())) {\r\n return undefined;\r\n }\r\n\r\n return startOfDay(date);\r\n}\r\n\r\nconst datePickerVariants = cva(\"w-full justify-start text-left font-normal\", {\r\n variants: {\r\n size: {\r\n sm: \"h-8 text-xs\",\r\n md: \"h-10 text-sm\",\r\n lg: \"h-12 text-base\",\r\n },\r\n variant: {\r\n default: \"border-input\",\r\n error: \"border-destructive\",\r\n success: \"border-green-500\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n variant: \"default\",\r\n },\r\n});\r\n\r\nexport interface DatePickerProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof datePickerVariants> {\r\n name: TName;\r\n label?: string;\r\n helperText?: string;\r\n showError?: boolean;\r\n error?: string;\r\n fullWidth?: boolean;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n className?: string;\r\n id?: string;\r\n control?: Control<TFieldValues>;\r\n required?: boolean | string;\r\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nexport function DatePicker<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n name,\r\n label,\r\n helperText,\r\n showError = true,\r\n error: customError,\r\n size,\r\n variant,\r\n fullWidth = true,\r\n placeholder = \"Pick a date\",\r\n disabled,\r\n className,\r\n id: providedId,\r\n control: externalControl,\r\n required,\r\n validate,\r\n}: DatePickerProps<TFieldValues, TName>) {\r\n const generatedId = useId();\r\n const inputId = providedId ?? generatedId;\r\n const [open, setOpen] = useState(false);\r\n const formConfigContext = useContext(FormConfigContext);\r\n const formConfig: FormConfig = formConfigContext ?? {};\r\n const rhfContext = useRHFFormContext<TFieldValues>();\r\n const control = externalControl ?? rhfContext?.control;\r\n\r\n const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n useEffect(() => {\r\n if (registerFieldValidation) {\r\n const rules: FieldValidationRules = {};\r\n if (required !== undefined) rules.required = required;\r\n if (validate !== undefined) rules.validate = validate;\r\n\r\n registerFieldValidation({\r\n name: name as string,\r\n type: \"date\",\r\n rules,\r\n });\r\n\r\n return () => {\r\n unregisterFieldValidation?.(name as string);\r\n };\r\n }\r\n }, [\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n name,\r\n required,\r\n validate,\r\n ]);\r\n\r\n const { field, fieldState } = useController<TFieldValues, TName>({\r\n name,\r\n control,\r\n });\r\n\r\n const selectedDate = toStartOfDay(field.value);\r\n const fieldError = fieldState.error?.message;\r\n const errorMessage = customError ?? fieldError;\r\n const hasError = !!errorMessage;\r\n const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n const effectiveDisabled = disabled ?? formConfig.disabled;\r\n const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n return (\r\n <FieldLayout\r\n inputId={inputId}\r\n label={label}\r\n required={!!required}\r\n helperText={helperText}\r\n errorMessage={showError ? errorMessage : undefined}\r\n showError={showError}\r\n fullWidth={fullWidth}\r\n formConfig={formConfig}\r\n >\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id={inputId}\r\n type=\"button\"\r\n variant=\"outline\"\r\n disabled={effectiveDisabled}\r\n aria-invalid={hasError}\r\n aria-describedby={\r\n hasError\r\n ? `${inputId}-error`\r\n : helperText\r\n ? `${inputId}-helper`\r\n : undefined\r\n }\r\n className={cn(\r\n datePickerVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n !selectedDate && \"text-muted-foreground\",\r\n className\r\n )}\r\n >\r\n <CalendarIcon className=\"mr-2 h-4 w-4\" />\r\n {selectedDate ? format(selectedDate, \"PPP\") : placeholder}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n <Calendar\r\n mode=\"single\"\r\n selected={selectedDate}\r\n onSelect={(date) => {\r\n field.onChange(date ? startOfDay(date) : \"\");\r\n setOpen(false);\r\n }}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n </FieldLayout>\r\n );\r\n}\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
const require_cn = require("../../utils/cn.cjs");
|
|
4
|
+
const require_button = require("../../primitives/button.cjs");
|
|
5
|
+
const require_context = require("./context.cjs");
|
|
6
|
+
const require_FieldLayout = require("./FieldLayout.cjs");
|
|
7
|
+
const require_popover = require("../../primitives/popover.cjs");
|
|
8
|
+
const require_calendar = require("../../primitives/calendar.cjs");
|
|
9
|
+
const require_separator = require("../../primitives/separator.cjs");
|
|
10
|
+
const require_TimePicker = require("./TimePicker.cjs");
|
|
11
|
+
let react = require("react");
|
|
12
|
+
let class_variance_authority = require("class-variance-authority");
|
|
13
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
14
|
+
let react_hook_form = require("react-hook-form");
|
|
15
|
+
let lucide_react = require("lucide-react");
|
|
16
|
+
let date_fns = require("date-fns");
|
|
17
|
+
//#region src/components/Form/DateTimePicker.tsx
|
|
18
|
+
var dateTimePickerVariants = (0, class_variance_authority.cva)("w-full justify-start text-left font-normal", {
|
|
19
|
+
variants: {
|
|
20
|
+
size: {
|
|
21
|
+
sm: "h-8 text-xs",
|
|
22
|
+
md: "h-10 text-sm",
|
|
23
|
+
lg: "h-12 text-base"
|
|
24
|
+
},
|
|
25
|
+
variant: {
|
|
26
|
+
default: "border-input",
|
|
27
|
+
error: "border-destructive",
|
|
28
|
+
success: "border-green-500"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
defaultVariants: {
|
|
32
|
+
size: "md",
|
|
33
|
+
variant: "default"
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
function toValidDate(value) {
|
|
37
|
+
if (!value || value === "") return;
|
|
38
|
+
const date = value instanceof Date ? value : new Date(value);
|
|
39
|
+
if (Number.isNaN(date.getTime())) return;
|
|
40
|
+
return date;
|
|
41
|
+
}
|
|
42
|
+
function hasTimePart(date) {
|
|
43
|
+
return date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0 || date.getMilliseconds() !== 0;
|
|
44
|
+
}
|
|
45
|
+
function withPreservedTime(nextDay, previous) {
|
|
46
|
+
const next = new Date(nextDay);
|
|
47
|
+
next.setHours(previous.getHours(), previous.getMinutes(), previous.getSeconds(), previous.getMilliseconds());
|
|
48
|
+
return next;
|
|
49
|
+
}
|
|
50
|
+
function isSelectEventTarget(target) {
|
|
51
|
+
return target instanceof Element && Boolean(target.closest("[data-radix-select-content]"));
|
|
52
|
+
}
|
|
53
|
+
function DateTimePicker({ name, label, helperText, showError = true, error: customError, size, variant, fullWidth = true, placeholder = "Pick a date", disabled, className, id: providedId, control: externalControl, required, validate, minuteStep = 5 }) {
|
|
54
|
+
const generatedId = (0, react.useId)();
|
|
55
|
+
const inputId = providedId ?? generatedId;
|
|
56
|
+
const [open, setOpen] = (0, react.useState)(false);
|
|
57
|
+
const [timeOpen, setTimeOpen] = (0, react.useState)(false);
|
|
58
|
+
const [timeSet, setTimeSet] = (0, react.useState)(false);
|
|
59
|
+
const formConfigContext = (0, react.useContext)(require_context.FormConfigContext);
|
|
60
|
+
const formConfig = formConfigContext ?? {};
|
|
61
|
+
const rhfContext = (0, react_hook_form.useFormContext)();
|
|
62
|
+
const control = externalControl ?? rhfContext?.control;
|
|
63
|
+
const registerFieldValidation = formConfigContext?.registerFieldValidation;
|
|
64
|
+
const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;
|
|
65
|
+
(0, react.useEffect)(() => {
|
|
66
|
+
if (registerFieldValidation) {
|
|
67
|
+
const rules = {};
|
|
68
|
+
if (required !== void 0) rules.required = required;
|
|
69
|
+
if (validate !== void 0) rules.validate = validate;
|
|
70
|
+
registerFieldValidation({
|
|
71
|
+
name,
|
|
72
|
+
type: "datetime",
|
|
73
|
+
rules
|
|
74
|
+
});
|
|
75
|
+
return () => {
|
|
76
|
+
unregisterFieldValidation?.(name);
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
}, [
|
|
80
|
+
registerFieldValidation,
|
|
81
|
+
unregisterFieldValidation,
|
|
82
|
+
name,
|
|
83
|
+
required,
|
|
84
|
+
validate
|
|
85
|
+
]);
|
|
86
|
+
const { field, fieldState } = (0, react_hook_form.useController)({
|
|
87
|
+
name,
|
|
88
|
+
control
|
|
89
|
+
});
|
|
90
|
+
const selectedDate = toValidDate(field.value);
|
|
91
|
+
(0, react.useEffect)(() => {
|
|
92
|
+
const date = toValidDate(field.value);
|
|
93
|
+
if (!date) {
|
|
94
|
+
setTimeSet(false);
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
if (hasTimePart(date)) setTimeSet(true);
|
|
98
|
+
}, [field.value]);
|
|
99
|
+
const fieldError = fieldState.error?.message;
|
|
100
|
+
const errorMessage = customError ?? fieldError;
|
|
101
|
+
const hasError = !!errorMessage;
|
|
102
|
+
const effectiveSize = size ?? formConfig.size ?? "md";
|
|
103
|
+
const effectiveDisabled = disabled ?? formConfig.disabled;
|
|
104
|
+
const effectiveVariant = hasError ? "error" : variant;
|
|
105
|
+
const displayHasTime = timeSet && !!selectedDate;
|
|
106
|
+
const handleOpenChange = (nextOpen) => {
|
|
107
|
+
setOpen(nextOpen);
|
|
108
|
+
if (nextOpen && timeSet) {
|
|
109
|
+
setTimeOpen(true);
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
if (!nextOpen) setTimeOpen(false);
|
|
113
|
+
};
|
|
114
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FieldLayout.FieldLayout, {
|
|
115
|
+
inputId,
|
|
116
|
+
label,
|
|
117
|
+
required: !!required,
|
|
118
|
+
helperText,
|
|
119
|
+
errorMessage: showError ? errorMessage : void 0,
|
|
120
|
+
showError,
|
|
121
|
+
fullWidth,
|
|
122
|
+
formConfig,
|
|
123
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.Popover, {
|
|
124
|
+
open,
|
|
125
|
+
onOpenChange: handleOpenChange,
|
|
126
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverTrigger, {
|
|
127
|
+
asChild: true,
|
|
128
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
|
|
129
|
+
id: inputId,
|
|
130
|
+
type: "button",
|
|
131
|
+
variant: "outline",
|
|
132
|
+
disabled: effectiveDisabled,
|
|
133
|
+
"aria-invalid": hasError,
|
|
134
|
+
"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
|
|
135
|
+
className: require_cn.cn(dateTimePickerVariants({
|
|
136
|
+
size: effectiveSize,
|
|
137
|
+
variant: effectiveVariant
|
|
138
|
+
}), !selectedDate && "text-muted-foreground", className),
|
|
139
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarIcon, { className: "mr-2 h-4 w-4" }), selectedDate ? (0, date_fns.format)(selectedDate, displayHasTime ? "PPP p" : "PPP") : placeholder]
|
|
140
|
+
})
|
|
141
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.PopoverContent, {
|
|
142
|
+
className: "w-auto p-0",
|
|
143
|
+
align: "start",
|
|
144
|
+
onPointerDownOutside: (event) => {
|
|
145
|
+
if (isSelectEventTarget(event.target)) event.preventDefault();
|
|
146
|
+
},
|
|
147
|
+
onFocusOutside: (event) => {
|
|
148
|
+
if (isSelectEventTarget(event.target)) event.preventDefault();
|
|
149
|
+
},
|
|
150
|
+
children: [
|
|
151
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_calendar.Calendar, {
|
|
152
|
+
mode: "single",
|
|
153
|
+
selected: selectedDate,
|
|
154
|
+
onSelect: (date) => {
|
|
155
|
+
if (!date) {
|
|
156
|
+
field.onChange("");
|
|
157
|
+
setTimeSet(false);
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
if (selectedDate && timeSet) {
|
|
161
|
+
field.onChange(withPreservedTime(date, selectedDate));
|
|
162
|
+
setOpen(false);
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
field.onChange((0, date_fns.startOfDay)(date));
|
|
166
|
+
}
|
|
167
|
+
}),
|
|
168
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_separator.Separator, {}),
|
|
169
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
170
|
+
className: "p-3",
|
|
171
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
|
|
172
|
+
type: "button",
|
|
173
|
+
variant: "ghost",
|
|
174
|
+
disabled: effectiveDisabled,
|
|
175
|
+
className: "h-8 w-full justify-start px-2 font-normal",
|
|
176
|
+
onClick: () => setTimeOpen((current) => !current),
|
|
177
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clock, { className: "mr-2 h-4 w-4" }), displayHasTime && selectedDate ? (0, date_fns.format)(selectedDate, "p") : "Add time"]
|
|
178
|
+
}), timeOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimePicker.TimePicker, {
|
|
179
|
+
className: "mt-2",
|
|
180
|
+
value: selectedDate,
|
|
181
|
+
minuteStep,
|
|
182
|
+
disabled: effectiveDisabled,
|
|
183
|
+
onChange: (date) => {
|
|
184
|
+
field.onChange(date);
|
|
185
|
+
setTimeSet(true);
|
|
186
|
+
},
|
|
187
|
+
onClear: () => {
|
|
188
|
+
if (selectedDate) field.onChange((0, date_fns.startOfDay)(selectedDate));
|
|
189
|
+
setTimeSet(false);
|
|
190
|
+
}
|
|
191
|
+
}) : null]
|
|
192
|
+
})
|
|
193
|
+
]
|
|
194
|
+
})]
|
|
195
|
+
})
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
DateTimePicker.displayName = "DateTimePicker";
|
|
199
|
+
//#endregion
|
|
200
|
+
exports.DateTimePicker = DateTimePicker;
|
|
201
|
+
|
|
202
|
+
//# sourceMappingURL=DateTimePicker.cjs.map
|