@underverse-ui/underverse 0.2.65 → 0.2.66

package/dist/index.cjs

@@ -28,8 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   AccessDenied: () => AccessDenied,
   Alert: () => Alert_default,
   AreaChart: () => AreaChart,
@@ -64,6 +64,17 @@ __export(src_exports, {
   FallingIcons: () => FallingIcons,
   FloatingContacts: () => FloatingContacts,
   ForceInternalTranslationsProvider: () => ForceInternalTranslationsProvider,
+  Form: () => Form,
+  FormActions: () => FormActions,
+  FormCheckbox: () => FormCheckbox,
+  FormControl: () => FormControl,
+  FormDescription: () => FormDescription,
+  FormField: () => FormField,
+  FormInput: () => FormInput,
+  FormItem: () => FormItem,
+  FormLabel: () => FormLabel,
+  FormMessage: () => FormMessage,
+  FormSubmitButton: () => FormSubmitButton,
   GaugeChart: () => GaugeChart,
   GlobalLoading: () => GlobalLoading,
   GradientBadge: () => GradientBadge,
@@ -160,6 +171,7 @@ __export(src_exports, {
   injectAnimationStyles: () => injectAnimationStyles,
   shadcnAnimationStyles: () => shadcnAnimationStyles2,
   underverseMessages: () => underverseMessages,
+  useFormField: () => useFormField,
   useShadCNAnimations: () => useShadCNAnimations2,
   useSmartLocale: () => useSmartLocale,
   useSmartTranslations: () => useSmartTranslations,
@@ -169,7 +181,7 @@ __export(src_exports, {
   useUnderverseLocale: () => useUnderverseLocale,
   useUnderverseTranslations: () => useUnderverseTranslations
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // ../../components/ui/Button.tsx
 var import_react = require("react");
@@ -13598,9 +13610,152 @@ function DataTable({
 }
 var DataTable_default = DataTable;
 
+// ../../components/ui/Form.tsx
+var React49 = __toESM(require("react"), 1);
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var FormConfigContext = React49.createContext({ size: "md" });
+var FormWrapper = ({
+  children,
+  onSubmit,
+  initialValues,
+  validationSchema,
+  className,
+  size = "md",
+  ...props
+}) => {
+  const methods = (0, import_react_hook_form.useForm)({
+    defaultValues: initialValues
+  });
+  React49.useEffect(() => {
+    if (initialValues) {
+      methods.reset(initialValues);
+    }
+  }, [JSON.stringify(initialValues)]);
+  const { validationSchema: _, ...formProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
+};
+var Form = FormWrapper;
+var FormFieldContext = React49.createContext({});
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_hook_form.Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React49.useContext(FormFieldContext);
+  const itemContext = React49.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 = React49.createContext({});
+var FormItem = React49.forwardRef(({ className, ...props }, ref) => {
+  const id = React49.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React49.forwardRef(
+  ({ className, children, required, ...props }, ref) => {
+    const { error, formItemId } = useFormField();
+    const config = React49.useContext(FormConfigContext);
+    const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
+      children,
+      required && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+    ] });
+  }
+);
+FormLabel.displayName = "FormLabel";
+var FormControl = React49.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "div",
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React49.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React49.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_runtime58.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
+});
+FormMessage.displayName = "FormMessage";
+var FormInput = React49.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  FormField,
+  {
+    name,
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormMessage, {})
+    ] })
+  }
+) }));
+FormInput.displayName = "FormInput";
+var FormCheckbox = React49.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  FormField,
+  {
+    name,
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime58.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_runtime58.jsx)(FormMessage, {})
+    ] })
+  }
+) }));
+FormCheckbox.displayName = "FormCheckbox";
+var FormActions = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+FormActions.displayName = "FormActions";
+var FormSubmitButton = React49.forwardRef(
+  ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
+);
+FormSubmitButton.displayName = "FormSubmitButton";
+
 // ../../components/ui/NotificationModal.tsx
 var import_lucide_react28 = require("lucide-react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function NotificationModal({ isOpen, onClose, notification, titleText, openLinkText, closeText }) {
   const t = useTranslations("Common");
   if (!notification) return null;
@@ -13621,20 +13776,20 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
       onClose();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Modal_default, { isOpen, onClose, title: titleText || t("notifications"), size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: cn("w-2 h-2 rounded-full", !notification.is_read ? "bg-primary" : "bg-border") }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Modal_default, { isOpen, onClose, title: titleText || t("notifications"), size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: cn("w-2 h-2 rounded-full", !notification.is_read ? "bg-primary" : "bg-border") }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
     ] }),
