@skybin-tech/nebula-ui 0.0.11 → 0.0.14

package/dist/cjs/components/Button/Button.cjs

@@ -1,37 +1,23 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const classVarianceAuthority = require("class-variance-authority");
+const React = require("react");
+require("class-variance-authority");
 const cn = require("../../utils/cn.cjs");
-const buttonVariants = classVarianceAuthority.cva(
-  "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",
-  {
-    variants: {
-      variant: {
-        primary: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 disabled:hover:bg-primary",
-        secondary: "bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80 disabled:hover:bg-secondary",
-        outline: "bg-transparent text-primary border-primary hover:bg-primary hover:text-primary-foreground disabled:hover:bg-transparent disabled:hover:text-primary",
-        ghost: "bg-transparent text-foreground border-transparent hover:bg-accent hover:text-accent-foreground disabled:hover:bg-transparent",
-        danger: "bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90 disabled:hover:bg-destructive"
-      },
-      size: {
-        sm: "h-8 px-3 text-sm",
-        md: "h-10 px-4 text-sm",
-        lg: "h-12 px-6 text-base"
-      },
-      fullWidth: {
-        true: "w-full flex",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md",
-      fullWidth: false
-    }
-  }
-);
-function Button({
+const button = require("../../primitives/button.cjs");
+const variantMap = {
+  primary: "default",
+  secondary: "secondary",
+  outline: "outline",
+  ghost: "ghost",
+  danger: "destructive"
+};
+const sizeMap = {
+  sm: "sm",
+  md: "default",
+  lg: "lg"
+};
+const Button = React.forwardRef(function Button2({
   children,
   variant = "primary",
   size = "md",
@@ -39,20 +25,28 @@ function Button({
   loading = false,
   disabled,
   className,
+  asChild = false,
+  style,
   ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.ButtonPrimitive,
     {
-      className: cn.cn(buttonVariants({ variant, size, fullWidth }), className),
+      ref,
+      variant: variantMap[variant],
+      size: sizeMap[size],
+      asChild,
       disabled: disabled || loading,
+      className: cn.cn(fullWidth && "w-full", "relative cursor-pointer", className),
+      style,
       ...props,
-      children: [
-        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4 border-2 border-current border-r-transparent rounded-full animate-spin" }),
+      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4 border-2 border-current border-r-transparent rounded-full animate-spin" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn(loading && "invisible"), children })
-      ]
+      ] })
     }
   );
-}
+});
+Button.displayName = "Button";
 exports.Button = Button;
 //# sourceMappingURL=Button.cjs.map

package/dist/cjs/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","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":["cva","jsxs","cn","jsx"],"mappings":";;;;;AAIA,MAAM,iBAAiBA,uBAAAA;AAAAA,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,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,GAAAA,GAAG,eAAe,EAAE,SAAS,MAAM,UAAA,CAAW,GAAG,SAAS;AAAA,MACrE,UAAU,YAAY;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WACCC,2BAAAA,IAAC,QAAA,EAAK,WAAU,gFAAA,CAAgF;AAAA,uCAEjG,QAAA,EAAK,WAAWD,GAAAA,GAAG,WAAW,WAAW,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { ButtonPrimitive, buttonVariants } from \"../../primitives/button\";\n\ntype PrimitiveVariant = NonNullable<VariantProps<typeof buttonVariants>[\"variant\"]>;\ntype PrimitiveSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\nconst variantMap: Record<string, PrimitiveVariant> = {\n  primary: \"default\",\n  secondary: \"secondary\",\n  outline: \"outline\",\n  ghost: \"ghost\",\n  danger: \"destructive\",\n};\n\nconst sizeMap: Record<string, PrimitiveSize> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n};\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant */\n  variant?: keyof typeof variantMap;\n  /** Size of the button */\n  size?: keyof typeof sizeMap;\n  /** Stretch button to full container width */\n  fullWidth?: boolean;\n  /** Show a loading spinner and disable interaction */\n  loading?: boolean;\n  /** Render as child element via Slot (e.g. wrap a Link) */\n  asChild?: boolean;\n  children: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    children,\n    variant = \"primary\",\n    size = \"md\",\n    fullWidth = false,\n    loading = false,\n    disabled,\n    className,\n    asChild = false,\n    style,\n    ...props\n  },\n  ref\n) {\n  return (\n    <ButtonPrimitive\n      ref={ref}\n      variant={variantMap[variant]}\n      size={sizeMap[size]}\n      asChild={asChild}\n      disabled={disabled || loading}\n      className={cn(fullWidth && \"w-full\", \"relative cursor-pointer\", className)}\n      style={style}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {loading && (\n            <span className=\"absolute inset-0 flex items-center justify-center\">\n              <span className=\"size-4 border-2 border-current border-r-transparent rounded-full animate-spin\" />\n            </span>\n          )}\n          <span className={cn(loading && \"invisible\")}>{children}</span>\n        </>\n      )}\n    </ButtonPrimitive>\n  );\n});\n\nButton.displayName = \"Button\";\n"],"names":["forwardRef","Button","jsx","ButtonPrimitive","cn","jsxs","Fragment"],"mappings":";;;;;;;AAQA,MAAM,aAA+C;AAAA,EACnD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,UAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAgBO,MAAM,SAASA,MAAAA,WAA2C,SAASC,QACxE;AAAA,EACE;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SACEC,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,WAAW,OAAO;AAAA,MAC3B,MAAM,QAAQ,IAAI;AAAA,MAClB;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAWC,GAAAA,GAAG,aAAa,UAAU,2BAA2B,SAAS;AAAA,MACzE;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,UACC,WAEAC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,QAAA,WACCJ,2BAAAA,IAAC,UAAK,WAAU,qDACd,yCAAC,QAAA,EAAK,WAAU,iFAAgF,EAAA,CAClG;AAAA,uCAED,QAAA,EAAK,WAAWE,GAAAA,GAAG,WAAW,WAAW,GAAI,SAAA,CAAS;AAAA,MAAA,EAAA,CACzD;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAED,OAAO,cAAc;;"}

package/dist/cjs/components/Form/TextBox.cjs

@@ -7,7 +7,7 @@ const classVarianceAuthority = require("class-variance-authority");
 const cn = require("../../utils/cn.cjs");
 const context = require("./context.cjs");
 const variants = require("./variants.cjs");
