@hex-core/components 1.8.1 → 1.9.0

package/dist/auth-sign-up-card.js

@@ -0,0 +1,590 @@
+"use client";
+import * as React8 from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var alertVariants = cva(
+  [
+    "relative w-full rounded-lg border px-[var(--space-4,1rem)] py-[var(--space-3,0.75rem)] text-sm",
+    "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+    "[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-foreground",
+    "[&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "border-foreground/[0.08] bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive [&>svg]:text-destructive bg-destructive/5"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var Alert = React8.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "alert",
+    className: cn(alertVariants({ variant }), className),
+    ...props
+  }
+));
+Alert.displayName = "Alert";
+var AlertTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h5",
+  {
+    ref,
+    className: cn("mb-[var(--space-1,0.25rem)] font-medium leading-none tracking-tight", className),
+    ...props
+  }
+));
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })
+);
+AlertDescription.displayName = "AlertDescription";
+var Card = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border border-foreground/[0.08] bg-card text-card-foreground",
+        "shadow-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
+        "hover:shadow-md",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col space-y-1.5 p-[var(--space-6,1.5rem)]", className),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("text-2xl font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-[var(--space-6,1.5rem)] pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center p-[var(--space-6,1.5rem)] pt-0", className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+var buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-[var(--gap-sm,0.5rem)] whitespace-nowrap rounded-md text-sm font-medium",
+    "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "active:scale-[0.98]",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-primary text-primary-foreground",
+          "shadow-sm shadow-primary/20",
+          "hover:bg-primary/90 hover:shadow-md hover:shadow-primary/25"
+        ].join(" "),
+        destructive: [
+          "bg-destructive text-destructive-foreground",
+          "shadow-sm shadow-destructive/20",
+          "hover:bg-destructive/90 hover:shadow-md hover:shadow-destructive/25"
+        ].join(" "),
+        outline: [
+          "border border-input bg-background",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+          "hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:inset-ring-foreground/12"
+        ].join(" "),
+        secondary: [
+          "bg-secondary text-secondary-foreground",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.08]",
+          "hover:bg-secondary/80 hover:shadow-md hover:inset-ring-foreground/15"
+        ].join(" "),
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-[var(--control-height-md,2.5rem)] px-[var(--space-4,1rem)] py-[var(--space-2,0.5rem)]",
+        sm: "h-[var(--control-height-sm,2.25rem)] rounded-md px-[var(--space-3,0.75rem)]",
+        lg: "h-[var(--control-height-lg,2.75rem)] rounded-md px-[var(--space-8,2rem)] text-base",
+        icon: "h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React8.forwardRef(
+  ({ className, variant, size, asChild = false, loading = false, children, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "animate-spin h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ),
+          children
+        ] }) : children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Checkbox = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "group h-4 w-4 shrink-0 rounded-sm border border-input",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+      "hover:border-ring/50 hover:shadow-md",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground",
+      "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxs(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "hidden h-3.5 w-3.5 group-data-[state=checked]:block",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "hidden h-3.5 w-3.5 group-data-[state=indeterminate]:block",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+        }
+      )
+    ] })
+  }
+));
+Checkbox.displayName = "Checkbox";
+var Input = React8.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-[var(--control-height-md,2.5rem)] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm",
+          "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          // inset-ring gives a self-borne edge so the input field is visible on flat
+          // surfaces (token border alone is too low-contrast on bg-background=white).
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "focus-visible:shadow-md focus-visible:border-ring/50",
+          "hover:border-ring/30 hover:shadow-md",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props })
+);
+Label.displayName = "Label";
+var Separator = React8.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-foreground/[0.12]",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    ...props
+  }
+));
+Separator.displayName = "Separator";
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function AuthSignUpCard({
+  adapter,
+  socialProviders,
+  signInHref = "/sign-in",
+  termsHref = "/terms",
+  privacyHref = "/privacy",
+  passwordMinLength = 8,
+  className,
+  onSuccess
+}) {
+  const [name, setName] = React8.useState("");
+  const [email, setEmail] = React8.useState("");
+  const [password, setPassword] = React8.useState("");
+  const [confirmPassword, setConfirmPassword] = React8.useState("");
+  const [acceptTerms, setAcceptTerms] = React8.useState(false);
+  const [submitting, setSubmitting] = React8.useState(null);
+  const [error, setError] = React8.useState(null);
+  const isBusy = submitting !== null;
+  function validate() {
+    if (!EMAIL_REGEX.test(email)) {
+      return { code: "invalid_email", message: "Enter a valid email address." };
+    }
+    if (password.length < passwordMinLength) {
+      return {
+        code: "password_too_short",
+        message: `Password must be at least ${passwordMinLength} characters.`
+      };
+    }
+    if (password !== confirmPassword) {
+      return { code: "password_mismatch", message: "Passwords don't match." };
+    }
+    if (!acceptTerms) {
+      return {
+        code: "terms_required",
+        message: "Please accept the terms of service to continue."
+      };
+    }
+    return null;
+  }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    const validation = validate();
+    if (validation) {
+      setError(validation);
+      return;
+    }
+    if (!adapter.signUpWithPassword) {
+      console.warn(
+        "[AuthSignUpCard] adapter.signUpWithPassword is not implemented \u2014 wire it up before exposing the form."
+      );
+      setError({
+        code: "unimplemented",
+        message: "Sign-up is currently unavailable. Please try again later."
+      });
+      return;
+    }
+    setError(null);
+    setSubmitting("password");
+    try {
+      const result = await adapter.signUpWithPassword({
+        email,
+        password,
+        name: name.trim().length > 0 ? name.trim() : void 0
+      });
+      if (!result.ok) {
+        setError(result.error ?? { code: "unknown", message: "Sign-up failed." });
+        return;
+      }
+      onSuccess?.(result.redirect);
+    } finally {
+      setSubmitting(null);
+    }
+  }
+  async function handleSocial(provider) {
+    if (!adapter.signInWithSocial) {
+      console.warn(
+        `[AuthSignUpCard] adapter.signInWithSocial is not implemented but a ${provider} button is rendered \u2014 drop the entry from socialProviders or wire the method.`
+      );
+      setError({
+        code: "unimplemented",
+        message: "This sign-up option is currently unavailable. Please try a different method."
+      });
+      return;
+    }
+    setError(null);
+    setSubmitting(provider);
+    try {
+      const result = await adapter.signInWithSocial({ provider });
+      if (!result.ok) {
+        setError(result.error ?? { code: "social-failed", message: "Sign-up failed." });
+        return;
+      }
+      onSuccess?.(result.redirect);
+    } finally {
+      setSubmitting(null);
+    }
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-svh items-center justify-center p-6 sm:p-10", className), children: /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-md", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "space-y-2 text-center", children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: "Create your account" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Get started in seconds \u2014 no credit card required." })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-6", children: [
+      error ? /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: "Couldn\u2019t create account" }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: error.message })
+      ] }) : null,
+      socialProviders && socialProviders.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: socialProviders.map((p) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => handleSocial(p.provider),
+            disabled: isBusy,
+            loading: submitting === p.provider,
+            className: "w-full justify-center gap-2",
+            children: [
+              p.icon,
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Continue with ",
+                p.label
+              ] })
+            ]
+          },
+          p.provider
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-2 text-xs uppercase text-muted-foreground", children: "or sign up with email" })
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", noValidate: true, children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs(Label, { htmlFor: "auth-sign-up-name", children: [
+            "Full name ",
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "(optional)" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "auth-sign-up-name",
+              type: "text",
+              autoComplete: "name",
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              disabled: isBusy
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "auth-sign-up-email", children: "Email" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "auth-sign-up-email",
+              type: "email",
+              autoComplete: "email",
+              required: true,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              disabled: isBusy
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "auth-sign-up-password", children: "Password" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "auth-sign-up-password",
+              type: "password",
+              autoComplete: "new-password",
+              required: true,
+              minLength: passwordMinLength,
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              disabled: isBusy,
+              "aria-describedby": "auth-sign-up-password-hint"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "p",
+            {
+              id: "auth-sign-up-password-hint",
+              className: "text-xs text-muted-foreground",
+              children: [
+                "At least ",
+                passwordMinLength,
+                " characters."
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "auth-sign-up-confirm", children: "Confirm password" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "auth-sign-up-confirm",
+              type: "password",
+              autoComplete: "new-password",
+              required: true,
+              value: confirmPassword,
+              onChange: (e) => setConfirmPassword(e.target.value),
+              disabled: isBusy
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: "auth-sign-up-terms",
+              checked: acceptTerms,
+              onCheckedChange: (v) => setAcceptTerms(v === true),
+              disabled: isBusy,
+              className: "mt-0.5"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Label,
+            {
+              htmlFor: "auth-sign-up-terms",
+              className: "text-sm font-normal leading-snug",
+              children: [
+                "I agree to the",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: termsHref,
+                    className: "font-medium text-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded",
+                    children: "Terms of Service"
+                  }
+                ),
+                " ",
+                "and",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: privacyHref,
+                    className: "font-medium text-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded",
+                    children: "Privacy Policy"
+                  }
+                ),
+                "."
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            className: "w-full",
+            disabled: isBusy,
+            loading: submitting === "password",
+            children: submitting === "password" ? "Creating account" : "Create account"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(CardFooter, { className: "justify-center text-sm text-muted-foreground", children: [
+      "Already have an account?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: signInHref,
+          className: "ml-1 font-medium text-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded",
+          children: "Sign in"
+        }
+      )
+    ] })
+  ] }) });
+}
+
+export { AuthSignUpCard };
+//# sourceMappingURL=auth-sign-up-card.js.map
+//# sourceMappingURL=auth-sign-up-card.js.map