@yomologic/react-ui 0.6.0 → 0.6.3

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,59 @@ 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-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+    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) => {
+      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 +103,7 @@ __export(index_exports, {
   CheckboxGroup: () => CheckboxGroup,
   CodeSnippet: () => CodeSnippet,
   Container: () => Container,
+  DATE_REGEX: () => DATE_REGEX,
   Dialog: () => Dialog,
   DialogContent: () => DialogContent,
   DialogDescription: () => DialogDescription,
@@ -55,6 +112,7 @@ __export(index_exports, {
   DialogTitle: () => DialogTitle,
   Divider: () => Divider,
   Drawer: () => Drawer,
+  EMAIL_REGEX: () => EMAIL_REGEX,
   EmptyState: () => EmptyState,
   Form: () => Form,
   FormControl: () => FormControl,
@@ -63,6 +121,7 @@ __export(index_exports, {
   Input: () => Input,
   NativeSelect: () => NativeSelect,
   Nav: () => Nav,
+  PHONE_REGEX: () => PHONE_REGEX,
   RadioGroup: () => RadioGroup,
   Rating: () => Rating,
   SectionLayout: () => SectionLayout,
@@ -73,7 +132,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 +305,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");
@@ -676,7 +852,7 @@ function FormControl({
           {
             className: cn(
               "text-small",
-              currentError ? "text-error" : "text-(--color-muted-foreground)"
+              currentError ? "text-(--color-error)" : "text-(--color-muted-foreground)"
             ),
             id: `${fieldId}-message`,
             role: currentError ? "alert" : void 0,
@@ -748,7 +924,7 @@ function FormHelperText({
     {
       className: cn(
         "text-small",
-        isError ? "text-error" : "text-(--color-muted-foreground)",
+        isError ? "text-(--color-error)" : "text-(--color-muted-foreground)",
         className
       ),
       role: isError ? "alert" : void 0,
@@ -807,7 +983,7 @@ 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") {
@@ -864,7 +1040,7 @@ 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") {
@@ -981,12 +1157,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 +1203,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 +1300,7 @@ var Input = import_react5.default.forwardRef(
                 },
                 type,
                 id: fieldId,
-                value: inputValue,
+                value: displayValue,
                 onChange: handleChange,
                 onBlur: handleBlur,
                 disabled: isDisabled,
@@ -1066,7 +1313,7 @@ var Input = import_react5.default.forwardRef(
                   "text-(--color-foreground) placeholder-gray-400",
                   "focus:outline-none",
                   "disabled:bg-(--color-muted) disabled:cursor-not-allowed disabled:text-(--color-muted-foreground)",
-                  inputError ? "border-error focus:ring-2 focus:ring-error focus:border-error active:border-error" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) active:border-(--color-primary)",
+                  inputError ? "border-(--color-error) focus:ring-2 focus:ring-(--color-error) focus:border-(--color-error) active:border-(--color-error)" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) active:border-(--color-primary)",
                   leftIcon && "pl-10",
                   rightIcon && "pr-10",
                   className
@@ -1080,7 +1327,7 @@ var Input = import_react5.default.forwardRef(
             shouldRenderError && inputError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "p",
               {
-                className: "text-small text-error",
+                className: "text-small text-(--color-error)",
                 id: `${fieldId}-error`,
                 role: "alert",
                 children: inputError
@@ -1310,7 +1557,7 @@ var Textarea = import_react6.default.forwardRef(
                 "text-(--color-foreground) placeholder-gray-400",
                 "focus:outline-none",
                 "disabled:bg-(--color-muted) disabled:cursor-not-allowed disabled:text-(--color-muted-foreground)",
-                textareaError ? "border-error focus:ring-2 focus:ring-error focus:border-error active:border-error" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) active:border-(--color-primary)",
+                textareaError ? "border-(--color-error) focus:ring-2 focus:ring-(--color-error) focus:border-(--color-error) active:border-(--color-error)" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) active:border-(--color-primary)",
                 resizeClasses[resize],
                 autoResize && "overflow-hidden",
                 !autoResize && "overflow-auto",
@@ -1789,7 +2036,7 @@ function Checkbox({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-small text-error", role: "alert", children: displayError }) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-small text-(--color-error)", role: "alert", children: displayError }) })
   ] });
 }
 function CheckboxGroup({
@@ -1939,7 +2186,7 @@ function CheckboxGroup({
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-5 mt-1.5", children: (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
-            className: `text-small ${error ? "text-error" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${error ? "text-(--color-error)" : "text-(--color-muted-foreground)"}`,
             role: error ? "alert" : void 0,
             children: error || helperText
           }
@@ -2118,7 +2365,7 @@ function RadioGroup({
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-5 mt-1.5", children: (displayError || helperText) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "p",
           {
-            className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${displayError ? "text-(--color-error)" : "text-(--color-muted-foreground)"}`,
             role: displayError ? "alert" : void 0,
             children: displayError || helperText
           }
@@ -2347,7 +2594,7 @@ function Select({
             flex items-center justify-between
             transition-all duration-200
             outline-none
-            ${displayError ? "border-error focus:ring-2 focus:ring-error focus:border-error focus-visible:ring-2 focus-visible:ring-error focus-visible:border-error" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) focus-visible:ring-2 focus-visible:ring-(--color-primary)/30 focus-visible:border-(--color-primary)"}
+            ${displayError ? "border-(--color-error) focus:ring-2 focus:ring-(--color-error) focus:border-(--color-error) focus-visible:ring-2 focus-visible:ring-(--color-error) focus-visible:border-(--color-error)" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) focus-visible:ring-2 focus-visible:ring-(--color-primary)/30 focus-visible:border-(--color-primary)"}
             ${disabled ? "bg-(--color-muted) cursor-not-allowed opacity-60" : "hover:border-(--color-primary)"}
             ${!value ? "text-(--color-placeholder)" : "text-(--color-foreground)"}
           `,
@@ -2436,7 +2683,7 @@ function Select({
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "p",
           {
-            className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${displayError ? "text-(--color-error)" : "text-(--color-muted-foreground)"}`,
             children: displayError || helperText
           }
         ) })
@@ -2515,7 +2762,7 @@ function NativeSelect({
             style: { color: "var(--color-muted-foreground)" },
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ml-1 text-error", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ml-1 text-(--color-error)", children: "*" })
             ]
           }
         ),
@@ -2535,7 +2782,7 @@ function NativeSelect({
                     appearance-none
                     cursor-pointer
                     outline-none
-                    ${displayError ? "border-error focus:border-error active:border-error" : "border-(--color-border) focus:border-(--color-primary) active:border-(--color-primary)"}
+                    ${displayError ? "border-(--color-error) focus:border-(--color-error) active:border-(--color-error)" : "border-(--color-border) focus:border-(--color-primary) active:border-(--color-primary)"}
                     ${disabled ? "bg-(--color-muted) cursor-not-allowed opacity-60" : "hover:border-(--color-primary)"}
                     ${!value ? "text-(--color-placeholder)" : "text-(--color-foreground)"}
                     pr-10
@@ -2551,7 +2798,7 @@ function NativeSelect({
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "p",
           {
-            className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${displayError ? "text-(--color-error)" : "text-(--color-muted-foreground)"}`,
             children: displayError || helperText
           }
         ) })
@@ -5247,6 +5494,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 +5515,7 @@ function useTheme() {
   CheckboxGroup,
   CodeSnippet,
   Container,
+  DATE_REGEX,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -5273,6 +5524,7 @@ function useTheme() {
   DialogTitle,
   Divider,
   Drawer,
+  EMAIL_REGEX,
   EmptyState,
   Form,
   FormControl,
@@ -5281,6 +5533,7 @@ function useTheme() {
   Input,
   NativeSelect,
   Nav,
+  PHONE_REGEX,
   RadioGroup,
   Rating,
   SectionLayout,
@@ -5291,7 +5544,19 @@ function useTheme() {
   Switch,
   Textarea,
   ThemeProvider,
+  URL_REGEX,
+  applyFormat,
   cn,
+  formatCreditCard,
+  formatDate,
+  formatDateTime,
+  formatPhoneIntl,
+  formatPhoneUS,
+  getRawValue,
+  isValidDate,
+  isValidEmail,
+  isValidPhone,
+  isValidUrl,
   themes,
   useForm,
   useFormContext,