-const input = require("../../primitives/input.cjs");
+const textbox = require("../../primitives/textbox.cjs");
 const label = require("../../primitives/label.cjs");
 const lucideReact = require("lucide-react");
 const textBoxVariants = classVarianceAuthority.cva(
@@ -84,6 +84,14 @@ function TextBoxInner({
       let fieldType = "string";
       if (inputType === "number") {
         fieldType = "number";
+      } else if (inputType === "date") {
+        fieldType = "date";
+      } else if (inputType === "email" && rules.email === void 0) {
+        rules.email = true;
+      } else if (inputType === "url" && rules.url === void 0) {
+        rules.url = true;
+      } else if (inputType === "tel" && rules.pattern === void 0) {
+        rules.pattern = { value: /^\+?[\d\s\-().]{7,}$/, message: "Invalid phone number" };
       }
       registerFieldValidation({
         name,
@@ -138,7 +146,7 @@ function TextBoxInner({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
       prefix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        input.Input,
+        textbox.TextBoxPrimitive,
         {
           ...props,
           ...field,

package/dist/cjs/components/Form/TextBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextBox.cjs","sources":["../../../../src/components/Form/TextBox.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { labelVariants } from \"./variants\";\nimport { Input } from \"../../primitives/input\";\nimport { Label } from \"../../primitives/label\";\nimport { X } from \"lucide-react\";\n\nconst textBoxVariants = cva(\n  \"\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8 text-xs px-2\",\n        md: \"h-10 text-sm px-3\",\n        lg: \"h-12 text-base px-4\",\n      },\n      variant: {\n        default: \"border-input focus-visible:ring-ring\",\n        error: \"border-destructive focus-visible:ring-destructive\",\n        success: \"border-green-500 focus-visible:ring-green-500\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n);\n\n/**\n * Validation rule with optional custom message\n */\ntype ValidationRule<T> = T | { value: T; message: string };\n\nexport interface TextBoxProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"name\" | \"prefix\" | \"pattern\" | \"required\" | \"minLength\" | \"maxLength\">,\n    VariantProps<typeof textBoxVariants> {\n  /** Field name - required for form integration */\n  name: TName;\n  /** Label text for the input */\n  label?: string;\n  /** Helper text displayed below the input */\n  helperText?: string;\n  /** Whether to show the error message */\n  showError?: boolean;\n  /** Custom error message (overrides form error) */\n  error?: string;\n  /** Whether the input should take full width */\n  fullWidth?: boolean;\n  /** Prefix element */\n  prefix?: ReactNode;\n  /** Suffix element */\n  suffix?: ReactNode;\n  /** Allow clear button */\n  allowClear?: boolean;\n  /** Callback when clear is clicked */\n  onClear?: () => void;\n  /** External control (for use outside Form) */\n  control?: Control<TFieldValues>;\n  \n  // Validation props\n  /** Field is required */\n  required?: boolean | string;\n  /** Minimum length for strings */\n  minLength?: ValidationRule<number>;\n  /** Maximum length for strings */\n  maxLength?: ValidationRule<number>;\n  /** Minimum value for numbers */\n  minValue?: ValidationRule<number>;\n  /** Maximum value for numbers */\n  maxValue?: ValidationRule<number>;\n  /** Regex pattern for validation */\n  pattern?: ValidationRule<RegExp>;\n  /** Email validation */\n  email?: boolean | string;\n  /** URL validation */\n  url?: boolean | string;\n  /** Custom validation function */\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * TextBox component with form integration and automatic validation registration\n * \n * This is a wrapper around the shadcn/ui Input primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Prefix/suffix elements\n * - Clear button functionality\n * \n * @example\n * ```tsx\n * // Inside a Form component - validation is automatically registered\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\n *   <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\n *   <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\n *   <TextBox name=\"website\" label=\"Website\" url />\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n */\nfunction TextBoxInner<\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    fullWidth = true,\n    className,\n    disabled,\n    prefix,\n    suffix,\n    allowClear,\n    onClear,\n    id: providedId,\n    control: externalControl,\n    // Validation props\n    required,\n    minLength,\n    maxLength,\n    minValue,\n    maxValue,\n    pattern,\n    email,\n    url,\n    validate,\n    ...props\n  }: TextBoxProps<TFieldValues, TName>,\n  ref: React.ForwardedRef<HTMLInputElement>\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  // Destructure stable function references so the effect doesn't depend on the\n  // context object identity (which changes every render due to inline construction).\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\n\n  // Register validation rules with the form\n  useEffect(() => {\n    if (registerFieldValidation) {\n      const rules: FieldValidationRules = {};\n\n      if (required !== undefined) rules.required = required;\n      if (minLength !== undefined) rules.minLength = minLength;\n      if (maxLength !== undefined) rules.maxLength = maxLength;\n      if (minValue !== undefined) rules.min = minValue;\n      if (maxValue !== undefined) rules.max = maxValue;\n      if (pattern !== undefined) rules.pattern = pattern;\n      if (email !== undefined) rules.email = email;\n      if (url !== undefined) rules.url = url;\n      if (validate !== undefined) rules.validate = validate;\n\n      // Determine field type based on input type\n      const inputType = props.type ?? \"text\";\n      let fieldType: \"string\" | \"number\" = \"string\";\n      if (inputType === \"number\") {\n        fieldType = \"number\";\n      }\n\n      registerFieldValidation({\n        name: name as string,\n        type: fieldType,\n        rules,\n      });\n\n      return () => {\n        unregisterFieldValidation?.(name as string);\n      };\n    }\n  }, [\n    registerFieldValidation,\n    unregisterFieldValidation,\n    name,\n    required,\n    minLength,\n    maxLength,\n    minValue,\n    maxValue,\n    pattern,\n    email,\n    url,\n    validate,\n    props.type,\n  ]);\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  const handleClear = () => {\n    field.onChange(\"\");\n    onClear?.();\n  };\n\n  return (\n    <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\n      {label && (\n        <Label\n          htmlFor={inputId}\n          className={labelVariants({ required: !!required })}\n        >\n          {label}\n          {formConfig.colon && \":\"}\n        </Label>\n      )}\n      \n      <div className=\"relative\">\n        {prefix && (\n          <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\n            {prefix}\n          </div>\n        )}\n        \n        <Input\n          {...props}\n          {...field}\n          ref={(node) => {\n            // Handle both refs\n            if (typeof ref === \"function\") {\n              ref(node);\n            } else if (ref) {\n              ref.current = node;\n            }\n            field.ref(node);\n          }}\n          id={inputId}\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            textBoxVariants({ size: effectiveSize, variant: effectiveVariant }),\n            prefix && \"pl-10\",\n            (suffix || allowClear) && \"pr-10\",\n            className\n          )}\n        />\n        \n        {(suffix || (allowClear && field.value)) && (\n          <div className=\"absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1\">\n            {allowClear && field.value && (\n              <button\n                type=\"button\"\n                onClick={handleClear}\n                className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                tabIndex={-1}\n              >\n                <X className=\"h-4 w-4\" />\n              </button>\n            )}\n            {suffix && (\n              <span className=\"text-muted-foreground\">{suffix}</span>\n            )}\n          </div>\n        )}\n      </div>\n\n      {showError && hasError && (\n        <p\n          id={`${inputId}-error`}\n          className=\"text-sm text-destructive\"\n          role=\"alert\"\n        >\n          {errorMessage}\n        </p>\n      )}\n      \n      {helperText && !hasError && (\n        <p\n          id={`${inputId}-helper`}\n          className=\"text-sm text-muted-foreground\"\n        >\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// Use forwardRef with generic support\nexport const TextBox = forwardRef(TextBoxInner) as <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n  props: TextBoxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLInputElement> }\n) => React.ReactElement;\n\n(TextBox as React.FC).displayName = \"TextBox\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","labelVariants","jsx","Input","X","forwardRef"],"mappings":"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"}
+{"version":3,"file":"TextBox.cjs","sources":["../../../../src/components/Form/TextBox.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { labelVariants } from \"./variants\";\nimport { TextBoxPrimitive } from \"../../primitives/textbox\";\nimport { Label } from \"../../primitives/label\";\nimport { X } from \"lucide-react\";\n\nconst textBoxVariants = cva(\n  \"\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8 text-xs px-2\",\n        md: \"h-10 text-sm px-3\",\n        lg: \"h-12 text-base px-4\",\n      },\n      variant: {\n        default: \"border-input focus-visible:ring-ring\",\n        error: \"border-destructive focus-visible:ring-destructive\",\n        success: \"border-green-500 focus-visible:ring-green-500\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n);\n\n/**\n * Validation rule with optional custom message\n */\ntype ValidationRule<T> = T | { value: T; message: string };\n\nexport interface TextBoxProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"name\" | \"prefix\" | \"pattern\" | \"required\" | \"minLength\" | \"maxLength\">,\n    VariantProps<typeof textBoxVariants> {\n  /** Field name - required for form integration */\n  name: TName;\n  /** Label text for the input */\n  label?: string;\n  /** Helper text displayed below the input */\n  helperText?: string;\n  /** Whether to show the error message */\n  showError?: boolean;\n  /** Custom error message (overrides form error) */\n  error?: string;\n  /** Whether the input should take full width */\n  fullWidth?: boolean;\n  /** Prefix element */\n  prefix?: ReactNode;\n  /** Suffix element */\n  suffix?: ReactNode;\n  /** Allow clear button */\n  allowClear?: boolean;\n  /** Callback when clear is clicked */\n  onClear?: () => void;\n  /** External control (for use outside Form) */\n  control?: Control<TFieldValues>;\n  \n  // Validation props\n  /** Field is required */\n  required?: boolean | string;\n  /** Minimum length for strings */\n  minLength?: ValidationRule<number>;\n  /** Maximum length for strings */\n  maxLength?: ValidationRule<number>;\n  /** Minimum value for numbers */\n  minValue?: ValidationRule<number>;\n  /** Maximum value for numbers */\n  maxValue?: ValidationRule<number>;\n  /** Regex pattern for validation */\n  pattern?: ValidationRule<RegExp>;\n  /** Email validation */\n  email?: boolean | string;\n  /** URL validation */\n  url?: boolean | string;\n  /** Custom validation function */\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * TextBox component with form integration and automatic validation registration\n * \n * This is a wrapper around the shadcn/ui Input primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Prefix/suffix elements\n * - Clear button functionality\n * \n * @example\n * ```tsx\n * // Inside a Form component - validation is automatically registered\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\n *   <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\n *   <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\n *   <TextBox name=\"website\" label=\"Website\" url />\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n */\nfunction TextBoxInner<\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    fullWidth = true,\n    className,\n    disabled,\n    prefix,\n    suffix,\n    allowClear,\n    onClear,\n    id: providedId,\n    control: externalControl,\n    // Validation props\n    required,\n    minLength,\n    maxLength,\n    minValue,\n    maxValue,\n    pattern,\n    email,\n    url,\n    validate,\n    ...props\n  }: TextBoxProps<TFieldValues, TName>,\n  ref: React.ForwardedRef<HTMLInputElement>\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  // Destructure stable function references so the effect doesn't depend on the\n  // context object identity (which changes every render due to inline construction).\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\n\n  // Register validation rules with the form\n  useEffect(() => {\n    if (registerFieldValidation) {\n      const rules: FieldValidationRules = {};\n\n      if (required !== undefined) rules.required = required;\n      if (minLength !== undefined) rules.minLength = minLength;\n      if (maxLength !== undefined) rules.maxLength = maxLength;\n      if (minValue !== undefined) rules.min = minValue;\n      if (maxValue !== undefined) rules.max = maxValue;\n      if (pattern !== undefined) rules.pattern = pattern;\n      if (email !== undefined) rules.email = email;\n      if (url !== undefined) rules.url = url;\n      if (validate !== undefined) rules.validate = validate;\n\n      // Determine field type and auto-infer rules from input type\n      const inputType = props.type ?? \"text\";\n      let fieldType: \"string\" | \"number\" | \"date\" = \"string\";\n\n      if (inputType === \"number\") {\n        fieldType = \"number\";\n      } else if (inputType === \"date\") {\n        fieldType = \"date\";\n      } else if (inputType === \"email\" && rules.email === undefined) {\n        rules.email = true;\n      } else if (inputType === \"url\" && rules.url === undefined) {\n        rules.url = true;\n      } else if (inputType === \"tel\" && rules.pattern === undefined) {\n        rules.pattern = { value: /^\\+?[\\d\\s\\-().]{7,}$/, message: \"Invalid phone number\" };\n      }\n\n      registerFieldValidation({\n        name: name as string,\n        type: fieldType,\n        rules,\n      });\n\n      return () => {\n        unregisterFieldValidation?.(name as string);\n      };\n    }\n  }, [\n    registerFieldValidation,\n    unregisterFieldValidation,\n    name,\n    required,\n    minLength,\n    maxLength,\n    minValue,\n    maxValue,\n    pattern,\n    email,\n    url,\n    validate,\n    props.type,\n  ]);\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  const handleClear = () => {\n    field.onChange(\"\");\n    onClear?.();\n  };\n\n  return (\n    <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\n      {label && (\n        <Label\n          htmlFor={inputId}\n          className={labelVariants({ required: !!required })}\n        >\n          {label}\n          {formConfig.colon && \":\"}\n        </Label>\n      )}\n      \n      <div className=\"relative\">\n        {prefix && (\n          <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\n            {prefix}\n          </div>\n        )}\n        \n        <TextBoxPrimitive\n          {...props}\n          {...field}\n          ref={(node) => {\n            // Handle both refs\n            if (typeof ref === \"function\") {\n              ref(node);\n            } else if (ref) {\n              ref.current = node;\n            }\n            field.ref(node);\n          }}\n          id={inputId}\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            textBoxVariants({ size: effectiveSize, variant: effectiveVariant }),\n            prefix && \"pl-10\",\n            (suffix || allowClear) && \"pr-10\",\n            className\n          )}\n        />\n\n        {(suffix || (allowClear && field.value)) && (\n          <div className=\"absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1\">\n            {allowClear && field.value && (\n              <button\n                type=\"button\"\n                onClick={handleClear}\n                className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                tabIndex={-1}\n              >\n                <X className=\"h-4 w-4\" />\n              </button>\n            )}\n            {suffix && (\n              <span className=\"text-muted-foreground\">{suffix}</span>\n            )}\n          </div>\n        )}\n      </div>\n\n      {showError && hasError && (\n        <p\n          id={`${inputId}-error`}\n          className=\"text-sm text-destructive\"\n          role=\"alert\"\n        >\n          {errorMessage}\n        </p>\n      )}\n      \n      {helperText && !hasError && (\n        <p\n          id={`${inputId}-helper`}\n          className=\"text-sm text-muted-foreground\"\n        >\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// Use forwardRef with generic support\nexport const TextBox = forwardRef(TextBoxInner) as <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n  props: TextBoxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLInputElement> }\n) => React.ReactElement;\n\n(TextBox as React.FC).displayName = \"TextBox\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","labelVariants","jsx","TextBoxPrimitive","X","forwardRef"],"mappings":";;;;;;;;;;;;AAWA,MAAM,kBAAkBA,uBAAAA;AAAAA,EACtB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AA6EA,SAAS,aAIP;AAAA,EACE;AAAA,EAAA,OACAC;AAAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,SAAS;AAAA;AAAA,EAET;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAcC,MAAAA,MAAA;AACpB,QAAM,UAAU,cAAc;AAG9B,QAAM,oBAAoBC,MAAAA,WAAWC,yBAAiB;AACtD,QAAM,aAAyB,qBAAqB,CAAA;AAGpD,QAAM,aAAaC,cAAAA,eAAA;AACnB,QAAM,UAAU,mBAAmB,YAAY;AAI/C,QAAM,0BAA0B,mBAAmB;AACnD,QAAM,4BAA4B,mBAAmB;AAGrDC,QAAAA,UAAU,MAAM;AACd,QAAI,yBAAyB;AAC3B,YAAM,QAA8B,CAAA;AAEpC,UAAI,aAAa,OAAW,OAAM,WAAW;AAC7C,UAAI,cAAc,OAAW,OAAM,YAAY;AAC/C,UAAI,cAAc,OAAW,OAAM,YAAY;AAC/C,UAAI,aAAa,OAAW,OAAM,MAAM;AACxC,UAAI,aAAa,OAAW,OAAM,MAAM;AACxC,UAAI,YAAY,OAAW,OAAM,UAAU;AAC3C,UAAI,UAAU,OAAW,OAAM,QAAQ;AACvC,UAAI,QAAQ,OAAW,OAAM,MAAM;AACnC,UAAI,aAAa,OAAW,OAAM,WAAW;AAG7C,YAAM,YAAY,MAAM,QAAQ;AAChC,UAAI,YAA0C;AAE9C,UAAI,cAAc,UAAU;AAC1B,oBAAY;AAAA,MACd,WAAW,cAAc,QAAQ;AAC/B,oBAAY;AAAA,MACd,WAAW,cAAc,WAAW,MAAM,UAAU,QAAW;AAC7D,cAAM,QAAQ;AAAA,MAChB,WAAW,cAAc,SAAS,MAAM,QAAQ,QAAW;AACzD,cAAM,MAAM;AAAA,MACd,WAAW,cAAc,SAAS,MAAM,YAAY,QAAW;AAC7D,cAAM,UAAU,EAAE,OAAO,wBAAwB,SAAS,uBAAA;AAAA,MAC5D;AAEA,8BAAwB;AAAA,QACtB;AAAA,QACA,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAED,aAAO,MAAM;AACX,oCAA4B,IAAc;AAAA,MAC5C;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAGD,QAAM,EAAE,OAAO,WAAA,IAAeC,4BAAmC;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,QAAM,cAAc,MAAM;AACxB,UAAM,SAAS,EAAE;AACjB,cAAA;AAAA,EACF;AAEA,yCACG,OAAA,EAAI,WAAWC,GAAAA,GAAG,eAAe,aAAa,QAAQ,GACpD,UAAA;AAAA,IAAAP,WACCQ,2BAAAA;AAAAA,MAACC,MAAAA;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAWC,SAAAA,cAAc,EAAE,UAAU,CAAC,CAAC,UAAU;AAAA,QAEhD,UAAA;AAAA,UAAAV;AAAAA,UACA,WAAW,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAIzBQ,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACZ,UAAA;AAAA,MAAA,UACCG,2BAAAA,IAAC,OAAA,EAAI,WAAU,kEACZ,UAAA,QACH;AAAA,MAGFA,2BAAAA;AAAAA,QAACC,QAAAA;AAAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,KAAK,CAAC,SAAS;AAEb,gBAAI,OAAO,QAAQ,YAAY;AAC7B,kBAAI,IAAI;AAAA,YACV,WAAW,KAAK;AACd,kBAAI,UAAU;AAAA,YAChB;AACA,kBAAM,IAAI,IAAI;AAAA,UAChB;AAAA,UACA,IAAI;AAAA,UACJ,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,oBACE,WACI,GAAG,OAAO,WACV,aACA,GAAG,OAAO,YACV;AAAA,UAEN,WAAWL,GAAAA;AAAAA,YACT,gBAAgB,EAAE,MAAM,eAAe,SAAS,kBAAkB;AAAA,YAClE,UAAU;AAAA,aACT,UAAU,eAAe;AAAA,YAC1B;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,OAGA,UAAW,cAAc,MAAM,UAC/BC,gCAAC,OAAA,EAAI,WAAU,qEACZ,UAAA;AAAA,QAAA,cAAc,MAAM,SACnBG,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,UAAU;AAAA,YAEV,UAAAA,2BAAAA,IAACE,YAAAA,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAG1B,UACCF,2BAAAA,IAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAA,CAAO;AAAA,MAAA,EAAA,CAEpD;AAAA,IAAA,GAEJ;AAAA,IAEC,aAAa,YACZA,2BAAAA;AAAAA,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,YACdA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAG,OAAO;AAAA,QACd,WAAU;AAAA,QAET,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;AAGO,MAAM,UAAUG,MAAAA,WAAW,YAAY;AAO7C,QAAqB,cAAc;;"}

package/dist/cjs/index.cjs

@@ -17,6 +17,7 @@ const separator = require("./primitives/separator.cjs");
 const Switch = require("./components/Form/Switch.cjs");
 const TextArea = require("./components/Form/TextArea.cjs");
 const TextBox = require("./components/Form/TextBox.cjs");
+const button = require("./primitives/button.cjs");
 const hooks = require("./components/Form/hooks.cjs");
 exports.useToggle = useToggle.useToggle;
 exports.useDebounce = useDebounce.useDebounce;
@@ -61,6 +62,7 @@ exports.Separator = separator.Separator;
 exports.Switch = Switch.Switch;
 exports.TextArea = TextArea.TextArea;
 exports.TextBox = TextBox.TextBox;
+exports.buttonVariants = button.buttonVariants;
 exports.useFieldError = hooks.useFieldError;
 exports.useForm = hooks.useForm;
 exports.useFormConfig = hooks.useFormConfig;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/primitives/button.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactSlot = require("@radix-ui/react-slot");
+const classVarianceAuthority = require("class-variance-authority");
+const cn = require("../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const ButtonPrimitive = React__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        className: cn.cn(buttonVariants({ variant, size, className })),
+        ...props
+      }
+    );
+  }
+);
+ButtonPrimitive.displayName = "ButtonPrimitive";
+exports.ButtonPrimitive = ButtonPrimitive;
+exports.buttonVariants = buttonVariants;
+//# sourceMappingURL=button.cjs.map

package/dist/cjs/primitives/button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.cjs","sources":["../../../src/primitives/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 px-3\",\n        lg: \"h-11 px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonPrimitiveProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst ButtonPrimitive = React.forwardRef<HTMLButtonElement, ButtonPrimitiveProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        ref={ref}\n        className={cn(buttonVariants({ variant, size, className }))}\n        {...props}\n      />\n    )\n  }\n)\nButtonPrimitive.displayName = \"ButtonPrimitive\"\n\nexport { ButtonPrimitive, buttonVariants }\n"],"names":["cva","React","Slot","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,iBAAiBA,uBAAAA;AAAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAQA,MAAM,kBAAkBC,iBAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,MAAA,GAAS,QAAQ;AAChE,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAC9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,eAAe,EAAE,SAAS,MAAM,UAAA,CAAW,CAAC;AAAA,QACzD,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,gBAAgB,cAAc;;;"}

package/dist/cjs/primitives/{input.cjs → textbox.cjs}

@@ -20,7 +20,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const Input = React__namespace.forwardRef(
+const TextBoxPrimitive = React__namespace.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -36,6 +36,6 @@ const Input = React__namespace.forwardRef(
     );
   }
 );
-Input.displayName = "Input";
-exports.Input = Input;
-//# sourceMappingURL=input.cjs.map
+TextBoxPrimitive.displayName = "TextBoxPrimitive";
+exports.TextBoxPrimitive = TextBoxPrimitive;
+//# sourceMappingURL=textbox.cjs.map

package/dist/cjs/primitives/textbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textbox.cjs","sources":["../../../src/primitives/textbox.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/utils\"\n\nconst TextBoxPrimitive = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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  }\n)\nTextBoxPrimitive.displayName = \"TextBoxPrimitive\"\n\nexport { TextBoxPrimitive }\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,mBAAmBA,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AACtC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,iBAAiB,cAAc;;"}