-    notification.title && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
-    notification.body && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
-      hasLink && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button_default, { variant: "primary", size: "sm", onClick: handleLinkClick, className: "gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react28.ExternalLink, { className: "w-4 h-4" }),
+    notification.title && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
+    notification.body && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
+      hasLink && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Button_default, { variant: "primary", size: "sm", onClick: handleLinkClick, className: "gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react28.ExternalLink, { className: "w-4 h-4" }),
         openLinkText || t("openLink")
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: onClose, children: closeText || t("close") })
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: onClose, children: closeText || t("close") })
     ] })
   ] }) });
 }
@@ -13644,9 +13799,9 @@ var NotificationModal_default = NotificationModal;
 var import_link2 = __toESM(require("next/link"), 1);
 var import_navigation = require("next/navigation");
 var import_lucide_react29 = require("lucide-react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function MessengerIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "path",
     {
       d: "M12 2C6.477 2 2 6.145 2 11.235c0 2.93 1.35 5.542 3.464 7.25v3.515l3.344-1.836c.894.247 1.843.375 2.192.375 5.523 0 10-4.145 10-9.235S17.523 2 12 2zm.994 12.444l-2.563-2.73-5.004 2.73 5.507-5.84 2.626 2.729 4.942-2.729-5.508 5.84z",
@@ -13655,7 +13810,7 @@ function MessengerIcon(props) {
   ) });
 }
 function ZaloIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("svg", { viewBox: "0 0 48 48", width: 20, height: 20, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", { viewBox: "0 0 48 48", width: 20, height: 20, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "path",
     {
       fill: "white",
@@ -13664,7 +13819,7 @@ function ZaloIcon(props) {
   ) });
 }
 function InstagramIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("svg", { viewBox: "0 0 24 24", width: 20, height: 20, "aria-hidden": "true", fill: "white", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", { viewBox: "0 0 24 24", width: 20, height: 20, "aria-hidden": "true", fill: "white", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) });
 }
 function FloatingContacts({ className }) {
   const pathname = (0, import_navigation.usePathname)();
@@ -13699,8 +13854,8 @@ function FloatingContacts({ className }) {
       external: true
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("fixed bottom-6 right-4 z-100000", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: cn("fixed bottom-6 right-4 z-100000", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       import_link2.default,
       {
         href: `tel:${hotline.replace(/\D/g, "")}`,
@@ -13711,10 +13866,10 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           "bg-[#22c55e]"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react29.Phone, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react29.Phone, { className: "w-6 h-6" })
       }
     ),
-    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       import_link2.default,
       {
         href,
@@ -13726,7 +13881,7 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           bg
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { className: "w-6 h-6" })
       },
       key
     ))
@@ -13735,7 +13890,7 @@ function FloatingContacts({ className }) {
 
 // ../../components/ui/AccessDenied.tsx
 var import_lucide_react30 = require("lucide-react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var VARIANT_STYLES = {
   destructive: { bg: "bg-destructive/5", border: "border-destructive/20", text: "text-destructive" },
   warning: { bg: "bg-warning/5", border: "border-warning/20", text: "text-warning" },
@@ -13756,13 +13911,13 @@ function AccessDenied({
 }) {
   const styles = VARIANT_STYLES[variant];
   const UsedIcon = Icon || DEFAULT_ICONS[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
     ] }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
+    children && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
   ] }) });
 }
 
