{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-layouts",
  "title": "Form Layouts",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/form-layouts/FormLayouts.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Globe, Link2, Lock } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { SectionCard } from '@/components/ui/section-card'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Switch } from '@/components/ui/switch'\nimport { Textarea } from '@/components/ui/textarea'\n\nconst DESCRIPTION_LIMIT = 280\n\nexport interface FormLayoutsProps {\n  className?: string\n}\n\nexport function FormLayouts({ className }: FormLayoutsProps) {\n  const [name, setName] = React.useState('')\n  const [description, setDescription] = React.useState('')\n  const [visibility, setVisibility] = React.useState('internal')\n  const [startDate, setStartDate] = React.useState('')\n  const [budget, setBudget] = React.useState('')\n  const [access, setAccess] = React.useState<'link' | 'restricted'>('link')\n  const [notifications, setNotifications] = React.useState(true)\n  const [comments, setComments] = React.useState(true)\n  const [submitted, setSubmitted] = React.useState(false)\n\n  const slug =\n    name\n      .trim()\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, '-')\n      .replace(/^-+|-+$/g, '') || 'your-project'\n\n  const showNameError = submitted && name.trim() === ''\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    setSubmitted(true)\n    if (name.trim() === '') return\n  }\n\n  return (\n    <div data-slot=\"form-layouts\" className={`max-w-2xl ${className ?? ''}`}>\n      <form className=\"space-y-6\" noValidate onSubmit={handleSubmit}>\n        <SectionCard title=\"Project details\" description=\"Name your project and describe what it covers.\">\n          <div className=\"space-y-4\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"fl-name\">Name</Label>\n              <Input\n                id=\"fl-name\"\n                value={name}\n                onChange={(event) => setName(event.target.value)}\n                placeholder=\"Q3 launch site\"\n                autoComplete=\"off\"\n                aria-invalid={showNameError || undefined}\n              />\n              {showNameError && (\n                <p role=\"alert\" className=\"text-destructive text-xs\">\n                  Project name is required.\n                </p>\n              )}\n            </div>\n            <div className=\"border-border bg-muted/40 flex items-center gap-2 rounded-md border px-3 py-2\">\n              <Globe className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n              <p className=\"min-w-0 truncate text-xs\">\n                <span className=\"text-muted-foreground\">acme.uipkge.app/</span>\n                <span className=\"text-foreground font-medium\">{slug}</span>\n              </p>\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"fl-description\">Description</Label>\n              <Textarea\n                id=\"fl-description\"\n                value={description}\n                onValueChange={setDescription}\n                rows={3}\n                placeholder=\"What is this project about?\"\n              />\n              <p\n                className={`text-right text-xs ${\n                  description.length > DESCRIPTION_LIMIT ? 'text-destructive' : 'text-muted-foreground'\n                }`}\n              >\n                {description.length}/{DESCRIPTION_LIMIT}\n              </p>\n            </div>\n          </div>\n        </SectionCard>\n\n        <SectionCard title=\"Configuration\" description=\"Visibility, schedule and budget for the project.\">\n          <div className=\"grid gap-4 sm:grid-cols-3\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"fl-visibility\">Visibility</Label>\n              <Select value={visibility} onValueChange={setVisibility}>\n                <SelectTrigger id=\"fl-visibility\" className=\"w-full\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"public\">Public</SelectItem>\n                  <SelectItem value=\"internal\">Internal</SelectItem>\n                  <SelectItem value=\"private\">Private</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"fl-start-date\">Start date</Label>\n              <Input\n                id=\"fl-start-date\"\n                type=\"date\"\n                value={startDate}\n                onChange={(event) => setStartDate(event.target.value)}\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"fl-budget\">Budget</Label>\n              <Input\n                id=\"fl-budget\"\n                type=\"number\"\n                min={0}\n                step={500}\n                className=\"text-left\"\n                value={budget}\n                onChange={(event) => setBudget(event.target.value)}\n              />\n            </div>\n          </div>\n        </SectionCard>\n\n        <SectionCard title=\"Access\" description=\"Decide who can open the project and what they can do.\">\n          <div className=\"space-y-5\">\n            <RadioGroup\n              value={access}\n              onValueChange={(value) => setAccess(value as 'link' | 'restricted')}\n              className=\"gap-3\"\n            >\n              <div className=\"hover:bg-accent/50 has-data-[state=checked]:border-primary flex items-start gap-3 rounded-lg border p-3 transition-colors\">\n                <RadioGroupItem id=\"fl-access-link\" value=\"link\" className=\"mt-0.5\" />\n                <label htmlFor=\"fl-access-link\" className=\"cursor-pointer select-none\">\n                  <span className=\"flex items-center gap-1.5 text-sm font-medium\">\n                    <Link2 className=\"size-4\" aria-hidden=\"true\" />\n                    Anyone with the link\n                  </span>\n                  <span className=\"text-muted-foreground mt-0.5 block text-xs\">\n                    Guests can view without signing in.\n                  </span>\n                </label>\n              </div>\n              <div className=\"hover:bg-accent/50 has-data-[state=checked]:border-primary flex items-start gap-3 rounded-lg border p-3 transition-colors\">\n                <RadioGroupItem id=\"fl-access-restricted\" value=\"restricted\" className=\"mt-0.5\" />\n                <label htmlFor=\"fl-access-restricted\" className=\"cursor-pointer select-none\">\n                  <span className=\"flex items-center gap-1.5 text-sm font-medium\">\n                    <Lock className=\"size-4\" aria-hidden=\"true\" />\n                    Restricted\n                  </span>\n                  <span className=\"text-muted-foreground mt-0.5 block text-xs\">\n                    Only invited members can open the project.\n                  </span>\n                </label>\n              </div>\n            </RadioGroup>\n\n            <div className=\"divide-y rounded-lg border\">\n              <div className=\"flex items-center justify-between gap-4 p-4\">\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-medium\">Notifications</p>\n                  <p className=\"text-muted-foreground mt-0.5 text-xs\">Email the team on status changes and mentions.</p>\n                </div>\n                <Switch checked={notifications} onCheckedChange={setNotifications} aria-label=\"Toggle notifications\" />\n              </div>\n              <div className=\"flex items-center justify-between gap-4 p-4\">\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-medium\">Comments</p>\n                  <p className=\"text-muted-foreground mt-0.5 text-xs\">Let viewers comment on tasks and updates.</p>\n                </div>\n                <Switch checked={comments} onCheckedChange={setComments} aria-label=\"Toggle comments\" />\n              </div>\n            </div>\n          </div>\n        </SectionCard>\n\n        <div className=\"bg-background/80 border-border sticky bottom-0 -mx-1 flex items-center justify-end gap-2 rounded-b-xl border-t px-1 py-4 backdrop-blur\">\n          <Button type=\"button\" variant=\"ghost\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button type=\"submit\" size=\"sm\" disabled={name.trim() === ''}>\n            Create project\n          </Button>\n        </div>\n      </form>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/FormLayouts.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/label.json",
    "https://uipkge.dev/r/react/radio-group.json",
    "https://uipkge.dev/r/react/section-card.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/switch.json",
    "https://uipkge.dev/r/react/textarea.json"
  ],
  "description": "Structured create/edit entity form (\"New project\"): stacked SectionCards for project details (name with live slug preview, description with char counter), configuration (visibility Select, start date, budget), and access (link vs restricted RadioGroup, notification/comment Switch rows) with a sticky-feel footer bar. Create stays disabled until the name is filled; validation hints appear under empty required fields after the first submit attempt.",
  "categories": [
    "layout",
    "app",
    "forms"
  ]
}