@skybin-tech/nebula-ui 0.0.1

package/dist/components/Form/Radio.js

@@ -0,0 +1,178 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useContext, useEffect, forwardRef, createContext } from "react";
+import { useFormContext, useController } from "react-hook-form";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn } from "../../utils/cn.js";
+import { FormConfigContext } from "./context.js";
+import { RadioGroup as RadioGroup$1, RadioGroupItem } from "../ui/radio-group.js";
+import { Label } from "../ui/label.js";
+const radioSizeVariants = cva(
+  "",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const labelVariants = cva(
+  "text-sm font-medium cursor-pointer select-none",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+const RadioGroupContext = createContext(null);
+function RadioGroup({
+  name,
+  label,
+  helperText,
+  showError = true,
+  error: customError,
+  size,
+  variant,
+  options = [],
+  direction = "vertical",
+  control: externalControl,
+  children,
+  disabled,
+  className,
+  // Validation props
+  required,
+  validate
+}) {
+  const generatedId = useId();
+  const formConfigContext = useContext(FormConfigContext);
+  const formConfig = formConfigContext ?? {};
+  const rhfContext = useFormContext();
+  const control = externalControl ?? rhfContext?.control;
+  useEffect(() => {
+    if (formConfigContext?.registerFieldValidation) {
+      const rules = {};
+      if (required !== void 0) rules.required = required;
+      if (validate !== void 0) rules.validate = validate;
+      formConfigContext.registerFieldValidation({
+        name,
+        type: "string",
+        rules
+      });
+      return () => {
+        formConfigContext.unregisterFieldValidation(name);
+      };
+    }
+  }, [formConfigContext, name, required, validate]);
+  const { field, fieldState } = useController({
+    name,
+    control
+  });
+  const fieldError = fieldState.error?.message;
+  const errorMessage = customError ?? fieldError;
+  const hasError = !!errorMessage;
+  const effectiveSize = size ?? formConfig.size ?? "md";
+  const effectiveDisabled = disabled ?? formConfig.disabled;
+  const effectiveVariant = hasError ? "error" : variant;
+  const contextValue = {
+    name,
+    value: field.value,
+    onChange: field.onChange,
+    disabled: effectiveDisabled,
+    size: effectiveSize
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    label && /* @__PURE__ */ jsxs(Label, { className: cn(
+      "block",
+      required && "after:content-['*'] after:ml-0.5 after:text-destructive"
+    ), children: [
+      label,
+      formConfig.colon && ":"
+    ] }),
+    /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      RadioGroup$1,
+      {
+        value: field.value?.toString(),
+        onValueChange: (value) => field.onChange(value),
+        disabled: effectiveDisabled,
+        "aria-labelledby": label ? `${generatedId}-label` : void 0,
+        className: cn(
+          direction === "horizontal" && "flex flex-row gap-4",
+          direction === "vertical" && "flex flex-col gap-2"
+        ),
+        children: children ?? options.map((option) => /* @__PURE__ */ jsx(
+          RadioItem,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            size: effectiveSize,
+            variant: effectiveVariant,
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    ) }),
+    showError && hasError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: errorMessage }),
+    helperText && !hasError && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: helperText })
+  ] });
+}
+RadioGroup.displayName = "RadioGroup";
+function RadioItemInner({
+  value,
+  children,
+  size,
+  variant,
+  className,
+  disabled,
+  id: providedId,
+  ...props
+}, ref) {
+  const generatedId = useId();
+  const inputId = providedId ?? generatedId;
+  const groupContext = useContext(RadioGroupContext);
+  const effectiveSize = size ?? groupContext?.size ?? "md";
+  const effectiveDisabled = disabled ?? groupContext?.disabled;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      RadioGroupItem,
+      {
+        ...props,
+        ref,
+        id: inputId,
+        value: value.toString(),
+        disabled: effectiveDisabled,
+        className: cn(
+          radioSizeVariants({ size: effectiveSize }),
+          variant === "error" && "border-destructive",
+          className
+        )
+      }
+    ),
+    children && /* @__PURE__ */ jsx(
+      Label,
+      {
+        htmlFor: inputId,
+        className: labelVariants({ disabled: effectiveDisabled }),
+        children
+      }
+    )
+  ] });
+}
+const RadioItem = forwardRef(RadioItemInner);
+RadioItem.displayName = "RadioItem";
+export {
+  RadioGroup,
+  RadioItem
+};
+//# sourceMappingURL=Radio.js.map

package/dist/components/Form/Radio.js.map

