{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "profile-form",
  "title": "Profile Form",
  "type": "registry:blocks",
  "description": "Account profile form block with avatar upload header, prefix username input, timezone select, and auto-resizing bio.",
  "dependencies": [
    "@radix-ui/react-select",
    "lucide-react"
  ],
  "usage": "import { UserProfileFormBlock } from \"@etherealui/react\"\n\nexport function ProfileFormDemo() {\n  return <UserProfileFormBlock />\n}",
  "files": [
    {
      "path": "packages/ui/src/blocks/settings-blocks.tsx",
      "target": "components/ui/profile-form.tsx",
      "type": "registry:blocks",
      "content": "import * as React from \"react\"\nimport {\n  Shield,\n  Plus,\n  CreditCard,\n  Check,\n  Smartphone,\n  Laptop,\n} from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\nimport { Avatar } from \"../primitives/avatar\"\nimport { Badge } from \"../primitives/badge\"\nimport { Button } from \"../primitives/button\"\nimport { Input, Label, Textarea } from \"../primitives/input\"\nimport { Switch } from \"../primitives/switch\"\nimport {\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectContent,\n  SelectItem,\n} from \"../primitives/select\"\nimport { Progress } from \"../primitives/progress\"\n\nexport const UserProfileFormBlock: React.FC<{ className?: string }> = ({\n  className,\n}) => {\n  const [saved, setSaved] = React.useState(false)\n  const [timezone, setTimezone] = React.useState(\"utc+7\")\n\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-zinc-200 bg-white p-6 space-y-6 dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between border-b border-zinc-200 pb-5 dark:border-zinc-800\">\n        <div className=\"flex items-center gap-4\">\n          <Avatar fallback=\"SR\" tint=\"blue\" size=\"xl\" status=\"online\" />\n          <div>\n            <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n              Profile details\n            </h3>\n            <p className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n              Update your photo and personal details here.\n            </p>\n          </div>\n        </div>\n        <Button variant=\"outline\" size=\"sm\">\n          Change photo\n        </Button>\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n        <div className=\"space-y-2\">\n          <Label>Full name</Label>\n          <Input defaultValue=\"Saeful Rohman\" />\n        </div>\n        <div className=\"space-y-2\">\n          <Label>Username</Label>\n          <Input prefixText=\"ethereal-ui.dev/\" defaultValue=\"saefulrdevs\" />\n        </div>\n        <div className=\"space-y-2\">\n          <Label>Email address</Label>\n          <Input type=\"email\" defaultValue=\"saeful@acme.com\" />\n        </div>\n        <div className=\"space-y-2\">\n          <Label>Timezone</Label>\n          <Select value={timezone} onValueChange={setTimezone}>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc+7\">Asia/Jakarta (GMT+07:00)</SelectItem>\n              <SelectItem value=\"utc+0\">UTC / London (GMT+00:00)</SelectItem>\n              <SelectItem value=\"utc-5\">America/New_York (EST)</SelectItem>\n              <SelectItem value=\"utc+9\">Asia/Tokyo (JST)</SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"sm:col-span-2 space-y-2\">\n          <Label optional>Bio</Label>\n          <Textarea\n            autoResize\n            defaultValue=\"Product engineer focused on design systems and web architecture.\"\n          />\n        </div>\n      </div>\n\n      <div className=\"flex items-center justify-end gap-2 border-t border-zinc-200 pt-4 dark:border-zinc-800\">\n        <Button variant=\"outline\" size=\"sm\">\n          Cancel\n        </Button>\n        <Button\n          variant=\"primary\"\n          size=\"sm\"\n          onClick={() => {\n            setSaved(true)\n            setTimeout(() => setSaved(false), 2000)\n          }}\n        >\n          {saved ? \"Saved ✓\" : \"Save changes\"}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport const SecurityPasswordFormBlock: React.FC<{ className?: string }> = ({\n  className,\n}) => {\n  const [mfaEnabled, setMfaEnabled] = React.useState(true)\n  const [hardwareKey, setHardwareKey] = React.useState(true)\n\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-zinc-200 bg-white p-6 space-y-6 dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex items-start justify-between\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100 flex items-center gap-2\">\n            <Shield className=\"h-4 w-4 text-blue-600 dark:text-blue-400\" />\n            Two-factor authentication &amp; sessions\n          </h3>\n          <p className=\"mt-1 text-xs text-zinc-500 dark:text-zinc-400\">\n            Manage passkeys, authenticator apps, and active devices.\n          </p>\n        </div>\n        <Badge variant=\"emerald\" dot>\n          Protected\n        </Badge>\n      </div>\n\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between rounded-xl border border-zinc-200 bg-zinc-50/60 p-4 dark:border-zinc-800 dark:bg-zinc-800/40\">\n          <div className=\"space-y-0.5\">\n            <p className=\"text-xs font-medium text-zinc-900 dark:text-zinc-100\">\n              Authenticator App (TOTP)\n            </p>\n            <p className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n              Use a 6-digit verification code when signing in.\n            </p>\n          </div>\n          <Switch checked={mfaEnabled} onCheckedChange={setMfaEnabled} />\n        </div>\n\n        <div className=\"flex items-center justify-between rounded-xl border border-zinc-200 bg-zinc-50/60 p-4 dark:border-zinc-800 dark:bg-zinc-800/40\">\n          <div className=\"space-y-0.5\">\n            <p className=\"text-xs font-medium text-zinc-900 dark:text-zinc-100\">\n              Passkey / Security Key\n            </p>\n            <p className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n              Biometric or hardware key sign-in via WebAuthn.\n            </p>\n          </div>\n          <Switch checked={hardwareKey} onCheckedChange={setHardwareKey} />\n        </div>\n      </div>\n\n      <div className=\"space-y-3 border-t border-zinc-200 pt-4 dark:border-zinc-800\">\n        <div className=\"text-xs font-medium text-zinc-700 dark:text-zinc-300\">\n          Active sessions\n        </div>\n        <div className=\"divide-y divide-zinc-200 rounded-xl border border-zinc-200 dark:divide-zinc-800 dark:border-zinc-800\">\n          <div className=\"flex items-center justify-between p-3.5\">\n            <div className=\"flex items-center gap-3\">\n              <Laptop className=\"h-4 w-4 text-zinc-500\" />\n              <div>\n                <p className=\"text-xs font-medium text-zinc-900 dark:text-zinc-100\">\n                  MacBook Pro • Chrome 134 (Current)\n                </p>\n                <p className=\"text-[11px] text-zinc-500\">\n                  Jakarta, Indonesia • Active now\n                </p>\n              </div>\n            </div>\n            <Badge variant=\"emerald\">Current</Badge>\n          </div>\n          <div className=\"flex items-center justify-between p-3.5\">\n            <div className=\"flex items-center gap-3\">\n              <Smartphone className=\"h-4 w-4 text-zinc-400\" />\n              <div>\n                <p className=\"text-xs font-medium text-zinc-900 dark:text-zinc-100\">\n                  iPhone 16 Pro • Safari\n                </p>\n                <p className=\"text-[11px] text-zinc-500\">\n                  Last active 3 hours ago\n                </p>\n              </div>\n            </div>\n            <Button variant=\"outline\" size=\"sm\">\n              Revoke\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport interface TeamMember {\n  id: string\n  name: string\n  email: string\n  fallback: string\n  role: string\n  status: \"online\" | \"away\" | \"offline\"\n}\n\nexport const TeamRbacTableBlock: React.FC<{ className?: string }> = ({\n  className,\n}) => {\n  const [members, setMembers] = React.useState<TeamMember[]>([\n    {\n      id: \"m1\",\n      name: \"Saeful Rohman\",\n      email: \"saeful@acme.com\",\n      fallback: \"SR\",\n      role: \"owner\",\n      status: \"online\",\n    },\n    {\n      id: \"m2\",\n      name: \"Elena Rostova\",\n      email: \"elena@acme.com\",\n      fallback: \"ER\",\n      role: \"admin\",\n      status: \"online\",\n    },\n    {\n      id: \"m3\",\n      name: \"Marcus Vance\",\n      email: \"mvance@acme.com\",\n      fallback: \"MV\",\n      role: \"member\",\n      status: \"away\",\n    },\n  ])\n\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-zinc-200 bg-white overflow-hidden dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between border-b border-zinc-200 p-5 dark:border-zinc-800\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n            Team members\n          </h3>\n          <p className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n            Manage who has access to this workspace and their permissions.\n          </p>\n        </div>\n        <Button\n          variant=\"primary\"\n          size=\"sm\"\n          onClick={() =>\n            setMembers((prev) => [\n              ...prev,\n              {\n                id: `m-${prev.length + 1}`,\n                name: \"Aria Chen\",\n                email: \"aria@acme.com\",\n                fallback: \"AC\",\n                role: \"member\",\n                status: \"online\",\n              },\n            ])\n          }\n        >\n          <Plus className=\"h-3.5 w-3.5\" />\n          Invite member\n        </Button>\n      </div>\n\n      <div className=\"divide-y divide-zinc-200 dark:divide-zinc-800\">\n        {members.map((member, idx) => (\n          <div\n            key={member.id}\n            className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 py-3.5\"\n          >\n            <div className=\"flex items-center gap-3\">\n              <Avatar\n                fallback={member.fallback}\n                tint={idx % 2 === 0 ? \"blue\" : \"neutral\"}\n                status={member.status}\n                size=\"default\"\n              />\n              <div>\n                <p className=\"text-xs font-medium text-zinc-900 dark:text-zinc-100\">\n                  {member.name}\n                </p>\n                <p className=\"text-[11px] text-zinc-500\">{member.email}</p>\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-3\">\n              <Select\n                value={member.role}\n                onValueChange={(newRole) =>\n                  setMembers((prev) =>\n                    prev.map((m) =>\n                      m.id === member.id ? { ...m, role: newRole } : m\n                    )\n                  )\n                }\n              >\n                <SelectTrigger className=\"w-36 h-8 text-xs\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"owner\">Owner</SelectItem>\n                  <SelectItem value=\"admin\">Admin</SelectItem>\n                  <SelectItem value=\"member\">Member</SelectItem>\n                  <SelectItem value=\"viewer\">Billing Viewer</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport const BillingPlanCardBlock: React.FC<{ className?: string }> = ({\n  className,\n}) => {\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-zinc-200 bg-white p-6 space-y-6 dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between border-b border-zinc-200 pb-5 dark:border-zinc-800\">\n        <div>\n          <div className=\"flex items-center gap-2\">\n            <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n              Pro Plan\n            </h3>\n            <Badge variant=\"blue\">Active</Badge>\n          </div>\n          <p className=\"mt-1 text-xs text-zinc-500 dark:text-zinc-400\">\n            Includes unlimited projects, custom domains, and team collaboration.\n          </p>\n        </div>\n        <div className=\"text-right\">\n          <div className=\"text-2xl font-bold text-zinc-900 dark:text-zinc-100\">\n            $49<span className=\"text-xs font-normal text-zinc-400\">/month</span>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n        <div className=\"rounded-xl border border-zinc-200 bg-zinc-50/50 p-4 space-y-2 dark:border-zinc-800 dark:bg-zinc-800/40\">\n          <Progress value={78} label=\"Team seats\" showValue variant=\"blue\" />\n          <p className=\"text-[11px] text-zinc-500\">39 of 50 seats used</p>\n        </div>\n        <div className=\"rounded-xl border border-zinc-200 bg-zinc-50/50 p-4 space-y-2 dark:border-zinc-800 dark:bg-zinc-800/40\">\n          <Progress\n            value={44}\n            label=\"Storage volume\"\n            showValue\n            variant=\"emerald\"\n          />\n          <p className=\"text-[11px] text-zinc-500\">44 GB of 100 GB</p>\n        </div>\n        <div className=\"rounded-xl border border-zinc-200 bg-zinc-50/50 p-4 space-y-2 dark:border-zinc-800 dark:bg-zinc-800/40\">\n          <Progress value={62} label=\"Monthly bandwidth\" showValue variant=\"blue\" />\n          <p className=\"text-[11px] text-zinc-500\">620 GB of 1 TB</p>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between rounded-xl border border-zinc-200 p-4 dark:border-zinc-800\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-zinc-700 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-200\">\n            <CreditCard className=\"h-4 w-4\" />\n          </div>\n          <div>\n            <p className=\"text-xs font-medium text-zinc-900 dark:text-zinc-100\">\n              Visa ending in 4242\n            </p>\n            <p className=\"text-[11px] text-zinc-500\">\n              Expires 09/2028 • Default payment method\n            </p>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Badge variant=\"emerald\">\n            <Check className=\"h-3 w-3\" /> Verified\n          </Badge>\n          <Button variant=\"outline\" size=\"sm\">\n            Edit card\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
    }
  ]
}