@underverse-ui/underverse 0.2.64 → 0.2.65

package/dist/form.cjs

@@ -0,0 +1,1287 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/form.ts
+var form_exports = {};
+__export(form_exports, {
+  Form: () => Form,
+  FormActions: () => FormActions,
+  FormCheckbox: () => FormCheckbox,
+  FormControl: () => FormControl,
+  FormDescription: () => FormDescription,
+  FormField: () => FormField,
+  FormInput: () => FormInput,
+  FormItem: () => FormItem,
+  FormLabel: () => FormLabel,
+  FormMessage: () => FormMessage,
+  FormSubmitButton: () => FormSubmitButton,
+  useFormField: () => useFormField
+});
+module.exports = __toCommonJS(form_exports);
+
+// ../../components/ui/Form.tsx
+var React6 = __toESM(require("react"), 1);
+var import_react_hook_form = require("react-hook-form");
+
+// ../../lib/i18n/translation-adapter.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultTranslations = {
+  en: {
+    Common: {
+      close: "Close",
+      closeAlert: "Close alert",
+      notifications: "Notifications",
+      newNotification: "New",
+      readStatus: "Read",
+      openLink: "Open link",
+      theme: "Theme",
+      lightTheme: "Light",
+      darkTheme: "Dark",
+      systemTheme: "System",
+      density: "Density",
+      compact: "Compact",
+      normal: "Normal",
+      comfortable: "Comfortable",
+      columns: "Columns"
+    },
+    ValidationInput: {
+      required: "This field is required",
+      typeMismatch: "Invalid format",
+      pattern: "Invalid pattern",
+      tooShort: "Too short",
+      tooLong: "Too long",
+      rangeUnderflow: "Below minimum",
+      rangeOverflow: "Above maximum",
+      stepMismatch: "Step mismatch",
+      badInput: "Bad input",
+      invalid: "Invalid value"
+    },
+    Loading: {
+      loadingPage: "Loading page",
+      pleaseWait: "Please wait"
+    },
+    DatePicker: {
+      placeholder: "Select date",
+      today: "Today",
+      clear: "Clear"
+    },
+    Pagination: {
+      navigationLabel: "Pagination navigation",
+      showingResults: "Showing {startItem}\u2013{endItem} of {totalItems}",
+      firstPage: "First page",
+      previousPage: "Previous page",
+      previous: "Previous",
+      nextPage: "Next page",
+      next: "Next",
+      lastPage: "Last page",
+      pageNumber: "Page {page}",
+      itemsPerPage: "Items per page",
+      search: "Search",
+      noOptions: "No options"
+    },
+    Form: {
+      required: "This field is required"
+    },
+    OCR: {
+      imageUpload: {
+        dragDropText: "Drag & drop files here",
+        browseFiles: "Browse files",
+        supportedFormats: "Supported formats: images"
+      }
+    }
+  },
+  vi: {
+    Common: {
+      close: "\u0110\xF3ng",
+      closeAlert: "\u0110\xF3ng c\u1EA3nh b\xE1o",
+      notifications: "Th\xF4ng b\xE1o",
+      newNotification: "M\u1EDBi",
+      readStatus: "\u0110\xE3 \u0111\u1ECDc",
+      openLink: "M\u1EDF li\xEAn k\u1EBFt",
+      theme: "Ch\u1EE7 \u0111\u1EC1",
+      lightTheme: "Giao di\u1EC7n s\xE1ng",
+      darkTheme: "Giao di\u1EC7n t\u1ED1i",
+      systemTheme: "Theo h\u1EC7 th\u1ED1ng",
+      density: "M\u1EADt \u0111\u1ED9",
+      compact: "G\u1ECDn",
+      normal: "Th\u01B0\u1EDDng",
+      comfortable: "Tho\u1EA3i m\xE1i",
+      columns: "C\u1ED9t"
+    },
+    ValidationInput: {
+      required: "Tr\u01B0\u1EDDng n\xE0y l\xE0 b\u1EAFt bu\u1ED9c",
+      typeMismatch: "\u0110\u1ECBnh d\u1EA1ng kh\xF4ng h\u1EE3p l\u1EC7",
+      pattern: "Sai m\u1EABu",
+      tooShort: "Qu\xE1 ng\u1EAFn",
+      tooLong: "Qu\xE1 d\xE0i",
+      rangeUnderflow: "Nh\u1ECF h\u01A1n gi\xE1 tr\u1ECB t\u1ED1i thi\u1EC3u",
+      rangeOverflow: "L\u1EDBn h\u01A1n gi\xE1 tr\u1ECB t\u1ED1i \u0111a",
+      stepMismatch: "Sai b\u01B0\u1EDBc",
+      badInput: "Gi\xE1 tr\u1ECB kh\xF4ng h\u1EE3p l\u1EC7",
+      invalid: "Gi\xE1 tr\u1ECB kh\xF4ng h\u1EE3p l\u1EC7"
+    },
+    Loading: {
+      loadingPage: "\u0110ang t\u1EA3i trang",
+      pleaseWait: "Vui l\xF2ng ch\u1EDD"
+    },
+    DatePicker: {
+      placeholder: "Ch\u1ECDn ng\xE0y",
+      today: "H\xF4m nay",
+      clear: "X\xF3a"
+    },
+    Pagination: {
+      navigationLabel: "\u0110i\u1EC1u h\u01B0\u1EDBng ph\xE2n trang",
+      showingResults: "Hi\u1EC3n th\u1ECB {startItem}\u2013{endItem} trong t\u1ED5ng {totalItems}",
+      firstPage: "Trang \u0111\u1EA7u",
+      previousPage: "Trang tr\u01B0\u1EDBc",
+      previous: "Tr\u01B0\u1EDBc",
+      nextPage: "Trang sau",
+      next: "Sau",
+      lastPage: "Trang cu\u1ED1i",
+      pageNumber: "Trang {page}",
+      itemsPerPage: "S\u1ED1 m\u1EE5c/trang",
+      search: "T\xECm ki\u1EBFm",
+      noOptions: "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn"
+    },
+    Form: {
+      required: "Tr\u01B0\u1EDDng n\xE0y l\xE0 b\u1EAFt bu\u1ED9c"
+    },
+    OCR: {
+      imageUpload: {
+        dragDropText: "K\xE9o & th\u1EA3 \u1EA3nh v\xE0o \u0111\xE2y",
+        browseFiles: "Ch\u1ECDn t\u1EC7p",
+        supportedFormats: "H\u1ED7 tr\u1EE3 c\xE1c \u0111\u1ECBnh d\u1EA1ng \u1EA3nh"
+      }
+    }
+  },
+  ko: {
+    Common: {
+      close: "\uB2EB\uAE30",
+      closeAlert: "\uC54C\uB9BC \uB2EB\uAE30",
+      notifications: "\uC54C\uB9BC",
+      newNotification: "\uC0C8\uB85C\uC6B4",
+      readStatus: "\uC77D\uC74C",
+      openLink: "\uB9C1\uD06C \uC5F4\uAE30",
+      theme: "\uD14C\uB9C8",
+      lightTheme: "\uB77C\uC774\uD2B8",
+      darkTheme: "\uB2E4\uD06C",
+      systemTheme: "\uC2DC\uC2A4\uD15C",
+      density: "\uBC00\uB3C4",
+      compact: "\uCEF4\uD329\uD2B8",
+      normal: "\uBCF4\uD1B5",
+      comfortable: "\uC5EC\uC720",
+      columns: "\uC5F4"
+    },
+    ValidationInput: {
+      required: "\uD544\uC218 \uC785\uB825 \uD56D\uBAA9\uC785\uB2C8\uB2E4",
+      typeMismatch: "\uD615\uC2DD\uC774 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4",
+      pattern: "\uD328\uD134\uC774 \uC77C\uCE58\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4",
+      tooShort: "\uB108\uBB34 \uC9E7\uC2B5\uB2C8\uB2E4",
+      tooLong: "\uB108\uBB34 \uAE41\uB2C8\uB2E4",
+      rangeUnderflow: "\uCD5C\uC19F\uAC12\uBCF4\uB2E4 \uC791\uC2B5\uB2C8\uB2E4",
+      rangeOverflow: "\uCD5C\uB313\uAC12\uC744 \uCD08\uACFC\uD588\uC2B5\uB2C8\uB2E4",
+      stepMismatch: "\uB2E8\uACC4\uAC00 \uC77C\uCE58\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4",
+      badInput: "\uC798\uBABB\uB41C \uC785\uB825\uC785\uB2C8\uB2E4",
+      invalid: "\uC720\uD6A8\uD558\uC9C0 \uC54A\uC740 \uAC12\uC785\uB2C8\uB2E4"
+    },
+    Loading: {
+      loadingPage: "\uD398\uC774\uC9C0 \uB85C\uB529 \uC911",
+      pleaseWait: "\uC7A0\uC2DC\uB9CC \uAE30\uB2E4\uB824 \uC8FC\uC138\uC694"
+    },
+    DatePicker: {
+      placeholder: "\uB0A0\uC9DC \uC120\uD0DD",
+      today: "\uC624\uB298",
+      clear: "\uC9C0\uC6B0\uAE30"
+    },
+    Pagination: {
+      navigationLabel: "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158",
+      showingResults: "{startItem}\u2013{endItem} / \uCD1D {totalItems}\uAC1C",
+      firstPage: "\uCCAB \uD398\uC774\uC9C0",
+      previousPage: "\uC774\uC804 \uD398\uC774\uC9C0",
+      previous: "\uC774\uC804",
+      nextPage: "\uB2E4\uC74C \uD398\uC774\uC9C0",
+      next: "\uB2E4\uC74C",
+      lastPage: "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0",
+      pageNumber: "{page}\uD398\uC774\uC9C0",
+      itemsPerPage: "\uD398\uC774\uC9C0\uB2F9 \uD56D\uBAA9 \uC218",
+      search: "\uAC80\uC0C9",
+      noOptions: "\uC635\uC158 \uC5C6\uC74C"
+    },
+    Form: {
+      required: "\uD544\uC218 \uC785\uB825 \uD56D\uBAA9\uC785\uB2C8\uB2E4"
+    },
+    OCR: {
+      imageUpload: {
+        dragDropText: "\uC5EC\uAE30\uC5D0 \uD30C\uC77C\uC744 \uB4DC\uB798\uADF8 \uC564 \uB4DC\uB86D\uD558\uC138\uC694",
+        browseFiles: "\uD30C\uC77C \uCC3E\uC544\uBCF4\uAE30",
+        supportedFormats: "\uC9C0\uC6D0 \uD615\uC2DD: \uC774\uBBF8\uC9C0"
+      }
+    }
+  },
+  ja: {
+    Common: {
+      close: "\u9589\u3058\u308B",
+      closeAlert: "\u30A2\u30E9\u30FC\u30C8\u3092\u9589\u3058\u308B",
+      notifications: "\u901A\u77E5",
+      newNotification: "\u65B0\u898F",
+      readStatus: "\u65E2\u8AAD",
+      openLink: "\u30EA\u30F3\u30AF\u3092\u958B\u304F",
+      theme: "\u30C6\u30FC\u30DE",
+      lightTheme: "\u30E9\u30A4\u30C8",
+      darkTheme: "\u30C0\u30FC\u30AF",
+      systemTheme: "\u30B7\u30B9\u30C6\u30E0",
+      density: "\u5BC6\u5EA6",
+      compact: "\u30B3\u30F3\u30D1\u30AF\u30C8",
+      normal: "\u901A\u5E38",
+      comfortable: "\u3086\u3063\u305F\u308A",
+      columns: "\u5217"
+    },
+    ValidationInput: {
+      required: "\u3053\u306E\u9805\u76EE\u306F\u5FC5\u9808\u3067\u3059",
+      typeMismatch: "\u5F62\u5F0F\u304C\u6B63\u3057\u304F\u3042\u308A\u307E\u305B\u3093",
+      pattern: "\u30D1\u30BF\u30FC\u30F3\u304C\u4E00\u81F4\u3057\u307E\u305B\u3093",
+      tooShort: "\u77ED\u3059\u304E\u307E\u3059",
+      tooLong: "\u9577\u3059\u304E\u307E\u3059",
+      rangeUnderflow: "\u6700\u5C0F\u5024\u3088\u308A\u5C0F\u3055\u3044\u3067\u3059",
+      rangeOverflow: "\u6700\u5927\u5024\u3092\u8D85\u3048\u3066\u3044\u307E\u3059",
+      stepMismatch: "\u30B9\u30C6\u30C3\u30D7\u304C\u4E00\u81F4\u3057\u307E\u305B\u3093",
+      badInput: "\u5165\u529B\u304C\u7121\u52B9\u3067\u3059",
+      invalid: "\u7121\u52B9\u306A\u5024\u3067\u3059"
+    },
+    Loading: {
+      loadingPage: "\u30DA\u30FC\u30B8\u3092\u8AAD\u307F\u8FBC\u307F\u4E2D",
+      pleaseWait: "\u3057\u3070\u3089\u304F\u304A\u5F85\u3061\u304F\u3060\u3055\u3044"
+    },
+    DatePicker: {
+      placeholder: "\u65E5\u4ED8\u3092\u9078\u629E",
+      today: "\u4ECA\u65E5",
+      clear: "\u30AF\u30EA\u30A2"
+    },
+    Pagination: {
+      navigationLabel: "\u30DA\u30FC\u30B8\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3",
+      showingResults: "{startItem}\u2013{endItem} / \u5168{totalItems}\u4EF6",
+      firstPage: "\u6700\u521D\u306E\u30DA\u30FC\u30B8",
+      previousPage: "\u524D\u306E\u30DA\u30FC\u30B8",
+      previous: "\u524D\u3078",
+      nextPage: "\u6B21\u306E\u30DA\u30FC\u30B8",
+      next: "\u6B21\u3078",
+      lastPage: "\u6700\u5F8C\u306E\u30DA\u30FC\u30B8",
+      pageNumber: "{page}\u30DA\u30FC\u30B8",
+      itemsPerPage: "1\u30DA\u30FC\u30B8\u3042\u305F\u308A\u306E\u9805\u76EE\u6570",
+      search: "\u691C\u7D22",
+      noOptions: "\u30AA\u30D7\u30B7\u30E7\u30F3\u306A\u3057"
+    },
+    Form: {
+      required: "\u3053\u306E\u9805\u76EE\u306F\u5FC5\u9808\u3067\u3059"
+    },
+    OCR: {
+      imageUpload: {
+        dragDropText: "\u3053\u3053\u306B\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30E9\u30C3\u30B0\uFF06\u30C9\u30ED\u30C3\u30D7",
+        browseFiles: "\u30D5\u30A1\u30A4\u30EB\u3092\u53C2\u7167",
+        supportedFormats: "\u5BFE\u5FDC\u5F62\u5F0F\uFF1A\u753B\u50CF"
+      }
+    }
+  }
+};
+var TranslationContext = React.createContext(null);
+var nextIntlAvailable = false;
+var nextIntlUseTranslations = null;
+var nextIntlUseLocale = null;
+try {
+  const nextIntl = require("next-intl");
+  if (nextIntl && typeof nextIntl.useTranslations === "function") {
+    nextIntlAvailable = true;
+    nextIntlUseTranslations = nextIntl.useTranslations;
+    nextIntlUseLocale = nextIntl.useLocale;
+  }
+} catch {
+}
+function interpolate(template, params) {
+  if (!params) return template;
+  return template.replace(/\{(\w+)\}/g, (_, key) => {
+    const value = params[key];
+    return value !== void 0 ? String(value) : `{${key}}`;
+  });
+}
+function getInternalTranslation(namespace, locale) {
+  return (key, params) => {
+    const localeTranslations = defaultTranslations[locale] || defaultTranslations.en;
+    const parts = namespace.split(".");
+    let current = localeTranslations;
+    for (const part of parts) {
+      if (current && typeof current === "object" && part in current) {
+        current = current[part];
+      } else {
+        return interpolate(key, params);
+      }
+    }
+    if (current && typeof current === "object" && key in current) {
+      const value = current[key];
+      return typeof value === "string" ? interpolate(value, params) : interpolate(key, params);
+    }
+    return interpolate(key, params);
+  };
+}
+function useTranslations(namespace) {
+  const underverseContext = React.useContext(TranslationContext);
+  if (underverseContext) {
+    return (key, params) => {
+      const result = underverseContext.t(namespace)(key);
+      return interpolate(result, params);
+    };
+  }
+  if (nextIntlAvailable && nextIntlUseTranslations) {
+    try {
+      const nextIntlT = nextIntlUseTranslations(namespace);
+      return nextIntlT;
+    } catch {
+    }
+  }
+  return getInternalTranslation(namespace, "en");
+}
+
+// ../../lib/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(...inputs));
+}
+
+// ../../components/ui/label.tsx
+var React2 = __toESM(require("react"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var labelVariants = (0, import_class_variance_authority.cva)(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "label",
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = "Label";
+
+// ../../components/ui/Input.tsx
+var import_react = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Input = (0, import_react.forwardRef)(
+  ({
+    label,
+    error,
+    description,
+    className,
+    required,
+    variant = "default",
+    size = "md",
+    leftIcon: LeftIcon,
+    rightIcon: RightIcon,
+    clearable = false,
+    loading = false,
+    success = false,
+    onClear,
+    hint,
+    counter = false,
+    type = "text",
+    value,
+    maxLength,
+    ...rest
+  }, ref) => {
+    const [localError, setLocalError] = (0, import_react.useState)(error);
+    const [showPassword, setShowPassword] = (0, import_react.useState)(false);
+    const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+    const tv = useTranslations("ValidationInput");
+    const autoId = (0, import_react.useId)();
+    const needsId = !!(label || description || hint || error);
+    const resolvedId = rest.id || (needsId ? `input-${autoId}` : void 0);
+    const errMsg = error || localError;
+    const hasValue = value !== void 0 && value !== null && value !== "";
+    const charCount = typeof value === "string" ? value.length : 0;
+    const errorId = errMsg && resolvedId ? `${resolvedId}-error` : void 0;
+    const descId = !errMsg && (description || hint) && resolvedId ? `${resolvedId}-desc` : void 0;
+    const containerSpacing = size === "sm" ? "space-y-1.5" : "space-y-2";
+    const variantStyles = {
+      default: {
+        container: "bg-background border border-input hover:border-accent-foreground/20",
+        focus: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+        error: "border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
+      },
+      filled: {
+        container: "bg-muted/50 border border-transparent hover:bg-muted/70",
+        focus: "focus-visible:outline-none focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+        error: "bg-destructive/10 border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
+      },
+      outlined: {
+        container: "bg-transparent border border-border hover:border-accent-foreground/30",
+        focus: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+        error: "border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
+      },
+      minimal: {
+        container: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30",
+        focus: "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none",
+        error: "border-destructive focus-visible:outline-none focus-visible:border-destructive"
+      }
+    };
+    const sizeStyles = {
+      sm: {
+        input: "px-3 py-1.5 text-sm h-8 md:h-7 md:py-1 md:text-xs",
+        icon: "w-4 h-4",
+        button: "h-7 w-7"
+      },
+      md: {
+        input: "px-4 py-2 text-sm h-10",
+        icon: "w-5 h-5",
+        button: "h-8 w-8"
+      },
+      lg: {
+        input: "px-5 py-4 text-base h-12",
+        icon: "w-6 h-6",
+        button: "h-10 w-10"
+      }
+    };
+    const getErrorKey = (v) => {
+      if (v.valueMissing) return "required";
+      if (v.typeMismatch) return "typeMismatch";
+      if (v.patternMismatch) return "pattern";
+      if (v.tooShort) return "tooShort";
+      if (v.tooLong) return "tooLong";
+      if (v.rangeUnderflow) return "rangeUnderflow";
+      if (v.rangeOverflow) return "rangeOverflow";
+      if (v.stepMismatch) return "stepMismatch";
+      if (v.badInput) return "badInput";
+      return "invalid";
+    };
+    const getStatusIcon = () => {
+      if (loading) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Loader2, { className: cn("animate-spin text-muted-foreground", sizeStyles[size].icon) });
+      if (success) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.CheckCircle, { className: cn("text-success", sizeStyles[size].icon) });
+      if (errMsg) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.AlertCircle, { className: cn("text-destructive", sizeStyles[size].icon) });
+      return null;
+    };
+    const showPasswordToggle = type === "password";
+    const actualType = showPasswordToggle && showPassword ? "text" : type;
+    const { onFocus: onFocusProp, onBlur: onBlurProp, disabled } = rest;
+    const {
+      label: _label,
+      error: _error,
+      description: _description,
+      variant: _variant,
+      size: _size,
+      leftIcon: _leftIcon,
+      rightIcon: _rightIcon,
+      clearable: _clearable,
+      loading: _loading,
+      success: _success,
+      onClear: _onClear,
+      hint: _hint,
+      counter: _counter,
+      ...restInput
+    } = rest;
+    const handleFocus = (e) => {
+      setIsFocused(true);
+      onFocusProp?.(e);
+    };
+    const handleBlur = (e) => {
+      setIsFocused(false);
+      onBlurProp?.(e);
+    };
+    const radiusClass = size === "sm" ? "rounded-full" : "rounded-full";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("w-full group", containerSpacing), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "label",
+          {
+            htmlFor: resolvedId,
+            className: cn(
+              // Label size follows input size
+              size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+              "font-medium transition-colors duration-200",
+              // default color and highlight while any descendant focused
+              disabled ? "text-muted-foreground" : cn("text-foreground group-focus-within:text-primary", success && "text-primary"),
+              errMsg && "text-destructive"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        counter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "span",
+          {
+            className: cn(
+              "text-xs transition-colors duration-200",
+              charCount > maxLength * 0.9 ? "text-warning" : "text-muted-foreground",
+              charCount >= maxLength && "text-destructive"
+            ),
+            children: [
+              charCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative group", children: [
+        LeftIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: cn(
+              "absolute left-3 top-1/2 -translate-y-1/2 z-10",
+              "text-muted-foreground transition-colors duration-200",
+              // highlight icon when input (or controls) focused
+              "group-focus-within:text-primary"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LeftIcon, { className: sizeStyles[size].icon })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            ref,
+            type: actualType,
+            ...value !== void 0 ? { value } : {},
+            maxLength,
+            required,
+            id: resolvedId,
+            autoComplete: type === "password" ? "current-password" : type === "email" ? "email" : rest.autoComplete,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onInvalid: (e) => {
+              e.preventDefault();
+              const key = getErrorKey(e.currentTarget.validity);
+              setLocalError(tv(key));
+            },
+            onInput: () => setLocalError(void 0),
+            "aria-invalid": !!errMsg,
+            "aria-describedby": [errorId, descId].filter(Boolean).join(" ") || void 0,
+            className: cn(
+              "w-full text-foreground transition-all duration-200 ease-out",
+              "placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              // Size styles
+              sizeStyles[size].input,
+              radiusClass,
+              // Icon padding adjustments
+              LeftIcon && "pl-10",
+              (RightIcon || showPasswordToggle || clearable || loading || success || errMsg) && "pr-10",
+              // Variant styles
+              variantStyles[variant].container,
+              errMsg ? variantStyles[variant].error : variantStyles[variant].focus,
+              // Reduce visual weight for sm: no default drop shadows
+              size !== "sm" && variant !== "minimal" && "shadow-sm",
+              size !== "sm" && isFocused && "shadow-md",
+              className
+            ),
+            disabled,
+            ...restInput
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [
+          getStatusIcon(),
+          RightIcon && !loading && !success && !errMsg && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RightIcon, { className: cn("text-muted-foreground", sizeStyles[size].icon) }),
+          clearable && hasValue && !loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                if (onClear) return onClear();
+                rest.onChange?.({ target: { value: "" } });
+              },
+              className: cn(
+                "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-md",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                "active:bg-accent active:text-accent-foreground",
+                sizeStyles[size].button
+              ),
+              tabIndex: 0,
+              "aria-label": "Clear input",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.X, { className: sizeStyles[size].icon })
+            }
+          ),
+          showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowPassword(!showPassword),
+              className: cn(
+                "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-full",
+                "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring/40",
+                "active:bg-accent/50 active:text-accent-foreground",
+                sizeStyles[size].button
+              ),
+              tabIndex: 0,
+              "aria-label": showPassword ? "Hide password" : "Show password",
+              children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.EyeOff, { className: sizeStyles[size].icon }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Eye, { className: sizeStyles[size].icon })
+            }
+          )
+        ] }),
+        variant === "minimal" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: cn(
+              "absolute bottom-0 left-0 h-0.5 bg-linear-to-r from-primary to-primary/60 transition-all duration-300",
+              // default hidden
+              "w-0 opacity-0",
+              // expand underline when focused within input container
+              "group-focus-within:w-full group-focus-within:opacity-100"
+            )
+          }
+        )
+      ] }),
+      errMsg ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id: errorId, className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.AlertCircle, { className: "w-4 h-4 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: errMsg })
+      ] }) : null,
+      (description || hint) && !errMsg && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "p",
+        {
+          id: descId,
+          className: cn(
+            "text-xs transition-colors duration-200",
+            // follow focus state of the whole field area
+            "text-muted-foreground group-focus-within:text-primary/70"
+          ),
+          children: hint || description
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+var SearchInput = (0, import_react.forwardRef)(
+  ({ onSearch, searchDelay = 300, placeholder = "Search\u2026", ...props }, ref) => {
+    const [searchValue, setSearchValue] = (0, import_react.useState)(props.value || "");
+    import_react.default.useEffect(() => {
+      if (!onSearch) return;
+      const timer = setTimeout(() => {
+        onSearch(searchValue);
+      }, searchDelay);
+      return () => clearTimeout(timer);
+    }, [searchValue, onSearch, searchDelay]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Input,
+      {
+        ref,
+        type: "search",
+        leftIcon: import_lucide_react.Search,
+        placeholder,
+        clearable: true,
+        value: searchValue,
+        onChange: (e) => setSearchValue(e.target.value),
+        onClear: () => setSearchValue(""),
+        ...props
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+var PasswordInput = (0, import_react.forwardRef)(
+  ({ showStrength = false, strengthLabels = ["Weak", "Fair", "Good", "Strong"], ...props }, ref) => {
+    const getPasswordStrength = (password) => {
+      let score = 0;
+      if (password.length >= 8) score++;
+      if (/[a-z]/.test(password)) score++;
+      if (/[A-Z]/.test(password)) score++;
+      if (/[0-9]/.test(password)) score++;
+      if (/[^A-Za-z0-9]/.test(password)) score++;
+      return Math.min(score, 4);
+    };
+    const strength = showStrength && typeof props.value === "string" ? getPasswordStrength(props.value) : 0;
+    const strengthColors = ["bg-destructive", "bg-warning", "bg-warning", "bg-success"];
+    const strengthLabel = strengthLabels[strength - 1];
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, { ref, type: "password", ...props }),
+      showStrength && props.value && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((level) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: cn(
+              "h-1 flex-1 rounded-full transition-colors duration-300",
+              level <= strength ? strengthColors[strength - 1] : "bg-muted"
+            )
+          },
+          level
+        )) }),
+        strengthLabel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "p",
+          {
+            className: cn(
+              "text-xs font-medium",
+              strength <= 1 ? "text-destructive" : strength <= 2 ? "text-warning" : strength <= 3 ? "text-warning" : "text-success"
+            ),
+            children: strengthLabel
+          }
+        )
+      ] })
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+var NumberInput = (0, import_react.forwardRef)(
+  ({ min, max, step = 1, showSteppers = true, onIncrement, onDecrement, formatThousands = false, locale = "vi-VN", value, onChange, ...props }, ref) => {
+    const toNumber = (v) => {
+      if (v === "" || v === void 0 || v === null) return 0;
+      const n = Number(v);
+      return Number.isFinite(n) ? n : 0;
+    };
+    const format = import_react.default.useCallback((n) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(n), [locale]);
+    const parse = (s) => {
+      const digits = (s || "").replace(/\D+/g, "");
+      return digits ? Number(digits) : NaN;
+    };
+    const [displayValue, setDisplayValue] = import_react.default.useState(
+      formatThousands ? value !== void 0 && value !== null && value !== "" ? format(toNumber(value)) : "" : String(value ?? "")
+    );
+    const currentValue = toNumber(value);
+    import_react.default.useEffect(() => {
+      if (formatThousands) {
+        const next = value === "" || value === void 0 || value === null ? "" : format(toNumber(value));
+        setDisplayValue((prev) => prev === next ? prev : next);
+      } else {
+        const next = String(value ?? "");
+        setDisplayValue((prev) => prev === next ? prev : next);
+      }
+    }, [value, formatThousands, locale, format]);
+    const handleIncrement = () => {
+      if (onIncrement) {
+        onIncrement();
+      } else if (onChange) {
+        const newValue = Math.min(currentValue + step, max ?? Infinity);
+        if (formatThousands) setDisplayValue(format(newValue));
+        onChange({ target: { value: newValue.toString() } });
+      }
+    };
+    const handleDecrement = () => {
+      if (onDecrement) {
+        onDecrement();
+      } else if (onChange) {
+        const newValue = Math.max(currentValue - step, min ?? -Infinity);
+        if (formatThousands) setDisplayValue(format(newValue));
+        onChange({ target: { value: newValue.toString() } });
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Input,
+        {
+          ref,
+          type: formatThousands ? "text" : "number",
+          min,
+          max,
+          step,
+          rightIcon: showSteppers ? void 0 : props.rightIcon,
+          value: displayValue,
+          onChange: (e) => {
+            if (!onChange) return;
+            if (!formatThousands) return onChange(e);
+            const raw = e.target.value;
+            const parsed = parse(raw);
+            if (Number.isNaN(parsed)) {
+              setDisplayValue("");
+              onChange({ target: { value: "" } });
+            } else {
+              const bounded = Math.min(Math.max(parsed, min ?? -Infinity), max ?? Infinity);
+              setDisplayValue(format(bounded));
+              onChange({ target: { value: bounded.toString() } });
+            }
+          },
+          ...props,
+          className: cn(
+            showSteppers && [
+              "pr-12",
+              // Hide native browser steppers
+              "[&::-webkit-outer-spin-button]:appearance-none",
+              "[&::-webkit-inner-spin-button]:appearance-none",
+              "[&::-webkit-inner-spin-button]:m-0",
+              "appearance-none"
+            ],
+            props.className
+          )
+        }
+      ),
+      showSteppers && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleIncrement,
+            disabled: max !== void 0 && currentValue >= max,
+            className: cn(
+              "flex items-center justify-center w-4 h-4 rounded-md transition-colors",
+              "hover:bg-accent focus:outline-none focus:bg-accent",
+              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+              "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-label": "Increase value",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 2L6 6H2L4 2Z", fill: "currentColor" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleDecrement,
+            disabled: min !== void 0 && currentValue <= min,
+            className: cn(
+              "flex items-center justify-center w-4 h-4 rounded-md transition-colors",
+              "hover:bg-accent focus:outline-none focus:bg-accent",
+              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+              "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-label": "Decrease value",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 6L2 2H6L4 6Z", fill: "currentColor" }) })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+var Textarea = (0, import_react.forwardRef)(
+  ({ label, error, description, variant = "default", resize = "vertical", counter = false, className, required, value, maxLength, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+    const charCount = typeof value === "string" ? value.length : 0;
+    const variantStyles = {
+      default: "bg-background border border-input hover:border-accent-foreground/20 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+      filled: "bg-muted/50 border border-transparent hover:bg-muted/70 focus-visible:outline-none focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+      outlined: "bg-transparent border border-border hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+      minimal: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none"
+    };
+    const resizeClasses = {
+      none: "resize-none",
+      vertical: "resize-y",
+      horizontal: "resize-x",
+      both: "resize"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "w-full space-y-2", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "label",
+          {
+            className: cn(
+              "text-sm font-medium transition-colors duration-200",
+              isFocused ? "text-primary" : "text-foreground",
+              error && "text-destructive"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        counter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "span",
+          {
+            className: cn(
+              "text-xs transition-colors duration-200",
+              charCount > maxLength * 0.9 ? "text-warning" : "text-muted-foreground",
+              charCount >= maxLength && "text-destructive"
+            ),
+            children: [
+              charCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "textarea",
+        {
+          ref,
+          value,
+          maxLength,
+          required,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          className: cn(
+            "w-full rounded-full px-4 py-3 text-sm text-foreground transition-all duration-200",
+            "placeholder:text-muted-foreground focus:outline-none min-h-20",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            variantStyles[variant],
+            // DÒNG NÀY ĐÃ ĐƯỢC CẬP NHẬT:
+            error && "border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+            resizeClasses[resize],
+            isFocused && "shadow-md",
+            variant !== "minimal" && "shadow-sm",
+            className
+          ),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.AlertCircle, { className: "w-4 h-4 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: error })
+      ] }),
+      description && !error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cn("text-xs transition-colors duration-200", isFocused ? "text-primary/70" : "text-muted-foreground"), children: description })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+var Input_default = Input;
+
+// ../../components/ui/Button.tsx
+var import_react2 = require("react");
+
+// ../../lib/constants/constants-ui/button.ts
+var VARIANT_STYLES_BTN = {
+  // Mặc định: tối giản, rõ ràng, dùng tokens hệ màu
+  default: "bg-background/80 backdrop-blur-sm text-foreground border border-border hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  // Viền: trong suốt, viền tinh tế, hover nhẹ
+  outline: "bg-transparent backdrop-blur-sm border border-input hover:bg-accent/40 hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  // Primary: dùng brand, bỏ hiệu ứng scale/shadow mạnh
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm border border-primary/20 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 shadow-sm border border-secondary/20 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  success: "bg-success text-success-foreground hover:bg-success/90 shadow-sm border border-success/20 focus-visible:ring-2 focus-visible:ring-success/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  danger: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm border border-destructive/20 focus-visible:ring-2 focus-visible:ring-destructive/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  // Alias for shadcn-style prop naming used in some components
+  destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm border border-destructive/20 focus-visible:ring-2 focus-visible:ring-destructive/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  warning: "bg-warning text-warning-foreground hover:bg-warning/90 shadow-sm border border-warning/20 focus-visible:ring-2 focus-visible:ring-warning/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  info: "bg-info text-info-foreground hover:bg-info/90 shadow-sm border border-info/20 focus-visible:ring-2 focus-visible:ring-info/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  // Ghost: minimal
+  ghost: "bg-transparent hover:bg-accent/20 hover:text-accent-foreground backdrop-blur-sm transition-colors",
+  // Link: chỉ văn bản
+  link: "text-primary bg-transparent underline-offset-4 hover:underline hover:text-primary/85 transition-colors",
+  // Gradient: smooth gradient từ primary → secondary (cùng tone)
+  gradient: "bg-linear-to-r from-primary via-primary/80 to-secondary text-primary-foreground hover:opacity-90 shadow-md border-0"
+};
+var SIZE_STYLES_BTN = {
+  sm: "px-3 py-1.5 text-sm h-8 min-w-8 md:px-2.5 md:py-1 md:h-7 md:text-xs",
+  md: "px-4 py-2 text-sm h-10 min-w-10 md:px-3 md:py-1.5 md:h-9",
+  lg: "px-6 py-3 text-base h-12 min-w-12 md:px-4 md:py-2 md:h-10 md:text-sm",
+  smx: "px-3.5 py-1.5 text-[13px] h-9 min-w-9 md:px-3 md:py-1 md:h-8 md:text-xs",
+  icon: "w-11 h-11 p-0 rounded-full flex items-center justify-center md:w-10 md:h-10"
+};
+
+// ../../components/ui/Button.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Button = (0, import_react2.forwardRef)(
+  ({
+    onClick,
+    children,
+    type = "button",
+    icon: Icon,
+    iconRight: IconRight,
+    variant = "default",
+    size = "md",
+    className = "",
+    iConClassName = "",
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    title,
+    spinner: Spinner,
+    loadingText,
+    preserveChildrenOnLoading = false,
+    // custom behavior props (do not forward to DOM)
+    preventDoubleClick = false,
+    lockMs = 600,
+    asContainer = false,
+    noWrap = true,
+    noHoverOverlay = false,
+    gradient = false,
+    ...rest
+  }, ref) => {
+    const baseStyles = asContainer ? "relative inline-flex justify-center rounded-full font-medium transition-colors duration-150 ease-soft outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px" : "relative inline-flex items-center justify-center gap-2 rounded-full font-medium overflow-hidden transition-colors duration-150 ease-soft outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px";
+    const finalVariant = gradient ? "gradient" : variant;
+    const variantStyle = VARIANT_STYLES_BTN[finalVariant] || VARIANT_STYLES_BTN.default;
+    const sizeStyle = SIZE_STYLES_BTN[size] || SIZE_STYLES_BTN.md;
+    const SpinnerIcon = Spinner ?? import_lucide_react2.Activity;
+    const [locked, setLocked] = (0, import_react2.useState)(false);
+    const lockTimer = (0, import_react2.useRef)(null);
+    const handleClick = (0, import_react2.useCallback)(
+      async (e) => {
+        if (disabled || loading) return;
+        if (preventDoubleClick) {
+          if (locked) return;
+          setLocked(true);
+          try {
+            const result = onClick?.(e);
+            if (result && typeof result === "object" && typeof result.then === "function") {
+              await result;
+              setLocked(false);
+            } else {
+              const ms = lockMs ?? 600;
+              if (lockTimer.current) clearTimeout(lockTimer.current);
+              lockTimer.current = setTimeout(() => setLocked(false), ms);
+            }
+          } catch (err) {
+            setLocked(false);
+            throw err;
+          }
+        } else {
+          onClick?.(e);
+        }
+      },
+      [disabled, loading, onClick, locked, preventDoubleClick, lockMs]
+    );
+    const computedDisabled = disabled || loading || (preventDoubleClick ? locked : false);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        ref,
+        type,
+        onClick: handleClick,
+        title,
+        className: cn(
+          baseStyles,
+          variantStyle,
+          sizeStyle,
+          "group",
+          noWrap && "whitespace-nowrap",
+          {
+            "cursor-pointer hover:opacity-95": !computedDisabled,
+            "opacity-50 cursor-not-allowed": computedDisabled,
+            "w-full": fullWidth
+          },
+          className
+        ),
+        disabled: computedDisabled,
+        "aria-disabled": computedDisabled,
+        "aria-busy": loading,
+        "data-variant": variant,
+        "data-size": size,
+        "data-locked": preventDoubleClick ? locked ? "true" : "false" : void 0,
+        "aria-label": rest["aria-label"] || title,
+        ...rest,
+        children: [
+          !noHoverOverlay ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute inset-0 bg-linear-to-r from-primary-foreground/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 dark:hidden" }) : null,
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SpinnerIcon, { className: "w-4 h-4 animate-spin", "aria-hidden": "true" }),
+            loadingText ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ml-2", "aria-live": "polite", children: loadingText }) : null,
+            preserveChildrenOnLoading && !loadingText ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ml-2 opacity-70", "aria-hidden": true, children }) : null
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            Icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: cn("transition-transform duration-200", iConClassName ? iConClassName : "w-5 h-5") }) : null,
+            children,
+            IconRight ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconRight, { className: "w-4 h-4 transition-transform duration-200" }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Button_default = Button;
+
+// ../../components/ui/CheckBox.tsx
+var React5 = __toESM(require("react"), 1);
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Checkbox = React5.forwardRef(
+  ({ className, label, labelClassName, containerClassName, checked, defaultChecked, onChange, ...props }, ref) => {
+    const [internalChecked, setInternalChecked] = React5.useState(defaultChecked ?? false);
+    const isControlled = checked !== void 0;
+    const isChecked = isControlled ? checked : internalChecked;
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalChecked(e.target.checked);
+      }
+      onChange?.(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: cn("inline-flex items-center gap-2 cursor-pointer select-none", containerClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "checkbox", ref, checked: isChecked, onChange: handleChange, className: "hidden", ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          className: cn(
+            "w-5 h-5 border rounded-md flex items-center justify-center transition-all duration-200 ease-soft",
+            "hover:shadow-sm active:scale-95",
+            isChecked ? "bg-primary border-primary shadow-md text-primary-foreground" : "bg-background border-input hover:border-accent-foreground/30 hover:bg-accent/10"
+          ),
+          children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Check, { className: "w-4 h-4" })
+        }
+      ),
+      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("text-sm text-foreground", labelClassName), children: label })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// ../../components/ui/Form.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var FormConfigContext = React6.createContext({ size: "md" });
+var FormWrapper = ({
+  children,
+  onSubmit,
+  initialValues,
+  validationSchema,
+  className,
+  size = "md",
+  ...props
+}) => {
+  const methods = (0, import_react_hook_form.useForm)({
+    defaultValues: initialValues
+  });
+  React6.useEffect(() => {
+    if (initialValues) {
+      methods.reset(initialValues);
+    }
+  }, [JSON.stringify(initialValues)]);
+  const { validationSchema: _, ...formProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
+};
+var Form = FormWrapper;
+var FormFieldContext = React6.createContext({});
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_hook_form.Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React6.useContext(FormFieldContext);
+  const itemContext = React6.useContext(FormItemContext);
+  const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
+  if (!fieldContext) {
+    try {
+      const t = useTranslations("Form");
+      throw new Error(t("validation.mustBeUsedWithinForm"));
+    } catch {
+      throw new Error("useFormField must be used within FormField");
+    }
+  }
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext = React6.createContext({});
+var FormItem = React6.forwardRef(({ className, ...props }, ref) => {
+  const id = React6.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React6.forwardRef(
+  ({ className, children, required, ...props }, ref) => {
+    const { error, formItemId } = useFormField();
+    const config = React6.useContext(FormConfigContext);
+    const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
+      children,
+      required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+    ] });
+  }
+);
+FormLabel.displayName = "FormLabel";
+var FormControl = React6.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React6.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React6.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
+});
+FormMessage.displayName = "FormMessage";
+var FormInput = React6.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  FormField,
+  {
+    name,
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormMessage, {})
+    ] })
+  }
+) }));
+FormInput.displayName = "FormInput";
+var FormCheckbox = React6.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  FormField,
+  {
+    name,
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        Checkbox,
+        {
+          ref,
+          checked: field.value,
+          onChange: (e) => field.onChange(e.target.checked),
+          labelClassName: cn(
+            // align label text size with inputs/buttons by form size
+            size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+            props.labelClassName
+          ),
+          ...props
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormMessage, {})
+    ] })
+  }
+) }));
+FormCheckbox.displayName = "FormCheckbox";
+var FormActions = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+FormActions.displayName = "FormActions";
+var FormSubmitButton = React6.forwardRef(
+  ({ children, loading, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading, ...props, children }) })
+);
+FormSubmitButton.displayName = "FormSubmitButton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form,
+  FormActions,
+  FormCheckbox,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormInput,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormSubmitButton,
+  useFormField
+});
+//# sourceMappingURL=form.cjs.map