@@ -0,0 +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":";;;;;;;;AAUA,MAAM,oBAAoB;AAAA,EACxB;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,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;AAWA,MAAM,oBAAoB,cAA6C,IAAI;AAmEpE,SAAS,WAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,UAAU,CAAA;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF,GAAyC;AACvC,QAAM,cAAc,MAAA;AAGpB,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;AACjD,QAAM,mBAAmB,WAAW,UAAU;AAE9C,QAAM,eAAuC;AAAA,IAC3C;AAAA,IACA,OAAO,MAAM;AAAA,IACb,UAAU,MAAM;AAAA,IAChB,UAAU;AAAA,IACV,MAAM;AAAA,EAAA;AAGR,8BACG,OAAA,EAAI,WAAW,GAAG,aAAa,SAAS,GACtC,UAAA;AAAA,IAAA,SACC,qBAAC,SAAM,WAAW;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA,GAEX,UAAA;AAAA,MAAA;AAAA,MACA,WAAW,SAAS;AAAA,IAAA,GACvB;AAAA,IAGF,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAO,MAAM,OAAO,SAAA;AAAA,QACpB,eAAe,CAAC,UAAU,MAAM,SAAS,KAAK;AAAA,QAC9C,UAAU;AAAA,QACV,mBAAiB,QAAQ,GAAG,WAAW,WAAW;AAAA,QAClD,WAAW;AAAA,UACT,cAAc,gBAAgB;AAAA,UAC9B,cAAc,cAAc;AAAA,QAAA;AAAA,QAG7B,UAAA,YAAY,QAAQ,IAAI,CAAC,WACxB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,MAAM;AAAA,YACN,SAAS;AAAA,YAER,UAAA,OAAO;AAAA,UAAA;AAAA,UANH,OAAO;AAAA,QAAA,CAQf;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IAEC,aAAa,YACZ,oBAAC,KAAA,EAAE,WAAU,4BAA2B,MAAK,SAC1C,UAAA,aAAA,CACH;AAAA,IAGD,cAAc,CAAC,gCACb,KAAA,EAAE,WAAU,iCACV,UAAA,WAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEA,WAAW,cAAc;AAiBzB,SAAS,eACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,cAAc;AAE9B,QAAM,eAAe,WAAW,iBAAiB;AAEjD,QAAM,gBAAgB,QAAQ,cAAc,QAAQ;AACpD,QAAM,oBAAoB,YAAY,cAAc;AAEpD,SACE,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,IAAI;AAAA,QACJ,OAAO,MAAM,SAAA;AAAA,QACb,UAAU;AAAA,QACV,WAAW;AAAA,UACT,kBAAkB,EAAE,MAAM,eAAe;AAAA,UACzC,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAGD,YACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW,cAAc,EAAE,UAAU,mBAAmB;AAAA,QAEvD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;AAEO,MAAM,YAAY,WAAW,cAAc;AAClD,UAAU,cAAc;"}

