@skybin-tech/nebula-ui 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/dist/cjs/components/Button/Button.cjs +32 -11
  2. package/dist/cjs/components/Button/Button.cjs.map +1 -1
  3. package/dist/cjs/components/Form/Checkbox.cjs +2 -2
  4. package/dist/cjs/components/Form/Checkbox.cjs.map +1 -1
  5. package/dist/cjs/components/Form/Form.cjs +49 -34
  6. package/dist/cjs/components/Form/Form.cjs.map +1 -1
  7. package/dist/cjs/components/Form/Radio.cjs +2 -2
  8. package/dist/cjs/components/Form/Radio.cjs.map +1 -1
  9. package/dist/cjs/components/Form/Select.cjs +4 -17
  10. package/dist/cjs/components/Form/Select.cjs.map +1 -1
  11. package/dist/cjs/components/Form/Switch.cjs +2 -2
  12. package/dist/cjs/components/Form/Switch.cjs.map +1 -1
  13. package/dist/cjs/components/Form/TextArea.cjs +4 -17
  14. package/dist/cjs/components/Form/TextArea.cjs.map +1 -1
  15. package/dist/cjs/components/Form/TextBox.cjs +11 -21
  16. package/dist/cjs/components/Form/TextBox.cjs.map +1 -1
  17. package/dist/cjs/components/Form/variants.cjs +16 -0
  18. package/dist/cjs/components/Form/variants.cjs.map +1 -0
  19. package/dist/cjs/index.cjs +16 -45
  20. package/dist/cjs/index.cjs.map +1 -1
  21. package/dist/cjs/{components/ui → primitives}/avatar.cjs +2 -2
  22. package/dist/cjs/primitives/avatar.cjs.map +1 -0
  23. package/dist/cjs/{components/ui → primitives}/badge.cjs +1 -1
  24. package/dist/cjs/primitives/badge.cjs.map +1 -0
  25. package/dist/cjs/{components/ui → primitives}/card.cjs +4 -4
  26. package/dist/cjs/primitives/card.cjs.map +1 -0
  27. package/dist/cjs/{components/ui → primitives}/checkbox.cjs +3 -3
  28. package/dist/cjs/primitives/checkbox.cjs.map +1 -0
  29. package/dist/cjs/{components/ui → primitives}/dropdown-menu.cjs +19 -17
  30. package/dist/cjs/primitives/dropdown-menu.cjs.map +1 -0
  31. package/dist/cjs/{components/ui → primitives}/input.cjs +1 -1
  32. package/dist/cjs/primitives/input.cjs.map +1 -0
  33. package/dist/cjs/{components/ui → primitives}/label.cjs +1 -1
  34. package/dist/cjs/primitives/label.cjs.map +1 -0
  35. package/dist/cjs/{components/ui → primitives}/radio-group.cjs +1 -1
  36. package/dist/cjs/primitives/radio-group.cjs.map +1 -0
  37. package/dist/cjs/{components/ui → primitives}/select.cjs +3 -5
  38. package/dist/cjs/primitives/select.cjs.map +1 -0
  39. package/dist/cjs/{components/ui → primitives}/separator.cjs +1 -1
  40. package/dist/cjs/primitives/separator.cjs.map +1 -0
  41. package/dist/cjs/{components/ui → primitives}/switch.cjs +1 -1
  42. package/dist/cjs/primitives/switch.cjs.map +1 -0
  43. package/dist/cjs/{components/ui → primitives}/textarea.cjs +1 -1
  44. package/dist/cjs/primitives/textarea.cjs.map +1 -0
  45. package/dist/components/Button/Button.js +32 -11
  46. package/dist/components/Button/Button.js.map +1 -1
  47. package/dist/components/Form/Checkbox.js +2 -2
  48. package/dist/components/Form/Checkbox.js.map +1 -1
  49. package/dist/components/Form/Form.js +50 -35
  50. package/dist/components/Form/Form.js.map +1 -1
  51. package/dist/components/Form/Radio.js +2 -2
  52. package/dist/components/Form/Radio.js.map +1 -1
  53. package/dist/components/Form/Select.js +3 -16
  54. package/dist/components/Form/Select.js.map +1 -1
  55. package/dist/components/Form/Switch.js +2 -2
  56. package/dist/components/Form/Switch.js.map +1 -1
  57. package/dist/components/Form/TextArea.js +3 -16
  58. package/dist/components/Form/TextArea.js.map +1 -1
  59. package/dist/components/Form/TextBox.js +10 -20
  60. package/dist/components/Form/TextBox.js.map +1 -1
  61. package/dist/components/Form/variants.js +16 -0
  62. package/dist/components/Form/variants.js.map +1 -0
  63. package/dist/index.js +8 -34
  64. package/dist/index.js.map +1 -1
  65. package/dist/{components/ui → primitives}/avatar.js +2 -2
  66. package/dist/primitives/avatar.js.map +1 -0
  67. package/dist/{components/ui → primitives}/badge.js +1 -1
  68. package/dist/primitives/badge.js.map +1 -0
  69. package/dist/{components/ui → primitives}/card.js +4 -4
  70. package/dist/primitives/card.js.map +1 -0
  71. package/dist/{components/ui → primitives}/checkbox.js +3 -3
  72. package/dist/primitives/checkbox.js.map +1 -0
  73. package/dist/{components/ui → primitives}/dropdown-menu.js +19 -17
  74. package/dist/primitives/dropdown-menu.js.map +1 -0
  75. package/dist/{components/ui → primitives}/input.js +1 -1
  76. package/dist/primitives/input.js.map +1 -0
  77. package/dist/{components/ui → primitives}/label.js +1 -1
  78. package/dist/primitives/label.js.map +1 -0
  79. package/dist/{components/ui → primitives}/radio-group.js +1 -1
  80. package/dist/primitives/radio-group.js.map +1 -0
  81. package/dist/{components/ui → primitives}/select.js +5 -7
  82. package/dist/primitives/select.js.map +1 -0
  83. package/dist/{components/ui → primitives}/separator.js +1 -1
  84. package/dist/primitives/separator.js.map +1 -0
  85. package/dist/{components/ui → primitives}/switch.js +1 -1
  86. package/dist/primitives/switch.js.map +1 -0
  87. package/dist/{components/ui → primitives}/textarea.js +1 -1
  88. package/dist/primitives/textarea.js.map +1 -0
  89. package/package.json +87 -86
  90. package/dist/cjs/components/Input/Input.cjs +0 -44
  91. package/dist/cjs/components/Input/Input.cjs.map +0 -1
  92. package/dist/cjs/components/ui/avatar.cjs.map +0 -1
  93. package/dist/cjs/components/ui/badge.cjs.map +0 -1
  94. package/dist/cjs/components/ui/card.cjs.map +0 -1
  95. package/dist/cjs/components/ui/checkbox.cjs.map +0 -1
  96. package/dist/cjs/components/ui/dropdown-menu.cjs.map +0 -1
  97. package/dist/cjs/components/ui/input.cjs.map +0 -1
  98. package/dist/cjs/components/ui/label.cjs.map +0 -1
  99. package/dist/cjs/components/ui/radio-group.cjs.map +0 -1
  100. package/dist/cjs/components/ui/select.cjs.map +0 -1
  101. package/dist/cjs/components/ui/separator.cjs.map +0 -1
  102. package/dist/cjs/components/ui/switch.cjs.map +0 -1
  103. package/dist/cjs/components/ui/textarea.cjs.map +0 -1
  104. package/dist/cjs/nebula-ui.css +0 -212
  105. package/dist/components/Input/Input.js +0 -44
  106. package/dist/components/Input/Input.js.map +0 -1
  107. package/dist/components/ui/avatar.js.map +0 -1
  108. package/dist/components/ui/badge.js.map +0 -1
  109. package/dist/components/ui/card.js.map +0 -1
  110. package/dist/components/ui/checkbox.js.map +0 -1
  111. package/dist/components/ui/dropdown-menu.js.map +0 -1
  112. package/dist/components/ui/input.js.map +0 -1
  113. package/dist/components/ui/label.js.map +0 -1
  114. package/dist/components/ui/radio-group.js.map +0 -1
  115. package/dist/components/ui/select.js.map +0 -1
  116. package/dist/components/ui/separator.js.map +0 -1
  117. package/dist/components/ui/switch.js.map +0 -1
  118. package/dist/components/ui/textarea.js.map +0 -1
  119. package/dist/nebula-ui.css +0 -212
