@melv1c/ui-kit 1.2.0 → 1.2.2

package/dist/index.cjs

@@ -3,7 +3,7 @@
 var chunkQ4GFV3J3_cjs = require('./chunk-Q4GFV3J3.cjs');
 var chunkGQ6Z5A4R_cjs = require('./chunk-GQ6Z5A4R.cjs');
 var chunkI7WHASOO_cjs = require('./chunk-I7WHASOO.cjs');
-var chunkRKE7ZPNV_cjs = require('./chunk-RKE7ZPNV.cjs');
+var chunkH4O6RXFK_cjs = require('./chunk-H4O6RXFK.cjs');
 require('./chunk-Q7SFCCGT.cjs');
 var React9 = require('react');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
@@ -37,7 +37,9 @@ var nextThemes = require('next-themes');
 var sonner = require('sonner');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var TabsPrimitive = require('@radix-ui/react-tabs');
+var zod = require('@hookform/resolvers/zod');
 var reactI18next = require('react-i18next');
+var z = require('zod');
 var i18n = require('i18next');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -82,6 +84,7 @@ var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitiv
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var z__namespace = /*#__PURE__*/_interopNamespace(z);
 var i18n__default = /*#__PURE__*/_interopDefault(i18n);
 
 function Accordion({
@@ -3808,6 +3811,113 @@ function Textarea({ className, ...props }) {
     }
   );
 }
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: chunkI7WHASOO_cjs.cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = classVarianceAuthority.cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: chunkI7WHASOO_cjs.cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Label3,
+    {
+      "data-slot": "field-label",
+      className: chunkI7WHASOO_cjs.cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = React9.useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsxRuntime.jsx("li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: chunkI7WHASOO_cjs.cn("text-destructive text-sm font-normal", className),
+      ...props,
+      children: content
+    }
+  );
+}
 var appleIconVariants = classVarianceAuthority.cva("shrink-0 transition-all", {
   variants: {
     variant: {
@@ -4102,6 +4212,10 @@ function MicrosoftIcon({
     }
   );
 }
+var createLoginFormSchema = (t) => z__namespace.object({
+  email: z__namespace.email(t("loginForm.errors.invalidEmail")),
+  password: z__namespace.string().min(1, t("loginForm.errors.passwordRequired"))
+});
 var providerIcons = {
   google: /* @__PURE__ */ jsxRuntime.jsx(GoogleIcon, { className: "size-4 p-0" }),
   github: /* @__PURE__ */ jsxRuntime.jsx(GithubIcon, { className: "size-4 p-0" }),
@@ -4119,15 +4233,33 @@ function LoginForm({
   showSignUp = true,
   title,
   description,
-  isLoading = false,
+  schema,
   className
 }) {
   const { t } = reactI18next.useTranslation("ui");
-  const [email, setEmail] = React9.useState("");
-  const [password, setPassword] = React9.useState("");
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onSubmit?.(email, password);
+  const [error, setError] = React9.useState(null);
+  const [isLoading, setIsLoading] = React9.useState(false);
+  const [showPassword, setShowPassword] = React9.useState(false);
+  const translatedSchema = createLoginFormSchema(t);
+  const resolvedSchema = schema ?? translatedSchema;
+  const form = reactHookForm.useForm({
+    resolver: zod.zodResolver(resolvedSchema),
+    defaultValues: {
+      email: "",
+      password: ""
+    }
+  });
+  const handleFormSubmit = async (data) => {
+    try {
+      setError(null);
+      setIsLoading(true);
+      await onSubmit?.(data.email, data.password);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
   };
   const displayTitle = title ?? t("loginForm.title");
   const displayDescription = description ?? t("loginForm.description");
@@ -4136,50 +4268,82 @@ function LoginForm({
       /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl", children: displayTitle }),
       /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: displayDescription })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label3, { htmlFor: "login-email", children: t("loginForm.email") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkGQ6Z5A4R_cjs.Input,
-          {
-            id: "login-email",
-            type: "email",
-            placeholder: t("loginForm.emailPlaceholder"),
-            value: email,
-            onChange: (e) => setEmail(e.target.value),
-            required: true,
-            disabled: isLoading,
-            autoComplete: "email"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label3, { htmlFor: "login-password", children: t("loginForm.password") }),
-          showForgotPassword && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onForgotPassword,
-              className: "text-muted-foreground hover:text-primary ml-auto text-sm underline-offset-4 hover:underline",
-              disabled: isLoading,
-              children: t("loginForm.forgotPassword")
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkGQ6Z5A4R_cjs.Input,
-          {
-            id: "login-password",
-            type: "password",
-            value: password,
-            onChange: (e) => setPassword(e.target.value),
-            required: true,
-            disabled: isLoading,
-            autoComplete: "current-password"
-          }
-        )
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("form", { id: "login-form", onSubmit: form.handleSubmit(handleFormSubmit), children: /* @__PURE__ */ jsxRuntime.jsxs(FieldGroup, { className: "gap-6", children: [
+      error && /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "destructive", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: error })
       ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactHookForm.Controller,
+        {
+          name: "email",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxRuntime.jsxs(Field, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { htmlFor: "login-email", children: t("loginForm.email") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunkGQ6Z5A4R_cjs.Input,
+              {
+                ...field,
+                id: "login-email",
+                type: "email",
+                placeholder: t("loginForm.emailPlaceholder"),
+                disabled: isLoading,
+                autoComplete: "email",
+                "aria-invalid": fieldState.invalid
+              }
+            ),
+            fieldState.invalid && /* @__PURE__ */ jsxRuntime.jsx(FieldError, { errors: [fieldState.error] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactHookForm.Controller,
+        {
+          name: "password",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxRuntime.jsxs(Field, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { htmlFor: "login-password", children: t("loginForm.password") }),
+              showForgotPassword && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onForgotPassword,
+                  className: "text-muted-foreground hover:text-primary ml-auto text-sm underline-offset-4 hover:underline",
+                  disabled: isLoading,
+                  children: t("loginForm.forgotPassword")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkGQ6Z5A4R_cjs.Input,
+                {
+                  ...field,
+                  id: "login-password",
+                  type: showPassword ? "text" : "password",
+                  disabled: isLoading,
+                  autoComplete: "current-password",
+                  "aria-invalid": fieldState.invalid,
+                  className: "pr-10"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2",
+                  disabled: isLoading,
+                  "aria-label": showPassword ? "Hide password" : "Show password",
+                  children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "size-4" })
+                }
+              )
+            ] }),
+            fieldState.invalid && /* @__PURE__ */ jsxRuntime.jsx(FieldError, { errors: [fieldState.error] })
+          ] })
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(chunkGQ6Z5A4R_cjs.Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("loginForm.loggingIn") : t("loginForm.login") }),
       providers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -4233,6 +4397,127 @@ function PreviousButton(props) {
     t("previous")
   ] });
 }
+function DateTimePicker({
+  value,
+  onChange,
+  label,
+  placeholder = "Select date and time",
+  showClear = true,
+  disabled = false,
+  className,
+  formatDateTime
+}) {
+  const [open, setOpen] = React9.useState(false);
+  const [date, setDate] = React9.useState(value);
+  const handleClear = () => {
+    setDate(void 0);
+    onChange?.(void 0);
+  };
+  const handleDateChange = (newDate) => {
+    if (!newDate) {
+      setDate(void 0);
+      onChange?.(void 0);
+      return;
+    }
+    let updatedDate = newDate;
+    if (date) {
+      updatedDate = new Date(newDate);
+      updatedDate.setHours(date.getHours());
+      updatedDate.setMinutes(date.getMinutes());
+      updatedDate.setSeconds(date.getSeconds());
+    }
+    setDate(updatedDate);
+    onChange?.(updatedDate);
+  };
+  const handleTimeChange = (event) => {
+    const timeValue = event.target.value;
+    if (!timeValue) return;
+    const [hours, minutes, seconds = "0"] = timeValue.split(":");
+    const updatedDate = date ? new Date(date) : /* @__PURE__ */ new Date();
+    updatedDate.setHours(parseInt(hours, 10));
+    updatedDate.setMinutes(parseInt(minutes, 10));
+    updatedDate.setSeconds(parseInt(seconds, 10));
+    setDate(updatedDate);
+    onChange?.(updatedDate);
+  };
+  const formatTimeValue = (date2) => {
+    if (!date2) return "";
+    const hours = date2.getHours().toString().padStart(2, "0");
+    const minutes = date2.getMinutes().toString().padStart(2, "0");
+    return `${hours}:${minutes}`;
+  };
+  const defaultFormatDateTime = (date2) => {
+    const dateStr = date2.toLocaleDateString();
+    const timeStr = date2.toLocaleTimeString(void 0, {
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+    return `${dateStr} ${timeStr}`;
+  };
+  React9.useEffect(() => {
+    setDate(value);
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkI7WHASOO_cjs.cn("flex flex-col gap-3", className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label3, { htmlFor: "datetime-picker", className: "px-1", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkGQ6Z5A4R_cjs.Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkGQ6Z5A4R_cjs.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        chunkGQ6Z5A4R_cjs.Button,
+        {
+          variant: "outline",
+          id: "datetime-picker",
+          className: chunkI7WHASOO_cjs.cn(
+            "w-full justify-start font-normal",
+            !date && "text-muted-foreground"
+          ),
+          disabled,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 size-4" }),
+            date ? formatDateTime ? formatDateTime(date) : defaultFormatDateTime(date) : placeholder,
+            showClear && date && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleClear();
+                },
+                className: "hover:bg-accent -mr-1 ml-auto rounded-sm p-1",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3.5" })
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkGQ6Z5A4R_cjs.PopoverContent, { className: "w-auto p-0", align: "start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Calendar,
+          {
+            mode: "single",
+            selected: date,
+            captionLayout: "dropdown",
+            onSelect: handleDateChange,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t p-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label3, { htmlFor: "time-input", className: "mb-2 block text-xs", children: "Time" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkGQ6Z5A4R_cjs.Input,
+            {
+              type: "time",
+              id: "time-input",
+              step: "60",
+              value: formatTimeValue(date),
+              onChange: handleTimeChange,
+              disabled,
+              className: "bg-background h-8 appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
 function LocaleProvider({
   children,
   language,
@@ -4241,7 +4526,7 @@ function LocaleProvider({
   const [isReady, setIsReady] = React9.useState(false);
   const instance = React9.useMemo(() => i18n__default.default.createInstance(), []);
   React9.useEffect(() => {
-    const baseTranslations = chunkRKE7ZPNV_cjs.locales_exports[language] ?? {};
+    const baseTranslations = chunkH4O6RXFK_cjs.locales_exports[language] ?? {};
     const mergedTranslations = overrides ? { ...baseTranslations, ...overrides } : baseTranslations;
     instance.use(reactI18next.initReactI18next).init({
       lng: language,
@@ -4270,7 +4555,7 @@ function TranslationProvider({
 }) {
   const [isReady, setIsReady] = React9.useState(false);
   React9.useEffect(() => {
-    for (const [lng, resources] of Object.entries(chunkRKE7ZPNV_cjs.locales_exports)) {
+    for (const [lng, resources] of Object.entries(chunkH4O6RXFK_cjs.locales_exports)) {
       const language = lng;
       const languageOverrides = overrides?.[language];
       if (i18n2.hasResourceBundle(language, "ui") && !languageOverrides) {
@@ -4280,7 +4565,7 @@ function TranslationProvider({
       i18n2.addResourceBundle(language, "ui", mergedResources, true, true);
     }
     if (overrides) {
-      const supportedLanguages = Object.keys(chunkRKE7ZPNV_cjs.locales_exports);
+      const supportedLanguages = Object.keys(chunkH4O6RXFK_cjs.locales_exports);
       for (const [lng, resources] of Object.entries(overrides)) {
         if (supportedLanguages.includes(lng)) continue;
         i18n2.addResourceBundle(lng, "ui", resources, true, true);
@@ -4425,6 +4710,7 @@ exports.ContextMenuSub = ContextMenuSub;
 exports.ContextMenuSubContent = ContextMenuSubContent;
 exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
 exports.ContextMenuTrigger = ContextMenuTrigger;
+exports.DateTimePicker = DateTimePicker;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;