package/dist/components/Form/Select.d.ts

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react';
+import { FieldValues, FieldPath, Control } from 'react-hook-form';
+import { VariantProps } from 'class-variance-authority';
+declare const selectSizeVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SelectOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+export interface SelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends VariantProps<typeof selectSizeVariants> {
+    /** Field name - required for form integration */
+    name: TName;
+    /** Label text for the select */
+    label?: string;
+    /** Helper text displayed below the select */
+    helperText?: string;
+    /** Whether to show the error message */
+    showError?: boolean;
+    /** Custom error message (overrides form error) */
+    error?: string;
+    /** Whether the select should take full width */
+    fullWidth?: boolean;
+    /** Options for the select */
+    options?: SelectOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Allow clear selection */
+    allowClear?: boolean;
+    /** External control (for use outside Form) */
+    control?: Control<TFieldValues>;
+    /** Children (alternative to options prop) */
+    children?: ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** ID for the select */
+    id?: string;
+    /** Variant style */
+    variant?: "default" | "error" | "success";
+    /** Field is required */
+    required?: boolean | string;
+    /** Custom validation function */
+    validate?: (value: unknown) => boolean | string | Promise<boolean | string>;
+}
+/**
+ * Select component with form integration
+ *
+ * This is a wrapper around the shadcn/ui Select primitive that adds:
+ * - Form integration with react-hook-form
+ * - Automatic validation registration
+ * - Label, helper text, and error message support
+ *
+ * @example
+ * ```tsx
+ * // Inside a Form component
+ * <Select
+ *   name="country"
+ *   label="Country"
+ *   required
+ *   options={[
+ *     { label: "USA", value: "us" },
+ *     { label: "Canada", value: "ca" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Select<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, helperText, showError, error: customError, size, variant, fullWidth, className, disabled, options, placeholder, allowClear, id: providedId, control: externalControl, children, required, validate, }: SelectProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Select {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/Form/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAsD,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAYlE,QAAA,MAAM,kBAAkB;;8EAcvB,CAAC;AAiBF,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW,CAC1B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,YAAY,CAAC,OAAO,kBAAkB,CAAC;IAC/C,iDAAiD;IACjD,IAAI,EAAE,KAAK,CAAC;IACZ,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAG1C,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;CAC7E;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,MAAM,CACpB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAgB,EAChB,KAAK,EAAE,WAAW,EAClB,IAAI,EACJ,OAAO,EACP,SAAgB,EAChB,SAAS,EACT,QAAQ,EACR,OAAY,EACZ,WAAW,EACX,UAAU,EACV,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,eAAe,EACxB,QAAQ,EAER,QAAQ,EACR,QAAQ,GACT,EAAE,WAAW,CAAC,YAAY,EAAE,KAAK,CAAC,2CAkIlC;yBAzJe,MAAM"}

package/dist/components/Form/Select.js

@@ -0,0 +1,168 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useContext, useEffect } from "react";
+import { useFormContext, useController } from "react-hook-form";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn } from "../../utils/cn.js";
+import { FormConfigContext } from "./context.js";
+import { Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../ui/select.js";
+import { Label } from "../ui/label.js";
+const selectSizeVariants = cva(
+  "",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-10 text-sm",
+        lg: "h-12 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const labelVariants = cva(
+  "block text-sm font-medium mb-1.5",
+  {
+    variants: {
+      required: {
+        true: "after:content-['*'] after:ml-0.5 after:text-destructive",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      required: false
+    }
+  }
+);
+function Select({
+  name,
+  label,
+  helperText,
+  showError = true,
+  error: customError,
+  size,
+  variant,
+  fullWidth = true,
+  className,
+  disabled,
+  options = [],
+  placeholder,
+  allowClear,
+  id: providedId,
+  control: externalControl,
+  children,
+  // Validation props
+  required,
+  validate
+}) {
+  const generatedId = useId();
+  const inputId = providedId ?? generatedId;
+  const formConfigContext = useContext(FormConfigContext);
+  const formConfig = formConfigContext ?? {};
+  const rhfContext = useFormContext();
+  const control = externalControl ?? rhfContext?.control;
+  useEffect(() => {
+    if (formConfigContext?.registerFieldValidation) {
+      const rules = {};
+      if (required !== void 0) rules.required = required;
+      if (validate !== void 0) rules.validate = validate;
+      formConfigContext.registerFieldValidation({
+        name,
+        type: "string",
+        rules
+      });
+      return () => {
+        formConfigContext.unregisterFieldValidation(name);
+      };
+    }
+  }, [formConfigContext, name, required, validate]);
+  const { field, fieldState } = useController({
+    name,
+    control
+  });
+  const fieldError = fieldState.error?.message;
+  const errorMessage = customError ?? fieldError;
+  const hasError = !!errorMessage;
+  const effectiveSize = size ?? formConfig.size ?? "md";
+  const effectiveDisabled = disabled ?? formConfig.disabled;
+  const effectiveVariant = hasError ? "error" : variant;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", fullWidth && "w-full"), children: [
+    label && /* @__PURE__ */ jsxs(
+      Label,
+      {
+        htmlFor: inputId,
+        className: labelVariants({ required: !!required }),
+        children: [
+          label,
+          formConfig.colon && ":"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Select$1,
+      {
+        value: field.value?.toString() ?? "",
+        onValueChange: (value) => {
+          if (value === "" && allowClear) {
+            field.onChange("");
+          } else {
+            field.onChange(value);
+          }
+        },
+        disabled: effectiveDisabled,
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              id: inputId,
+              "aria-invalid": hasError,
+              "aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+              className: cn(
+                selectSizeVariants({ size: effectiveSize }),
+                effectiveVariant === "error" && "border-destructive focus:ring-destructive",
+                effectiveVariant === "success" && "border-green-500 focus:ring-green-500",
+                className
+              ),
+              children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+            }
+          ),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            allowClear && field.value && /* @__PURE__ */ jsx(SelectItem, { value: "", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Clear selection" }) }),
+            children ?? options.map((option) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                value: option.value.toString(),
+                disabled: option.disabled,
+                children: option.label
+              },
+              option.value
+            ))
+          ] })
+        ]
+      }
+    ),
+    showError && hasError && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: `${inputId}-error`,
+        className: "text-sm text-destructive",
+        role: "alert",
+        children: errorMessage
+      }
+    ),
+    helperText && !hasError && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: `${inputId}-helper`,
+        className: "text-sm text-muted-foreground",
+        children: helperText
+      }
+    )
+  ] });
+}
+Select.displayName = "Select";
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/Form/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/Form/Select.tsx"],"sourcesContent":["import { useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode } 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 {\r\n  Select as ShadcnSelect,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"../ui/select\";\r\nimport { Label } from \"../ui/label\";\r\n\r\nconst selectSizeVariants = cva(\r\n  \"\",\r\n  {\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    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nconst labelVariants = cva(\r\n  \"block text-sm font-medium mb-1.5\",\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    },\r\n    defaultVariants: {\r\n      required: false,\r\n    },\r\n  }\r\n);\r\n\r\nexport interface SelectOption {\r\n  label: string;\r\n  value: string | number;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface SelectProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof selectSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the select */\r\n  label?: string;\r\n  /** Helper text displayed below the select */\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  /** Whether the select should take full width */\r\n  fullWidth?: boolean;\r\n  /** Options for the select */\r\n  options?: SelectOption[];\r\n  /** Placeholder text */\r\n  placeholder?: string;\r\n  /** Allow clear selection */\r\n  allowClear?: boolean;\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  /** ID for the select */\r\n  id?: string;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\" | \"success\";\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 * Select component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui Select 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 * <Select \r\n *   name=\"country\" \r\n *   label=\"Country\" \r\n *   required\r\n *   options={[\r\n *     { label: \"USA\", value: \"us\" },\r\n *     { label: \"Canada\", value: \"ca\" },\r\n *   ]} \r\n * />\r\n * ```\r\n */\r\nexport function Select<\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  className,\r\n  disabled,\r\n  options = [],\r\n  placeholder,\r\n  allowClear,\r\n  id: providedId,\r\n  control: externalControl,\r\n  children,\r\n  // Validation props\r\n  required,\r\n  validate,\r\n}: SelectProps<TFieldValues, TName>) {\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: \"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  \r\n  // Determine variant based on error state\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  return (\r\n    <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\r\n      {label && (\r\n        <Label\r\n          htmlFor={inputId}\r\n          className={labelVariants({ required: !!required })}\r\n        >\r\n          {label}\r\n          {formConfig.colon && \":\"}\r\n        </Label>\r\n      )}\r\n      \r\n      <ShadcnSelect\r\n        value={field.value?.toString() ?? \"\"}\r\n        onValueChange={(value) => {\r\n          // Handle clear selection\r\n          if (value === \"\" && allowClear) {\r\n            field.onChange(\"\");\r\n          } else {\r\n            field.onChange(value);\r\n          }\r\n        }}\r\n        disabled={effectiveDisabled}\r\n      >\r\n        <SelectTrigger\r\n          id={inputId}\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            selectSizeVariants({ size: effectiveSize }),\r\n            effectiveVariant === \"error\" && \"border-destructive focus:ring-destructive\",\r\n            effectiveVariant === \"success\" && \"border-green-500 focus:ring-green-500\",\r\n            className\r\n          )}\r\n        >\r\n          <SelectValue placeholder={placeholder} />\r\n        </SelectTrigger>\r\n        <SelectContent>\r\n          {allowClear && field.value && (\r\n            <SelectItem value=\"\">\r\n              <span className=\"text-muted-foreground\">Clear selection</span>\r\n            </SelectItem>\r\n          )}\r\n          {children ?? options.map((option) => (\r\n            <SelectItem\r\n              key={option.value}\r\n              value={option.value.toString()}\r\n              disabled={option.disabled}\r\n            >\r\n              {option.label}\r\n            </SelectItem>\r\n          ))}\r\n        </SelectContent>\r\n      </ShadcnSelect>\r\n\r\n      {showError && hasError && (\r\n        <p\r\n          id={`${inputId}-error`}\r\n          className=\"text-sm text-destructive\"\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\"\r\n        >\r\n          {helperText}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"Select\";\r\n"],"names":["useRHFFormContext","ShadcnSelect"],"mappings":"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"}

