@yomologic/react-ui 0.6.2 → 0.6.4

package/dist/index.d.mts

@@ -20,6 +20,42 @@ type ButtonAsLink = ButtonBaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchor
 type ButtonProps = ButtonAsButton | ButtonAsLink;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
+/**
+ * Input formatting utilities
+ */
+type FormatType = "phone" | "phone-intl" | "credit-card" | "date" | "datetime";
+/**
+ * Format US phone number: (123) 456-7890
+ */
+declare const formatPhoneUS: (value: string) => string;
+/**
+ * Format international phone number: +1 (123) 456-7890
+ */
+declare const formatPhoneIntl: (value: string) => string;
+/**
+ * Format credit card number: 1234 5678 9012 3456
+ */
+declare const formatCreditCard: (value: string) => string;
+/**
+ * Format date: MM/DD/YYYY
+ */
+declare const formatDate: (value: string) => string;
+/**
+ * Format datetime: MM/DD/YYYY HH:MM AM/PM
+ */
+declare const formatDateTime: (value: string) => string;
+/**
+ * Get raw value from formatted string
+ * - For phone/credit-card: returns digits only
+ * - For date: returns YYYY-MM-DD format (ISO 8601)
+ * - For datetime: returns ISO 8601 with timezone offset
+ */
+declare const getRawValue: (value: string, format?: FormatType) => string;
+/**
+ * Apply format based on format type
+ */
+declare const applyFormat: (value: string, format: FormatType) => string;
+
 interface FormState {
     values: Record<string, any>;
     errors: Record<string, string>;
@@ -62,6 +98,8 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     onValidationError?: (error: string | undefined) => void;
     /** Regex pattern for validation (string or RegExp) */
     pattern?: RegExp | string;
+    /** Format type for auto-formatting input value (phone, credit-card, date, etc.) */
+    format?: FormatType | ((value: string) => string);
     /** Custom error messages for built-in validations */
     errorMessages?: {
         required?: string;
@@ -72,6 +110,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
         pattern?: string;
         email?: string;
         url?: string;
+        date?: string;
     };
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -1107,4 +1146,47 @@ type ThemeId = keyof typeof themes;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, Badge, Button, Card, CardActionArea, CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Divider, Drawer, type NavItem$1 as DrawerNavItem, type NavSection$1 as DrawerNavSection, type DrawerProps, EmptyState, Form, type FormContextValue, FormControl, type FormControlContextValue, FormControlLabel, type FormControlProps, type FormControlState, type FormFieldProps, FormHelperText, type FormState, Input, NativeSelect, type NativeSelectProps, Nav, type NavItem$2 as NavItem, type NavProps, type NavSection, RadioGroup, Rating, SectionLayout, Select, type SelectOption, type SelectProps, SidebarNav, type NavItem as SidebarNavItem, Slider, type SliderMark, type SliderProps, Spinner, Switch, type SwitchProps, Textarea, type TextareaProps, type ThemeId, ThemeProvider, type ValidationFunction, type ValidationRule, cn, themes, useForm, useFormContext, useFormControl, useFormControlContext, useFormField, useTheme };
+/**
+ * Validation constants and regex patterns
+ */
+/**
+ * Email validation regex
+ * Matches standard email formats like: user@example.com
+ * Requires @ symbol, domain name, and TLD (like .com, .org, etc.)
+ */
+declare const EMAIL_REGEX: RegExp;
+/**
+ * URL validation regex
+ * Matches http(s) URLs
+ */
+declare const URL_REGEX: RegExp;
+/**
+ * Phone number validation regex (US format)
+ * Matches formats like: (123) 456-7890, 123-456-7890, 1234567890
+ */
+declare const PHONE_REGEX: RegExp;
+/**
+ * Validate email format
+ */
+declare const isValidEmail: (email: string) => boolean;
+/**
+ * Validate URL format and security
+ * Checks for valid http/https protocol and blocks dangerous protocols
+ */
+declare const isValidUrl: (url: string) => boolean;
+/**
+ * Date validation regex (MM/DD/YYYY)
+ * Matches formats like: 12/31/2024, 01/01/2024
+ */
+declare const DATE_REGEX: RegExp;
+/**
+ * Validate phone number format
+ */
+declare const isValidPhone: (phone: string) => boolean;
+/**
+ * Validate date format and value
+ * Checks if date is in MM/DD/YYYY format and is a valid calendar date
+ */
+declare const isValidDate: (date: string) => boolean;
+
+export { Alert, Badge, Button, Card, CardActionArea, CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, DATE_REGEX, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Divider, Drawer, type NavItem$1 as DrawerNavItem, type NavSection$1 as DrawerNavSection, type DrawerProps, EMAIL_REGEX, EmptyState, Form, type FormContextValue, FormControl, type FormControlContextValue, FormControlLabel, type FormControlProps, type FormControlState, type FormFieldProps, FormHelperText, type FormState, type FormatType, Input, NativeSelect, type NativeSelectProps, Nav, type NavItem$2 as NavItem, type NavProps, type NavSection, PHONE_REGEX, RadioGroup, Rating, SectionLayout, Select, type SelectOption, type SelectProps, SidebarNav, type NavItem as SidebarNavItem, Slider, type SliderMark, type SliderProps, Spinner, Switch, type SwitchProps, Textarea, type TextareaProps, type ThemeId, ThemeProvider, URL_REGEX, type ValidationFunction, type ValidationRule, applyFormat, cn, formatCreditCard, formatDate, formatDateTime, formatPhoneIntl, formatPhoneUS, getRawValue, isValidDate, isValidEmail, isValidPhone, isValidUrl, themes, useForm, useFormContext, useFormControl, useFormControlContext, useFormField, useTheme };