package/dist/components/Button/Button.js

@@ -1,35 +1,21 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import "class-variance-authority";
 import { cn } from "../../utils/cn.js";
-const buttonVariants = cva(
-  "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",
-  {
-    variants: {
-      variant: {
-        primary: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 disabled:hover:bg-primary",
-        secondary: "bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80 disabled:hover:bg-secondary",
-        outline: "bg-transparent text-primary border-primary hover:bg-primary hover:text-primary-foreground disabled:hover:bg-transparent disabled:hover:text-primary",
-        ghost: "bg-transparent text-foreground border-transparent hover:bg-accent hover:text-accent-foreground disabled:hover:bg-transparent",
-        danger: "bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90 disabled:hover:bg-destructive"
-      },
-      size: {
-        sm: "h-8 px-3 text-sm",
-        md: "h-10 px-4 text-sm",
-        lg: "h-12 px-6 text-base"
-      },
-      fullWidth: {
-        true: "w-full flex",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md",
-      fullWidth: false
-    }
-  }
-);
-function Button({
+import { ButtonPrimitive } from "../../primitives/button.js";
+const variantMap = {
+  primary: "default",
+  secondary: "secondary",
+  outline: "outline",
+  ghost: "ghost",
+  danger: "destructive"
+};
+const sizeMap = {
+  sm: "sm",
+  md: "default",
+  lg: "lg"
+};
+const Button = forwardRef(function Button2({
   children,
   variant = "primary",
   size = "md",
@@ -37,21 +23,29 @@ function Button({
   loading = false,
   disabled,
   className,
+  asChild = false,
+  style,
   ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    ButtonPrimitive,
     {
-      className: cn(buttonVariants({ variant, size, fullWidth }), className),
+      ref,
+      variant: variantMap[variant],
+      size: sizeMap[size],
+      asChild,
       disabled: disabled || loading,
+      className: cn(fullWidth && "w-full", "relative cursor-pointer", className),
+      style,
       ...props,
-      children: [
-        loading && /* @__PURE__ */ jsx("span", { className: "size-4 border-2 border-current border-r-transparent rounded-full animate-spin" }),
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-4 border-2 border-current border-r-transparent rounded-full animate-spin" }) }),
         /* @__PURE__ */ jsx("span", { className: cn(loading && "invisible"), children })
-      ]
+      ] })
     }
   );
-}
+});
+Button.displayName = "Button";
 export {
   Button
 };

package/dist/components/Button/Button.js.map

@@ -1 +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;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { ButtonPrimitive, buttonVariants } from \"../../primitives/button\";\n\ntype PrimitiveVariant = NonNullable<VariantProps<typeof buttonVariants>[\"variant\"]>;\ntype PrimitiveSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\nconst variantMap: Record<string, PrimitiveVariant> = {\n  primary: \"default\",\n  secondary: \"secondary\",\n  outline: \"outline\",\n  ghost: \"ghost\",\n  danger: \"destructive\",\n};\n\nconst sizeMap: Record<string, PrimitiveSize> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n};\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant */\n  variant?: keyof typeof variantMap;\n  /** Size of the button */\n  size?: keyof typeof sizeMap;\n  /** Stretch button to full container width */\n  fullWidth?: boolean;\n  /** Show a loading spinner and disable interaction */\n  loading?: boolean;\n  /** Render as child element via Slot (e.g. wrap a Link) */\n  asChild?: boolean;\n  children: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    children,\n    variant = \"primary\",\n    size = \"md\",\n    fullWidth = false,\n    loading = false,\n    disabled,\n    className,\n    asChild = false,\n    style,\n    ...props\n  },\n  ref\n) {\n  return (\n    <ButtonPrimitive\n      ref={ref}\n      variant={variantMap[variant]}\n      size={sizeMap[size]}\n      asChild={asChild}\n      disabled={disabled || loading}\n      className={cn(fullWidth && \"w-full\", \"relative cursor-pointer\", className)}\n      style={style}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {loading && (\n            <span className=\"absolute inset-0 flex items-center justify-center\">\n              <span className=\"size-4 border-2 border-current border-r-transparent rounded-full animate-spin\" />\n            </span>\n          )}\n          <span className={cn(loading && \"invisible\")}>{children}</span>\n        </>\n      )}\n    </ButtonPrimitive>\n  );\n});\n\nButton.displayName = \"Button\";\n"],"names":["Button"],"mappings":";;;;;AAQA,MAAM,aAA+C;AAAA,EACnD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,UAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAgBO,MAAM,SAAS,WAA2C,SAASA,QACxE;AAAA,EACE;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,WAAW,OAAO;AAAA,MAC3B,MAAM,QAAQ,IAAI;AAAA,MAClB;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW,GAAG,aAAa,UAAU,2BAA2B,SAAS;AAAA,MACzE;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,UACC,WAEA,qBAAA,UAAA,EACG,UAAA;AAAA,QAAA,WACC,oBAAC,UAAK,WAAU,qDACd,8BAAC,QAAA,EAAK,WAAU,iFAAgF,EAAA,CAClG;AAAA,4BAED,QAAA,EAAK,WAAW,GAAG,WAAW,WAAW,GAAI,SAAA,CAAS;AAAA,MAAA,EAAA,CACzD;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAED,OAAO,cAAc;"}