package/dist/components/Form/Switch.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { FieldValues, FieldPath, Control } from 'react-hook-form';
+import { VariantProps } from 'class-variance-authority';
+import type * as SwitchPrimitives from "@radix-ui/react-switch";
+declare const switchSizeVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SwitchProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, "name" | "checked" | "onCheckedChange" | "required">, VariantProps<typeof switchSizeVariants> {
+    /** Field name - required for form integration */
+    name: TName;
+    /** Label text for the switch */
+    label?: ReactNode;
+    /** Helper text displayed below the switch */
+    helperText?: string;
+    /** Whether to show the error message */
+    showError?: boolean;
+    /** Custom error message (overrides form error) */
+    error?: string;
+    /** External control (for use outside Form) */
+    control?: Control<TFieldValues>;
+    /** Text to show when checked */
+    checkedText?: ReactNode;
+    /** Text to show when unchecked */
+    uncheckedText?: ReactNode;
+    /** Field is required (must be on) */
+    required?: boolean | string;
+    /** Custom validation function */
+    validate?: (value: unknown) => boolean | string | Promise<boolean | string>;
+}
+export declare const Switch: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: SwitchProps<TFieldValues, TName> & {
+    ref?: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>>;
+}) => React.ReactElement;
+export {};
+//# sourceMappingURL=Switch.d.ts.map

