60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T2166,'use client' import * as React from 'react' import { Globe, Link2, Lock } from 'lucide-react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group' import { SectionCard } from '@/components/ui/section-card' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Switch } from '@/components/ui/switch' import { Textarea } from '@/components/ui/textarea' const DESCRIPTION_LIMIT = 280 export interface FormLayoutsProps { className?: string } export function FormLayouts({ className }: FormLayoutsProps) { const [name, setName] = React.useState('') const [description, setDescription] = React.useState('') const [visibility, setVisibility] = React.useState('internal') const [startDate, setStartDate] = React.useState('') const [budget, setBudget] = React.useState('') const [access, setAccess] = React.useState<'link' | 'restricted'>('link') const [notifications, setNotifications] = React.useState(true) const [comments, setComments] = React.useState(true) const [submitted, setSubmitted] = React.useState(false) const slug = name .trim() .toLowerCase() .replace(/[^a-z0-9]+/g, '-') .replace(/^-+|-+$/g, '') || 'your-project' const showNameError = submitted && name.trim() === '' function handleSubmit(event: React.FormEvent) { event.preventDefault() setSubmitted(true) if (name.trim() === '') return } return (

Name setName(event.target.value)} placeholder="Q3 launch site" autoComplete="off" aria-invalid={showNameError || undefined} /> {showNameError && (

Project name is required.

)}

Description

<p
                className={`text-right text-xs ${
                  description.length > DESCRIPTION_LIMIT ? 'text-destructive' : 'text-muted-foreground'
                }`}
              >
                {description.length}/{DESCRIPTION_LIMIT}
              </p>
            </div>
          </div>
        </SectionCard>

<SectionCard title="Configuration" description="Visibility, schedule and budget for the project.">
          <div className="grid gap-4 sm:grid-cols-3">
            <div className="space-y-2">
              <Label htmlFor="fl-visibility">Visibility</Label>
              <Select value={visibility} onValueChange={setVisibility}>
                <SelectTrigger id="fl-visibility" className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="public">Public</SelectItem>
                  <SelectItem value="internal">Internal</SelectItem>
                  <SelectItem value="private">Private</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="fl-start-date">Start date</Label>
              <Input
                id="fl-start-date"
                type="date"
                value={startDate}
                onChange={(event) => setStartDate(event.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="fl-budget">Budget</Label>
              <Input
                id="fl-budget"
                type="number"
                min={0}
                step={500}
                className="text-left"
                value={budget}
                onChange={(event) => setBudget(event.target.value)}
              />
            </div>
          </div>
        </SectionCard>

<SectionCard title="Access" description="Decide who can open the project and what they can do.">
          <div className="space-y-5">
            <RadioGroup
              value={access}
              onValueChange={(value) => setAccess(value as 'link' | 'restricted')}
              className="gap-3"
            >
              <div className="hover:bg-accent/50 has-data-[state=checked]:border-primary flex items-start gap-3 rounded-lg border p-3 transition-colors">
                <RadioGroupItem id="fl-access-link" value="link" className="mt-0.5" />
                <label htmlFor="fl-access-link" className="cursor-pointer select-none">
                  <span className="flex items-center gap-1.5 text-sm font-medium">
                    <Link2 className="size-4" aria-hidden="true" />
                    Anyone with the link
                  </span>
                  <span className="text-muted-foreground mt-0.5 block text-xs">
                    Guests can view without signing in.
                  </span>
                </label>
              </div>
              <div className="hover:bg-accent/50 has-data-[state=checked]:border-primary flex items-start gap-3 rounded-lg border p-3 transition-colors">
                <RadioGroupItem id="fl-access-restricted" value="restricted" className="mt-0.5" />
                <label htmlFor="fl-access-restricted" className="cursor-pointer select-none">
                  <span className="flex items-center gap-1.5 text-sm font-medium">
                    <Lock className="size-4" aria-hidden="true" />
                    Restricted
                  </span>
                  <span className="text-muted-foreground mt-0.5 block text-xs">
                    Only invited members can open the project.
                  </span>
                </label>
              </div>
            </RadioGroup>

<div className="divide-y rounded-lg border">
              <div className="flex items-center justify-between gap-4 p-4">
                <div className="min-w-0">
                  <p className="text-sm font-medium">Notifications</p>
                  <p className="text-muted-foreground mt-0.5 text-xs">Email the team on status changes and mentions.</p>
                </div>
                <Switch checked={notifications} onCheckedChange={setNotifications} aria-label="Toggle notifications" />
              </div>
              <div className="flex items-center justify-between gap-4 p-4">
                <div className="min-w-0">
                  <p className="text-sm font-medium">Comments</p>
                  <p className="text-muted-foreground mt-0.5 text-xs">Let viewers comment on tasks and updates.</p>
                </div>
                <Switch checked={comments} onCheckedChange={setComments} aria-label="Toggle comments" />
              </div>
            </div>
          </div>
        </SectionCard>

<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">
          <Button type="button" variant="ghost" size="sm">
            Cancel
          </Button>
          <Button type="submit" size="sm" disabled={name.trim() === ''}>
            Create project
          </Button>
        </div>
      </form>
    </div>
  )
}
5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","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"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"packages/registry-react/blocks/form-layouts/FormLayouts.tsx","content":"$62","type":"registry:block","target":"~/components/blocks/FormLayouts.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>