package/dist/index.d.ts

@@ -20,6 +20,42 @@ type ButtonAsLink = ButtonBaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchor
 type ButtonProps = ButtonAsButton | ButtonAsLink;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
+/**
+ * Input formatting utilities
+ */
+type FormatType = "phone" | "phone-intl" | "credit-card" | "date" | "datetime";
+/**
+ * Format US phone number: (123) 456-7890
+ */
+declare const formatPhoneUS: (value: string) => string;
+/**
+ * Format international phone number: +1 (123) 456-7890
+ */
+declare const formatPhoneIntl: (value: string) => string;
+/**
+ * Format credit card number: 1234 5678 9012 3456
+ */
+declare const formatCreditCard: (value: string) => string;
+/**
+ * Format date: MM/DD/YYYY
+ */
+declare const formatDate: (value: string) => string;
+/**
+ * Format datetime: MM/DD/YYYY HH:MM AM/PM
+ */
+declare const formatDateTime: (value: string) => string;
+/**
+ * Get raw value from formatted string
+ * - For phone/credit-card: returns digits only
+ * - For date: returns YYYY-MM-DD format (ISO 8601)
+ * - For datetime: returns ISO 8601 with timezone offset
+ */
+declare const getRawValue: (value: string, format?: FormatType) => string;
+/**
+ * Apply format based on format type
+ */
+declare const applyFormat: (value: string, format: FormatType) => string;
+
 interface FormState {
     values: Record<string, any>;
     errors: Record<string, string>;
@@ -62,6 +98,8 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     onValidationError?: (error: string | undefined) => void;
     /** Regex pattern for validation (string or RegExp) */
     pattern?: RegExp | string;
+    /** Format type for auto-formatting input value (phone, credit-card, date, etc.) */
+    format?: FormatType | ((value: string) => string);
     /** Custom error messages for built-in validations */
     errorMessages?: {
         required?: string;
@@ -72,6 +110,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
         pattern?: string;
         email?: string;
         url?: string;
+        date?: string;
     };
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -1107,4 +1146,47 @@ type ThemeId = keyof typeof themes;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, Badge, Button, Card, CardActionArea, CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Divider, Drawer, type NavItem$1 as DrawerNavItem, type NavSection$1 as DrawerNavSection, type DrawerProps, EmptyState, Form, type FormContextValue, FormControl, type FormControlContextValue, FormControlLabel, type FormControlProps, type FormControlState, type FormFieldProps, FormHelperText, type FormState, Input, NativeSelect, type NativeSelectProps, Nav, type NavItem$2 as NavItem, type NavProps, type NavSection, RadioGroup, Rating, SectionLayout, Select, type SelectOption, type SelectProps, SidebarNav, type NavItem as SidebarNavItem, Slider, type SliderMark, type SliderProps, Spinner, Switch, type SwitchProps, Textarea, type TextareaProps, type ThemeId, ThemeProvider, type ValidationFunction, type ValidationRule, cn, themes, useForm, useFormContext, useFormControl, useFormControlContext, useFormField, useTheme };
+/**
+ * Validation constants and regex patterns
+ */
+/**
+ * Email validation regex
+ * Matches standard email formats like: user@example.com
+ * Requires @ symbol, domain name, and TLD (like .com, .org, etc.)
+ */
+declare const EMAIL_REGEX: RegExp;
+/**
+ * URL validation regex
+ * Matches http(s) URLs
+ */
+declare const URL_REGEX: RegExp;
+/**
+ * Phone number validation regex (US format)
+ * Matches formats like: (123) 456-7890, 123-456-7890, 1234567890
+ */
+declare const PHONE_REGEX: RegExp;
+/**
+ * Validate email format
+ */
+declare const isValidEmail: (email: string) => boolean;
+/**
+ * Validate URL format and security
+ * Checks for valid http/https protocol and blocks dangerous protocols
+ */
+declare const isValidUrl: (url: string) => boolean;
+/**
+ * Date validation regex (MM/DD/YYYY)
+ * Matches formats like: 12/31/2024, 01/01/2024
+ */
+declare const DATE_REGEX: RegExp;
+/**
+ * Validate phone number format
+ */
+declare const isValidPhone: (phone: string) => boolean;
+/**
+ * Validate date format and value
+ * Checks if date is in MM/DD/YYYY format and is a valid calendar date
+ */
+declare const isValidDate: (date: string) => boolean;
+
+export { Alert, Badge, Button, Card, CardActionArea, CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, DATE_REGEX, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Divider, Drawer, type NavItem$1 as DrawerNavItem, type NavSection$1 as DrawerNavSection, type DrawerProps, EMAIL_REGEX, EmptyState, Form, type FormContextValue, FormControl, type FormControlContextValue, FormControlLabel, type FormControlProps, type FormControlState, type FormFieldProps, FormHelperText, type FormState, type FormatType, Input, NativeSelect, type NativeSelectProps, Nav, type NavItem$2 as NavItem, type NavProps, type NavSection, PHONE_REGEX, RadioGroup, Rating, SectionLayout, Select, type SelectOption, type SelectProps, SidebarNav, type NavItem as SidebarNavItem, Slider, type SliderMark, type SliderProps, Spinner, Switch, type SwitchProps, Textarea, type TextareaProps, type ThemeId, ThemeProvider, URL_REGEX, type ValidationFunction, type ValidationRule, applyFormat, cn, formatCreditCard, formatDate, formatDateTime, formatPhoneIntl, formatPhoneUS, getRawValue, isValidDate, isValidEmail, isValidPhone, isValidUrl, themes, useForm, useFormContext, useFormControl, useFormControlContext, useFormField, useTheme };