package/dist/components/Form/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAsD,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,KAAK,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAEhE,QAAA,MAAM,kBAAkB;;8EAcvB,CAAC;AAiBF,MAAM,WAAW,WAAW,CAC1B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,UAAU,CAAC,EACvH,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,iDAAiD;IACjD,IAAI,EAAE,KAAK,CAAC;IACZ,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,gCAAgC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC;IAG1B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;CAC7E;AA2ID,eAAO,MAAM,MAAM,EAA8B,CAC/C,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAE/D,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAA;CAAE,KACnH,KAAK,CAAC,YAAY,CAAC"}

package/dist/components/Form/Switch.js

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useId, useContext, useEffect } from "react";
+import { useFormContext, useController } from "react-hook-form";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn } from "../../utils/cn.js";
+import { FormConfigContext } from "./context.js";
+import { Switch as Switch$1 } from "../ui/switch.js";
+import { Label } from "../ui/label.js";
+const switchSizeVariants = cva(
+  "",
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-9",
+        md: "h-6 w-11",
+        lg: "h-7 w-14"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const labelVariants = cva(
+  "text-sm font-medium cursor-pointer select-none",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+function SwitchInner({
+  name,
+  label,
+  helperText,
+  showError = true,
+  error: customError,
+  size,
+  className,
+  disabled,
+  id: providedId,
+  control: externalControl,
+  checkedText,
+  uncheckedText,
+  // Validation props
+  required,
+  validate,
+  ...props
+}, ref) {
+  const generatedId = useId();
+  const inputId = providedId ?? generatedId;
+  const formConfigContext = useContext(FormConfigContext);
+  const formConfig = formConfigContext ?? {};
+  const rhfContext = useFormContext();
+  const control = externalControl ?? rhfContext?.control;
+  useEffect(() => {
+    if (formConfigContext?.registerFieldValidation) {
+      const rules = {};
+      if (required !== void 0) rules.required = required;
+      if (validate !== void 0) rules.validate = validate;
+      formConfigContext.registerFieldValidation({
+        name,
+        type: "boolean",
+        rules
+      });
+      return () => {
+        formConfigContext.unregisterFieldValidation(name);
+      };
+    }
+  }, [formConfigContext, name, required, validate]);
+  const { field, fieldState } = useController({
+    name,
+    control
+  });
+  const fieldError = fieldState.error?.message;
+  const errorMessage = customError ?? fieldError;
+  const hasError = !!errorMessage;
+  const effectiveSize = size ?? formConfig.size ?? "md";
+  const effectiveDisabled = disabled ?? formConfig.disabled;
+  const isChecked = field.value ?? false;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Switch$1,
+        {
+          ...props,
+          ref,
+          id: inputId,
+          checked: isChecked,
+          onCheckedChange: (checked) => field.onChange(checked),
+          disabled: effectiveDisabled,
+          "aria-labelledby": label ? `${inputId}-label` : void 0,
+          className: cn(
+            switchSizeVariants({ size: effectiveSize }),
+            className
+          )
+        }
+      ),
+      (checkedText || uncheckedText) && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: isChecked ? checkedText : uncheckedText }),
+      label && /* @__PURE__ */ jsx(
+        Label,
+        {
+          id: `${inputId}-label`,
+          htmlFor: inputId,
+          className: labelVariants({ disabled: effectiveDisabled }),
+          children: label
+        }
+      )
+    ] }),
+    showError && hasError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: errorMessage }),
+    helperText && !hasError && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: helperText })
+  ] });
+}
+const Switch = forwardRef(SwitchInner);
+Switch.displayName = "Switch";
+export {
+  Switch
+};
+//# sourceMappingURL=Switch.js.map