{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "form-layouts",
  "title": "Form Layouts",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/form-layouts/FormLayouts.svelte",
      "content": "<script lang=\"ts\" module>\n  export interface FormLayoutsProps {\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Globe, Link2, Lock } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { Input } from '$lib/components/ui/input'\n  import { Label } from '$lib/components/ui/label'\n  import { RadioGroup, RadioGroupItem } from '$lib/components/ui/radio-group'\n  import { SectionCard } from '$lib/components/ui/section-card'\n  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '$lib/components/ui/select'\n  import { Switch } from '$lib/components/ui/switch'\n  import { Textarea } from '$lib/components/ui/textarea'\n\n  let { class: className }: FormLayoutsProps = $props()\n\n  const DESCRIPTION_LIMIT = 280\n\n  let name = $state('')\n  let description = $state('')\n  let visibility = $state('internal')\n  let startDate = $state('')\n  let budget = $state('')\n  let access = $state<'link' | 'restricted'>('link')\n  let notifications = $state(true)\n  let comments = $state(true)\n  let submitted = $state(false)\n\n  const slug = $derived.by(() => {\n    const cleaned = name\n      .trim()\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, '-')\n      .replace(/^-+|-+$/g, '')\n    return cleaned || 'your-project'\n  })\n\n  const showNameError = $derived(submitted && name.trim() === '')\n\n  function handleSubmit() {\n    submitted = true\n    if (name.trim() === '') return\n  }\n</script>\n\n<div data-slot=\"form-layouts\" class={['max-w-2xl', className]}>\n  <form\n    class=\"space-y-6\"\n    novalidate\n    onsubmit={(e) => {\n      e.preventDefault()\n      handleSubmit()\n    }}\n  >\n    <SectionCard title=\"Project details\" description=\"Name your project and describe what it covers.\">\n      <div class=\"space-y-4\">\n        <div class=\"space-y-2\">\n          <Label for=\"fl-name\">Name</Label>\n          <Input\n            id=\"fl-name\"\n            bind:value={name}\n            placeholder=\"Q3 launch site\"\n            autocomplete=\"off\"\n            aria-invalid={showNameError || undefined}\n          />\n          {#if showNameError}\n            <p role=\"alert\" class=\"text-destructive text-xs\">Project name is required.</p>\n          {/if}\n        </div>\n        <div class=\"border-border bg-muted/40 flex items-center gap-2 rounded-md border px-3 py-2\">\n          <Globe class=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n          <p class=\"min-w-0 truncate text-xs\">\n            <span class=\"text-muted-foreground\">acme.uipkge.app/</span>\n            <span class=\"text-foreground font-medium\">{slug}</span>\n          </p>\n        </div>\n        <div class=\"space-y-2\">\n          <Label for=\"fl-description\">Description</Label>\n          <Textarea id=\"fl-description\" bind:value={description} rows={3} placeholder=\"What is this project about?\" />\n          <p\n            class=\"text-right text-xs {description.length > DESCRIPTION_LIMIT\n              ? 'text-destructive'\n              : 'text-muted-foreground'}\"\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 class=\"grid gap-4 sm:grid-cols-3\">\n        <div class=\"space-y-2\">\n          <Label for=\"fl-visibility\">Visibility</Label>\n          <Select bind:value={visibility}>\n            <SelectTrigger id=\"fl-visibility\" class=\"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 class=\"space-y-2\">\n          <Label for=\"fl-start-date\">Start date</Label>\n          <Input id=\"fl-start-date\" bind:value={startDate} type=\"date\" />\n        </div>\n        <div class=\"space-y-2\">\n          <Label for=\"fl-budget\">Budget</Label>\n          <Input id=\"fl-budget\" bind:value={budget} type=\"number\" min={0} step={500} class=\"text-left\" />\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 class=\"space-y-5\">\n        <RadioGroup bind:value={access} class=\"gap-3\">\n          <div\n            class=\"hover:bg-accent/50 has-data-[state=checked]:border-primary flex items-start gap-3 rounded-lg border p-3 transition-colors\"\n          >\n            <RadioGroupItem id=\"fl-access-link\" value=\"link\" class=\"mt-0.5\" />\n            <label for=\"fl-access-link\" class=\"cursor-pointer select-none\">\n              <span class=\"flex items-center gap-1.5 text-sm font-medium\">\n                <Link2 class=\"size-4\" aria-hidden=\"true\" />\n                Anyone with the link\n              </span>\n              <span class=\"text-muted-foreground mt-0.5 block text-xs\"> Guests can view without signing in. </span>\n            </label>\n          </div>\n          <div\n            class=\"hover:bg-accent/50 has-data-[state=checked]:border-primary flex items-start gap-3 rounded-lg border p-3 transition-colors\"\n          >\n            <RadioGroupItem id=\"fl-access-restricted\" value=\"restricted\" class=\"mt-0.5\" />\n            <label for=\"fl-access-restricted\" class=\"cursor-pointer select-none\">\n              <span class=\"flex items-center gap-1.5 text-sm font-medium\">\n                <Lock class=\"size-4\" aria-hidden=\"true\" />\n                Restricted\n              </span>\n              <span class=\"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 class=\"divide-y rounded-lg border\">\n          <div class=\"flex items-center justify-between gap-4 p-4\">\n            <div class=\"min-w-0\">\n              <p class=\"text-sm font-medium\">Notifications</p>\n              <p class=\"text-muted-foreground mt-0.5 text-xs\">Email the team on status changes and mentions.</p>\n            </div>\n            <Switch bind:checked={notifications} aria-label=\"Toggle notifications\" />\n          </div>\n          <div class=\"flex items-center justify-between gap-4 p-4\">\n            <div class=\"min-w-0\">\n              <p class=\"text-sm font-medium\">Comments</p>\n              <p class=\"text-muted-foreground mt-0.5 text-xs\">Let viewers comment on tasks and updates.</p>\n            </div>\n            <Switch bind:checked={comments} aria-label=\"Toggle comments\" />\n          </div>\n        </div>\n      </div>\n    </SectionCard>\n\n    <div\n      class=\"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    >\n      <Button type=\"button\" variant=\"ghost\" size=\"sm\">Cancel</Button>\n      <Button type=\"submit\" size=\"sm\" disabled={name.trim() === ''}>Create project</Button>\n    </div>\n  </form>\n</div>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/form-layouts/FormLayouts.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/label.json",
    "https://uipkge.dev/r/svelte/radio-group.json",
    "https://uipkge.dev/r/svelte/section-card.json",
    "https://uipkge.dev/r/svelte/select.json",
    "https://uipkge.dev/r/svelte/switch.json",
    "https://uipkge.dev/r/svelte/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"
  ]
}