50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T5630,"use client"; import * as React from "react"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; export type AuthProvider = | "google" | "github" | "microsoft" | "discord" | "spotify" | "gitlab" | "linkedin" | "slack" | "twitch" | "notion" | "chatgpt" | "dropbox" | "apple" | "vercel" | "reddit" | "bitbucket"; export interface AuthBrand { name: string; logo: string; mono?: boolean; colors?: string[]; glow?: string; } export type AuthButtonSize = "sm" | "default" | "lg"; export type AuthButtonIntent = "signin" | "signup"; export interface AuthButtonProps extends React.ComponentProps<"button"> { provider?: AuthProvider | AuthBrand; size?: AuthButtonSize; intent?: AuthButtonIntent; } const svg = (source: string) => `data:image/svg+xml,${encodeURIComponent(source)}`; const providerBrands: Record = { google: { name: "Google", glow: "#4285F4", colors: ["#EA4335", "#FBBC05", "#34A853", "#4285F4"], logo: svg( '', ), }, github: { name: "GitHub", mono: true, logo: svg( '', ), }, microsoft: { name: "Microsoft", glow: "#00A4EF", colors: ["#F25022", "#7FBA00", "#00A4EF", "#FFB900"], logo: svg( '', ), }, discord: { name: "Discord", colors: ["#5865F2"], logo: svg( '', ), }, spotify: { name: "Spotify", colors: ["#1ED760"], logo: svg( '', ), }, gitlab: { name: "GitLab", colors: ["#E24329", "#FC6D26", "#FCA326"], logo: svg( '', ), }, linkedin: { name: "LinkedIn", colors: ["#0A66C2"], logo: svg( '', ), }, slack: { name: "Slack", glow: "#E01E5A", colors: ["#36C5F0", "#2EB67D", "#ECB22E", "#E01E5A"], logo: svg( '', ), }, twitch: { name: "Twitch", colors: ["#9146FF"], logo: svg( '', ), }, notion: { name: "Notion", logo: svg( '', ), }, chatgpt: { name: "ChatGPT", mono: true, logo: svg( '', ), }, dropbox: { name: "Dropbox", colors: ["#0061FE"], logo: svg( '', ), }, apple: { name: "Apple", mono: true, logo: svg( '', ), }, vercel: { name: "Vercel", mono: true, logo: svg( '', ), }, reddit: { name: "Reddit", colors: ["#FF4500"], logo: svg( '', ), }, bitbucket: { name: "Bitbucket", colors: ["#0052CC", "#2684FF"], logo: svg( '', ), }, }; const buttonVariants = cva( "clover-auth relative isolate inline-flex min-w-0 max-w-full shrink-0 cursor-pointer items-center justify-center gap-1.5 outline-none select-none disabled:cursor-not-allowed", { variants: { size: { sm: "h-9 w-[min(232px,100%)] rounded-[var(--auth-radius)] px-3 text-xs [--auth-mark:14px] [--auth-radius:12px]", default: "h-11 w-[min(272px,100%)] rounded-[var(--auth-radius)] px-4 text-[13px] [--auth-mark:16px] [--auth-radius:14px]", lg: "h-12 w-[min(304px,100%)] rounded-[var(--auth-radius)] px-5 text-sm [--auth-mark:18px] [--auth-radius:16px]", }, }, defaultVariants: { size: "default" }, }, ); const styles = ` .clover-auth { --auth-base: #f4f4f6; --auth-text: #18181b; --auth-border: oklch(.922 0 0); --auth-tint: .09; --auth-wash-filter: blur(30px) saturate(1.3); --auth-glass: linear-gradient(180deg, #ffffffa6, #ffffff59 55%, #ffffff80); --auth-mono: none; --auth-depth: linear-gradient(180deg, #ffffff80, #0000000a); --auth-highlight: #ffffffd9; --auth-text-shadow: 0 1px 0 #ffffffb3; background: var(--auth-base); border: 1.5px solid var(--auth-border); color: var(--auth-text); transition: opacity 200ms ease; -webkit-tap-highlight-color: transparent; } .clover-auth:focus-visible { outline: 2px solid var(--ring, #8989a5); outline-offset: 4px; } .clover-auth:disabled { opacity: .45; } .dark .clover-auth { --auth-base: #0a0b0d; --auth-text: #fff; --auth-border: oklch(1 0 0 / .19); --auth-tint: .1; --auth-wash-filter: blur(30px) saturate(.7) brightness(1.8); --auth-glass: linear-gradient(180deg, #ffffff09, #ffffff02 55%, #ffffff05); --auth-depth: linear-gradient(180deg, #ffffff0d, #00000033); --auth-highlight: #ffffff1f; --auth-text-shadow: 0 1px 0 #00000080; --auth-mono: brightness(0) invert(1); } .clover-auth-surface { background: var(--auth-base); } .clover-auth-press { position: absolute; inset: 0; background: radial-gradient(90% 120% at 50% 55%, color-mix(in oklab, var(--auth-glow) 12%, transparent), transparent 75%); opacity: 0; transition: opacity 280ms ease; } .clover-auth:active:not(:disabled) .clover-auth-press { opacity: 1; transition-duration: 80ms; } .clover-auth-color { position: absolute; inset: -20%; background: var(--auth-wash); opacity: var(--auth-tint); filter: var(--auth-wash-filter); } .clover-auth-glass { position: absolute; inset: 0; background: var(--auth-glass); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); } .clover-auth-depth { position: absolute; inset: 0; border-radius: inherit; background: var(--auth-depth); box-shadow: inset 0 1px 0 var(--auth-highlight); } .clover-auth-lens { width: var(--auth-mark); height: var(--auth-mark); } .clover-auth-lens[data-mono] img { filter: var(--auth-mono); } @media (prefers-reduced-motion: reduce) { .clover-auth, .clover-auth * { transition: none !important; animation: none !important; } } @media (forced-colors: active) { .clover-auth { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; } .clover-auth-surface { display: none; } .clover-auth:focus-visible { outline-color: Highlight; } .clover-auth-lens { forced-color-adjust: none; } } `; function AuthButton({ provider = "google", size = "default", intent = "signin", disabled = false, type = "button", className, style, children, ...props }: AuthButtonProps) { const brand = typeof provider === "string" ? providerBrands[provider] : provider; const [failedLogo, setFailedLogo] = React.useState(null); const logoFailed = failedLogo === brand.logo; const prefix = { signin: "Sign in with", signup: "Sign up with" }[intent]; const label = children ?? `${prefix} ${brand.name}`; const glow = brand.glow ?? brand.colors?.[0] ?? "#71717a"; const wash = brand.colors?.length ? `linear-gradient(110deg, ${[...brand.colors, brand.colors[0]].join(", ")})` : undefined; return ( <> ); } export { AuthButton }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"namespace":"@clover-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/clover-ui/auth-button.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]