@yomologic/react-ui 0.6.0 → 0.6.3

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,45 @@ 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
+ */
+/**
+ * RFC 5322 compliant email validation regex (simplified)
+ * Matches standard email formats like: user@example.com
+ */
+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
+ */
+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,45 @@ 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
+ */
+/**
+ * RFC 5322 compliant email validation regex (simplified)
+ * Matches standard email formats like: user@example.com
+ */
+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
+ */
+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 };