@yomologic/react-ui 0.6.0 → 0.6.3

package/dist/index.mjs

@@ -1,4 +1,66 @@
 "use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 });
+};
+
+// 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/ui/button.tsx
 import React from "react";
@@ -150,7 +212,112 @@ Button.displayName = "Button";
 // src/ui/input.tsx
 import React2 from "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
+init_validation();
 import { useEffect, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
 
 // src/ui/form.tsx
@@ -607,7 +774,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,
@@ -679,7 +846,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,
@@ -738,7 +905,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") {
@@ -795,7 +962,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") {
@@ -912,12 +1079,31 @@ var Input = React2.forwardRef(
     validate,
     onValidationError,
     pattern,
+    format,
     errorMessages,
     ...props
   }, ref) => {
+    const [internalValue, setInternalValue] = React2.useState("");
+    const dateValidate = React2.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,
@@ -939,19 +1125,71 @@ var Input = React2.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] = React2.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 = React2.useMemo(() => {
+      if (format && inputValue) {
+        if (typeof format === "function") {
+          return format(inputValue);
+        }
+        return applyFormat(inputValue, format);
+      }
+      return inputValue;
+    }, [format, inputValue]);
+    React2.useEffect(() => {
+      if (cursorPosition !== null && internalRef.current) {
+        internalRef.current.setSelectionRange(
+          cursorPosition,
+          cursorPosition
+        );
+        setCursorPosition(null);
+      }
+    }, [cursorPosition, displayValue]);
     return /* @__PURE__ */ jsxs3(
       "div",
       {
@@ -984,7 +1222,7 @@ var Input = React2.forwardRef(
                 },
                 type,
                 id: fieldId,
-                value: inputValue,
+                value: displayValue,
                 onChange: handleChange,
                 onBlur: handleBlur,
                 disabled: isDisabled,
@@ -997,7 +1235,7 @@ var Input = React2.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
@@ -1011,7 +1249,7 @@ var Input = React2.forwardRef(
             shouldRenderError && inputError && /* @__PURE__ */ jsx4(
               "p",
               {
-                className: "text-small text-error",
+                className: "text-small text-(--color-error)",
                 id: `${fieldId}-error`,
                 role: "alert",
                 children: inputError
@@ -1241,7 +1479,7 @@ var Textarea = React3.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",
@@ -1720,7 +1958,7 @@ function Checkbox({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ jsx8("p", { className: "text-small text-error", role: "alert", children: displayError }) })
+    /* @__PURE__ */ jsx8("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ jsx8("p", { className: "text-small text-(--color-error)", role: "alert", children: displayError }) })
   ] });
 }
 function CheckboxGroup({
@@ -1870,7 +2108,7 @@ function CheckboxGroup({
         /* @__PURE__ */ jsx8("div", { className: "h-5 mt-1.5", children: (error || helperText) && /* @__PURE__ */ jsx8(
           "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
           }
@@ -2049,7 +2287,7 @@ function RadioGroup({
         /* @__PURE__ */ jsx9("div", { className: "h-5 mt-1.5", children: (displayError || helperText) && /* @__PURE__ */ jsx9(
           "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
           }
@@ -2278,7 +2516,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)"}
           `,
@@ -2367,7 +2605,7 @@ function Select({
         /* @__PURE__ */ jsx10("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ jsx10(
           "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
           }
         ) })
@@ -2446,7 +2684,7 @@ function NativeSelect({
             style: { color: "var(--color-muted-foreground)" },
             children: [
               label,
-              required && /* @__PURE__ */ jsx11("span", { className: "ml-1 text-error", children: "*" })
+              required && /* @__PURE__ */ jsx11("span", { className: "ml-1 text-(--color-error)", children: "*" })
             ]
           }
         ),
@@ -2466,7 +2704,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
@@ -2482,7 +2720,7 @@ function NativeSelect({
         /* @__PURE__ */ jsx11("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ jsx11(
           "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
           }
         ) })
@@ -5183,6 +5421,9 @@ function useTheme() {
   }
   return context;
 }
+
+// src/index.ts
+init_validation();
 export {
   Alert,
   Badge,
@@ -5200,6 +5441,7 @@ export {
   CheckboxGroup,
   CodeSnippet,
   Container,
+  DATE_REGEX,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -5208,6 +5450,7 @@ export {
   DialogTitle,
   Divider,
   Drawer,
+  EMAIL_REGEX,
   EmptyState,
   Form,
   FormControl,
@@ -5216,6 +5459,7 @@ export {
   Input,
   NativeSelect,
   Nav,
+  PHONE_REGEX,
   RadioGroup,
   Rating,
   SectionLayout,
@@ -5226,7 +5470,19 @@ export {
   Switch,
   Textarea,
   ThemeProvider,
+  URL_REGEX,
+  applyFormat,
   cn,
+  formatCreditCard,
+  formatDate,
+  formatDateTime,
+  formatPhoneIntl,
+  formatPhoneUS,
+  getRawValue,
+  isValidDate,
+  isValidEmail,
+  isValidPhone,
+  isValidUrl,
   themes_default as themes,
   useForm,
   useFormContext,