package/dist/components/Form/TextBox.js

@@ -5,7 +5,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { FormConfigContext } from "./context.js";
 import { labelVariants } from "./variants.js";
-import { Input } from "../../primitives/input.js";
+import { TextBoxPrimitive } from "../../primitives/textbox.js";
 import { Label } from "../../primitives/label.js";
 import { X } from "lucide-react";
 const textBoxVariants = cva(
@@ -82,6 +82,14 @@ function TextBoxInner({
       let fieldType = "string";
       if (inputType === "number") {
         fieldType = "number";
+      } else if (inputType === "date") {
+        fieldType = "date";
+      } else if (inputType === "email" && rules.email === void 0) {
+        rules.email = true;
+      } else if (inputType === "url" && rules.url === void 0) {
+        rules.url = true;
+      } else if (inputType === "tel" && rules.pattern === void 0) {
+        rules.pattern = { value: /^\+?[\d\s\-().]{7,}$/, message: "Invalid phone number" };
       }
       registerFieldValidation({
         name,
@@ -136,7 +144,7 @@ function TextBoxInner({
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       prefix && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
       /* @__PURE__ */ jsx(
-        Input,
+        TextBoxPrimitive,
         {
           ...props,
           ...field,

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

@@ -1 +1 @@
-{"version":3,"file":"TextBox.js","sources":["../../../src/components/Form/TextBox.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { labelVariants } from \"./variants\";\nimport { Input } from \"../../primitives/input\";\nimport { Label } from \"../../primitives/label\";\nimport { X } from \"lucide-react\";\n\nconst textBoxVariants = cva(\n  \"\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8 text-xs px-2\",\n        md: \"h-10 text-sm px-3\",\n        lg: \"h-12 text-base px-4\",\n      },\n      variant: {\n        default: \"border-input focus-visible:ring-ring\",\n        error: \"border-destructive focus-visible:ring-destructive\",\n        success: \"border-green-500 focus-visible:ring-green-500\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n);\n\n/**\n * Validation rule with optional custom message\n */\ntype ValidationRule<T> = T | { value: T; message: string };\n\nexport interface TextBoxProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"name\" | \"prefix\" | \"pattern\" | \"required\" | \"minLength\" | \"maxLength\">,\n    VariantProps<typeof textBoxVariants> {\n  /** Field name - required for form integration */\n  name: TName;\n  /** Label text for the input */\n  label?: string;\n  /** Helper text displayed below the input */\n  helperText?: string;\n  /** Whether to show the error message */\n  showError?: boolean;\n  /** Custom error message (overrides form error) */\n  error?: string;\n  /** Whether the input should take full width */\n  fullWidth?: boolean;\n  /** Prefix element */\n  prefix?: ReactNode;\n  /** Suffix element */\n  suffix?: ReactNode;\n  /** Allow clear button */\n  allowClear?: boolean;\n  /** Callback when clear is clicked */\n  onClear?: () => void;\n  /** External control (for use outside Form) */\n  control?: Control<TFieldValues>;\n  \n  // Validation props\n  /** Field is required */\n  required?: boolean | string;\n  /** Minimum length for strings */\n  minLength?: ValidationRule<number>;\n  /** Maximum length for strings */\n  maxLength?: ValidationRule<number>;\n  /** Minimum value for numbers */\n  minValue?: ValidationRule<number>;\n  /** Maximum value for numbers */\n  maxValue?: ValidationRule<number>;\n  /** Regex pattern for validation */\n  pattern?: ValidationRule<RegExp>;\n  /** Email validation */\n  email?: boolean | string;\n  /** URL validation */\n  url?: boolean | string;\n  /** Custom validation function */\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * TextBox component with form integration and automatic validation registration\n * \n * This is a wrapper around the shadcn/ui Input primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Prefix/suffix elements\n * - Clear button functionality\n * \n * @example\n * ```tsx\n * // Inside a Form component - validation is automatically registered\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\n *   <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\n *   <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\n *   <TextBox name=\"website\" label=\"Website\" url />\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n */\nfunction TextBoxInner<\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    fullWidth = true,\n    className,\n    disabled,\n    prefix,\n    suffix,\n    allowClear,\n    onClear,\n    id: providedId,\n    control: externalControl,\n    // Validation props\n    required,\n    minLength,\n    maxLength,\n    minValue,\n    maxValue,\n    pattern,\n    email,\n    url,\n    validate,\n    ...props\n  }: TextBoxProps<TFieldValues, TName>,\n  ref: React.ForwardedRef<HTMLInputElement>\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  // Destructure stable function references so the effect doesn't depend on the\n  // context object identity (which changes every render due to inline construction).\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\n\n  // Register validation rules with the form\n  useEffect(() => {\n    if (registerFieldValidation) {\n      const rules: FieldValidationRules = {};\n\n      if (required !== undefined) rules.required = required;\n      if (minLength !== undefined) rules.minLength = minLength;\n      if (maxLength !== undefined) rules.maxLength = maxLength;\n      if (minValue !== undefined) rules.min = minValue;\n      if (maxValue !== undefined) rules.max = maxValue;\n      if (pattern !== undefined) rules.pattern = pattern;\n      if (email !== undefined) rules.email = email;\n      if (url !== undefined) rules.url = url;\n      if (validate !== undefined) rules.validate = validate;\n\n      // Determine field type based on input type\n      const inputType = props.type ?? \"text\";\n      let fieldType: \"string\" | \"number\" = \"string\";\n      if (inputType === \"number\") {\n        fieldType = \"number\";\n      }\n\n      registerFieldValidation({\n        name: name as string,\n        type: fieldType,\n        rules,\n      });\n\n      return () => {\n        unregisterFieldValidation?.(name as string);\n      };\n    }\n  }, [\n    registerFieldValidation,\n    unregisterFieldValidation,\n    name,\n    required,\n    minLength,\n    maxLength,\n    minValue,\n    maxValue,\n    pattern,\n    email,\n    url,\n    validate,\n    props.type,\n  ]);\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  const handleClear = () => {\n    field.onChange(\"\");\n    onClear?.();\n  };\n\n  return (\n    <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\n      {label && (\n        <Label\n          htmlFor={inputId}\n          className={labelVariants({ required: !!required })}\n        >\n          {label}\n          {formConfig.colon && \":\"}\n        </Label>\n      )}\n      \n      <div className=\"relative\">\n        {prefix && (\n          <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\n            {prefix}\n          </div>\n        )}\n        \n        <Input\n          {...props}\n          {...field}\n          ref={(node) => {\n            // Handle both refs\n            if (typeof ref === \"function\") {\n              ref(node);\n            } else if (ref) {\n              ref.current = node;\n            }\n            field.ref(node);\n          }}\n          id={inputId}\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            textBoxVariants({ size: effectiveSize, variant: effectiveVariant }),\n            prefix && \"pl-10\",\n            (suffix || allowClear) && \"pr-10\",\n            className\n          )}\n        />\n        \n        {(suffix || (allowClear && field.value)) && (\n          <div className=\"absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1\">\n            {allowClear && field.value && (\n              <button\n                type=\"button\"\n                onClick={handleClear}\n                className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                tabIndex={-1}\n              >\n                <X className=\"h-4 w-4\" />\n              </button>\n            )}\n            {suffix && (\n              <span className=\"text-muted-foreground\">{suffix}</span>\n            )}\n          </div>\n        )}\n      </div>\n\n      {showError && hasError && (\n        <p\n          id={`${inputId}-error`}\n          className=\"text-sm text-destructive\"\n          role=\"alert\"\n        >\n          {errorMessage}\n        </p>\n      )}\n      \n      {helperText && !hasError && (\n        <p\n          id={`${inputId}-helper`}\n          className=\"text-sm text-muted-foreground\"\n        >\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// Use forwardRef with generic support\nexport const TextBox = forwardRef(TextBoxInner) as <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n  props: TextBoxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLInputElement> }\n) => React.ReactElement;\n\n(TextBox as React.FC).displayName = \"TextBox\";\n"],"names":["useRHFFormContext"],"mappings":";;;;;;;;;;AAWA,MAAM,kBAAkB;AAAA,EACtB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AA6EA,SAAS,aAIP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,SAAS;AAAA;AAAA,EAET;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;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;AAI/C,QAAM,0BAA0B,mBAAmB;AACnD,QAAM,4BAA4B,mBAAmB;AAGrD,YAAU,MAAM;AACd,QAAI,yBAAyB;AAC3B,YAAM,QAA8B,CAAA;AAEpC,UAAI,aAAa,OAAW,OAAM,WAAW;AAC7C,UAAI,cAAc,OAAW,OAAM,YAAY;AAC/C,UAAI,cAAc,OAAW,OAAM,YAAY;AAC/C,UAAI,aAAa,OAAW,OAAM,MAAM;AACxC,UAAI,aAAa,OAAW,OAAM,MAAM;AACxC,UAAI,YAAY,OAAW,OAAM,UAAU;AAC3C,UAAI,UAAU,OAAW,OAAM,QAAQ;AACvC,UAAI,QAAQ,OAAW,OAAM,MAAM;AACnC,UAAI,aAAa,OAAW,OAAM,WAAW;AAG7C,YAAM,YAAY,MAAM,QAAQ;AAChC,UAAI,YAAiC;AACrC,UAAI,cAAc,UAAU;AAC1B,oBAAY;AAAA,MACd;AAEA,8BAAwB;AAAA,QACtB;AAAA,QACA,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAED,aAAO,MAAM;AACX,oCAA4B,IAAc;AAAA,MAC5C;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAGD,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,QAAM,cAAc,MAAM;AACxB,UAAM,SAAS,EAAE;AACjB,cAAA;AAAA,EACF;AAEA,8BACG,OAAA,EAAI,WAAW,GAAG,eAAe,aAAa,QAAQ,GACpD,UAAA;AAAA,IAAA,SACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW,cAAc,EAAE,UAAU,CAAC,CAAC,UAAU;AAAA,QAEhD,UAAA;AAAA,UAAA;AAAA,UACA,WAAW,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAIzB,qBAAC,OAAA,EAAI,WAAU,YACZ,UAAA;AAAA,MAAA,UACC,oBAAC,OAAA,EAAI,WAAU,kEACZ,UAAA,QACH;AAAA,MAGF;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,KAAK,CAAC,SAAS;AAEb,gBAAI,OAAO,QAAQ,YAAY;AAC7B,kBAAI,IAAI;AAAA,YACV,WAAW,KAAK;AACd,kBAAI,UAAU;AAAA,YAChB;AACA,kBAAM,IAAI,IAAI;AAAA,UAChB;AAAA,UACA,IAAI;AAAA,UACJ,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,oBACE,WACI,GAAG,OAAO,WACV,aACA,GAAG,OAAO,YACV;AAAA,UAEN,WAAW;AAAA,YACT,gBAAgB,EAAE,MAAM,eAAe,SAAS,kBAAkB;AAAA,YAClE,UAAU;AAAA,aACT,UAAU,eAAe;AAAA,YAC1B;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,OAGA,UAAW,cAAc,MAAM,UAC/B,qBAAC,OAAA,EAAI,WAAU,qEACZ,UAAA;AAAA,QAAA,cAAc,MAAM,SACnB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,UAAU;AAAA,YAEV,UAAA,oBAAC,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAG1B,UACC,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAA,CAAO;AAAA,MAAA,EAAA,CAEpD;AAAA,IAAA,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,UAAU,WAAW,YAAY;AAO7C,QAAqB,cAAc;"}
+{"version":3,"file":"TextBox.js","sources":["../../../src/components/Form/TextBox.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { labelVariants } from \"./variants\";\nimport { TextBoxPrimitive } from \"../../primitives/textbox\";\nimport { Label } from \"../../primitives/label\";\nimport { X } from \"lucide-react\";\n\nconst textBoxVariants = cva(\n  \"\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8 text-xs px-2\",\n        md: \"h-10 text-sm px-3\",\n        lg: \"h-12 text-base px-4\",\n      },\n      variant: {\n        default: \"border-input focus-visible:ring-ring\",\n        error: \"border-destructive focus-visible:ring-destructive\",\n        success: \"border-green-500 focus-visible:ring-green-500\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n);\n\n/**\n * Validation rule with optional custom message\n */\ntype ValidationRule<T> = T | { value: T; message: string };\n\nexport interface TextBoxProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"name\" | \"prefix\" | \"pattern\" | \"required\" | \"minLength\" | \"maxLength\">,\n    VariantProps<typeof textBoxVariants> {\n  /** Field name - required for form integration */\n  name: TName;\n  /** Label text for the input */\n  label?: string;\n  /** Helper text displayed below the input */\n  helperText?: string;\n  /** Whether to show the error message */\n  showError?: boolean;\n  /** Custom error message (overrides form error) */\n  error?: string;\n  /** Whether the input should take full width */\n  fullWidth?: boolean;\n  /** Prefix element */\n  prefix?: ReactNode;\n  /** Suffix element */\n  suffix?: ReactNode;\n  /** Allow clear button */\n  allowClear?: boolean;\n  /** Callback when clear is clicked */\n  onClear?: () => void;\n  /** External control (for use outside Form) */\n  control?: Control<TFieldValues>;\n  \n  // Validation props\n  /** Field is required */\n  required?: boolean | string;\n  /** Minimum length for strings */\n  minLength?: ValidationRule<number>;\n  /** Maximum length for strings */\n  maxLength?: ValidationRule<number>;\n  /** Minimum value for numbers */\n  minValue?: ValidationRule<number>;\n  /** Maximum value for numbers */\n  maxValue?: ValidationRule<number>;\n  /** Regex pattern for validation */\n  pattern?: ValidationRule<RegExp>;\n  /** Email validation */\n  email?: boolean | string;\n  /** URL validation */\n  url?: boolean | string;\n  /** Custom validation function */\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * TextBox component with form integration and automatic validation registration\n * \n * This is a wrapper around the shadcn/ui Input primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Prefix/suffix elements\n * - Clear button functionality\n * \n * @example\n * ```tsx\n * // Inside a Form component - validation is automatically registered\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\n *   <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\n *   <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\n *   <TextBox name=\"website\" label=\"Website\" url />\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n */\nfunction TextBoxInner<\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    fullWidth = true,\n    className,\n    disabled,\n    prefix,\n    suffix,\n    allowClear,\n    onClear,\n    id: providedId,\n    control: externalControl,\n    // Validation props\n    required,\n    minLength,\n    maxLength,\n    minValue,\n    maxValue,\n    pattern,\n    email,\n    url,\n    validate,\n    ...props\n  }: TextBoxProps<TFieldValues, TName>,\n  ref: React.ForwardedRef<HTMLInputElement>\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  // Destructure stable function references so the effect doesn't depend on the\n  // context object identity (which changes every render due to inline construction).\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\n\n  // Register validation rules with the form\n  useEffect(() => {\n    if (registerFieldValidation) {\n      const rules: FieldValidationRules = {};\n\n      if (required !== undefined) rules.required = required;\n      if (minLength !== undefined) rules.minLength = minLength;\n      if (maxLength !== undefined) rules.maxLength = maxLength;\n      if (minValue !== undefined) rules.min = minValue;\n      if (maxValue !== undefined) rules.max = maxValue;\n      if (pattern !== undefined) rules.pattern = pattern;\n      if (email !== undefined) rules.email = email;\n      if (url !== undefined) rules.url = url;\n      if (validate !== undefined) rules.validate = validate;\n\n      // Determine field type and auto-infer rules from input type\n      const inputType = props.type ?? \"text\";\n      let fieldType: \"string\" | \"number\" | \"date\" = \"string\";\n\n      if (inputType === \"number\") {\n        fieldType = \"number\";\n      } else if (inputType === \"date\") {\n        fieldType = \"date\";\n      } else if (inputType === \"email\" && rules.email === undefined) {\n        rules.email = true;\n      } else if (inputType === \"url\" && rules.url === undefined) {\n        rules.url = true;\n      } else if (inputType === \"tel\" && rules.pattern === undefined) {\n        rules.pattern = { value: /^\\+?[\\d\\s\\-().]{7,}$/, message: \"Invalid phone number\" };\n      }\n\n      registerFieldValidation({\n        name: name as string,\n        type: fieldType,\n        rules,\n      });\n\n      return () => {\n        unregisterFieldValidation?.(name as string);\n      };\n    }\n  }, [\n    registerFieldValidation,\n    unregisterFieldValidation,\n    name,\n    required,\n    minLength,\n    maxLength,\n    minValue,\n    maxValue,\n    pattern,\n    email,\n    url,\n    validate,\n    props.type,\n  ]);\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  const handleClear = () => {\n    field.onChange(\"\");\n    onClear?.();\n  };\n\n  return (\n    <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\n      {label && (\n        <Label\n          htmlFor={inputId}\n          className={labelVariants({ required: !!required })}\n        >\n          {label}\n          {formConfig.colon && \":\"}\n        </Label>\n      )}\n      \n      <div className=\"relative\">\n        {prefix && (\n          <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\n            {prefix}\n          </div>\n        )}\n        \n        <TextBoxPrimitive\n          {...props}\n          {...field}\n          ref={(node) => {\n            // Handle both refs\n            if (typeof ref === \"function\") {\n              ref(node);\n            } else if (ref) {\n              ref.current = node;\n            }\n            field.ref(node);\n          }}\n          id={inputId}\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            textBoxVariants({ size: effectiveSize, variant: effectiveVariant }),\n            prefix && \"pl-10\",\n            (suffix || allowClear) && \"pr-10\",\n            className\n          )}\n        />\n\n        {(suffix || (allowClear && field.value)) && (\n          <div className=\"absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1\">\n            {allowClear && field.value && (\n              <button\n                type=\"button\"\n                onClick={handleClear}\n                className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                tabIndex={-1}\n              >\n                <X className=\"h-4 w-4\" />\n              </button>\n            )}\n            {suffix && (\n              <span className=\"text-muted-foreground\">{suffix}</span>\n            )}\n          </div>\n        )}\n      </div>\n\n      {showError && hasError && (\n        <p\n          id={`${inputId}-error`}\n          className=\"text-sm text-destructive\"\n          role=\"alert\"\n        >\n          {errorMessage}\n        </p>\n      )}\n      \n      {helperText && !hasError && (\n        <p\n          id={`${inputId}-helper`}\n          className=\"text-sm text-muted-foreground\"\n        >\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// Use forwardRef with generic support\nexport const TextBox = forwardRef(TextBoxInner) as <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n  props: TextBoxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLInputElement> }\n) => React.ReactElement;\n\n(TextBox as React.FC).displayName = \"TextBox\";\n"],"names":["useRHFFormContext"],"mappings":";;;;;;;;;;AAWA,MAAM,kBAAkB;AAAA,EACtB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AA6EA,SAAS,aAIP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,SAAS;AAAA;AAAA,EAET;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;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;AAI/C,QAAM,0BAA0B,mBAAmB;AACnD,QAAM,4BAA4B,mBAAmB;AAGrD,YAAU,MAAM;AACd,QAAI,yBAAyB;AAC3B,YAAM,QAA8B,CAAA;AAEpC,UAAI,aAAa,OAAW,OAAM,WAAW;AAC7C,UAAI,cAAc,OAAW,OAAM,YAAY;AAC/C,UAAI,cAAc,OAAW,OAAM,YAAY;AAC/C,UAAI,aAAa,OAAW,OAAM,MAAM;AACxC,UAAI,aAAa,OAAW,OAAM,MAAM;AACxC,UAAI,YAAY,OAAW,OAAM,UAAU;AAC3C,UAAI,UAAU,OAAW,OAAM,QAAQ;AACvC,UAAI,QAAQ,OAAW,OAAM,MAAM;AACnC,UAAI,aAAa,OAAW,OAAM,WAAW;AAG7C,YAAM,YAAY,MAAM,QAAQ;AAChC,UAAI,YAA0C;AAE9C,UAAI,cAAc,UAAU;AAC1B,oBAAY;AAAA,MACd,WAAW,cAAc,QAAQ;AAC/B,oBAAY;AAAA,MACd,WAAW,cAAc,WAAW,MAAM,UAAU,QAAW;AAC7D,cAAM,QAAQ;AAAA,MAChB,WAAW,cAAc,SAAS,MAAM,QAAQ,QAAW;AACzD,cAAM,MAAM;AAAA,MACd,WAAW,cAAc,SAAS,MAAM,YAAY,QAAW;AAC7D,cAAM,UAAU,EAAE,OAAO,wBAAwB,SAAS,uBAAA;AAAA,MAC5D;AAEA,8BAAwB;AAAA,QACtB;AAAA,QACA,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAED,aAAO,MAAM;AACX,oCAA4B,IAAc;AAAA,MAC5C;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAGD,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,QAAM,cAAc,MAAM;AACxB,UAAM,SAAS,EAAE;AACjB,cAAA;AAAA,EACF;AAEA,8BACG,OAAA,EAAI,WAAW,GAAG,eAAe,aAAa,QAAQ,GACpD,UAAA;AAAA,IAAA,SACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW,cAAc,EAAE,UAAU,CAAC,CAAC,UAAU;AAAA,QAEhD,UAAA;AAAA,UAAA;AAAA,UACA,WAAW,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAIzB,qBAAC,OAAA,EAAI,WAAU,YACZ,UAAA;AAAA,MAAA,UACC,oBAAC,OAAA,EAAI,WAAU,kEACZ,UAAA,QACH;AAAA,MAGF;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,KAAK,CAAC,SAAS;AAEb,gBAAI,OAAO,QAAQ,YAAY;AAC7B,kBAAI,IAAI;AAAA,YACV,WAAW,KAAK;AACd,kBAAI,UAAU;AAAA,YAChB;AACA,kBAAM,IAAI,IAAI;AAAA,UAChB;AAAA,UACA,IAAI;AAAA,UACJ,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,oBACE,WACI,GAAG,OAAO,WACV,aACA,GAAG,OAAO,YACV;AAAA,UAEN,WAAW;AAAA,YACT,gBAAgB,EAAE,MAAM,eAAe,SAAS,kBAAkB;AAAA,YAClE,UAAU;AAAA,aACT,UAAU,eAAe;AAAA,YAC1B;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,OAGA,UAAW,cAAc,MAAM,UAC/B,qBAAC,OAAA,EAAI,WAAU,qEACZ,UAAA;AAAA,QAAA,cAAc,MAAM,SACnB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,UAAU;AAAA,YAEV,UAAA,oBAAC,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAG1B,UACC,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAA,CAAO;AAAA,MAAA,EAAA,CAEpD;AAAA,IAAA,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,UAAU,WAAW,YAAY;AAO7C,QAAqB,cAAc;"}

package/dist/index.js

@@ -15,6 +15,7 @@ import { Separator } from "./primitives/separator.js";
 import { Switch } from "./components/Form/Switch.js";
 import { TextArea } from "./components/Form/TextArea.js";
 import { TextBox } from "./components/Form/TextBox.js";
+import { buttonVariants } from "./primitives/button.js";
 import { useFieldError, useForm, useFormConfig, useFormField } from "./components/Form/hooks.js";
 export {
   Avatar,
@@ -55,6 +56,7 @@ export {
   TextBox,
   badgeVariants,
   buildZodSchemaFromRules,
+  buttonVariants,
   cn,
   defaultFormConfig,
   useDebounce,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/primitives/button.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils/cn.js";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const ButtonPrimitive = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size, className })),
+        ...props
+      }
+    );
+  }
+);
+ButtonPrimitive.displayName = "ButtonPrimitive";
+export {
+  ButtonPrimitive,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/primitives/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../src/primitives/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 px-3\",\n        lg: \"h-11 px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonPrimitiveProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst ButtonPrimitive = React.forwardRef<HTMLButtonElement, ButtonPrimitiveProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        ref={ref}\n        className={cn(buttonVariants({ variant, size, className }))}\n        {...props}\n      />\n    )\n  }\n)\nButtonPrimitive.displayName = \"ButtonPrimitive\"\n\nexport { ButtonPrimitive, buttonVariants }\n"],"names":[],"mappings":";;;;;AAMA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAQA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,MAAA,GAAS,QAAQ;AAChE,UAAM,OAAO,UAAU,OAAO;AAC9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAA,CAAW,CAAC;AAAA,QACzD,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,gBAAgB,cAAc;"}

package/dist/primitives/{input.js → textbox.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../utils/cn.js";
-const Input = React.forwardRef(
+const TextBoxPrimitive = React.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -17,8 +17,8 @@ const Input = React.forwardRef(
     );
   }
 );
-Input.displayName = "Input";
+TextBoxPrimitive.displayName = "TextBoxPrimitive";
 export {
-  Input
+  TextBoxPrimitive
 };
-//# sourceMappingURL=input.js.map
+//# sourceMappingURL=textbox.js.map

package/dist/primitives/textbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textbox.js","sources":["../../src/primitives/textbox.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/utils\"\n\nconst TextBoxPrimitive = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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  }\n)\nTextBoxPrimitive.displayName = \"TextBoxPrimitive\"\n\nexport { TextBoxPrimitive }\n"],"names":[],"mappings":";;;AAIA,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AACtC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,iBAAiB,cAAc;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skybin-tech/nebula-ui",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "type": "module",
   "author": "Anwar <anwar@skybin.io>",
   "description": "Reusable React component library with form validation using shadcn/ui patterns, react-hook-form, and Zod",

package/dist/cjs/primitives/input.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.cjs","sources":["../../../src/primitives/input.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/utils\"\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,QAAQA,iBAAM;AAAA,EAClB,CAAC,EAAE,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AACtC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,MAAM,cAAc;;"}

package/dist/primitives/input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.js","sources":["../../src/primitives/input.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/utils\"\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n"],"names":[],"mappings":";;;AAIA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AACtC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,MAAM,cAAc;"}