@@ -0,0 +1 @@
1
+ {"version":3,"file":"label.cjs","sources":["../../../src/primitives/label.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\n\nconst labelVariants = cva(\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n <LabelPrimitive.Root\n ref={ref}\n className={cn(labelVariants(), className)}\n {...props}\n />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"names":["cva","React","jsx","LabelPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,gBAAgBA,uBAAAA;AAAAA,EACpB;AACF;AAEA,MAAM,QAAQC,iBAAM,WAIlB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,0BAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA,GAAG,cAAA,GAAiB,SAAS;AAAA,IACvC,GAAG;AAAA,EAAA;AACN,CACD;AACD,MAAM,cAAcD,0BAAe,KAAK;;"}
@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const RadioGroupPrimitive = require("@radix-ui/react-radio-group");
6
6
  const lucideReact = require("lucide-react");
7
- const cn = require("../../utils/cn.cjs");
7
+ const cn = require("../utils/cn.cjs");
8
8
  function _interopNamespaceDefault(e) {
9
9
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
10
10
  if (e) {
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio-group.cjs","sources":["../../../src/primitives/radio-group.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\n\nimport { cn } from \"@/utils\"\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n return (\n <RadioGroupPrimitive.Root\n className={cn(\"grid gap-2\", className)}\n {...props}\n ref={ref}\n />\n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n className={cn(\n \"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n className\n )}\n {...props}\n >\n <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n <Circle className=\"h-2.5 w-2.5 fill-current text-current\" />\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"],"names":["React","jsx","RadioGroupPrimitive","cn","Circle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,aAAaA,iBAAM,WAGvB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAClC,SACEC,2BAAAA;AAAAA,IAACC,+BAAoB;AAAA,IAApB;AAAA,MACC,WAAWC,GAAAA,GAAG,cAAc,SAAS;AAAA,MACpC,GAAG;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AACD,WAAW,cAAcD,+BAAoB,KAAK;AAElD,MAAM,iBAAiBF,iBAAM,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAClC,SACEC,2BAAAA;AAAAA,IAACC,+BAAoB;AAAA,IAApB;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAAF,2BAAAA,IAACC,+BAAoB,WAApB,EAA8B,WAAU,oCACvC,UAAAD,2BAAAA,IAACG,YAAAA,QAAA,EAAO,WAAU,wCAAA,CAAwC,EAAA,CAC5D;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AACD,eAAe,cAAcF,+BAAoB,KAAK;;;"}
@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const SelectPrimitive = require("@radix-ui/react-select");
6
6
  const lucideReact = require("lucide-react");
7
- const cn = require("../../utils/cn.cjs");
7
+ const cn = require("../utils/cn.cjs");
8
8
  function _interopNamespaceDefault(e) {
9
9
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
10
10
  if (e) {
@@ -24,14 +24,13 @@ function _interopNamespaceDefault(e) {
24
24
  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
25
25
  const SelectPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SelectPrimitive);
26
26
  const Select = SelectPrimitive__namespace.Root;
27
- const SelectGroup = SelectPrimitive__namespace.Group;
28
27
  const SelectValue = SelectPrimitive__namespace.Value;
29
28
  const SelectTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
30
29
  SelectPrimitive__namespace.Trigger,
31
30
  {
32
31
  ref,
33
32
  className: cn.cn(
34
- "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
33
+ "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
35
34
  className
36
35
  ),
37
36
  ...props,
@@ -73,7 +72,7 @@ const SelectContent = React__namespace.forwardRef(({ className, children, positi
73
72
  {
74
73
  ref,
75
74
  className: cn.cn(
76
- "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
75
+ "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
77
76
  position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
78
77
  className
79
78
  ),
@@ -132,7 +131,6 @@ const SelectSeparator = React__namespace.forwardRef(({ className, ...props }, re
132
131
  SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
133
132
  exports.Select = Select;
134
133
  exports.SelectContent = SelectContent;
135
- exports.SelectGroup = SelectGroup;
136
134
  exports.SelectItem = SelectItem;
137
135
  exports.SelectLabel = SelectLabel;
138
136
  exports.SelectScrollDownButton = SelectScrollDownButton;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.cjs","sources":["../../../src/primitives/select.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n \"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronDown className=\"h-4 w-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className\n )}\n {...props}\n >\n <ChevronUp className=\"h-4 w-4\" />\n </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className\n )}\n {...props}\n >\n <ChevronDown className=\"h-4 w-4\" />\n </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n \"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]\",\n position === \"popper\" &&\n \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n className\n )}\n position={position}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n \"p-1\",\n position === \"popper\" &&\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n {...props}\n />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n className\n )}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <Check className=\"h-4 w-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n {...props}\n />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n}\n"],"names":["SelectPrimitive","React","jsxs","cn","jsx","ChevronDown","ChevronUp","Check"],"mappings":"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"}
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const SeparatorPrimitive = require("@radix-ui/react-separator");
6
- const cn = require("../../utils/cn.cjs");
6
+ const cn = require("../utils/cn.cjs");
7
7
  function _interopNamespaceDefault(e) {
8
8
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
9
9
  if (e) {
@@ -0,0 +1 @@
1
+ {"version":3,"file":"separator.cjs","sources":["../../../src/primitives/separator.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/utils\"\n\nconst Separator = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n (\n { className, orientation = \"horizontal\", decorative = true, ...props },\n ref\n ) => (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn(\n \"shrink-0 bg-border\",\n orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n className\n )}\n {...props}\n />\n )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n"],"names":["React","jsx","SeparatorPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAYA,iBAAM;AAAA,EAItB,CACE,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,SAC/D,QAEAC,2BAAAA;AAAAA,IAACC,8BAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA,gBAAgB,eAAe,mBAAmB;AAAA,QAClD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AACA,UAAU,cAAcD,8BAAmB,KAAK;;"}
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const SwitchPrimitives = require("@radix-ui/react-switch");
6
- const cn = require("../../utils/cn.cjs");
6
+ const cn = require("../utils/cn.cjs");
7
7
  function _interopNamespaceDefault(e) {
8
8
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
9
9
  if (e) {
@@ -0,0 +1 @@
1
+ {"version":3,"file":"switch.cjs","sources":["../../../src/primitives/switch.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/utils\"\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitives.Root>,\n React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n <SwitchPrimitives.Root\n className={cn(\n \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n className\n )}\n {...props}\n ref={ref}\n >\n <SwitchPrimitives.Thumb\n className={cn(\n \"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n )}\n />\n </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"],"names":["React","jsx","SwitchPrimitives","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,SAASA,iBAAM,WAGnB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,4BAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IACJ;AAAA,IAEA,UAAAF,2BAAAA;AAAAA,MAACC,4BAAiB;AAAA,MAAjB;AAAA,QACC,WAAWC,GAAAA;AAAAA,UACT;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AACF,CACD;AACD,OAAO,cAAcD,4BAAiB,KAAK;;"}
@@ -2,7 +2,7 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
- const cn = require("../../utils/cn.cjs");
5
+ const cn = require("../utils/cn.cjs");
6
6
  function _interopNamespaceDefault(e) {
7
7
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
8
8
  if (e) {
@@ -0,0 +1 @@
1
+ {"version":3,"file":"textarea.cjs","sources":["../../../src/primitives/textarea.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/utils\"\n\nconst Textarea = React.forwardRef<\n HTMLTextAreaElement,\n React.ComponentProps<\"textarea\">\n>(({ className, ...props }, ref) => {\n return (\n <textarea\n className={cn(\n \"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n className\n )}\n ref={ref}\n {...props}\n />\n )\n})\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,WAAWA,iBAAM,WAGrB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAClC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACD,SAAS,cAAc;;"}
@@ -1,6 +1,34 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { cva } from "class-variance-authority";
2
3
  import { cn } from "../../utils/cn.js";
3
- /* empty css */
4
+ const buttonVariants = cva(
5
+ "inline-flex items-center justify-center gap-2 font-medium rounded-md border transition-all cursor-pointer relative disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
6
+ {
7
+ variants: {
8
+ variant: {
9
+ primary: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 disabled:hover:bg-primary",
10
+ secondary: "bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80 disabled:hover:bg-secondary",
11
+ outline: "bg-transparent text-primary border-primary hover:bg-primary hover:text-primary-foreground disabled:hover:bg-transparent disabled:hover:text-primary",
12
+ ghost: "bg-transparent text-foreground border-transparent hover:bg-accent hover:text-accent-foreground disabled:hover:bg-transparent",
13
+ danger: "bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90 disabled:hover:bg-destructive"
14
+ },
15
+ size: {
16
+ sm: "h-8 px-3 text-sm",
17
+ md: "h-10 px-4 text-sm",
18
+ lg: "h-12 px-6 text-base"
19
+ },
20
+ fullWidth: {
21
+ true: "w-full flex",
22
+ false: ""
23
+ }
24
+ },
25
+ defaultVariants: {
26
+ variant: "primary",
27
+ size: "md",
28
+ fullWidth: false
29
+ }
30
+ }
31
+ );
4
32
  function Button({
5
33
  children,
6
34
  variant = "primary",
@@ -14,19 +42,12 @@ function Button({
14
42
  return /* @__PURE__ */ jsxs(
15
43
  "button",
16
44
  {
17
- className: cn(
18
- "skybin-button",
19
- `skybin-button--${variant}`,
20
- `skybin-button--${size}`,
21
- fullWidth && "skybin-button--full-width",
22
- loading && "skybin-button--loading",
23
- className
24
- ),
45
+ className: cn(buttonVariants({ variant, size, fullWidth }), className),
25
46
  disabled: disabled || loading,
26
47
  ...props,
27
48
  children: [
28
- loading && /* @__PURE__ */ jsx("span", { className: "skybin-button__spinner" }),
29
- /* @__PURE__ */ jsx("span", { className: cn("skybin-button__content", loading && "skybin-button__content--hidden"), children })
49
+ loading && /* @__PURE__ */ jsx("span", { className: "size-4 border-2 border-current border-r-transparent rounded-full animate-spin" }),
50
+ /* @__PURE__ */ jsx("span", { className: cn(loading && "invisible"), children })
30
51
  ]
31
52
  }
32
53
  );
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport \"./Button.css\";\r\n\r\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n /** The content of the button */\r\n children: ReactNode;\r\n /** The visual style variant of the button */\r\n variant?: \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\";\r\n /** The size of the button */\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n /** Whether the button should take full width */\r\n fullWidth?: boolean;\r\n /** Whether the button is in a loading state */\r\n loading?: boolean;\r\n}\r\n\r\n/**\r\n * A customizable button component with multiple variants and sizes\r\n */\r\nexport function Button({\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 ...props\r\n}: ButtonProps) {\r\n return (\r\n <button\r\n className={cn(\r\n \"skybin-button\",\r\n `skybin-button--${variant}`,\r\n `skybin-button--${size}`,\r\n fullWidth && \"skybin-button--full-width\",\r\n loading && \"skybin-button--loading\",\r\n className\r\n )}\r\n disabled={disabled || loading}\r\n {...props}\r\n >\r\n {loading && <span className=\"skybin-button__spinner\" />}\r\n <span className={cn(\"skybin-button__content\", loading && \"skybin-button__content--hidden\")}>\r\n {children}\r\n </span>\r\n </button>\r\n );\r\n}\r\n"],"names":[],"mappings":";;;AAoBO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,kBAAkB,OAAO;AAAA,QACzB,kBAAkB,IAAI;AAAA,QACtB,aAAa;AAAA,QACb,WAAW;AAAA,QACX;AAAA,MAAA;AAAA,MAEF,UAAU,YAAY;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WAAW,oBAAC,QAAA,EAAK,WAAU,yBAAA,CAAyB;AAAA,QACrD,oBAAC,UAAK,WAAW,GAAG,0BAA0B,WAAW,gCAAgC,GACtF,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nconst buttonVariants = cva(\r\n \"inline-flex items-center justify-center gap-2 font-medium rounded-md border transition-all cursor-pointer relative disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\r\n {\r\n variants: {\r\n variant: {\r\n primary:\r\n \"bg-primary text-primary-foreground border-primary hover:bg-primary/90 disabled:hover:bg-primary\",\r\n secondary:\r\n \"bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80 disabled:hover:bg-secondary\",\r\n outline:\r\n \"bg-transparent text-primary border-primary hover:bg-primary hover:text-primary-foreground disabled:hover:bg-transparent disabled:hover:text-primary\",\r\n ghost:\r\n \"bg-transparent text-foreground border-transparent hover:bg-accent hover:text-accent-foreground disabled:hover:bg-transparent\",\r\n danger:\r\n \"bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90 disabled:hover:bg-destructive\",\r\n },\r\n size: {\r\n sm: \"h-8 px-3 text-sm\",\r\n md: \"h-10 px-4 text-sm\",\r\n lg: \"h-12 px-6 text-base\",\r\n },\r\n fullWidth: {\r\n true: \"w-full flex\",\r\n false: \"\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"primary\",\r\n size: \"md\",\r\n fullWidth: false,\r\n },\r\n }\r\n);\r\n\r\nexport interface ButtonProps\r\n extends ButtonHTMLAttributes<HTMLButtonElement>,\r\n VariantProps<typeof buttonVariants> {\r\n /** The content of the button */\r\n children: ReactNode;\r\n /** Whether the button is in a loading state */\r\n loading?: boolean;\r\n}\r\n\r\n/**\r\n * A customizable button component with multiple variants and sizes\r\n */\r\nexport function Button({\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 ...props\r\n}: ButtonProps) {\r\n return (\r\n <button\r\n className={cn(buttonVariants({ variant, size, fullWidth }), className)}\r\n disabled={disabled || loading}\r\n {...props}\r\n >\r\n {loading && (\r\n <span className=\"size-4 border-2 border-current border-r-transparent rounded-full animate-spin\" />\r\n )}\r\n <span className={cn(loading && \"invisible\")}>{children}</span>\r\n </button>\r\n );\r\n}\r\n"],"names":[],"mappings":";;;AAIA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,SACE;AAAA,QACF,OACE;AAAA,QACF,QACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAcO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAA,CAAW,GAAG,SAAS;AAAA,MACrE,UAAU,YAAY;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WACC,oBAAC,QAAA,EAAK,WAAU,gFAAA,CAAgF;AAAA,4BAEjG,QAAA,EAAK,WAAW,GAAG,WAAW,WAAW,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D;"}
@@ -4,8 +4,8 @@ import { useFormContext, useController } from "react-hook-form";
4
4
  import { cva } from "class-variance-authority";
5
5
  import { cn } from "../../utils/cn.js";
6
6
  import { FormConfigContext } from "./context.js";
7
- import { Checkbox as Checkbox$1 } from "../ui/checkbox.js";
8
- import { Label } from "../ui/label.js";
7
+ import { Checkbox as Checkbox$1 } from "../../primitives/checkbox.js";
8
+ import { Label } from "../../primitives/label.js";
9
9
  const checkboxSizeVariants = cva(
10
10
  "",
11
11
  {
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../../src/components/Form/Checkbox.tsx"],"sourcesContent":["import { 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 \"../ui/checkbox\";\r\nimport { Label } from \"../ui/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"],"names":["useRHFFormContext","ShadcnCheckbox"],"mappings":";;;;;;;;AAUA,MAAM,uBAAuB;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;AA4CA,SAAS,cAIP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,SAAS;AAAA;AAAA,EAET;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,cAAc;AAG9B,QAAM,oBAAoB,WAAW,iBAAiB;AACtD,QAAM,aAAyB,qBAAqB,CAAA;AAGpD,QAAM,aAAaA,eAAA;AACnB,QAAM,UAAU,mBAAmB,YAAY;AAG/C,YAAU,MAAM;AACd,QAAI,mBAAmB,yBAAyB;AAC9C,YAAM,QAA8B,CAAA;AAEpC,UAAI,aAAa,OAAW,OAAM,WAAW;AAC7C,UAAI,aAAa,OAAW,OAAM,WAAW;AAE7C,wBAAkB,wBAAwB;AAAA,QACxC;AAAA,QACA,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAED,aAAO,MAAM;AACX,0BAAkB,0BAA0B,IAAc;AAAA,MAC5D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,mBAAmB,MAAM,UAAU,QAAQ,CAAC;AAGhD,QAAM,EAAE,OAAO,WAAA,IAAe,cAAmC;AAAA,IAC/D;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,aAAa,WAAW,OAAO;AACrC,QAAM,eAAe,eAAe;AACpC,QAAM,WAAW,CAAC,CAAC;AAGnB,QAAM,gBAAgB,QAAQ,WAAW,QAAQ;AACjD,QAAM,oBAAoB,YAAY,WAAW;AAGjD,QAAM,mBAAmB,WAAW,UAAU;AAE9C,SACE,qBAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,IAAI;AAAA,UACJ,SAAS,MAAM,SAAS;AAAA,UACxB,iBAAiB,CAAC,YAAY,MAAM,SAAS,YAAY,IAAI;AAAA,UAC7D,QAAQ,MAAM;AAAA,UACd,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,oBACE,WACI,GAAG,OAAO,WACV,aACA,GAAG,OAAO,YACV;AAAA,UAEN,WAAW;AAAA,YACT,qBAAqB,EAAE,MAAM,eAAe;AAAA,YAC5C,qBAAqB,WAAW;AAAA,YAChC;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAGD,SACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAW,cAAc,EAAE,UAAU,CAAC,CAAC,UAAU,UAAU,mBAAmB;AAAA,UAE7E,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IAEC,aAAa,YACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAG,OAAO;AAAA,QACd,WAAU;AAAA,QACV,MAAK;AAAA,QAEJ,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAIJ,cAAc,CAAC,YACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAG,OAAO;AAAA,QACd,WAAU;AAAA,QAET,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;AAGO,MAAM,WAAW,WAAW,aAAa;AAO/C,SAAsB,cAAc;"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../../src/components/Form/Checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { Checkbox as ShadcnCheckbox } from \"../../primitives/checkbox\";\nimport { Label } from \"../../primitives/label\";\nimport type * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\n\nconst checkboxSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nconst labelVariants = cva(\n \"text-sm font-medium cursor-pointer select-none\",\n {\n variants: {\n required: {\n true: \"after:content-['*'] after:ml-0.5 after:text-destructive\",\n false: \"\",\n },\n disabled: {\n true: \"cursor-not-allowed opacity-50\",\n false: \"\",\n },\n },\n defaultVariants: {\n required: false,\n disabled: false,\n },\n }\n);\n\nexport interface CheckboxProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\n VariantProps<typeof checkboxSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the checkbox */\n label?: ReactNode;\n /** Helper text displayed below the checkbox */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Variant style */\n variant?: \"default\" | \"error\";\n \n // Validation props\n /** Field is required (must be checked) */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Checkbox component with form integration\n * \n * This is a wrapper around the shadcn/ui Checkbox primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" required />\n * <Checkbox name=\"newsletter\" label=\"Subscribe to newsletter\" />\n * ```\n */\nfunction CheckboxInner<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n {\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n className,\n disabled,\n id: providedId,\n control: externalControl,\n // Validation props\n required,\n validate,\n ...props\n }: CheckboxProps<TFieldValues, TName>,\n ref: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"boolean\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n \n // Determine variant based on error state\n const effectiveVariant = hasError ? \"error\" : variant;\n\n return (\n <div className=\"space-y-1.5\">\n <div className=\"flex items-center gap-2\">\n <ShadcnCheckbox\n {...props}\n ref={ref}\n id={inputId}\n checked={field.value ?? false}\n onCheckedChange={(checked) => field.onChange(checked === true)}\n onBlur={field.onBlur}\n disabled={effectiveDisabled}\n aria-invalid={hasError}\n aria-describedby={\n hasError\n ? `${inputId}-error`\n : helperText\n ? `${inputId}-helper`\n : undefined\n }\n className={cn(\n checkboxSizeVariants({ size: effectiveSize }),\n effectiveVariant === \"error\" && \"border-destructive\",\n className\n )}\n />\n \n {label && (\n <Label\n htmlFor={inputId}\n className={labelVariants({ required: !!required, disabled: effectiveDisabled })}\n >\n {label}\n </Label>\n )}\n </div>\n\n {showError && hasError && (\n <p\n id={`${inputId}-error`}\n className=\"text-sm text-destructive ml-7\"\n role=\"alert\"\n >\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p\n id={`${inputId}-helper`}\n className=\"text-sm text-muted-foreground ml-7\"\n >\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\n// Use forwardRef with generic support\nexport const Checkbox = forwardRef(CheckboxInner) as <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n props: CheckboxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>> }\n) => React.ReactElement;\n\n(Checkbox as React.FC).displayName = \"Checkbox\";\n"],"names":["useRHFFormContext","ShadcnCheckbox"],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { useState, useCallback } from "react";
2
+ import { useCallback, useMemo } from "react";
3
3
  import { useForm, FormProvider } from "react-hook-form";
4
4
  import { zodResolver } from "@hookform/resolvers/zod";
5
5
  import { z } from "zod";
@@ -20,38 +20,30 @@ function Form({
20
20
  }) {
21
21
  const mergedConfig = { ...defaultFormConfig, ...config };
22
22
  const {
23
- registerFieldValidation: baseRegister,
24
- unregisterFieldValidation: baseUnregister,
23
+ registerFieldValidation,
24
+ unregisterFieldValidation,
25
25
  getValidationSchema
26
26
  } = useFieldValidationRegistry();
27
- const [schemaVersion, setSchemaVersion] = useState(0);
28
- const registerFieldValidation = useCallback((field) => {
29
- baseRegister(field);
30
- setSchemaVersion((v) => v + 1);
31
- }, [baseRegister]);
32
- const unregisterFieldValidation = useCallback((name) => {
33
- baseUnregister(name);
34
- setSchemaVersion((v) => v + 1);
35
- }, [baseUnregister]);
36
- const buildResolver = useCallback(() => {
37
- if (customResolver) {
38
- return customResolver;
39
- }
40
- const fieldSchema = getValidationSchema();
41
- let finalSchema;
42
- if (baseSchema) {
27
+ const dynamicResolver = useCallback(
28
+ async (vals, context, options) => {
29
+ if (customResolver) {
30
+ return customResolver(vals, context, options);
31
+ }
32
+ const fieldSchema = getValidationSchema();
33
+ let finalSchema;
43
34
  if (baseSchema instanceof z.ZodObject) {
44
35
  finalSchema = baseSchema.merge(fieldSchema);
45
36
  } else {
46
- finalSchema = fieldSchema;
37
+ finalSchema = baseSchema ?? fieldSchema;
47
38
  }
48
- } else {
49
- finalSchema = fieldSchema;
50
- }
51
- return zodResolver(finalSchema);
52
- }, [baseSchema, customResolver, getValidationSchema, schemaVersion]);
39
+ return zodResolver(finalSchema)(vals, context, options);
40
+ },
41
+ // getValidationSchema reads a ref — always current, intentionally omitted.
42
+ // eslint-disable-next-line react-hooks/exhaustive-deps
43
+ [baseSchema, customResolver]
44
+ );
53
45
  const internalForm = useForm({
54
- resolver: buildResolver(),
46
+ resolver: dynamicResolver,
55
47
  defaultValues,
56
48
  values,
57
49
  mode,
@@ -67,20 +59,43 @@ function Form({
67
59
  form.handleSubmit(onSubmit, onError)(e);
68
60
  }
69
61
  };
70
- const contextValue = {
71
- form,
72
- registerFieldValidation,
73
- unregisterFieldValidation,
74
- getValidationSchema,
75
- triggerValidation,
76
- ...mergedConfig
77
- };
62
+ const contextValue = useMemo(
63
+ () => ({
64
+ form,
65
+ registerFieldValidation,
66
+ unregisterFieldValidation,
67
+ getValidationSchema,
68
+ triggerValidation,
69
+ showInlineErrors: mergedConfig.showInlineErrors,
70
+ validateOnBlur: mergedConfig.validateOnBlur,
71
+ validateOnChange: mergedConfig.validateOnChange,
72
+ size: mergedConfig.size,
73
+ layout: mergedConfig.layout,
74
+ labelWidth: mergedConfig.labelWidth,
75
+ disabled: mergedConfig.disabled,
76
+ colon: mergedConfig.colon
77
+ }),
78
+ [
79
+ form,
80
+ registerFieldValidation,
81
+ unregisterFieldValidation,
82
+ getValidationSchema,
83
+ triggerValidation,
84
+ mergedConfig.showInlineErrors,
85
+ mergedConfig.validateOnBlur,
86
+ mergedConfig.validateOnChange,
87
+ mergedConfig.size,
88
+ mergedConfig.layout,
89
+ mergedConfig.labelWidth,
90
+ mergedConfig.disabled,
91
+ mergedConfig.colon
92
+ ]
93
+ );
78
94
  return /* @__PURE__ */ jsx(FormConfigContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(
79
95
  "form",
80
96
  {
81
97
  ...formProps,
82
98
  onSubmit: handleSubmit,
83
- className: formProps.className,
84
99
  noValidate: true,
85
100
  children
86
101
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Form.js","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["import { useCallback, useState, type ReactNode } from \"react\";\r\nimport {\r\n useForm,\r\n FormProvider as RHFFormProvider,\r\n type UseFormReturn,\r\n type FieldValues,\r\n type UseFormProps,\r\n type SubmitHandler,\r\n type SubmitErrorHandler,\r\n type Resolver,\r\n type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n FormConfigContext, \r\n defaultFormConfig, \r\n useFieldValidationRegistry,\r\n type FormConfig, \r\n type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n /** Base Zod schema for validation (will be extended by field props) */\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n schema?: z.ZodType<TFieldValues, any, any>;\r\n /** Default values for the form */\r\n defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n /** Values to reset the form to */\r\n values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n /** Submit handler */\r\n onSubmit?: SubmitHandler<TFieldValues>;\r\n /** Error handler */\r\n onError?: SubmitErrorHandler<TFieldValues>;\r\n /** Form configuration */\r\n config?: FormConfig;\r\n /** Children */\r\n children?: ReactNode;\r\n /** External form instance (for controlled forms) */\r\n form?: UseFormReturn<TFieldValues>;\r\n /** Validation mode */\r\n mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n /** Revalidation mode */\r\n reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n /** Custom resolver (overrides schema) */\r\n resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n * <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n * <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n * <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n * username: z.string(),\r\n * email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n * <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n * <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TContext = unknown\r\n>({\r\n schema: baseSchema,\r\n defaultValues,\r\n values,\r\n onSubmit,\r\n onError,\r\n config,\r\n children,\r\n form: externalForm,\r\n mode = \"onBlur\",\r\n reValidateMode = \"onChange\",\r\n resolver: customResolver,\r\n ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n const mergedConfig = { ...defaultFormConfig, ...config };\r\n \r\n // Field validation registry\r\n const {\r\n registerFieldValidation: baseRegister,\r\n unregisterFieldValidation: baseUnregister,\r\n getValidationSchema,\r\n } = useFieldValidationRegistry();\r\n\r\n // Track schema version for re-renders\r\n const [schemaVersion, setSchemaVersion] = useState(0);\r\n\r\n // Wrap register to trigger re-render\r\n const registerFieldValidation = useCallback((field: Parameters<typeof baseRegister>[0]) => {\r\n baseRegister(field);\r\n setSchemaVersion(v => v + 1);\r\n }, [baseRegister]);\r\n\r\n // Wrap unregister to trigger re-render\r\n const unregisterFieldValidation = useCallback((name: string) => {\r\n baseUnregister(name);\r\n setSchemaVersion(v => v + 1);\r\n }, [baseUnregister]);\r\n\r\n // Build dynamic resolver that combines base schema with field validations\r\n const buildResolver = useCallback((): Resolver<TFieldValues> | undefined => {\r\n if (customResolver) {\r\n return customResolver;\r\n }\r\n\r\n // Get field-based schema\r\n const fieldSchema = getValidationSchema();\r\n \r\n // Merge with base schema if provided\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n let finalSchema: z.ZodType<any, any, any>;\r\n \r\n if (baseSchema) {\r\n // Merge base schema with field schema\r\n // Field schema takes precedence for overlapping fields\r\n if (baseSchema instanceof z.ZodObject) {\r\n finalSchema = baseSchema.merge(fieldSchema);\r\n } else {\r\n finalSchema = fieldSchema;\r\n }\r\n } else {\r\n finalSchema = fieldSchema;\r\n }\r\n\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n return zodResolver(finalSchema) as any;\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [baseSchema, customResolver, getValidationSchema, schemaVersion]);\r\n\r\n // Create internal form\r\n const internalForm = useForm<TFieldValues>({\r\n resolver: buildResolver(),\r\n defaultValues,\r\n values,\r\n mode,\r\n reValidateMode,\r\n });\r\n\r\n const form = externalForm ?? internalForm;\r\n\r\n // Trigger validation for a specific field\r\n const triggerValidation = useCallback(async (name: string) => {\r\n return form.trigger(name as Path<TFieldValues>);\r\n }, [form]);\r\n\r\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n e.preventDefault();\r\n if (onSubmit) {\r\n form.handleSubmit(onSubmit, onError)(e);\r\n }\r\n };\r\n\r\n const contextValue: FormContextValue<TFieldValues> = {\r\n form,\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n triggerValidation,\r\n ...mergedConfig,\r\n };\r\n\r\n return (\r\n <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n <RHFFormProvider {...form}>\r\n <form\r\n {...formProps}\r\n onSubmit={handleSubmit}\r\n className={formProps.className}\r\n noValidate\r\n >\r\n {children}\r\n </form>\r\n </RHFFormProvider>\r\n </FormConfigContext.Provider>\r\n );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"names":["RHFFormProvider"],"mappings":";;;;;;AAgFO,SAAS,KAGd;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,GAAG;AACL,GAAsC;AACpC,QAAM,eAAe,EAAE,GAAG,mBAAmB,GAAG,OAAA;AAGhD,QAAM;AAAA,IACJ,yBAAyB;AAAA,IACzB,2BAA2B;AAAA,IAC3B;AAAA,EAAA,IACE,2BAAA;AAGJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AAGpD,QAAM,0BAA0B,YAAY,CAAC,UAA8C;AACzF,iBAAa,KAAK;AAClB,qBAAiB,CAAA,MAAK,IAAI,CAAC;AAAA,EAC7B,GAAG,CAAC,YAAY,CAAC;AAGjB,QAAM,4BAA4B,YAAY,CAAC,SAAiB;AAC9D,mBAAe,IAAI;AACnB,qBAAiB,CAAA,MAAK,IAAI,CAAC;AAAA,EAC7B,GAAG,CAAC,cAAc,CAAC;AAGnB,QAAM,gBAAgB,YAAY,MAA0C;AAC1E,QAAI,gBAAgB;AAClB,aAAO;AAAA,IACT;AAGA,UAAM,cAAc,oBAAA;AAIpB,QAAI;AAEJ,QAAI,YAAY;AAGd,UAAI,sBAAsB,EAAE,WAAW;AACrC,sBAAc,WAAW,MAAM,WAAW;AAAA,MAC5C,OAAO;AACL,sBAAc;AAAA,MAChB;AAAA,IACF,OAAO;AACL,oBAAc;AAAA,IAChB;AAGA,WAAO,YAAY,WAAW;AAAA,EAEhC,GAAG,CAAC,YAAY,gBAAgB,qBAAqB,aAAa,CAAC;AAGnE,QAAM,eAAe,QAAsB;AAAA,IACzC,UAAU,cAAA;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,OAAO,gBAAgB;AAG7B,QAAM,oBAAoB,YAAY,OAAO,SAAiB;AAC5D,WAAO,KAAK,QAAQ,IAA0B;AAAA,EAChD,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,eAAe,CAAC,MAAwC;AAC5D,MAAE,eAAA;AACF,QAAI,UAAU;AACZ,WAAK,aAAa,UAAU,OAAO,EAAE,CAAC;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,eAA+C;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA;AAGL,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAA,oBAACA,cAAA,EAAiB,GAAG,MACnB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,WAAW,UAAU;AAAA,MACrB,YAAU;AAAA,MAET;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAEA,KAAK,cAAc;"}
1
+ {"version":3,"file":"Form.js","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["import { useCallback, useMemo, type ReactNode } from \"react\";\r\nimport {\r\n useForm,\r\n FormProvider as RHFFormProvider,\r\n type UseFormReturn,\r\n type FieldValues,\r\n type UseFormProps,\r\n type SubmitHandler,\r\n type SubmitErrorHandler,\r\n type Resolver,\r\n type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n FormConfigContext, \r\n defaultFormConfig, \r\n useFieldValidationRegistry,\r\n type FormConfig, \r\n type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n /** Base Zod schema for validation (will be extended by field props) */\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n schema?: z.ZodType<TFieldValues, any, any>;\r\n /** Default values for the form */\r\n defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n /** Values to reset the form to */\r\n values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n /** Submit handler */\r\n onSubmit?: SubmitHandler<TFieldValues>;\r\n /** Error handler */\r\n onError?: SubmitErrorHandler<TFieldValues>;\r\n /** Form configuration */\r\n config?: FormConfig;\r\n /** Children */\r\n children?: ReactNode;\r\n /** External form instance (for controlled forms) */\r\n form?: UseFormReturn<TFieldValues>;\r\n /** Validation mode */\r\n mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n /** Revalidation mode */\r\n reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n /** Custom resolver (overrides schema) */\r\n resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n * <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n * <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n * <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n * username: z.string(),\r\n * email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n * <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n * <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TContext = unknown\r\n>({\r\n schema: baseSchema,\r\n defaultValues,\r\n values,\r\n onSubmit,\r\n onError,\r\n config,\r\n children,\r\n form: externalForm,\r\n mode = \"onBlur\",\r\n reValidateMode = \"onChange\",\r\n resolver: customResolver,\r\n ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n const mergedConfig = { ...defaultFormConfig, ...config };\r\n\r\n const {\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n } = useFieldValidationRegistry();\r\n\r\n // Stable resolver that reads from fieldsRef at validation time no re-renders\r\n // needed on field registration, and no race condition with useEffect timing.\r\n const dynamicResolver = useCallback<Resolver<TFieldValues>>(\r\n async (vals, context, options) => {\r\n if (customResolver) {\r\n return customResolver(vals, context, options);\r\n }\r\n const fieldSchema = getValidationSchema();\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n let finalSchema: z.ZodType<any, any, any>;\r\n if (baseSchema instanceof z.ZodObject) {\r\n finalSchema = baseSchema.merge(fieldSchema);\r\n } else {\r\n finalSchema = baseSchema ?? fieldSchema;\r\n }\r\n return zodResolver(finalSchema)(vals, context, options);\r\n },\r\n // getValidationSchema reads a ref — always current, intentionally omitted.\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [baseSchema, customResolver]\r\n );\r\n\r\n const internalForm = useForm<TFieldValues>({\r\n resolver: dynamicResolver,\r\n defaultValues,\r\n values,\r\n mode,\r\n reValidateMode,\r\n });\r\n\r\n const form = externalForm ?? internalForm;\r\n\r\n // Trigger validation for a specific field\r\n const triggerValidation = useCallback(async (name: string) => {\r\n return form.trigger(name as Path<TFieldValues>);\r\n }, [form]);\r\n\r\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n e.preventDefault();\r\n if (onSubmit) {\r\n form.handleSubmit(onSubmit, onError)(e);\r\n }\r\n };\r\n\r\n const contextValue = useMemo<FormContextValue<TFieldValues>>(\r\n () => ({\r\n form,\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n triggerValidation,\r\n showInlineErrors: mergedConfig.showInlineErrors,\r\n validateOnBlur: mergedConfig.validateOnBlur,\r\n validateOnChange: mergedConfig.validateOnChange,\r\n size: mergedConfig.size,\r\n layout: mergedConfig.layout,\r\n labelWidth: mergedConfig.labelWidth,\r\n disabled: mergedConfig.disabled,\r\n colon: mergedConfig.colon,\r\n }),\r\n [\r\n form,\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n triggerValidation,\r\n mergedConfig.showInlineErrors,\r\n mergedConfig.validateOnBlur,\r\n mergedConfig.validateOnChange,\r\n mergedConfig.size,\r\n mergedConfig.layout,\r\n mergedConfig.labelWidth,\r\n mergedConfig.disabled,\r\n mergedConfig.colon,\r\n ]\r\n );\r\n\r\n return (\r\n <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n <RHFFormProvider {...form}>\r\n <form\r\n {...formProps}\r\n onSubmit={handleSubmit}\r\n noValidate\r\n >\r\n {children}\r\n </form>\r\n </RHFFormProvider>\r\n </FormConfigContext.Provider>\r\n );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"names":["RHFFormProvider"],"mappings":";;;;;;AAgFO,SAAS,KAGd;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,GAAG;AACL,GAAsC;AACpC,QAAM,eAAe,EAAE,GAAG,mBAAmB,GAAG,OAAA;AAEhD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,2BAAA;AAIJ,QAAM,kBAAkB;AAAA,IACtB,OAAO,MAAM,SAAS,YAAY;AAChC,UAAI,gBAAgB;AAClB,eAAO,eAAe,MAAM,SAAS,OAAO;AAAA,MAC9C;AACA,YAAM,cAAc,oBAAA;AAEpB,UAAI;AACJ,UAAI,sBAAsB,EAAE,WAAW;AACrC,sBAAc,WAAW,MAAM,WAAW;AAAA,MAC5C,OAAO;AACL,sBAAc,cAAc;AAAA,MAC9B;AACA,aAAO,YAAY,WAAW,EAAE,MAAM,SAAS,OAAO;AAAA,IACxD;AAAA;AAAA;AAAA,IAGA,CAAC,YAAY,cAAc;AAAA,EAAA;AAG7B,QAAM,eAAe,QAAsB;AAAA,IACzC,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,OAAO,gBAAgB;AAG7B,QAAM,oBAAoB,YAAY,OAAO,SAAiB;AAC5D,WAAO,KAAK,QAAQ,IAA0B;AAAA,EAChD,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,eAAe,CAAC,MAAwC;AAC5D,MAAE,eAAA;AACF,QAAI,UAAU;AACZ,WAAK,aAAa,UAAU,OAAO,EAAE,CAAC;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB,aAAa;AAAA,MAC/B,gBAAgB,aAAa;AAAA,MAC7B,kBAAkB,aAAa;AAAA,MAC/B,MAAM,aAAa;AAAA,MACnB,QAAQ,aAAa;AAAA,MACrB,YAAY,aAAa;AAAA,MACzB,UAAU,aAAa;AAAA,MACvB,OAAO,aAAa;AAAA,IAAA;AAAA,IAEtB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,EACf;AAGF,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAA,oBAACA,cAAA,EAAiB,GAAG,MACnB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,YAAU;AAAA,MAET;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAEA,KAAK,cAAc;"}
@@ -4,8 +4,8 @@ import { useFormContext, useController } from "react-hook-form";
4
4
  import { cva } from "class-variance-authority";
5
5
  import { cn } from "../../utils/cn.js";
6
6
  import { FormConfigContext } from "./context.js";
7
- import { RadioGroup as RadioGroup$1, RadioGroupItem } from "../ui/radio-group.js";
8
- import { Label } from "../ui/label.js";
7
+ import { RadioGroup as RadioGroup$1, RadioGroupItem } from "../../primitives/radio-group.js";
8
+ import { Label } from "../../primitives/label.js";
9
9
  const radioSizeVariants = cva(
10
10
  "",
11
11
  {
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.js","sources":["../../../src/components/Form/Radio.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, createContext, 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 { RadioGroup as ShadcnRadioGroup, RadioGroupItem as ShadcnRadioGroupItem } from \"../ui/radio-group\";\r\nimport { Label } from \"../ui/label\";\r\nimport type * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\r\n\r\nconst radioSizeVariants = 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 disabled: {\r\n true: \"cursor-not-allowed opacity-50\",\r\n false: \"\",\r\n },\r\n },\r\n defaultVariants: {\r\n disabled: false,\r\n },\r\n }\r\n);\r\n\r\n// Radio Group Context\r\ninterface RadioGroupContextValue {\r\n name: string;\r\n value: string | number | undefined;\r\n onChange: (value: string | number) => void;\r\n disabled?: boolean;\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n}\r\n\r\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\r\n\r\nexport interface RadioOption {\r\n label: ReactNode;\r\n value: string | number;\r\n disabled?: boolean;\r\n}\r\n\r\nexport interface RadioGroupProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof radioSizeVariants> {\r\n /** Field name - required for form integration */\r\n name: TName;\r\n /** Label text for the radio group */\r\n label?: string;\r\n /** Helper text displayed below the radio group */\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 /** Options for the radio group */\r\n options?: RadioOption[];\r\n /** Layout direction */\r\n direction?: \"horizontal\" | \"vertical\";\r\n /** External control (for use outside Form) */\r\n control?: Control<TFieldValues>;\r\n /** Children (alternative to options prop) */\r\n children?: ReactNode;\r\n /** Disabled state */\r\n disabled?: boolean;\r\n /** Additional class name */\r\n className?: string;\r\n /** Variant style */\r\n variant?: \"default\" | \"error\";\r\n \r\n // Validation props\r\n /** Field is required */\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 * RadioGroup component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui RadioGroup 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 * <RadioGroup \r\n * name=\"gender\" \r\n * label=\"Gender\"\r\n * required\r\n * options={[\r\n * { label: \"Male\", value: \"male\" },\r\n * { label: \"Female\", value: \"female\" },\r\n * { label: \"Other\", value: \"other\" },\r\n * ]} \r\n * />\r\n * ```\r\n */\r\nexport function RadioGroup<\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 options = [],\r\n direction = \"vertical\",\r\n control: externalControl,\r\n children,\r\n disabled,\r\n className,\r\n // Validation props\r\n required,\r\n validate,\r\n}: RadioGroupProps<TFieldValues, TName>) {\r\n const generatedId = useId();\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: \"string\",\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 const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n const contextValue: RadioGroupContextValue = {\r\n name: name as string,\r\n value: field.value,\r\n onChange: field.onChange,\r\n disabled: effectiveDisabled,\r\n size: effectiveSize,\r\n };\r\n\r\n return (\r\n <div className={cn(\"space-y-2\", className)}>\r\n {label && (\r\n <Label className={cn(\r\n \"block\",\r\n required && \"after:content-['*'] after:ml-0.5 after:text-destructive\"\r\n )}>\r\n {label}\r\n {formConfig.colon && \":\"}\r\n </Label>\r\n )}\r\n \r\n <RadioGroupContext.Provider value={contextValue}>\r\n <ShadcnRadioGroup\r\n value={field.value?.toString()}\r\n onValueChange={(value) => field.onChange(value)}\r\n disabled={effectiveDisabled}\r\n aria-labelledby={label ? `${generatedId}-label` : undefined}\r\n className={cn(\r\n direction === \"horizontal\" && \"flex flex-row gap-4\",\r\n direction === \"vertical\" && \"flex flex-col gap-2\"\r\n )}\r\n >\r\n {children ?? options.map((option) => (\r\n <RadioItem\r\n key={option.value}\r\n value={option.value}\r\n disabled={option.disabled}\r\n size={effectiveSize}\r\n variant={effectiveVariant}\r\n >\r\n {option.label}\r\n </RadioItem>\r\n ))}\r\n </ShadcnRadioGroup>\r\n </RadioGroupContext.Provider>\r\n\r\n {showError && hasError && (\r\n <p className=\"text-sm text-destructive\" role=\"alert\">\r\n {errorMessage}\r\n </p>\r\n )}\r\n \r\n {helperText && !hasError && (\r\n <p className=\"text-sm text-muted-foreground\">\r\n {helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nRadioGroup.displayName = \"RadioGroup\";\r\n\r\nexport interface RadioItemProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"value\">,\r\n VariantProps<typeof radioSizeVariants> {\r\n /** Value for this radio option */\r\n value: string | number;\r\n /** Label for this radio option */\r\n children?: ReactNode;\r\n /** Variant style */\r\n variant?: \"default\" | \"error\";\r\n}\r\n\r\n/**\r\n * RadioItem component - must be used within RadioGroup\r\n * \r\n * This is a wrapper around the shadcn/ui RadioGroupItem primitive\r\n */\r\nfunction RadioItemInner(\r\n {\r\n value,\r\n children,\r\n size,\r\n variant,\r\n className,\r\n disabled,\r\n id: providedId,\r\n ...props\r\n }: RadioItemProps,\r\n ref: React.ForwardedRef<React.ElementRef<typeof RadioGroupPrimitive.Item>>\r\n) {\r\n const generatedId = useId();\r\n const inputId = providedId ?? generatedId;\r\n \r\n const groupContext = useContext(RadioGroupContext);\r\n \r\n const effectiveSize = size ?? groupContext?.size ?? \"md\";\r\n const effectiveDisabled = disabled ?? groupContext?.disabled;\r\n\r\n return (\r\n <div className=\"flex items-center gap-2\">\r\n <ShadcnRadioGroupItem\r\n {...props}\r\n ref={ref}\r\n id={inputId}\r\n value={value.toString()}\r\n disabled={effectiveDisabled}\r\n className={cn(\r\n radioSizeVariants({ size: effectiveSize }),\r\n variant === \"error\" && \"border-destructive\",\r\n className\r\n )}\r\n />\r\n \r\n {children && (\r\n <Label\r\n htmlFor={inputId}\r\n className={labelVariants({ disabled: effectiveDisabled })}\r\n >\r\n {children}\r\n </Label>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nexport const RadioItem = forwardRef(RadioItemInner);\r\nRadioItem.displayName = \"RadioItem\";\r\n"],"names":["useRHFFormContext","ShadcnRadioGroup","ShadcnRadioGroupItem"],"mappings":"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"}
1
+ {"version":3,"file":"Radio.js","sources":["../../../src/components/Form/Radio.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, createContext, useEffect } from \"react\";\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { RadioGroup as ShadcnRadioGroup, RadioGroupItem as ShadcnRadioGroupItem } from \"../../primitives/radio-group\";\nimport { Label } from \"../../primitives/label\";\nimport type * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\n\nconst radioSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nconst labelVariants = cva(\n \"text-sm font-medium cursor-pointer select-none\",\n {\n variants: {\n disabled: {\n true: \"cursor-not-allowed opacity-50\",\n false: \"\",\n },\n },\n defaultVariants: {\n disabled: false,\n },\n }\n);\n\n// Radio Group Context\ninterface RadioGroupContextValue {\n name: string;\n value: string | number | undefined;\n onChange: (value: string | number) => void;\n disabled?: boolean;\n size?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport interface RadioOption {\n label: ReactNode;\n value: string | number;\n disabled?: boolean;\n}\n\nexport interface RadioGroupProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends VariantProps<typeof radioSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the radio group */\n label?: string;\n /** Helper text displayed below the radio group */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** Options for the radio group */\n options?: RadioOption[];\n /** Layout direction */\n direction?: \"horizontal\" | \"vertical\";\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Children (alternative to options prop) */\n children?: ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Additional class name */\n className?: string;\n /** Variant style */\n variant?: \"default\" | \"error\";\n \n // Validation props\n /** Field is required */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * RadioGroup component with form integration\n * \n * This is a wrapper around the shadcn/ui RadioGroup primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <RadioGroup \n * name=\"gender\" \n * label=\"Gender\"\n * required\n * options={[\n * { label: \"Male\", value: \"male\" },\n * { label: \"Female\", value: \"female\" },\n * { label: \"Other\", value: \"other\" },\n * ]} \n * />\n * ```\n */\nexport function RadioGroup<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n options = [],\n direction = \"vertical\",\n control: externalControl,\n children,\n disabled,\n className,\n // Validation props\n required,\n validate,\n}: RadioGroupProps<TFieldValues, TName>) {\n const generatedId = useId();\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"string\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n const effectiveVariant = hasError ? \"error\" : variant;\n\n const contextValue: RadioGroupContextValue = {\n name: name as string,\n value: field.value,\n onChange: field.onChange,\n disabled: effectiveDisabled,\n size: effectiveSize,\n };\n\n return (\n <div className={cn(\"space-y-2\", className)}>\n {label && (\n <Label className={cn(\n \"block\",\n required && \"after:content-['*'] after:ml-0.5 after:text-destructive\"\n )}>\n {label}\n {formConfig.colon && \":\"}\n </Label>\n )}\n \n <RadioGroupContext.Provider value={contextValue}>\n <ShadcnRadioGroup\n value={field.value?.toString()}\n onValueChange={(value) => field.onChange(value)}\n disabled={effectiveDisabled}\n aria-labelledby={label ? `${generatedId}-label` : undefined}\n className={cn(\n direction === \"horizontal\" && \"flex flex-row gap-4\",\n direction === \"vertical\" && \"flex flex-col gap-2\"\n )}\n >\n {children ?? options.map((option) => (\n <RadioItem\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n size={effectiveSize}\n variant={effectiveVariant}\n >\n {option.label}\n </RadioItem>\n ))}\n </ShadcnRadioGroup>\n </RadioGroupContext.Provider>\n\n {showError && hasError && (\n <p className=\"text-sm text-destructive\" role=\"alert\">\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p className=\"text-sm text-muted-foreground\">\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\nRadioGroup.displayName = \"RadioGroup\";\n\nexport interface RadioItemProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"value\">,\n VariantProps<typeof radioSizeVariants> {\n /** Value for this radio option */\n value: string | number;\n /** Label for this radio option */\n children?: ReactNode;\n /** Variant style */\n variant?: \"default\" | \"error\";\n}\n\n/**\n * RadioItem component - must be used within RadioGroup\n * \n * This is a wrapper around the shadcn/ui RadioGroupItem primitive\n */\nfunction RadioItemInner(\n {\n value,\n children,\n size,\n variant,\n className,\n disabled,\n id: providedId,\n ...props\n }: RadioItemProps,\n ref: React.ForwardedRef<React.ElementRef<typeof RadioGroupPrimitive.Item>>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n const groupContext = useContext(RadioGroupContext);\n \n const effectiveSize = size ?? groupContext?.size ?? \"md\";\n const effectiveDisabled = disabled ?? groupContext?.disabled;\n\n return (\n <div className=\"flex items-center gap-2\">\n <ShadcnRadioGroupItem\n {...props}\n ref={ref}\n id={inputId}\n value={value.toString()}\n disabled={effectiveDisabled}\n className={cn(\n radioSizeVariants({ size: effectiveSize }),\n variant === \"error\" && \"border-destructive\",\n className\n )}\n />\n \n {children && (\n <Label\n htmlFor={inputId}\n className={labelVariants({ disabled: effectiveDisabled })}\n >\n {children}\n </Label>\n )}\n </div>\n );\n}\n\nexport const RadioItem = forwardRef(RadioItemInner);\nRadioItem.displayName = \"RadioItem\";\n"],"names":["useRHFFormContext","ShadcnRadioGroup","ShadcnRadioGroupItem"],"mappings":"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"}
@@ -3,9 +3,10 @@ import { useId, useContext, useEffect } from "react";
3
3
  import { useFormContext, useController } from "react-hook-form";
4
4
  import { cva } from "class-variance-authority";
5
5
  import { cn } from "../../utils/cn.js";
6
+ import { labelVariants } from "./variants.js";
6
7
  import { FormConfigContext } from "./context.js";
7
- import { Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../ui/select.js";
8
- import { Label } from "../ui/label.js";
8
+ import { Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../primitives/select.js";
9
+ import { Label } from "../../primitives/label.js";
9
10
  const selectSizeVariants = cva(
10
11
  "",
11
12
  {
@@ -21,20 +22,6 @@ const selectSizeVariants = cva(
21
22
  }
22
23
  }
23
24
  );
24
- const labelVariants = cva(
25
- "block text-sm font-medium mb-1.5",
26
- {
27
- variants: {
28
- required: {
29
- true: "after:content-['*'] after:ml-0.5 after:text-destructive",
30
- false: ""
31
- }
32
- },
33
- defaultVariants: {
34
- required: false
35
- }
36
- }
37
- );
38
25
  function Select({
39
26
  name,
40
27
  label,