@@ -13770,7 +13925,7 @@ function AccessDenied({
 var import_lucide_react31 = require("lucide-react");
 var import_react33 = require("react");
 var import_react_dom7 = require("react-dom");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -13799,8 +13954,8 @@ function ThemeToggleHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       Button_default,
       {
         variant: "ghost",
@@ -13818,25 +13973,25 @@ function ThemeToggleHeadless({
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Theme",
-        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CurrentIcon, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && (0, import_react_dom7.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "div",
           {
             className: "z-9999 bg-card border border-border rounded-lg shadow-lg overflow-hidden",
             style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
-            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
               themes.map((opt) => {
                 const Icon = opt.icon;
                 const active = theme === opt.value;
-                return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
                   Button_default,
                   {
                     variant: "ghost",
@@ -13852,9 +14007,9 @@ function ThemeToggleHeadless({
                     role: "menuitemradio",
                     "aria-checked": active,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
-                      active && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
+                      active && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
                     ]
                   },
                   opt.value
@@ -13873,7 +14028,7 @@ function ThemeToggleHeadless({
 var import_react34 = require("react");
 var import_react_dom8 = require("react-dom");
 var import_lucide_react32 = require("lucide-react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -13895,8 +14050,8 @@ function LanguageSwitcherHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       Button_default,
       {
         variant: "ghost",
@@ -13915,22 +14070,22 @@ function LanguageSwitcherHeadless({
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Language",
         title: labels?.heading ?? "Language",
-        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react32.Globe, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react32.Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && (0, import_react_dom8.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "div",
           {
             className: "z-9999 bg-card border border-border rounded-lg shadow-lg overflow-hidden",
             style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
-            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
-              locales.map((language) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
+              locales.map((language) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -13943,9 +14098,9 @@ function LanguageSwitcherHeadless({
                   role: "menuitemradio",
                   "aria-checked": currentLocale === language.code,
                   children: [
-                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-lg", children: language.flag }),
-                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "flex-1 text-left", children: language.name }),
-                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-lg", children: language.flag }),
+                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "flex-1 text-left", children: language.name }),
+                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
                   ]
                 },
                 language.code
@@ -14375,7 +14530,7 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // src/contexts/TranslationContext.tsx
-var React50 = __toESM(require("react"), 1);
+var React51 = __toESM(require("react"), 1);
 
 // locales/en.json
 var en_default = {
@@ -14678,16 +14833,16 @@ var ja_default = {
 };
 
 // src/contexts/TranslationContext.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var defaultTranslations2 = {
   en: en_default,
   vi: vi_default,
   ko: ko_default,
   ja: ja_default
 };
-var TranslationContext2 = React50.createContext(null);
+var TranslationContext2 = React51.createContext(null);
 var TranslationProvider = ({ children, locale = "en", translations }) => {
-  const t = React50.useCallback(
+  const t = React51.useCallback(
     (namespace) => {
       return (key) => {
         const mergedTranslations = {
@@ -14712,10 +14867,10 @@ var TranslationProvider = ({ children, locale = "en", translations }) => {
     },
     [locale, translations]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TranslationContext2.Provider, { value: { locale, t }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(TranslationContext2.Provider, { value: { locale, t }, children });
 };
 var useUnderverseTranslations = (namespace) => {
-  const context = React50.useContext(TranslationContext2);
+  const context = React51.useContext(TranslationContext2);
   if (!context) {
     return (key) => {
       const parts = namespace.split(".");
@@ -14737,13 +14892,13 @@ var useUnderverseTranslations = (namespace) => {
   return context.t(namespace);
 };
 var useUnderverseLocale = () => {
-  const context = React50.useContext(TranslationContext2);
+  const context = React51.useContext(TranslationContext2);
   return context?.locale || "en";
 };
 
 // src/hooks/useSmartTranslations.tsx
-var React51 = __toESM(require("react"), 1);
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var React52 = __toESM(require("react"), 1);
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var nextIntlHooks = null;
 try {
   const nextIntl = require("next-intl");
@@ -14754,12 +14909,12 @@ try {
 } catch {
   nextIntlHooks = null;
 }
-var ForceInternalContext = React51.createContext(false);
+var ForceInternalContext = React52.createContext(false);
 var ForceInternalTranslationsProvider = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ForceInternalContext.Provider, { value: true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ForceInternalContext.Provider, { value: true, children });
 };
 function useSmartTranslations(namespace) {
-  const forceInternal = React51.useContext(ForceInternalContext);
+  const forceInternal = React52.useContext(ForceInternalContext);
   const internalT = useUnderverseTranslations(namespace);
   if (forceInternal || !nextIntlHooks?.useTranslations) {
     return internalT;
@@ -14772,7 +14927,7 @@ function useSmartTranslations(namespace) {
   }
 }
 function useSmartLocale() {
-  const forceInternal = React51.useContext(ForceInternalContext);
+  const forceInternal = React52.useContext(ForceInternalContext);
   const internalLocale = useUnderverseLocale();
   if (forceInternal || !nextIntlHooks?.useLocale) {
     return internalLocale;
@@ -14826,6 +14981,17 @@ function getUnderverseMessages(locale = "en") {
   FallingIcons,
   FloatingContacts,
   ForceInternalTranslationsProvider,
+  Form,
+  FormActions,
+  FormCheckbox,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormInput,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormSubmitButton,
   GaugeChart,
   GlobalLoading,
   GradientBadge,
@@ -14922,6 +15088,7 @@ function getUnderverseMessages(locale = "en") {
   injectAnimationStyles,
   shadcnAnimationStyles,
   underverseMessages,
+  useFormField,
   useShadCNAnimations,
   useSmartLocale,
   useSmartTranslations,