{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-1",
  "description": "Elegant workspace creation form with labeled inputs, grouped fields, and a clean card layout for onboarding users smoothly.",
  "registryDependencies": [
    "button",
    "button-group",
    "field",
    "input",
    "input-group",
    "label"
  ],
  "files": [
    {
      "path": "registry/blocks/form/1/create-workspace-form.tsx",
      "content": "import { CircleCheckIcon } from \"lucide-react\";\nimport { LogoIcon } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup, ButtonGroupText } from \"@/components/ui/button-group\";\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { Label } from \"@/components/ui/label\";\n\nexport function CreateWorkspaceForm() {\n  return (\n    <div className=\"w-full max-w-md rounded-xl border bg-background shadow-sm\">\n      <div className=\"flex flex-col items-center justify-center gap-6 rounded-t-xl border-b bg-card/60 py-12\">\n        <LogoIcon className=\"size-6\" />\n        <div className=\"flex flex-col items-center space-y-1\">\n          <h2 className=\"font-medium text-2xl\">Create your workspace</h2>\n          <a className=\"text-muted-foreground underline\" href=\"#\">\n            What is a workspace?\n          </a>\n        </div>\n      </div>\n      <FieldGroup className=\"p-4\">\n        <Field className=\"gap-2\">\n          <FieldLabel htmlFor=\"name\">Workspace Name</FieldLabel>\n          <Input autoComplete=\"off\" id=\"name\" placeholder=\"e.g., Acme, Inc.\" />\n          <FieldDescription>\n            This is the name of your workspace on Freddy.\n          </FieldDescription>\n        </Field>\n        <Field className=\"gap-2\">\n          <FieldLabel htmlFor=\"slug\">Workspace Slug</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText asChild>\n              <Label htmlFor=\"slug\">freddy.com/</Label>\n            </ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"slug\" placeholder=\"e.g., acme\" />\n              <InputGroupAddon align=\"inline-end\">\n                <CircleCheckIcon />\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n          <FieldDescription>\n            This is your workspace's unique slug on Freddy.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n      <div className=\"rounded-b-xl border-t bg-card/60 p-4\">\n        <Button className=\"w-full\" type=\"submit\">\n          Create Workspace\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/logo.tsx",
      "content": "\"use client\";\n\nimport Image from \"next/image\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype LogoProps = {\n  className?: string;\n};\n\nexport const LogoIcon = ({ className }: LogoProps) => {\n  const { theme, systemTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <span\n        className={cn(\n          \"inline-block size-6 animate-pulse rounded-full bg-muted\",\n          className\n        )}\n      />\n    );\n  }\n\n  const currentTheme = theme === \"system\" ? systemTheme : theme;\n  const src =\n    currentTheme === \"dark\"\n      ? \"/logo/freddy-logo-icon-light.png\"\n      : \"/logo/freddy-logo-icon-dark.png\";\n\n  return (\n    <Image\n      alt=\"Freddy UI\"\n      className={cn(\"size-6 object-contain\", className)}\n      height={250}\n      priority\n      src={src}\n      width={250}\n    />\n  );\n};\n\nexport const Logo = ({ className }: LogoProps) => {\n  const { theme, systemTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <span\n        className={cn(\n          \"inline-block h-6 w-24 animate-pulse rounded bg-muted\",\n          className\n        )}\n      />\n    );\n  }\n\n  const currentTheme = theme === \"system\" ? systemTheme : theme;\n  const src =\n    currentTheme === \"dark\"\n      ? \"/logo/freddy-logo-light.png\"\n      : \"/logo/freddy-logo-dark.png\";\n\n  return (\n    <Image\n      alt=\"Freddy UI\"\n      className={cn(\"h-6 w-auto object-contain\", className)}\n      height={106}\n      priority\n      src={src}\n      width={344}\n    />\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "80vh"
  },
  "categories": [
    "form"
  ],
  "type": "registry:block"
}