{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "minimal-auth-card",
  "type": "registry:ui",
  "title": "Minimal Auth Card",
  "author": "Rishabh Bose <https://theb0se.vercel.app/>",
  "description": "Clean and minimal authentication card featuring animated Sign In and Sign Up tab switching, Google, Apple, and GitHub OAuth buttons, and password strength validation.",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/ui/minimal-auth-card.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useId } from \"react\";\nimport {\n  motion,\n  AnimatePresence,\n  useReducedMotion,\n} from \"framer-motion\";\nimport {\n  Mail,\n  Lock,\n  User,\n  Eye,\n  EyeOff,\n  ArrowRight,\n  Check,\n  Sparkles,\n  ShieldCheck,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ------------------------------------------------------------------ */\n/* Types & Interfaces                                                 */\n/* ------------------------------------------------------------------ */\n\nexport type AuthMode = \"signin\" | \"signup\";\nexport type OAuthProvider = \"google\" | \"apple\" | \"github\";\n\nexport interface AuthFormData {\n  mode: AuthMode;\n  name?: string;\n  email: string;\n  password: string;\n  rememberMe?: boolean;\n}\n\nexport interface MinimalAuthCardProps {\n  /** Initial mode of the auth card */\n  defaultMode?: AuthMode;\n  /** Brand or product title shown in the header */\n  brandName?: string;\n  /** Brand subtitle or welcome tagline */\n  tagline?: string;\n  /** Optional custom logo or icon component */\n  logo?: React.ReactNode;\n  /** Callback fired when form is submitted */\n  onSubmit?: (data: AuthFormData) => void;\n  /** Callback fired when an OAuth provider button is clicked */\n  onOAuthClick?: (provider: OAuthProvider) => void;\n  /** Callback fired when the active tab mode changes */\n  onModeChange?: (mode: AuthMode) => void;\n  /** Callback fired when 'Forgot password' is clicked */\n  onForgotPassword?: () => void;\n  className?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* SVG OAuth Provider Icons                                            */\n/* ------------------------------------------------------------------ */\n\nexport function GoogleLogo({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" className={cn(\"h-4 w-4 select-none\", className)}>\n      <path\n        fill=\"#4285F4\"\n        d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n      />\n      <path\n        fill=\"#34A853\"\n        d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n      />\n      <path\n        fill=\"#FBBC05\"\n        d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z\"\n      />\n      <path\n        fill=\"#EA4335\"\n        d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z\"\n      />\n    </svg>\n  );\n}\n\nexport function AppleLogo({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      className={cn(\"h-4 w-4 select-none\", className)}\n    >\n      <path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.38c.62-.75 1.04-1.8 0.93-2.85-.9.04-1.99.6-2.61 1.34-.55.63-.99 1.66-.86 2.67 1 .08 1.9-.4 2.54-1.16\" />\n    </svg>\n  );\n}\n\nexport function GitHubLogo({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      className={cn(\"h-4 w-4 select-none\", className)}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n      />\n    </svg>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* Main Component: MinimalAuthCard                                    */\n/* ------------------------------------------------------------------ */\n\nexport function MinimalAuthCard({\n  defaultMode = \"signin\",\n  brandName = \"Pulse\",\n  tagline = \"Welcome back to your workspace\",\n  logo,\n  onSubmit,\n  onOAuthClick,\n  onModeChange,\n  onForgotPassword,\n  className,\n}: MinimalAuthCardProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const formUid = useId();\n\n  // Mode & Form state\n  const [mode, setMode] = useState<AuthMode>(defaultMode);\n  const [name, setName] = useState(\"\");\n  const [email, setEmail] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const [showPassword, setShowPassword] = useState(false);\n  const [rememberMe, setRememberMe] = useState(true);\n  const [agreedTerms, setAgreedTerms] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [isSuccess, setIsSuccess] = useState(false);\n\n  // Switch between Sign in and Sign up modes\n  const handleModeSwitch = (nextMode: AuthMode) => {\n    setMode(nextMode);\n    onModeChange?.(nextMode);\n    setIsSuccess(false);\n  };\n\n  // Password strength calculation for signup\n  const passwordStrength = React.useMemo(() => {\n    if (!password) return 0;\n    let score = 0;\n    if (password.length >= 8) score += 1;\n    if (/[0-9]/.test(password)) score += 1;\n    if (/[A-Z]/.test(password)) score += 1;\n    if (/[^A-Za-z0-9]/.test(password)) score += 1;\n    return score; // 0 to 4\n  }, [password]);\n\n  const strengthLabels = [\"Weak\", \"Fair\", \"Good\", \"Strong\"];\n  const strengthColors = [\n    \"bg-red-500\",\n    \"bg-amber-500\",\n    \"bg-blue-500\",\n    \"bg-emerald-500\",\n  ];\n\n  // Submit handler\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!email || !password) return;\n    if (mode === \"signup\" && !name) return;\n\n    setIsSubmitting(true);\n    setTimeout(() => {\n      setIsSubmitting(false);\n      setIsSuccess(true);\n      onSubmit?.({\n        mode,\n        name: mode === \"signup\" ? name : undefined,\n        email,\n        password,\n        rememberMe: mode === \"signin\" ? rememberMe : undefined,\n      });\n\n      setTimeout(() => setIsSuccess(false), 2500);\n    }, 900);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"relative w-full max-w-[420px] mx-auto overflow-hidden rounded-[26px] border border-neutral-200/80 dark:border-neutral-800 bg-white dark:bg-[#0c0c0e] p-6 sm:p-8 shadow-[0_20px_50px_rgba(0,0,0,0.06)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.5)] transition-all duration-300\",\n        className\n      )}\n    >\n      {/* Subtle top ambient glow */}\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute -top-24 left-1/2 -translate-x-1/2 h-44 w-72 rounded-full bg-gradient-to-b from-blue-500/10 via-purple-500/5 to-transparent blur-3xl\"\n      />\n\n      {/* Header with Logo & Brand */}\n      <div className=\"relative z-10 flex flex-col items-center text-center\">\n        <div className=\"flex h-11 w-11 items-center justify-center rounded-2xl bg-neutral-100 dark:bg-neutral-800/90 text-neutral-900 dark:text-neutral-100 shadow-sm border border-neutral-200/60 dark:border-neutral-700/60\">\n          {logo ?? <Sparkles className=\"h-5 w-5 text-blue-600 dark:text-blue-400\" />}\n        </div>\n\n        <h1 className=\"mt-4 text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100\">\n          {mode === \"signin\" ? `Welcome to ${brandName}` : `Create your ${brandName} account`}\n        </h1>\n        <p className=\"mt-1 text-xs text-neutral-500 dark:text-neutral-400\">\n          {mode === \"signin\" ? tagline : \"Start your 14-day pro trial with zero commitment\"}\n        </p>\n      </div>\n\n      {/* Animated Segmented Tab Switcher */}\n      <div className=\"relative z-10 mt-6 flex rounded-full bg-neutral-100 dark:bg-neutral-900/90 p-1 border border-neutral-200/60 dark:border-neutral-800/80\">\n        <button\n          type=\"button\"\n          onClick={() => handleModeSwitch(\"signin\")}\n          className={cn(\n            \"relative z-10 flex-1 py-1.5 text-xs font-semibold transition-colors duration-200 text-center\",\n            mode === \"signin\"\n              ? \"text-neutral-900 dark:text-neutral-100\"\n              : \"text-neutral-500 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200\"\n          )}\n        >\n          {mode === \"signin\" && (\n            <motion.div\n              layoutId=\"auth-tab-pill\"\n              transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n              className=\"absolute inset-0 rounded-full bg-white dark:bg-neutral-800 shadow-sm border border-black/5 dark:border-white/5\"\n            />\n          )}\n          <span className=\"relative z-10\">Sign In</span>\n        </button>\n\n        <button\n          type=\"button\"\n          onClick={() => handleModeSwitch(\"signup\")}\n          className={cn(\n            \"relative z-10 flex-1 py-1.5 text-xs font-semibold transition-colors duration-200 text-center\",\n            mode === \"signup\"\n              ? \"text-neutral-900 dark:text-neutral-100\"\n              : \"text-neutral-500 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200\"\n          )}\n        >\n          {mode === \"signup\" && (\n            <motion.div\n              layoutId=\"auth-tab-pill\"\n              transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n              className=\"absolute inset-0 rounded-full bg-white dark:bg-neutral-800 shadow-sm border border-black/5 dark:border-white/5\"\n            />\n          )}\n          <span className=\"relative z-10\">Sign Up</span>\n        </button>\n      </div>\n\n      {/* OAuth Provider Buttons (Google, Apple, GitHub) */}\n      <div className=\"relative z-10 mt-6 grid grid-cols-3 gap-2.5\">\n        <button\n          type=\"button\"\n          onClick={() => onOAuthClick?.(\"google\")}\n          className=\"flex items-center justify-center gap-2 rounded-xl border border-neutral-200/90 dark:border-neutral-800 bg-white dark:bg-neutral-900/80 py-2.5 px-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/80 transition-all shadow-sm hover:scale-[1.02] active:scale-[0.98] text-neutral-700 dark:text-neutral-300\"\n          aria-label=\"Continue with Google\"\n        >\n          <GoogleLogo />\n          <span className=\"text-xs font-medium\">Google</span>\n        </button>\n\n        <button\n          type=\"button\"\n          onClick={() => onOAuthClick?.(\"apple\")}\n          className=\"flex items-center justify-center gap-2 rounded-xl border border-neutral-200/90 dark:border-neutral-800 bg-white dark:bg-neutral-900/80 py-2.5 px-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/80 transition-all shadow-sm hover:scale-[1.02] active:scale-[0.98] text-neutral-800 dark:text-neutral-200\"\n          aria-label=\"Continue with Apple\"\n        >\n          <AppleLogo />\n          <span className=\"text-xs font-medium\">Apple</span>\n        </button>\n\n        <button\n          type=\"button\"\n          onClick={() => onOAuthClick?.(\"github\")}\n          className=\"flex items-center justify-center gap-2 rounded-xl border border-neutral-200/90 dark:border-neutral-800 bg-white dark:bg-neutral-900/80 py-2.5 px-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/80 transition-all shadow-sm hover:scale-[1.02] active:scale-[0.98] text-neutral-800 dark:text-neutral-200\"\n          aria-label=\"Continue with GitHub\"\n        >\n          <GitHubLogo />\n          <span className=\"text-xs font-medium\">GitHub</span>\n        </button>\n      </div>\n\n      {/* Or Divider */}\n      <div className=\"relative z-10 my-6 flex items-center justify-center\">\n        <div className=\"w-full border-t border-neutral-200/80 dark:border-neutral-800\" />\n        <span className=\"absolute bg-white dark:bg-[#0c0c0e] px-3 text-[11px] font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider\">\n          or email\n        </span>\n      </div>\n\n      {/* Main Email & Password Form */}\n      <form onSubmit={handleSubmit} className=\"relative z-10 space-y-4\">\n        {/* Full Name field (Signup mode only) */}\n        <AnimatePresence initial={false}>\n          {mode === \"signup\" && (\n            <motion.div\n              initial={{ opacity: 0, height: 0, overflow: \"hidden\" }}\n              animate={{ opacity: 1, height: \"auto\" }}\n              exit={{ opacity: 0, height: 0 }}\n              transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}\n            >\n              <label\n                htmlFor={`${formUid}-name`}\n                className=\"block text-xs font-medium text-neutral-700 dark:text-neutral-300 mb-1.5\"\n              >\n                Full Name\n              </label>\n              <div className=\"relative\">\n                <User className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400\" />\n                <input\n                  id={`${formUid}-name`}\n                  type=\"text\"\n                  required\n                  placeholder=\"Alexander Vane\"\n                  value={name}\n                  onChange={(e) => setName(e.target.value)}\n                  className=\"w-full rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/70 dark:bg-neutral-900/60 pl-9 pr-3.5 py-2.5 text-xs sm:text-sm text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 transition-all\"\n                />\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        {/* Email Address */}\n        <div>\n          <label\n            htmlFor={`${formUid}-email`}\n            className=\"block text-xs font-medium text-neutral-700 dark:text-neutral-300 mb-1.5\"\n          >\n            Email Address\n          </label>\n          <div className=\"relative\">\n            <Mail className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400\" />\n            <input\n              id={`${formUid}-email`}\n              type=\"email\"\n              required\n              placeholder=\"alexander@pulse.design\"\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              className=\"w-full rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/70 dark:bg-neutral-900/60 pl-9 pr-3.5 py-2.5 text-xs sm:text-sm text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 transition-all\"\n            />\n          </div>\n        </div>\n\n        {/* Password field */}\n        <div>\n          <div className=\"flex items-center justify-between mb-1.5\">\n            <label\n              htmlFor={`${formUid}-password`}\n              className=\"block text-xs font-medium text-neutral-700 dark:text-neutral-300\"\n            >\n              Password\n            </label>\n            {mode === \"signin\" && (\n              <button\n                type=\"button\"\n                onClick={onForgotPassword}\n                className=\"text-xs font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 transition-colors\"\n              >\n                Forgot password?\n              </button>\n            )}\n          </div>\n          <div className=\"relative\">\n            <Lock className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400\" />\n            <input\n              id={`${formUid}-password`}\n              type={showPassword ? \"text\" : \"password\"}\n              required\n              placeholder={mode === \"signup\" ? \"Create a strong password\" : \"••••••••\"}\n              value={password}\n              onChange={(e) => setPassword(e.target.value)}\n              className=\"w-full rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/70 dark:bg-neutral-900/60 pl-9 pr-10 py-2.5 text-xs sm:text-sm text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 transition-all\"\n            />\n            <button\n              type=\"button\"\n              onClick={() => setShowPassword((prev) => !prev)}\n              className=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200 transition-colors\"\n              aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n            >\n              {showPassword ? (\n                <EyeOff className=\"h-4 w-4\" />\n              ) : (\n                <Eye className=\"h-4 w-4\" />\n              )}\n            </button>\n          </div>\n\n          {/* Password strength bar in signup mode */}\n          {mode === \"signup\" && password.length > 0 && (\n            <div className=\"mt-2 space-y-1\">\n              <div className=\"flex gap-1.5 h-1 w-full\">\n                {Array.from({ length: 4 }).map((_, i) => (\n                  <div\n                    key={i}\n                    className={cn(\n                      \"h-full flex-1 rounded-full transition-colors duration-300\",\n                      i < passwordStrength\n                        ? strengthColors[passwordStrength - 1]\n                        : \"bg-neutral-200 dark:bg-neutral-800\"\n                    )}\n                  />\n                ))}\n              </div>\n              <p className=\"text-[10px] text-neutral-400\">\n                Strength:{\" \"}\n                <span className=\"font-semibold text-neutral-700 dark:text-neutral-300\">\n                  {strengthLabels[passwordStrength - 1] ?? \"Too short\"}\n                </span>\n              </p>\n            </div>\n          )}\n        </div>\n\n        {/* Remember me (signin) or Agree to terms (signup) */}\n        {mode === \"signin\" ? (\n          <div className=\"flex items-center gap-2 pt-1\">\n            <input\n              id={`${formUid}-remember`}\n              type=\"checkbox\"\n              checked={rememberMe}\n              onChange={(e) => setRememberMe(e.target.checked)}\n              className=\"h-3.5 w-3.5 rounded border-neutral-300 text-blue-600 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800\"\n            />\n            <label\n              htmlFor={`${formUid}-remember`}\n              className=\"text-xs text-neutral-600 dark:text-neutral-400 cursor-pointer select-none\"\n            >\n              Remember this device for 30 days\n            </label>\n          </div>\n        ) : (\n          <div className=\"flex items-start gap-2 pt-1\">\n            <input\n              id={`${formUid}-terms`}\n              type=\"checkbox\"\n              required\n              checked={agreedTerms}\n              onChange={(e) => setAgreedTerms(e.target.checked)}\n              className=\"mt-0.5 h-3.5 w-3.5 rounded border-neutral-300 text-blue-600 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800\"\n            />\n            <label\n              htmlFor={`${formUid}-terms`}\n              className=\"text-[11px] text-neutral-500 dark:text-neutral-400 select-none leading-snug cursor-pointer\"\n            >\n              I agree to the{\" \"}\n              <a href=\"#terms\" className=\"text-blue-600 dark:text-blue-400 hover:underline\">\n                Terms of Service\n              </a>{\" \"}\n              and{\" \"}\n              <a href=\"#privacy\" className=\"text-blue-600 dark:text-blue-400 hover:underline\">\n                Privacy Policy\n              </a>\n            </label>\n          </div>\n        )}\n\n        {/* Submit Button */}\n        <motion.button\n          type=\"submit\"\n          disabled={isSubmitting || (mode === \"signup\" && !agreedTerms)}\n          whileHover={shouldReduceMotion ? undefined : { scale: 1.01 }}\n          whileTap={shouldReduceMotion ? undefined : { scale: 0.98 }}\n          className={cn(\n            \"mt-2 w-full flex items-center justify-center gap-2 rounded-xl py-2.5 px-4 text-xs sm:text-sm font-semibold transition-all shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500/40\",\n            isSuccess\n              ? \"bg-emerald-600 text-white\"\n              : \"bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100\",\n            (isSubmitting || (mode === \"signup\" && !agreedTerms)) && \"opacity-60 cursor-not-allowed\"\n          )}\n        >\n          {isSuccess ? (\n            <>\n              <Check className=\"h-4 w-4\" />\n              <span>{mode === \"signin\" ? \"Signed in successfully\" : \"Account created\"}</span>\n            </>\n          ) : isSubmitting ? (\n            <span className=\"flex items-center gap-2\">\n              <span className=\"h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n              <span>Authenticating...</span>\n            </span>\n          ) : (\n            <>\n              <span>{mode === \"signin\" ? \"Sign In with Email\" : \"Create Free Account\"}</span>\n              <ArrowRight className=\"h-3.5 w-3.5\" />\n            </>\n          )}\n        </motion.button>\n      </form>\n\n      {/* Footer Switcher & Security Verification */}\n      <div className=\"relative z-10 mt-6 pt-4 border-t border-neutral-100 dark:border-neutral-800/80 flex flex-col items-center gap-2\">\n        <p className=\"text-xs text-neutral-500 dark:text-neutral-400 text-center\">\n          {mode === \"signin\" ? \"Don't have an account yet?\" : \"Already have an account?\"}{\" \"}\n          <button\n            type=\"button\"\n            onClick={() => handleModeSwitch(mode === \"signin\" ? \"signup\" : \"signin\")}\n            className=\"font-semibold text-blue-600 hover:text-blue-500 dark:text-blue-400 transition-colors\"\n          >\n            {mode === \"signin\" ? \"Sign up free\" : \"Log in\"}\n          </button>\n        </p>\n\n        <div className=\"flex items-center gap-1.5 text-[10px] text-neutral-400 dark:text-neutral-500 font-medium\">\n          <ShieldCheck className=\"h-3 w-3 text-emerald-500\" />\n          <span>256-bit End-to-End SSL Encryption</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default MinimalAuthCard;\n",
      "type": "registry:ui",
      "target": "components/ui/minimal-auth-card.tsx"
    },
    {
      "path": "lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport async function copyToClipboard(text: string): Promise<boolean> {\n  if (typeof window === \"undefined\") return false;\n\n  try {\n    if (navigator.clipboard && window.isSecureContext) {\n      await navigator.clipboard.writeText(text);\n      return true;\n    }\n\n    const textArea = document.createElement(\"textarea\");\n    textArea.value = text;\n    textArea.style.position = \"fixed\";\n    textArea.style.left = \"-999999px\";\n    textArea.style.top = \"-999999px\";\n    document.body.appendChild(textArea);\n    textArea.focus();\n    textArea.select();\n    const succeeded = document.execCommand(\"copy\");\n    textArea.remove();\n    return succeeded;\n  } catch {\n    return false;\n  }\n}\n",
      "type": "registry:lib",
      "target": "lib/utils.ts"
    }
  ]
}