@melv1c/ui-kit 1.0.1 → 1.2.0

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 chunkQV4CTFLS_cjs = require('./chunk-QV4CTFLS.cjs');
+var chunkRKE7ZPNV_cjs = require('./chunk-RKE7ZPNV.cjs');
 require('./chunk-Q7SFCCGT.cjs');
 var React9 = require('react');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
@@ -3808,6 +3808,417 @@ function Textarea({ className, ...props }) {
     }
   );
 }
+var appleIconVariants = classVarianceAuthority.cva("shrink-0 transition-all", {
+  variants: {
+    variant: {
+      default: "",
+      light: "bg-white",
+      dark: "bg-gray-900",
+      transparent: "bg-transparent"
+    },
+    shape: {
+      default: "rounded",
+      square: "rounded-none",
+      rounded: "rounded-full"
+    },
+    size: {
+      sm: "size-6 p-1",
+      default: "size-10 p-2",
+      lg: "size-14 p-3",
+      xl: "size-20 p-4"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    shape: "default",
+    size: "default"
+  }
+});
+function AppleIcon({
+  className,
+  variant = "default",
+  shape = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkI7WHASOO_cjs.cn(appleIconVariants({ variant, shape, size, className })),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          className: "size-full",
+          fill: "currentColor",
+          "aria-label": "Apple",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" })
+        }
+      )
+    }
+  );
+}
+var facebookIconVariants = classVarianceAuthority.cva("shrink-0 transition-all", {
+  variants: {
+    variant: {
+      default: "",
+      light: "bg-white",
+      dark: "bg-gray-900",
+      transparent: "bg-transparent"
+    },
+    shape: {
+      default: "rounded",
+      square: "rounded-none",
+      rounded: "rounded-full"
+    },
+    size: {
+      sm: "size-6 p-1",
+      default: "size-10 p-2",
+      lg: "size-14 p-3",
+      xl: "size-20 p-4"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    shape: "default",
+    size: "default"
+  }
+});
+function FacebookIcon({
+  className,
+  variant = "default",
+  shape = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkI7WHASOO_cjs.cn(facebookIconVariants({ variant, shape, size, className })),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          className: "size-full",
+          fill: "#1877F2",
+          "aria-label": "Facebook",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" })
+        }
+      )
+    }
+  );
+}
+var githubIconVariants = classVarianceAuthority.cva("shrink-0 transition-all", {
+  variants: {
+    variant: {
+      default: "",
+      light: "bg-white",
+      dark: "bg-gray-900",
+      transparent: "bg-transparent"
+    },
+    shape: {
+      default: "rounded",
+      square: "rounded-none",
+      rounded: "rounded-full"
+    },
+    size: {
+      sm: "size-6 p-1",
+      default: "size-10 p-2",
+      lg: "size-14 p-3",
+      xl: "size-20 p-4"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    shape: "default",
+    size: "default"
+  }
+});
+function GithubIcon({
+  className,
+  variant = "default",
+  shape = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkI7WHASOO_cjs.cn(githubIconVariants({ variant, shape, size, className })),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          className: "size-full",
+          fill: "currentColor",
+          "aria-label": "GitHub",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" })
+        }
+      )
+    }
+  );
+}
+var googleIconVariants = classVarianceAuthority.cva("shrink-0 transition-all", {
+  variants: {
+    variant: {
+      default: "",
+      light: "bg-white",
+      dark: "bg-gray-900",
+      transparent: "bg-transparent"
+    },
+    shape: {
+      default: "rounded",
+      square: "rounded-none",
+      rounded: "rounded-full"
+    },
+    size: {
+      sm: "size-6 p-1",
+      default: "size-10 p-2",
+      lg: "size-14 p-3",
+      xl: "size-20 p-4"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    shape: "default",
+    size: "default"
+  }
+});
+function GoogleIcon({
+  className,
+  variant = "default",
+  shape = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkI7WHASOO_cjs.cn(googleIconVariants({ variant, shape, size, className })),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          version: "1.1",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 48 48",
+          className: "size-full",
+          "aria-label": "Google",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                fill: "#EA4335",
+                d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                fill: "#4285F4",
+                d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                fill: "#FBBC05",
+                d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                fill: "#34A853",
+                d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
+          ]
+        }
+      )
+    }
+  );
+}
+var microsoftIconVariants = classVarianceAuthority.cva("shrink-0 transition-all", {
+  variants: {
+    variant: {
+      default: "",
+      light: "bg-white",
+      dark: "bg-gray-900",
+      transparent: "bg-transparent"
+    },
+    shape: {
+      default: "rounded",
+      square: "rounded-none",
+      rounded: "rounded-full"
+    },
+    size: {
+      sm: "size-6 p-1",
+      default: "size-10 p-2",
+      lg: "size-14 p-3",
+      xl: "size-20 p-4"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    shape: "default",
+    size: "default"
+  }
+});
+function MicrosoftIcon({
+  className,
+  variant = "default",
+  shape = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkI7WHASOO_cjs.cn(microsoftIconVariants({ variant, shape, size, className })),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          className: "size-full",
+          "aria-label": "Microsoft",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#F25022", d: "M1 1h10v10H1z" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#00A4EF", d: "M1 13h10v10H1z" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#7FBA00", d: "M13 1h10v10H13z" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#FFB900", d: "M13 13h10v10H13z" })
+          ]
+        }
+      )
+    }
+  );
+}
+var providerIcons = {
+  google: /* @__PURE__ */ jsxRuntime.jsx(GoogleIcon, { className: "size-4 p-0" }),
+  github: /* @__PURE__ */ jsxRuntime.jsx(GithubIcon, { className: "size-4 p-0" }),
+  apple: /* @__PURE__ */ jsxRuntime.jsx(AppleIcon, { className: "size-4 p-0" }),
+  microsoft: /* @__PURE__ */ jsxRuntime.jsx(MicrosoftIcon, { className: "size-4 p-0" }),
+  facebook: /* @__PURE__ */ jsxRuntime.jsx(FacebookIcon, { className: "size-4 p-0" })
+};
+function LoginForm({
+  onSubmit,
+  onProviderLogin,
+  onForgotPassword,
+  onSignUp,
+  providers = [],
+  showForgotPassword = true,
+  showSignUp = true,
+  title,
+  description,
+  isLoading = false,
+  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 displayTitle = title ?? t("loginForm.title");
+  const displayDescription = description ?? t("loginForm.description");
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: chunkI7WHASOO_cjs.cn("w-full max-w-md", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "text-center", children: [
+      /* @__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(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: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunkGQ6Z5A4R_cjs.Separator, { className: "w-full" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-card text-muted-foreground px-2", children: t("loginForm.orContinueWith") }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: providers.map((provider) => /* @__PURE__ */ jsxRuntime.jsxs(
+          chunkGQ6Z5A4R_cjs.Button,
+          {
+            type: "button",
+            variant: "outline",
+            className: "w-full",
+            onClick: () => onProviderLogin?.(provider),
+            disabled: isLoading,
+            children: [
+              providerIcons[provider],
+              t(`loginForm.providers.${provider}`)
+            ]
+          },
+          provider
+        )) })
+      ] })
+    ] }) }) }),
+    showSignUp && /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { className: "justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-sm", children: [
+      t("loginForm.noAccount"),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onSignUp,
+          className: "text-primary underline-offset-4 hover:underline",
+          disabled: isLoading,
+          children: t("loginForm.signUp")
+        }
+      )
+    ] }) })
+  ] });
+}
 function NextButton(props) {
   const { t } = reactI18next.useTranslation("ui");
   return /* @__PURE__ */ jsxRuntime.jsxs(chunkGQ6Z5A4R_cjs.Button, { ...props, children: [
@@ -3830,7 +4241,7 @@ function LocaleProvider({
   const [isReady, setIsReady] = React9.useState(false);
   const instance = React9.useMemo(() => i18n__default.default.createInstance(), []);
   React9.useEffect(() => {
-    const baseTranslations = chunkQV4CTFLS_cjs.locales_exports[language] ?? {};
+    const baseTranslations = chunkRKE7ZPNV_cjs.locales_exports[language] ?? {};
     const mergedTranslations = overrides ? { ...baseTranslations, ...overrides } : baseTranslations;
     instance.use(reactI18next.initReactI18next).init({
       lng: language,
@@ -3859,7 +4270,7 @@ function TranslationProvider({
 }) {
   const [isReady, setIsReady] = React9.useState(false);
   React9.useEffect(() => {
-    for (const [lng, resources] of Object.entries(chunkQV4CTFLS_cjs.locales_exports)) {
+    for (const [lng, resources] of Object.entries(chunkRKE7ZPNV_cjs.locales_exports)) {
       const language = lng;
       const languageOverrides = overrides?.[language];
       if (i18n2.hasResourceBundle(language, "ui") && !languageOverrides) {
@@ -3869,7 +4280,7 @@ function TranslationProvider({
       i18n2.addResourceBundle(language, "ui", mergedResources, true, true);
     }
     if (overrides) {
-      const supportedLanguages = Object.keys(chunkQV4CTFLS_cjs.locales_exports);
+      const supportedLanguages = Object.keys(chunkRKE7ZPNV_cjs.locales_exports);
       for (const [lng, resources] of Object.entries(overrides)) {
         if (supportedLanguages.includes(lng)) continue;
         i18n2.addResourceBundle(lng, "ui", resources, true, true);
@@ -3957,6 +4368,7 @@ exports.AlertDialogPortal = AlertDialogPortal;
 exports.AlertDialogTitle = AlertDialogTitle;
 exports.AlertDialogTrigger = AlertDialogTrigger;
 exports.AlertTitle = AlertTitle;
+exports.AppleIcon = AppleIcon;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.AvatarImage = AvatarImage;
@@ -4048,6 +4460,7 @@ exports.DropdownMenuSub = DropdownMenuSub;
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.FacebookIcon = FacebookIcon;
 exports.Form = Form;
 exports.FormControl = FormControl;
 exports.FormDescription = FormDescription;
@@ -4055,11 +4468,14 @@ exports.FormField = FormField;
 exports.FormItem = FormItem;
 exports.FormLabel = FormLabel;
 exports.FormMessage = FormMessage;
+exports.GithubIcon = GithubIcon;
+exports.GoogleIcon = GoogleIcon;
 exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
 exports.Label = Label3;
 exports.LocaleProvider = LocaleProvider;
+exports.LoginForm = LoginForm;
 exports.Menubar = Menubar;
 exports.MenubarCheckboxItem = MenubarCheckboxItem;
 exports.MenubarContent = MenubarContent;
@@ -4076,6 +4492,7 @@ exports.MenubarSub = MenubarSub;
 exports.MenubarSubContent = MenubarSubContent;
 exports.MenubarSubTrigger = MenubarSubTrigger;
 exports.MenubarTrigger = MenubarTrigger;
+exports.MicrosoftIcon = MicrosoftIcon;
 exports.NavigationMenu = NavigationMenu;
 exports.NavigationMenuContent = NavigationMenuContent;
 exports.NavigationMenuIndicator = NavigationMenuIndicator;
@@ -4160,8 +4577,13 @@ exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.TranslationProvider = TranslationProvider;
+exports.appleIconVariants = appleIconVariants;
 exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
+exports.facebookIconVariants = facebookIconVariants;
+exports.githubIconVariants = githubIconVariants;
+exports.googleIconVariants = googleIconVariants;
+exports.microsoftIconVariants = microsoftIconVariants;
 exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
 exports.useFormField = useFormField;
 exports.useSidebar = useSidebar;