{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-login",
  "type": "registry:item",
  "title": "Card Login",
  "description": "A login card component with email/password fields and social login options.",
  "registryDependencies": [
    "https://roiui.com/r/badge.json",
    "https://roiui.com/r/button.json",
    "https://roiui.com/r/card.json",
    "https://roiui.com/r/checkbox.json",
    "https://roiui.com/r/field.json"
  ],
  "files": [
    {
      "path": "registry/brook/blocks/card-login/components/card-login.tsx",
      "content": "\"use client\";\nimport { Check } from \"lucide-react\";\nimport { Badge } from \"@/registry/brook/ui/badge/badge\";\nimport { Button } from \"@/registry/brook/ui/button/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/registry/brook/ui/card/card\";\nimport { Checkbox, CheckboxIndicator } from \"@/registry/brook/ui/checkbox/checkbox\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/brook/ui/field/field\";\nimport { Form, FormActions, FormGroup } from \"@/registry/brook/ui/form/form\";\nimport { Input } from \"@/registry/brook/ui/input/input\";\nimport styles from \"./card-login.module.css\";\n\nexport default function CardLoginDemo() {\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    console.log(\"Form submitted:\", Object.fromEntries(formData));\n  };\n\n  return (\n    <Card className={styles.card}>\n      <CardHeader>\n        <CardTitle className={styles.cardTitle}>Sign In</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <Form className={styles.form} onSubmit={handleSubmit}>\n          <FormGroup>\n            <Field className={styles.emailField}>\n              <FieldLabel className={styles.fieldLabel}>Email</FieldLabel>\n              <Input\n                autoComplete=\"email\"\n                name=\"email\"\n                placeholder=\"Enter your email…\"\n                required\n                spellCheck={false}\n                type=\"email\"\n              />\n              <FieldError />\n            </Field>\n\n            <Field>\n              <div className={styles.passwordLabelRow}>\n                <FieldLabel className={styles.fieldLabel}>Password</FieldLabel>\n                <button className={styles.forgotPassword} type=\"button\">\n                  Forgot password?\n                </button>\n              </div>\n              <Input\n                autoComplete=\"current-password\"\n                name=\"password\"\n                placeholder=\"Enter your password…\"\n                required\n                type=\"password\"\n              />\n              <FieldError />\n            </Field>\n\n            <label className={styles.checkboxLabel} htmlFor=\"remember-me\">\n              <Checkbox defaultChecked={false} id=\"remember-me\" name=\"rememberMe\">\n                <CheckboxIndicator>\n                  <Check size={16} strokeWidth={3} />\n                </CheckboxIndicator>\n              </Checkbox>\n              <span className={styles.rememberMe}>Remember me</span>\n            </label>\n          </FormGroup>\n\n          <FormActions className={styles.footer}>\n            <Button className={styles.button} type=\"submit\">\n              <span className={styles.buttonContent}>Sign In</span>\n            </Button>\n          </FormActions>\n        </Form>\n      </CardContent>\n      <div className={styles.dividerContainer}>\n        <div className={styles.dividerLine} />\n        <span className={styles.dividerText}>OR</span>\n        <div className={styles.dividerLine} />\n      </div>\n      <div className={styles.socialLoginContainer}>\n        <Button className={styles.socialButton} variant=\"outline\">\n          <AppleIcon className={styles.appleLogo} />\n          Apple\n        </Button>\n        <Button className={styles.socialButton} variant=\"outline\">\n          <GoogleIcon className={styles.socialIcon} />\n          Google\n          <Badge className={styles.lastUsedBadge} size=\"sm\" variant=\"info\">\n            Last used\n          </Badge>\n        </Button>\n      </div>\n      <div className={styles.signupBanner}>\n        <span className={styles.signupText}>No account? </span>\n        <button className={styles.signupLink} type=\"button\">\n          Sign up\n        </button>\n      </div>\n    </Card>\n  );\n}\n\nfunction AppleIcon({ className }: { className?: string }) {\n  return (\n    <svg aria-hidden=\"true\" className={className} viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        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\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nfunction GoogleIcon({ className }: { className?: string }) {\n  return (\n    <svg aria-hidden=\"true\" className={className} viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n",
      "type": "registry:file",
      "target": "~/components/blocks/card-login/card-login.tsx"
    },
    {
      "path": "registry/brook/blocks/card-login/components/card-login.module.css",
      "content": ".card {\n  width: 100%;\n  max-width: 440px;\n  margin: 0 auto;\n  padding: 20px;\n  border-radius: var(--radius-lg);\n}\n\n.cardTitle {\n  margin-left: 4px;\n}\n\n.form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.checkboxLabel {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 20px;\n  font-weight: 300;\n  margin-left: 4px;\n  margin-top: 0.5rem;\n  cursor: pointer;\n}\n\n.button {\n  width: 100%;\n}\n\n.card .button:active:not([data-disabled]),\n.card .button[data-pressed],\n.card .socialButton:active:not([data-disabled]),\n.card .socialButton[data-pressed] {\n  transform: scale(0.993);\n}\n\n.buttonContent {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.spinner {\n  position: absolute;\n  right: 1rem;\n  animation: spin 0.6s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.emailField {\n  padding-bottom: 4px;\n}\n\n.fieldLabel {\n  margin-left: 4px;\n}\n\n.passwordLabelRow {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n}\n\n.forgotPassword {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 0.875rem;\n  line-height: 20px;\n  color: var(--secondary-foreground);\n  cursor: pointer;\n  transition: color 0.2s;\n  margin-right: 4px;\n  font-weight: 300;\n}\n\n.forgotPassword:hover {\n  color: var(--foreground);\n}\n\n.rememberMe {\n  color: var(--secondary-foreground);\n  cursor: pointer;\n}\n.rememberMe:hover {\n  color: var(--foreground);\n}\n.signupBanner {\n  width: calc(100% + 40px);\n\n  margin-left: -20px;\n  margin-right: -20px;\n  margin-bottom: -20px;\n  margin-top: -8px;\n  text-align: center;\n  font-size: 0.875rem;\n  line-height: 20px;\n  padding: 1.25rem 0;\n  background-color: var(--mix-card-35-trans);\n\n  border-radius: 0 0 var(--radius-lg) var(--radius-lg);\n}\n\n.signupText {\n  color: var(--muted-foreground);\n}\n\n.signupLink {\n  background: none;\n  border: none;\n  padding: 0;\n  color: var(--secondary-foreground);\n  cursor: pointer;\n  font: inherit;\n\n  &:hover {\n    color: var(--foreground);\n  }\n}\n\n.dividerContainer {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.dividerLine {\n  flex: 1;\n  height: 1px;\n  background-color: var(--border);\n}\n\n.dividerText {\n  color: var(--muted-foreground);\n  font-size: 0.75rem;\n  line-height: 20px;\n  font-weight: 400;\n  padding: 0 0.5rem;\n}\n\n.socialLoginContainer {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.socialButton {\n  width: 100%;\n  display: flex;\n  gap: 0.5rem;\n  position: relative;\n}\n\n.socialIcon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.appleLogo {\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-left: -8px;\n}\n\n.lastUsedBadge {\n  position: absolute;\n  right: 12px;\n}\n\n@media (max-width: 640px) {\n  .card {\n    padding: 1rem;\n  }\n\n  .cardTitle {\n    font-size: 1.25rem;\n    line-height: 1.3;\n  }\n\n  .fieldLabel {\n    font-size: 0.875rem;\n  }\n\n  .checkboxLabel {\n    font-size: 0.875rem;\n    gap: 0.625rem;\n    min-height: 2.75rem;\n    align-items: center;\n  }\n\n  .forgotPassword {\n    font-size: 0.875rem;\n    min-height: 2.75rem;\n    padding: 0.5rem;\n    margin-right: 0;\n  }\n\n  .rememberMe {\n    font-size: 0.875rem;\n  }\n\n  .signupBanner {\n    width: calc(100% + 2rem);\n    margin-left: -1rem;\n    margin-right: -1rem;\n    margin-bottom: -1rem;\n    font-size: 0.9375rem;\n    padding: 1rem 0;\n  }\n\n  .dividerText {\n    font-size: 0.8125rem;\n  }\n\n  .socialButton {\n    min-height: 2.75rem;\n    font-size: 0.9375rem;\n    gap: 0.625rem;\n  }\n\n  .socialIcon,\n  .appleLogo {\n    width: 1.125rem;\n    height: 1.125rem;\n  }\n\n  .appleLogo {\n    margin-left: -4px;\n  }\n\n  .lastUsedBadge {\n    right: 8px;\n  }\n\n  .passwordLabelRow {\n    margin-bottom: 0.375rem;\n  }\n}\n",
      "type": "registry:file",
      "target": "~/components/blocks/card-login/card-login.module.css"
    }
  ]
}