package/dist/index.js

@@ -6,6 +6,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -28,6 +31,62 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/constants/validation.ts
+var validation_exports = {};
+__export(validation_exports, {
+  DATE_REGEX: () => DATE_REGEX,
+  EMAIL_REGEX: () => EMAIL_REGEX,
+  PHONE_REGEX: () => PHONE_REGEX,
+  URL_REGEX: () => URL_REGEX,
+  isValidDate: () => isValidDate,
+  isValidEmail: () => isValidEmail,
+  isValidPhone: () => isValidPhone,
+  isValidUrl: () => isValidUrl
+});
+var EMAIL_REGEX, URL_REGEX, PHONE_REGEX, isValidEmail, isValidUrl, DATE_REGEX, isValidPhone, isValidDate;
+var init_validation = __esm({
+  "src/constants/validation.ts"() {
+    "use strict";
+    EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z]{2,}$/;
+    URL_REGEX = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
+    PHONE_REGEX = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
+    isValidEmail = (email) => {
+      return EMAIL_REGEX.test(email);
+    };
+    isValidUrl = (url) => {
+      if (/^(javascript|data|vbscript|file|about):/i.test(url)) {
+        return false;
+      }
+      return URL_REGEX.test(url);
+    };
+    DATE_REGEX = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
+    isValidPhone = (phone) => {
+      return PHONE_REGEX.test(phone);
+    };
+    isValidDate = (date) => {
+      if (!DATE_REGEX.test(date)) {
+        return false;
+      }
+      const [month, day, year] = date.split("/").map(Number);
+      if (year < 1900 || year > 2100) {
+        return false;
+      }
+      if (month < 1 || month > 12) {
+        return false;
+      }
+      const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+      const isLeapYear = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
+      if (isLeapYear && month === 2) {
+        daysInMonth[1] = 29;
+      }
+      if (day < 1 || day > daysInMonth[month - 1]) {
+        return false;
+      }
+      return true;
+    };
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -47,6 +106,7 @@ __export(index_exports, {
   CheckboxGroup: () => CheckboxGroup,
   CodeSnippet: () => CodeSnippet,
   Container: () => Container,
+  DATE_REGEX: () => DATE_REGEX,
   Dialog: () => Dialog,
   DialogContent: () => DialogContent,
   DialogDescription: () => DialogDescription,
@@ -55,6 +115,7 @@ __export(index_exports, {
   DialogTitle: () => DialogTitle,
   Divider: () => Divider,
   Drawer: () => Drawer,
+  EMAIL_REGEX: () => EMAIL_REGEX,
   EmptyState: () => EmptyState,
   Form: () => Form,
   FormControl: () => FormControl,
@@ -63,6 +124,7 @@ __export(index_exports, {
   Input: () => Input,
   NativeSelect: () => NativeSelect,
   Nav: () => Nav,
+  PHONE_REGEX: () => PHONE_REGEX,
   RadioGroup: () => RadioGroup,
   Rating: () => Rating,
   SectionLayout: () => SectionLayout,
@@ -73,7 +135,19 @@ __export(index_exports, {
   Switch: () => Switch,
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
+  URL_REGEX: () => URL_REGEX,
+  applyFormat: () => applyFormat,
   cn: () => cn,
+  formatCreditCard: () => formatCreditCard,
+  formatDate: () => formatDate,
+  formatDateTime: () => formatDateTime,
+  formatPhoneIntl: () => formatPhoneIntl,
+  formatPhoneUS: () => formatPhoneUS,
+  getRawValue: () => getRawValue,
+  isValidDate: () => isValidDate,
+  isValidEmail: () => isValidEmail,
+  isValidPhone: () => isValidPhone,
+  isValidUrl: () => isValidUrl,
   themes: () => themes_default,
   useForm: () => useForm,
   useFormContext: () => useFormContext,
@@ -234,8 +308,113 @@ Button.displayName = "Button";
 // src/ui/input.tsx
 var import_react5 = __toESM(require("react"));
 
+// src/lib/formatting.ts
+var formatPhoneUS = (value) => {
+  const digits = value.replace(/\D/g, "");
+  const limited = digits.slice(0, 10);
+  if (limited.length === 0) return "";
+  if (limited.length <= 3) return `(${limited}`;
+  if (limited.length <= 6)
+    return `(${limited.slice(0, 3)}) ${limited.slice(3)}`;
+  return `(${limited.slice(0, 3)}) ${limited.slice(3, 6)}-${limited.slice(6)}`;
+};
+var formatPhoneIntl = (value) => {
+  let cleaned = value.replace(/[^\d+]/g, "");
+  if (!cleaned.startsWith("+")) {
+    cleaned = "+" + cleaned;
+  }
+  cleaned = cleaned.slice(0, 16);
+  const digits = cleaned.slice(1);
+  if (digits.length === 0) return "+";
+  if (digits.length <= 1) return `+${digits}`;
+  if (digits.length <= 4) return `+${digits.slice(0, 1)} (${digits.slice(1)}`;
+  if (digits.length <= 7)
+    return `+${digits.slice(0, 1)} (${digits.slice(1, 4)}) ${digits.slice(4)}`;
+  return `+${digits.slice(0, 1)} (${digits.slice(1, 4)}) ${digits.slice(4, 7)}-${digits.slice(7)}`;
+};
+var formatCreditCard = (value) => {
+  const digits = value.replace(/\D/g, "");
+  const limited = digits.slice(0, 16);
+  return limited.replace(/(\d{4})/g, "$1 ").trim();
+};
+var formatDate = (value) => {
+  const digits = value.replace(/\D/g, "");
+  const limited = digits.slice(0, 8);
+  if (limited.length === 0) return "";
+  if (limited.length <= 2) return limited;
+  if (limited.length <= 4)
+    return `${limited.slice(0, 2)}/${limited.slice(2)}`;
+  return `${limited.slice(0, 2)}/${limited.slice(2, 4)}/${limited.slice(4)}`;
+};
+var formatDateTime = (value) => {
+  const digits = value.replace(/\D/g, "");
+  const limited = digits.slice(0, 12);
+  if (limited.length === 0) return "";
+  if (limited.length <= 2) return limited;
+  if (limited.length <= 4)
+    return `${limited.slice(0, 2)}/${limited.slice(2)}`;
+  if (limited.length <= 8)
+    return `${limited.slice(0, 2)}/${limited.slice(2, 4)}/${limited.slice(4)}`;
+  const datePart = `${limited.slice(0, 2)}/${limited.slice(2, 4)}/${limited.slice(4, 8)}`;
+  if (limited.length <= 10) return `${datePart} ${limited.slice(8)}`;
+  let hours = parseInt(limited.slice(8, 10));
+  const minutes = limited.slice(10, 12);
+  const ampm = hours >= 12 ? "PM" : "AM";
+  hours = hours % 12 || 12;
+  return `${datePart} ${hours}:${minutes} ${ampm}`;
+};
+var getRawValue = (value, format) => {
+  if (format === "date") {
+    const digits = value.replace(/\D/g, "");
+    if (digits.length === 8) {
+      const month = digits.slice(0, 2);
+      const day = digits.slice(2, 4);
+      const year = digits.slice(4, 8);
+      return `${year}-${month}-${day}`;
+    }
+    return digits;
+  }
+  if (format === "datetime") {
+    const digits = value.replace(/\D/g, "");
+    if (digits.length === 12) {
+      const month = digits.slice(0, 2);
+      const day = digits.slice(2, 4);
+      const year = digits.slice(4, 8);
+      const hours = digits.slice(8, 10);
+      const minutes = digits.slice(10, 12);
+      const date = new Date(
+        parseInt(year),
+        parseInt(month) - 1,
+        parseInt(day),
+        parseInt(hours),
+        parseInt(minutes)
+      );
+      return date.toISOString();
+    }
+    return digits;
+  }
+  return value.replace(/\D/g, "");
+};
+var applyFormat = (value, format) => {
+  switch (format) {
+    case "phone":
+      return formatPhoneUS(value);
+    case "phone-intl":
+      return formatPhoneIntl(value);
+    case "credit-card":
+      return formatCreditCard(value);
+    case "date":
+      return formatDate(value);
+    case "datetime":
+      return formatDateTime(value);
+    default:
+      return value;
+  }
+};
+
 // src/ui/hooks/useFormField.ts
 var import_react4 = require("react");
+init_validation();
 
 // src/ui/form.tsx
 var import_react2 = require("react");
@@ -807,10 +986,13 @@ function useFormField2(options) {
       return errorMessages?.required || "This field is required";
     }
     if (value) {
-      if (type === "email" && !value.includes("@")) {
+      if (type === "email" && !EMAIL_REGEX.test(value)) {
         return errorMessages?.email || "Please enter a valid email address";
       }
       if (type === "url") {
+        if (/^(javascript|data|vbscript|file|about):/i.test(value)) {
+          return errorMessages?.url || "Invalid URL protocol";
+        }
         try {
           new URL(value);
         } catch {
@@ -864,10 +1046,15 @@ function useFormField2(options) {
           return errorMessages?.required || "This field is required";
         }
         if (value) {
-          if (type === "email" && !value.includes("@")) {
+          if (type === "email" && !EMAIL_REGEX.test(value)) {
             return errorMessages?.email || "Please enter a valid email address";
           }
           if (type === "url") {
+            if (/^(javascript|data|vbscript|file|about):/i.test(
+              value
+            )) {
+              return errorMessages?.url || "Invalid URL protocol";
+            }
             try {
               new URL(value);
             } catch {
@@ -981,12 +1168,31 @@ var Input = import_react5.default.forwardRef(
     validate,
     onValidationError,
     pattern,
+    format,
     errorMessages,
     ...props
   }, ref) => {
+    const [internalValue, setInternalValue] = import_react5.default.useState("");
+    const dateValidate = import_react5.default.useCallback(
+      async (value) => {
+        if (validate) {
+          const customError = await validate(value);
+          if (customError) return customError;
+        }
+        if (format === "date" && value && value.length === 8) {
+          const { isValidDate: isValidDate2 } = await Promise.resolve().then(() => (init_validation(), validation_exports));
+          const formatted = `${value.slice(0, 2)}/${value.slice(2, 4)}/${value.slice(4, 8)}`;
+          if (!isValidDate2(formatted)) {
+            return errorMessages?.date || "Please enter a valid date";
+          }
+        }
+        return void 0;
+      },
+      [validate, format, errorMessages]
+    );
     const {
       fieldId,
-      value: inputValue,
+      value: hookValue,
       error: inputError,
       isDisabled,
       isRequired,
@@ -1008,19 +1214,71 @@ var Input = import_react5.default.forwardRef(
       min: props.min,
       max: props.max,
       pattern,
-      validate,
+      validate: format === "date" ? dateValidate : validate,
       onValidationError,
       errorMessages,
       idPrefix: "input"
     });
+    const inputValue = hookValue !== void 0 ? hookValue : internalValue;
+    const [cursorPosition, setCursorPosition] = import_react5.default.useState(null);
     const handleChange = (e) => {
-      hookHandleChange(e.target.value);
+      const input = e.target;
+      const newValue = input.value;
+      const cursorPos = input.selectionStart || 0;
+      if (format && typeof format === "string") {
+        const cleaned = newValue.replace(/\D/g, "");
+        const formatted = applyFormat(cleaned, format);
+        if (hookValue !== void 0) {
+          hookHandleChange(cleaned);
+        } else {
+          setInternalValue(cleaned);
+        }
+        let formattedPos = 0;
+        let digitCount = 0;
+        const targetDigits = cleaned.slice(
+          0,
+          Math.min(cleaned.length, cursorPos)
+        );
+        for (let i = 0; i < formatted.length && digitCount < targetDigits.length; i++) {
+          if (/\d/.test(formatted[i])) {
+            digitCount++;
+          }
+          formattedPos = i + 1;
+        }
+        setCursorPosition(formattedPos);
+      } else {
+        if (hookValue !== void 0) {
+          hookHandleChange(newValue);
+        } else {
+          setInternalValue(newValue);
+        }
+      }
       onChange?.(e);
     };
     const handleBlur = (e) => {
-      hookHandleBlur(e.target.value);
+      const value = e.target.value;
+      const blurValue = format && typeof format === "string" ? value.replace(/\D/g, "") : value;
+      hookHandleBlur(blurValue);
       onBlur?.(e);
     };
+    const displayValue = import_react5.default.useMemo(() => {
+      if (format && inputValue) {
+        if (typeof format === "function") {
+          return format(inputValue);
+        }
+        return applyFormat(inputValue, format);
+      }
+      return inputValue;
+    }, [format, inputValue]);
+    import_react5.default.useEffect(() => {
+      if (cursorPosition !== null && internalRef.current) {
+        internalRef.current.setSelectionRange(
+          cursorPosition,
+          cursorPosition
+        );
+        setCursorPosition(null);
+      }
+    }, [cursorPosition, displayValue]);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
@@ -1053,7 +1311,7 @@ var Input = import_react5.default.forwardRef(
                 },
                 type,
                 id: fieldId,
-                value: inputValue,
+                value: displayValue,
                 onChange: handleChange,
                 onBlur: handleBlur,
                 disabled: isDisabled,
@@ -5247,6 +5505,9 @@ function useTheme() {
   }
   return context;
 }
+
+// src/index.ts
+init_validation();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -5265,6 +5526,7 @@ function useTheme() {
   CheckboxGroup,
   CodeSnippet,
   Container,
+  DATE_REGEX,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -5273,6 +5535,7 @@ function useTheme() {
   DialogTitle,
   Divider,
   Drawer,
+  EMAIL_REGEX,
   EmptyState,
   Form,
   FormControl,
@@ -5281,6 +5544,7 @@ function useTheme() {
   Input,
   NativeSelect,
   Nav,
+  PHONE_REGEX,
   RadioGroup,
   Rating,
   SectionLayout,
@@ -5291,7 +5555,19 @@ function useTheme() {
   Switch,
   Textarea,
   ThemeProvider,
+  URL_REGEX,
+  applyFormat,
   cn,
+  formatCreditCard,
+  formatDate,
+  formatDateTime,
+  formatPhoneIntl,
+  formatPhoneUS,
+  getRawValue,
+  isValidDate,
+  isValidEmail,
+  isValidPhone,
+  isValidUrl,
   themes,
   useForm,
   useFormContext,