\r\n \r\n {@render children?.()}\r\n \r\n

","table/table.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","table/table-row.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","table/table-header.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","table/table-head.svelte","\r\n\r\ntr]:last:border-b-0\", className)}\r\n {...props}\r\n>\r\n {@render children?.()}\r\n","table/table-footer.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","table/table-cell.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","table/table-caption.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","table/table-body.svelte","export { default as Table } from \"./table.svelte\";\nexport { default as TableHeader } from \"./table-header.svelte\";\nexport { default as TableBody } from \"./table-body.svelte\";\nexport { default as TableFooter } from \"./table-footer.svelte\";\nexport { default as TableRow } from \"./table-row.svelte\";\nexport { default as TableHead } from \"./table-head.svelte\";\nexport { default as TableCell } from \"./table-cell.svelte\";\nexport { default as TableCaption } from \"./table-caption.svelte\";\n","table/index.ts","switch",[93,94,18],[157,158,159,160,161],{"_68":170,"_62":75,"_70":171},{"_68":168,"_62":75,"_70":169},{"_68":166,"_62":75,"_70":167},{"_68":164,"_62":75,"_70":165},{"_68":162,"_62":75,"_70":163},"\r\n\r\n\r\n {@render children?.()}\r\n","switch/switch.svelte","\r\n\r\n","switch/switch-thumb.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","switch/switch-label.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","switch/switch-control.svelte","import { Switch as SwitchPrimitive } from \"@sprawlify/svelte/switch\";\n\nexport { default as Switch } from \"./switch.svelte\";\nexport { default as SwitchControl } from \"./switch-control.svelte\";\nexport { default as SwitchThumb } from \"./switch-thumb.svelte\";\nexport { default as SwitchLabel } from \"./switch-label.svelte\";\n\nexport const SwitchHiddenInput = SwitchPrimitive.HiddenInput;\nexport const SwitchContext = SwitchPrimitive.Context;\nexport const SwitchRootProvider = SwitchPrimitive.RootProvider;\n","switch/index.ts","separator",[93,94,18],[175,176],{"_68":179,"_62":75,"_70":180},{"_68":177,"_62":75,"_70":178},"\r\n\r\n","separator/separator.svelte","export { default as Separator } from \"./separator.svelte\";\n","separator/index.ts","select",[93,94,18,104,229],[184,185,186,187,188,189,190,191,192,193,194,195,196,197,198],{"_68":227,"_62":75,"_70":228},{"_68":225,"_62":75,"_70":226},{"_68":223,"_62":75,"_70":224},{"_68":221,"_62":75,"_70":222},{"_68":219,"_62":75,"_70":220},{"_68":217,"_62":75,"_70":218},{"_68":215,"_62":75,"_70":216},{"_68":213,"_62":75,"_70":214},{"_68":211,"_62":75,"_70":212},{"_68":209,"_62":75,"_70":210},{"_68":207,"_62":75,"_70":208},{"_68":205,"_62":75,"_70":206},{"_68":203,"_62":75,"_70":204},{"_68":201,"_62":75,"_70":202},{"_68":199,"_62":75,"_70":200},"\r\n\r\n\r\n {@render children?.()}\r\n\r\n","select/select.svelte","\r\n\r\n\r\n","select/select-value.svelte","\r\n\r\n\r\n

\r\n {@render children?.()}\r\n

\r\n\r\n","select/select-trigger.svelte","\r\n\r\n\r\n","select/select-separator.svelte","\r\n\r\n\r\n","select/select-label.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","select/select-item.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","select/select-item-text.svelte","\r\n\r\n\r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n \r\n {/if}\r\n\r\n","select/select-item-indicator.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","select/select-item-group.svelte","\r\n\r\n\r\n","select/select-item-group-label.svelte","\r\n\r\n\r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n \r\n {/if}\r\n\r\n","select/select-indicator.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","select/select-indicator-group.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","select/select-control.svelte","\r\n\r\n\r\n \r\n \r\n {@render children?.()}\r\n \r\n \r\n\r\n","select/select-content.svelte","export { SelectRoot as Select } from \"@sprawlify/svelte/select\";\nexport { default as SelectControl } from \"./select-control.svelte\";\nexport { default as SelectTrigger } from \"./select-trigger.svelte\";\nexport { default as SelectIndicatorGroup } from \"./select-indicator-group.svelte\";\nexport { default as SelectIndicator } from \"./select-indicator.svelte\";\nexport { default as SelectValue } from \"./select-value.svelte\";\nexport { default as SelectContent } from \"./select-content.svelte\";\nexport { default as SelectItem } from \"./select-item.svelte\";\nexport { default as SelectItemText } from \"./select-item-text.svelte\";\nexport { default as SelectItemIndicator } from \"./select-item-indicator.svelte\";\nexport { default as SelectItemGroup } from \"./select-item-group.svelte\";\nexport { default as SelectItemGroupLabel } from \"./select-item-group-label.svelte\";\nexport { default as SelectLabel } from \"./select-label.svelte\";\nexport { default as SelectSeparator } from \"./select-separator.svelte\";\nexport { SelectHiddenSelect, SelectContext, SelectRootProvider } from \"@sprawlify/svelte/select\";\n","select/index.ts","lucide-svelte","scroll-area",[93,94,18],[233,234,235],{"_68":240,"_62":75,"_70":241},{"_68":238,"_62":75,"_70":239},{"_68":236,"_62":75,"_70":237},"\r\n\r\n\r\n \r\n","scroll-area/scroll-bar.svelte","\r\n\r\n\r\n \r\n {@render children?.()}\r\n \r\n \r\n \r\n","scroll-area/scroll-area.svelte","export { default as ScrollArea } from \"./scroll-area.svelte\";\nexport { default as ScrollBar } from \"./scroll-bar.svelte\";\n","scroll-area/index.ts","native-select",[94,104,229],[245,246,247,248],{"_68":255,"_62":75,"_70":256},{"_68":253,"_62":75,"_70":254},{"_68":251,"_62":75,"_70":252},{"_68":249,"_62":75,"_70":250},"\r\n\r\n\r\n \r\n {@render children?.()}\r\n \r\n \r\n","native-select/native-select.svelte","\r\n\r\n","native-select/native-select-option.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","native-select/native-select-opt-group.svelte","export { default as NativeSelect } from \"./native-select.svelte\";\nexport { default as NativeSelectOption } from \"./native-select-option.svelte\";\nexport { default as NativeSelectOptGroup } from \"./native-select-opt-group.svelte\";\n","native-select/index.ts","label",[94,104,93],[260,261],{"_68":264,"_62":75,"_70":265},{"_68":262,"_62":75,"_70":263},"\r\n\r\n\r\n {@render children?.()}\r\n","label/label.svelte","export { default as Label } from \"./label.svelte\";\n","label/index.ts","kbd",[94,93,104],[269,270,271],{"_68":276,"_62":75,"_70":277},{"_68":274,"_62":75,"_70":275},{"_68":272,"_62":75,"_70":273},"\r\n\r\n\r\n {@render children?.()}\r\n","kbd/kbd.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","kbd/kbd-group.svelte","export { default as Kbd } from \"./kbd.svelte\";\nexport { default as KbdGroup } from \"./kbd-group.svelte\";\n","kbd/index.ts","item",[94,93,104,123,18],[281,282,283,284,285,286,287,288,289,290,291],{"_68":312,"_62":75,"_70":313},{"_68":310,"_62":75,"_70":311},{"_68":308,"_62":75,"_70":309},{"_68":306,"_62":75,"_70":307},{"_68":304,"_62":75,"_70":305},{"_68":302,"_62":75,"_70":303},{"_68":300,"_62":75,"_70":301},{"_68":298,"_62":75,"_70":299},{"_68":296,"_62":75,"_70":297},{"_68":294,"_62":75,"_70":295},{"_68":292,"_62":75,"_70":293},"\r\n\r\n\r\n {@render children?.()}\r\n","item/item.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","item/item-title.svelte","\r\n\r\n","item/item-separator.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","item/item-media.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","item/item-header.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","item/item-group.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","item/item-footer.svelte","\r\n\r\na:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n","item/item-description.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","item/item-content.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","item/item-actions.svelte","export { default as Item } from \"./item.svelte\";\nexport { default as ItemMedia } from \"./item-media.svelte\";\nexport { default as ItemContent } from \"./item-content.svelte\";\nexport { default as ItemActions } from \"./item-actions.svelte\";\nexport { default as ItemGroup } from \"./item-group.svelte\";\nexport { default as ItemSeparator } from \"./item-separator.svelte\";\nexport { default as ItemTitle } from \"./item-title.svelte\";\nexport { default as ItemDescription } from \"./item-description.svelte\";\nexport { default as ItemHeader } from \"./item-header.svelte\";\nexport { default as ItemFooter } from \"./item-footer.svelte\";\n","item/index.ts","input-group",[123,94,93,104,338,18,339,340],[317,318,319,320,321,322,323],{"_68":336,"_62":75,"_70":337},{"_68":334,"_62":75,"_70":335},{"_68":332,"_62":75,"_70":333},{"_68":330,"_62":75,"_70":331},{"_68":328,"_62":75,"_70":329},{"_68":326,"_62":75,"_70":327},{"_68":324,"_62":75,"_70":325},"\r\n\r\n[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n","input-group/input-group.svelte","\r\n\r\n","input-group/input-group-textarea.svelte","\r\n\r\n\r\n\r\n\r\n {@render children?.()}\r\n","input-group/input-group-text.svelte","\r\n\r\n","input-group/input-group-input.svelte","\r\n\r\n\r\n\r\n","input-group/input-group-button.svelte","\r\n\r\n\r\n\r\n {\r\n if ((e.target as HTMLElement).closest(\"button\")) {\r\n return\r\n }\r\n e.currentTarget?.parentElement?.querySelector(\"input\")?.focus()\r\n }}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n","input-group/input-group-addon.svelte","export { default as InputGroup } from \"./input-group.svelte\";\nexport { default as InputGroupAddon } from \"./input-group-addon.svelte\";\nexport { default as InputGroupButton } from \"./input-group-button.svelte\";\nexport { default as InputGroupText } from \"./input-group-text.svelte\";\nexport { default as InputGroupInput } from \"./input-group-input.svelte\";\nexport { default as InputGroupTextarea } from \"./input-group-textarea.svelte\";\n","input-group/index.ts","@/components/ui/button","@/components/ui/input","@/components/ui/textarea","input",[94,93,104],[344,345],{"_68":348,"_62":75,"_70":349},{"_68":346,"_62":75,"_70":347},"\r\n\r\n","input/input.svelte","export { default as Input } from \"./input.svelte\";\n","input/index.ts","field",[94,93,104,18,389],[353,354,355,356,357,358,359,360,361,362,363,364],{"_68":387,"_62":75,"_70":388},{"_68":385,"_62":75,"_70":386},{"_68":383,"_62":75,"_70":384},{"_68":381,"_62":75,"_70":382},{"_68":379,"_62":75,"_70":380},{"_68":377,"_62":75,"_70":378},{"_68":375,"_62":75,"_70":376},{"_68":373,"_62":75,"_70":374},{"_68":371,"_62":75,"_70":372},{"_68":369,"_62":75,"_70":370},{"_68":367,"_62":75,"_70":368},{"_68":365,"_62":75,"_70":366},"export { default as Field } from \"./field.svelte\";\nexport { default as FieldLabel } from \"./field-label.svelte\";\nexport { default as FieldDescription } from \"./field-description.svelte\";\nexport { default as FieldError } from \"./field-error.svelte\";\nexport { default as FieldGroup } from \"./field-group.svelte\";\nexport { default as FieldLegend } from \"./field-legend.svelte\";\nexport { default as FieldSeparator } from \"./field-separator.svelte\";\nexport { default as FieldSet } from \"./field-set.svelte\";\nexport { default as FieldContent } from \"./field-content.svelte\";\nexport { default as FieldTitle } from \"./field-title.svelte\";\nexport { default as FieldRequiredIndicator } from \"./field-required-indicator.svelte\";\n","field/index.ts","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","field/field.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","field/field-title.svelte","\r\n\r\n[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n\r\n","field/field-set.svelte","\r\n\r\n\r\n \r\n {#if children}\r\n \r\n {@render children()}\r\n \r\n {/if}\r\n\r\n","field/field-separator.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","field/field-required-indicator.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","field/field-legend.svelte","\r\n\r\n[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-[state=checked]:border-primary/20 dark:has-data-[state=checked]:bg-primary/10\",\r\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n\r\n","field/field-label.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","field/field-group.svelte","\r\n\r\n{#if content}\r\n \r\n {#if children}\r\n {@render children()}\r\n {:else if Array.isArray(content)}\r\n {#if content.length === 1}\r\n {content[0]?.message}\r\n {:else}\r\n \r\n {#each content as error, i (i)}\r\n {#if error?.message}\r\n {error.message}\r\n {/if}\r\n {/each}\r\n \r\n {/if}\r\n {/if}\r\n \r\n{/if}\r\n","field/field-error.svelte","\r\n\r\na]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n\r\n","field/field-description.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","field/field-content.svelte","@/components/ui/separator","empty",[94,93,104,123],[393,394,395,396,397,398,399],{"_68":412,"_62":75,"_70":413},{"_68":410,"_62":75,"_70":411},{"_68":408,"_62":75,"_70":409},{"_68":406,"_62":75,"_70":407},{"_68":404,"_62":75,"_70":405},{"_68":402,"_62":75,"_70":403},{"_68":400,"_62":75,"_70":401},"export { default as Empty } from \"./empty.svelte\";\nexport { default as EmptyHeader } from \"./empty-header.svelte\";\nexport { default as EmptyMedia } from \"./empty-media.svelte\";\nexport { default as EmptyTitle } from \"./empty-title.svelte\";\nexport { default as EmptyDescription } from \"./empty-description.svelte\";\nexport { default as EmptyContent } from \"./empty-content.svelte\";\n","empty/index.ts","\r\n\r\n\r\n {@render children?.()}\r\n","empty/empty.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","empty/empty-title.svelte","\r\n\r\n\r\n\r\n\r\n {@render children?.()}\r\n","empty/empty-media.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","empty/empty-header.svelte","\r\n\r\na:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n","empty/empty-description.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","empty/empty-content.svelte","dropdown-menu",[93,229,94,18,104],[417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432],{"_68":463,"_62":75,"_70":464},{"_68":461,"_62":75,"_70":462},{"_68":459,"_62":75,"_70":460},{"_68":457,"_62":75,"_70":458},{"_68":455,"_62":75,"_70":456},{"_68":453,"_62":75,"_70":454},{"_68":451,"_62":75,"_70":452},{"_68":449,"_62":75,"_70":450},{"_68":447,"_62":75,"_70":448},{"_68":445,"_62":75,"_70":446},{"_68":443,"_62":75,"_70":444},{"_68":441,"_62":75,"_70":442},{"_68":439,"_62":75,"_70":440},{"_68":437,"_62":75,"_70":438},{"_68":435,"_62":75,"_70":436},{"_68":433,"_62":75,"_70":434},"export { default as DropdownMenu } from \"./dropdown-menu.svelte\";\nexport { default as DropdownMenuPortal } from \"./dropdown-menu-portal.svelte\";\nexport { default as DropdownMenuTrigger } from \"./dropdown-menu-trigger.svelte\";\nexport { default as DropdownMenuContent } from \"./dropdown-menu-content.svelte\";\nexport { default as DropdownMenuGroup } from \"./dropdown-menu-group.svelte\";\nexport { default as DropdownMenuItem } from \"./dropdown-menu-item.svelte\";\nexport { default as DropdownMenuCheckboxItem } from \"./dropdown-menu-checkbox-item.svelte\";\nexport { default as DropdownMenuRadioGroup } from \"./dropdown-menu-radio-group.svelte\";\nexport { default as DropdownMenuRadioItem } from \"./dropdown-menu-radio-item.svelte\";\nexport { default as DropdownMenuLabel } from \"./dropdown-menu-label.svelte\";\nexport { default as DropdownMenuSeparator } from \"./dropdown-menu-separator.svelte\";\nexport { default as DropdownMenuShortcut } from \"./dropdown-menu-shortcut.svelte\";\nexport { default as DropdownMenuSub } from \"./dropdown-menu-sub.svelte\";\nexport { default as DropdownMenuSubTrigger } from \"./dropdown-menu-sub-trigger.svelte\";\nexport { default as DropdownMenuSubContent } from \"./dropdown-menu-sub-content.svelte\";\n","dropdown-menu/index.ts","\r\n\r\n\r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu-trigger.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu-sub.svelte","\r\n\r\n\r\n {@render children?.()}\r\n \r\n","dropdown-menu/dropdown-menu-sub-trigger.svelte","\r\n\r\n\r\n \r\n \r\n {@render children?.()}\r\n \r\n \r\n","dropdown-menu/dropdown-menu-sub-content.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu-shortcut.svelte","\r\n\r\n","dropdown-menu/dropdown-menu-separator.svelte","\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu-radio-item.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu-radio-group.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu-portal.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu-label.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu-item.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu-group.svelte","\r\n\r\n\r\n \r\n \r\n {@render children?.()}\r\n \r\n \r\n","dropdown-menu/dropdown-menu-content.svelte","\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n {@render children?.()}\r\n","dropdown-menu/dropdown-menu-checkbox-item.svelte","dialog",[93,18,94,229,104],[468,469,470,471,472,473,474,475,476,477,478],{"_68":499,"_62":75,"_70":500},{"_68":497,"_62":75,"_70":498},{"_68":495,"_62":75,"_70":496},{"_68":493,"_62":75,"_70":494},{"_68":491,"_62":75,"_70":492},{"_68":489,"_62":75,"_70":490},{"_68":487,"_62":75,"_70":488},{"_68":485,"_62":75,"_70":486},{"_68":483,"_62":75,"_70":484},{"_68":481,"_62":75,"_70":482},{"_68":479,"_62":75,"_70":480},"export { default as Dialog } from \"./dialog.svelte\";\nexport { default as DialogTrigger } from \"./dialog-trigger.svelte\";\nexport { default as DialogPortal } from \"./dialog-portal.svelte\";\nexport { default as DialogOverlay } from \"./dialog-overlay.svelte\";\nexport { default as DialogContent } from \"./dialog-content.svelte\";\nexport { default as DialogHeader } from \"./dialog-header.svelte\";\nexport { default as DialogFooter } from \"./dialog-footer.svelte\";\nexport { default as DialogTitle } from \"./dialog-title.svelte\";\nexport { default as DialogDescription } from \"./dialog-description.svelte\";\nexport { default as DialogClose } from \"./dialog-close.svelte\";\n","dialog/index.ts","\r\n\r\n\r\n {@render children?.()}\r\n","dialog/dialog.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dialog/dialog-trigger.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dialog/dialog-title.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dialog/dialog-portal.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dialog/dialog-overlay.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dialog/dialog-header.svelte","\r\n\r\n\r\n {@render children?.()}\r\n {#if showCloseButton}\r\n \r\n {#snippet asChild(props)}\r\n \r\n {/snippet}\r\n \r\n {/if}\r\n","dialog/dialog-footer.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dialog/dialog-description.svelte","\r\n\r\n\r\n \r\n \r\n {@render children?.()}\r\n {#if showCloseButton}\r\n \r\n {#snippet asChild(props)}\r\n \r\n {/snippet}\r\n \r\n {/if}\r\n \r\n","dialog/dialog-content.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","dialog/dialog-close.svelte","collapsible",[93,18],[504,505,506,507],{"_68":514,"_62":75,"_70":515},{"_68":512,"_62":75,"_70":513},{"_68":510,"_62":75,"_70":511},{"_68":508,"_62":75,"_70":509},"export { default as Collapsible } from \"./collapsible.svelte\";\nexport { default as CollapsibleTrigger } from \"./collapsible-trigger.svelte\";\nexport { default as CollapsibleContent } from \"./collapsible-content.svelte\";\n","collapsible/index.ts","\r\n\r\n\r\n {@render children?.()}\r\n","collapsible/collapsible.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","collapsible/collapsible-trigger.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","collapsible/collapsible-content.svelte","checkbox",[94,93,18,229],[519,520,521,522,523,524],{"_68":535,"_62":75,"_70":536},{"_68":533,"_62":75,"_70":534},{"_68":531,"_62":75,"_70":532},{"_68":529,"_62":75,"_70":530},{"_68":527,"_62":75,"_70":528},{"_68":525,"_62":75,"_70":526},"import { Checkbox as CheckboxPrimitive } from \"@sprawlify/svelte/checkbox\";\n\nexport { default as Checkbox } from \"./checkbox.svelte\";\nexport { default as CheckboxRoot } from \"./checkbox-root.svelte\";\nexport { default as CheckboxControl } from \"./checkbox-control.svelte\";\nexport { default as CheckboxIndicator } from \"./checkbox-indicator.svelte\";\nexport { default as CheckboxLabel } from \"./checkbox-label.svelte\";\n\nexport const CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;\nexport const CheckboxGroup = CheckboxPrimitive.Group;\nexport const CheckboxContext = CheckboxPrimitive.Context;\nexport const CheckboxRootProvider = CheckboxPrimitive.RootProvider;\n","checkbox/index.ts","\r\n\r\n\r\n \r\n svg]:size-3.5\"\r\n >\r\n \r\n \r\n svg]:size-3.5\"\r\n indeterminate\r\n >\r\n \r\n \r\n \r\n {#if children}\r\n \r\n {@render children()}\r\n \r\n {/if}\r\n \r\n","checkbox/checkbox.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","checkbox/checkbox-root.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","checkbox/checkbox-label.svelte","\r\n\r\nsvg]:size-3.5\", className)}\r\n {...rest}\r\n>\r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n \r\n {/if}\r\n","checkbox/checkbox-indicator.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","checkbox/checkbox-control.svelte","carousel",[93,94,18,338,229],[540,541,542,543,544,545,546,547,548,549],{"_68":568,"_62":75,"_70":569},{"_68":566,"_62":75,"_70":567},{"_68":564,"_62":75,"_70":565},{"_68":562,"_62":75,"_70":563},{"_68":560,"_62":75,"_70":561},{"_68":558,"_62":75,"_70":559},{"_68":556,"_62":75,"_70":557},{"_68":554,"_62":75,"_70":555},{"_68":552,"_62":75,"_70":553},{"_68":550,"_62":75,"_70":551},"import { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\";\n\nexport { default as Carousel } from \"./carousel.svelte\";\nexport { default as CarouselContent } from \"./carousel-content.svelte\";\nexport { default as CarouselItem } from \"./carousel-item.svelte\";\nexport { default as CarouselControl } from \"./carousel-control.svelte\";\nexport { default as CarouselPrevious } from \"./carousel-previous.svelte\";\nexport { default as CarouselNext } from \"./carousel-next.svelte\";\nexport { default as CarouselIndicatorGroup } from \"./carousel-indicator-group.svelte\";\nexport { default as CarouselIndicator } from \"./carousel-indicator.svelte\";\nexport { default as CarouselIndicators } from \"./carousel-indicators.svelte\";\n\nexport const CarouselAutoplayTrigger = CarouselPrimitive.AutoplayTrigger;\nexport const CarouselContext = CarouselPrimitive.Context;\nexport const CarouselRootProvider = CarouselPrimitive.RootProvider;\n","carousel/index.ts","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","carousel/carousel.svelte","\r\n\r\n\r\n {#snippet asChild(props)}\r\n \r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n \r\n {/if}\r\n \r\n \r\n {/snippet}\r\n\r\n","carousel/carousel-previous.svelte","\r\n\r\n\r\n {#snippet asChild(props)}\r\n \r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n \r\n {/if}\r\n \r\n \r\n {/snippet}\r\n\r\n","carousel/carousel-next.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","carousel/carousel-item.svelte","\r\n\r\n\r\n {#snippet render(api)}\r\n \r\n {#each api().pageSnapPoints as _, index (index)}\r\n \r\n {/each}\r\n \r\n {/snippet}\r\n\r\n","carousel/carousel-indicators.svelte","\r\n\r\n\r\n","carousel/carousel-indicator.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","carousel/carousel-indicator-group.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","carousel/carousel-control.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","carousel/carousel-content.svelte","card",[94,93,104],[573,574,575,576,577,578,579,580],{"_68":595,"_62":75,"_70":596},{"_68":593,"_62":75,"_70":594},{"_68":591,"_62":75,"_70":592},{"_68":589,"_62":75,"_70":590},{"_68":587,"_62":75,"_70":588},{"_68":585,"_62":75,"_70":586},{"_68":583,"_62":75,"_70":584},{"_68":581,"_62":75,"_70":582},"export { default as Card } from \"./card.svelte\";\nexport { default as CardHeader } from \"./card-header.svelte\";\nexport { default as CardTitle } from \"./card-title.svelte\";\nexport { default as CardDescription } from \"./card-description.svelte\";\nexport { default as CardAction } from \"./card-action.svelte\";\nexport { default as CardContent } from \"./card-content.svelte\";\nexport { default as CardFooter } from \"./card-footer.svelte\";\n","card/index.ts","\r\n\r\nimg:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n","card/card.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","card/card-title.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","card/card-header.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","card/card-footer.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","card/card-description.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","card/card-content.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","card/card-action.svelte","calendar",[93,94,18,633,229,338],[600,601,602,603,604,605,606,607,608,609,610],{"_68":631,"_62":75,"_70":632},{"_68":629,"_62":75,"_70":630},{"_68":627,"_62":75,"_70":628},{"_68":625,"_62":75,"_70":626},{"_68":623,"_62":75,"_70":624},{"_68":621,"_62":75,"_70":622},{"_68":619,"_62":75,"_70":620},{"_68":617,"_62":75,"_70":618},{"_68":615,"_62":75,"_70":616},{"_68":613,"_62":75,"_70":614},{"_68":611,"_62":75,"_70":612},"export { default as Calendar } from \"./calendar.svelte\";\nexport { default as CalendarDayView } from \"./calendar-day-view.svelte\";\nexport { default as CalendarDualMonthDayView } from \"./calendar-dual-month-day-view.svelte\";\nexport { default as CalendarDayTable } from \"./calendar-day-table.svelte\";\nexport { default as CalendarMonthView } from \"./calendar-month-view.svelte\";\nexport { default as CalendarYearView } from \"./calendar-year-view.svelte\";\nexport { default as CalendarViewHeader } from \"./calendar-view-header.svelte\";\nexport { default as CalendarSelectHeader } from \"./calendar-select-header.svelte\";\nexport { default as CalendarDayButton } from \"./calendar-day-button.svelte\";\nexport { default as CalendarPresetTrigger } from \"./calendar-preset-trigger.svelte\";\n","calendar/index.ts","\r\n\r\n\r\n \r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n {#if isDualMonth()}\r\n \r\n {:else}\r\n \r\n {/if}\r\n \r\n \r\n {/if}\r\n \r\n","calendar/calendar.svelte","\r\n\r\n\r\n \r\n {#snippet render(api)}\r\n {#if header}\r\n {@render header()}\r\n {:else}\r\n \r\n {/if}\r\n \r\n \r\n {#each api().getYearsGrid({ columns: 4 }) as years}\r\n \r\n {#each years as year}\r\n \r\n \r\n {#snippet asChild(props)}\r\n \r\n {#if cell}\r\n {@render cell(year)}\r\n {:else}\r\n {year.label}\r\n {/if}\r\n \r\n {/snippet}\r\n \r\n \r\n {/each}\r\n \r\n {/each}\r\n \r\n \r\n {/snippet}\r\n \r\n","calendar/calendar-year-view.svelte","\r\n\r\n\r\n \r\n {#snippet asChild(props)}\r\n \r\n \r\n \r\n {/snippet}\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n {#snippet asChild(props)}\r\n \r\n \r\n \r\n {/snippet}\r\n \r\n","calendar/calendar-view-header.svelte","\r\n\r\n\r\n \r\n {#snippet asChild(props)}\r\n \r\n \r\n \r\n {/snippet}\r\n \r\n\r\n

\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

\r\n \r\n \r\n {#snippet asChild(props)}\r\n \r\n \r\n \r\n {/snippet}\r\n \r\n\r\n","calendar/calendar-select-header.svelte","\r\n\r\n\r\n {@render children?.()}\r\n\r\n","calendar/calendar-preset-trigger.svelte","\r\n\r\n\r\n \r\n {#snippet render(api)}\r\n {#if header}\r\n {@render header()}\r\n {:else}\r\n \r\n {/if}\r\n \r\n \r\n {#each api().getMonthsGrid({ columns: 4, format: \"short\" }) as months}\r\n \r\n {#each months as month}\r\n \r\n \r\n {#snippet asChild(props)}\r\n \r\n {#if cell}\r\n {@render cell(month)}\r\n {:else}\r\n {month.label}\r\n {/if}\r\n \r\n {/snippet}\r\n \r\n \r\n {/each}\r\n \r\n {/each}\r\n \r\n \r\n {/snippet}\r\n \r\n","calendar/calendar-month-view.svelte","\r\n\r\n\r\n \r\n {#snippet render(api)}\r\n {@const offset = api().getOffset({ months: 1 })}\r\n

\r\n \r\n

\r\n

\r\n \r\n {#snippet asChild(props)}\r\n \r\n \r\n \r\n {/snippet}\r\n \r\n \r\n {api().visibleRangeText.start}\r\n \r\n

\r\n

\r\n \r\n

\r\n

\r\n \r\n {api().visibleRangeText.end}\r\n \r\n \r\n {#snippet asChild(props)}\r\n \r\n \r\n \r\n {/snippet}\r\n \r\n

\r\n \r\n

\r\n

\r\n {/snippet}\r\n \r\n","calendar/calendar-dual-month-day-view.svelte","\r\n\r\n\r\n \r\n {#snippet render(api)}\r\n {#if header}\r\n {@render header()}\r\n {:else}\r\n \r\n {/if}\r\n \r\n {/snippet}\r\n \r\n","calendar/calendar-day-view.svelte","\r\n\r\n\r\n \r\n \r\n {#each weekDays as weekDay}\r\n \r\n {weekDay.short}\r\n \r\n {/each}\r\n \r\n \r\n \r\n {#each weeks as week}\r\n \r\n {#each week as day, dayIndex (dayIndex)}\r\n {@const isOutside = day.month !== focusedMonth}\r\n {#if !showOutsideDays && isOutside}\r\n \r\n {:else}\r\n \r\n \r\n {#if cell}\r\n {@render cell(day)}\r\n {:else}\r\n {day.day}\r\n {/if}\r\n \r\n \r\n {/if}\r\n {/each}\r\n \r\n {/each}\r\n \r\n","calendar/calendar-day-table.svelte","\r\n\r\n\r\n {#if children}\r\n {@render children()}\r\n {/if}\r\n","calendar/calendar-day-button.svelte","@internationalized/date","button-group",[94,18,93,104,123],[637,638,639,640],{"_68":647,"_62":75,"_70":648},{"_68":645,"_62":75,"_70":646},{"_68":643,"_62":75,"_70":644},{"_68":641,"_62":75,"_70":642},"export { default as ButtonGroup, buttonGroupVariants } from \"./button-group.svelte\";\nexport { default as ButtonGroupSeparator } from \"./button-group-separator.svelte\";\nexport { default as ButtonGroupText } from \"./button-group-text.svelte\";\n","button-group/index.ts","\r\n\r\n\r\n\r\n\r\n {@render children?.()}\r\n","button-group/button-group.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","button-group/button-group-text.svelte","\r\n\r\n","button-group/button-group-separator.svelte","button",[123,94,93,104],[652,653],{"_68":656,"_62":75,"_70":657},{"_68":654,"_62":75,"_70":655},"export { default as Button, buttonVariants } from \"./button.svelte\";\n","button/index.ts","\r\n\r\n\r\n\r\n\r\n {@render children?.()}\r\n","button/button.svelte","breadcrumb",[94,93,229,104],[661,662,663,664,665,666,667,668],{"_68":683,"_62":75,"_70":684},{"_68":681,"_62":75,"_70":682},{"_68":679,"_62":75,"_70":680},{"_68":677,"_62":75,"_70":678},{"_68":675,"_62":75,"_70":676},{"_68":673,"_62":75,"_70":674},{"_68":671,"_62":75,"_70":672},{"_68":669,"_62":75,"_70":670},"export { default as Breadcrumb } from \"./breadcrumb.svelte\";\nexport { default as BreadcrumbList } from \"./breadcrumb-list.svelte\";\nexport { default as BreadcrumbItem } from \"./breadcrumb-item.svelte\";\nexport { default as BreadcrumbLink } from \"./breadcrumb-link.svelte\";\nexport { default as BreadcrumbPage } from \"./breadcrumb-page.svelte\";\nexport { default as BreadcrumbSeparator } from \"./breadcrumb-separator.svelte\";\nexport { default as BreadcrumbEllipsis } from \"./breadcrumb-ellipsis.svelte\";\n","breadcrumb/index.ts","\r\n\r\n\r\n {@render children?.()}\r\n","breadcrumb/breadcrumb.svelte","\r\n\r\n\r\n {#if children}\r\n {@render children?.()}\r\n {:else}\r\n \r\n {/if}\r\n","breadcrumb/breadcrumb-separator.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","breadcrumb/breadcrumb-page.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","breadcrumb/breadcrumb-list.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","breadcrumb/breadcrumb-link.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","breadcrumb/breadcrumb-item.svelte","\r\n\r\n\r\n {#if children}\r\n {@render children?.()}\r\n {:else}\r\n \r\n {/if}\r\n","breadcrumb/breadcrumb-ellipsis.svelte","badge",[123,94,93,104],[688,689],{"_68":692,"_62":75,"_70":693},{"_68":690,"_62":75,"_70":691},"export { default as Badge, badgeVariants } from \"./badge.svelte\";\n","badge/index.ts","\r\n\r\n\r\n\r\n\r\n {@render children?.()}\r\n","badge/badge.svelte","avatar",[94,93,104,18],[697,698,699,700,701,702,703],{"_68":716,"_62":75,"_70":717},{"_68":714,"_62":75,"_70":715},{"_68":712,"_62":75,"_70":713},{"_68":710,"_62":75,"_70":711},{"_68":708,"_62":75,"_70":709},{"_68":706,"_62":75,"_70":707},{"_68":704,"_62":75,"_70":705},"export { default as Avatar } from \"./avatar.svelte\";\nexport { default as AvatarImage } from \"./avatar-image.svelte\";\nexport { default as AvatarFallback } from \"./avatar-fallback.svelte\";\nexport { default as AvatarBadge } from \"./avatar-badge.svelte\";\nexport { default as AvatarGroup } from \"./avatar-group.svelte\";\nexport { default as AvatarGroupCount } from \"./avatar-group-count.svelte\";\n","avatar/index.ts","\r\n\r\n\r\n {@render children?.()}\r\n","avatar/avatar.svelte","\r\n\r\n","avatar/avatar-image.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","avatar/avatar-group.svelte","\r\n\r\nsvg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n","avatar/avatar-group-count.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","avatar/avatar-fallback.svelte","\r\n\r\nsvg]:hidden\",\r\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\r\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n","avatar/avatar-badge.svelte","aspect-ratio",[93,18],[721,722],{"_68":725,"_62":75,"_70":726},{"_68":723,"_62":75,"_70":724},"export { default as AspectRatio } from \"./aspect-ratio.svelte\";\n","aspect-ratio/index.ts","\r\n\r\n\r\n \r\n {@render children?.()}\r\n \r\n","aspect-ratio/aspect-ratio.svelte","alert-dialog",[93,338,94,18,104],[730,731,732,733,734,735,736,737,738,739,740,741,742],{"_68":767,"_62":75,"_70":768},{"_68":765,"_62":75,"_70":766},{"_68":763,"_62":75,"_70":764},{"_68":761,"_62":75,"_70":762},{"_68":759,"_62":75,"_70":760},{"_68":757,"_62":75,"_70":758},{"_68":755,"_62":75,"_70":756},{"_68":753,"_62":75,"_70":754},{"_68":751,"_62":75,"_70":752},{"_68":749,"_62":75,"_70":750},{"_68":747,"_62":75,"_70":748},{"_68":745,"_62":75,"_70":746},{"_68":743,"_62":75,"_70":744},"export { default as AlertDialog } from \"./alert-dialog.svelte\";\nexport { default as AlertDialogTrigger } from \"./alert-dialog-trigger.svelte\";\nexport { default as AlertDialogPortal } from \"./alert-dialog-portal.svelte\";\nexport { default as AlertDialogBackdrop } from \"./alert-dialog-backdrop.svelte\";\nexport { default as AlertDialogContent } from \"./alert-dialog-content.svelte\";\nexport { default as AlertDialogHeader } from \"./alert-dialog-header.svelte\";\nexport { default as AlertDialogFooter } from \"./alert-dialog-footer.svelte\";\nexport { default as AlertDialogMedia } from \"./alert-dialog-media.svelte\";\nexport { default as AlertDialogTitle } from \"./alert-dialog-title.svelte\";\nexport { default as AlertDialogDescription } from \"./alert-dialog-description.svelte\";\nexport { default as AlertDialogCancel } from \"./alert-dialog-cancel.svelte\";\nexport { default as AlertDialogAction } from \"./alert-dialog-action.svelte\";\n","alert-dialog/index.ts","\r\n\r\n\r\n {@render children?.()}\r\n","alert-dialog/alert-dialog.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","alert-dialog/alert-dialog-trigger.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","alert-dialog/alert-dialog-title.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","alert-dialog/alert-dialog-portal.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","alert-dialog/alert-dialog-media.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","alert-dialog/alert-dialog-header.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","alert-dialog/alert-dialog-footer.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","alert-dialog/alert-dialog-description.svelte","\r\n\r\n\r\n \r\n \r\n \r\n {@render children?.()}\r\n \r\n \r\n","alert-dialog/alert-dialog-content.svelte","\r\n\r\n","alert-dialog/alert-dialog-cancel.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","alert-dialog/alert-dialog-backdrop.svelte","\r\n\r\n","alert-dialog/alert-dialog-action.svelte","alert",[94,93,104,18,123],[772,773,774,775,776],{"_68":785,"_62":75,"_70":786},{"_68":783,"_62":75,"_70":784},{"_68":781,"_62":75,"_70":782},{"_68":779,"_62":75,"_70":780},{"_68":777,"_62":75,"_70":778},"export { default as Alert, alertVariants } from \"./alert.svelte\";\nexport { default as AlertTitle } from \"./alert-title.svelte\";\nexport { default as AlertDescription } from \"./alert-description.svelte\";\nexport { default as AlertAction } from \"./alert-action.svelte\";\n","alert/index.ts","\r\n\r\n\r\n\r\n\r\n {@render children?.()}\r\n","alert/alert.svelte","\r\n\r\nsvg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n","alert/alert-title.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","alert/alert-description.svelte","\r\n\r\n\r\n {@render children?.()}\r\n","alert/alert-action.svelte","accordion",[93,94,18,229],[790,791,792,793,794],{"_68":803,"_62":75,"_70":804},{"_68":801,"_62":75,"_70":802},{"_68":799,"_62":75,"_70":800},{"_68":797,"_62":75,"_70":798},{"_68":795,"_62":75,"_70":796},"export { default as Accordion } from \"./accordion.svelte\";\nexport { default as AccordionItem } from \"./accordion-item.svelte\";\nexport { default as AccordionTrigger } from \"./accordion-trigger.svelte\";\nexport { default as AccordionContent } from \"./accordion-content.svelte\";\n","accordion/index.ts","\r\n\r\n\r\n\t{@render children?.()}\r\n","accordion/accordion.svelte","\r\n\r\n\r\n\t{@render children?.()}\r\n\t\r\n\t\t\r\n\t\r\n","accordion/accordion-trigger.svelte","\r\n\r\n\r\n\t{@render children?.()}\r\n","accordion/accordion-item.svelte","\r\n\r\n\r\n\t

\r\n\t\t{@render children?.()}\r\n\t

\r\n","accordion/accordion-content.svelte","tailwind-scrollbar","tw-animate-css","sections",[809,810],{"_811":1735,"_813":1736,"_26":1737},{"_811":812,"_813":814,"_26":815},"id","components","title","Components",[816,817,818,819,820,821,822,823,824,825,826,827,828,829,830,831,832,833,834,835,836,837,838,839,840,841,842,843,844,845,846,847],{"_811":787,"_813":1706,"_849":1707,"_853":1708,"_855":1709},{"_811":769,"_813":1682,"_849":1683,"_853":1684,"_855":1685},{"_811":727,"_813":1651,"_849":1652,"_853":1653,"_855":1654},{"_811":718,"_813":1631,"_849":1632,"_853":1633,"_855":1634},{"_811":694,"_813":1131,"_849":1600,"_853":1601,"_855":1602},{"_811":685,"_813":1232,"_849":1575,"_853":1576,"_855":1577},{"_811":658,"_813":1549,"_849":1550,"_853":1551,"_855":1552},{"_811":649,"_813":902,"_849":1507,"_853":1508,"_855":1509},{"_811":634,"_813":1226,"_849":1484,"_853":1485,"_855":1486},{"_811":597,"_813":1452,"_849":1453,"_851":852,"_853":1454,"_855":1455},{"_811":570,"_813":1434,"_849":1435,"_853":1436,"_855":1437},{"_811":537,"_813":1411,"_849":1412,"_851":852,"_853":1413,"_855":1414},{"_811":516,"_813":1257,"_849":956,"_853":1391,"_855":1392},{"_811":501,"_813":1371,"_849":1372,"_853":1373,"_855":1374},{"_811":465,"_813":1341,"_849":1342,"_853":1343,"_855":1344},{"_811":414,"_813":1287,"_849":1288,"_853":1289,"_855":1290},{"_811":390,"_813":1259,"_849":1260,"_853":1261,"_855":1262},{"_811":350,"_813":895,"_849":1239,"_855":1240,"_853":1241},{"_811":341,"_813":1181,"_849":1182,"_853":1183,"_855":1184},{"_811":314,"_813":1088,"_849":1138,"_853":1139,"_855":1140},{"_811":278,"_813":1101,"_849":1102,"_853":1103,"_855":1104},{"_811":266,"_813":1079,"_849":1080,"_853":1081,"_855":1082},{"_811":257,"_813":1066,"_849":1067,"_853":1068,"_855":1069},{"_811":242,"_813":1048,"_849":1049,"_853":1050,"_855":1051},{"_811":230,"_813":1032,"_849":1033,"_853":1034,"_855":1035},{"_811":181,"_813":1007,"_849":1008,"_851":852,"_853":1009,"_855":1010},{"_811":172,"_813":984,"_849":985,"_853":986,"_855":987},{"_811":154,"_813":955,"_849":956,"_851":852,"_853":957,"_855":958},{"_811":124,"_813":935,"_849":936,"_853":937,"_855":938},{"_811":105,"_813":909,"_849":910,"_853":911,"_855":912},{"_811":95,"_813":881,"_849":882,"_853":883,"_855":884},{"_811":74,"_813":848,"_849":850,"_851":852,"_853":854,"_855":856},"Tooltip","description","A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.","status","new","usage",[875,876],"examples",[857,858,859,860],{"_811":871,"_19":872,"_849":873,"_68":874},{"_811":867,"_19":868,"_849":869,"_68":870},{"_811":864,"_19":865,"_68":866},{"_811":861,"_19":862,"_68":863},"with-keyboard-shortcut","With Keyboard Shortcut","\r\n\r\n\r\n \r\n {#snippet asChild(props)}\r\n \r\n {/snippet}\r\n \r\n \r\n Save Changes S\r\n \r\n","showcase","Showcase","\r\n\r\n\r\n \r\n {#snippet asChild(props)}\r\n \r\n {/snippet}\r\n \r\n \r\n

Add to library

\r\n \r\n","placement","Placement","Use the positioning prop to change the placement of the tooltip.","\r\n\r\n

\r\n {#each sides as side}\r\n \r\n \r\n {#snippet asChild(props)}\r\n \r\n {/snippet}\r\n \r\n \r\n

Add to library

\r\n \r\n \r\n {/each}\r\n

","disabled-button","Disabled Button","Show a tooltip on a disabled button by wrapping it with a span.","\r\n\r\n\r\n \r\n {#snippet asChild(props)}\r\n \r\n \r\n \r\n {/snippet}\r\n \r\n \r\n

This feature is currently unavailable

\r\n \r\n",{"_877":878,"_68":880},{"_877":878,"_68":879},"language","ts","\r\n Hover\r\n \r\n

Add to library

\r\n \r\n","import {\r\n Tooltip,\r\n TooltipContent,\r\n TooltipTrigger,\r\n} from \"@/components/ui/tooltip\"","Textarea","Displays a form textarea or a component that looks like a textarea.",[905,906],[885,886,887,888,889],{"_811":649,"_19":902,"_849":903,"_68":904},{"_811":898,"_19":899,"_849":900,"_68":901},{"_811":350,"_19":895,"_849":896,"_68":897},{"_811":891,"_19":892,"_849":893,"_68":894},{"_811":864,"_19":865,"_68":890},"\r\n\r\n

\r\n","invalid","Invalid","Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.","<script lang=\"ts\">\r\nimport { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\"\r\nimport { Textarea } from \"@/components/ui/textarea\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\" data-invalid>\r\n  <FieldLabel for=\"textarea-invalid\">Message</FieldLabel>\r\n  <Textarea\r\n    id=\"textarea-invalid\"\r\n    placeholder=\"Type your message here.\"\r\n    aria-invalid\r\n  />\r\n  <FieldDescription>Please enter a valid message.</FieldDescription>\r\n</Field>\r\n","Field","Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.","<script lang=\"ts\">\r\nimport { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\"\r\nimport { Textarea } from \"@/components/ui/textarea\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\">\r\n  <FieldLabel for=\"textarea-message\">Message</FieldLabel>\r\n  <FieldDescription>Enter your message below.</FieldDescription>\r\n  <Textarea id=\"textarea-message\" placeholder=\"Type your message here.\" />\r\n</Field>\r\n","disabled","Disabled","Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.","<script lang=\"ts\">\r\nimport { Field, FieldLabel } from \"@/components/ui/field\"\r\nimport { Textarea } from \"@/components/ui/textarea\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\" data-disabled>\r\n  <FieldLabel for=\"textarea-disabled\">Message</FieldLabel>\r\n  <Textarea\r\n    id=\"textarea-disabled\"\r\n    placeholder=\"Type your message here.\"\r\n    disabled\r\n  />\r\n</Field>\r\n","Button","Pair with Button to create a textarea with a submit button.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Textarea } from \"@/components/ui/textarea\"\r\n</script>\r\n\r\n<div class=\"grid w-full gap-2 max-w-sm\">\r\n  <Textarea placeholder=\"Type your message here.\" />\r\n  <Button>Send message</Button>\r\n</div>\r\n",{"_877":878,"_68":908},{"_877":878,"_68":907},"<Textarea />","import { Textarea } from \"@/components/ui/textarea\"","Tabs","A set of layered sections of content—known as tab panels—that are displayed one at a time.",[931,932],[913,914,915,916,917],{"_811":898,"_19":899,"_68":930},{"_811":927,"_19":928,"_68":929},{"_811":923,"_19":924,"_849":925,"_68":926},{"_811":864,"_19":865,"_68":922},{"_811":918,"_19":919,"_849":920,"_68":921},"vertical","Vertical","Use the orientation=\"vertical\" prop on Tabs for vertical tabs.","<script lang=\"ts\">\r\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\r\n</script>\r\n\r\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\r\n  <TabsList>\r\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\r\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\r\n    <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\r\n  </TabsList>\r\n</Tabs>","<script lang=\"ts\">\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/card\"\r\nimport {\r\n  Tabs,\r\n  TabsContent,\r\n  TabsList,\r\n  TabsTrigger,\r\n} from \"@/components/ui/tabs\"\r\n</script>\r\n\r\n<Tabs defaultValue=\"overview\" class=\"w-[400px]\">\r\n  <TabsList>\r\n    <TabsTrigger value=\"overview\">Overview</TabsTrigger>\r\n    <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\r\n    <TabsTrigger value=\"reports\">Reports</TabsTrigger>\r\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\r\n  </TabsList>\r\n  <TabsContent value=\"overview\">\r\n    <Card>\r\n      <CardHeader>\r\n        <CardTitle>Overview</CardTitle>\r\n        <CardDescription>\r\n          View your key metrics and recent project activity. Track progress\r\n          across all your active projects.\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent class=\"text-muted-foreground text-sm\">\r\n        You have 12 active projects and 3 pending tasks.\r\n      </CardContent>\r\n    </Card>\r\n  </TabsContent>\r\n  <TabsContent value=\"analytics\">\r\n    <Card>\r\n      <CardHeader>\r\n        <CardTitle>Analytics</CardTitle>\r\n        <CardDescription>\r\n          Track performance and user engagement metrics. Monitor trends and\r\n          identify growth opportunities.\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent class=\"text-muted-foreground text-sm\">\r\n        Page views are up 25% compared to last month.\r\n      </CardContent>\r\n    </Card>\r\n  </TabsContent>\r\n  <TabsContent value=\"reports\">\r\n    <Card>\r\n      <CardHeader>\r\n        <CardTitle>Reports</CardTitle>\r\n        <CardDescription>\r\n          Generate and download your detailed reports. Export data in\r\n          multiple formats for analysis.\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent class=\"text-muted-foreground text-sm\">\r\n        You have 5 reports ready and available to export.\r\n      </CardContent>\r\n    </Card>\r\n  </TabsContent>\r\n  <TabsContent value=\"settings\">\r\n    <Card>\r\n      <CardHeader>\r\n        <CardTitle>Settings</CardTitle>\r\n        <CardDescription>\r\n          Manage your account preferences and options. Customize your\r\n          experience to fit your needs.\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent class=\"text-muted-foreground text-sm\">\r\n        Configure notifications, security, and themes.\r\n      </CardContent>\r\n    </Card>\r\n  </TabsContent>\r\n</Tabs>","line","Line","Use the variant=\"line\" prop on TabsList for a line style.","<script lang=\"ts\">\r\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\r\n</script>\r\n\r\n<Tabs defaultValue=\"overview\">\r\n  <TabsList variant=\"line\">\r\n    <TabsTrigger value=\"overview\">Overview</TabsTrigger>\r\n    <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\r\n    <TabsTrigger value=\"reports\">Reports</TabsTrigger>\r\n  </TabsList>\r\n</Tabs>","icons","Icons","<script lang=\"ts\">\r\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\r\nimport { AppWindowIcon, CodeIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Tabs defaultValue=\"preview\">\r\n  <TabsList>\r\n    <TabsTrigger value=\"preview\">\r\n      <AppWindowIcon />\r\n      Preview\r\n    </TabsTrigger>\r\n    <TabsTrigger value=\"code\">\r\n      <CodeIcon />\r\n      Code\r\n    </TabsTrigger>\r\n  </TabsList>\r\n</Tabs>","<script lang=\"ts\">\r\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\r\n</script>\r\n\r\n<Tabs id=\"ASD\" defaultValue=\"home\">\r\n  <TabsList>\r\n    <TabsTrigger value=\"home\">Home</TabsTrigger>\r\n    <TabsTrigger value=\"settings\" disabled>\r\n      Disabled\r\n    </TabsTrigger>\r\n  </TabsList>\r\n</Tabs>",{"_877":878,"_68":934},{"_877":878,"_68":933},"<Tabs defaultValue=\"account\" class=\"w-[400px]\">\r\n  <TabsList>\r\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\r\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\r\n  </TabsList>\r\n  <TabsContent value=\"account\">Make changes to your account here.</TabsContent>\r\n  <TabsContent value=\"password\">Change your password here.</TabsContent>\r\n</Tabs>","import {\r\n  Tabs,\r\n  TabsList,\r\n  TabsTrigger,\r\n  TabsContent\r\n} from \"@/components/ui/tabs\"","Table","Displays data in a tabular format with rows and columns.",[951,952],[939,940,941],{"_811":947,"_19":948,"_849":949,"_68":950},{"_811":943,"_19":944,"_849":945,"_68":946},{"_811":864,"_19":865,"_68":942},"<script lang=\"ts\">\r\n  import {\r\n    Table,\r\n    TableBody,\r\n    TableCaption,\r\n    TableCell,\r\n    TableFooter,\r\n    TableHead,\r\n    TableHeader,\r\n    TableRow,\r\n  } from \"@/components/ui/table\"\r\n\r\n  const invoices = [\r\n    {\r\n      invoice: \"INV001\",\r\n      paymentStatus: \"Paid\",\r\n      totalAmount: \"$250.00\",\r\n      paymentMethod: \"Credit Card\",\r\n    },\r\n    {\r\n      invoice: \"INV002\",\r\n      paymentStatus: \"Pending\",\r\n      totalAmount: \"$150.00\",\r\n      paymentMethod: \"PayPal\",\r\n    },\r\n    {\r\n      invoice: \"INV003\",\r\n      paymentStatus: \"Unpaid\",\r\n      totalAmount: \"$350.00\",\r\n      paymentMethod: \"Bank Transfer\",\r\n    },\r\n    {\r\n      invoice: \"INV004\",\r\n      paymentStatus: \"Paid\",\r\n      totalAmount: \"$450.00\",\r\n      paymentMethod: \"Credit Card\",\r\n    },\r\n    {\r\n      invoice: \"INV005\",\r\n      paymentStatus: \"Paid\",\r\n      totalAmount: \"$550.00\",\r\n      paymentMethod: \"PayPal\",\r\n    },\r\n    {\r\n      invoice: \"INV006\",\r\n      paymentStatus: \"Pending\",\r\n      totalAmount: \"$200.00\",\r\n      paymentMethod: \"Bank Transfer\",\r\n    },\r\n    {\r\n      invoice: \"INV007\",\r\n      paymentStatus: \"Unpaid\",\r\n      totalAmount: \"$300.00\",\r\n      paymentMethod: \"Credit Card\",\r\n    },\r\n  ]\r\n</script>\r\n\r\n<Table>\r\n  <TableCaption>A list of your recent invoices.</TableCaption>\r\n  <TableHeader>\r\n    <TableRow>\r\n      <TableHead class=\"w-[100px]\">Invoice</TableHead>\r\n      <TableHead>Status</TableHead>\r\n      <TableHead>Method</TableHead>\r\n      <TableHead class=\"text-right\">Amount</TableHead>\r\n    </TableRow>\r\n  </TableHeader>\r\n  <TableBody>\r\n    {#each invoices as invoice (invoice.invoice)}\r\n      <TableRow>\r\n        <TableCell class=\"font-medium\">{invoice.invoice}</TableCell>\r\n        <TableCell>{invoice.paymentStatus}</TableCell>\r\n        <TableCell>{invoice.paymentMethod}</TableCell>\r\n        <TableCell class=\"text-right\">{invoice.totalAmount}</TableCell>\r\n      </TableRow>\r\n    {/each}\r\n  </TableBody>\r\n  <TableFooter>\r\n    <TableRow>\r\n      <TableCell colspan={3}>Total</TableCell>\r\n      <TableCell class=\"text-right\">$2,500.00</TableCell>\r\n    </TableRow>\r\n  </TableFooter>\r\n</Table>","footer","Footer","Use the <TableFooter /> component to add a footer to the table.","<script lang=\"ts\">\r\n  import {\r\n    Table,\r\n    TableBody,\r\n    TableCaption,\r\n    TableCell,\r\n    TableFooter,\r\n    TableHead,\r\n    TableHeader,\r\n    TableRow,\r\n  } from \"@/components/ui/table\"\r\n\r\n  const invoices = [\r\n    {\r\n      invoice: \"INV001\",\r\n      paymentStatus: \"Paid\",\r\n      totalAmount: \"$250.00\",\r\n      paymentMethod: \"Credit Card\",\r\n    },\r\n    {\r\n      invoice: \"INV002\",\r\n      paymentStatus: \"Pending\",\r\n      totalAmount: \"$150.00\",\r\n      paymentMethod: \"PayPal\",\r\n    },\r\n    {\r\n      invoice: \"INV003\",\r\n      paymentStatus: \"Unpaid\",\r\n      totalAmount: \"$350.00\",\r\n      paymentMethod: \"Bank Transfer\",\r\n    },\r\n    {\r\n      invoice: \"INV004\",\r\n      paymentStatus: \"Paid\",\r\n      totalAmount: \"$450.00\",\r\n      paymentMethod: \"Credit Card\",\r\n    },\r\n    {\r\n      invoice: \"INV005\",\r\n      paymentStatus: \"Paid\",\r\n      totalAmount: \"$550.00\",\r\n      paymentMethod: \"PayPal\",\r\n    },\r\n    {\r\n      invoice: \"INV006\",\r\n      paymentStatus: \"Pending\",\r\n      totalAmount: \"$200.00\",\r\n      paymentMethod: \"Bank Transfer\",\r\n    },\r\n    {\r\n      invoice: \"INV007\",\r\n      paymentStatus: \"Unpaid\",\r\n      totalAmount: \"$300.00\",\r\n      paymentMethod: \"Credit Card\",\r\n    },\r\n  ]\r\n</script>\r\n\r\n<Table>\r\n  <TableCaption>A list of your recent invoices.</TableCaption>\r\n  <TableHeader>\r\n    <TableRow>\r\n      <TableHead class=\"w-[100px]\">Invoice</TableHead>\r\n      <TableHead>Status</TableHead>\r\n      <TableHead>Method</TableHead>\r\n      <TableHead class=\"text-right\">Amount</TableHead>\r\n    </TableRow>\r\n  </TableHeader>\r\n  <TableBody>\r\n    {#each invoices.slice(0, 3) as invoice (invoice.invoice)}\r\n      <TableRow>\r\n        <TableCell class=\"font-medium\">{invoice.invoice}</TableCell>\r\n        <TableCell>{invoice.paymentStatus}</TableCell>\r\n        <TableCell>{invoice.paymentMethod}</TableCell>\r\n        <TableCell class=\"text-right\">{invoice.totalAmount}</TableCell>\r\n      </TableRow>\r\n    {/each}\r\n  </TableBody>\r\n  <TableFooter>\r\n    <TableRow>\r\n      <TableCell colspan={3}>Total</TableCell>\r\n      <TableCell class=\"text-right\">$2,500.00</TableCell>\r\n    </TableRow>\r\n  </TableFooter>\r\n</Table>","actions","Actions","A table showing actions for each row using a <DropdownMenu /> component.","<script lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\";\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuItem,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\";\r\n  import {\r\n    Table,\r\n    TableBody,\r\n    TableCell,\r\n    TableHead,\r\n    TableHeader,\r\n    TableRow,\r\n  } from \"@/components/ui/table\";\r\n  import { MoreHorizontalIcon } from \"lucide-svelte\";\r\n\r\n  const products = [\r\n    { name: \"Wireless Mouse\", price: \"$29.99\" },\r\n    { name: \"Mechanical Keyboard\", price: \"$129.99\" },\r\n    { name: \"USB-C Hub\", price: \"$49.99\" },\r\n  ];\r\n</script>\r\n\r\n<Table>\r\n  <TableHeader>\r\n    <TableRow>\r\n      <TableHead>Product</TableHead>\r\n      <TableHead>Price</TableHead>\r\n      <TableHead class=\"text-right\">Actions</TableHead>\r\n    </TableRow>\r\n  </TableHeader>\r\n  <TableBody>\r\n    <TableRow>\r\n      <TableCell class=\"font-medium\">Wireless Mouse</TableCell>\r\n      <TableCell>$29.99</TableCell>\r\n      <TableCell class=\"text-right\">\r\n        <DropdownMenu>\r\n          <DropdownMenuTrigger>\r\n            {#snippet asChild(props)}\r\n              <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" {...props()}>\r\n                <MoreHorizontalIcon />\r\n                <span class=\"sr-only\">Open menu</span>\r\n              </Button>\r\n            {/snippet}\r\n          </DropdownMenuTrigger>\r\n          <DropdownMenuContent>\r\n            <DropdownMenuItem value=\"edit\">Edit</DropdownMenuItem>\r\n            <DropdownMenuItem value=\"duplicate\">Duplicate</DropdownMenuItem>\r\n            <DropdownMenuSeparator />\r\n            <DropdownMenuItem value=\"delete\" variant=\"destructive\"\r\n              >Delete</DropdownMenuItem\r\n            >\r\n          </DropdownMenuContent>\r\n        </DropdownMenu>\r\n      </TableCell>\r\n    </TableRow>\r\n    <TableRow>\r\n      <TableCell class=\"font-medium\">Mechanical Keyboard</TableCell>\r\n      <TableCell>$129.99</TableCell>\r\n      <TableCell class=\"text-right\">\r\n        <DropdownMenu>\r\n          <DropdownMenuTrigger>\r\n            {#snippet asChild(props)}\r\n              <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" {...props()}>\r\n                <MoreHorizontalIcon />\r\n                <span class=\"sr-only\">Open menu</span>\r\n              </Button>\r\n            {/snippet}\r\n          </DropdownMenuTrigger>\r\n          <DropdownMenuContent>\r\n            <DropdownMenuItem value=\"edit\">Edit</DropdownMenuItem>\r\n            <DropdownMenuItem value=\"duplicate\">Duplicate</DropdownMenuItem>\r\n            <DropdownMenuSeparator />\r\n            <DropdownMenuItem value=\"delete\" variant=\"destructive\"\r\n              >Delete</DropdownMenuItem\r\n            >\r\n          </DropdownMenuContent>\r\n        </DropdownMenu>\r\n      </TableCell>\r\n    </TableRow>\r\n    <TableRow>\r\n      <TableCell class=\"font-medium\">USB-C Hub</TableCell>\r\n      <TableCell>$49.99</TableCell>\r\n      <TableCell class=\"text-right\">\r\n        <DropdownMenu>\r\n          <DropdownMenuTrigger>\r\n            {#snippet asChild(props)}\r\n              <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" {...props()}>\r\n                <MoreHorizontalIcon />\r\n                <span class=\"sr-only\">Open menu</span>\r\n              </Button>\r\n            {/snippet}\r\n          </DropdownMenuTrigger>\r\n          <DropdownMenuContent>\r\n            <DropdownMenuItem value=\"edit\">Edit</DropdownMenuItem>\r\n            <DropdownMenuItem value=\"duplicate\">Duplicate</DropdownMenuItem>\r\n            <DropdownMenuSeparator />\r\n            <DropdownMenuItem value=\"delete\" variant=\"destructive\"\r\n              >Delete</DropdownMenuItem\r\n            >\r\n          </DropdownMenuContent>\r\n        </DropdownMenu>\r\n      </TableCell>\r\n    </TableRow>\r\n  </TableBody>\r\n</Table>\r\n",{"_877":878,"_68":954},{"_877":878,"_68":953},"<Table>\r\n  <TableCaption>A list of your recent invoices.</TableCaption>\r\n  <TableHeader>\r\n    <TableRow>\r\n      <TableHead class=\"w-[100px]\">Invoice</TableHead>\r\n      <TableHead>Status</TableHead>\r\n      <TableHead>Method</TableHead>\r\n      <TableHead class=\"text-right\">Amount</TableHead>\r\n    </TableRow>\r\n  </TableHeader>\r\n  <TableBody>\r\n    <TableRow>\r\n      <TableCell class=\"font-medium\">INV001</TableCell>\r\n      <TableCell>Paid</TableCell>\r\n      <TableCell>Credit Card</TableCell>\r\n      <TableCell class=\"text-right\">$250.00</TableCell>\r\n    </TableRow>\r\n  </TableBody>\r\n</Table>","import {\r\n  Table,\r\n  TableBody,\r\n  TableCaption,\r\n  TableCell,\r\n  TableHead,\r\n  TableHeader,\r\n  TableRow,\r\n} from \"@/components/ui/table\"","Switch","A control that allows the user to toggle between checked and not checked.",[980,981],[959,960,961,962,963,964],{"_811":976,"_19":977,"_849":978,"_68":979},{"_811":849,"_19":974,"_68":975},{"_811":898,"_19":899,"_849":972,"_68":973},{"_811":891,"_19":892,"_849":970,"_68":971},{"_811":864,"_19":865,"_68":969},{"_811":965,"_19":966,"_849":967,"_68":968},"sizes","Sizes","Use the size prop to change the size of the switch.","<script module lang=\"ts\">\r\n  import {\r\n    Switch,\r\n    SwitchControl,\r\n    SwitchHiddenInput,\r\n    SwitchLabel,\r\n    SwitchThumb,\r\n  } from \"@/components/ui/switch\"\r\n</script>\r\n\r\n<div class=\"flex w-fit flex-col space-y-2\">\r\n  <Switch id=\"switch-size-sm\" size=\"sm\">\r\n    <SwitchControl>\r\n      <SwitchThumb />\r\n    </SwitchControl>\r\n    <SwitchLabel>Small</SwitchLabel>\r\n    <SwitchHiddenInput />\r\n  </Switch>\r\n  <Switch id=\"switch-size-default\">\r\n    <SwitchControl>\r\n      <SwitchThumb />\r\n    </SwitchControl>\r\n    <SwitchLabel>Default</SwitchLabel>\r\n    <SwitchHiddenInput />\r\n  </Switch>\r\n</div>","<script module lang=\"ts\">\r\n  import {\r\n    Switch,\r\n    SwitchControl,\r\n    SwitchHiddenInput,\r\n    SwitchLabel,\r\n    SwitchThumb,\r\n  } from \"@/components/ui/switch\"\r\n</script>\r\n\r\n<Switch id=\"airplane-mode\">\r\n  <SwitchControl>\r\n    <SwitchThumb />\r\n  </SwitchControl>\r\n  <SwitchLabel>Airplane Mode</SwitchLabel>\r\n  <SwitchHiddenInput />\r\n</Switch>","Add the invalid prop to the Switch component to indicate an error state.","<script module lang=\"ts\">\r\n  import {\r\n    Switch,\r\n    SwitchControl,\r\n    SwitchHiddenInput,\r\n    SwitchLabel,\r\n    SwitchThumb,\r\n  } from \"@/components/ui/switch\"\r\n</script>\r\n\r\n<Switch id=\"switch-terms\" invalid class=\"max-w-sm\">\r\n  <SwitchControl>\r\n    <SwitchThumb />\r\n  </SwitchControl>\r\n  <SwitchLabel>Accept terms and conditions</SwitchLabel>\r\n  <SwitchHiddenInput />\r\n</Switch>","Add the disabled prop to the Switch component to disable the switch.","<script module lang=\"ts\">\r\n  import {\r\n    Switch,\r\n    SwitchControl,\r\n    SwitchHiddenInput,\r\n    SwitchLabel,\r\n    SwitchThumb,\r\n  } from \"@/components/ui/switch\"\r\n</script>\r\n\r\n<Switch id=\"switch-disabled-unchecked\" disabled>\r\n  <SwitchControl>\r\n    <SwitchThumb />\r\n  </SwitchControl>\r\n  <SwitchLabel>Disabled</SwitchLabel>\r\n  <SwitchHiddenInput />\r\n</Switch>","Description","<script module lang=\"ts\">\r\n  import { Field, FieldContent, FieldDescription } from \"@/components/ui/field\"\r\n  import {\r\n    Switch,\r\n    SwitchControl,\r\n    SwitchHiddenInput,\r\n    SwitchLabel,\r\n    SwitchThumb,\r\n  } from \"@/components/ui/switch\"\r\n</script>\r\n\r\n<Field orientation=\"horizontal\" class=\"max-w-sm\">\r\n  {#snippet asChild(props)}\r\n    <Switch {...props()} id=\"switch-focus-mode\">\r\n      <FieldContent>\r\n        <SwitchLabel>Share across devices</SwitchLabel>\r\n        <FieldDescription>\r\n          Focus is shared across devices, and turns off when you leave the app.\r\n        </FieldDescription>\r\n      </FieldContent>\r\n      <SwitchControl>\r\n        <SwitchThumb />\r\n      </SwitchControl>\r\n      <SwitchHiddenInput />\r\n    </Switch>\r\n  {/snippet}\r\n</Field>","choice-card","Choice Card","Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.","<script module lang=\"ts\">\r\n  import {\r\n    Field,\r\n    FieldContent,\r\n    FieldDescription,\r\n    FieldGroup,\r\n    FieldLabel,\r\n    FieldTitle,\r\n  } from \"@/components/ui/field\"\r\n  import {\r\n    Switch,\r\n    SwitchControl,\r\n    SwitchHiddenInput,\r\n    SwitchThumb,\r\n  } from \"@/components/ui/switch\"\r\n</script>\r\n\r\n<FieldGroup class=\"w-full max-w-sm\">\r\n  <FieldLabel for=\"switch-share\">\r\n    <Field orientation=\"horizontal\">\r\n      {#snippet asChild(props)}\r\n        <Switch {...props()} id=\"switch-share\">\r\n          <FieldContent>\r\n            <FieldTitle>Share across devices</FieldTitle>\r\n            <FieldDescription>\r\n              Focus is shared across devices, and turns off when you leave the app.\r\n            </FieldDescription>\r\n          </FieldContent>\r\n          <SwitchControl>\r\n            <SwitchThumb />\r\n          </SwitchControl>\r\n          <SwitchHiddenInput />\r\n        </Switch>\r\n      {/snippet}\r\n    </Field>\r\n  </FieldLabel>\r\n  <FieldLabel for=\"switch-notifications\">\r\n    <Field orientation=\"horizontal\">\r\n      {#snippet asChild(props)}\r\n        <Switch {...props()} id=\"switch-notifications\" defaultChecked>\r\n          <FieldContent>\r\n            <FieldTitle>Enable notifications</FieldTitle>\r\n            <FieldDescription>\r\n              Receive notifications when focus mode is enabled or disabled.\r\n            </FieldDescription>\r\n          </FieldContent>\r\n          <SwitchControl>\r\n            <SwitchThumb />\r\n          </SwitchControl>\r\n          <SwitchHiddenInput />\r\n        </Switch>\r\n      {/snippet}\r\n    </Field>\r\n  </FieldLabel>\r\n</FieldGroup>",{"_877":878,"_68":983},{"_877":878,"_68":982},"<Switch id=\"...\">\r\n  <SwitchControl>\r\n    <SwitchThumb />\r\n  </SwitchControl>\r\n  <SwitchLabel>...</SwitchLabel>\r\n  <SwitchHiddenInput />\r\n</Switch>","import {\r\n  Switch,\r\n  SwitchControl,\r\n  SwitchHiddenInput,\r\n  SwitchLabel,\r\n  SwitchThumb,\r\n} from \"@/components/ui/switch\"","Separator","Visually or semantically separates content.",[1003,1004],[988,989,990,991],{"_811":999,"_19":1000,"_849":1001,"_68":1002},{"_811":995,"_19":996,"_849":997,"_68":998},{"_811":864,"_19":865,"_68":994},{"_811":918,"_19":919,"_849":992,"_68":993},"Use orientation=\"vertical\" for vertical separators.","<script lang=\"ts\">\r\nimport { Separator } from \"@/components/ui/separator\"\r\n</script>\r\n\r\n<div class=\"flex h-5 items-center gap-4 text-sm\">\r\n  <div>Blog</div>\r\n  <Separator orientation=\"vertical\" />\r\n  <div>Docs</div>\r\n  <Separator orientation=\"vertical\" />\r\n  <div>Source</div>\r\n</div>","<script lang=\"ts\">\r\nimport { Separator } from \"@/components/ui/separator\"\r\n</script>\r\n\r\n<div class=\"flex max-w-sm flex-col gap-4 text-sm\">\r\n  <div class=\"flex flex-col gap-1.5\">\r\n    <div class=\"leading-none font-medium\">sprawlify/ui</div>\r\n    <div class=\"text-muted-foreground\">\r\n      The Foundation for your Design System\r\n    </div>\r\n  </div>\r\n  <Separator />\r\n  <div>\r\n    A set of beautifully designed components that you can customize, extend,\r\n    and build on.\r\n  </div>\r\n</div>","menu","Menu","Vertical separators between menu items with descriptions.","<script lang=\"ts\">\r\nimport { Separator } from \"@/components/ui/separator\"\r\n</script>\r\n\r\n<div class=\"flex items-center gap-2 text-sm md:gap-4\">\r\n  <div class=\"flex flex-col gap-1\">\r\n    <span class=\"font-medium\">Settings</span>\r\n    <span class=\"text-muted-foreground text-xs\">\r\n      Manage preferences\r\n    </span>\r\n  </div>\r\n  <Separator orientation=\"vertical\" />\r\n  <div class=\"flex flex-col gap-1\">\r\n    <span class=\"font-medium\">Account</span>\r\n    <span class=\"text-muted-foreground text-xs\">\r\n      Profile & security\r\n    </span>\r\n  </div>\r\n  <Separator orientation=\"vertical\" class=\"hidden md:block\" />\r\n  <div class=\"hidden flex-col gap-1 md:flex\">\r\n    <span class=\"font-medium\">Help</span>\r\n    <span class=\"text-muted-foreground text-xs\">Support & docs</span>\r\n  </div>\r\n</div>","list","List","Horizontal separators between list items.","<script lang=\"ts\">\r\nimport { Separator } from \"@/components/ui/separator\"\r\n</script>\r\n\r\n<div class=\"flex w-full max-w-sm flex-col gap-2 text-sm\">\r\n  <dl class=\"flex items-center justify-between\">\r\n    <dt>Item 1</dt>\r\n    <dd class=\"text-muted-foreground\">Value 1</dd>\r\n  </dl>\r\n  <Separator />\r\n  <dl class=\"flex items-center justify-between\">\r\n    <dt>Item 2</dt>\r\n    <dd class=\"text-muted-foreground\">Value 2</dd>\r\n  </dl>\r\n  <Separator />\r\n  <dl class=\"flex items-center justify-between\">\r\n    <dt>Item 3</dt>\r\n    <dd class=\"text-muted-foreground\">Value 3</dd>\r\n  </dl>\r\n</div>",{"_877":878,"_68":1006},{"_877":878,"_68":1005},"<Separator />","import { Separator } from \"@/components/ui/separator\"","Select","Displays a list of options for the user to pick from—triggered by a button.",[1028,1029],[1011,1012,1013,1014,1015],{"_811":898,"_19":899,"_849":1026,"_68":1027},{"_811":1022,"_19":1023,"_849":1024,"_68":1025},{"_811":891,"_19":892,"_849":1020,"_68":1021},{"_811":1017,"_19":1018,"_68":1019},{"_811":864,"_19":865,"_68":1016},"<script lang=\"ts\">\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectControl,\r\n  SelectHiddenSelect,\r\n  SelectIndicator,\r\n  SelectIndicatorGroup,\r\n  SelectItem,\r\n  SelectItemGroup,\r\n  SelectItemGroupLabel,\r\n  SelectItemIndicator,\r\n  SelectItemText,\r\n  SelectTrigger,\r\n  SelectValue\r\n} from \"@/components/ui/select\"\r\nimport { createListCollection } from \"@sprawlify/svelte/select\";\r\n\r\nconst fruits = createListCollection({\r\n  items: [\r\n    { label: \"Apple\", value: \"apple\" },\r\n    { label: \"Banana\", value: \"banana\" },\r\n    { label: \"Blueberry\", value: \"blueberry\" },\r\n    { label: \"Grapes\", value: \"grapes\" },\r\n    { label: \"Pineapple\", value: \"pineapple\" },\r\n  ],\r\n})\r\n</script>\r\n\r\n<Select collection={fruits} class=\"w-full max-w-48\">\r\n  <SelectHiddenSelect />\r\n  <SelectControl>\r\n    <SelectTrigger>\r\n      <SelectValue placeholder=\"Select a fruit\" />\r\n    </SelectTrigger>\r\n    <SelectIndicatorGroup>\r\n      <SelectIndicator />\r\n    </SelectIndicatorGroup>\r\n  </SelectControl>\r\n  <SelectContent>\r\n    <SelectItemGroup>\r\n      <SelectItemGroupLabel>Fruits</SelectItemGroupLabel>\r\n      {#each fruits.items as item (item.value)}\r\n        <SelectItem {item}>\r\n          <SelectItemText>{item.label}</SelectItemText>\r\n          <SelectItemIndicator />\r\n        </SelectItem>\r\n      {/each}\r\n    </SelectItemGroup>\r\n  </SelectContent>\r\n</Select>\r\n","scrollable","Scrollable","<script lang=\"ts\">\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectControl,\r\n  SelectHiddenSelect,\r\n  SelectIndicator,\r\n  SelectIndicatorGroup,\r\n  SelectItem,\r\n  SelectItemGroup,\r\n  SelectItemGroupLabel,\r\n  SelectItemIndicator,\r\n  SelectItemText,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\"\r\nimport { createListCollection } from \"@sprawlify/svelte/select\";\r\n\r\nconst collection = createListCollection({\r\n  items: [\r\n    { label: \"Eastern Standard Time\", value: \"est\", type: \"North America\" },\r\n    { label: \"Central Standard Time\", value: \"cst\", type: \"North America\" },\r\n    { label: \"Mountain Standard Time\", value: \"mst\", type: \"North America\" },\r\n    { label: \"Pacific Standard Time\", value: \"pst\", type: \"North America\" },\r\n    { label: \"Alaska Standard Time\", value: \"akst\", type: \"North America\" },\r\n    { label: \"Hawaii Standard Time\", value: \"hst\", type: \"North America\" },\r\n    { label: \"Greenwich Mean Time\", value: \"gmt\", type: \"Europe & Africa\" },\r\n    { label: \"Central European Time\", value: \"cet\", type: \"Europe & Africa\" },\r\n    { label: \"Eastern European Time\", value: \"eet\", type: \"Europe & Africa\" },\r\n    { label: \"Western European Summer Time\", value: \"west\", type: \"Europe & Africa\" },\r\n    { label: \"Central Africa Time\", value: \"cat\", type: \"Europe & Africa\" },\r\n    { label: \"East Africa Time\", value: \"eat\", type: \"Europe & Africa\" },\r\n    { label: \"Moscow Time\", value: \"msk\", type: \"Asia\" },\r\n    { label: \"India Standard Time\", value: \"ist\", type: \"Asia\" },\r\n    { label: \"China Standard Time\", value: \"cst_china\", type: \"Asia\" },\r\n    { label: \"Japan Standard Time\", value: \"jst\", type: \"Asia\" },\r\n    { label: \"Korea Standard Time\", value: \"kst\", type: \"Asia\" },\r\n    { label: \"Indonesia Central Standard Time\", value: \"ist_indonesia\", type: \"Asia\" },\r\n    { label: \"Australian Western Standard Time\", value: \"awst\", type: \"Australia & Pacific\" },\r\n    { label: \"Australian Central Standard Time\", value: \"acst\", type: \"Australia & Pacific\" },\r\n    { label: \"Australian Eastern Standard Time\", value: \"aest\", type: \"Australia & Pacific\" },\r\n    { label: \"New Zealand Standard Time\", value: \"nzst\", type: \"Australia & Pacific\" },\r\n    { label: \"Fiji Time\", value: \"fjt\", type: \"Australia & Pacific\" },\r\n    { label: \"Argentina Time\", value: \"art\", type: \"South America\" },\r\n    { label: \"Bolivia Time\", value: \"bot\", type: \"South America\" },\r\n    { label: \"Brasilia Time\", value: \"brt\", type: \"South America\" },\r\n    { label: \"Chile Standard Time\", value: \"clt\", type: \"South America\" },\r\n  ],\r\n  groupBy: (item) => item.type,\r\n})\r\n</script>\r\n\r\n<Select {collection} class=\"w-full max-w-64\">\r\n  <SelectHiddenSelect />\r\n  <SelectControl>\r\n    <SelectTrigger>\r\n      <SelectValue placeholder=\"Select a timezone\" />\r\n    </SelectTrigger>\r\n    <SelectIndicatorGroup>\r\n      <SelectIndicator />\r\n    </SelectIndicatorGroup>\r\n  </SelectControl>\r\n  <SelectContent>\r\n    {#each collection.group() as [type, group] (type)}\r\n      <SelectItemGroup>\r\n        <SelectItemGroupLabel>{type}</SelectItemGroupLabel>\r\n        {#each group as item (item.value)}\r\n          <SelectItem {item}>\r\n            <SelectItemText>{item.label}</SelectItemText>\r\n            <SelectItemIndicator />\r\n          </SelectItem>\r\n        {/each}\r\n      </SelectItemGroup>\r\n    {/each}\r\n  </SelectContent>\r\n</Select>\r\n","Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.","<script lang=\"ts\">\r\nimport { Field, FieldError, FieldLabel } from \"@/components/ui/field\"\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectControl,\r\n  SelectHiddenSelect,\r\n  SelectIndicator,\r\n  SelectIndicatorGroup,\r\n  SelectItem,\r\n  SelectItemGroup,\r\n  SelectItemIndicator,\r\n  SelectItemText,\r\n  SelectTrigger,\r\n  SelectValue\r\n} from \"@/components/ui/select\"\r\nimport { createListCollection } from \"@sprawlify/svelte/select\";\r\n\r\nconst fruits = createListCollection({\r\n  items: [\r\n    { label: \"Apple\", value: \"apple\" },\r\n    { label: \"Banana\", value: \"banana\" },\r\n    { label: \"Blueberry\", value: \"blueberry\" },\r\n  ],\r\n})\r\n</script>\r\n\r\n<Field invalid class=\"w-full max-w-48\">\r\n  <FieldLabel>Fruit</FieldLabel>\r\n  <Select collection={fruits}>\r\n    <SelectHiddenSelect />\r\n    <SelectControl>\r\n      <SelectTrigger>\r\n        <SelectValue placeholder=\"Select a fruit\" />\r\n      </SelectTrigger>\r\n      <SelectIndicatorGroup>\r\n        <SelectIndicator />\r\n      </SelectIndicatorGroup>\r\n    </SelectControl>\r\n    <SelectContent>\r\n      <SelectItemGroup>\r\n        {#each fruits.items as item (item.value)}\r\n          <SelectItem {item}>\r\n            <SelectItemText>{item.label}</SelectItemText>\r\n            <SelectItemIndicator />\r\n          </SelectItem>\r\n        {/each}\r\n      </SelectItemGroup>\r\n    </SelectContent>\r\n  </Select>\r\n  <FieldError>Please select a fruit.</FieldError>\r\n</Field>\r\n","groups","Groups","Use the groupBy option in createListCollection to organize items into groups.","<script lang=\"ts\">\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectControl,\r\n  SelectHiddenSelect,\r\n  SelectIndicator,\r\n  SelectIndicatorGroup,\r\n  SelectItem,\r\n  SelectItemGroup,\r\n  SelectItemGroupLabel,\r\n  SelectItemIndicator,\r\n  SelectItemText,\r\n  SelectSeparator,\r\n  SelectTrigger,\r\n  SelectValue\r\n} from \"@/components/ui/select\"\r\nimport { createListCollection } from \"@sprawlify/svelte/select\";\r\n\r\nconst collection = createListCollection({\r\n  items: [\r\n    { label: \"Apple\", value: \"apple\", type: \"fruit\" },\r\n    { label: \"Banana\", value: \"banana\", type: \"fruit\" },\r\n    { label: \"Blueberry\", value: \"blueberry\", type: \"fruit\" },\r\n    { label: \"Carrot\", value: \"carrot\", type: \"vegetable\" },\r\n    { label: \"Broccoli\", value: \"broccoli\", type: \"vegetable\" },\r\n    { label: \"Spinach\", value: \"spinach\", type: \"vegetable\" },\r\n  ],\r\n  groupBy: (item) => item.type,\r\n})\r\n\r\nconst groupLabels: Record<string, string> = {\r\n  fruit: \"Fruits\",\r\n  vegetable: \"Vegetables\",\r\n}\r\n</script>\r\n\r\n<Select {collection} class=\"w-full max-w-48\">\r\n  <SelectHiddenSelect />\r\n  <SelectControl>\r\n    <SelectTrigger>\r\n      <SelectValue placeholder=\"Select\" />\r\n    </SelectTrigger>\r\n    <SelectIndicatorGroup>\r\n      <SelectIndicator />\r\n    </SelectIndicatorGroup>\r\n  </SelectControl>\r\n  <SelectContent>\r\n    {#each collection.group() as [type, group], index (type)}\r\n      <SelectItemGroup>\r\n        {#if index > 0}\r\n          <SelectSeparator />\r\n        {/if}\r\n        <SelectItemGroupLabel>\r\n          {groupLabels[type] ?? type}\r\n        </SelectItemGroupLabel>\r\n        {#each group as item (item.value)}\r\n          <SelectItem {item}>\r\n            <SelectItemText>{item.label}</SelectItemText>\r\n            <SelectItemIndicator />\r\n          </SelectItem>\r\n        {/each}\r\n      </SelectItemGroup>\r\n    {/each}\r\n  </SelectContent>\r\n</Select>\r\n","Add the disabled prop to the Select component to disable the select.","<script lang=\"ts\">\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectControl,\r\n  SelectHiddenSelect,\r\n  SelectIndicator,\r\n  SelectIndicatorGroup,\r\n  SelectItem,\r\n  SelectItemGroup,\r\n  SelectItemIndicator,\r\n  SelectItemText,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\"\r\nimport { createListCollection } from \"@sprawlify/svelte/select\";\r\n\r\nconst fruits = createListCollection({\r\n  items: [\r\n    { label: \"Apple\", value: \"apple\" },\r\n    { label: \"Banana\", value: \"banana\" },\r\n    { label: \"Blueberry\", value: \"blueberry\" },\r\n    { label: \"Grapes\", value: \"grapes\" },\r\n    { label: \"Pineapple\", value: \"pineapple\" },\r\n  ],\r\n})\r\n</script>\r\n\r\n<Select collection={fruits} disabled class=\"w-full max-w-48\">\r\n  <SelectHiddenSelect />\r\n  <SelectControl>\r\n    <SelectTrigger>\r\n      <SelectValue placeholder=\"Select a fruit\" />\r\n    </SelectTrigger>\r\n    <SelectIndicatorGroup>\r\n      <SelectIndicator />\r\n    </SelectIndicatorGroup>\r\n  </SelectControl>\r\n  <SelectContent>\r\n    <SelectItemGroup>\r\n      {#each fruits.items as item (item.value)}\r\n        <SelectItem {item}>\r\n          <SelectItemText>{item.label}</SelectItemText>\r\n          <SelectItemIndicator />\r\n        </SelectItem>\r\n      {/each}\r\n    </SelectItemGroup>\r\n  </SelectContent>\r\n</Select>\r\n",{"_877":878,"_68":1031},{"_877":878,"_68":1030},"const collection = createListCollection<CollectionItem>({\r\n  items: [\r\n    { label: \"Item 1\", value: \"item-1\" },\r\n    { label: \"Item 2\", value: \"item-2\" },\r\n    { label: \"Item 3\", value: \"item-3\" },\r\n    { label: \"Item 4\", value: \"item-4\" },\r\n    { label: \"Item 5\", value: \"item-5\" },\r\n  ],\r\n})\r\n\r\n<Select collection={collection}>\r\n  <SelectHiddenSelect />\r\n  <SelectControl>\r\n    <SelectTrigger>\r\n      <SelectValue placeholder=\"Select an item\" />\r\n    </SelectTrigger>\r\n    <SelectIndicatorGroup>\r\n      <SelectIndicator />\r\n    </SelectIndicatorGroup>\r\n  </SelectControl>\r\n  <SelectContent>\r\n    <SelectItemGroup>\r\n      <SelectItemGroupLabel>Fruits</SelectItemGroupLabel>\r\n      {collection.items.map((item) => (\r\n        <SelectItem key={item.value} item={item}>\r\n          <SelectItemText>{item.label}</SelectItemText>\r\n            <SelectItemIndicator />\r\n          </SelectItem>\r\n      ))}\r\n    </SelectItemGroup>\r\n  </SelectContent>\r\n</Select>","import {\r\n  Select,\r\n  SelectClearTrigger,\r\n  SelectContent,\r\n  SelectControl,\r\n  SelectHiddenSelect,\r\n  SelectIndicator,\r\n  SelectIndicatorGroup,\r\n  SelectItem,\r\n  SelectItemGroup,\r\n  SelectItemGroupLabel,\r\n  SelectItemIndicator,\r\n  SelectItemText,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\"","Scroll Area","Augments native scroll functionality for custom, cross-browser styling.",[1044,1045],[1036,1037,1038],{"_811":1040,"_19":1041,"_849":1042,"_68":1043},{"_811":864,"_19":865,"_68":1039},{"_811":918,"_19":919,"_68":1039},"<script lang=\"ts\">\r\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\n\r\nconst tags = Array.from({ length: 50 }).map(\r\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\r\n)\r\n</script>\r\n\r\n<ScrollArea class=\"h-72 w-48 rounded-md border\">\r\n  <div class=\"p-4\">\r\n    <h4 class=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\r\n    {#each tags as tag}\r\n      <div class=\"text-sm\">{tag}</div>\r\n      <Separator class=\"my-2\" />\r\n    {/each}\r\n  </div>\r\n</ScrollArea>","horizontal","Horizontal","Use ScrollBar with orientation=\"horizontal\" for horizontal scrolling.","<script lang=\"ts\">\r\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\"\r\n\r\ninterface Artwork {\r\n  artist: string\r\n  art: string\r\n}\r\n\r\nconst works: Artwork[] = [\r\n  {\r\n    artist: \"Ornella Binni\",\r\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\r\n  },\r\n  {\r\n    artist: \"Tom Byrom\",\r\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\r\n  },\r\n  {\r\n    artist: \"Vladimir Malyavko\",\r\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\r\n  },\r\n]\r\n</script>\r\n\r\n<ScrollArea class=\"w-96 rounded-md border whitespace-nowrap\">\r\n  <div class=\"flex w-max space-x-4 p-4\">\r\n    {#each works as artwork}\r\n      <figure class=\"shrink-0\">\r\n        <div class=\"overflow-hidden rounded-md\">\r\n          <img\r\n            src={artwork.art}\r\n            alt={`Photo by ${artwork.artist}`}\r\n            class=\"aspect-[3/4] h-fit w-fit object-cover\"\r\n            width={300}\r\n            height={400}\r\n          />\r\n        </div>\r\n        <figcaption class=\"text-muted-foreground pt-2 text-xs\">\r\n          Photo by{\" \"}\r\n          <span class=\"text-foreground font-semibold\">\r\n            {artwork.artist}\r\n          </span>\r\n        </figcaption>\r\n      </figure>\r\n    {/each}\r\n  </div>\r\n  <ScrollBar orientation=\"horizontal\" />\r\n</ScrollArea>",{"_877":878,"_68":1047},{"_877":878,"_68":1046},"<ScrollArea class=\"h-[200px] w-[350px] rounded-md border p-4\">\r\n  Your scrollable content here.\r\n</ScrollArea>","import { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\"","Native Select","A styled native HTML select element with consistent design system integration.",[1062,1063],[1052,1053,1054,1055],{"_811":898,"_19":899,"_849":1060,"_68":1061},{"_811":1022,"_19":1023,"_849":1058,"_68":1059},{"_811":891,"_19":892,"_849":1020,"_68":1057},{"_811":864,"_19":865,"_68":1056},"<script lang=\"ts\">\r\nimport {\r\n  NativeSelect,\r\n  NativeSelectOption,\r\n} from \"@/components/ui/native-select\"\r\n</script>\r\n\r\n<NativeSelect>\r\n  <NativeSelectOption value=\"\">Select status</NativeSelectOption>\r\n  <NativeSelectOption value=\"todo\">Todo</NativeSelectOption>\r\n  <NativeSelectOption value=\"in-progress\">In Progress</NativeSelectOption>\r\n  <NativeSelectOption value=\"done\">Done</NativeSelectOption>\r\n  <NativeSelectOption value=\"cancelled\">Cancelled</NativeSelectOption>\r\n</NativeSelect>","<script lang=\"ts\">\r\nimport {\r\n  NativeSelect,\r\n  NativeSelectOption,\r\n} from \"@/components/ui/native-select\"\r\n</script>\r\n\r\n<NativeSelect aria-invalid=\"true\">\r\n  <NativeSelectOption value=\"\">Error state</NativeSelectOption>\r\n  <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\r\n  <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\r\n  <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\r\n</NativeSelect>","Use NativeSelectOptGroup to organize options into categories.","<script lang=\"ts\">\r\nimport {\r\n  NativeSelect,\r\n  NativeSelectOptGroup,\r\n  NativeSelectOption,\r\n} from \"@/components/ui/native-select\"\r\n</script>\r\n\r\n<NativeSelect>\r\n  <NativeSelectOption value=\"\">Select department</NativeSelectOption>\r\n  <NativeSelectOptGroup label=\"Engineering\">\r\n    <NativeSelectOption value=\"frontend\">Frontend</NativeSelectOption>\r\n    <NativeSelectOption value=\"backend\">Backend</NativeSelectOption>\r\n    <NativeSelectOption value=\"devops\">DevOps</NativeSelectOption>\r\n  </NativeSelectOptGroup>\r\n  <NativeSelectOptGroup label=\"Sales\">\r\n    <NativeSelectOption value=\"sales-rep\">Sales Rep</NativeSelectOption>\r\n    <NativeSelectOption value=\"account-manager\">\r\n      Account Manager\r\n    </NativeSelectOption>\r\n    <NativeSelectOption value=\"sales-director\">\r\n      Sales Director\r\n    </NativeSelectOption>\r\n  </NativeSelectOptGroup>\r\n  <NativeSelectOptGroup label=\"Operations\">\r\n    <NativeSelectOption value=\"support\">\r\n      Customer Support\r\n    </NativeSelectOption>\r\n    <NativeSelectOption value=\"product-manager\">\r\n      Product Manager\r\n    </NativeSelectOption>\r\n    <NativeSelectOption value=\"ops-manager\">\r\n      Operations Manager\r\n    </NativeSelectOption>\r\n  </NativeSelectOptGroup>\r\n</NativeSelect>","Add the disabled prop to the NativeSelect component to disable the select.","<script lang=\"ts\">\r\nimport {\r\n  NativeSelect,\r\n  NativeSelectOption,\r\n} from \"@/components/ui/native-select\"\r\n</script>\r\n\r\n<NativeSelect disabled>\r\n  <NativeSelectOption value=\"\">Disabled</NativeSelectOption>\r\n  <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\r\n  <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\r\n  <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\r\n</NativeSelect>",{"_877":878,"_68":1065},{"_877":878,"_68":1064},"<NativeSelect>\r\n  <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\r\n  <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\r\n  <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\r\n  <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\r\n  <NativeSelectOption value=\"pineapple\">Pineapple</NativeSelectOption>\r\n</NativeSelect>","import {\r\n  NativeSelect,\r\n  NativeSelectOptGroup,\r\n  NativeSelectOption\r\n} from \"@/components/ui/native-select\"","Label","Renders an accessible label associated with controls.",[1075,1076],[1070,1071],{"_811":350,"_19":895,"_849":1073,"_68":1074},{"_811":864,"_19":865,"_68":1072},"<script lang=\"ts\">\r\nimport { Checkbox } from \"@/components/ui/checkbox\"\r\nimport { Label } from \"@/components/ui/label\"\r\n</script>\r\n\r\n<div class=\"flex gap-2\">\r\n  <Checkbox ids={{ hiddenInput: \"terms\" }} />\r\n  <Label for=\"terms\">Accept terms and conditions</Label>\r\n</div>","For form fields, use the Field component which includes built-in FieldLabel, FieldDescription, and FieldError components.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Checkbox } from \"@/components/ui/checkbox\"\r\nimport {\r\n  Field,\r\n  FieldDescription,\r\n  FieldGroup,\r\n  FieldLabel,\r\n  FieldLegend,\r\n  FieldSeparator,\r\n  FieldSet,\r\n} from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Textarea } from \"@/components/ui/textarea\"\r\n</script>\r\n\r\n<div class=\"w-full max-w-md\">\r\n  <form>\r\n    <FieldGroup>\r\n      <FieldSet>\r\n        <FieldLegend>Payment Method</FieldLegend>\r\n        <FieldDescription>\r\n          All transactions are secure and encrypted\r\n        </FieldDescription>\r\n        <FieldGroup>\r\n          <Field>\r\n            <FieldLabel for=\"checkout-7j9-card-name-43j\">\r\n              Name on Card\r\n            </FieldLabel>\r\n            <Input\r\n              id=\"checkout-7j9-card-name-43j\"\r\n              placeholder=\"Evil Rabbit\"\r\n              required\r\n            />\r\n          </Field>\r\n          <Field>\r\n            <FieldLabel for=\"checkout-7j9-card-number-uw1\">\r\n              Card Number\r\n            </FieldLabel>\r\n            <Input\r\n              id=\"checkout-7j9-card-number-uw1\"\r\n              placeholder=\"1234 5678 9012 3456\"\r\n              required\r\n            />\r\n            <FieldDescription>\r\n              Enter your 16-digit card number\r\n            </FieldDescription>\r\n          </Field>\r\n        </FieldGroup>\r\n      </FieldSet>\r\n      <FieldSeparator />\r\n      <FieldSet>\r\n        <FieldLegend>Billing Address</FieldLegend>\r\n        <FieldDescription>\r\n          The billing address associated with your payment method\r\n        </FieldDescription>\r\n        <FieldGroup>\r\n          <Field orientation=\"horizontal\">\r\n            <Checkbox\r\n              ids={{ hiddenInput: \"checkout-7j9-same-as-shipping-wgm\" }}\r\n              defaultChecked\r\n            />\r\n            <FieldLabel\r\n              for=\"checkout-7j9-same-as-shipping-wgm\"\r\n              class=\"font-normal\"\r\n            >\r\n              Same as shipping address\r\n            </FieldLabel>\r\n          </Field>\r\n        </FieldGroup>\r\n      </FieldSet>\r\n      <FieldSet>\r\n        <FieldGroup>\r\n          <Field>\r\n            <FieldLabel for=\"checkout-7j9-optional-comments\">\r\n              Comments\r\n            </FieldLabel>\r\n            <Textarea\r\n              id=\"checkout-7j9-optional-comments\"\r\n              placeholder=\"Add any additional comments\"\r\n              class=\"resize-none\"\r\n            />\r\n          </Field>\r\n        </FieldGroup>\r\n      </FieldSet>\r\n      <Field orientation=\"horizontal\">\r\n        <Button type=\"submit\">Submit</Button>\r\n        <Button variant=\"outline\" type=\"button\">\r\n          Cancel\r\n        </Button>\r\n      </Field>\r\n    </FieldGroup>\r\n  </form>\r\n</div>",{"_877":878,"_68":1078},{"_877":878,"_68":1077},"<Label for=\"email\">Your email address</Label>","import { Label } from \"@/components/ui/label\"","Kbd","Used to display textual user input from keyboard.",[1097,1098],[1083,1084,1085,1086],{"_811":649,"_19":902,"_849":1095,"_68":1096},{"_811":1091,"_19":1092,"_849":1093,"_68":1094},{"_811":314,"_19":1088,"_849":1089,"_68":1090},{"_811":864,"_19":865,"_68":1087},"<script lang=\"ts\">\r\nimport { Kbd, KbdGroup } from \"@/components/ui/kbd\"\r\n</script>\r\n\r\n<div class=\"flex flex-col items-center gap-4\">\r\n  <KbdGroup>\r\n    <Kbd>⌘</Kbd>\r\n    <Kbd>⇧</Kbd>\r\n    <Kbd>⌥</Kbd>\r\n    <Kbd>⌃</Kbd>\r\n  </KbdGroup>\r\n  <KbdGroup>\r\n    <Kbd>Ctrl</Kbd>\r\n    <span>+</span>\r\n    <Kbd>B</Kbd>\r\n  </KbdGroup>\r\n</div>","Input Group","You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.","<script lang=\"ts\">\r\nimport {\r\n  InputGroup,\r\n  InputGroupAddon,\r\n  InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport { Kbd } from \"@/components/ui/kbd\"\r\nimport { SearchIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<div class=\"flex w-full max-w-xs flex-col gap-6\">\r\n  <InputGroup>\r\n    <InputGroupInput placeholder=\"Search...\" />\r\n    <InputGroupAddon>\r\n      <SearchIcon />\r\n    </InputGroupAddon>\r\n    <InputGroupAddon align=\"inline-end\">\r\n      <Kbd>⌘</Kbd>\r\n      <Kbd>K</Kbd>\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n</div>","group","Group","Use the KbdGroup component to group keyboard keys together.","<script lang=\"ts\">\r\nimport { Kbd, KbdGroup } from \"@/components/ui/kbd\"\r\n</script>\r\n\r\n<div class=\"flex flex-col items-center gap-4\">\r\n  <p class=\"text-muted-foreground text-sm\">\r\n    Use{\" \"}\r\n    <KbdGroup>\r\n      <Kbd>Ctrl + B</Kbd>\r\n      <Kbd>Ctrl + K</Kbd>\r\n    </KbdGroup>{\" \"}\r\n    to open the command palette\r\n  </p>\r\n</div>","Use the Kbd component inside a Button component to display a keyboard key inside a button.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Kbd } from \"@/components/ui/kbd\"\r\n</script>\r\n\r\n<Button variant=\"outline\">\r\n  Accept{\" \"}\r\n  <Kbd data-icon=\"inline-end\" class=\"translate-x-0.5\">\r\n    ⏎\r\n  </Kbd>\r\n</Button>",{"_877":878,"_68":1100},{"_877":878,"_68":1099},"<Kbd>Ctrl</Kbd>","import { Kbd, KbdGroup } from \"@/components/ui/kbd\"","Item","A versatile component for displaying content with media, title, description, and actions.",[1134,1135],[1105,1106,1107,1108,1109,1110,1111],{"_811":694,"_19":1131,"_849":1132,"_68":1133},{"_811":1091,"_19":1092,"_849":1129,"_68":1130},{"_811":1125,"_19":1126,"_849":1127,"_68":1128},{"_811":1121,"_19":1122,"_849":1123,"_68":1124},{"_811":1117,"_19":1118,"_849":1119,"_68":1120},{"_811":1113,"_19":1114,"_849":1115,"_68":1116},{"_811":864,"_19":865,"_68":1112},"<script lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\";\r\n  import {\r\n    Item,\r\n    ItemActions,\r\n    ItemContent,\r\n    ItemDescription,\r\n    ItemMedia,\r\n    ItemTitle,\r\n  } from \"@/components/ui/item\";\r\n  import { BadgeCheckIcon, ChevronRightIcon } from \"lucide-svelte\";\r\n</script>\r\n\r\n<div class=\"flex w-full max-w-md flex-col gap-6\">\r\n  <Item variant=\"outline\">\r\n    <ItemContent>\r\n      <ItemTitle>Basic Item</ItemTitle>\r\n      <ItemDescription>\r\n        A simple item with title and description.\r\n      </ItemDescription>\r\n    </ItemContent>\r\n    <ItemActions>\r\n      <Button variant=\"outline\" size=\"sm\">Action</Button>\r\n    </ItemActions>\r\n  </Item>\r\n  <Item variant=\"outline\" size=\"sm\">\r\n    {#snippet asChild(props)}\r\n      <a href=\"#link\" {...props()}>\r\n        <ItemMedia>\r\n          <BadgeCheckIcon class=\"size-5\" />\r\n        </ItemMedia>\r\n        <ItemContent>\r\n          <ItemTitle>Your profile has been verified.</ItemTitle>\r\n        </ItemContent>\r\n        <ItemActions>\r\n          <ChevronRightIcon class=\"size-4\" />\r\n        </ItemActions>\r\n      </a>\r\n    {/snippet}\r\n  </Item>\r\n</div>\r\n","link","Link","Use the asChild prop to render the item as a link. The hover and focus states will be applied to the anchor element.","<script lang=\"ts\">\r\n  import {\r\n    Item,\r\n    ItemActions,\r\n    ItemContent,\r\n    ItemDescription,\r\n    ItemTitle,\r\n  } from \"@/components/ui/item\";\r\n  import { ChevronRightIcon, ExternalLinkIcon } from \"lucide-svelte\";\r\n</script>\r\n\r\n<div class=\"flex w-full max-w-md flex-col gap-4\">\r\n  <Item>\r\n    {#snippet asChild(props)}\r\n      <a href=\"#link\" {...props()}>\r\n        <ItemContent>\r\n          <ItemTitle>Visit our documentation</ItemTitle>\r\n          <ItemDescription>\r\n            Learn how to get started with our components.\r\n          </ItemDescription>\r\n        </ItemContent>\r\n        <ItemActions>\r\n          <ChevronRightIcon class=\"size-4\" />\r\n        </ItemActions>\r\n      </a>\r\n    {/snippet}\r\n  </Item>\r\n  <Item variant=\"outline\">\r\n    {#snippet asChild(props)}\r\n      <a href=\"#link\" target=\"_blank\" rel=\"noopener noreferrer\" {...props()}>\r\n        <ItemContent>\r\n          <ItemTitle>External resource</ItemTitle>\r\n          <ItemDescription>\r\n            Opens in a new tab with security attributes.\r\n          </ItemDescription>\r\n        </ItemContent>\r\n        <ItemActions>\r\n          <ExternalLinkIcon class=\"size-4\" />\r\n        </ItemActions>\r\n      </a>\r\n    {/snippet}\r\n  </Item>\r\n</div>\r\n","image","Image","Use ItemMedia with variant=\"image\" to display an image.","<script lang=\"ts\">\r\n  import {\r\n    Item,\r\n    ItemContent,\r\n    ItemDescription,\r\n    ItemGroup,\r\n    ItemMedia,\r\n    ItemTitle,\r\n  } from \"@/components/ui/item\";\r\n\r\n  const music = [\r\n    {\r\n      title: \"Midnight City Lights\",\r\n      artist: \"Neon Dreams\",\r\n      album: \"Electric Nights\",\r\n      duration: \"3:45\",\r\n    },\r\n    {\r\n      title: \"Coffee Shop Conversations\",\r\n      artist: \"The Morning Brew\",\r\n      album: \"Urban Stories\",\r\n      duration: \"4:05\",\r\n    },\r\n    {\r\n      title: \"Digital Rain\",\r\n      artist: \"Cyber Symphony\",\r\n      album: \"Binary Beats\",\r\n      duration: \"3:30\",\r\n    },\r\n  ];\r\n</script>\r\n\r\n<div class=\"flex w-full max-w-md flex-col gap-6\">\r\n  <ItemGroup class=\"gap-4\">\r\n    {#each music as song (song.title)}\r\n      <Item variant=\"outline\" role=\"listitem\">\r\n        {#snippet asChild(props)}\r\n          <a href=\"#link\" {...props()}>\r\n            <ItemMedia variant=\"image\">\r\n              <img\r\n                src={`https://avatar.vercel.sh/${song.title}`}\r\n                alt={song.title}\r\n                width={32}\r\n                height={32}\r\n                class=\"object-cover grayscale\"\r\n              />\r\n            </ItemMedia>\r\n            <ItemContent>\r\n              <ItemTitle class=\"line-clamp-1\">\r\n                {song.title} -\r\n                <span class=\"text-muted-foreground\">{song.album}</span>\r\n              </ItemTitle>\r\n              <ItemDescription>{song.artist}</ItemDescription>\r\n            </ItemContent>\r\n            <ItemContent class=\"flex-none text-center\">\r\n              <ItemDescription>{song.duration}</ItemDescription>\r\n            </ItemContent>\r\n          </a>\r\n        {/snippet}\r\n      </Item>\r\n    {/each}\r\n  </ItemGroup>\r\n</div>\r\n","icon","Icon","Use ItemMedia with variant=\"icon\" to display an icon.","<script lang=\"ts\">\r\nimport { Button } from '@/components/ui/button'\r\nimport {\r\n  Item,\r\n  ItemActions,\r\n  ItemContent,\r\n  ItemDescription,\r\n  ItemMedia,\r\n  ItemTitle,\r\n} from '@/components/ui/item'\r\nimport { ShieldAlertIcon } from 'lucide-svelte'\r\n</script>\r\n\r\n<div class=\"flex w-full max-w-lg flex-col gap-6\">\r\n  <Item variant=\"outline\">\r\n    <ItemMedia variant=\"icon\">\r\n      <ShieldAlertIcon />\r\n    </ItemMedia>\r\n    <ItemContent>\r\n      <ItemTitle>Security Alert</ItemTitle>\r\n      <ItemDescription>\r\n        New login detected from unknown device.\r\n      </ItemDescription>\r\n    </ItemContent>\r\n    <ItemActions>\r\n      <Button size=\"sm\" variant=\"outline\">\r\n        Review\r\n      </Button>\r\n    </ItemActions>\r\n  </Item>\r\n</div>","header","Header","Use ItemHeader to add a header above the item content.","<script lang=\"ts\">\r\nimport {\r\n  Item,\r\n  ItemContent,\r\n  ItemDescription,\r\n  ItemGroup,\r\n  ItemHeader,\r\n  ItemTitle,\r\n} from '@/components/ui/item'\r\n\r\nconst models = [\r\n  {\r\n    name: 'v0-1.5-sm',\r\n    description: 'Everyday tasks and UI generation.',\r\n    image:\r\n      'https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop',\r\n    credit: 'Valeria Reverdo on Unsplash',\r\n  },\r\n  {\r\n    name: 'v0-1.5-lg',\r\n    description: 'Advanced thinking or reasoning.',\r\n    image:\r\n      'https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop',\r\n    credit: 'Michael Oeser on Unsplash',\r\n  },\r\n  {\r\n    name: 'v0-2.0-mini',\r\n    description: 'Open Source model for everyone.',\r\n    image:\r\n      'https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop',\r\n    credit: 'Cherry Laithang on Unsplash',\r\n  },\r\n]\r\n</script>\r\n\r\n<div class=\"flex w-full max-w-xl flex-col gap-6\">\r\n  <ItemGroup class=\"grid grid-cols-3 gap-4\">\r\n    {#each models as model (model.name)}\r\n      <Item variant=\"outline\">\r\n        <ItemHeader>\r\n          <img\r\n            src={model.image}\r\n            alt={model.name}\r\n            width={128}\r\n            height={128}\r\n            class=\"aspect-square w-full rounded-sm object-cover\"\r\n          />\r\n        </ItemHeader>\r\n        <ItemContent>\r\n          <ItemTitle>{model.name}</ItemTitle>\r\n          <ItemDescription>{model.description}</ItemDescription>\r\n        </ItemContent>\r\n      </Item>\r\n    {/each}\r\n  </ItemGroup>\r\n</div>","Use ItemGroup to group related items together.","<script lang=\"ts\">\r\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\r\nimport { Button } from '@/components/ui/button'\r\nimport {\r\n  Item,\r\n  ItemActions,\r\n  ItemContent,\r\n  ItemDescription,\r\n  ItemGroup,\r\n  ItemMedia,\r\n  ItemTitle,\r\n} from '@/components/ui/item'\r\nimport { PlusIcon } from 'lucide-svelte'\r\n\r\nconst people = [\r\n  {\r\n    username: 'khabubuphathu',\r\n    avatar: 'https://github.com/khabubuphathu.png',\r\n    email: 'khabubuphathu@sprawlify.com',\r\n  },\r\n  {\r\n    username: 'willeastcott',\r\n    avatar: 'https://github.com/willeastcott.png',\r\n    email: 'willeastcott@sprawlify.com',\r\n  },\r\n  {\r\n    username: 'benaadams',\r\n    avatar: 'https://github.com/benaadams.png',\r\n    email: 'benaadams@sprawlify.com',\r\n  },\r\n]\r\n</script>\r\n\r\n<ItemGroup class=\"max-w-sm\">\r\n  {#each people as person (person.username)}\r\n    <Item variant=\"outline\">\r\n      <ItemMedia>\r\n        <Avatar>\r\n          <AvatarImage src={person.avatar} class=\"grayscale\" />\r\n          <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\r\n        </Avatar>\r\n      </ItemMedia>\r\n      <ItemContent class=\"gap-1\">\r\n        <ItemTitle>{person.username}</ItemTitle>\r\n        <ItemDescription>{person.email}</ItemDescription>\r\n      </ItemContent>\r\n      <ItemActions>\r\n        <Button variant=\"ghost\" size=\"icon\" class=\"rounded-full\">\r\n          <PlusIcon />\r\n        </Button>\r\n      </ItemActions>\r\n    </Item>\r\n  {/each}\r\n</ItemGroup>","Avatar","You can use ItemMedia with variant=\"avatar\" to display an avatar.","<script lang=\"ts\">\r\n  import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\r\n  import { Button } from \"@/components/ui/button\";\r\n  import {\r\n    Item,\r\n    ItemActions,\r\n    ItemContent,\r\n    ItemDescription,\r\n    ItemMedia,\r\n    ItemTitle,\r\n  } from \"@/components/ui/item\";\r\n  import { PlusIcon } from \"lucide-svelte\";\r\n</script>\r\n\r\n<div class=\"flex w-full max-w-lg flex-col gap-6\">\r\n  <Item variant=\"outline\">\r\n    <ItemMedia>\r\n      <Avatar class=\"size-10\">\r\n        <AvatarImage src=\"https://github.com/benaadams.png\" />\r\n        <AvatarFallback>BA</AvatarFallback>\r\n      </Avatar>\r\n    </ItemMedia>\r\n    <ItemContent>\r\n      <ItemTitle>Ben A Adams</ItemTitle>\r\n      <ItemDescription>Last seen 5 months ago</ItemDescription>\r\n    </ItemContent>\r\n    <ItemActions>\r\n      <Button\r\n        size=\"icon-sm\"\r\n        variant=\"outline\"\r\n        class=\"rounded-full\"\r\n        aria-label=\"Invite\"\r\n      >\r\n        <PlusIcon />\r\n      </Button>\r\n    </ItemActions>\r\n  </Item>\r\n  <Item variant=\"outline\">\r\n    <ItemMedia>\r\n      <div\r\n        class=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\"\r\n      >\r\n        <Avatar class=\"hidden sm:flex\">\r\n          <AvatarImage\r\n            src=\"https://github.com/khabubuphathu.png\"\r\n            alt=\"@khabubuphathu\"\r\n          />\r\n          <AvatarFallback>PK</AvatarFallback>\r\n        </Avatar>\r\n        <Avatar class=\"hidden sm:flex\">\r\n          <AvatarImage\r\n            src=\"https://github.com/willeastcott.png\"\r\n            alt=\"@willeastcott\"\r\n          />\r\n          <AvatarFallback>WE</AvatarFallback>\r\n        </Avatar>\r\n        <Avatar>\r\n          <AvatarImage\r\n            src=\"https://github.com/benaadams.png\"\r\n            alt=\"@benaadams\"\r\n          />\r\n          <AvatarFallback>BA</AvatarFallback>\r\n        </Avatar>\r\n      </div>\r\n    </ItemMedia>\r\n    <ItemContent>\r\n      <ItemTitle>No Team Members</ItemTitle>\r\n      <ItemDescription>\r\n        Invite your team to collaborate on this project.\r\n      </ItemDescription>\r\n    </ItemContent>\r\n    <ItemActions>\r\n      <Button size=\"sm\" variant=\"outline\">Invite</Button>\r\n    </ItemActions>\r\n  </Item>\r\n</div>\r\n",{"_877":878,"_68":1137},{"_877":878,"_68":1136},"<Item>\r\n  <ItemMedia variant=\"icon\">\r\n    <Icon />\r\n  </ItemMedia>\r\n  <ItemContent>\r\n    <ItemTitle>Title</ItemTitle>\r\n    <ItemDescription>Description</ItemDescription>\r\n  </ItemContent>\r\n  <ItemActions>\r\n    <Button>Action</Button>\r\n  </ItemActions>\r\n</Item>","import {\r\n  ItemGroup,\r\n  ItemSeparator,\r\n  Item,\r\n  ItemMedia,\r\n  ItemContent,\r\n  ItemTitle,\r\n  ItemDescription,\r\n  ItemAction\r\n} from \"@/components/ui/item\"","Add addons, buttons, and helper content to inputs.",[1177,1178],[1141,1142,1143,1144,1145,1146,1147,1148,1149,1150],{"_811":1173,"_19":1174,"_849":1175,"_68":1176},{"_811":1169,"_19":1170,"_849":1171,"_68":1172},{"_811":1166,"_19":1167,"_68":1168},{"_811":1121,"_19":1122,"_68":1165},{"_811":1161,"_19":1162,"_849":1163,"_68":1164},{"_811":1157,"_19":1158,"_849":1159,"_68":1160},{"_811":266,"_19":1079,"_68":1156},{"_811":864,"_19":865,"_68":1155},{"_811":1152,"_19":1153,"_68":1154},{"_811":95,"_19":881,"_68":1151},"<script lang=\"ts\">\r\n  import {\r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupButton,\r\n    InputGroupText,\r\n    InputGroupTextarea,\r\n  } from \"@/components/ui/input-group\";\r\n  import { CornerDownLeftIcon, CopyIcon, ScrollIcon, RefreshCcwIcon } from \"lucide-svelte\";\r\n</script>\r\n\r\n<div class=\"grid w-full max-w-md gap-4\">\r\n  <InputGroup>\r\n    <InputGroupTextarea\r\n      id=\"textarea-code-32\"\r\n      placeholder=\"console.log('Hello, world!');\"\r\n      class=\"min-h-[200px]\"\r\n    />\r\n    <InputGroupAddon align=\"block-end\" class=\"border-t\">\r\n      <InputGroupText>Line 1, Column 1</InputGroupText>\r\n      <InputGroupButton size=\"sm\" class=\"ml-auto\" variant=\"default\">\r\n        Run <CornerDownLeftIcon />\r\n      </InputGroupButton>\r\n    </InputGroupAddon>\r\n    <InputGroupAddon align=\"block-start\" class=\"border-b\">\r\n      <InputGroupText class=\"font-mono font-medium\">\r\n        <ScrollIcon />\r\n        script.js\r\n      </InputGroupText>\r\n      <InputGroupButton class=\"ml-auto\" size=\"icon-xs\" title=\"Refresh\">\r\n        <RefreshCcwIcon />\r\n      </InputGroupButton>\r\n      <InputGroupButton variant=\"ghost\" size=\"icon-xs\" title=\"Copy\">\r\n        <CopyIcon />\r\n      </InputGroupButton>\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n</div>\r\n","text","Text","<script lang=\"ts\">\r\n  import {\r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupInput,\r\n    InputGroupText,\r\n    InputGroupTextarea,\r\n  } from \"@/components/ui/input-group\";\r\n</script>\r\n\r\n<div class=\"grid w-full max-w-sm gap-6\">\r\n  <InputGroup>\r\n    <InputGroupAddon>\r\n      <InputGroupText>$</InputGroupText>\r\n    </InputGroupAddon>\r\n    <InputGroupInput placeholder=\"0.00\" />\r\n    <InputGroupAddon align=\"inline-end\">\r\n      <InputGroupText>USD</InputGroupText>\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n  <InputGroup>\r\n    <InputGroupAddon>\r\n      <InputGroupText>https://</InputGroupText>\r\n    </InputGroupAddon>\r\n    <InputGroupInput placeholder=\"example.com\" class=\"!pl-0.5\" />\r\n    <InputGroupAddon align=\"inline-end\">\r\n      <InputGroupText>.com</InputGroupText>\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n  <InputGroup>\r\n    <InputGroupInput placeholder=\"Enter your username\" />\r\n    <InputGroupAddon align=\"inline-end\">\r\n      <InputGroupText>@company.com</InputGroupText>\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n  <InputGroup>\r\n    <InputGroupTextarea placeholder=\"Enter your message\" />\r\n    <InputGroupAddon align=\"block-end\">\r\n      <InputGroupText class=\"text-muted-foreground text-xs\">\r\n        120 characters left\r\n      </InputGroupText>\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n</div>\r\n","<script lang=\"ts\">\r\n  import {\r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupInput\r\n  } from \"@/components/ui/input-group\";\r\n  import {\r\n    SearchIcon\r\n  } from \"lucide-svelte\";\r\n</script>\r\n\r\n<InputGroup class=\"max-w-xs\">\r\n  <InputGroupInput placeholder=\"Search...\" />\r\n  <InputGroupAddon>\r\n    <SearchIcon />\r\n  </InputGroupAddon>\r\n  <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\r\n</InputGroup>\r\n","<script lang=\"ts\">\r\nimport {\r\n  InputGroup,\r\n  InputGroupAddon,\r\n  InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport { Kbd } from \"@/components/ui/kbd\"\r\nimport { SearchIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<InputGroup class=\"max-w-sm\">\r\n  <InputGroupInput placeholder=\"Search...\" />\r\n  <InputGroupAddon align=\"inline-start\">\r\n    <SearchIcon />\r\n  </InputGroupAddon>\r\n  <InputGroupAddon align=\"inline-end\">\r\n    <Kbd>⌘K</Kbd>\r\n  </InputGroupAddon>\r\n</InputGroup>","inline-start","Inline Start","Use align=\"inline-start\" to position the addon at the start of the input. This is the default.","<script lang=\"ts\">\r\n  import { Field, FieldLabel, FieldDescription } from \"@/components/ui/field\";\r\n  import {\r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupInput,\r\n  } from \"@/components/ui/input-group\";\r\n  import { SearchIcon } from \"lucide-svelte\";\r\n</script>\r\n\r\n<Field class=\"max-w-sm\">\r\n  <FieldLabel for=\"inline-start-input\">Input</FieldLabel>\r\n  <InputGroup>\r\n    <InputGroupInput id=\"inline-start-input\" placeholder=\"Search...\" />\r\n    <InputGroupAddon align=\"inline-start\">\r\n      <SearchIcon class=\"text-muted-foreground\" />\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n  <FieldDescription>Icon positioned at the start.</FieldDescription>\r\n</Field>\r\n","inline-end","Inline End","Use align=\"inline-end\" to position the addon at the end of the input.","<script lang=\"ts\">\r\n  import { Field, FieldLabel, FieldDescription } from \"@/components/ui/field\";\r\n  import {\r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupInput,\r\n  } from \"@/components/ui/input-group\";\r\n  import { EyeOffIcon } from \"lucide-svelte\";\r\n</script>\r\n\r\n<Field class=\"max-w-sm\">\r\n  <FieldLabel for=\"inline-end-input\">Input</FieldLabel>\r\n  <InputGroup>\r\n    <InputGroupInput\r\n      id=\"inline-end-input\"\r\n      type=\"password\"\r\n      placeholder=\"Enter password\"\r\n    />\r\n    <InputGroupAddon align=\"inline-end\">\r\n      <EyeOffIcon />\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n  <FieldDescription>Icon positioned at the end.</FieldDescription>\r\n</Field>\r\n","<script lang=\"ts\">\r\n  import {\r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupInput,\r\n  } from \"@/components/ui/input-group\";\r\n  import {\r\n    SearchIcon,\r\n    MailIcon,\r\n    CreditCardIcon,\r\n    CheckIcon,\r\n    StarIcon,\r\n    InfoIcon,\r\n  } from \"lucide-svelte\";\r\n</script>\r\n\r\n<div class=\"grid w-full max-w-sm gap-6\">\r\n  <InputGroup>\r\n    <InputGroupInput placeholder=\"Search...\" />\r\n    <InputGroupAddon>\r\n      <SearchIcon />\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n  <InputGroup>\r\n    <InputGroupInput type=\"email\" placeholder=\"Enter your email\" />\r\n    <InputGroupAddon>\r\n      <MailIcon />\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n  <InputGroup>\r\n    <InputGroupInput placeholder=\"Card number\" />\r\n    <InputGroupAddon>\r\n      <CreditCardIcon />\r\n    </InputGroupAddon>\r\n    <InputGroupAddon align=\"inline-end\">\r\n      <CheckIcon />\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n  <InputGroup>\r\n    <InputGroupInput placeholder=\"Card number\" />\r\n    <InputGroupAddon align=\"inline-end\">\r\n      <StarIcon />\r\n      <InfoIcon />\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n</div>\r\n","dropdown","Dropdown","<script lang=\"ts\">\r\n  import {\r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupButton,\r\n    InputGroupInput,\r\n  } from \"@/components/ui/input-group\";\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuItem,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\";\r\n  import {\r\n    MoreHorizontalIcon,\r\n    ChevronDownIcon,\r\n  } from \"lucide-svelte\";\r\n</script>\r\n\r\n<div class=\"grid w-full max-w-sm gap-4\">\r\n  <InputGroup>\r\n    <InputGroupInput placeholder=\"Enter file name\" />\r\n    <InputGroupAddon align=\"inline-end\">\r\n      <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\r\n        <DropdownMenuTrigger>\r\n          {#snippet asChild(props)}\r\n            <InputGroupButton variant=\"ghost\" aria-label=\"More\" size=\"icon-xs\" {...props()}>\r\n              <MoreHorizontalIcon />\r\n            </InputGroupButton>\r\n          {/snippet}\r\n        </DropdownMenuTrigger>\r\n        <DropdownMenuContent>\r\n          <DropdownMenuGroup>\r\n            <DropdownMenuItem value=\"settings\">Settings</DropdownMenuItem>\r\n            <DropdownMenuItem value=\"copy-path\">Copy path</DropdownMenuItem>\r\n            <DropdownMenuItem value=\"open-location\">Open location</DropdownMenuItem>\r\n          </DropdownMenuGroup>\r\n        </DropdownMenuContent>\r\n      </DropdownMenu>\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n  <InputGroup class=\"[--radius:1rem]\">\r\n    <InputGroupInput placeholder=\"Enter search query\" />\r\n    <InputGroupAddon align=\"inline-end\">\r\n      <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\r\n        <DropdownMenuTrigger>\r\n          {#snippet asChild(props)}\r\n            <InputGroupButton variant=\"ghost\" class=\"!pr-1.5 text-xs\" {...props()}>\r\n              Search In... <ChevronDownIcon class=\"size-3\" />\r\n            </InputGroupButton>\r\n          {/snippet}\r\n        </DropdownMenuTrigger>\r\n        <DropdownMenuContent class=\"[--radius:0.95rem]\">\r\n          <DropdownMenuGroup>\r\n            <DropdownMenuItem value=\"documentation\"\r\n              >Documentation</DropdownMenuItem\r\n            >\r\n            <DropdownMenuItem value=\"blog-posts\">Blog Posts</DropdownMenuItem>\r\n            <DropdownMenuItem value=\"changelog\">Changelog</DropdownMenuItem>\r\n          </DropdownMenuGroup>\r\n        </DropdownMenuContent>\r\n      </DropdownMenu>\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n</div>\r\n","block-start","Block Start","Use align=\"block-start\" to position the addon above the input.","<script lang=\"ts\">\r\n  import { FieldGroup, Field, FieldLabel, FieldDescription } from \"@/components/ui/field\";\r\n  import {\r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupButton,\r\n    InputGroupInput,\r\n    InputGroupText,\r\n    InputGroupTextarea,\r\n  } from \"@/components/ui/input-group\";\r\n  import { CopyIcon, FileCodeIcon } from \"lucide-svelte\";\r\n</script>\r\n\r\n<FieldGroup class=\"max-w-sm\">\r\n  <Field>\r\n    <FieldLabel for=\"block-start-input\">Input</FieldLabel>\r\n    <InputGroup class=\"h-auto\">\r\n      <InputGroupInput id=\"block-start-input\" placeholder=\"Enter your name\" />\r\n      <InputGroupAddon align=\"block-start\">\r\n        <InputGroupText>Full Name</InputGroupText>\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n    <FieldDescription>Header positioned above the input.</FieldDescription>\r\n  </Field>\r\n  <Field>\r\n    <FieldLabel for=\"block-start-textarea\">Textarea</FieldLabel>\r\n    <InputGroup>\r\n      <InputGroupTextarea\r\n        id=\"block-start-textarea\"\r\n        placeholder=\"console.log('Hello, world!');\"\r\n        class=\"font-mono text-sm\"\r\n      />\r\n      <InputGroupAddon align=\"block-start\">\r\n        <FileCodeIcon class=\"text-muted-foreground\" />\r\n        <InputGroupText class=\"font-mono\">script.js</InputGroupText>\r\n        <InputGroupButton size=\"icon-xs\" class=\"ml-auto\">\r\n          <CopyIcon />\r\n          <span class=\"sr-only\">Copy</span>\r\n        </InputGroupButton>\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n    <FieldDescription>Header positioned above the textarea.</FieldDescription>\r\n  </Field>\r\n</FieldGroup>\r\n","block-end","Block End","Use align=\"block-end\" to position the addon below the input.","<script lang=\"ts\">\r\n  import { FieldGroup, Field, FieldLabel, FieldDescription } from \"@/components/ui/field\";\r\n  import {\r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupButton,\r\n    InputGroupInput,\r\n    InputGroupText,\r\n    InputGroupTextarea,\r\n  } from \"@/components/ui/input-group\";\r\n</script>\r\n\r\n<FieldGroup class=\"max-w-sm\">\r\n  <Field>\r\n    <FieldLabel for=\"block-end-input\">Input</FieldLabel>\r\n    <InputGroup class=\"h-auto\">\r\n      <InputGroupInput id=\"block-end-input\" placeholder=\"Enter amount\" />\r\n      <InputGroupAddon align=\"block-end\">\r\n        <InputGroupText>USD</InputGroupText>\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n    <FieldDescription>Footer positioned below the input.</FieldDescription>\r\n  </Field>\r\n  <Field>\r\n    <FieldLabel for=\"block-end-textarea\">Textarea</FieldLabel>\r\n    <InputGroup>\r\n      <InputGroupTextarea\r\n        id=\"block-end-textarea\"\r\n        placeholder=\"Write a comment...\"\r\n      />\r\n      <InputGroupAddon align=\"block-end\">\r\n        <InputGroupText>0/280</InputGroupText>\r\n        <InputGroupButton variant=\"default\" size=\"sm\" class=\"ml-auto\">\r\n          Post\r\n        </InputGroupButton>\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n    <FieldDescription>Footer positioned below the textarea.</FieldDescription>\r\n  </Field>\r\n</FieldGroup>\r\n",{"_877":878,"_68":1180},{"_877":878,"_68":1179},"<InputGroup>\r\n  <InputGroupInput placeholder=\"Search...\" />\r\n  <InputGroupAddon>\r\n    <SearchIcon />\r\n  </InputGroupAddon>\r\n</InputGroup>","import {\r\n  InputGroup,\r\n  InputGroupAddon,\r\n  InputGroupButton,\r\n  InputGroupText,\r\n  InputGroupInput,\r\n  InputGroupTextarea\r\n} from \"@/components/ui/input-group\"","Input","A text input component for forms and user data entry with built-in styling and accessibility features.",[1235,1236],[1185,1186,1187,1188,1189,1190,1191,1192,1193,1194,1195,1196,1197],{"_811":685,"_19":1232,"_849":1233,"_68":1234},{"_811":1229,"_19":1230,"_68":1231},{"_811":634,"_19":1226,"_849":1227,"_68":1228},{"_811":898,"_19":899,"_849":1224,"_68":1225},{"_811":350,"_19":895,"_849":1223,"_68":1222},{"_811":1219,"_19":1220,"_849":1221,"_68":1222},{"_811":1215,"_19":1216,"_849":1217,"_68":1218},{"_811":1211,"_19":1212,"_849":1213,"_68":1214},{"_811":1207,"_19":1208,"_849":1209,"_68":1210},{"_811":314,"_19":1088,"_849":1205,"_68":1206},{"_811":891,"_19":892,"_849":1203,"_68":1204},{"_811":1199,"_19":1200,"_849":1201,"_68":1202},{"_811":864,"_19":865,"_68":1198},"<script lang=\"ts\">\r\nimport { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\">\r\n  <FieldLabel for=\"input-demo-api-key\">API Key</FieldLabel>\r\n  <Input id=\"input-demo-api-key\" type=\"password\" placeholder=\"sk-...\" />\r\n  <FieldDescription>\r\n    Your API key is encrypted and stored securely.\r\n  </FieldDescription>\r\n</Field>","required","Required","Use the required attribute to indicate required inputs.","<script lang=\"ts\">\r\nimport { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\">\r\n  <FieldLabel for=\"input-required\">\r\n    Required Field <span class=\"text-destructive\">*</span>\r\n  </FieldLabel>\r\n  <Input\r\n    id=\"input-required\"\r\n    placeholder=\"This field is required\"\r\n    required\r\n  />\r\n  <FieldDescription>This field must be filled out.</FieldDescription>\r\n</Field>","Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.","<script lang=\"ts\">\r\nimport { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\" data-invalid>\r\n  <FieldLabel for=\"input-invalid\">Invalid Input</FieldLabel>\r\n  <Input id=\"input-invalid\" placeholder=\"Error\" aria-invalid />\r\n  <FieldDescription>\r\n    This field contains validation errors.\r\n  </FieldDescription>\r\n</Field>","To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.","<script lang=\"ts\">\r\nimport { Field, FieldLabel } from \"@/components/ui/field\"\r\nimport {\r\n  InputGroup,\r\n  InputGroupAddon,\r\n  InputGroupInput,\r\n  InputGroupText,\r\n} from \"@/components/ui/input-group\"\r\nimport { InfoIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\">\r\n  <FieldLabel for=\"input-group-url\">Website URL</FieldLabel>\r\n  <InputGroup>\r\n    <InputGroupInput id=\"input-group-url\" placeholder=\"example.com\" />\r\n    <InputGroupAddon>\r\n      <InputGroupText>https://</InputGroupText>\r\n    </InputGroupAddon>\r\n    <InputGroupAddon align=\"inline-end\">\r\n      <InfoIcon />\r\n    </InputGroupAddon>\r\n  </InputGroup>\r\n</Field>","inline","Inline","Use Field with orientation=\"horizontal\" to create an inline input. Pair with Button to create a search input with a button.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Field } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\" orientation=\"horizontal\">\r\n  <Input type=\"search\" placeholder=\"Search...\" />\r\n  <Button>Search</Button>\r\n</Field>","grid","Grid","Use a grid layout to place multiple inputs side by side.","<script lang=\"ts\">\r\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<FieldGroup class=\"grid max-w-sm grid-cols-2\">\r\n  <Field>\r\n    <FieldLabel for=\"first-name\">First Name</FieldLabel>\r\n    <Input id=\"first-name\" placeholder=\"Jordan\" />\r\n  </Field>\r\n  <Field>\r\n    <FieldLabel for=\"last-name\">Last Name</FieldLabel>\r\n    <Input id=\"last-name\" placeholder=\"Lee\" />\r\n  </Field>\r\n</FieldGroup>","file","File","Use the type=\"file\" prop to create a file input.","<script lang=\"ts\">\r\nimport { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\">\r\n  <FieldLabel for=\"picture\">Picture</FieldLabel>\r\n  <Input id=\"picture\" type=\"file\" />\r\n  <FieldDescription>Select a picture to upload.</FieldDescription>\r\n</Field>","field-group","Field Group","Use FieldGroup to show multiple Field blocks and to build forms.","<script lang=\"ts\">\r\nimport { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\">\r\n  <FieldLabel for=\"input-field-username\">Username</FieldLabel>\r\n  <Input\r\n    id=\"input-field-username\"\r\n    type=\"text\"\r\n    placeholder=\"Enter your username\"\r\n  />\r\n  <FieldDescription>\r\n    Choose a unique username for your account.\r\n  </FieldDescription>\r\n</Field>","Use Field, FieldLabel, and FieldDescription to create an input with a label and description.","Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.","<script lang=\"ts\">\r\nimport { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\" data-disabled>\r\n  <FieldLabel for=\"input-demo-disabled\">Email</FieldLabel>\r\n  <Input\r\n    id=\"input-demo-disabled\"\r\n    type=\"email\"\r\n    placeholder=\"Email\"\r\n    disabled\r\n  />\r\n  <FieldDescription>This field is currently disabled.</FieldDescription>\r\n</Field>","Button Group","To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ButtonGroup } from \"@/components/ui/button-group\"\r\nimport { Field, FieldLabel } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\">\r\n  <FieldLabel for=\"input-button-group\">Search</FieldLabel>\r\n  <ButtonGroup>\r\n    <Input id=\"input-button-group\" placeholder=\"Type to search...\" />\r\n    <Button variant=\"outline\">Search</Button>\r\n  </ButtonGroup>\r\n</Field>","basic","Basic","<script lang=\"ts\">\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<Input class=\"max-w-sm\" placeholder=\"Enter text\" />","Badge","Use Badge in the label to highlight a recommended field.","<script lang=\"ts\">\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport { Field, FieldLabel } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<Field class=\"max-w-sm\">\r\n  <FieldLabel for=\"input-badge\">\r\n    Webhook URL{\" \"}\r\n    <Badge variant=\"secondary\" class=\"ml-auto\">\r\n      Beta\r\n    </Badge>\r\n  </FieldLabel>\r\n  <Input\r\n    id=\"input-badge\"\r\n    type=\"url\"\r\n    placeholder=\"https://api.example.com/webhook\"\r\n  />\r\n</Field>",{"_877":878,"_68":1238},{"_877":878,"_68":1237},"<Input />","import { Input } from \"@/components/ui/input\"","Combine labels, controls, and help text to compose accessible form fields and grouped inputs.",[1246,1247,1248,1249,1250],[1242,1243],{"_877":878,"_68":1245},{"_877":878,"_68":1244},"<FieldSet>\r\n  <FieldLegend>Profile</FieldLegend>\r\n  <FieldDescription>This appears on invoices and emails.</FieldDescription>\r\n  <FieldGroup>\r\n    <Field>\r\n      <FieldLabel for=\"name\">Full name</FieldLabel>\r\n      <Input id=\"name\" autoComplete=\"off\" placeholder=\"Evil Rabbit\" />\r\n      <FieldDescription>This appears on invoices and emails.</FieldDescription>\r\n    </Field>\r\n    <Field>\r\n      <FieldLabel for=\"username\">Username</FieldLabel>\r\n      <Input id=\"username\" autoComplete=\"off\" aria-invalid />\r\n      <FieldError>Choose another username.</FieldError>\r\n    </Field>\r\n    <Field orientation=\"horizontal\">\r\n      <Switch id=\"newsletter\" />\r\n      <FieldLabel for=\"newsletter\">Subscribe to the newsletter</FieldLabel>\r\n    </Field>\r\n  </FieldGroup>\r\n</FieldSet>","import {\r\n  FieldSet,\r\n  FieldLegend,\r\n  FieldGroup,\r\n  Field,\r\n  FieldContent,\r\n  FieldLabel,\r\n  FieldTitle,\r\n  FieldDescription,\r\n  FieldSeparator,\r\n  FieldError\r\n} from \"@/components/ui/field\"",{"_811":516,"_19":1257,"_68":1258},{"_811":1219,"_19":1220,"_68":1256},{"_811":1253,"_19":1254,"_68":1255},{"_811":341,"_19":1181,"_68":1252},{"_811":95,"_19":881,"_68":1251},"<script module lang=\"ts\">\r\n  import {\r\n    Field,\r\n    FieldDescription,\r\n    FieldGroup,\r\n    FieldLabel,\r\n    FieldSet,\r\n  } from \"@/components/ui/field\"\r\n  import { Textarea } from \"@/components/ui/textarea\"\r\n</script>\r\n\r\n<FieldSet class=\"w-full max-w-xs\">\r\n  <FieldGroup>\r\n    <Field>\r\n      <FieldLabel for=\"feedback\">Feedback</FieldLabel>\r\n      <Textarea\r\n        id=\"feedback\"\r\n        placeholder=\"Your feedback helps us improve...\"\r\n        rows={4}\r\n      />\r\n      <FieldDescription>\r\n        Share your thoughts about our service.\r\n      </FieldDescription>\r\n    </Field>\r\n  </FieldGroup>\r\n</FieldSet>\r\n","<script module lang=\"ts\">\r\n  import {\r\n    Field,\r\n    FieldDescription,\r\n    FieldGroup,\r\n    FieldLabel,\r\n    FieldSet,\r\n  } from \"@/components/ui/field\"\r\n  import { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<FieldSet class=\"w-full max-w-xs\">\r\n  <FieldGroup>\r\n    <Field>\r\n      <FieldLabel for=\"username\">Username</FieldLabel>\r\n      <Input id=\"username\" type=\"text\" placeholder=\"Max Leiter\" />\r\n      <FieldDescription>\r\n        Choose a unique username for your account.\r\n      </FieldDescription>\r\n    </Field>\r\n    <Field>\r\n      <FieldLabel for=\"password\">Password</FieldLabel>\r\n      <FieldDescription>\r\n        Must be at least 8 characters long.\r\n      </FieldDescription>\r\n      <Input id=\"password\" type=\"password\" placeholder=\"••••••••\" />\r\n    </Field>\r\n  </FieldGroup>\r\n</FieldSet>\r\n","fieldset","Fieldset","<script module lang=\"ts\">\r\n  import {\r\n    Field,\r\n    FieldDescription,\r\n    FieldGroup,\r\n    FieldLabel,\r\n    FieldLegend,\r\n    FieldSet,\r\n  } from \"@/components/ui/field\"\r\n  import { Input } from \"@/components/ui/input\"\r\n</script>\r\n\r\n<FieldSet class=\"w-full max-w-sm\">\r\n  <FieldLegend>Address Information</FieldLegend>\r\n  <FieldDescription>\r\n    We need your address to deliver your order.\r\n  </FieldDescription>\r\n  <FieldGroup>\r\n    <Field>\r\n      <FieldLabel for=\"street\">Street Address</FieldLabel>\r\n      <Input id=\"street\" type=\"text\" placeholder=\"123 Main St\" />\r\n    </Field>\r\n    <div class=\"grid grid-cols-2 gap-4\">\r\n      <Field>\r\n        <FieldLabel for=\"city\">City</FieldLabel>\r\n        <Input id=\"city\" type=\"text\" placeholder=\"New York\" />\r\n      </Field>\r\n      <Field>\r\n        <FieldLabel for=\"zip\">Postal Code</FieldLabel>\r\n        <Input id=\"zip\" type=\"text\" placeholder=\"90502\" />\r\n      </Field>\r\n    </div>\r\n  </FieldGroup>\r\n</FieldSet>\r\n","<script module lang=\"ts\">\r\n  import { Checkbox } from \"@/components/ui/checkbox\"\r\n  import {\r\n    Field,\r\n    FieldDescription,\r\n    FieldGroup,\r\n    FieldLabel,\r\n    FieldSeparator,\r\n    FieldSet,\r\n  } from \"@/components/ui/field\"\r\n</script>\r\n\r\n<FieldGroup class=\"w-full max-w-xs\">\r\n  <FieldSet>\r\n    <FieldLabel>Responses</FieldLabel>\r\n    <FieldDescription>\r\n      Get notified when ChatGPT responds to requests that take time, like\r\n      research or image generation.\r\n    </FieldDescription>\r\n    <FieldGroup data-slot=\"checkbox-group\">\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox ids={{ hiddenInput: \"push\" }} defaultChecked disabled />\r\n        <FieldLabel for=\"push\" class=\"font-normal\">\r\n          Push notifications\r\n        </FieldLabel>\r\n      </Field>\r\n    </FieldGroup>\r\n  </FieldSet>\r\n  <FieldSeparator />\r\n  <FieldSet>\r\n    <FieldLabel>Tasks</FieldLabel>\r\n    <FieldDescription>\r\n      Get notified when tasks you've created have updates.{\" \"}\r\n      <a href=\"#\">Manage tasks</a>\r\n    </FieldDescription>\r\n    <FieldGroup data-slot=\"checkbox-group\">\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox ids={{ hiddenInput: \"push-tasks\" }} />\r\n        <FieldLabel for=\"push-tasks\" class=\"font-normal\">\r\n          Push notifications\r\n        </FieldLabel>\r\n      </Field>\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox ids={{ hiddenInput: \"email-tasks\" }} />\r\n        <FieldLabel for=\"email-tasks\" class=\"font-normal\">\r\n          Email notifications\r\n        </FieldLabel>\r\n      </Field>\r\n    </FieldGroup>\r\n  </FieldSet>\r\n</FieldGroup>\r\n","Checkbox","<script module lang=\"ts\">\r\n  import { Checkbox } from \"@/components/ui/checkbox\";\r\n  import {\r\n    Field,\r\n    FieldContent,\r\n    FieldDescription,\r\n    FieldGroup,\r\n    FieldLabel,\r\n    FieldLegend,\r\n    FieldSeparator,\r\n    FieldSet,\r\n  } from \"@/components/ui/field\";\r\n</script>\r\n\r\n<FieldGroup class=\"w-full max-w-xs\">\r\n  <FieldSet>\r\n    <FieldLegend variant=\"label\">Show these items on the desktop</FieldLegend>\r\n    <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>\r\n    <FieldGroup class=\"gap-3\">\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox\r\n          id=\"finder-pref-9k2-hard-disks-ljj\"\r\n          name=\"finder-pref-9k2-hard-disks-ljj\"\r\n          defaultChecked\r\n        >\r\n          Hard disks\r\n        </Checkbox>\r\n      </Field>\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox\r\n          id=\"finder-pref-9k2-external-disks-1yg\"\r\n          name=\"finder-pref-9k2-external-disks-1yg\"\r\n          defaultChecked\r\n        >\r\n          External disks\r\n        </Checkbox>\r\n      </Field>\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox\r\n          id=\"finder-pref-9k2-cds-dvds-fzt\"\r\n          name=\"finder-pref-9k2-cds-dvds-fzt\"\r\n          defaultChecked\r\n        >\r\n          CDs, DVDs, and iPods\r\n        </Checkbox>\r\n      </Field>\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox\r\n          id=\"finder-pref-9k2-connected-servers-6l2\"\r\n          name=\"finder-pref-9k2-connected-servers-6l2\"\r\n          defaultChecked\r\n        >\r\n          Connected servers\r\n        </Checkbox>\r\n      </Field>\r\n    </FieldGroup>\r\n  </FieldSet>\r\n  <FieldSeparator />\r\n  <Field orientation=\"horizontal\">\r\n    <Checkbox\r\n      id=\"finder-pref-9k2-sync-folders-nep\"\r\n      name=\"finder-pref-9k2-sync-folders-nep\"\r\n      defaultChecked\r\n    />\r\n    <FieldContent>\r\n      <FieldLabel for=\"finder-pref-9k2-sync-folders-nep\">\r\n        Sync Desktop & Documents folders\r\n      </FieldLabel>\r\n      <FieldDescription>\r\n        Your Desktop & Documents folders are being synced with iCloud Drive. You can access them\r\n        from other devices.\r\n      </FieldDescription>\r\n    </FieldContent>\r\n  </Field>\r\n</FieldGroup>\r\n","Empty","Use the Empty component to display an empty state.",[1283,1284],[1263,1264,1265,1266,1267],{"_811":694,"_19":1131,"_849":1281,"_68":1282},{"_811":1277,"_19":1278,"_849":1279,"_68":1280},{"_811":1273,"_19":1274,"_849":1275,"_68":1276},{"_811":1269,"_19":1270,"_849":1271,"_68":1272},{"_811":864,"_19":865,"_68":1268},"<script lang=\"ts\">\r\nimport { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from \"@/components/ui/empty\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { FolderCode, ArrowUpRight } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Empty>\r\n  <EmptyHeader>\r\n    <EmptyMedia variant=\"icon\">\r\n      <FolderCode />\r\n    </EmptyMedia>\r\n    <EmptyTitle>No Projects Yet</EmptyTitle>\r\n    <EmptyDescription>\r\n      You haven't created any projects yet. Get started by creating\r\n      your first project.\r\n    </EmptyDescription>\r\n  </EmptyHeader>\r\n  <EmptyContent class=\"flex-row justify-center gap-2\">\r\n    <Button>Create Project</Button>\r\n    <Button variant=\"outline\">Import Project</Button>\r\n  </EmptyContent>\r\n  <Button variant=\"link\" class=\"text-muted-foreground\" size=\"sm\">\r\n    Learn More <ArrowUpRight class=\"ml-1\" />\r\n  </Button>\r\n</Empty>","outline","Outline","Use the border utility class to create an outline empty state.","<script lang=\"ts\">\r\nimport { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from \"@/components/ui/empty\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Cloud } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Empty class=\"border border-dashed\">\r\n  <EmptyHeader>\r\n    <EmptyMedia variant=\"icon\">\r\n      <Cloud />\r\n    </EmptyMedia>\r\n    <EmptyTitle>Cloud Storage Empty</EmptyTitle>\r\n    <EmptyDescription>\r\n      Upload files to your cloud storage to access them anywhere.\r\n    </EmptyDescription>\r\n  </EmptyHeader>\r\n  <EmptyContent>\r\n    <Button variant=\"outline\" size=\"sm\">Upload Files</Button>\r\n  </EmptyContent>\r\n</Empty>","background","Background","Use the bg-* and bg-gradient-* utilities to add a background to the empty state.","<script lang=\"ts\">\r\nimport { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from \"@/components/ui/empty\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Bell, RefreshCcw } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Empty class=\"bg-muted/30 h-full\">\r\n  <EmptyHeader>\r\n    <EmptyMedia variant=\"icon\">\r\n      <Bell />\r\n    </EmptyMedia>\r\n    <EmptyTitle>No Notifications</EmptyTitle>\r\n    <EmptyDescription class=\"max-w-xs text-pretty\">\r\n      You're all caught up. New notifications will appear here.\r\n    </EmptyDescription>\r\n  </EmptyHeader>\r\n  <EmptyContent>\r\n    <Button variant=\"outline\">\r\n      <RefreshCcw />\r\n      Refresh\r\n    </Button>\r\n  </EmptyContent>\r\n</Empty>","avatar-group","Avatar Group","Use the EmptyMedia component to display an avatar group in the empty state.","<script lang=\"ts\">\r\nimport { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from \"@/components/ui/empty\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Avatar, AvatarImage, AvatarFallback } from \"@/components/ui/avatar\"\r\nimport { Plus } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Empty>\r\n  <EmptyHeader>\r\n    <EmptyMedia>\r\n      <div class=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\r\n        <Avatar>\r\n          <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\r\n          <AvatarFallback>PK</AvatarFallback>\r\n        </Avatar>\r\n        <Avatar>\r\n          <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\r\n          <AvatarFallback>WE</AvatarFallback>\r\n        </Avatar>\r\n        <Avatar>\r\n          <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\r\n          <AvatarFallback>BA</AvatarFallback>\r\n        </Avatar>\r\n      </div>\r\n    </EmptyMedia>\r\n    <EmptyTitle>No Team Members</EmptyTitle>\r\n    <EmptyDescription>\r\n      Invite your team to collaborate on this project.\r\n    </EmptyDescription>\r\n  </EmptyHeader>\r\n  <EmptyContent>\r\n    <Button size=\"sm\">\r\n      <Plus />\r\n      Invite Members\r\n    </Button>\r\n  </EmptyContent>\r\n</Empty>","Use the EmptyMedia component to display an avatar in the empty state.","<script lang=\"ts\">\r\nimport { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from \"@/components/ui/empty\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Avatar, AvatarImage, AvatarFallback } from \"@/components/ui/avatar\"\r\n</script>\r\n\r\n<Empty>\r\n  <EmptyHeader>\r\n    <EmptyMedia variant=\"default\">\r\n      <Avatar class=\"size-12\">\r\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" class=\"grayscale\" />\r\n        <AvatarFallback>PK</AvatarFallback>\r\n      </Avatar>\r\n    </EmptyMedia>\r\n    <EmptyTitle>User Offline</EmptyTitle>\r\n    <EmptyDescription>\r\n      This user is currently offline. You can leave a message to notify them\r\n      or try again later.\r\n    </EmptyDescription>\r\n  </EmptyHeader>\r\n  <EmptyContent>\r\n    <Button size=\"sm\">Leave Message</Button>\r\n  </EmptyContent>\r\n</Empty>",{"_877":878,"_68":1286},{"_877":878,"_68":1285},"<Empty>\r\n  <EmptyHeader>\r\n    <EmptyMedia variant=\"icon\">\r\n      <Icon />\r\n    </EmptyMedia>\r\n    <EmptyTitle>No data</EmptyTitle>\r\n    <EmptyDescription>No data found</EmptyDescription>\r\n  </EmptyHeader>\r\n  <EmptyContent>\r\n    <Button>Add data</Button>\r\n  </EmptyContent>\r\n</Empty>","import {\r\n  Empty,\r\n  EmptyHeader,\r\n  EmptyTitle,\r\n  EmptyDescription,\r\n  EmptyContent,\r\n  EmptyMedia\r\n} from \"@/components/ui/empty\"","Dropdown Menu","Displays a menu to the user — such as a set of actions or functions — triggered by a button.",[1337,1338],[1291,1292,1293,1294,1295,1296,1297,1298,1299,1300,1301],{"_811":694,"_19":1131,"_849":1335,"_68":1336},{"_811":1229,"_19":1230,"_849":1333,"_68":1334},{"_811":1329,"_19":1330,"_849":1331,"_68":1332},{"_811":1325,"_19":1326,"_849":1327,"_68":1328},{"_811":1321,"_19":1322,"_849":1323,"_68":1324},{"_811":1317,"_19":1318,"_849":1319,"_68":1320},{"_811":927,"_19":928,"_849":1315,"_68":1316},{"_811":1311,"_19":1312,"_849":1313,"_68":1314},{"_811":1307,"_19":1308,"_849":1309,"_68":1310},{"_811":864,"_19":865,"_68":1306},{"_811":1302,"_19":1303,"_849":1304,"_68":1305},"submenu","Submenu","Use DropdownMenuSub to nest secondary actions.","<script module lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuItem,\r\n    DropdownMenuPortal,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuShortcut,\r\n    DropdownMenuSub,\r\n    DropdownMenuSubContent,\r\n    DropdownMenuSubTrigger,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\"\r\n</script>\r\n\r\n<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Open</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent>\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem value=\"team\">Team</DropdownMenuItem>\r\n      <DropdownMenuSub>\r\n        <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\r\n        <DropdownMenuPortal>\r\n          <DropdownMenuSubContent>\r\n            <DropdownMenuItem value=\"email\">Email</DropdownMenuItem>\r\n            <DropdownMenuItem value=\"message\">Message</DropdownMenuItem>\r\n            <DropdownMenuSub>\r\n              <DropdownMenuSubTrigger>More options</DropdownMenuSubTrigger>\r\n              <DropdownMenuPortal>\r\n                <DropdownMenuSubContent>\r\n                  <DropdownMenuItem value=\"calendly\">Calendly</DropdownMenuItem>\r\n                  <DropdownMenuItem value=\"slack\">Slack</DropdownMenuItem>\r\n                  <DropdownMenuSeparator />\r\n                  <DropdownMenuItem value=\"webhook\">Webhook</DropdownMenuItem>\r\n                </DropdownMenuSubContent>\r\n              </DropdownMenuPortal>\r\n            </DropdownMenuSub>\r\n            <DropdownMenuSeparator />\r\n            <DropdownMenuItem value=\"advanced\">Advanced...</DropdownMenuItem>\r\n          </DropdownMenuSubContent>\r\n        </DropdownMenuPortal>\r\n      </DropdownMenuSub>\r\n      <DropdownMenuItem value=\"new-team\">\r\n        New Team\r\n        <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","<script module lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuItem,\r\n    DropdownMenuLabel,\r\n    DropdownMenuPortal,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuShortcut,\r\n    DropdownMenuSub,\r\n    DropdownMenuSubContent,\r\n    DropdownMenuSubTrigger,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\"\r\n</script>\r\n\r\n<DropdownMenu positioning={{ placement: \"bottom-start\" }}>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Open</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent class=\"w-40\">\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\r\n      <DropdownMenuItem value=\"profile\">\r\n        Profile\r\n        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"billing\">\r\n        Billing\r\n        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"settings\">\r\n        Settings\r\n        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem value=\"team\">Team</DropdownMenuItem>\r\n      <DropdownMenuSub>\r\n        <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\r\n        <DropdownMenuPortal>\r\n          <DropdownMenuSubContent>\r\n            <DropdownMenuItem value=\"email\">Email</DropdownMenuItem>\r\n            <DropdownMenuItem value=\"message\">Message</DropdownMenuItem>\r\n            <DropdownMenuSeparator />\r\n            <DropdownMenuItem value=\"more\">More...</DropdownMenuItem>\r\n          </DropdownMenuSubContent>\r\n        </DropdownMenuPortal>\r\n      </DropdownMenuSub>\r\n      <DropdownMenuItem value=\"new-team\">\r\n        New Team\r\n        <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\r\n      <DropdownMenuItem value=\"support\">Support</DropdownMenuItem>\r\n      <DropdownMenuItem value=\"api\" disabled>API</DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem value=\"logout\">\r\n        Log out\r\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","shortcuts","Shortcuts","Add DropdownMenuShortcut to show keyboard hints.","<script module lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuItem,\r\n    DropdownMenuLabel,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuShortcut,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\"\r\n</script>\r\n\r\n<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Open</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent>\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\r\n      <DropdownMenuItem value=\"profile\">\r\n        Profile\r\n        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"billing\">\r\n        Billing\r\n        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"settings\">\r\n        Settings\r\n        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuItem value=\"logout\">\r\n      Log out\r\n      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\r\n    </DropdownMenuItem>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","radio-icons","Radio Icons","Show radio options with icons.","<script lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuLabel,\r\n    DropdownMenuRadioGroup,\r\n    DropdownMenuRadioItem,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\"\r\n  import { Building2Icon, CreditCardIcon, WalletIcon } from \"lucide-svelte\"\r\n\r\n  let paymentMethod = \"card\"\r\n</script>\r\n\r\n<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Payment Method</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent class=\"min-w-56\">\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\r\n      <DropdownMenuRadioGroup\r\n        value={paymentMethod}\r\n        onValueChange={(details) => paymentMethod = details.value}\r\n      >\r\n        <DropdownMenuRadioItem value=\"card\">\r\n          <CreditCardIcon />\r\n          Credit Card\r\n        </DropdownMenuRadioItem>\r\n        <DropdownMenuRadioItem value=\"paypal\">\r\n          <WalletIcon />\r\n          PayPal\r\n        </DropdownMenuRadioItem>\r\n        <DropdownMenuRadioItem value=\"bank\">\r\n          <Building2Icon />\r\n          Bank Transfer\r\n        </DropdownMenuRadioItem>\r\n      </DropdownMenuRadioGroup>\r\n    </DropdownMenuGroup>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","Combine icons with labels for quick scanning.","<script module lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuItem,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\"\r\n  import {\r\n    CreditCardIcon,\r\n    LogOutIcon,\r\n    SettingsIcon,\r\n    UserIcon,\r\n  } from \"lucide-svelte\"\r\n</script>\r\n\r\n<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Open</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent>\r\n    <DropdownMenuItem value=\"profile\">\r\n      <UserIcon />\r\n      Profile\r\n    </DropdownMenuItem>\r\n    <DropdownMenuItem value=\"billing\">\r\n      <CreditCardIcon />\r\n      Billing\r\n    </DropdownMenuItem>\r\n    <DropdownMenuItem value=\"settings\">\r\n      <SettingsIcon />\r\n      Settings\r\n    </DropdownMenuItem>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuItem value=\"logout\" variant=\"destructive\">\r\n      <LogOutIcon />\r\n      Log out\r\n    </DropdownMenuItem>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","destructive","Destructive","Use variant=\"destructive\" for irreversible actions.","<script module lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuItem,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\"\r\n  import { PencilIcon, ShareIcon, TrashIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Actions</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent>\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem value=\"edit\">\r\n        <PencilIcon />\r\n        Edit\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"share\">\r\n        <ShareIcon />\r\n        Share\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem value=\"delete\" variant=\"destructive\">\r\n        <TrashIcon />\r\n        Delete\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","complex","Complex","A richer example combining groups, icons, and submenus.","<script lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\";\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuCheckboxItem,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuItem,\r\n    DropdownMenuLabel,\r\n    DropdownMenuPortal,\r\n    DropdownMenuRadioGroup,\r\n    DropdownMenuRadioItem,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuShortcut,\r\n    DropdownMenuSub,\r\n    DropdownMenuSubContent,\r\n    DropdownMenuSubTrigger,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\";\r\n  import {\r\n    BellIcon,\r\n    CreditCardIcon,\r\n    DownloadIcon,\r\n    EyeIcon,\r\n    FileCodeIcon,\r\n    FileIcon,\r\n    FileTextIcon,\r\n    FolderIcon,\r\n    FolderOpenIcon,\r\n    FolderSearchIcon,\r\n    HelpCircleIcon,\r\n    KeyboardIcon,\r\n    LanguagesIcon,\r\n    LayoutIcon,\r\n    LogOutIcon,\r\n    MailIcon,\r\n    MonitorIcon,\r\n    MoonIcon,\r\n    MoreHorizontalIcon,\r\n    PaletteIcon,\r\n    SaveIcon,\r\n    SettingsIcon,\r\n    ShieldIcon,\r\n    SunIcon,\r\n    UserIcon,\r\n  } from \"lucide-svelte\";\r\n\r\n  let notifications = {\r\n    email: true,\r\n    sms: false,\r\n    push: false,\r\n  };\r\n\r\n  let theme = \"light\";\r\n\r\n  function setNotifications(newNotifications: typeof notifications) {\r\n    notifications = newNotifications;\r\n  }\r\n\r\n  function setTheme(newTheme: string) {\r\n    theme = newTheme;\r\n  }\r\n</script>\r\n\r\n<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Complex Menu</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent class=\"w-44\">\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>File</DropdownMenuLabel>\r\n      <DropdownMenuItem value=\"new-file\">\r\n        <FileIcon />\r\n        New File\r\n        <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"new-folder\">\r\n        <FolderIcon />\r\n        New Folder\r\n        <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n      <DropdownMenuSub>\r\n        <DropdownMenuSubTrigger>\r\n          <FolderOpenIcon />\r\n          Open Recent\r\n        </DropdownMenuSubTrigger>\r\n        <DropdownMenuPortal>\r\n          <DropdownMenuSubContent>\r\n            <DropdownMenuGroup>\r\n              <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\r\n              <DropdownMenuItem value=\"project-alpha\">\r\n                <FileCodeIcon />\r\n                Project Alpha\r\n              </DropdownMenuItem>\r\n              <DropdownMenuItem value=\"project-beta\">\r\n                <FileCodeIcon />\r\n                Project Beta\r\n              </DropdownMenuItem>\r\n              <DropdownMenuSub>\r\n                <DropdownMenuSubTrigger>\r\n                  <MoreHorizontalIcon />\r\n                  More Projects\r\n                </DropdownMenuSubTrigger>\r\n                <DropdownMenuPortal>\r\n                  <DropdownMenuSubContent>\r\n                    <DropdownMenuItem value=\"project-gamma\">\r\n                      <FileCodeIcon />\r\n                      Project Gamma\r\n                    </DropdownMenuItem>\r\n                    <DropdownMenuItem value=\"project-delta\">\r\n                      <FileCodeIcon />\r\n                      Project Delta\r\n                    </DropdownMenuItem>\r\n                  </DropdownMenuSubContent>\r\n                </DropdownMenuPortal>\r\n              </DropdownMenuSub>\r\n            </DropdownMenuGroup>\r\n            <DropdownMenuSeparator />\r\n            <DropdownMenuGroup>\r\n              <DropdownMenuItem value=\"browse\">\r\n                <FolderSearchIcon />\r\n                Browse...\r\n              </DropdownMenuItem>\r\n            </DropdownMenuGroup>\r\n          </DropdownMenuSubContent>\r\n        </DropdownMenuPortal>\r\n      </DropdownMenuSub>\r\n      <DropdownMenuSeparator />\r\n      <DropdownMenuItem value=\"save\">\r\n        <SaveIcon />\r\n        Save\r\n        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"export\">\r\n        <DownloadIcon />\r\n        Export\r\n        <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>View</DropdownMenuLabel>\r\n      <DropdownMenuCheckboxItem value=\"show-sidebar\"\r\n        checked={notifications.email}\r\n        onCheckedChange={(checked) =>\r\n          setNotifications({ ...notifications, email: checked === true })\r\n        }\r\n      >\r\n        <EyeIcon />\r\n        Show Sidebar\r\n      </DropdownMenuCheckboxItem>\r\n      <DropdownMenuCheckboxItem value=\"show-statusbar\"\r\n        checked={notifications.sms}\r\n        onCheckedChange={(checked) =>\r\n          setNotifications({ ...notifications, sms: checked === true })\r\n        }\r\n      >\r\n        <LayoutIcon />\r\n        Show Status Bar\r\n      </DropdownMenuCheckboxItem>\r\n      <DropdownMenuSub>\r\n        <DropdownMenuSubTrigger>\r\n          <PaletteIcon />\r\n          Theme\r\n        </DropdownMenuSubTrigger>\r\n        <DropdownMenuPortal>\r\n          <DropdownMenuSubContent>\r\n            <DropdownMenuGroup>\r\n              <DropdownMenuLabel>Appearance</DropdownMenuLabel>\r\n              <DropdownMenuRadioGroup\r\n                value={theme}\r\n                onValueChange={(details) => setTheme(details.value)}\r\n              >\r\n                <DropdownMenuRadioItem value=\"light\">\r\n                  <SunIcon />\r\n                  Light\r\n                </DropdownMenuRadioItem>\r\n                <DropdownMenuRadioItem value=\"dark\">\r\n                  <MoonIcon />\r\n                  Dark\r\n                </DropdownMenuRadioItem>\r\n                <DropdownMenuRadioItem value=\"system\">\r\n                  <MonitorIcon />\r\n                  System\r\n                </DropdownMenuRadioItem>\r\n              </DropdownMenuRadioGroup>\r\n            </DropdownMenuGroup>\r\n          </DropdownMenuSubContent>\r\n        </DropdownMenuPortal>\r\n      </DropdownMenuSub>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>Account</DropdownMenuLabel>\r\n      <DropdownMenuItem value=\"profile\">\r\n        <UserIcon />\r\n        Profile\r\n        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"billing\">\r\n        <CreditCardIcon />\r\n        Billing\r\n      </DropdownMenuItem>\r\n      <DropdownMenuSub>\r\n        <DropdownMenuSubTrigger>\r\n          <SettingsIcon />\r\n          Settings\r\n        </DropdownMenuSubTrigger>\r\n        <DropdownMenuPortal>\r\n          <DropdownMenuSubContent>\r\n            <DropdownMenuGroup>\r\n              <DropdownMenuLabel>Preferences</DropdownMenuLabel>\r\n              <DropdownMenuItem value=\"keyboard-shortcuts\">\r\n                <KeyboardIcon />\r\n                Keyboard Shortcuts\r\n              </DropdownMenuItem>\r\n              <DropdownMenuItem value=\"language\">\r\n                <LanguagesIcon />\r\n                Language\r\n              </DropdownMenuItem>\r\n              <DropdownMenuSub>\r\n                <DropdownMenuSubTrigger>\r\n                  <BellIcon />\r\n                  Notifications\r\n                </DropdownMenuSubTrigger>\r\n                <DropdownMenuPortal>\r\n                  <DropdownMenuSubContent>\r\n                    <DropdownMenuGroup>\r\n                      <DropdownMenuLabel>\r\n                        Notification Types\r\n                      </DropdownMenuLabel>\r\n                      <DropdownMenuCheckboxItem value=\"push-notifications\"\r\n                        checked={notifications.push}\r\n                        onCheckedChange={(checked) =>\r\n                          setNotifications({\r\n                            ...notifications,\r\n                            push: checked === true,\r\n                          })\r\n                        }\r\n                      >\r\n                        <BellIcon />\r\n                        Push Notifications\r\n                      </DropdownMenuCheckboxItem>\r\n                      <DropdownMenuCheckboxItem value=\"email-notifications\"\r\n                        checked={notifications.email}\r\n                        onCheckedChange={(checked) =>\r\n                          setNotifications({\r\n                            ...notifications,\r\n                            email: checked === true,\r\n                          })\r\n                        }\r\n                      >\r\n                        <MailIcon />\r\n                        Email Notifications\r\n                      </DropdownMenuCheckboxItem>\r\n                    </DropdownMenuGroup>\r\n                  </DropdownMenuSubContent>\r\n                </DropdownMenuPortal>\r\n              </DropdownMenuSub>\r\n            </DropdownMenuGroup>\r\n            <DropdownMenuSeparator />\r\n            <DropdownMenuGroup>\r\n              <DropdownMenuItem value=\"privacy-security\">\r\n                <ShieldIcon />\r\n                Privacy & Security\r\n              </DropdownMenuItem>\r\n            </DropdownMenuGroup>\r\n          </DropdownMenuSubContent>\r\n        </DropdownMenuPortal>\r\n      </DropdownMenuSub>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem value=\"help-support\">\r\n        <HelpCircleIcon />\r\n        Help & Support\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"documentation\">\r\n        <FileTextIcon />\r\n        Documentation\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem variant=\"destructive\" value=\"sign-out\">\r\n        <LogOutIcon />\r\n        Sign Out\r\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>\r\n","checkboxes-icons","Checkboxes Icons","Add icons to checkbox items.","<script lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuCheckboxItem,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuLabel,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\"\r\n  import { BellIcon, MailIcon, MessageSquareIcon } from \"lucide-svelte\"\r\n\r\n  let notifications = {\r\n    email: true,\r\n    sms: false,\r\n    push: true,\r\n  }\r\n\r\n  function updateNotifications(key: string, checked: boolean) {\r\n    notifications = { ...notifications, [key]: checked }\r\n  }\r\n</script>\r\n\r\n<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Notifications</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent class=\"w-48\">\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\r\n      <DropdownMenuCheckboxItem\r\n        value=\"email-notifications\"\r\n        checked={notifications.email}\r\n        onCheckedChange={(checked) => updateNotifications('email', checked === true)}\r\n      >\r\n        <MailIcon />\r\n        Email notifications\r\n      </DropdownMenuCheckboxItem>\r\n      <DropdownMenuCheckboxItem\r\n        value=\"sms-notifications\"\r\n        checked={notifications.sms}\r\n        onCheckedChange={(checked) => updateNotifications('sms', checked === true)}\r\n      >\r\n        <MessageSquareIcon />\r\n        SMS notifications\r\n      </DropdownMenuCheckboxItem>\r\n      <DropdownMenuCheckboxItem\r\n        value=\"push-notifications\"\r\n        checked={notifications.push}\r\n        onCheckedChange={(checked) => updateNotifications('push', checked === true)}\r\n      >\r\n        <BellIcon />\r\n        Push notifications\r\n      </DropdownMenuCheckboxItem>\r\n    </DropdownMenuGroup>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","checkboxes","Checkboxes","Use DropdownMenuCheckboxItem for toggles.","<script lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuCheckboxItem,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuLabel,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\"\r\n\r\n  let showStatusBar = true\r\n  let showActivityBar = false\r\n  let showPanel = false\r\n</script>\r\n\r\n<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Open</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent class=\"w-40\">\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\r\n      <DropdownMenuCheckboxItem \r\n        value=\"statusbar\"\r\n        checked={showStatusBar ?? false}\r\n        onCheckedChange={(checked) => showStatusBar = checked}\r\n      >\r\n        Status Bar\r\n      </DropdownMenuCheckboxItem>\r\n      <DropdownMenuCheckboxItem \r\n        value=\"activitybar\"\r\n        checked={showActivityBar}\r\n        onCheckedChange={(checked) => showActivityBar = checked}\r\n        disabled\r\n      >\r\n        Activity Bar\r\n      </DropdownMenuCheckboxItem>\r\n      <DropdownMenuCheckboxItem \r\n        value=\"panel\"\r\n        checked={showPanel}\r\n        onCheckedChange={(checked) => showPanel = checked}\r\n      >\r\n        Panel\r\n      </DropdownMenuCheckboxItem>\r\n    </DropdownMenuGroup>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","A basic dropdown menu with labels and separators.","<script module lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuItem,\r\n    DropdownMenuLabel,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\"\r\n</script>\r\n\r\n<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Open</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent>\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\r\n      <DropdownMenuItem value=\"profile\">Profile</DropdownMenuItem>\r\n      <DropdownMenuItem value=\"billing\">Billing</DropdownMenuItem>\r\n      <DropdownMenuItem value=\"settings\">Settings</DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\r\n    <DropdownMenuItem value=\"support\">Support</DropdownMenuItem>\r\n    <DropdownMenuItem value=\"api\" disabled>API</DropdownMenuItem>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","An account switcher dropdown triggered by an avatar.","<script module lang=\"ts\">\r\n  import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuItem,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\"\r\n  import {\r\n    BadgeCheckIcon,\r\n    BellIcon,\r\n    CreditCardIcon,\r\n    LogOutIcon,\r\n  } from \"lucide-svelte\"\r\n</script>\r\n\r\n<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"ghost\" size=\"icon\" class=\"rounded-full\" {...props()}>\r\n        <Avatar>\r\n          <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"khabubuphathu\" />\r\n          <AvatarFallback>PK</AvatarFallback>\r\n        </Avatar>\r\n      </Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent>\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem value=\"account\">\r\n        <BadgeCheckIcon />\r\n        Account\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"billing\">\r\n        <CreditCardIcon />\r\n        Billing\r\n      </DropdownMenuItem>\r\n      <DropdownMenuItem value=\"notifications\">\r\n        <BellIcon />\r\n        Notifications\r\n      </DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuItem value=\"signout\">\r\n      <LogOutIcon />\r\n      Sign Out\r\n    </DropdownMenuItem>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>",{"_877":878,"_68":1340},{"_877":878,"_68":1339},"<DropdownMenu>\r\n  <DropdownMenuTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Open</Button>\r\n    {/snippet}\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent>\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\r\n      <DropdownMenuItem>Profile</DropdownMenuItem>\r\n      <DropdownMenuItem>Billing</DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem>Team</DropdownMenuItem>\r\n      <DropdownMenuItem>Subscription</DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","import {\r\n  DropdownMenu,\r\n  DropdownMenuPortal,\r\n  DropdownMenuTrigger,\r\n  DropdownMenuContent,\r\n  DropdownMenuGroup,\r\n  DropdownMenuLabel,\r\n  DropdownMenuItem,\r\n  DropdownMenuCheckboxItem,\r\n  DropdownMenuRadioGroup,\r\n  DropdownMenuRadioItem,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuShortcut,\r\n  DropdownMenuSub,\r\n  DropdownMenuSubTrigger,\r\n  DropdownMenuSubContent\r\n} from \"@/components/ui/dropdown-menu\"","Dialog","A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",[1367,1368],[1345,1346,1347,1348,1349],{"_811":1363,"_19":1364,"_849":1365,"_68":1366},{"_811":1359,"_19":1360,"_849":1361,"_68":1362},{"_811":1355,"_19":1356,"_849":1357,"_68":1358},{"_811":864,"_19":865,"_68":1354},{"_811":1350,"_19":1351,"_849":1352,"_68":1353},"sticky-footer","Sticky Footer","Keep actions visible while the content scrolls.","<script lang=\"ts\">\r\n  import Button from \"@/components/ui/button/button.svelte\"\r\n  import {\r\n    Dialog,\r\n    DialogClose,\r\n    DialogContent,\r\n    DialogDescription,\r\n    DialogFooter,\r\n    DialogHeader,\r\n    DialogTitle,\r\n    DialogTrigger,\r\n  } from \"@/components/ui/dialog\"\r\n</script>\r\n\r\n<Dialog>\r\n  <DialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Sticky Footer</Button>\r\n    {/snippet}\r\n  </DialogTrigger>\r\n  <DialogContent>\r\n    <DialogHeader>\r\n      <DialogTitle>Sticky Footer</DialogTitle>\r\n      <DialogDescription>\r\n        This dialog has a sticky footer that stays visible while the content scrolls.\r\n      </DialogDescription>\r\n    </DialogHeader>\r\n    <div class=\"-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4\">\r\n      {#each Array.from({ length: 10 }) as _, index}\r\n        <p class=\"mb-4 leading-normal\">\r\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor\r\n          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\r\n          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\r\n          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\r\n          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\r\n          mollit anim id est laborum.\r\n        </p>\r\n      {/each}\r\n    </div>\r\n    <DialogFooter>\r\n      <DialogClose>\r\n        {#snippet asChild(props)}\r\n          <Button variant=\"outline\" {...props()}>Close</Button>\r\n        {/snippet}\r\n      </DialogClose>\r\n    </DialogFooter>\r\n  </DialogContent>\r\n</Dialog>","<script lang=\"ts\">\r\n  import Button from \"@/components/ui/button/button.svelte\"\r\n  import {\r\n    Dialog,\r\n    DialogClose,\r\n    DialogContent,\r\n    DialogDescription,\r\n    DialogFooter,\r\n    DialogHeader,\r\n    DialogTitle,\r\n    DialogTrigger,\r\n  } from \"@/components/ui/dialog\"\r\n  import Field from \"@/components/ui/field/field.svelte\"\r\n  import FieldGroup from \"@/components/ui/field/field-group.svelte\"\r\n  import Input from \"@/components/ui/input/input.svelte\"\r\n  import Label from \"@/components/ui/label/label.svelte\"\r\n</script>\r\n\r\n<Dialog>\r\n  <form>\r\n    <DialogTrigger>\r\n      {#snippet asChild(props)}\r\n        <Button variant=\"outline\" {...props()}>Open Dialog</Button>\r\n      {/snippet}\r\n    </DialogTrigger>\r\n    <DialogContent class=\"sm:max-w-sm\">\r\n      <DialogHeader>\r\n        <DialogTitle>Edit profile</DialogTitle>\r\n        <DialogDescription>\r\n          Make changes to your profile here. Click save when you're\r\n          done.\r\n        </DialogDescription>\r\n      </DialogHeader>\r\n      <FieldGroup>\r\n        <Field>\r\n          <Label for=\"name-1\">Name</Label>\r\n          <Input id=\"name-1\" name=\"name\" value=\"Pedro Duarte\" />\r\n        </Field>\r\n        <Field>\r\n          <Label for=\"username-1\">Username</Label>\r\n          <Input id=\"username-1\" name=\"username\" value=\"@peduarte\" />\r\n        </Field>\r\n      </FieldGroup>\r\n      <DialogFooter>\r\n        <DialogClose>\r\n          {#snippet asChild(props)}\r\n            <Button variant=\"outline\" {...props()}>Cancel</Button>\r\n          {/snippet}\r\n        </DialogClose>\r\n        <Button type=\"submit\">Save changes</Button>\r\n      </DialogFooter>\r\n    </DialogContent>\r\n  </form>\r\n</Dialog>","scrollable-content","Scrollable Content","Long content can scroll while the header stays in view.","<script lang=\"ts\">\r\n  import Button from \"@/components/ui/button/button.svelte\"\r\n  import {\r\n    Dialog,\r\n    DialogContent,\r\n    DialogDescription,\r\n    DialogHeader,\r\n    DialogTitle,\r\n    DialogTrigger,\r\n  } from \"@/components/ui/dialog\"\r\n</script>\r\n\r\n<Dialog>\r\n  <DialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Scrollable Content</Button>\r\n    {/snippet}\r\n  </DialogTrigger>\r\n  <DialogContent>\r\n    <DialogHeader>\r\n      <DialogTitle>Scrollable Content</DialogTitle>\r\n      <DialogDescription>This is a dialog with scrollable content.</DialogDescription>\r\n    </DialogHeader>\r\n    <div class=\"-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4\">\r\n      {#each Array.from({ length: 10 }) as _, index}\r\n        <p class=\"mb-4 leading-normal\">\r\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor\r\n          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\r\n          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\r\n          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\r\n          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\r\n          mollit anim id est laborum.\r\n        </p>\r\n      {/each}\r\n    </div>\r\n  </DialogContent>\r\n</Dialog>","no-close-button","No Close Button","Use showCloseButton={false} to hide the close button.","<script lang=\"ts\">\r\n  import Button from \"@/components/ui/button/button.svelte\"\r\n  import {\r\n    Dialog,\r\n    DialogContent,\r\n    DialogDescription,\r\n    DialogHeader,\r\n    DialogTitle,\r\n    DialogTrigger,\r\n  } from \"@/components/ui/dialog\"\r\n</script>\r\n\r\n<Dialog>\r\n  <DialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>No Close Button</Button>\r\n    {/snippet}\r\n  </DialogTrigger>\r\n  <DialogContent showCloseButton={false}>\r\n    <DialogHeader>\r\n      <DialogTitle>No Close Button</DialogTitle>\r\n      <DialogDescription>\r\n        This dialog doesn't have a close button in the top-right corner.\r\n      </DialogDescription>\r\n    </DialogHeader>\r\n  </DialogContent>\r\n</Dialog>","custom-close-button","Custom Close Button","Replace the default close control with your own button.","<script lang=\"ts\">\r\n  import Button from \"@/components/ui/button/button.svelte\"\r\n  import {\r\n    Dialog,\r\n    DialogClose,\r\n    DialogContent,\r\n    DialogDescription,\r\n    DialogFooter,\r\n    DialogHeader,\r\n    DialogTitle,\r\n    DialogTrigger,\r\n  } from \"@/components/ui/dialog\"\r\n  import Input from \"@/components/ui/input/input.svelte\"\r\n  import Label from \"@/components/ui/label/label.svelte\"\r\n</script>\r\n\r\n<Dialog>\r\n  <DialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Custom Close Button</Button>\r\n    {/snippet}\r\n  </DialogTrigger>\r\n  <DialogContent class=\"sm:max-w-md\">\r\n    <DialogHeader>\r\n      <DialogTitle>Share link</DialogTitle>\r\n      <DialogDescription>Anyone who has this link will be able to view this.</DialogDescription>\r\n    </DialogHeader>\r\n    <div class=\"flex items-center gap-2\">\r\n      <div class=\"grid flex-1 gap-2\">\r\n        <Label for=\"link\" class=\"sr-only\">\r\n          Link\r\n        </Label>\r\n        <Input id=\"link\" value=\"https://ui.shadcn.com/docs/installation\" readonly />\r\n      </div>\r\n    </div>\r\n    <DialogFooter class=\"sm:justify-start\">\r\n      <DialogClose>\r\n        {#snippet asChild(props)}\r\n          <Button type=\"button\" {...props()}>Close</Button>\r\n        {/snippet}\r\n      </DialogClose>\r\n    </DialogFooter>\r\n  </DialogContent>\r\n</Dialog>",{"_877":878,"_68":1370},{"_877":878,"_68":1369},"<Dialog>\r\n  <DialogTrigger>Open</DialogTrigger>\r\n  <DialogContent>\r\n    <DialogHeader>\r\n      <DialogTitle>Are you absolutely sure?</DialogTitle>\r\n      <DialogDescription>\r\n        This action cannot be undone. This will permanently delete your account\r\n        and remove your data from our servers.\r\n      </DialogDescription>\r\n    </DialogHeader>\r\n  </DialogContent>\r\n</Dialog>","import {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogDescription,\r\n  DialogHeader,\r\n  DialogTitle,\r\n  DialogTrigger,\r\n} from \"@/components/ui/dialog\"","Collapsible","An interactive component which expands/collapses a panel.",[1387,1388],[1375,1376,1377,1378],{"_811":1229,"_19":1230,"_68":1386},{"_811":1383,"_19":1384,"_68":1385},{"_811":1380,"_19":1381,"_68":1382},{"_811":864,"_19":865,"_68":1379},"<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  Collapsible,\r\n  CollapsibleContent,\r\n  CollapsibleTrigger,\r\n} from \"@/components/ui/collapsible\"\r\nimport { ChevronsUpDown } from \"lucide-svelte\"\r\n\r\nlet isOpen = false\r\n</script>\r\n\r\n<Collapsible\r\n  open={isOpen}\r\n  onOpenChange={(details) => isOpen = details.open}\r\n  class=\"flex w-[350px] flex-col gap-2\"\r\n>\r\n  <div class=\"flex items-center justify-between gap-4 px-4\">\r\n    <h4 class=\"text-sm font-semibold\">Order #4189</h4>\r\n    <CollapsibleTrigger>\r\n      {#snippet asChild(props)}\r\n        <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" {...props()}>\r\n          <ChevronsUpDown />\r\n          <span class=\"sr-only\">Toggle details</span>\r\n        </Button>\r\n      {/snippet}\r\n    </CollapsibleTrigger>\r\n  </div>\r\n  <div class=\"flex items-center justify-between rounded-md border px-4 py-2 text-sm\">\r\n    <span class=\"text-muted-foreground\">Status</span>\r\n    <span class=\"font-medium\">Shipped</span>\r\n  </div>\r\n  <CollapsibleContent class=\"flex flex-col gap-2\">\r\n    <div class=\"rounded-md border px-4 py-2 text-sm\">\r\n      <p class=\"font-medium\">Shipping address</p>\r\n      <p class=\"text-muted-foreground\">100 Market St, San Francisco</p>\r\n    </div>\r\n    <div class=\"rounded-md border px-4 py-2 text-sm\">\r\n      <p class=\"font-medium\">Items</p>\r\n      <p class=\"text-muted-foreground\">2x Studio Headphones</p>\r\n    </div>\r\n  </CollapsibleContent>\r\n</Collapsible>","settings-panel","Settings Panel","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/card\"\r\nimport {\r\n  Collapsible,\r\n  CollapsibleContent,\r\n  CollapsibleTrigger,\r\n} from \"@/components/ui/collapsible\"\r\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Maximize, Minimize } from \"lucide-svelte\"\r\n\r\nlet isOpen = false\r\n</script>\r\n\r\n<Card class=\"mx-auto w-full max-w-xs\" size=\"sm\">\r\n  <CardHeader>\r\n    <CardTitle>Radius</CardTitle>\r\n    <CardDescription>Set the corner radius of the element.</CardDescription>\r\n  </CardHeader>\r\n  <CardContent>\r\n    <Collapsible\r\n      open={isOpen}\r\n      onOpenChange={(details) => isOpen = details.open}\r\n      class=\"flex items-start gap-2\"\r\n    >\r\n      <FieldGroup class=\"grid w-full grid-cols-2 gap-2\">\r\n        <Field>\r\n          <FieldLabel for=\"radius-x\" class=\"sr-only\">\r\n            Radius X\r\n          </FieldLabel>\r\n          <Input id=\"radius\" placeholder=\"0\" value=\"0\" />\r\n        </Field>\r\n        <Field>\r\n          <FieldLabel for=\"radius-y\" class=\"sr-only\">\r\n            Radius Y\r\n          </FieldLabel>\r\n          <Input id=\"radius\" placeholder=\"0\" value=\"0\" />\r\n        </Field>\r\n        <CollapsibleContent class=\"col-span-full grid grid-cols-subgrid gap-2\">\r\n          <Field>\r\n            <FieldLabel for=\"radius-x\" class=\"sr-only\">\r\n              Radius X\r\n            </FieldLabel>\r\n            <Input id=\"radius\" placeholder=\"0\" value=\"0\" />\r\n          </Field>\r\n          <Field>\r\n            <FieldLabel for=\"radius-y\" class=\"sr-only\">\r\n              Radius Y\r\n            </FieldLabel>\r\n            <Input id=\"radius\" placeholder=\"0\" value=\"0\" />\r\n          </Field>\r\n        </CollapsibleContent>\r\n      </FieldGroup>\r\n      <CollapsibleTrigger>\r\n        {#snippet asChild(props)}\r\n          <Button variant=\"outline\" size=\"icon\" {...props()}>\r\n            {#if isOpen}\r\n              <Minimize />\r\n            {:else}\r\n              <Maximize />\r\n            {/if}\r\n          </Button>\r\n        {/snippet}\r\n      </CollapsibleTrigger>\r\n    </Collapsible>\r\n  </CardContent>\r\n</Card>","file-tree","File Tree","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\r\nimport {\r\n  Collapsible,\r\n  CollapsibleContent,\r\n  CollapsibleTrigger,\r\n} from \"@/components/ui/collapsible\"\r\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\r\nimport { ChevronRight, File, Folder } from \"lucide-svelte\"\r\n\r\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\r\n\r\nconst fileTree: FileTreeItem[] = [\r\n  {\r\n    name: \"components\",\r\n    items: [\r\n      {\r\n        name: \"ui\",\r\n        items: [\r\n          { name: \"button.tsx\" },\r\n          { name: \"card.tsx\" },\r\n          { name: \"dialog.tsx\" },\r\n          { name: \"input.tsx\" },\r\n          { name: \"select.tsx\" },\r\n          { name: \"table.tsx\" },\r\n        ],\r\n      },\r\n      { name: \"login-form.tsx\" },\r\n      { name: \"register-form.tsx\" },\r\n    ],\r\n  },\r\n  {\r\n    name: \"lib\",\r\n    items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\r\n  },\r\n  {\r\n    name: \"hooks\",\r\n    items: [\r\n      { name: \"use-media-query.ts\" },\r\n      { name: \"use-debounce.ts\" },\r\n      { name: \"use-local-storage.ts\" },\r\n    ],\r\n  },\r\n  {\r\n    name: \"types\",\r\n    items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\r\n  },\r\n  {\r\n    name: \"public\",\r\n    items: [\r\n      { name: \"favicon.ico\" },\r\n      { name: \"logo.svg\" },\r\n      { name: \"images\" },\r\n    ],\r\n  },\r\n  { name: \"app.tsx\" },\r\n  { name: \"layout.tsx\" },\r\n  { name: \"globals.css\" },\r\n  { name: \"package.json\" },\r\n  { name: \"tsconfig.json\" },\r\n  { name: \"README.md\" },\r\n  { name: \".gitignore\" },\r\n]\r\n\r\nfunction renderItem(fileItem: FileTreeItem, key: string) {\r\n  if (\"items\" in fileItem) {\r\n    return {\r\n      isFolder: true,\r\n      name: fileItem.name,\r\n      items: fileItem.items,\r\n      key\r\n    }\r\n  }\r\n  return {\r\n    isFolder: false,\r\n    name: fileItem.name,\r\n    key\r\n  }\r\n}\r\n</script>\r\n\r\n<Card class=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\r\n  <CardHeader>\r\n    <Tabs value=\"explorer\">\r\n      <TabsList class=\"w-full\">\r\n        <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\r\n        <TabsTrigger value=\"settings\">Outline</TabsTrigger>\r\n      </TabsList>\r\n    </Tabs>\r\n  </CardHeader>\r\n  <CardContent>\r\n    <div class=\"flex flex-col gap-1\">\r\n      {#each fileTree as item, i (i)}\r\n        {@const renderedItem = renderItem(item, i.toString())}\r\n        {#if renderedItem.isFolder}\r\n          <Collapsible>\r\n            <CollapsibleTrigger>\r\n              {#snippet asChild(props)}\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"sm\"\r\n                  class=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\r\n                  {...props()}\r\n                >\r\n                  <ChevronRight class=\"transition-transform group-data-[state=open]:rotate-90\" />\r\n                  <Folder />\r\n                  {renderedItem.name}\r\n                </Button>\r\n              {/snippet}\r\n            </CollapsibleTrigger>\r\n            <CollapsibleContent class=\"style-lyra:ml-4 mt-1 ml-5\">\r\n              <div class=\"flex flex-col gap-1\">\r\n                {#each renderedItem.items as child, j (j)}\r\n                  {@const childItem = renderItem(child, `${i}-${j}`)}\r\n                  {#if childItem.isFolder}\r\n                    <Collapsible>\r\n                      <CollapsibleTrigger>\r\n                        {#snippet asChild(props)}\r\n                          <Button\r\n                            variant=\"ghost\"\r\n                            size=\"sm\"\r\n                            class=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\r\n                            {...props()}\r\n                          >\r\n                            <ChevronRight class=\"transition-transform group-data-[state=open]:rotate-90\" />\r\n                            <Folder />\r\n                            {childItem.name}\r\n                          </Button>\r\n                        {/snippet}\r\n                      </CollapsibleTrigger>\r\n                      <CollapsibleContent class=\"style-lyra:ml-4 mt-1 ml-5\">\r\n                        <div class=\"flex flex-col gap-1\">\r\n                          {#each childItem.items as grandchild, k (k)}\r\n                            <Button\r\n                              variant=\"link\"\r\n                              size=\"sm\"\r\n                              class=\"text-foreground w-full justify-start gap-2\"\r\n                            >\r\n                              <File />\r\n                              <span>{grandchild.name}</span>\r\n                            </Button>\r\n                          {/each}\r\n                        </div>\r\n                      </CollapsibleContent>\r\n                    </Collapsible>\r\n                  {:else}\r\n                    <Button\r\n                      variant=\"link\"\r\n                      size=\"sm\"\r\n                      class=\"text-foreground w-full justify-start gap-2\"\r\n                    >\r\n                      <File />\r\n                      <span>{childItem.name}</span>\r\n                    </Button>\r\n                  {/if}\r\n                {/each}\r\n              </div>\r\n            </CollapsibleContent>\r\n          </Collapsible>\r\n        {:else}\r\n          <Button\r\n            variant=\"link\"\r\n            size=\"sm\"\r\n            class=\"text-foreground w-full justify-start gap-2\"\r\n          >\r\n            <File />\r\n            <span>{renderedItem.name}</span>\r\n          </Button>\r\n        {/if}\r\n      {/each}\r\n    </div>\r\n  </CardContent>\r\n</Card>","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport {\r\n  Collapsible,\r\n  CollapsibleContent,\r\n  CollapsibleTrigger,\r\n} from \"@/components/ui/collapsible\"\r\nimport { ChevronDown } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Card class=\"mx-auto w-full max-w-sm\">\r\n  <CardContent>\r\n    <Collapsible class=\"data-[state=open]:bg-muted rounded-md\">\r\n      <CollapsibleTrigger>\r\n        {#snippet asChild(props)}\r\n          <Button variant=\"ghost\" class=\"group w-full\" {...props()}>\r\n            Product details\r\n            <ChevronDown class=\"ml-auto group-data-[state=open]:rotate-180\" />\r\n          </Button>\r\n        {/snippet}\r\n      </CollapsibleTrigger>\r\n      <CollapsibleContent class=\"flex flex-col items-start gap-2 p-2.5 pt-0 text-sm\">\r\n        <div>\r\n          This panel can be expanded or collapsed to reveal additional\r\n          content.\r\n        </div>\r\n        <Button size=\"xs\">Learn More</Button>\r\n      </CollapsibleContent>\r\n    </Collapsible>\r\n  </CardContent>\r\n</Card>",{"_877":878,"_68":1390},{"_877":878,"_68":1389},"<Collapsible>\r\n  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>\r\n  <CollapsibleContent>\r\n    Yes. Free to use for personal and commercial projects. No attribution\r\n    required.\r\n  </CollapsibleContent>\r\n</Collapsible>","import {\r\n  Collapsible,\r\n  CollapsibleTrigger,\r\n  CollapsibleContent\r\n} from \"@/components/ui/collapsible\"",[1407,1408],[1393,1394,1395,1396,1397],{"_811":1229,"_19":1230,"_849":1405,"_68":1406},{"_811":849,"_19":974,"_849":1403,"_68":1404},{"_811":898,"_19":899,"_849":1401,"_68":1402},{"_811":1091,"_19":1092,"_849":1399,"_68":1400},{"_811":864,"_19":865,"_68":1398},"<script module lang=\"ts\">\r\n  import { Checkbox } from \"@/components/ui/checkbox\";\r\n  import {\r\n    Field,\r\n    FieldContent,\r\n    FieldDescription,\r\n    FieldGroup,\r\n    FieldLabel,\r\n    FieldTitle,\r\n  } from \"@/components/ui/field\";\r\n</script>\r\n\r\n<FieldGroup class=\"max-w-sm\">\r\n  <Field orientation=\"horizontal\">\r\n    <Checkbox id=\"terms-checkbox\" name=\"terms-checkbox\">\r\n      Accept terms and conditions\r\n    </Checkbox>\r\n  </Field>\r\n  <Field orientation=\"horizontal\">\r\n    <Checkbox id=\"terms-checkbox-2\" name=\"terms-checkbox-2\" defaultChecked>\r\n      <FieldContent>\r\n        <FieldTitle>Accept terms and conditions</FieldTitle>\r\n        <FieldDescription>By clicking this checkbox, you agree to the terms.</FieldDescription>\r\n      </FieldContent>\r\n    </Checkbox>\r\n  </Field>\r\n  <Field orientation=\"horizontal\" disabled>\r\n    <Checkbox id=\"toggle-checkbox\" name=\"toggle-checkbox\">\r\n      Enable notifications\r\n    </Checkbox>\r\n  </Field>\r\n  <FieldLabel>\r\n    <Field orientation=\"horizontal\">\r\n      <Checkbox id=\"toggle-checkbox-2\" name=\"toggle-checkbox-2\">\r\n        <FieldContent>\r\n          <FieldTitle>Enable notifications</FieldTitle>\r\n          <FieldDescription>\r\n            You can enable or disable notifications at any time.\r\n          </FieldDescription>\r\n        </FieldContent>\r\n      </Checkbox>\r\n    </Field>\r\n  </FieldLabel>\r\n</FieldGroup>\r\n","Use multiple fields to create a checkbox list.","<script module lang=\"ts\">\r\n  import { Checkbox, CheckboxGroup } from \"@/components/ui/checkbox\";\r\n  import { Field, FieldDescription, FieldGroup, FieldLegend, FieldSet } from \"@/components/ui/field\";\r\n</script>\r\n\r\n<FieldSet>\r\n  <FieldLegend variant=\"label\">Show these items on the desktop:</FieldLegend>\r\n  <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>\r\n  <CheckboxGroup defaultValue={[\"hard-disks\", \"external-disks\"]} name=\"finder-pref\">\r\n    <FieldGroup class=\"gap-3\">\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox value=\"hard-disks\" id=\"finder-pref-hard-disks\">\r\n          Hard disks\r\n        </Checkbox>\r\n      </Field>\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox value=\"external-disks\" id=\"finder-pref-external-disks\">\r\n          External disks\r\n        </Checkbox>\r\n      </Field>\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox value=\"cds-dvds\" id=\"finder-pref-cds-dvds\">\r\n          CDs, DVDs, and iPods\r\n        </Checkbox>\r\n      </Field>\r\n      <Field orientation=\"horizontal\">\r\n        <Checkbox value=\"connected-servers\" id=\"finder-pref-connected-servers\">\r\n          Connected servers\r\n        </Checkbox>\r\n      </Field>\r\n    </FieldGroup>\r\n  </CheckboxGroup>\r\n</FieldSet>\r\n","Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.","<script module lang=\"ts\">\r\n  import { Checkbox } from \"@/components/ui/checkbox\";\r\n  import { Field, FieldGroup } from \"@/components/ui/field\";\r\n</script>\r\n\r\n<FieldGroup class=\"mx-auto w-56\">\r\n  <Field orientation=\"horizontal\" data-disabled>\r\n    <Checkbox id=\"toggle-checkbox-disabled\" name=\"toggle-checkbox-disabled\">\r\n      Enable notifications\r\n    </Checkbox>\r\n  </Field>\r\n</FieldGroup>\r\n","Use FieldContent and FieldDescription for helper text.","<script module lang=\"ts\">\r\n  import { Checkbox } from \"@/components/ui/checkbox\";\r\n  import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel } from \"@/components/ui/field\";\r\n</script>\r\n\r\n<FieldGroup class=\"mx-auto w-72\">\r\n  <Field orientation=\"horizontal\">\r\n    <Checkbox id=\"terms-checkbox-desc\" name=\"terms-checkbox-desc\" defaultChecked />\r\n    <FieldContent>\r\n      <FieldLabel for=\"terms-checkbox-desc\">Accept terms and conditions</FieldLabel>\r\n      <FieldDescription>\r\n        By clicking this checkbox, you agree to the terms and conditions.\r\n      </FieldDescription>\r\n    </FieldContent>\r\n  </Field>\r\n</FieldGroup>","Pair the checkbox with Field and FieldLabel for proper layout and labeling.","<script module lang=\"ts\">\r\n  import { Checkbox } from \"@/components/ui/checkbox\";\r\n  import { Field, FieldGroup } from \"@/components/ui/field\";\r\n</script>\r\n\r\n<FieldGroup class=\"mx-auto w-56\">\r\n  <Field orientation=\"horizontal\">\r\n    <Checkbox id=\"terms-checkbox-basic\" name=\"terms-checkbox-basic\">\r\n      Accept terms and conditions\r\n    </Checkbox>\r\n  </Field>\r\n</FieldGroup>\r\n",{"_877":878,"_68":1410},{"_877":878,"_68":1409},"<Checkbox />","import { Checkbox } from \"@/components/ui/checkbox\"","Carousel","A carousel with motion.",[1430,1431],[1415,1416,1417,1418],{"_811":1426,"_19":1427,"_849":1428,"_68":1429},{"_811":864,"_19":865,"_68":1425},{"_811":965,"_19":966,"_849":1423,"_68":1424},{"_811":1419,"_19":1420,"_849":1421,"_68":1422},"spacing","Spacing","Use the spacing prop to set the gap between items.","<script lang=\"ts\">\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport {\r\n  Carousel,\r\n  CarouselContent,\r\n  CarouselControl,\r\n  CarouselItem,\r\n  CarouselNext,\r\n  CarouselPrevious,\r\n} from \"@/components/ui/carousel\"\r\n\r\nconst SLIDE_COUNT = 5\r\n</script>\r\n\r\n<Carousel\r\n  slideCount={SLIDE_COUNT}\r\n  spacing=\"16px\"\r\n  slidesPerPage={2}\r\n  class=\"w-full max-w-sm\"\r\n>\r\n  <CarouselControl>\r\n    <CarouselPrevious />\r\n    <CarouselContent>\r\n      {#each Array.from({ length: SLIDE_COUNT }) as _, index (index)}\r\n        <CarouselItem {index}>\r\n          <div class=\"p-1\">\r\n            <Card>\r\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\r\n                <span class=\"text-2xl font-semibold\">{index + 1}</span>\r\n              </CardContent>\r\n            </Card>\r\n          </div>\r\n        </CarouselItem>\r\n      {/each}\r\n    </CarouselContent>\r\n    <CarouselNext />\r\n  </CarouselControl>\r\n</Carousel>\r\n","To set the size of the items, you can use the basis utility class on the <CarouselItem />.","<script lang=\"ts\">\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport {\r\n  Carousel,\r\n  CarouselContent,\r\n  CarouselItem,\r\n  CarouselNext,\r\n  CarouselPrevious,\r\n} from \"@/components/ui/carousel\"\r\n\r\nconst SLIDE_COUNT = 5\r\nconst SLIDES_PER_PAGE = 3\r\n</script>\r\n\r\n<Carousel\r\n  slideCount={SLIDE_COUNT}\r\n  slidesPerPage={SLIDES_PER_PAGE}\r\n  class=\"w-full max-w-sm\"\r\n>\r\n  <CarouselContent>\r\n    {#each Array.from({ length: SLIDE_COUNT }) as _, index (index)}\r\n      <CarouselItem {index}>\r\n        <div class=\"p-1\">\r\n          <Card>\r\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\r\n              <span class=\"text-3xl font-semibold\">{index + 1}</span>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n      </CarouselItem>\r\n    {/each}\r\n  </CarouselContent>\r\n  <CarouselPrevious class=\"absolute top-1/2 -left-12 -translate-y-1/2\" />\r\n  <CarouselNext class=\"absolute top-1/2 -right-12 -translate-y-1/2\" />\r\n</Carousel>\r\n","<script lang=\"ts\">\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport {\r\n  Carousel,\r\n  CarouselContent,\r\n  CarouselItem,\r\n  CarouselNext,\r\n  CarouselPrevious,\r\n} from \"@/components/ui/carousel\"\r\n\r\nconst SLIDE_COUNT = 5\r\n</script>\r\n\r\n<Carousel slideCount={SLIDE_COUNT} class=\"w-full max-w-48 sm:max-w-xs\">\r\n  <CarouselContent>\r\n    {#each Array.from({ length: SLIDE_COUNT }) as _, index (index)}\r\n      <CarouselItem {index}>\r\n        <div class=\"p-1\">\r\n          <Card>\r\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\r\n              <span class=\"text-4xl font-semibold\">{index + 1}</span>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n      </CarouselItem>\r\n    {/each}\r\n  </CarouselContent>\r\n  <CarouselPrevious class=\"absolute top-1/2 -left-12 -translate-y-1/2\" />\r\n  <CarouselNext class=\"absolute top-1/2 -right-12 -translate-y-1/2\" />\r\n</Carousel>\r\n","orientation","Orientation","Use the orientation prop to set the orientation of the carousel.","<script lang=\"ts\">\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport {\r\n  Carousel,\r\n  CarouselContent,\r\n  CarouselItem,\r\n  CarouselNext,\r\n  CarouselPrevious,\r\n} from \"@/components/ui/carousel\"\r\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-svelte\"\r\n\r\nconst SLIDE_COUNT = 5\r\nconst SLIDES_PER_PAGE = 2\r\n</script>\r\n\r\n<Carousel\r\n  slideCount={SLIDE_COUNT}\r\n  slidesPerPage={SLIDES_PER_PAGE}\r\n  orientation=\"vertical\"\r\n  spacing=\"12px\"\r\n  class=\"w-full max-w-xs\"\r\n>\r\n  <CarouselContent class=\"h-80\">\r\n    {#each Array.from({ length: SLIDE_COUNT }) as _, index (index)}\r\n      <CarouselItem {index}>\r\n        <p class=\"p-1\">\r\n          <Card class=\"flex min-h-full items-center justify-center\">\r\n            <CardContent class=\"flex items-center justify-center p-6\">\r\n              <span class=\"text-3xl font-semibold\">{index + 1}</span>\r\n            </CardContent>\r\n          </Card>\r\n        </p>\r\n      </CarouselItem>\r\n    {/each}\r\n  </CarouselContent>\r\n  <CarouselPrevious class=\"absolute -top-12 left-1/2 -translate-x-1/2\">\r\n    <ChevronUpIcon class=\"size-4\" />\r\n  </CarouselPrevious>\r\n  <CarouselNext class=\"absolute -bottom-12 left-1/2 -translate-x-1/2\">\r\n    <ChevronDownIcon class=\"size-4\" />\r\n  </CarouselNext>\r\n</Carousel>\r\n",{"_877":878,"_68":1433},{"_877":878,"_68":1432},"<Carousel>\r\n  <CarouselContent>\r\n    <CarouselItem>...</CarouselItem>\r\n    <CarouselItem>...</CarouselItem>\r\n    <CarouselItem>...</CarouselItem>\r\n  </CarouselContent>\r\n  <CarouselPrevious />\r\n  <CarouselNext />\r\n</Carousel>","import {\r\n  Carousel,\r\n  CarouselContent,\r\n  CarouselItem,\r\n  CarouselNext,\r\n  CarouselPrevious,\r\n} from \"@/components/ui/carousel\"","Card","Displays a card with header, content, and footer.",[1448,1449],[1438,1439,1440],{"_811":1117,"_19":1118,"_849":1446,"_68":1447},{"_811":864,"_19":865,"_68":1445},{"_811":1441,"_19":1442,"_849":1443,"_68":1444},"size","Size","Use the size=\"sm\" prop to set the size of the card to small. The small size variant uses smaller spacing.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/card\"\r\n</script>\r\n\r\n<Card size=\"sm\" class=\"mx-auto w-full max-w-sm\">\r\n  <CardHeader>\r\n    <CardTitle>Small Card</CardTitle>\r\n    <CardDescription>\r\n      This card uses the small size variant.\r\n    </CardDescription>\r\n  </CardHeader>\r\n  <CardContent>\r\n    <p>\r\n      The card component supports a size prop that can be set to\r\n      \"sm\" for a more compact appearance.\r\n    </p>\r\n  </CardContent>\r\n  <CardFooter>\r\n    <Button variant=\"outline\" size=\"sm\" class=\"w-full\">\r\n      Action\r\n    </Button>\r\n  </CardFooter>\r\n</Card>","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  Card,\r\n  CardAction,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/card\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\n</script>\r\n\r\n<Card class=\"w-full max-w-sm\">\r\n  <CardHeader>\r\n    <CardTitle>Login to your account</CardTitle>\r\n    <CardDescription>\r\n      Enter your email below to login to your account\r\n    </CardDescription>\r\n    <CardAction>\r\n      <Button variant=\"link\">Sign Up</Button>\r\n    </CardAction>\r\n  </CardHeader>\r\n  <CardContent>\r\n    <form>\r\n      <div class=\"flex flex-col gap-6\">\r\n        <div class=\"grid gap-2\">\r\n          <Label for=\"email\">Email</Label>\r\n          <Input\r\n            id=\"email\"\r\n            type=\"email\"\r\n            placeholder=\"m@example.com\"\r\n            required\r\n          />\r\n        </div>\r\n        <div class=\"grid gap-2\">\r\n          <div class=\"flex items-center\">\r\n            <Label for=\"password\">Password</Label>\r\n            <a\r\n              href=\"#\"\r\n              class=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\r\n            >\r\n              Forgot your password?\r\n            </a>\r\n          </div>\r\n          <Input id=\"password\" type=\"password\" required />\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </CardContent>\r\n  <CardFooter class=\"flex-col gap-2\">\r\n    <Button type=\"submit\" class=\"w-full\">\r\n      Login\r\n    </Button>\r\n    <Button variant=\"outline\" class=\"w-full\">\r\n      Login with Google\r\n    </Button>\r\n  </CardFooter>\r\n</Card>","Add an image before the card header to create a card with an image.","<script lang=\"ts\">\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  Card,\r\n  CardAction,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/card\"\r\n</script>\r\n\r\n<Card class=\"relative mx-auto w-full max-w-sm pt-0\">\r\n  <div class=\"absolute inset-0 z-30 aspect-video bg-black/35\"></div>\r\n  <img\r\n    src=\"https://placehold.co/400x400/d3d3d3/d3d3d3\"\r\n    alt=\"Event cover\"\r\n    class=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40\"\r\n  />\r\n  <CardHeader>\r\n    <CardAction>\r\n      <Badge variant=\"secondary\">Featured</Badge>\r\n    </CardAction>\r\n    <CardTitle>Design systems meetup</CardTitle>\r\n    <CardDescription>\r\n      A practical talk on component APIs, accessibility, and shipping\r\n      faster.\r\n    </CardDescription>\r\n  </CardHeader>\r\n  <CardFooter>\r\n    <Button class=\"w-full\">View Event</Button>\r\n  </CardFooter>\r\n</Card>",{"_877":878,"_68":1451},{"_877":878,"_68":1450},"<Card>\r\n  <CardHeader>\r\n    <CardTitle>Card Title</CardTitle>\r\n    <CardDescription>Card Description</CardDescription>\r\n    <CardAction>Card Action</CardAction>\r\n  </CardHeader>\r\n  <CardContent>\r\n    <p>Card Content</p>\r\n  </CardContent>\r\n  <CardFooter>\r\n    <p>Card Footer</p>\r\n  </CardFooter>\r\n</Card>","import {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent\r\n} from \"@/components/ui/card\"","Calendar","A calendar component that allows users to select a date or a range of dates.",[1480,1481],[1456,1457,1458,1459,1460,1461,1462],{"_811":1229,"_19":1230,"_68":1479},{"_811":1476,"_19":1477,"_68":1478},{"_811":1473,"_19":1474,"_68":1475},{"_811":1470,"_19":1471,"_68":1472},{"_811":1467,"_19":1468,"_68":1469},{"_811":864,"_19":865,"_68":1466},{"_811":1463,"_19":1464,"_68":1465},"views","Views","<script>\r\n  import {\r\n    Calendar,\r\n    CalendarDayView,\r\n    CalendarMonthView,\r\n    CalendarViewHeader,\r\n    CalendarYearView,\r\n  } from \"@/components/ui/calendar\"\r\n</script>\r\n\r\n<Calendar selectionMode=\"single\" class=\"rounded-lg border\">\r\n  <CalendarDayView>\r\n    {#snippet header()}\r\n      <CalendarViewHeader />\r\n    {/snippet}\r\n  </CalendarDayView>\r\n  <CalendarMonthView>\r\n    {#snippet header()}\r\n      <CalendarViewHeader />\r\n    {/snippet}\r\n  </CalendarMonthView>\r\n  <CalendarYearView>\r\n    {#snippet header()}\r\n      <CalendarViewHeader />\r\n    {/snippet}\r\n  </CalendarYearView>\r\n</Calendar>","<script module lang=\"ts\">\r\n  import { Calendar } from \"@/components/ui/calendar\"\r\n  import { CalendarDate, type DateValue } from \"@internationalized/date\"\r\n  import { type DatePickerValueChangeDetails } from \"@sprawlify/svelte/date-picker\"\r\n\r\n  let value = $state<DateValue[]>([new CalendarDate(2026, 3, 21)])\r\n\r\n  function handleValueChange(details: DatePickerValueChangeDetails) {\r\n    value = details.value\r\n  }\r\n</script>\r\n\r\n<Calendar\r\n  selectionMode=\"single\"\r\n  {value}\r\n  onValueChange={handleValueChange}\r\n  class=\"rounded-lg border\"\r\n/>","range-calendar","Range Calendar","<script module lang=\"ts\">\r\n  import { Calendar } from \"@/components/ui/calendar\"\r\n  import { Card, CardContent } from \"@/components/ui/card\"\r\n  import { CalendarDate, type DateValue } from \"@internationalized/date\"\r\n  import { type DatePickerValueChangeDetails } from \"@sprawlify/svelte/date-picker\"\r\n\r\n  let value = $state<DateValue[]>([\r\n    new CalendarDate(2026, 1, 12),\r\n    new CalendarDate(2026, 2, 11),\r\n  ])\r\n\r\n  function handleValueChange(details: DatePickerValueChangeDetails) {\r\n    value = details.value\r\n  }\r\n</script>\r\n\r\n<Card class=\"mx-auto w-fit max-w-xl p-0\">\r\n  <CardContent class=\"p-0\">\r\n    <Calendar\r\n      selectionMode=\"range\"\r\n      defaultFocusedValue={new CalendarDate(2026, 1, 12)}\r\n      {value}\r\n      onValueChange={handleValueChange}\r\n      numOfMonths={2}\r\n    />\r\n  </CardContent>\r\n</Card>","presets","Presets","<script module lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n  import {\r\n    Calendar,\r\n    CalendarDayView,\r\n    CalendarPresetTrigger,\r\n  } from \"@/components/ui/calendar\"\r\n  import { Card, CardContent, CardFooter } from \"@/components/ui/card\"\r\n  import { CalendarDate } from \"@internationalized/date\"\r\n\r\n  function daysFromNow(days: number) {\r\n    const d = new Date()\r\n    d.setDate(d.getDate() + days)\r\n    return [new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())]\r\n  }\r\n\r\n  const presets = [\r\n    { label: \"Today\", value: daysFromNow(0) },\r\n    { label: \"Tomorrow\", value: daysFromNow(1) },\r\n    { label: \"In 3 days\", value: daysFromNow(3) },\r\n    { label: \"In a week\", value: daysFromNow(7) },\r\n    { label: \"In 2 weeks\", value: daysFromNow(14) },\r\n  ]\r\n</script>\r\n\r\n<Calendar class=\"bg-transparent\" fixedWeeks>\r\n  <Card class=\"mx-auto w-fit max-w-[260px]\" size=\"sm\">\r\n    <CardContent>\r\n      <CalendarDayView />\r\n    </CardContent>\r\n    <CardFooter class=\"flex flex-wrap gap-2 border-t\">\r\n      {#each presets as preset (preset.label)}\r\n        <CalendarPresetTrigger value={preset.value}>\r\n          {#snippet asChild(props)}\r\n            <Button {...props} variant=\"outline\" size=\"sm\" class=\"flex-1\">\r\n              {preset.label}\r\n            </Button>\r\n          {/snippet}\r\n        </CalendarPresetTrigger>\r\n      {/each}\r\n    </CardFooter>\r\n  </Card>\r\n</Calendar>","date-and-time-picker","Date And Time Picker","<script module lang=\"ts\">\r\n  import { Calendar } from \"@/components/ui/calendar\"\r\n  import { Card, CardContent, CardFooter } from \"@/components/ui/card\"\r\n  import { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\"\r\n  import { \r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupInput,\r\n  } from \"@/components/ui/input-group\"\r\n  import { Clock2 } from \"lucide-svelte\"\r\n  import { CalendarDate, type DateValue } from \"@internationalized/date\"\r\n  import { type DatePickerValueChangeDetails } from \"@sprawlify/svelte/date-picker\"\r\n\r\n  const now = new Date()\r\n  let value = $state<DateValue[]>([\r\n    new CalendarDate(now.getFullYear(), now.getMonth() + 1, 12),\r\n  ])\r\n\r\n  function handleValueChange(details: DatePickerValueChangeDetails) {\r\n    value = details.value\r\n  }\r\n</script>\r\n\r\n<Card size=\"sm\" class=\"mx-auto w-fit\">\r\n  <CardContent>\r\n    <Calendar\r\n      selectionMode=\"single\"\r\n      {value}\r\n      onValueChange={handleValueChange}\r\n      class=\"p-0\"\r\n    />\r\n  </CardContent>\r\n  <CardFooter class=\"border-t bg-card\">\r\n    <FieldGroup>\r\n      <Field>\r\n        <FieldLabel for=\"time-from\">Start Time</FieldLabel>\r\n        <InputGroup>\r\n          <InputGroupInput\r\n            id=\"time-from\"\r\n            type=\"time\"\r\n            step=\"1\"\r\n            value=\"10:30:00\"\r\n            class=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\r\n          />\r\n          <InputGroupAddon>\r\n            <Clock2 class=\"text-muted-foreground\" />\r\n          </InputGroupAddon>\r\n        </InputGroup>\r\n      </Field>\r\n      <Field>\r\n        <FieldLabel for=\"time-to\">End Time</FieldLabel>\r\n        <InputGroup>\r\n          <InputGroupInput\r\n            id=\"time-to\"\r\n            type=\"time\"\r\n            step=\"1\"\r\n            value=\"12:30:00\"\r\n            class=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\r\n          />\r\n          <InputGroupAddon>\r\n            <Clock2 class=\"text-muted-foreground\" />\r\n          </InputGroupAddon>\r\n        </InputGroup>\r\n      </Field>\r\n    </FieldGroup>\r\n  </CardFooter>\r\n</Card>","calendar-booked-dates","Calendar Booked Dates","<script module lang=\"ts\">\r\n  import { Calendar } from \"@/components/ui/calendar\"\r\n  import { Card, CardContent } from \"@/components/ui/card\"\r\n  import { CalendarDate, type DateValue } from \"@internationalized/date\"\r\n  import { type DatePickerValueChangeDetails } from \"@sprawlify/svelte/date-picker\"\r\n\r\n  let value = $state<DateValue[]>([new CalendarDate(2026, 2, 3)])\r\n\r\n  const bookedStart = new CalendarDate(2026, 2, 12)\r\n  const bookedEnd = new CalendarDate(2026, 2, 26)\r\n\r\n  function handleValueChange(details: DatePickerValueChangeDetails) {\r\n    value = details.value\r\n  }\r\n\r\n  function isDateUnavailable(date: DateValue) {\r\n    return date.compare(bookedStart) >= 0 && date.compare(bookedEnd) <= 0\r\n  }\r\n</script>\r\n\r\n<Card class=\"mx-auto w-fit p-0\">\r\n  <CardContent class=\"p-0\">\r\n    <Calendar\r\n      selectionMode=\"single\"\r\n      defaultFocusedValue={new CalendarDate(2026, 2, 3)}\r\n      {value}\r\n      onValueChange={handleValueChange}\r\n      {isDateUnavailable}\r\n    />\r\n  </CardContent>\r\n</Card>","<script module lang=\"ts\">\r\n  import { Calendar } from \"@/components/ui/calendar\"\r\n</script>\r\n\r\n<Calendar selectionMode=\"single\" class=\"rounded-lg border\" />",{"_877":878,"_68":1483},{"_877":878,"_68":1482},"<script module lang=\"ts\">\r\n  let date = $state([new CalendarDate(2026, 3, 21)])\r\n\r\n  function handleValueChange(details) {\r\n    date = details.value\r\n  }\r\n</script>\r\n\r\n<Calendar\r\n  selectionMode=\"single\"\r\n  value={date}\r\n  onValueChange={handleValueChange}\r\n  class=\"rounded-lg border\"\r\n/>","import { Calendar } from \"@/components/ui/calendar\"","A container that groups related buttons together with consistent styling.",[1503,1504],[1487,1488,1489,1490,1491],{"_811":1426,"_19":1427,"_849":1501,"_68":1502},{"_811":172,"_19":984,"_849":1499,"_68":1500},{"_811":864,"_19":865,"_68":1498},{"_811":1441,"_19":1442,"_849":1496,"_68":1497},{"_811":1492,"_19":1493,"_849":1494,"_68":1495},"split","Split","Create a split button group by adding two buttons separated by a ButtonGroupSeparator.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  ButtonGroup,\r\n  ButtonGroupSeparator,\r\n} from \"@/components/ui/button-group\"\r\nimport { PlusIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<ButtonGroup>\r\n  <Button variant=\"secondary\">Button</Button>\r\n  <ButtonGroupSeparator />\r\n  <Button size=\"icon\" variant=\"secondary\">\r\n    <PlusIcon />\r\n  </Button>\r\n</ButtonGroup>","Control the size of buttons using the size prop on individual buttons.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ButtonGroup } from \"@/components/ui/button-group\"\r\nimport { PlusIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<div class=\"flex flex-col items-start gap-8\">\r\n  <ButtonGroup>\r\n    <Button variant=\"outline\" size=\"sm\">\r\n      Small\r\n    </Button>\r\n    <Button variant=\"outline\" size=\"sm\">\r\n      Button\r\n    </Button>\r\n    <Button variant=\"outline\" size=\"sm\">\r\n      Group\r\n    </Button>\r\n    <Button variant=\"outline\" size=\"icon-sm\">\r\n      <PlusIcon />\r\n    </Button>\r\n  </ButtonGroup>\r\n  <ButtonGroup>\r\n    <Button variant=\"outline\">Default</Button>\r\n    <Button variant=\"outline\">Button</Button>\r\n    <Button variant=\"outline\">Group</Button>\r\n    <Button variant=\"outline\" size=\"icon\">\r\n      <PlusIcon />\r\n    </Button>\r\n  </ButtonGroup>\r\n  <ButtonGroup>\r\n    <Button variant=\"outline\" size=\"lg\">\r\n      Large\r\n    </Button>\r\n    <Button variant=\"outline\" size=\"lg\">\r\n      Button\r\n    </Button>\r\n    <Button variant=\"outline\" size=\"lg\">\r\n      Group\r\n    </Button>\r\n    <Button variant=\"outline\" size=\"icon-lg\">\r\n      <PlusIcon />\r\n    </Button>\r\n  </ButtonGroup>\r\n</div>","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ButtonGroup } from \"@/components/ui/button-group\"\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuContent,\r\n  DropdownMenuGroup,\r\n  DropdownMenuItem,\r\n  DropdownMenuRadioGroup,\r\n  DropdownMenuRadioItem,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuSub,\r\n  DropdownMenuSubContent,\r\n  DropdownMenuSubTrigger,\r\n  DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport {\r\n  ArchiveIcon,\r\n  ArrowLeftIcon,\r\n  CalendarPlusIcon,\r\n  ClockIcon,\r\n  ListFilterIcon,\r\n  MailCheckIcon,\r\n  MoreHorizontalIcon,\r\n  TagIcon,\r\n  Trash2Icon,\r\n} from \"lucide-svelte\"\r\n\r\nlet label = \"personal\"\r\n</script>\r\n\r\n<ButtonGroup>\r\n  <ButtonGroup class=\"hidden sm:flex\">\r\n    <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\r\n      <ArrowLeftIcon />\r\n    </Button>\r\n  </ButtonGroup>\r\n  <ButtonGroup>\r\n    <Button variant=\"outline\">Archive</Button>\r\n    <Button variant=\"outline\">Report</Button>\r\n  </ButtonGroup>\r\n  <ButtonGroup>\r\n    <Button variant=\"outline\">Snooze</Button>\r\n    <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\r\n      <DropdownMenuTrigger>\r\n        {#snippet asChild(props)}\r\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" {...props()}>\r\n            <MoreHorizontalIcon />\r\n          </Button>\r\n        {/snippet}\r\n      </DropdownMenuTrigger>\r\n      <DropdownMenuContent class=\"w-40\">\r\n        <DropdownMenuGroup>\r\n          <DropdownMenuItem value=\"mark-as-read\">\r\n            <MailCheckIcon />\r\n            Mark as Read\r\n          </DropdownMenuItem>\r\n          <DropdownMenuItem value=\"archive\">\r\n            <ArchiveIcon />\r\n            Archive\r\n          </DropdownMenuItem>\r\n        </DropdownMenuGroup>\r\n        <DropdownMenuSeparator />\r\n        <DropdownMenuGroup>\r\n          <DropdownMenuItem value=\"snooze\">\r\n            <ClockIcon />\r\n            Snooze\r\n          </DropdownMenuItem>\r\n          <DropdownMenuItem value=\"add-to-calendar\">\r\n            <CalendarPlusIcon />\r\n            Add to Calendar\r\n          </DropdownMenuItem>\r\n          <DropdownMenuItem value=\"add-to-list\">\r\n            <ListFilterIcon />\r\n            Add to List\r\n          </DropdownMenuItem>\r\n          <DropdownMenuSub>\r\n            <DropdownMenuSubTrigger>\r\n              <TagIcon />\r\n              Label As...\r\n            </DropdownMenuSubTrigger>\r\n            <DropdownMenuSubContent>\r\n              <DropdownMenuRadioGroup value={label} onValueChange={(details) => (label = details.value)}>\r\n                <DropdownMenuRadioItem value=\"personal\">\r\n                  Personal\r\n                </DropdownMenuRadioItem>\r\n                <DropdownMenuRadioItem value=\"work\">\r\n                  Work\r\n                </DropdownMenuRadioItem>\r\n                <DropdownMenuRadioItem value=\"other\">\r\n                  Other\r\n                </DropdownMenuRadioItem>\r\n              </DropdownMenuRadioGroup>\r\n            </DropdownMenuSubContent>\r\n          </DropdownMenuSub>\r\n        </DropdownMenuGroup>\r\n        <DropdownMenuSeparator />\r\n        <DropdownMenuGroup>\r\n          <DropdownMenuItem variant=\"destructive\" value=\"delete\">\r\n            <Trash2Icon />\r\n            Trash\r\n          </DropdownMenuItem>\r\n        </DropdownMenuGroup>\r\n      </DropdownMenuContent>\r\n    </DropdownMenu>\r\n  </ButtonGroup>\r\n</ButtonGroup>","The ButtonGroupSeparator component visually divides buttons within a group.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  ButtonGroup,\r\n  ButtonGroupSeparator,\r\n} from \"@/components/ui/button-group\"\r\n</script>\r\n\r\n<ButtonGroup>\r\n  <Button variant=\"secondary\" size=\"sm\">\r\n    Copy\r\n  </Button>\r\n  <ButtonGroupSeparator />\r\n  <Button variant=\"secondary\" size=\"sm\">\r\n    Paste\r\n  </Button>\r\n</ButtonGroup>","Set the orientation prop to change the button group layout.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ButtonGroup } from \"@/components/ui/button-group\"\r\nimport { MinusIcon, PlusIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<ButtonGroup\r\n  orientation=\"vertical\"\r\n  aria-label=\"Media controls\"\r\n  class=\"h-fit\"\r\n>\r\n  <Button variant=\"outline\" size=\"icon\">\r\n    <PlusIcon />\r\n  </Button>\r\n  <Button variant=\"outline\" size=\"icon\">\r\n    <MinusIcon />\r\n  </Button>\r\n</ButtonGroup>",{"_877":878,"_68":1506},{"_877":878,"_68":1505},"<ButtonGroup>\r\n  <Button>Button 1</Button>\r\n  <Button>Button 2</Button>\r\n</ButtonGroup>","import {\r\n  ButtonGroup,\r\n  ButtonGroupSeparator,\r\n  ButtonGroupText\r\n} from \"@/components/ui/button-group\"","Displays a button or a component that looks like a button.",[1545,1546],[1510,1511,1512,1513,1514,1515,1516,1517,1518,1519,1520],{"_811":1542,"_19":1543,"_68":1544},{"_811":1317,"_19":1318,"_68":1541},{"_811":1538,"_19":1539,"_68":1540},{"_811":1121,"_19":1122,"_68":1537},{"_811":1113,"_19":1114,"_849":1535,"_68":1536},{"_811":1269,"_19":1270,"_68":1534},{"_811":1531,"_19":1532,"_68":1533},{"_811":1528,"_19":1529,"_68":1530},{"_811":864,"_19":865,"_68":1527},{"_811":1441,"_19":1442,"_849":1525,"_68":1526},{"_811":1521,"_19":1522,"_849":1523,"_68":1524},"with-icon","With Icon","Remember to add the data-icon=\"inline-start\" or data-icon=\"inline-end\" attribute to the icon for the correct spacing.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { GitBranch } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Button variant=\"outline\" size=\"sm\">\r\n  <GitBranch /> New Branch\r\n</Button>","Use the size prop to change the size of the button.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ArrowUpRight } from \"lucide-svelte\"\r\n</script>\r\n\r\n<div class=\"flex flex-col items-start gap-8 sm:flex-row\">\r\n  <div class=\"flex items-start gap-2\">\r\n    <Button size=\"xs\" variant=\"outline\">\r\n      Extra Small\r\n    </Button>\r\n    <Button size=\"icon-xs\" aria-label=\"Submit\" variant=\"outline\">\r\n      <ArrowUpRight />\r\n    </Button>\r\n  </div>\r\n  <div class=\"flex items-start gap-2\">\r\n    <Button size=\"sm\" variant=\"outline\">\r\n      Small\r\n    </Button>\r\n    <Button size=\"icon-sm\" aria-label=\"Submit\" variant=\"outline\">\r\n      <ArrowUpRight />\r\n    </Button>\r\n  </div>\r\n  <div class=\"flex items-start gap-2\">\r\n    <Button variant=\"outline\">Default</Button>\r\n    <Button size=\"icon\" aria-label=\"Submit\" variant=\"outline\">\r\n      <ArrowUpRight />\r\n    </Button>\r\n  </div>\r\n  <div class=\"flex items-start gap-2\">\r\n    <Button variant=\"outline\" size=\"lg\">\r\n      Large\r\n    </Button>\r\n    <Button size=\"icon-lg\" aria-label=\"Submit\" variant=\"outline\">\r\n      <ArrowUpRight />\r\n    </Button>\r\n  </div>\r\n</div>","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ArrowUpIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<div class=\"flex flex-wrap items-center gap-2 md:flex-row\">\r\n  <Button variant=\"outline\">Button</Button>\r\n  <Button variant=\"outline\" size=\"icon\" aria-label=\"Submit\">\r\n    <ArrowUpIcon />\r\n  </Button>\r\n</div>","secondary","Secondary","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\n</script>\r\n\r\n<Button variant=\"secondary\">Secondary</Button>","rounded","Rounded","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ArrowUp } from \"lucide-svelte\"\r\n</script>\r\n\r\n<div class=\"flex flex-col gap-8\">\r\n  <Button variant=\"outline\" size=\"icon\" class=\"rounded-full\">\r\n    <ArrowUp />\r\n  </Button>\r\n</div>","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\n</script>\r\n\r\n<Button variant=\"outline\">Outline</Button>","You can use the asChild prop on <Button /> to make another component look like a button. Here's an example of a link that looks like a button.","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\n</script>\r\n\r\n<Button variant=\"link\">Link</Button>","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { CircleFadingArrowUp } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Button variant=\"outline\" size=\"icon\">\r\n  <CircleFadingArrowUp />\r\n</Button>","ghost","Ghost","<script lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\n</script>\r\n\r\n<Button variant=\"ghost\">Ghost</Button>","<script module lang=\"ts\">\r\nimport { Button } from \"@/components/ui/button\"\r\n</script>\r\n\r\n<Button variant=\"destructive\">Destructive</Button>","default","Default","<script module lang=\"ts\">\r\n  import { Button } from \"@/components/ui/button\"\r\n</script>\r\n\r\n<Button>Button</Button>\r\n",{"_877":878,"_68":1548},{"_877":878,"_68":1547},"<Button variant=\"outline\">Button</Button>","import { Button } from \"@/components/ui/button\"","Breadcrumb","Displays the path to the current resource using a hierarchy of links.",[1571,1572],[1553,1554,1555,1556,1557],{"_811":1229,"_19":1230,"_849":1569,"_68":1570},{"_811":1565,"_19":1566,"_849":1567,"_68":1568},{"_811":1561,"_19":1562,"_849":1563,"_68":1564},{"_811":1166,"_19":1167,"_849":1559,"_68":1560},{"_811":864,"_19":865,"_68":1558},"<script lang=\"ts\">\r\n  import {\r\n    Breadcrumb,\r\n    BreadcrumbEllipsis,\r\n    BreadcrumbItem,\r\n    BreadcrumbLink,\r\n    BreadcrumbList,\r\n    BreadcrumbPage,\r\n    BreadcrumbSeparator,\r\n  } from \"@/components/ui/breadcrumb\";\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuItem,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\";\r\n    import { Button } from \"@/components/ui/button\";\r\n</script>\r\n\r\n<Breadcrumb>\r\n  <BreadcrumbList>\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink>\r\n        {#snippet asChild(props)}\r\n          <a href=\"#\" {...props()}>Home</a>\r\n        {/snippet}\r\n      </BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <DropdownMenu>\r\n        <DropdownMenuTrigger>\r\n          {#snippet asChild(props)}\r\n            <Button size=\"icon-sm\" variant=\"ghost\" {...props()}>\r\n              <BreadcrumbEllipsis />\r\n              <span class=\"sr-only\">Toggle menu</span>\r\n            </Button>\r\n          {/snippet}\r\n        </DropdownMenuTrigger>\r\n        <DropdownMenuContent>\r\n          <DropdownMenuGroup>\r\n            <DropdownMenuItem value=\"documentation\"\r\n              >Documentation</DropdownMenuItem\r\n            >\r\n            <DropdownMenuItem value=\"themes\">Themes</DropdownMenuItem>\r\n            <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\r\n          </DropdownMenuGroup>\r\n        </DropdownMenuContent>\r\n      </DropdownMenu>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink>\r\n        {#snippet asChild(props)}\r\n          <a href=\"#\" {...props()}>Components</a>\r\n        {/snippet}\r\n      </BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\r\n    </BreadcrumbItem>\r\n  </BreadcrumbList>\r\n</Breadcrumb>\r\n","You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.","<script lang=\"ts\">\r\n  import { ChevronDown, DotIcon } from \"lucide-svelte\";\r\n  import {\r\n    Breadcrumb,\r\n    BreadcrumbItem,\r\n    BreadcrumbLink,\r\n    BreadcrumbList,\r\n    BreadcrumbPage,\r\n    BreadcrumbSeparator,\r\n  } from \"@/components/ui/breadcrumb\";\r\n  import {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuGroup,\r\n    DropdownMenuItem,\r\n    DropdownMenuTrigger,\r\n  } from \"@/components/ui/dropdown-menu\";\r\n</script>\r\n\r\n<Breadcrumb>\r\n  <BreadcrumbList>\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink>\r\n        {#snippet asChild(props)}\r\n          <a href=\"#\" {...props()}>Home</a>\r\n        {/snippet}\r\n      </BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator>\r\n      <DotIcon />\r\n    </BreadcrumbSeparator>\r\n    <BreadcrumbItem>\r\n      <DropdownMenu>\r\n        <DropdownMenuTrigger>\r\n          {#snippet asChild(props)}\r\n            <button class=\"flex items-center gap-1\" {...props()}>\r\n              Components\r\n              <ChevronDown class=\"size-4\" />\r\n            </button>\r\n          {/snippet}\r\n        </DropdownMenuTrigger>\r\n        <DropdownMenuContent>\r\n          <DropdownMenuGroup>\r\n            <DropdownMenuItem value=\"documentation\"\r\n              >Documentation</DropdownMenuItem\r\n            >\r\n            <DropdownMenuItem value=\"themes\">Themes</DropdownMenuItem>\r\n            <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\r\n          </DropdownMenuGroup>\r\n        </DropdownMenuContent>\r\n      </DropdownMenu>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator>\r\n      <DotIcon />\r\n    </BreadcrumbSeparator>\r\n    <BreadcrumbItem>\r\n      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\r\n    </BreadcrumbItem>\r\n  </BreadcrumbList>\r\n</Breadcrumb>\r\n","custom-separator","Custom Separator","Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.","<script lang=\"ts\">\r\nimport { DotIcon } from \"lucide-svelte\"\r\nimport {\r\n  Breadcrumb,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbList,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator\r\n} from \"@/components/ui/breadcrumb\"\r\n</script>\r\n\r\n<Breadcrumb>\r\n  <BreadcrumbList>\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator>\r\n      <DotIcon class=\"size-4\" />\r\n    </BreadcrumbSeparator>\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator>\r\n      <DotIcon class=\"size-4\" />\r\n    </BreadcrumbSeparator>\r\n    <BreadcrumbItem>\r\n      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\r\n    </BreadcrumbItem>\r\n  </BreadcrumbList>\r\n</Breadcrumb>","collapsed","Collapsed","We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.","<script lang=\"ts\">\r\nimport {\r\n  Breadcrumb,\r\n  BreadcrumbEllipsis,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbList,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator\r\n} from \"@/components/ui/breadcrumb\"\r\n</script>\r\n\r\n<Breadcrumb>\r\n  <BreadcrumbList>\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbEllipsis />\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\r\n    </BreadcrumbItem>\r\n  </BreadcrumbList>\r\n</Breadcrumb>","A basic breadcrumb with a home link and a components link.","<script lang=\"ts\">\r\nimport {\r\n  Breadcrumb,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbList,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator\r\n} from \"@/components/ui/breadcrumb\"\r\n</script>\r\n\r\n<Breadcrumb>\r\n  <BreadcrumbList>\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\r\n    </BreadcrumbItem>\r\n  </BreadcrumbList>\r\n</Breadcrumb>",{"_877":878,"_68":1574},{"_877":878,"_68":1573},"<Breadcrumb>\r\n  <BreadcrumbList>\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\r\n    </BreadcrumbItem>\r\n  </BreadcrumbList>\r\n</Breadcrumb>","import {\r\n  Breadcrumb,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbList,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator,\r\n} from \"@/components/ui/breadcrumb\"","Displays a badge or a component that looks like a badge.",[1596,1597],[1578,1579,1580,1581,1582],{"_811":1592,"_19":1593,"_849":1594,"_68":1595},{"_811":1113,"_19":1114,"_849":1590,"_68":1591},{"_811":864,"_19":865,"_68":1589},{"_811":1585,"_19":1586,"_849":1587,"_68":1588},{"_811":1521,"_19":1522,"_849":1583,"_68":1584},"You can render an icon inside the badge. Use data-icon=\"inline-start\" to render the icon on the left and data-icon=\"inline-end\" to render the icon on the right.","<script lang=\"ts\">\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport { BadgeCheck, BookmarkIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<div class=\"flex flex-wrap gap-2\">\r\n  <Badge variant=\"secondary\">\r\n    <BadgeCheck data-icon=\"inline-start\" />\r\n    Verified\r\n  </Badge>\r\n  <Badge variant=\"outline\">\r\n    Bookmark\r\n    <BookmarkIcon data-icon=\"inline-end\" />\r\n  </Badge>\r\n</div>","variants","Variants","Use the variant prop to change the variant of the badge.","<script lang=\"ts\">\r\nimport { Badge } from \"@/components/ui/badge\"\r\n</script>\r\n\r\n<div class=\"flex flex-wrap gap-2\">\r\n  <Badge>Default</Badge>\r\n  <Badge variant=\"secondary\">Secondary</Badge>\r\n  <Badge variant=\"destructive\">Destructive</Badge>\r\n  <Badge variant=\"outline\">Outline</Badge>\r\n  <Badge variant=\"ghost\">Ghost</Badge>\r\n</div>","<script lang=\"ts\">\r\nimport { Badge } from \"@/components/ui/badge\"\r\n</script>\r\n\r\n<div class=\"flex w-full flex-wrap justify-center gap-2\">\r\n  <Badge>Badge</Badge>\r\n  <Badge variant=\"secondary\">Secondary</Badge>\r\n  <Badge variant=\"destructive\">Destructive</Badge>\r\n  <Badge variant=\"outline\">Outline</Badge>\r\n</div>","Use the asChild prop to render a link as a badge.","<script lang=\"ts\">\r\n  import { Badge } from \"@/components/ui/badge\";\r\n  import { ArrowUpRightIcon } from \"lucide-svelte\";\r\n</script>\r\n\r\n<Badge>\r\n  {#snippet asChild(props)}\r\n    <a href=\"#link\" {...props()}>\r\n      Open Link <ArrowUpRightIcon data-icon=\"inline-end\" />\r\n    </a>\r\n  {/snippet}\r\n</Badge>\r\n","custom-colors","Custom Colors","You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.","<script lang=\"ts\">\r\nimport { Badge } from \"@/components/ui/badge\"\r\n</script>\r\n\r\n<div class=\"flex flex-wrap gap-2\">\r\n  <Badge class=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\r\n    Blue\r\n  </Badge>\r\n  <Badge class=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\r\n    Green\r\n  </Badge>\r\n  <Badge class=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\r\n    Sky\r\n  </Badge>\r\n  <Badge class=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\r\n    Purple\r\n  </Badge>\r\n  <Badge class=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\r\n    Red\r\n  </Badge>\r\n</div>",{"_877":878,"_68":1599},{"_877":878,"_68":1598},"<Badge variant=\"outline\">Badge</Badge>","import { Badge } from \"@/components/ui/badge\"","An image element with a fallback for representing the user.",[1627,1628],[1603,1604,1605,1606,1607,1608,1609],{"_811":1277,"_19":1278,"_849":1625,"_68":1626},{"_811":1621,"_19":1622,"_849":1623,"_68":1624},{"_811":685,"_19":1232,"_849":1619,"_68":1620},{"_811":1615,"_19":1616,"_849":1617,"_68":1618},{"_811":1229,"_19":1230,"_849":1613,"_68":1614},{"_811":864,"_19":865,"_68":1612},{"_811":965,"_19":966,"_849":1610,"_68":1611},"Use the size prop to change the size of the avatar.","<script lang=\"ts\">\r\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\r\n</script>\r\n\r\n<div class=\"flex flex-wrap items-center gap-2 grayscale\">\r\n  <Avatar size=\"sm\">\r\n    <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\r\n    <AvatarFallback>PK</AvatarFallback>\r\n  </Avatar>\r\n  <Avatar>\r\n    <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\r\n    <AvatarFallback>PK</AvatarFallback>\r\n  </Avatar>\r\n  <Avatar size=\"lg\">\r\n    <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\r\n    <AvatarFallback>PK</AvatarFallback>\r\n  </Avatar>\r\n</div>","<script lang=\"ts\">\r\nimport {\r\n  Avatar,\r\n  AvatarBadge,\r\n  AvatarFallback,\r\n  AvatarGroup,\r\n  AvatarGroupCount,\r\n  AvatarImage,\r\n} from \"@/components/ui/avatar\"\r\n</script>\r\n\r\n<div class=\"flex flex-row flex-wrap items-center gap-6 md:gap-12\">\r\n  <Avatar>\r\n    <AvatarImage\r\n      src=\"https://github.com/khabubuphathu.png\"\r\n      alt=\"@khabubuphathu\"\r\n      class=\"grayscale\"\r\n    />\r\n    <AvatarFallback>PK</AvatarFallback>\r\n  </Avatar>\r\n  <Avatar>\r\n    <AvatarImage\r\n      src=\"https://github.com/benaadams.png\"\r\n      alt=\"@benaadams\"\r\n    />\r\n    <AvatarFallback>BA</AvatarFallback>\r\n    <AvatarBadge class=\"bg-green-600 dark:bg-green-800\" />\r\n  </Avatar>\r\n  <AvatarGroup class=\"grayscale\">\r\n    <Avatar>\r\n      <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\r\n      <AvatarFallback>PK</AvatarFallback>\r\n    </Avatar>\r\n    <Avatar>\r\n      <AvatarImage\r\n        src=\"https://github.com/willeastcott.png\"\r\n        alt=\"@willeastcott\"\r\n      />\r\n      <AvatarFallback>WE</AvatarFallback>\r\n    </Avatar>\r\n    <Avatar>\r\n      <AvatarImage\r\n        src=\"https://github.com/benaadams.png\"\r\n        alt=\"@benaadams\"\r\n      />\r\n      <AvatarFallback>BA</AvatarFallback>\r\n    </Avatar>\r\n    <AvatarGroupCount>+3</AvatarGroupCount>\r\n  </AvatarGroup>\r\n</div>","A basic avatar component with an image and a fallback.","<script lang=\"ts\">\r\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\r\n</script>\r\n\r\n<Avatar>\r\n  <AvatarImage\r\n    src=\"https://github.com/khabubuphathu.png\"\r\n    alt=\"@khabubuphathu\"\r\n    class=\"grayscale\"\r\n  />\r\n  <AvatarFallback>PK</AvatarFallback>\r\n</Avatar>","badge-with-icon","Badge With Icon","You can also use an icon inside <AvatarBadge>.","<script lang=\"ts\">\r\nimport {\r\n  Avatar,\r\n  AvatarBadge,\r\n  AvatarFallback,\r\n  AvatarImage,\r\n} from \"@/components/ui/avatar\"\r\nimport { PlusIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Avatar class=\"grayscale\">\r\n  <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\r\n  <AvatarFallback>PK</AvatarFallback>\r\n  <AvatarBadge>\r\n    <PlusIcon />\r\n  </AvatarBadge>\r\n</Avatar>","Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.","<script lang=\"ts\">\r\nimport {\r\n  Avatar,\r\n  AvatarBadge,\r\n  AvatarFallback,\r\n  AvatarImage,\r\n} from \"@/components/ui/avatar\"\r\n</script>\r\n\r\n<Avatar>\r\n  <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\r\n  <AvatarFallback>PK</AvatarFallback>\r\n  <AvatarBadge class=\"bg-green-600 dark:bg-green-800\" />\r\n</Avatar>","avatar-group-with-icon","Avatar Group With Icon","You can also use an icon inside <AvatarGroupCount>.","<script lang=\"ts\">\r\nimport {\r\n  Avatar,\r\n  AvatarFallback,\r\n  AvatarGroup,\r\n  AvatarGroupCount,\r\n  AvatarImage,\r\n} from \"@/components/ui/avatar\"\r\nimport { PlusIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<AvatarGroup class=\"grayscale\">\r\n  <Avatar>\r\n    <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\r\n    <AvatarFallback>PK</AvatarFallback>\r\n  </Avatar>\r\n  <Avatar>\r\n    <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\r\n    <AvatarFallback>WE</AvatarFallback>\r\n  </Avatar>\r\n  <Avatar>\r\n    <AvatarImage\r\n      src=\"https://github.com/benaadams.png\"\r\n      alt=\"@benaadams\"\r\n    />\r\n    <AvatarFallback>BA</AvatarFallback>\r\n  </Avatar>\r\n  <AvatarGroupCount>\r\n    <PlusIcon />\r\n  </AvatarGroupCount>\r\n</AvatarGroup>","Use the AvatarGroup component to add a group of avatars.","<script lang=\"ts\">\r\nimport {\r\n  Avatar,\r\n  AvatarFallback,\r\n  AvatarGroup,\r\n  AvatarImage,\r\n} from \"@/components/ui/avatar\"\r\n</script>\r\n\r\n<AvatarGroup class=\"grayscale\">\r\n  <Avatar>\r\n    <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\r\n    <AvatarFallback>PK</AvatarFallback>\r\n  </Avatar>\r\n  <Avatar>\r\n    <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\r\n    <AvatarFallback>WE</AvatarFallback>\r\n  </Avatar>\r\n  <Avatar>\r\n    <AvatarImage\r\n      src=\"https://github.com/benaadams.png\"\r\n      alt=\"@benaadams\"\r\n    />\r\n    <AvatarFallback>BA</AvatarFallback>\r\n  </Avatar>\r\n</AvatarGroup>",{"_877":878,"_68":1630},{"_877":878,"_68":1629},"<Avatar>\r\n  <AvatarImage src=\"...\" />\r\n  <AvatarFallback>PK</AvatarFallback>\r\n</Avatar>","import {\r\n  Avatar,\r\n  AvatarImage,\r\n  AvatarFallback\r\n} from \"@/components/ui/avatar\"","Aspect Ratio","Displays content within a desired ratio.",[1647,1648],[1635,1636,1637],{"_811":1643,"_19":1644,"_849":1645,"_68":1646},{"_811":864,"_19":865,"_68":1642},{"_811":1638,"_19":1639,"_849":1640,"_68":1641},"square","Square","A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.","<script lang=\"ts\">\r\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\r\n</script>\r\n\r\n<div class=\"w-full max-w-[12rem]\">\r\n  <AspectRatio ratio={1 / 1} class=\"bg-muted rounded-lg\">\r\n    <img\r\n      src=\"https://placehold.co/600x600/CCCCCC/CCCCCC/png\"\r\n      alt=\"Photo\"\r\n      class=\"size-full rounded-lg object-cover grayscale dark:brightness-20\"\r\n    />\r\n  </AspectRatio>\r\n</div>","<script lang=\"ts\">\r\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\r\n</script>\r\n\r\n<div class=\"w-full max-w-sm\">\r\n  <AspectRatio ratio={16 / 9} class=\"bg-muted rounded-lg\">\r\n    <img\r\n      src=\"https://placehold.co/600x400/CCCCCC/CCCCCC/png\"\r\n      alt=\"Photo\"\r\n      class=\"size-full rounded-lg object-cover grayscale dark:brightness-20\"\r\n    />\r\n  </AspectRatio>\r\n</div>","portrait","Portrait","A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.","<script lang=\"ts\">\r\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\r\n</script>\r\n\r\n<div class=\"w-full max-w-[10rem]\">\r\n  <AspectRatio ratio={9 / 16} class=\"bg-muted rounded-lg\">\r\n    <img\r\n      src=\"https://placehold.co/600x400/CCCCCC/CCCCCC/png\"\r\n      alt=\"Photo\"\r\n      class=\"size-full rounded-lg object-cover grayscale dark:brightness-20\"\r\n    />\r\n  </AspectRatio>\r\n</div>",{"_877":878,"_68":1650},{"_877":878,"_68":1649},"<AspectRatio ratio={16 / 9} class=\"bg-muted\">\r\n  <img src=\"...\" class=\"size-full rounded-md object-cover\" />\r\n</AspectRatio>","import { AspectRatio } from \"@/components/ui/aspect-ratio\"","Alert Dialog","A modal dialog that interrupts the user with important content and expects a response.",[1678,1679],[1655,1656,1657,1658,1659,1660],{"_811":1229,"_19":1230,"_849":1676,"_68":1677},{"_811":1317,"_19":1318,"_849":1674,"_68":1675},{"_811":1670,"_19":1671,"_849":1672,"_68":1673},{"_811":864,"_19":865,"_68":1669},{"_811":1665,"_19":1666,"_849":1667,"_68":1668},{"_811":1661,"_19":1662,"_849":1663,"_68":1664},"small-with-media","Small With Media","Use the size=\"sm\" prop to make the alert dialog smaller and the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.","<script lang=\"ts\">\r\n  import {\r\n    AlertDialog,\r\n    AlertDialogCancel,\r\n    AlertDialogAction,\r\n    AlertDialogContent,\r\n    AlertDialogDescription,\r\n    AlertDialogFooter,\r\n    AlertDialogHeader,\r\n    AlertDialogMedia,\r\n    AlertDialogTitle,\r\n    AlertDialogTrigger,\r\n  } from \"@/components/ui/alert-dialog\";\r\n  import { Button } from \"@/components/ui/button\";\r\n  import { BluetoothIcon } from \"lucide-svelte\";\r\n</script>\r\n\r\n<AlertDialog>\r\n  <AlertDialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Show Dialog</Button>\r\n    {/snippet}\r\n  </AlertDialogTrigger>\r\n  <AlertDialogContent size=\"sm\">\r\n    <AlertDialogHeader>\r\n      <AlertDialogMedia>\r\n        <BluetoothIcon />\r\n      </AlertDialogMedia>\r\n      <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\r\n      <AlertDialogDescription>\r\n        Do you want to allow the USB accessory to connect to this device?\r\n      </AlertDialogDescription>\r\n    </AlertDialogHeader>\r\n    <AlertDialogFooter>\r\n      <AlertDialogCancel>Don't allow</AlertDialogCancel>\r\n      <AlertDialogAction value=\"allow\">Allow</AlertDialogAction>\r\n    </AlertDialogFooter>\r\n  </AlertDialogContent>\r\n</AlertDialog>\r\n","small","Small","Use the size=\"sm\" prop to make the alert dialog smaller.","<script lang=\"ts\">\r\n  import {\r\n    AlertDialog,\r\n    AlertDialogCancel,\r\n    AlertDialogAction,\r\n    AlertDialogContent,\r\n    AlertDialogDescription,\r\n    AlertDialogFooter,\r\n    AlertDialogHeader,\r\n    AlertDialogTitle,\r\n    AlertDialogTrigger,\r\n  } from \"@/components/ui/alert-dialog\";\r\n  import { Button } from \"@/components/ui/button\";\r\n</script>\r\n\r\n<AlertDialog>\r\n  <AlertDialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Show Dialog</Button>\r\n    {/snippet}\r\n  </AlertDialogTrigger>\r\n  <AlertDialogContent size=\"sm\">\r\n    <AlertDialogHeader>\r\n      <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\r\n      <AlertDialogDescription>\r\n        Do you want to allow the USB accessory to connect to this device?\r\n      </AlertDialogDescription>\r\n    </AlertDialogHeader>\r\n    <AlertDialogFooter>\r\n      <AlertDialogCancel>Don't allow</AlertDialogCancel>\r\n      <AlertDialogAction value=\"allow\">Allow</AlertDialogAction>\r\n    </AlertDialogFooter>\r\n  </AlertDialogContent>\r\n</AlertDialog>\r\n","<script lang=\"ts\">\r\n  import { AlertDialog, AlertDialogCancel, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from \"@/components/ui/alert-dialog\";\r\n  import { Button } from \"@/components/ui/button\";\r\n</script>\r\n\r\n<AlertDialog>\r\n  <AlertDialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Show Dialog</Button>\r\n    {/snippet}\r\n  </AlertDialogTrigger>\r\n  <AlertDialogContent>\r\n    <AlertDialogHeader>\r\n      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\r\n      <AlertDialogDescription>\r\n        This action cannot be undone. This will permanently delete your\r\n        account and remove your data from our servers.\r\n      </AlertDialogDescription>\r\n    </AlertDialogHeader>\r\n    <AlertDialogFooter>\r\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\r\n      <AlertDialogAction value=\"continue\">Continue</AlertDialogAction>\r\n    </AlertDialogFooter>\r\n  </AlertDialogContent>\r\n</AlertDialog>","media","Media","Use the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.","<script lang=\"ts\">\r\n  import { AlertDialog, AlertDialogCancel, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from \"@/components/ui/alert-dialog\";\r\n  import { Button } from \"@/components/ui/button\";\r\n  import { CirclePlus } from \"lucide-svelte\";\r\n</script>\r\n\r\n<AlertDialog>\r\n  <AlertDialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Share</Button>\r\n    {/snippet}\r\n  </AlertDialogTrigger>\r\n  <AlertDialogContent>\r\n    <AlertDialogHeader>\r\n      <AlertDialogMedia>\r\n        <CirclePlus />\r\n      </AlertDialogMedia>\r\n      <AlertDialogTitle>Share this conversation?</AlertDialogTitle>\r\n      <AlertDialogDescription>\r\n        This will create a public link that anyone can use to view this\r\n        conversation. Your name will not be shared.\r\n      </AlertDialogDescription>\r\n    </AlertDialogHeader>\r\n    <AlertDialogFooter>\r\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\r\n      <AlertDialogAction value=\"share\">Share</AlertDialogAction>\r\n    </AlertDialogFooter>\r\n  </AlertDialogContent>\r\n</AlertDialog>","Use the AlertDialogAction component to add a destructive action button to the alert dialog.","<script lang=\"ts\">\r\n  import { AlertDialog, AlertDialogCancel, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from \"@/components/ui/alert-dialog\";\r\n  import { Button } from \"@/components/ui/button\";\r\n  import { Trash2 } from \"lucide-svelte\";\r\n</script>\r\n\r\n<AlertDialog>\r\n  <AlertDialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"destructive\" {...props()}>Delete Chat</Button>\r\n    {/snippet}\r\n  </AlertDialogTrigger>\r\n  <AlertDialogContent size=\"sm\">\r\n    <AlertDialogHeader>\r\n      <AlertDialogMedia class=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\r\n        <Trash2 />\r\n      </AlertDialogMedia>\r\n      <AlertDialogTitle>Delete chat?</AlertDialogTitle>\r\n      <AlertDialogDescription>\r\n        This will permanently delete this chat conversation. View{\" \"}\r\n        <a href=\"#\">Settings</a> to delete any memories saved during this chat.\r\n      </AlertDialogDescription>\r\n    </AlertDialogHeader>\r\n    <AlertDialogFooter>\r\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\r\n      <AlertDialogAction variant=\"destructive\" value=\"delete\">Delete</AlertDialogAction>\r\n    </AlertDialogFooter>\r\n  </AlertDialogContent>\r\n</AlertDialog>","A basic alert dialog with a title, description, and cancel and continue buttons.","<script lang=\"ts\">\r\n  import {\r\n    AlertDialog,\r\n    AlertDialogCancel,\r\n    AlertDialogAction,\r\n    AlertDialogContent,\r\n    AlertDialogDescription,\r\n    AlertDialogFooter,\r\n    AlertDialogHeader,\r\n    AlertDialogTitle,\r\n    AlertDialogTrigger,\r\n  } from \"@/components/ui/alert-dialog\";\r\n  import { Button } from \"@/components/ui/button\";\r\n</script>\r\n\r\n<AlertDialog>\r\n  <AlertDialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Show Dialog</Button>\r\n    {/snippet}\r\n  </AlertDialogTrigger>\r\n  <AlertDialogContent>\r\n    <AlertDialogHeader>\r\n      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\r\n      <AlertDialogDescription>\r\n        This action cannot be undone. This will permanently delete your account\r\n        and remove your data from our servers.\r\n      </AlertDialogDescription>\r\n    </AlertDialogHeader>\r\n    <AlertDialogFooter>\r\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\r\n      <AlertDialogAction value=\"continue\">Continue</AlertDialogAction>\r\n    </AlertDialogFooter>\r\n  </AlertDialogContent>\r\n</AlertDialog>\r\n",{"_877":878,"_68":1681},{"_877":878,"_68":1680},"<AlertDialog>\r\n  <AlertDialogTrigger>\r\n    {#snippet asChild(props)}\r\n      <Button variant=\"outline\" {...props()}>Show Dialog</Button>\r\n    {/snippet}\r\n  </AlertDialogTrigger>\r\n  <AlertDialogContent>\r\n    <AlertDialogHeader>\r\n      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\r\n      <AlertDialogDescription>\r\n        This action cannot be undone. This will permanently delete your account\r\n        from our servers.\r\n      </AlertDialogDescription>\r\n    </AlertDialogHeader>\r\n    <AlertDialogFooter>\r\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\r\n      <AlertDialogAction value=\"continue\">Continue</AlertDialogAction>\r\n    </AlertDialogFooter>\r\n  </AlertDialogContent>\r\n</AlertDialog>","import {\r\n  AlertDialog,\r\n  AlertDialogCancel,\r\n  AlertDialogAction,\r\n  AlertDialogContent,\r\n  AlertDialogDescription,\r\n  AlertDialogFooter,\r\n  AlertDialogHeader,\r\n  AlertDialogTitle,\r\n  AlertDialogTrigger,\r\n} from \"@/components/ui/alert-dialog\"","Alert","Displays a callout for user attention.",[1702,1703],[1686,1687,1688,1689,1690],{"_811":1698,"_19":1699,"_849":1700,"_68":1701},{"_811":1229,"_19":1230,"_849":1696,"_68":1697},{"_811":1592,"_19":1593,"_849":1694,"_68":1695},{"_811":1317,"_19":1318,"_849":1692,"_68":1693},{"_811":864,"_19":865,"_68":1691},"<script lang=\"ts\">\r\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\r\nimport { CheckCircle2Icon, InfoIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<div class=\"grid w-full max-w-md items-start gap-4\">\r\n  <Alert>\r\n    <CheckCircle2Icon />\r\n    <AlertTitle>Payment successful</AlertTitle>\r\n    <AlertDescription>\r\n      Your payment of $29.99 has been processed. A receipt has been sent to\r\n      your email address.\r\n    </AlertDescription>\r\n  </Alert>\r\n  <Alert>\r\n    <InfoIcon />\r\n    <AlertTitle>New feature available</AlertTitle>\r\n    <AlertDescription>\r\n      We've added dark mode support. You can enable it in your account\r\n      settings.\r\n    </AlertDescription>\r\n  </Alert>\r\n</div>","Use variant=\"destructive\" to create a destructive alert.","<script lang=\"ts\">\r\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\r\nimport { AlertCircleIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Alert variant=\"destructive\" class=\"max-w-md\">\r\n  <AlertCircleIcon />\r\n  <AlertTitle>Payment failed</AlertTitle>\r\n  <AlertDescription>\r\n    Your payment could not be processed. Please check your payment method\r\n    and try again.\r\n  </AlertDescription>\r\n</Alert>","You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.","<script lang=\"ts\">\r\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\r\nimport { AlertTriangleIcon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Alert class=\"max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50\">\r\n  <AlertTriangleIcon />\r\n  <AlertTitle>Your subscription will expire in 3 days.</AlertTitle>\r\n  <AlertDescription>\r\n    Renew now to avoid service interruption or upgrade to a paid plan to\r\n    continue using the service.\r\n  </AlertDescription>\r\n</Alert>","A basic alert with an icon, title and description.","<script lang=\"ts\">\r\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\r\nimport { CheckCircle2Icon } from \"lucide-svelte\"\r\n</script>\r\n\r\n<Alert class=\"max-w-md\">\r\n  <CheckCircle2Icon />\r\n  <AlertTitle>Account updated successfully</AlertTitle>\r\n  <AlertDescription>\r\n    Your profile information has been saved. Changes will be reflected\r\n    immediately.\r\n  </AlertDescription>\r\n</Alert>","action","Action","Use AlertAction to add a button or other action element to the alert.","<script lang=\"ts\">\r\nimport {\r\n  Alert,\r\n  AlertAction,\r\n  AlertDescription,\r\n  AlertTitle,\r\n} from \"@/components/ui/alert\"\r\nimport { Button } from \"@/components/ui/button\"\r\n</script>\r\n\r\n<Alert class=\"max-w-md\">\r\n  <AlertTitle>Dark mode is now available</AlertTitle>\r\n  <AlertDescription>\r\n    Enable it under your profile settings to get started.\r\n  </AlertDescription>\r\n  <AlertAction>\r\n    <Button size=\"xs\" variant=\"default\">\r\n      Enable\r\n    </Button>\r\n  </AlertAction>\r\n</Alert>",{"_877":878,"_68":1705},{"_877":878,"_68":1704},"<Alert>\r\n  <InfoIcon />\r\n  <AlertTitle>Heads up!</AlertTitle>\r\n  <AlertDescription>\r\n    You can add components and dependencies to your app using the cli.\r\n  </AlertDescription>\r\n  <AlertAction>\r\n    <Button variant=\"outline\">Enable</Button>\r\n  </AlertAction>\r\n</Alert>","import {\r\n  Alert,\r\n  AlertAction,\r\n  AlertDescription,\r\n  AlertTitle,\r\n} from \"@/components/ui/alert\"","Accordion","A vertically stacked set of interactive headings that each reveal a section of content.",[1731,1732],[1710,1711,1712,1713,1714,1715],{"_811":1229,"_19":1230,"_849":1729,"_68":1730},{"_811":1725,"_19":1726,"_849":1727,"_68":1728},{"_811":570,"_19":1434,"_849":1723,"_68":1724},{"_811":898,"_19":899,"_849":1721,"_68":1722},{"_811":1717,"_19":1718,"_849":1719,"_68":1720},{"_811":864,"_19":865,"_68":1716},"<script lang=\"ts\">\r\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\r\n</script>\r\n\r\n<Accordion\r\n  collapsible\r\n  defaultValue={[\"shipping\"]}\r\n  class=\"max-w-lg\"\r\n>\r\n  <AccordionItem value=\"shipping\">\r\n    <AccordionTrigger>What are your shipping options?</AccordionTrigger>\r\n    <AccordionContent>\r\n      We offer standard (5-7 days), express (2-3 days), and overnight\r\n      shipping. Free shipping on international orders.\r\n    </AccordionContent>\r\n  </AccordionItem>\r\n  <AccordionItem value=\"returns\">\r\n    <AccordionTrigger>What is your return policy?</AccordionTrigger>\r\n    <AccordionContent>\r\n      Returns accepted within 30 days. Items must be unused and in original\r\n      packaging. Refunds processed within 5-7 business days.\r\n    </AccordionContent>\r\n  </AccordionItem>\r\n  <AccordionItem value=\"support\">\r\n    <AccordionTrigger>How can I contact customer support?</AccordionTrigger>\r\n    <AccordionContent>\r\n      Reach us via email, live chat, or phone. We respond within 24 hours\r\n      during business days.\r\n    </AccordionContent>\r\n  </AccordionItem>\r\n</Accordion>","multiple","Multiple","Use multiple to allow multiple items to be open at the same time.","<script lang=\"ts\">\r\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\r\n\r\nconst items = [\r\n  {\r\n    value: \"notifications\",\r\n    trigger: \"Notification Settings\",\r\n    content:\r\n      \"Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.\",\r\n  },\r\n  {\r\n    value: \"privacy\",\r\n    trigger: \"Privacy & Security\",\r\n    content:\r\n      \"Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.\",\r\n  },\r\n  {\r\n    value: \"billing\",\r\n    trigger: \"Billing & Subscription\",\r\n    content:\r\n      \"View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.\",\r\n  },\r\n];\r\n</script>\r\n\r\n<Accordion\r\n  class=\"max-w-lg\"\r\n  defaultValue={[\"notifications\"]}\r\n  multiple\r\n>\r\n  {#each items as item (item.value)}\r\n    <AccordionItem value={item.value}>\r\n      <AccordionTrigger>{item.trigger}</AccordionTrigger>\r\n      <AccordionContent>{item.content}</AccordionContent>\r\n    </AccordionItem>\r\n  {/each}\r\n</Accordion>","Use the disabled prop on AccordionItem to disable individual items.","<script lang=\"ts\">\r\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\r\n</script>\r\n\r\n<Accordion collapsible class=\"w-full max-w-lg\">\r\n  <AccordionItem value=\"item-1\">\r\n    <AccordionTrigger>Can I access my account history?</AccordionTrigger>\r\n    <AccordionContent>\r\n      Yes, you can view your complete account history including all\r\n      transactions, plan changes, and support tickets in the Account History\r\n      section of your dashboard.\r\n    </AccordionContent>\r\n  </AccordionItem>\r\n  <AccordionItem value=\"item-2\" disabled>\r\n    <AccordionTrigger>Premium feature information</AccordionTrigger>\r\n    <AccordionContent>\r\n      This section contains information about premium features. Upgrade your\r\n      plan to access this content.\r\n    </AccordionContent>\r\n  </AccordionItem>\r\n  <AccordionItem value=\"item-3\">\r\n    <AccordionTrigger>How do I update my email address?</AccordionTrigger>\r\n    <AccordionContent>\r\n      You can update your email address in your account settings.\r\n      You'll receive a verification email at your new address to\r\n      confirm the change.\r\n    </AccordionContent>\r\n  </AccordionItem>\r\n</Accordion>","Wrap the Accordion in a Card component.","<script lang=\"ts\">\r\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\r\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\r\n\r\nconst items = [\r\n  {\r\n    value: \"plans\",\r\n    trigger: \"What subscription plans do you offer?\",\r\n    content:\r\n      \"We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.\",\r\n  },\r\n  {\r\n    value: \"billing\",\r\n    trigger: \"How does billing work?\",\r\n    content:\r\n      \"Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.\",\r\n  },\r\n  {\r\n    value: \"cancel\",\r\n    trigger: \"How do I cancel my subscription?\",\r\n    content:\r\n      \"You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.\",\r\n  },\r\n];\r\n</script>\r\n\r\n<Card class=\"w-full max-w-sm\">\r\n  <CardHeader>\r\n    <CardTitle>Subscription & Billing</CardTitle>\r\n    <CardDescription>\r\n      Common questions about your account, plans, payments and\r\n      cancellations.\r\n    </CardDescription>\r\n  </CardHeader>\r\n  <CardContent>\r\n    <Accordion collapsible defaultValue={[\"plans\"]}>\r\n      {#each items as item (item.value)}\r\n        <AccordionItem value={item.value}>\r\n          <AccordionTrigger>{item.trigger}</AccordionTrigger>\r\n          <AccordionContent>{item.content}</AccordionContent>\r\n        </AccordionItem>\r\n      {/each}\r\n    </Accordion>\r\n  </CardContent>\r\n</Card>","borders","Borders","Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.","<script lang=\"ts\">\r\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\r\n\r\nconst items = [\r\n  {\r\n    value: \"billing\",\r\n    trigger: \"How does billing work?\",\r\n    content:\r\n      \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.\",\r\n  },\r\n  {\r\n    value: \"security\",\r\n    trigger: \"Is my data secure?\",\r\n    content:\r\n      \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.\",\r\n  },\r\n  {\r\n    value: \"integration\",\r\n    trigger: \"What integrations do you support?\",\r\n    content:\r\n      \"We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.\",\r\n  },\r\n];\r\n</script>\r\n\r\n<Accordion\r\n  collapsible\r\n  class=\"max-w-lg rounded-lg border\"\r\n  defaultValue={[\"billing\"]}\r\n>\r\n  {#each items as item (item.value)}\r\n    <AccordionItem\r\n      value={item.value}\r\n      class=\"border-b px-4 last:border-b-0\"\r\n    >\r\n      <AccordionTrigger>{item.trigger}</AccordionTrigger>\r\n      <AccordionContent>{item.content}</AccordionContent>\r\n    </AccordionItem>\r\n  {/each}\r\n</Accordion>","A basic accordion that shows one item at a time. The first item is open by default.","<script lang=\"ts\">\r\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\r\n\r\nconst items = [\r\n  {\r\n    value: \"item-1\",\r\n    trigger: \"How do I reset my password?\",\r\n    content:\r\n      \"Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.\",\r\n  },\r\n  {\r\n    value: \"item-2\",\r\n    trigger: \"Can I change my subscription plan?\",\r\n    content:\r\n      \"Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.\",\r\n  },\r\n  {\r\n    value: \"item-3\",\r\n    trigger: \"What payment methods do you accept?\",\r\n    content:\r\n      \"We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.\",\r\n  },\r\n];\r\n</script>\r\n\r\n<Accordion\r\n  collapsible\r\n  defaultValue={[\"item-1\"]}\r\n  class=\"max-w-lg\"\r\n>\r\n  {#each items as item (item.value)}\r\n    <AccordionItem value={item.value}>\r\n      <AccordionTrigger>{item.trigger}</AccordionTrigger>\r\n      <AccordionContent>{item.content}</AccordionContent>\r\n    </AccordionItem>\r\n  {/each}\r\n</Accordion>",{"_877":878,"_68":1734},{"_877":878,"_68":1733},"<Accordion collapsible defaultValue={[\"item-1\"]}>  \r\n  <AccordionItem value=\"item-1\">    \r\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\r\n    <AccordionContent>\r\n      Yes. It adheres to the WAI-ARIA design pattern.\r\n    </AccordionContent>\r\n  </AccordionItem>\r\n</Accordion>","import {\r\n  Accordion,\r\n  AccordionContent,\r\n  AccordionItem,\r\n  AccordionTrigger\r\n} from \"@/components/ui/accordion\"","overview","Overview",[1738,1739,1740],{"_811":1743,"_813":1744},{"_811":812,"_813":814},{"_811":1741,"_813":1742},"installation","Installation","introduction","Introduction","frameworks",[1747,1748,18],"react","solid","user","registries",[1756],"env",{"_1754":1755},"THEME","light",{"_19":16,"_20":1757,"_22":1758,"_24":1759,"_26":1760,"_15":16,"_17":1747},"https://ui.sprawlify.com/monochrome/react",{"_807":1959},[805,806],[1761,1762,1763,1764,1765,1766,1767,1768,1769,1770,1771,1772,1773,1774,1775,1776,1777,1778,1779,1780,1781,1782,1783,1784,1785,1786,1787,1788,1789,1790,1791,1792,1793],{"_19":787,"_62":75,"_24":1954,"_65":1955},{"_19":769,"_62":75,"_24":1949,"_65":1950},{"_19":727,"_62":75,"_24":1944,"_65":1945},{"_19":718,"_62":75,"_24":1939,"_65":1940},{"_19":694,"_62":75,"_24":1934,"_65":1935},{"_19":685,"_62":75,"_24":1929,"_65":1930},{"_19":658,"_62":75,"_24":1924,"_65":1925},{"_19":649,"_62":75,"_24":1919,"_65":1920},{"_19":634,"_62":75,"_24":1914,"_65":1915},{"_19":597,"_62":75,"_24":1909,"_65":1910},{"_19":570,"_62":75,"_24":1904,"_65":1905},{"_19":537,"_62":75,"_24":1899,"_65":1900},{"_19":516,"_62":75,"_24":1894,"_65":1895},{"_19":501,"_62":75,"_24":1889,"_65":1890},{"_19":465,"_62":75,"_24":1884,"_65":1885},{"_19":414,"_62":75,"_24":1879,"_65":1880},{"_19":390,"_62":75,"_24":1874,"_65":1875},{"_19":350,"_62":75,"_24":1869,"_65":1870},{"_19":341,"_62":75,"_24":1864,"_65":1865},{"_19":314,"_62":75,"_24":1859,"_65":1860},{"_19":278,"_62":75,"_24":1854,"_65":1855},{"_19":266,"_62":75,"_24":1849,"_65":1850},{"_19":257,"_62":75,"_24":1844,"_65":1845},{"_19":242,"_62":75,"_24":1839,"_65":1840},{"_19":230,"_62":75,"_24":1834,"_65":1835},{"_19":181,"_62":75,"_24":1828,"_65":1829},{"_19":172,"_62":75,"_24":1823,"_65":1824},{"_19":154,"_62":75,"_24":1818,"_65":1819},{"_19":124,"_62":75,"_24":1813,"_65":1814},{"_19":105,"_62":75,"_24":1808,"_65":1809},{"_19":95,"_62":75,"_24":1803,"_65":1804},{"_19":74,"_62":75,"_24":1797,"_65":1798},{"_19":61,"_62":63,"_24":1794,"_65":1795},[72,73],[1796],{"_68":69,"_62":63,"_70":71},[1747,1802,94],[1799],{"_68":1800,"_62":75,"_70":1801},"\"use client\";\n\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/react/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { Portal } from \"@sprawlify/react/portal\";\n\nfunction TooltipProvider({ ...props }: React.ComponentProps<typeof TooltipPrimitive.RootProvider>) {\n  return <TooltipPrimitive.RootProvider data-slot=\"tooltip-provider\" {...props} />;\n}\n\nfunction Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\n\nfunction TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <Portal>\n      <TooltipPrimitive.Positioner>\n        <TooltipPrimitive.Content\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"[--arrow-background:var(--foreground)] [--arrow-size:8px]\">\n            <TooltipPrimitive.ArrowTip className=\"rounded-xs\" />\n          </TooltipPrimitive.Arrow>\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Positioner>\n    </Portal>\n  );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n","tooltip.tsx","@sprawlify/react",[1747,94,1802],[1805],{"_68":1806,"_62":75,"_70":1807},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<typeof sprawlify.textarea>) {\n  return (\n    <sprawlify.textarea\n      data-scope=\"textarea\"\n      data-part=\"root\"\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-input/30 px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea };\n","textarea.tsx",[1747,123,1802,94],[1810],{"_68":1811,"_62":75,"_70":1812},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/react/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent\",\n        \"data-selected:bg-background dark:data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 data-selected:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };\n","tabs.tsx",[1747,94,1802],[1815],{"_68":1816,"_62":75,"_70":1817},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Table({ className, ...props }: React.ComponentProps<typeof sprawlify.table>) {\n  return (\n    <div data-slot=\"table-container\" className=\"relative w-full overflow-x-auto\">\n      <sprawlify.table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.thead>) {\n  return (\n    <sprawlify.thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<typeof sprawlify.tbody>) {\n  return (\n    <sprawlify.tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.tfoot>) {\n  return (\n    <sprawlify.tfoot\n      data-slot=\"table-footer\"\n      className={cn(\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<typeof sprawlify.tr>) {\n  return (\n    <sprawlify.tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<typeof sprawlify.th>) {\n  return (\n    <sprawlify.th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<typeof sprawlify.td>) {\n  return (\n    <sprawlify.td\n      data-slot=\"table-cell\"\n      className={cn(\"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<typeof sprawlify.caption>) {\n  return (\n    <sprawlify.caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n","table.tsx",[1747,94,1802],[1820],{"_68":1821,"_62":75,"_70":1822},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Switch as SwitchPrimitive } from \"@sprawlify/react/switch\";\n\nconst Switch = React.forwardRef<\n  HTMLLabelElement,\n  React.ComponentProps<typeof SwitchPrimitive.Root> & {\n    size?: \"sm\" | \"default\";\n  }\n>(({ className, size = \"default\", ...props }, ref) => (\n  <SwitchPrimitive.Root\n    ref={ref}\n    data-slot=\"switch\"\n    data-size={size}\n    className={cn(\n      \"group/switch inline-flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  />\n));\nSwitch.displayName = \"Switch\";\n\nconst SwitchControl = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<typeof SwitchPrimitive.Control>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitive.Control\n    ref={ref}\n    data-slot=\"switch-control\"\n    className={cn(\n      \"inline-flex h-5 group-data-[size=sm]/switch:h-4 w-9 group-data-[size=sm]/switch:w-7 shrink-0 cursor-pointer items-center rounded-full border ring-2 border-transparent ring-transparent transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-2 focus-visible:outline-ring data-invalid:border-destructive data-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 dark:data-[state=unchecked]:bg-input/80\",\n      className,\n    )}\n    {...props}\n  />\n));\nSwitchControl.displayName = \"SwitchControl\";\n\nconst SwitchThumb = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<typeof SwitchPrimitive.Thumb>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitive.Thumb\n    ref={ref}\n    data-slot=\"switch-thumb\"\n    className={cn(\n      \"pointer-events-none block size-4 group-data-[size=sm]/switch:size-3 rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 group-data-[size=sm]/switch:data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nSwitchThumb.displayName = \"SwitchThumb\";\n\nconst SwitchLabel = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<typeof SwitchPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitive.Label\n    ref={ref}\n    data-slot=\"switch-label\"\n    className={cn(\n      \"text-sm group-data-[size=sm]/switch:text-xs leading-none font-medium select-none data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  />\n));\nSwitchLabel.displayName = \"SwitchLabel\";\n\nconst SwitchHiddenInput = SwitchPrimitive.HiddenInput;\n\nconst SwitchContext = SwitchPrimitive.Context;\nconst SwitchRootProvider = SwitchPrimitive.RootProvider;\n\nexport {\n  Switch,\n  SwitchControl,\n  SwitchThumb,\n  SwitchLabel,\n  SwitchHiddenInput,\n  SwitchContext,\n  SwitchRootProvider,\n};\n","switch.tsx",[1747,1802,94],[1825],{"_68":1826,"_62":75,"_70":1827},"\"use client\";\n\nimport * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"@sprawlify/react/separator\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n","separator.tsx",[1747,94,1802,1833],[1830],{"_68":1831,"_62":75,"_70":1832},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { Select as SelectPrimitive } from \"@sprawlify/react/select\";\nimport { CheckIcon, ChevronsUpDownIcon } from \"lucide-react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectControl = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Control>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Control\n    ref={ref}\n    data-slot=\"select-control\"\n    className={cn(\"relative flex w-full items-center\", className)}\n    {...props}\n  >\n    {children}\n  </SelectPrimitive.Control>\n));\nSelectControl.displayName = \"SelectControl\";\n\nconst SelectTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    data-slot=\"select-trigger\"\n    className={cn(\n      \"flex h-9 w-full items-center gap-2 rounded-md border border-input bg-input/30 py-2 pr-10 pl-3 text-sm shadow-xs transition-[border-color,box-shadow] duration-150 ease-in-out outline-none\",\n      \"data-placeholder-shown:text-muted-foreground\",\n      \"hover:border-ring/50\",\n      \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20\",\n      \"data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n      \"data-invalid:border-destructive data-invalid:focus-visible:ring-destructive/20\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = \"SelectTrigger\";\n\nconst SelectIndicatorGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof sprawlify.div>\n>(({ className, children, ...props }, ref) => (\n  <sprawlify.div\n    ref={ref}\n    data-slot=\"select-indicator-group\"\n    className={cn(\n      \"pointer-events-none absolute inset-y-0 right-0 flex items-center gap-1 px-2.5\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </sprawlify.div>\n));\nSelectIndicatorGroup.displayName = \"SelectIndicatorGroup\";\n\nconst SelectIndicator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Indicator>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Indicator\n    ref={ref}\n    data-slot=\"select-indicator\"\n    className={cn(\n      \"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-muted-foreground/60 [&_svg]:size-4\",\n      className,\n    )}\n    {...props}\n  >\n    {children ?? <ChevronsUpDownIcon />}\n  </SelectPrimitive.Indicator>\n));\nSelectIndicator.displayName = \"SelectIndicator\";\n\nconst SelectValue = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<typeof SelectPrimitive.ValueText>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ValueText\n    ref={ref}\n    data-slot=\"select-value\"\n    className={cn(\"line-clamp-1 flex-1 text-left\", className)}\n    {...props}\n  />\n));\nSelectValue.displayName = \"SelectValue\";\n\nconst SelectPositioner = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Positioner>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Positioner\n    ref={ref}\n    data-slot=\"select-positioner\"\n    className={cn(\"outline-none\", className)}\n    {...props}\n  />\n));\nSelectPositioner.displayName = \"SelectPositioner\";\n\nconst SelectContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <Portal>\n    <SelectPrimitive.Positioner data-slot=\"select-positioner\" className=\"outline-none\">\n      <SelectPrimitive.Content\n        ref={ref}\n        data-slot=\"select-content\"\n        className={cn(\n          \"z-50 flex flex-col gap-0.5 rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg outline-none\",\n          \"min-w-(--reference-width)\",\n          \"max-h-[min(var(--available-height,300px),300px)] overflow-y-auto\",\n          \"origin-(--transform-origin)\",\n          \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[98%]\",\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%]\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Positioner>\n  </Portal>\n));\nSelectContent.displayName = \"SelectContent\";\n\nconst SelectHiddenSelect = SelectPrimitive.HiddenSelect;\n\nconst SelectItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    data-slot=\"select-item\"\n    className={cn(\n      \"relative flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1.5 pr-8 text-sm outline-none select-none\",\n      \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n      \"data-[state=checked]:font-medium\",\n      \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = \"SelectItem\";\n\nconst SelectItemText = SelectPrimitive.ItemText;\n\nconst SelectItemIndicator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.ItemIndicator>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.ItemIndicator\n    ref={ref}\n    data-slot=\"select-item-indicator\"\n    className={cn(\"absolute right-2 flex size-4 items-center justify-center\", className)}\n    {...props}\n  >\n    {children ?? <CheckIcon />}\n  </SelectPrimitive.ItemIndicator>\n));\nSelectItemIndicator.displayName = \"SelectItemIndicator\";\n\nconst SelectItemGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.ItemGroup>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ItemGroup\n    ref={ref}\n    data-slot=\"select-item-group\"\n    className={cn(\"flex flex-col\", className)}\n    {...props}\n  />\n));\nSelectItemGroup.displayName = \"SelectItemGroup\";\n\nconst SelectItemGroupLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.ItemGroupLabel>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ItemGroupLabel\n    ref={ref}\n    data-slot=\"select-item-group-label\"\n    className={cn(\n      \"px-2 py-1.5 text-xs font-semibold tracking-wide text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nSelectItemGroupLabel.displayName = \"SelectItemGroupLabel\";\n\nconst SelectLabel = React.forwardRef<\n  HTMLLabelElement,\n  React.ComponentProps<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    data-slot=\"select-label\"\n    className={cn(\n      \"text-sm leading-none font-medium select-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  />\n));\nSelectLabel.displayName = \"SelectLabel\";\n\nconst SelectSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof sprawlify.div>\n>(({ className, ...props }, ref) => (\n  <sprawlify.div\n    ref={ref}\n    data-slot=\"select-separator\"\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = \"SelectSeparator\";\n\nconst SelectContext = SelectPrimitive.Context;\nconst SelectRootProvider = SelectPrimitive.RootProvider;\n\nexport {\n  Select,\n  SelectControl,\n  SelectTrigger,\n  SelectIndicator,\n  SelectValue,\n  SelectPositioner,\n  SelectContent,\n  SelectHiddenSelect,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectLabel,\n  SelectSeparator,\n  SelectIndicatorGroup,\n  SelectContext,\n  SelectRootProvider,\n};\n","select.tsx","lucide-react",[1747,1802,94],[1836],{"_68":1837,"_62":75,"_70":1838},"\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/react/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 scrollbar-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent flex touch-none p-px transition-colors select-none\",\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"rounded-full bg-border relative flex-1\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n","scroll-area.tsx",[1747,94,1833],[1841],{"_68":1842,"_62":75,"_70":1843},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\";\n};\n\nfunction NativeSelect({ className, size = \"default\", ...props }: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className,\n      )}\n      data-scope=\"native-select\"\n      data-part=\"root\"\n      data-slot=\"native-select-root\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-input/30 py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <ChevronDownIcon\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  );\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return (\n    <option\n      data-scope=\"native-select\"\n      data-part=\"option\"\n      data-slot=\"native-select-option\"\n      {...props}\n    />\n  );\n}\n\nfunction NativeSelectOptGroup({ className, ...props }: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-scope=\"native-select\"\n      data-part=\"optgroup\"\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption };\n","native-select.tsx",[1747,94,1802],[1846],{"_68":1847,"_62":75,"_70":1848},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof sprawlify.label>) {\n  return (\n    <sprawlify.label\n      data-scope=\"label\"\n      data-part=\"root\"\n      data-slot=\"label\"\n      className={cn(\n        \"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n","label.tsx",[94,1802],[1851],{"_68":1852,"_62":75,"_70":1853},"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Kbd({ className, ...props }: React.ComponentProps<typeof sprawlify.kbd>) {\n  return (\n    <sprawlify.kbd\n      data-scope=\"kbd\"\n      data-part=\"root\"\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.kbd>) {\n  return (\n    <sprawlify.kbd\n      data-scope=\"kbd\"\n      data-part=\"group\"\n      data-slot=\"kbd-group\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n","kbd.tsx",[1747,123,94,389,1802],[1856],{"_68":1857,"_62":75,"_70":1858},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      role=\"list\"\n      data-scope=\"item\"\n      data-part=\"group\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-scope=\"item\"\n      data-part=\"separator\"\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof itemVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"root\"\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"media\"\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"content\"\n      data-slot=\"item-content\"\n      className={cn(\n        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"title\"\n      data-slot=\"item-title\"\n      className={cn(\n        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n  return (\n    <sprawlify.p\n      data-scope=\"item\"\n      data-part=\"description\"\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"actions\"\n      data-slot=\"item-actions\"\n      className={cn(\"gap-2 flex items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"header\"\n      data-slot=\"item-header\"\n      className={cn(\"gap-2 flex basis-full items-center justify-between\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"footer\"\n      data-slot=\"item-footer\"\n      className={cn(\"gap-2 flex basis-full items-center justify-between\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n","item.tsx",[1747,123,94,338,339,340,1802],[1861],{"_68":1862,"_62":75,"_70":1863},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"input-group\"\n      data-part=\"root\"\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input bg-input/30 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <sprawlify.div\n      role=\"group\"\n      data-scope=\"input-group\"\n      data-part=\"addon\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"\",\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      data-scope=\"input-group\"\n      data-part=\"button\"\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-scope=\"input-group\"\n      data-part=\"text\"\n      data-slot=\"input-group-text\"\n      className={cn(\n        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n  return (\n    <Input\n      data-scope=\"input-group\"\n      data-part=\"control\"\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-input/50 aria-invalid:ring-0 dark:bg-input/30 dark:disabled:bg-input/50 flex-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.textarea>) {\n  return (\n    <Textarea\n      data-scope=\"input-group\"\n      data-part=\"control\"\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-input/50 aria-invalid:ring-0 dark:bg-input/30 dark:disabled:bg-transparent flex-1 resize-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n","input-group.tsx",[1747,94,1802],[1866],{"_68":1867,"_62":75,"_70":1868},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n  return (\n    <sprawlify.input\n      type={type}\n      data-scope=\"input\"\n      data-part=\"root\"\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-input/30 px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-input/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n","input.tsx",[1747,94,389,1802,123],[1871],{"_68":1872,"_62":75,"_70":1873},"\"use client\";\n\nimport * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\nimport { Field as FieldPrimitive } from \"@sprawlify/react/field\";\nimport { Fieldset as FieldsetPrimitive } from \"@sprawlify/react/fieldset\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<typeof FieldsetPrimitive.Root>) {\n  return (\n    <FieldsetPrimitive.Root\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<typeof FieldsetPrimitive.Legend> & {\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <FieldsetPrimitive.Legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"has-[>[data-slot=field-content]]:&>[role=checkbox],[role=radio]]:mt-px flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto\",\n      responsive:\n        \"@md/field-group:has-[>[data-slot=field-content]]:&>[role=checkbox],[role=radio]]:mt-px flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof FieldPrimitive.Root> & VariantProps<typeof fieldVariants>) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"content\"\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof FieldPrimitive.Label>) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-[state=checked]:border-primary/30 has-data-[state=checked]:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-[state=checked]:border-primary/20 dark:has-data-[state=checked]:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"title\"\n      data-slot=\"field-title\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof FieldPrimitive.HelperText>) {\n  return (\n    <FieldPrimitive.HelperText\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"separator\"\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <sprawlify.span\n          data-scope=\"field\"\n          data-part=\"separator-content\"\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </sprawlify.span>\n      )}\n    </sprawlify.div>\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<typeof FieldPrimitive.ErrorText> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <sprawlify.ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <sprawlify.li key={index}>{error.message}</sprawlify.li>,\n        )}\n      </sprawlify.ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <FieldPrimitive.ErrorText\n      role=\"alert\"\n      data-scope=\"field\"\n      data-part=\"error\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </FieldPrimitive.ErrorText>\n  );\n}\n\nfunction FieldRequiredIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof FieldPrimitive.RequiredIndicator>) {\n  return (\n    <FieldPrimitive.RequiredIndicator\n      data-slot=\"field-required-indicator\"\n      className={cn(\"text-destructive\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n  FieldRequiredIndicator,\n};\n","field.tsx",[123,94,1802],[1876],{"_68":1877,"_62":75,"_70":1878},"\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Empty({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"empty\"\n      data-part=\"root\"\n      data-slot=\"empty\"\n      className={cn(\n        \"gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-header\"\n      className={cn(\"gap-2 flex max-w-sm flex-col items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n  return (\n    <sprawlify.p\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };\n","empty.tsx",[1747,1802,94,1833],[1881],{"_68":1882,"_62":75,"_70":1883},"\"use client\";\n\nimport * as React from \"react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/react/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return (\n    <DropdownMenuPrimitive.Root\n      data-slot=\"dropdown-menu\"\n      positioning={{ offset: { mainAxis: 4 } }}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n  return <Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <Portal>\n      <DropdownMenuPrimitive.Positioner>\n        <DropdownMenuPrimitive.Content\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-(--z-index) max-h-(--available-height) w-(--reference-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n            className,\n          )}\n          {...props}\n        />\n      </DropdownMenuPrimitive.Positioner>\n    </Portal>\n  );\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroup>) {\n  return <DropdownMenuPrimitive.ItemGroup data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"data-[variant=destructive]:text-destructive data-highlighted:bg-accent data-highlighted:text-accent-foreground  data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:data-highlighted:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItemGroup>) {\n  return <DropdownMenuPrimitive.RadioItemGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroupLabel> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.ItemGroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.TriggerItem\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"w-full data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </DropdownMenuPrimitive.TriggerItem>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <Portal>\n      <DropdownMenuPrimitive.Positioner>\n        <DropdownMenuPrimitive.Content\n          data-slot=\"dropdown-menu-sub-content\"\n          className={cn(\n            \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 origin-(--transform-origin) overflow-hidden\",\n            className,\n          )}\n          {...props}\n        />\n      </DropdownMenuPrimitive.Positioner>\n    </Portal>\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n","dropdown-menu.tsx",[1747,1833,1802,94,338],[1886],{"_68":1887,"_62":75,"_70":1888},"\"use client\";\n\nimport * as React from \"react\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/react/dialog\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n  return <Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.CloseTrigger>) {\n  return <DialogPrimitive.CloseTrigger data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.CloseTrigger data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n              <XIcon />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.CloseTrigger>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <sprawlify.div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.CloseTrigger asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.CloseTrigger>\n      )}\n    </sprawlify.div>\n  );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"cn-font-heading text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n","dialog.tsx",[1802],[1891],{"_68":1892,"_62":75,"_70":1893},"\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/react/collapsible\";\n\nfunction Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {\n  return <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />;\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {\n  return <CollapsiblePrimitive.Content data-slot=\"collapsible-content\" {...props} />;\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n","collapsible.tsx",[1747,1802,94,1833],[1896],{"_68":1897,"_62":75,"_70":1898},"\"use client\";\n\nimport * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/react/checkbox\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, MinusIcon } from \"lucide-react\";\n\nfunction Checkbox({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Control\n        data-slot=\"checkbox-control\"\n        className=\"bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\"\n      >\n        <CheckboxPrimitive.Indicator data-slot=\"checkbox-indicator\" className=\"[&>svg]:size-3.5\">\n          <CheckIcon />\n        </CheckboxPrimitive.Indicator>\n        <CheckboxPrimitive.Indicator\n          data-slot=\"checkbox-indicator\"\n          className=\"[&>svg]:size-3.5\"\n          indeterminate\n        >\n          <MinusIcon />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Control>\n      {children && (\n        <CheckboxPrimitive.Label\n          data-slot=\"checkbox-label\"\n          className=\"text-sm leading-none font-medium select-none peer-disabled:opacity-50\"\n        >\n          {children}\n        </CheckboxPrimitive.Label>\n      )}\n      <CheckboxPrimitive.HiddenInput />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nconst CheckboxRoot = React.forwardRef<\n  HTMLLabelElement,\n  React.ComponentProps<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    data-slot=\"checkbox\"\n    className={cn(\n      \"group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  />\n));\nCheckboxRoot.displayName = \"CheckboxRoot\";\n\nconst CheckboxControl = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CheckboxPrimitive.Control>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Control\n    ref={ref}\n    data-slot=\"checkbox-control\"\n    className={cn(\n      \"bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n      className,\n    )}\n    {...props}\n  />\n));\nCheckboxControl.displayName = \"CheckboxControl\";\n\nconst CheckboxIndicator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CheckboxPrimitive.Indicator>\n>(({ className, children, ...props }, ref) => (\n  <CheckboxPrimitive.Indicator\n    ref={ref}\n    data-slot=\"checkbox-indicator\"\n    className={cn(\"[&>svg]:size-3.5\", className)}\n    {...props}\n  >\n    {children ?? <CheckIcon />}\n  </CheckboxPrimitive.Indicator>\n));\nCheckboxIndicator.displayName = \"CheckboxIndicator\";\n\nconst CheckboxLabel = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<typeof CheckboxPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Label\n    ref={ref}\n    data-slot=\"checkbox-label\"\n    className={cn(\n      \"text-sm leading-none font-medium select-none peer-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  />\n));\nCheckboxLabel.displayName = \"CheckboxLabel\";\n\nconst CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;\n\nconst CheckboxGroup = CheckboxPrimitive.Group;\n\nconst CheckboxContext = CheckboxPrimitive.Context;\nconst CheckboxRootProvider = CheckboxPrimitive.RootProvider;\n\nexport {\n  Checkbox,\n  CheckboxRoot,\n  CheckboxControl,\n  CheckboxIndicator,\n  CheckboxLabel,\n  CheckboxHiddenInput,\n  CheckboxGroup,\n  CheckboxContext,\n  CheckboxRootProvider,\n};\n","checkbox.tsx",[1747,94,338,1802,1833],[1901],{"_68":1902,"_62":75,"_70":1903},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/react/carousel\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nconst Carousel = React.forwardRef<\n  React.ElementRef<typeof CarouselPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Root>\n>(({ className, spacing = \"1rem\", loop = false, page, ...props }, ref) => (\n  <CarouselPrimitive.Root\n    ref={ref}\n    data-slot=\"carousel\"\n    spacing={spacing}\n    loop={loop}\n    page={page}\n    className={cn(\n      \"relative flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row\",\n      className,\n    )}\n    {...props}\n  />\n));\nCarousel.displayName = \"Carousel\";\n\nconst CarouselContent = React.forwardRef<\n  React.ElementRef<typeof CarouselPrimitive.ItemGroup>,\n  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.ItemGroup>\n>(({ className, ...props }, ref) => (\n  <CarouselPrimitive.ItemGroup\n    ref={ref}\n    data-slot=\"carousel-content\"\n    className={cn(\n      \"flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n      className,\n    )}\n    {...props}\n  />\n));\nCarouselContent.displayName = \"CarouselContent\";\n\nconst CarouselItem = React.forwardRef<\n  React.ElementRef<typeof CarouselPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CarouselPrimitive.Item\n    ref={ref}\n    data-slot=\"carousel-item\"\n    className={cn(\"min-w-0 shrink-0 grow-0 basis-full\", className)}\n    {...props}\n  />\n));\nCarouselItem.displayName = \"CarouselItem\";\n\nconst CarouselControl = React.forwardRef<\n  React.ElementRef<typeof CarouselPrimitive.Control>,\n  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Control>\n>(({ className, ...props }, ref) => (\n  <CarouselPrimitive.Control\n    ref={ref}\n    data-slot=\"carousel-control\"\n    className={cn(\n      \"flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col\",\n      className,\n    )}\n    {...props}\n  />\n));\nCarouselControl.displayName = \"CarouselControl\";\n\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n  ({ className, children, variant = \"outline\", size = \"icon-sm\", ...props }, ref) => (\n    <CarouselPrimitive.PrevTrigger asChild>\n      <Button\n        ref={ref}\n        data-slot=\"carousel-previous\"\n        variant={variant}\n        size={size}\n        className={cn(\"touch-manipulation rounded-full disabled:opacity-50\", className)}\n        {...props}\n      >\n        {children ?? <ChevronLeftIcon className=\"cn-rtl-flip size-4\" />}\n        <span className=\"sr-only\">Previous slide</span>\n      </Button>\n    </CarouselPrimitive.PrevTrigger>\n  ),\n);\nCarouselPrevious.displayName = \"CarouselPrevious\";\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n  ({ className, children, variant = \"outline\", size = \"icon-sm\", ...props }, ref) => (\n    <CarouselPrimitive.NextTrigger asChild>\n      <Button\n        ref={ref}\n        data-slot=\"carousel-next\"\n        variant={variant}\n        size={size}\n        className={cn(\"touch-manipulation rounded-full disabled:opacity-50\", className)}\n        {...props}\n      >\n        {children ?? <ChevronRightIcon className=\"cn-rtl-flip size-4\" />}\n        <span className=\"sr-only\">Next slide</span>\n      </Button>\n    </CarouselPrimitive.NextTrigger>\n  ),\n);\nCarouselNext.displayName = \"CarouselNext\";\n\nconst CarouselIndicatorGroup = React.forwardRef<\n  React.ElementRef<typeof CarouselPrimitive.IndicatorGroup>,\n  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.IndicatorGroup>\n>(({ className, ...props }, ref) => (\n  <CarouselPrimitive.IndicatorGroup\n    ref={ref}\n    data-slot=\"carousel-indicator-group\"\n    className={cn(\"flex justify-center gap-2 data-[orientation=vertical]:flex-col\", className)}\n    {...props}\n  />\n));\nCarouselIndicatorGroup.displayName = \"CarouselIndicatorGroup\";\n\nconst CarouselIndicator = React.forwardRef<\n  React.ElementRef<typeof CarouselPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <CarouselPrimitive.Indicator\n    ref={ref}\n    data-slot=\"carousel-indicator\"\n    className={cn(\n      \"size-2.5 cursor-pointer rounded-full border-0 bg-muted-foreground/30 p-0 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-current:bg-primary\",\n      className,\n    )}\n    {...props}\n  />\n));\nCarouselIndicator.displayName = \"CarouselIndicator\";\n\nconst CarouselIndicators = React.forwardRef<\n  React.ElementRef<typeof CarouselPrimitive.IndicatorGroup>,\n  Omit<React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Indicator>, \"index\">\n>(function CarouselIndicators(props, ref) {\n  return (\n    <CarouselPrimitive.Context>\n      {(api) => (\n        <CarouselIndicatorGroup ref={ref}>\n          {api.pageSnapPoints.map((_, index) => (\n            <CarouselIndicator key={index} index={index} {...props} />\n          ))}\n        </CarouselIndicatorGroup>\n      )}\n    </CarouselPrimitive.Context>\n  );\n});\nCarouselIndicators.displayName = \"CarouselIndicators\";\n\nconst CarouselAutoplayTrigger = CarouselPrimitive.AutoplayTrigger;\nconst CarouselContext = CarouselPrimitive.Context;\nconst CarouselRootProvider = CarouselPrimitive.RootProvider;\n\nexport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselControl,\n  CarouselPrevious,\n  CarouselNext,\n  CarouselIndicatorGroup,\n  CarouselIndicator,\n  CarouselIndicators,\n  CarouselAutoplayTrigger,\n  CarouselContext,\n  CarouselRootProvider,\n};\n","carousel.tsx",[1747,94,1802],[1906],{"_68":1907,"_62":75,"_70":1908},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"root\"\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"header\"\n      data-slot=\"card-header\"\n      className={cn(\n        \"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"title\"\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"description\"\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"action\"\n      data-slot=\"card-action\"\n      className={cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"content\"\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"footer\"\n      data-slot=\"card-footer\"\n      className={cn(\n        \"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n","card.tsx",[1747,94,338,1802,633,1833],[1911],{"_68":1912,"_62":75,"_70":1913},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { DatePicker as DatePickerPrimitive } from \"@sprawlify/react/date-picker\";\nimport { type DateValue } from \"@internationalized/date\";\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nfunction CalendarViewHeader({\n  buttonVariant = \"ghost\",\n}: {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n}) {\n  return (\n    <DatePickerPrimitive.ViewControl className=\"relative flex w-full items-center justify-between gap-1\">\n      <Button\n        variant={buttonVariant}\n        size=\"icon\"\n        className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        asChild\n      >\n        <DatePickerPrimitive.PrevTrigger>\n          <ChevronLeftIcon className=\"size-4\" />\n        </DatePickerPrimitive.PrevTrigger>\n      </Button>\n\n      <DatePickerPrimitive.ViewTrigger className=\"flex h-(--cell-size) items-center justify-center text-sm font-medium select-none\">\n        <DatePickerPrimitive.RangeText />\n      </DatePickerPrimitive.ViewTrigger>\n\n      <Button\n        variant={buttonVariant}\n        size=\"icon\"\n        className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        asChild\n      >\n        <DatePickerPrimitive.NextTrigger>\n          <ChevronRightIcon className=\"size-4\" />\n        </DatePickerPrimitive.NextTrigger>\n      </Button>\n    </DatePickerPrimitive.ViewControl>\n  );\n}\n\nfunction CalendarSelectHeader({\n  buttonVariant = \"ghost\",\n  className,\n}: {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n  className?: string;\n}) {\n  return (\n    <DatePickerPrimitive.ViewControl\n      className={cn(\"relative flex w-full items-center justify-between gap-1\", className)}\n    >\n      <Button\n        variant={buttonVariant}\n        size=\"icon\"\n        className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        asChild\n      >\n        <DatePickerPrimitive.PrevTrigger>\n          <ChevronLeftIcon className=\"size-4\" />\n        </DatePickerPrimitive.PrevTrigger>\n      </Button>\n\n      <div className=\"flex items-center gap-1\">\n        <span className=\"relative\">\n          <DatePickerPrimitive.MonthSelect className=\"appearance-none rounded-md bg-transparent py-1 pr-6 pl-2 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50\" />\n          <ChevronDownIcon className=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n        </span>\n        <span className=\"relative\">\n          <DatePickerPrimitive.YearSelect className=\"appearance-none rounded-md bg-transparent py-1 pr-6 pl-2 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50\" />\n          <ChevronDownIcon className=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n        </span>\n      </div>\n\n      <Button\n        variant={buttonVariant}\n        size=\"icon\"\n        className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        asChild\n      >\n        <DatePickerPrimitive.NextTrigger>\n          <ChevronRightIcon className=\"size-4\" />\n        </DatePickerPrimitive.NextTrigger>\n      </Button>\n    </DatePickerPrimitive.ViewControl>\n  );\n}\n\nfunction CalendarDayView({\n  showOutsideDays = true,\n  header,\n  cell,\n}: {\n  showOutsideDays?: boolean;\n  header?: React.ReactNode;\n  cell?: (day: DateValue) => React.ReactNode;\n}) {\n  return (\n    <DatePickerPrimitive.View view=\"day\" className=\"flex flex-col gap-4\">\n      <DatePickerPrimitive.Context>\n        {(api) => (\n          <>\n            {header ?? <CalendarSelectHeader />}\n            <CalendarDayTable\n              weeks={api.weeks}\n              weekDays={api.weekDays}\n              focusedMonth={api.focusedValue.month}\n              showOutsideDays={showOutsideDays}\n              cell={cell}\n            />\n          </>\n        )}\n      </DatePickerPrimitive.Context>\n    </DatePickerPrimitive.View>\n  );\n}\n\nfunction CalendarMonthView({\n  header,\n  cell,\n}: {\n  header?: React.ReactNode;\n  cell?: (month: { label: string; value: number }) => React.ReactNode;\n}) {\n  return (\n    <DatePickerPrimitive.View view=\"month\" className=\"flex flex-col gap-4\">\n      <DatePickerPrimitive.Context>\n        {(api) => (\n          <>\n            {header ?? <CalendarSelectHeader />}\n            <DatePickerPrimitive.Table className=\"w-full border-collapse\">\n              <DatePickerPrimitive.TableBody>\n                {api.getMonthsGrid({ columns: 4, format: \"short\" }).map((months, rowIndex) => (\n                  <DatePickerPrimitive.TableRow key={rowIndex} className=\"mt-2 flex w-full\">\n                    {months.map((month, colIndex) => (\n                      <DatePickerPrimitive.TableCell\n                        key={colIndex}\n                        value={month.value}\n                        className=\"flex-1 p-0 text-center\"\n                      >\n                        <DatePickerPrimitive.TableCellTrigger asChild>\n                          <Button variant=\"ghost\" className=\"w-full text-sm font-normal\">\n                            {cell ? cell(month) : month.label}\n                          </Button>\n                        </DatePickerPrimitive.TableCellTrigger>\n                      </DatePickerPrimitive.TableCell>\n                    ))}\n                  </DatePickerPrimitive.TableRow>\n                ))}\n              </DatePickerPrimitive.TableBody>\n            </DatePickerPrimitive.Table>\n          </>\n        )}\n      </DatePickerPrimitive.Context>\n    </DatePickerPrimitive.View>\n  );\n}\n\nfunction CalendarYearView({\n  header,\n  cell,\n}: {\n  header?: React.ReactNode;\n  cell?: (year: { label: string; value: number }) => React.ReactNode;\n}) {\n  return (\n    <DatePickerPrimitive.View view=\"year\" className=\"flex flex-col gap-4\">\n      <DatePickerPrimitive.Context>\n        {(api) => (\n          <>\n            {header ?? <CalendarSelectHeader />}\n            <DatePickerPrimitive.Table className=\"w-full border-collapse\">\n              <DatePickerPrimitive.TableBody>\n                {api.getYearsGrid({ columns: 4 }).map((years, rowIndex) => (\n                  <DatePickerPrimitive.TableRow key={rowIndex} className=\"mt-2 flex w-full\">\n                    {years.map((year, colIndex) => (\n                      <DatePickerPrimitive.TableCell\n                        key={colIndex}\n                        value={year.value}\n                        className=\"flex-1 p-0 text-center\"\n                      >\n                        <DatePickerPrimitive.TableCellTrigger asChild>\n                          <Button variant=\"ghost\" className=\"w-full text-sm font-normal\">\n                            {cell ? cell(year) : year.label}\n                          </Button>\n                        </DatePickerPrimitive.TableCellTrigger>\n                      </DatePickerPrimitive.TableCell>\n                    ))}\n                  </DatePickerPrimitive.TableRow>\n                ))}\n              </DatePickerPrimitive.TableBody>\n            </DatePickerPrimitive.Table>\n          </>\n        )}\n      </DatePickerPrimitive.Context>\n    </DatePickerPrimitive.View>\n  );\n}\n\nfunction CalendarDayButton({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof DatePickerPrimitive.TableCellTrigger>) {\n  return (\n    <DatePickerPrimitive.TableCellTrigger\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) items-center justify-center gap-1 rounded-(--cell-radius) border-0 text-sm leading-none font-normal\",\n        \"hover:bg-accent hover:text-accent-foreground\",\n        \"data-[selected]:bg-primary data-[selected]:text-primary-foreground\",\n        \"data-[today]:bg-accent data-[today]:text-accent-foreground\",\n        \"data-[outside-range]:text-muted-foreground/50\",\n        \"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50\",\n        \"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[unavailable]:opacity-40\",\n        \"data-[in-range]:rounded-none data-[in-range]:bg-accent data-[in-range]:text-accent-foreground\",\n        \"data-[range-start]:rounded-l-(--cell-radius) data-[range-start]:bg-primary data-[range-start]:text-primary-foreground\",\n        \"data-[range-end]:rounded-r-(--cell-radius) data-[range-end]:bg-primary data-[range-end]:text-primary-foreground\",\n        \"focus-visible:relative focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </DatePickerPrimitive.TableCellTrigger>\n  );\n}\n\nfunction CalendarDayTable({\n  weeks,\n  weekDays,\n  focusedMonth,\n  showOutsideDays = true,\n  visibleRange,\n  cell,\n}: {\n  weeks: DateValue[][];\n  weekDays: { short: string }[];\n  focusedMonth: number;\n  showOutsideDays?: boolean;\n  visibleRange?: { start: DateValue; end: DateValue };\n  cell?: (day: DateValue) => React.ReactNode;\n}) {\n  return (\n    <DatePickerPrimitive.Table className=\"w-full border-collapse\">\n      <DatePickerPrimitive.TableHead>\n        <DatePickerPrimitive.TableRow className=\"flex\">\n          {weekDays.map((weekDay, i) => (\n            <DatePickerPrimitive.TableHeader\n              key={i}\n              className=\"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\"\n            >\n              {weekDay.short}\n            </DatePickerPrimitive.TableHeader>\n          ))}\n        </DatePickerPrimitive.TableRow>\n      </DatePickerPrimitive.TableHead>\n      <DatePickerPrimitive.TableBody>\n        {weeks.map((week, weekIndex) => (\n          <DatePickerPrimitive.TableRow key={weekIndex} className=\"mt-2 flex w-full\">\n            {week.map((day, dayIndex) => {\n              const isOutside = day.month !== focusedMonth;\n              if (!showOutsideDays && isOutside) {\n                return <td key={dayIndex} className=\"flex-1 p-0\" aria-hidden />;\n              }\n              return (\n                <DatePickerPrimitive.TableCell\n                  key={dayIndex}\n                  value={day}\n                  visibleRange={visibleRange}\n                  className={cn(\n                    \"group/day relative aspect-square h-full w-full flex-1 rounded-(--cell-radius) p-0 text-center select-none\",\n                    \"[&:last-child[data-selected]_div]:rounded-r-(--cell-radius)\",\n                    \"[&:first-child[data-selected]_div]:rounded-l-(--cell-radius)\",\n                  )}\n                >\n                  <CalendarDayButton>{cell ? cell(day) : day.day}</CalendarDayButton>\n                </DatePickerPrimitive.TableCell>\n              );\n            })}\n          </DatePickerPrimitive.TableRow>\n        ))}\n      </DatePickerPrimitive.TableBody>\n    </DatePickerPrimitive.Table>\n  );\n}\n\nfunction CalendarDualMonthDayView({\n  showOutsideDays = true,\n  cell,\n}: {\n  showOutsideDays?: boolean;\n  cell?: (day: DateValue) => React.ReactNode;\n}) {\n  return (\n    <DatePickerPrimitive.View view=\"day\" className=\"flex flex-col gap-4\">\n      <DatePickerPrimitive.Context>\n        {(api) => {\n          const offset = api.getOffset({ months: 1 });\n          return (\n            <div className=\"flex gap-4 flex-row\">\n              {/* First month */}\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"relative flex w-full items-center justify-between gap-1\">\n                  <DatePickerPrimitive.PrevTrigger asChild>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n                    >\n                      <ChevronLeftIcon className=\"size-4\" />\n                    </Button>\n                  </DatePickerPrimitive.PrevTrigger>\n                  <span className=\"text-sm font-medium select-none\">\n                    {api.visibleRangeText.start}\n                  </span>\n                  <div className=\"size-(--cell-size)\" />\n                </div>\n                <CalendarDayTable\n                  weeks={api.weeks}\n                  weekDays={api.weekDays}\n                  focusedMonth={api.focusedValue.month}\n                  showOutsideDays={showOutsideDays}\n                  cell={cell}\n                />\n              </div>\n              {/* Second month */}\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"relative flex w-full items-center justify-between gap-1\">\n                  <div className=\"size-(--cell-size)\" />\n                  <span className=\"text-sm font-medium select-none\">\n                    {api.visibleRangeText.end}\n                  </span>\n                  <DatePickerPrimitive.NextTrigger asChild>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n                    >\n                      <ChevronRightIcon className=\"size-4\" />\n                    </Button>\n                  </DatePickerPrimitive.NextTrigger>\n                </div>\n                <CalendarDayTable\n                  weeks={offset.weeks}\n                  weekDays={api.weekDays}\n                  focusedMonth={offset.visibleRange.start.month}\n                  showOutsideDays={showOutsideDays}\n                  visibleRange={offset.visibleRange}\n                  cell={cell}\n                />\n              </div>\n            </div>\n          );\n        }}\n      </DatePickerPrimitive.Context>\n    </DatePickerPrimitive.View>\n  );\n}\n\nfunction Calendar({\n  className,\n  showOutsideDays = true,\n  children,\n  numOfMonths,\n  ...props\n}: Omit<React.ComponentProps<typeof DatePickerPrimitive.Root>, \"inline\"> & {\n  className?: string;\n  showOutsideDays?: boolean;\n  children?: React.ReactNode;\n}) {\n  const isDualMonth = numOfMonths && numOfMonths >= 2;\n\n  return (\n    <DatePickerPrimitive.Root inline numOfMonths={numOfMonths} {...props}>\n      <div\n        data-slot=\"calendar\"\n        className={cn(\n          \"group/calendar w-fit bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n          className,\n        )}\n      >\n        {children || (\n          <>\n            {isDualMonth ? (\n              <CalendarDualMonthDayView showOutsideDays={showOutsideDays} />\n            ) : (\n              <CalendarDayView showOutsideDays={showOutsideDays} />\n            )}\n            <CalendarMonthView />\n            <CalendarYearView />\n          </>\n        )}\n      </div>\n    </DatePickerPrimitive.Root>\n  );\n}\n\nconst CalendarPresetTrigger = DatePickerPrimitive.PresetTrigger;\n\nexport {\n  Calendar,\n  CalendarDayView,\n  CalendarDualMonthDayView,\n  CalendarDayTable,\n  CalendarMonthView,\n  CalendarYearView,\n  CalendarViewHeader,\n  CalendarSelectHeader,\n  CalendarDayButton,\n  CalendarPresetTrigger,\n};\n","calendar.tsx",[123,94,389,1802],[1916],{"_68":1917,"_62":75,"_70":1918},"\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  },\n);\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"button-group\"\n      data-part=\"root\"\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction ButtonGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      className={cn(\n        \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-scope=\"button-group\"\n      data-part=\"separator\"\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n","button-group.tsx",[1747,123,94,1802],[1921],{"_68":1922,"_62":75,"_70":1923},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.button> & VariantProps<typeof buttonVariants>) {\n  return (\n    <sprawlify.button\n      data-scope=\"button\"\n      data-part=\"root\"\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n","button.tsx",[1747,1833,94,1802],[1926],{"_68":1927,"_62":75,"_70":1928},"import * as React from \"react\";\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<typeof sprawlify.nav>) {\n  return (\n    <sprawlify.nav\n      data-scope=\"breadcrumb\"\n      data-part=\"root\"\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<typeof sprawlify.ol>) {\n  return (\n    <sprawlify.ol\n      data-scope=\"breadcrumb\"\n      data-part=\"list\"\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<typeof sprawlify.li>) {\n  return (\n    <sprawlify.li\n      data-scope=\"breadcrumb\"\n      data-part=\"item\"\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.a>) {\n  return (\n    <sprawlify.a\n      data-scope=\"breadcrumb\"\n      data-part=\"link\"\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-scope=\"breadcrumb\"\n      data-part=\"page\"\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.li>) {\n  return (\n    <sprawlify.li\n      data-scope=\"breadcrumb\"\n      data-part=\"separator\"\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRightIcon />}\n    </sprawlify.li>\n  );\n}\n\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-scope=\"breadcrumb\"\n      data-part=\"ellipsis\"\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </sprawlify.span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n","breadcrumb.tsx",[1747,123,94,1802],[1931],{"_68":1932,"_62":75,"_70":1933},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary: \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.span> & VariantProps<typeof badgeVariants>) {\n  return (\n    <sprawlify.span\n      data-scope=\"badge\"\n      data-part=\"root\"\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\n","badge.tsx",[1747,1802,94],[1936],{"_68":1937,"_62":75,"_70":1938},"\"use client\";\n\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/react/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\";\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square rounded-[inherit] size-full overflow-hidden\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"rounded-[inherit] overflow-hidden bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-scope=\"avatar\"\n      data-part=\"badge\"\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"avatar\"\n      data-paert=\"group\"\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"avatar\"\n      data-paert=\"group-count\"\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };\n","avatar.tsx",[1802],[1941],{"_68":1942,"_62":75,"_70":1943},"\"use client\";\n\nimport { AspectRatio as AspectRatioPrimitive } from \"@sprawlify/react/aspect-ratio\";\n\nfunction AspectRatio({\n  children,\n  ...props\n}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {\n  return (\n    <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props}>\n      <AspectRatioPrimitive.Content data-slot=\"aspect-ratio-content\">\n        {children}\n      </AspectRatioPrimitive.Content>\n    </AspectRatioPrimitive.Root>\n  );\n}\n\nexport { AspectRatio };\n","aspect-ratio.tsx",[1747,1802,94,338],[1946],{"_68":1947,"_62":75,"_70":1948},"\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/react/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n  return <Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nfunction AlertDialogBackdrop({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-backdrop\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\";\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogBackdrop />\n      <AlertDialogPrimitive.Positioner>\n        <AlertDialogPrimitive.Content\n          data-slot=\"alert-dialog-content\"\n          data-size={size}\n          className={cn(\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n            className,\n          )}\n          {...props}\n        />\n      </AlertDialogPrimitive.Positioner>\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <sprawlify.div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogMedia({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  value = \"cancel\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.CloseTrigger\n        data-slot=\"alert-dialog-cancel\"\n        value={value}\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  );\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.CloseTrigger\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogBackdrop,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n","alert-dialog.tsx",[1747,123,94,1802],[1951],{"_68":1952,"_62":75,"_70":1953},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof alertVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"root\"\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"title\"\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"description\"\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"action\"\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction };\n","alert.tsx",[1747,1802,94,1833],[1956],{"_68":1957,"_62":75,"_70":1958},"\"use client\";\n\nimport * as React from \"react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nfunction Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"group not-last:border-b\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.ItemTrigger>) {\n  return (\n    <AccordionPrimitive.ItemTrigger\n      data-slot=\"accordion-trigger\"\n      className={cn(\n        \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <AccordionPrimitive.ItemIndicator className=\"ml-2 transition-transform duration-200 data-[state=open]:rotate-180\">\n        <ChevronDownIcon\n          data-slot=\"accordion-trigger-icon\"\n          className=\"pointer-events-none shrink-0\"\n        />\n      </AccordionPrimitive.ItemIndicator>\n    </AccordionPrimitive.ItemTrigger>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.ItemContent>) {\n  return (\n    <AccordionPrimitive.ItemContent\n      data-slot=\"accordion-content\"\n      className=\"data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.ItemContent>\n  );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n","accordion.tsx",[1960,1961],{"_811":1735,"_813":1736,"_26":2489},{"_811":812,"_813":814,"_26":1962},[1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994],{"_811":787,"_813":1706,"_849":1707,"_853":2473,"_855":2474},{"_811":769,"_813":1682,"_849":1683,"_853":2459,"_855":2460},{"_811":727,"_813":1651,"_849":1652,"_853":2443,"_855":2444},{"_811":718,"_813":1631,"_849":1632,"_853":2432,"_855":2433},{"_811":694,"_813":1131,"_849":1600,"_853":2414,"_855":2415},{"_811":685,"_813":1232,"_849":1575,"_853":2400,"_855":2401},{"_811":658,"_813":1549,"_849":1550,"_853":2386,"_855":2387},{"_811":649,"_813":902,"_849":1507,"_853":2360,"_855":2361},{"_811":634,"_813":1226,"_849":1484,"_853":2346,"_855":2347},{"_811":597,"_813":1452,"_849":1453,"_851":852,"_853":2325,"_855":2326},{"_811":570,"_813":1434,"_849":1435,"_853":2315,"_855":2316},{"_811":537,"_813":1411,"_849":1412,"_851":852,"_853":2303,"_855":2304},{"_811":516,"_813":1257,"_849":956,"_853":2289,"_855":2290},{"_811":501,"_813":1371,"_849":1372,"_853":2275,"_855":2276},{"_811":465,"_813":1341,"_849":1342,"_853":2261,"_855":2262},{"_811":414,"_813":1287,"_849":1288,"_853":2234,"_855":2235},{"_811":390,"_813":1259,"_849":1260,"_853":2220,"_855":2221},{"_811":350,"_813":895,"_849":1239,"_855":2205,"_853":2206},{"_811":341,"_813":1181,"_849":1182,"_853":2176,"_855":2177},{"_811":314,"_813":1088,"_849":1138,"_853":2152,"_855":2153},{"_811":278,"_813":1101,"_849":1102,"_853":2134,"_855":2135},{"_811":266,"_813":1079,"_849":1080,"_853":2122,"_855":2123},{"_811":257,"_813":1066,"_849":1067,"_853":2113,"_855":2114},{"_811":242,"_813":1048,"_849":1049,"_853":2101,"_855":2102},{"_811":230,"_813":1032,"_849":1033,"_853":2091,"_855":2092},{"_811":181,"_813":1007,"_849":1008,"_851":852,"_853":2076,"_855":2077},{"_811":172,"_813":984,"_849":985,"_853":2064,"_855":2065},{"_811":154,"_813":955,"_849":956,"_851":852,"_853":2048,"_855":2049},{"_811":124,"_813":935,"_849":936,"_853":2037,"_855":2038},{"_811":105,"_813":909,"_849":910,"_853":2022,"_855":2023},{"_811":95,"_813":881,"_849":882,"_853":2008,"_855":2009},{"_811":74,"_813":848,"_849":850,"_851":852,"_853":1995,"_855":1996},[2005,2006],[1997,1998,1999,2000],{"_811":871,"_19":872,"_849":873,"_68":2004},{"_811":867,"_19":868,"_849":869,"_68":2003},{"_811":864,"_19":865,"_68":2002},{"_811":861,"_19":862,"_68":2001},"import { Button } from \"@/components/ui/button\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { SaveIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\" size=\"icon-sm\">\n          <SaveIcon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        Save Changes <Kbd>S</Kbd>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\n\nexport default function Preview() {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\">Hover</Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      {([\"left\", \"top\", \"bottom\", \"right\"] as const).map((side) => (\n        <Tooltip key={side} positioning={{ placement: side }}>\n          <TooltipTrigger asChild>\n            <Button variant=\"outline\" className=\"w-fit capitalize\">\n              {side}\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p>Add to library</p>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n    </div>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\n\nexport default function Preview() {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <span className=\"inline-block w-fit\">\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </span>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>This feature is currently unavailable</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n",{"_877":2007,"_68":880},{"_877":2007,"_68":879},"tsx",[2020,2021],[2010,2011,2012,2013,2014],{"_811":649,"_19":902,"_849":903,"_68":2019},{"_811":898,"_19":899,"_849":900,"_68":2018},{"_811":350,"_19":895,"_849":896,"_68":2017},{"_811":891,"_19":892,"_849":893,"_68":2016},{"_811":864,"_19":865,"_68":2015},"import { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return <Textarea className=\"max-w-sm\" placeholder=\"Type your message here.\" />;\n}\n","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\" data-invalid>\n      <FieldLabel htmlFor=\"textarea-invalid\">Message</FieldLabel>\n      <Textarea id=\"textarea-invalid\" placeholder=\"Type your message here.\" aria-invalid />\n      <FieldDescription>Please enter a valid message.</FieldDescription>\n    </Field>\n  );\n}\n","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"textarea-message\">Message</FieldLabel>\n      <FieldDescription>Enter your message below.</FieldDescription>\n      <Textarea id=\"textarea-message\" placeholder=\"Type your message here.\" />\n    </Field>\n  );\n}\n","import { Field, FieldLabel } from \"@/components/ui/field\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\" data-disabled>\n      <FieldLabel htmlFor=\"textarea-disabled\">Message</FieldLabel>\n      <Textarea id=\"textarea-disabled\" placeholder=\"Type your message here.\" disabled />\n    </Field>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full gap-2 max-w-sm\">\n      <Textarea placeholder=\"Type your message here.\" />\n      <Button>Send message</Button>\n    </div>\n  );\n}\n",{"_877":2007,"_68":908},{"_877":2007,"_68":907},[2034,2035],[2024,2025,2026,2027,2028],{"_811":898,"_19":899,"_68":2033},{"_811":927,"_19":928,"_68":2032},{"_811":923,"_19":924,"_849":925,"_68":2031},{"_811":864,"_19":865,"_68":2030},{"_811":918,"_19":919,"_849":920,"_68":2029},"import { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport default function Preview() {\n  return (\n    <Tabs defaultValue=\"account\" orientation=\"vertical\">\n      <TabsList>\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n        <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n      </TabsList>\n    </Tabs>\n  );\n}\n","import { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport default function Preview() {\n  return (\n    <Tabs defaultValue=\"overview\" className=\"w-[400px]\">\n      <TabsList>\n        <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n        <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n        <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"overview\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Overview</CardTitle>\n            <CardDescription>\n              View your key metrics and recent project activity. Track progress across all your\n              active projects.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"text-muted-foreground text-sm\">\n            You have 12 active projects and 3 pending tasks.\n          </CardContent>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"analytics\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Analytics</CardTitle>\n            <CardDescription>\n              Track performance and user engagement metrics. Monitor trends and identify growth\n              opportunities.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"text-muted-foreground text-sm\">\n            Page views are up 25% compared to last month.\n          </CardContent>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"reports\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Reports</CardTitle>\n            <CardDescription>\n              Generate and download your detailed reports. Export data in multiple formats for\n              analysis.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"text-muted-foreground text-sm\">\n            You have 5 reports ready and available to export.\n          </CardContent>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"settings\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Settings</CardTitle>\n            <CardDescription>\n              Manage your account preferences and options. Customize your experience to fit your\n              needs.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"text-muted-foreground text-sm\">\n            Configure notifications, security, and themes.\n          </CardContent>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  );\n}\n","import { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport default function Preview() {\n  return (\n    <Tabs defaultValue=\"overview\">\n      <TabsList variant=\"line\">\n        <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n        <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n        <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n      </TabsList>\n    </Tabs>\n  );\n}\n","import { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { AppWindowIcon, CodeIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Tabs defaultValue=\"preview\">\n      <TabsList>\n        <TabsTrigger value=\"preview\">\n          <AppWindowIcon />\n          Preview\n        </TabsTrigger>\n        <TabsTrigger value=\"code\">\n          <CodeIcon />\n          Code\n        </TabsTrigger>\n      </TabsList>\n    </Tabs>\n  );\n}\n","import { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport default function Preview() {\n  return (\n    <Tabs defaultValue=\"home\">\n      <TabsList>\n        <TabsTrigger value=\"home\">Home</TabsTrigger>\n        <TabsTrigger value=\"settings\" disabled>\n          Disabled\n        </TabsTrigger>\n      </TabsList>\n    </Tabs>\n  );\n}\n",{"_877":2007,"_68":934},{"_877":2007,"_68":2036},"<Tabs defaultValue=\"account\" className=\"w-[400px]\">\r\n  <TabsList>\r\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\r\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\r\n  </TabsList>\r\n  <TabsContent value=\"account\">Make changes to your account here.</TabsContent>\r\n  <TabsContent value=\"password\">Change your password here.</TabsContent>\r\n</Tabs>",[2045,2046],[2039,2040,2041],{"_811":947,"_19":948,"_849":949,"_68":2044},{"_811":943,"_19":944,"_849":945,"_68":2043},{"_811":864,"_19":865,"_68":2042},"import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  );\n}\n","import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.slice(0, 3).map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport { MoreHorizontalIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Table>\n      <TableHeader>\n        <TableRow>\n          <TableHead>Product</TableHead>\n          <TableHead>Price</TableHead>\n          <TableHead className=\"text-right\">Actions</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <TableRow>\n          <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n          <TableCell>$29.99</TableCell>\n          <TableCell className=\"text-right\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                  <MoreHorizontalIcon />\n                  <span className=\"sr-only\">Open menu</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuItem value=\"edit\">Edit</DropdownMenuItem>\n                <DropdownMenuItem value=\"duplicate\">Duplicate</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem value=\"delete\" variant=\"destructive\">\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n          <TableCell>$129.99</TableCell>\n          <TableCell className=\"text-right\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                  <MoreHorizontalIcon />\n                  <span className=\"sr-only\">Open menu</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuItem value=\"edit\">Edit</DropdownMenuItem>\n                <DropdownMenuItem value=\"duplicate\">Duplicate</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem value=\"delete\" variant=\"destructive\">\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n          <TableCell>$49.99</TableCell>\n          <TableCell className=\"text-right\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                  <MoreHorizontalIcon />\n                  <span className=\"sr-only\">Open menu</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuItem value=\"edit\">Edit</DropdownMenuItem>\n                <DropdownMenuItem value=\"duplicate\">Duplicate</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem value=\"delete\" variant=\"destructive\">\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    </Table>\n  );\n}\n",{"_877":2007,"_68":954},{"_877":2007,"_68":2047},"<Table>\r\n  <TableCaption>A list of your recent invoices.</TableCaption>\r\n  <TableHeader>\r\n    <TableRow>\r\n      <TableHead className=\"w-[100px]\">Invoice</TableHead>\r\n      <TableHead>Status</TableHead>\r\n      <TableHead>Method</TableHead>\r\n      <TableHead className=\"text-right\">Amount</TableHead>\r\n    </TableRow>\r\n  </TableHeader>\r\n  <TableBody>\r\n    <TableRow>\r\n      <TableCell className=\"font-medium\">INV001</TableCell>\r\n      <TableCell>Paid</TableCell>\r\n      <TableCell>Credit Card</TableCell>\r\n      <TableCell className=\"text-right\">$250.00</TableCell>\r\n    </TableRow>\r\n  </TableBody>\r\n</Table>",[2062,2063],[2050,2051,2052,2053,2054,2055],{"_811":976,"_19":977,"_849":978,"_68":2061},{"_811":849,"_19":974,"_68":2060},{"_811":898,"_19":899,"_849":972,"_68":2059},{"_811":891,"_19":892,"_849":970,"_68":2058},{"_811":864,"_19":865,"_68":2057},{"_811":965,"_19":966,"_849":967,"_68":2056},"import {\n  Switch,\n  SwitchControl,\n  SwitchHiddenInput,\n  SwitchLabel,\n  SwitchThumb,\n} from \"@/components/ui/switch\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col w-fit space-y-2\">\n      <Switch id=\"switch-size-sm\" size=\"sm\">\n        <SwitchControl>\n          <SwitchThumb />\n        </SwitchControl>\n        <SwitchLabel>Small</SwitchLabel>\n        <SwitchHiddenInput />\n      </Switch>\n      <Switch id=\"switch-size-default\">\n        <SwitchControl>\n          <SwitchThumb />\n        </SwitchControl>\n        <SwitchLabel>Default</SwitchLabel>\n        <SwitchHiddenInput />\n      </Switch>\n    </div>\n  );\n}\n","import {\n  Switch,\n  SwitchControl,\n  SwitchHiddenInput,\n  SwitchLabel,\n  SwitchThumb,\n} from \"@/components/ui/switch\";\n\nexport default function Preview() {\n  return (\n    <Switch id=\"airplane-mode\">\n      <SwitchControl>\n        <SwitchThumb />\n      </SwitchControl>\n      <SwitchLabel>Airplane Mode</SwitchLabel>\n      <SwitchHiddenInput />\n    </Switch>\n  );\n}\n","import {\n  Switch,\n  SwitchControl,\n  SwitchHiddenInput,\n  SwitchLabel,\n  SwitchThumb,\n} from \"@/components/ui/switch\";\n\nexport default function Preview() {\n  return (\n    <Switch id=\"switch-terms\" invalid className=\"max-w-sm\">\n      <SwitchControl>\n        <SwitchThumb />\n      </SwitchControl>\n      <SwitchLabel>Accept terms and conditions</SwitchLabel>\n      <SwitchHiddenInput />\n    </Switch>\n  );\n}\n","import {\n  Switch,\n  SwitchControl,\n  SwitchHiddenInput,\n  SwitchLabel,\n  SwitchThumb,\n} from \"@/components/ui/switch\";\n\nexport default function Preview() {\n  return (\n    <Switch id=\"switch-disabled-unchecked\" disabled>\n      <SwitchControl>\n        <SwitchThumb />\n      </SwitchControl>\n      <SwitchLabel>Disabled</SwitchLabel>\n      <SwitchHiddenInput />\n    </Switch>\n  );\n}\n","import { Field, FieldContent, FieldDescription } from \"@/components/ui/field\";\nimport { Switch, SwitchControl, SwitchHiddenInput, SwitchThumb } from \"@/components/ui/switch\";\nimport { SwitchLabel } from \"@sprawlify/react/switch\";\n\nexport default function Preview() {\n  return (\n    <Field orientation=\"horizontal\" className=\"max-w-sm\" asChild>\n      <Switch id=\"switch-focus-mode\">\n        <FieldContent>\n          <SwitchLabel>Share across devices</SwitchLabel>\n          <FieldDescription>\n            Focus is shared across devices, and turns off when you leave the app.\n          </FieldDescription>\n        </FieldContent>\n        <SwitchControl>\n          <SwitchThumb />\n        </SwitchControl>\n        <SwitchHiddenInput />\n      </Switch>\n    </Field>\n  );\n}\n","import {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldTitle,\n} from \"@/components/ui/field\";\nimport { Switch, SwitchControl, SwitchHiddenInput, SwitchThumb } from \"@/components/ui/switch\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"w-full max-w-sm\">\n      <FieldLabel htmlFor=\"switch-share\">\n        <Field orientation=\"horizontal\" asChild>\n          <Switch id=\"switch-share\">\n            <FieldContent>\n              <FieldTitle>Share across devices</FieldTitle>\n              <FieldDescription>\n                Focus is shared across devices, and turns off when you leave the app.\n              </FieldDescription>\n            </FieldContent>\n            <SwitchControl>\n              <SwitchThumb />\n            </SwitchControl>\n            <SwitchHiddenInput />\n          </Switch>\n        </Field>\n      </FieldLabel>\n      <FieldLabel htmlFor=\"switch-notifications\">\n        <Field orientation=\"horizontal\" asChild>\n          <Switch id=\"switch-notifications\" defaultChecked>\n            <FieldContent>\n              <FieldTitle>Enable notifications</FieldTitle>\n              <FieldDescription>\n                Receive notifications when focus mode is enabled or disabled.\n              </FieldDescription>\n            </FieldContent>\n            <SwitchControl>\n              <SwitchThumb />\n            </SwitchControl>\n            <SwitchHiddenInput />\n          </Switch>\n        </Field>\n      </FieldLabel>\n    </FieldGroup>\n  );\n}\n",{"_877":2007,"_68":983},{"_877":2007,"_68":982},[2074,2075],[2066,2067,2068,2069],{"_811":999,"_19":1000,"_849":1001,"_68":2073},{"_811":995,"_19":996,"_849":997,"_68":2072},{"_811":864,"_19":865,"_68":2071},{"_811":918,"_19":919,"_849":992,"_68":2070},"import { Separator } from \"@/components/ui/separator\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex h-5 items-center gap-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  );\n}\n","import { Separator } from \"@/components/ui/separator\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex max-w-sm flex-col gap-4 text-sm\">\n      <div className=\"flex flex-col gap-1.5\">\n        <div className=\"leading-none font-medium\">sprawlify/ui</div>\n        <div className=\"text-muted-foreground\">The Foundation for your Design System</div>\n      </div>\n      <Separator />\n      <div>\n        A set of beautifully designed components that you can customize, extend, and build on.\n      </div>\n    </div>\n  );\n}\n","import { Separator } from \"@/components/ui/separator\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex items-center gap-2 text-sm md:gap-4\">\n      <div className=\"flex flex-col gap-1\">\n        <span className=\"font-medium\">Settings</span>\n        <span className=\"text-muted-foreground text-xs\">Manage preferences</span>\n      </div>\n      <Separator orientation=\"vertical\" />\n      <div className=\"flex flex-col gap-1\">\n        <span className=\"font-medium\">Account</span>\n        <span className=\"text-muted-foreground text-xs\">Profile & security</span>\n      </div>\n      <Separator orientation=\"vertical\" className=\"hidden md:block\" />\n      <div className=\"hidden flex-col gap-1 md:flex\">\n        <span className=\"font-medium\">Help</span>\n        <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n      </div>\n    </div>\n  );\n}\n","import { Separator } from \"@/components/ui/separator\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-2 text-sm\">\n      <dl className=\"flex items-center justify-between\">\n        <dt>Item 1</dt>\n        <dd className=\"text-muted-foreground\">Value 1</dd>\n      </dl>\n      <Separator />\n      <dl className=\"flex items-center justify-between\">\n        <dt>Item 2</dt>\n        <dd className=\"text-muted-foreground\">Value 2</dd>\n      </dl>\n      <Separator />\n      <dl className=\"flex items-center justify-between\">\n        <dt>Item 3</dt>\n        <dd className=\"text-muted-foreground\">Value 3</dd>\n      </dl>\n    </div>\n  );\n}\n",{"_877":2007,"_68":1006},{"_877":2007,"_68":1005},[2088,2089],[2078,2079,2080,2081,2082],{"_811":898,"_19":899,"_849":1026,"_68":2087},{"_811":1022,"_19":1023,"_849":1024,"_68":2086},{"_811":891,"_19":892,"_849":1020,"_68":2085},{"_811":1017,"_19":1018,"_68":2084},{"_811":864,"_19":865,"_68":2083},"import {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectIndicatorGroup,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\n\nconst fruits = createListCollection({\n  items: [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ],\n});\n\nexport default function Preview() {\n  return (\n    <Select collection={fruits} className=\"w-full max-w-48\">\n      <SelectHiddenSelect />\n      <SelectControl>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectIndicatorGroup>\n          <SelectIndicator />\n        </SelectIndicatorGroup>\n      </SelectControl>\n      <SelectContent>\n        <SelectItemGroup>\n          <SelectItemGroupLabel>Fruits</SelectItemGroupLabel>\n          {fruits.items.map((item) => (\n            <SelectItem key={item.value} item={item}>\n              <SelectItemText>{item.label}</SelectItemText>\n              <SelectItemIndicator />\n            </SelectItem>\n          ))}\n        </SelectItemGroup>\n      </SelectContent>\n    </Select>\n  );\n}\n","import {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectIndicatorGroup,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\n\nconst collection = createListCollection({\n  items: [\n    { label: \"Eastern Standard Time\", value: \"est\", type: \"North America\" },\n    { label: \"Central Standard Time\", value: \"cst\", type: \"North America\" },\n    { label: \"Mountain Standard Time\", value: \"mst\", type: \"North America\" },\n    { label: \"Pacific Standard Time\", value: \"pst\", type: \"North America\" },\n    { label: \"Alaska Standard Time\", value: \"akst\", type: \"North America\" },\n    { label: \"Hawaii Standard Time\", value: \"hst\", type: \"North America\" },\n    { label: \"Greenwich Mean Time\", value: \"gmt\", type: \"Europe & Africa\" },\n    { label: \"Central European Time\", value: \"cet\", type: \"Europe & Africa\" },\n    { label: \"Eastern European Time\", value: \"eet\", type: \"Europe & Africa\" },\n    {\n      label: \"Western European Summer Time\",\n      value: \"west\",\n      type: \"Europe & Africa\",\n    },\n    { label: \"Central Africa Time\", value: \"cat\", type: \"Europe & Africa\" },\n    { label: \"East Africa Time\", value: \"eat\", type: \"Europe & Africa\" },\n    { label: \"Moscow Time\", value: \"msk\", type: \"Asia\" },\n    { label: \"India Standard Time\", value: \"ist\", type: \"Asia\" },\n    { label: \"China Standard Time\", value: \"cst_china\", type: \"Asia\" },\n    { label: \"Japan Standard Time\", value: \"jst\", type: \"Asia\" },\n    { label: \"Korea Standard Time\", value: \"kst\", type: \"Asia\" },\n    {\n      label: \"Indonesia Central Standard Time\",\n      value: \"ist_indonesia\",\n      type: \"Asia\",\n    },\n    {\n      label: \"Australian Western Standard Time\",\n      value: \"awst\",\n      type: \"Australia & Pacific\",\n    },\n    {\n      label: \"Australian Central Standard Time\",\n      value: \"acst\",\n      type: \"Australia & Pacific\",\n    },\n    {\n      label: \"Australian Eastern Standard Time\",\n      value: \"aest\",\n      type: \"Australia & Pacific\",\n    },\n    {\n      label: \"New Zealand Standard Time\",\n      value: \"nzst\",\n      type: \"Australia & Pacific\",\n    },\n    { label: \"Fiji Time\", value: \"fjt\", type: \"Australia & Pacific\" },\n    { label: \"Argentina Time\", value: \"art\", type: \"South America\" },\n    { label: \"Bolivia Time\", value: \"bot\", type: \"South America\" },\n    { label: \"Brasilia Time\", value: \"brt\", type: \"South America\" },\n    { label: \"Chile Standard Time\", value: \"clt\", type: \"South America\" },\n  ],\n  groupBy: (item) => item.type,\n});\n\nexport default function Preview() {\n  return (\n    <Select collection={collection} className=\"w-full max-w-64\">\n      <SelectHiddenSelect />\n      <SelectControl>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a timezone\" />\n        </SelectTrigger>\n        <SelectIndicatorGroup>\n          <SelectIndicator />\n        </SelectIndicatorGroup>\n      </SelectControl>\n      <SelectContent>\n        {collection.group().map(([type, group]) => (\n          <SelectItemGroup key={type}>\n            <SelectItemGroupLabel>{type}</SelectItemGroupLabel>\n            {group.map((item) => (\n              <SelectItem key={item.value} item={item}>\n                <SelectItemText>{item.label}</SelectItemText>\n                <SelectItemIndicator />\n              </SelectItem>\n            ))}\n          </SelectItemGroup>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n","import { Field, FieldError, FieldLabel } from \"@/components/ui/field\";\nimport {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectIndicatorGroup,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\n\nconst fruits = createListCollection({\n  items: [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ],\n});\n\nexport default function Preview() {\n  return (\n    <Field invalid className=\"w-full max-w-48\">\n      <FieldLabel>Fruit</FieldLabel>\n      <Select collection={fruits}>\n        <SelectHiddenSelect />\n        <SelectControl>\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectIndicatorGroup>\n            <SelectIndicator />\n          </SelectIndicatorGroup>\n        </SelectControl>\n        <SelectContent>\n          <SelectItemGroup>\n            {fruits.items.map((item) => (\n              <SelectItem key={item.value} item={item}>\n                <SelectItemText>{item.label}</SelectItemText>\n                <SelectItemIndicator />\n              </SelectItem>\n            ))}\n          </SelectItemGroup>\n        </SelectContent>\n      </Select>\n      <FieldError>Please select a fruit.</FieldError>\n    </Field>\n  );\n}\n","import {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectIndicatorGroup,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\n\nconst collection = createListCollection({\n  items: [\n    { label: \"Apple\", value: \"apple\", type: \"fruit\" },\n    { label: \"Banana\", value: \"banana\", type: \"fruit\" },\n    { label: \"Blueberry\", value: \"blueberry\", type: \"fruit\" },\n    { label: \"Carrot\", value: \"carrot\", type: \"vegetable\" },\n    { label: \"Broccoli\", value: \"broccoli\", type: \"vegetable\" },\n    { label: \"Spinach\", value: \"spinach\", type: \"vegetable\" },\n  ],\n  groupBy: (item) => item.type,\n});\n\nconst groupLabels: Record<string, string> = {\n  fruit: \"Fruits\",\n  vegetable: \"Vegetables\",\n};\n\nexport default function Preview() {\n  return (\n    <Select collection={collection} className=\"w-full max-w-48\">\n      <SelectHiddenSelect />\n      <SelectControl>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectIndicatorGroup>\n          <SelectIndicator />\n        </SelectIndicatorGroup>\n      </SelectControl>\n      <SelectContent>\n        {collection.group().map(([type, group], index) => (\n          <SelectItemGroup key={type}>\n            {index > 0 && <SelectSeparator />}\n            <SelectItemGroupLabel>{groupLabels[type] ?? type}</SelectItemGroupLabel>\n            {group.map((item) => (\n              <SelectItem key={item.value} item={item}>\n                <SelectItemText>{item.label}</SelectItemText>\n                <SelectItemIndicator />\n              </SelectItem>\n            ))}\n          </SelectItemGroup>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n","import {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectIndicatorGroup,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\n\nconst fruits = createListCollection({\n  items: [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ],\n});\n\nexport default function Preview() {\n  return (\n    <Select collection={fruits} disabled className=\"w-full max-w-48\">\n      <SelectHiddenSelect />\n      <SelectControl>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectIndicatorGroup>\n          <SelectIndicator />\n        </SelectIndicatorGroup>\n      </SelectControl>\n      <SelectContent>\n        <SelectItemGroup>\n          {fruits.items.map((item) => (\n            <SelectItem key={item.value} item={item}>\n              <SelectItemText>{item.label}</SelectItemText>\n              <SelectItemIndicator />\n            </SelectItem>\n          ))}\n        </SelectItemGroup>\n      </SelectContent>\n    </Select>\n  );\n}\n",{"_877":2007,"_68":1031},{"_877":2007,"_68":2090},"const collection = createListCollection({\r\n  items: [\r\n    { label: \"Item 1\", value: \"item-1\" },\r\n    { label: \"Item 2\", value: \"item-2\" },\r\n    { label: \"Item 3\", value: \"item-3\" },\r\n    { label: \"Item 4\", value: \"item-4\" },\r\n    { label: \"Item 5\", value: \"item-5\" },\r\n  ],\r\n})\r\n\r\n<Select collection={collection}>\r\n  <SelectHiddenSelect />\r\n  <SelectControl>\r\n    <SelectTrigger>\r\n      <SelectValue placeholder=\"Select an item\" />\r\n    </SelectTrigger>\r\n    <SelectIndicatorGroup>\r\n      <SelectIndicator />\r\n    </SelectIndicatorGroup>\r\n  </SelectControl>\r\n  <SelectContent>\r\n    <SelectItemGroup>\r\n      <SelectItemGroupLabel>Fruits</SelectItemGroupLabel>\r\n      {collection.items.map((item) => (\r\n        <SelectItem key={item.value} item={item}>\r\n          <SelectItemText>{item.label}</SelectItemText>\r\n            <SelectItemIndicator />\r\n          </SelectItem>\r\n      ))}\r\n    </SelectItemGroup>\r\n  </SelectContent>\r\n</Select>",[2098,2099],[2093,2094,2095],{"_811":1040,"_19":1041,"_849":1042,"_68":2097},{"_811":864,"_19":865,"_68":2096},{"_811":918,"_19":919,"_68":2096},"import * as React from \"react\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Separator } from \"@/components/ui/separator\";\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport default function Preview() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  );\n}\n","import { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\n\nexport interface Artwork {\n  artist: string;\n  art: string;\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <ScrollArea className=\"w-96 rounded-md border whitespace-nowrap\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <img\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n              Photo by <span className=\"text-foreground font-semibold\">{artwork.artist}</span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  );\n}\n",{"_877":2007,"_68":1047},{"_877":2007,"_68":2100},"<ScrollArea className=\"h-[200px] w-[350px] rounded-md border p-4\">\r\n  Your scrollable content here.\r\n</ScrollArea>",[2111,2112],[2103,2104,2105,2106],{"_811":898,"_19":899,"_849":1060,"_68":2110},{"_811":1022,"_19":1023,"_849":1058,"_68":2109},{"_811":891,"_19":892,"_849":1020,"_68":2108},{"_811":864,"_19":865,"_68":2107},"import { NativeSelect, NativeSelectOption } from \"@/components/ui/native-select\";\n\nexport default function Preview() {\n  return (\n    <NativeSelect>\n      <NativeSelectOption value=\"\">Select status</NativeSelectOption>\n      <NativeSelectOption value=\"todo\">Todo</NativeSelectOption>\n      <NativeSelectOption value=\"in-progress\">In Progress</NativeSelectOption>\n      <NativeSelectOption value=\"done\">Done</NativeSelectOption>\n      <NativeSelectOption value=\"cancelled\">Cancelled</NativeSelectOption>\n    </NativeSelect>\n  );\n}\n","import { NativeSelect, NativeSelectOption } from \"@/components/ui/native-select\";\n\nexport default function Preview() {\n  return (\n    <NativeSelect aria-invalid=\"true\">\n      <NativeSelectOption value=\"\">Error state</NativeSelectOption>\n      <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n      <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n      <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n    </NativeSelect>\n  );\n}\n","import {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/components/ui/native-select\";\n\nexport default function Preview() {\n  return (\n    <NativeSelect>\n      <NativeSelectOption value=\"\">Select department</NativeSelectOption>\n      <NativeSelectOptGroup label=\"Engineering\">\n        <NativeSelectOption value=\"frontend\">Frontend</NativeSelectOption>\n        <NativeSelectOption value=\"backend\">Backend</NativeSelectOption>\n        <NativeSelectOption value=\"devops\">DevOps</NativeSelectOption>\n      </NativeSelectOptGroup>\n      <NativeSelectOptGroup label=\"Sales\">\n        <NativeSelectOption value=\"sales-rep\">Sales Rep</NativeSelectOption>\n        <NativeSelectOption value=\"account-manager\">Account Manager</NativeSelectOption>\n        <NativeSelectOption value=\"sales-director\">Sales Director</NativeSelectOption>\n      </NativeSelectOptGroup>\n      <NativeSelectOptGroup label=\"Operations\">\n        <NativeSelectOption value=\"support\">Customer Support</NativeSelectOption>\n        <NativeSelectOption value=\"product-manager\">Product Manager</NativeSelectOption>\n        <NativeSelectOption value=\"ops-manager\">Operations Manager</NativeSelectOption>\n      </NativeSelectOptGroup>\n    </NativeSelect>\n  );\n}\n","import { NativeSelect, NativeSelectOption } from \"@/components/ui/native-select\";\n\nexport default function Preview() {\n  return (\n    <NativeSelect disabled>\n      <NativeSelectOption value=\"\">Disabled</NativeSelectOption>\n      <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n      <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n      <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n    </NativeSelect>\n  );\n}\n",{"_877":2007,"_68":1065},{"_877":2007,"_68":1064},[2119,2120],[2115,2116],{"_811":350,"_19":895,"_849":1073,"_68":2118},{"_811":864,"_19":865,"_68":2117},"import { Checkbox } from \"@/components/ui/checkbox\";\nimport { Label } from \"@/components/ui/label\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex gap-2\">\n      <Checkbox ids={{ hiddenInput: \"terms\" }} />\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </div>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <div className=\"w-full max-w-md\">\n      <form>\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Payment Method</FieldLegend>\n            <FieldDescription>All transactions are secure and encrypted</FieldDescription>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">Name on Card</FieldLabel>\n                <Input id=\"checkout-7j9-card-name-43j\" placeholder=\"Evil Rabbit\" required />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">Card Number</FieldLabel>\n                <Input\n                  id=\"checkout-7j9-card-number-uw1\"\n                  placeholder=\"1234 5678 9012 3456\"\n                  required\n                />\n                <FieldDescription>Enter your 16-digit card number</FieldDescription>\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <FieldSet>\n            <FieldLegend>Billing Address</FieldLegend>\n            <FieldDescription>\n              The billing address associated with your payment method\n            </FieldDescription>\n            <FieldGroup>\n              <Field orientation=\"horizontal\">\n                <Checkbox id=\"checkout-7j9-same-as-shipping-wgm\" defaultChecked />\n                <FieldLabel htmlFor=\"checkout-7j9-same-as-shipping-wgm\" className=\"font-normal\">\n                  Same as shipping address\n                </FieldLabel>\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n          <FieldSet>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"checkout-7j9-optional-comments\"\n                  placeholder=\"Add any additional comments\"\n                  className=\"resize-none\"\n                />\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </div>\n  );\n}\n",{"_877":2007,"_68":1078},{"_877":2007,"_68":2121},"<Label htmlFor=\"email\">Your email address</Label>",[2132,2133],[2124,2125,2126,2127],{"_811":649,"_19":902,"_849":1095,"_68":2131},{"_811":1091,"_19":1092,"_849":1093,"_68":2130},{"_811":314,"_19":1088,"_849":1089,"_68":2129},{"_811":864,"_19":865,"_68":2128},"import { Kbd, KbdGroup } from \"@/components/ui/kbd\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <KbdGroup>\n        <Kbd>⌘</Kbd>\n        <Kbd>⇧</Kbd>\n        <Kbd>⌥</Kbd>\n        <Kbd>⌃</Kbd>\n      </KbdGroup>\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <span>+</span>\n        <Kbd>B</Kbd>\n      </KbdGroup>\n    </div>\n  );\n}\n","import { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { SearchIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-xs flex-col gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Kbd>⌘</Kbd>\n          <Kbd>K</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n","import { Kbd, KbdGroup } from \"@/components/ui/kbd\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <p className=\"text-muted-foreground text-sm\">\n        Use{\" \"}\n        <KbdGroup>\n          <Kbd>Ctrl + B</Kbd>\n          <Kbd>Ctrl + K</Kbd>\n        </KbdGroup>{\" \"}\n        to open the command palette\n      </p>\n    </div>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { Kbd } from \"@/components/ui/kbd\";\n\nexport default function Preview() {\n  return (\n    <Button variant=\"outline\">\n      Accept{\" \"}\n      <Kbd data-icon=\"inline-end\" className=\"translate-x-0.5\">\n        ⏎\n      </Kbd>\n    </Button>\n  );\n}\n",{"_877":2007,"_68":1100},{"_877":2007,"_68":1099},[2150,2151],[2136,2137,2138,2139,2140,2141,2142],{"_811":694,"_19":1131,"_849":1132,"_68":2149},{"_811":1091,"_19":1092,"_849":1129,"_68":2148},{"_811":1125,"_19":1126,"_849":1127,"_68":2147},{"_811":1121,"_19":1122,"_849":1123,"_68":2146},{"_811":1117,"_19":1118,"_849":1119,"_68":2145},{"_811":1113,"_19":1114,"_849":1115,"_68":2144},{"_811":864,"_19":865,"_68":2143},"import { Button } from \"@/components/ui/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\";\nimport { BadgeCheckIcon, ChevronRightIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Basic Item</ItemTitle>\n          <ItemDescription>A simple item with title and description.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\" asChild>\n        <a href=\"#\">\n          <ItemMedia>\n            <BadgeCheckIcon className=\"size-5\" />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your profile has been verified.</ItemTitle>\n          </ItemContent>\n          <ItemActions>\n            <ChevronRightIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n    </div>\n  );\n}\n","import { Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from \"@/components/ui/item\";\nimport { ChevronRightIcon, ExternalLinkIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-4\">\n      <Item asChild>\n        <a href=\"#\">\n          <ItemContent>\n            <ItemTitle>Visit our documentation</ItemTitle>\n            <ItemDescription>Learn how to get started with our components.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <ChevronRightIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n      <Item variant=\"outline\" asChild>\n        <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <ItemContent>\n            <ItemTitle>External resource</ItemTitle>\n            <ItemDescription>Opens in a new tab with security attributes.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <ExternalLinkIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n    </div>\n  );\n}\n","import {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\";\n\nconst music = [\n  {\n    title: \"Midnight City Lights\",\n    artist: \"Neon Dreams\",\n    album: \"Electric Nights\",\n    duration: \"3:45\",\n  },\n  {\n    title: \"Coffee Shop Conversations\",\n    artist: \"The Morning Brew\",\n    album: \"Urban Stories\",\n    duration: \"4:05\",\n  },\n  {\n    title: \"Digital Rain\",\n    artist: \"Cyber Symphony\",\n    album: \"Binary Beats\",\n    duration: \"3:30\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <ItemGroup className=\"gap-4\">\n        {music.map((song) => (\n          <Item key={song.title} variant=\"outline\" role=\"listitem\" asChild>\n            <a href=\"#\">\n              <ItemMedia variant=\"image\">\n                <img\n                  src={`https://avatar.vercel.sh/${song.title}`}\n                  alt={song.title}\n                  width={32}\n                  height={32}\n                  className=\"object-cover grayscale\"\n                />\n              </ItemMedia>\n              <ItemContent>\n                <ItemTitle className=\"line-clamp-1\">\n                  {song.title} - <span className=\"text-muted-foreground\">{song.album}</span>\n                </ItemTitle>\n                <ItemDescription>{song.artist}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"flex-none text-center\">\n                <ItemDescription>{song.duration}</ItemDescription>\n              </ItemContent>\n            </a>\n          </Item>\n        ))}\n      </ItemGroup>\n    </div>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\";\nimport { ShieldAlertIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <ShieldAlertIcon />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Security Alert</ItemTitle>\n          <ItemDescription>New login detected from unknown device.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"outline\">\n            Review\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  );\n}\n","import {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemHeader,\n  ItemTitle,\n} from \"@/components/ui/item\";\n\nconst models = [\n  {\n    name: \"v0-1.5-sm\",\n    description: \"Everyday tasks and UI generation.\",\n    image:\n      \"https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop\",\n    credit: \"Valeria Reverdo on Unsplash\",\n  },\n  {\n    name: \"v0-1.5-lg\",\n    description: \"Advanced thinking or reasoning.\",\n    image:\n      \"https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop\",\n    credit: \"Michael Oeser on Unsplash\",\n  },\n  {\n    name: \"v0-2.0-mini\",\n    description: \"Open Source model for everyone.\",\n    image:\n      \"https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop\",\n    credit: \"Cherry Laithang on Unsplash\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-xl flex-col gap-6\">\n      <ItemGroup className=\"grid grid-cols-3 gap-4\">\n        {models.map((model) => (\n          <Item key={model.name} variant=\"outline\">\n            <ItemHeader>\n              <img\n                src={model.image}\n                alt={model.name}\n                width={128}\n                height={128}\n                className=\"aspect-square w-full rounded-sm object-cover\"\n              />\n            </ItemHeader>\n            <ItemContent>\n              <ItemTitle>{model.name}</ItemTitle>\n              <ItemDescription>{model.description}</ItemDescription>\n            </ItemContent>\n          </Item>\n        ))}\n      </ItemGroup>\n    </div>\n  );\n}\n","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\";\nimport { PlusIcon } from \"lucide-react\";\n\nconst people = [\n  {\n    username: \"khabubuphathu\",\n    avatar: \"https://github.com/khabubuphathu.png\",\n    email: \"khabubuphathu@sprawlify.com\",\n  },\n  {\n    username: \"willeastcott\",\n    avatar: \"https://github.com/willeastcott.png\",\n    email: \"willeastcott@sprawlify.com\",\n  },\n  {\n    username: \"benaadams\",\n    avatar: \"https://github.com/benaadams.png\",\n    email: \"benaadams@sprawlify.com\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <ItemGroup className=\"max-w-sm\">\n      {people.map((person) => (\n        <Item key={person.username} variant=\"outline\">\n          <ItemMedia>\n            <Avatar>\n              <AvatarImage src={person.avatar} className=\"grayscale\" />\n              <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n            </Avatar>\n          </ItemMedia>\n          <ItemContent className=\"gap-1\">\n            <ItemTitle>{person.username}</ItemTitle>\n            <ItemDescription>{person.email}</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <PlusIcon />\n            </Button>\n          </ItemActions>\n        </Item>\n      ))}\n    </ItemGroup>\n  );\n}\n","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <Avatar className=\"size-10\">\n            <AvatarImage src=\"https://github.com/benaadams.png\" />\n            <AvatarFallback>BA</AvatarFallback>\n          </Avatar>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Ben A Adams</ItemTitle>\n          <ItemDescription>Last seen 5 months ago</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"icon-sm\" variant=\"outline\" className=\"rounded-full\" aria-label=\"Invite\">\n            <PlusIcon />\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n              <AvatarFallback>PK</AvatarFallback>\n            </Avatar>\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\n              <AvatarFallback>WE</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n              <AvatarFallback>BA</AvatarFallback>\n            </Avatar>\n          </div>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>No Team Members</ItemTitle>\n          <ItemDescription>Invite your team to collaborate on this project.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"outline\">\n            Invite\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  );\n}\n",{"_877":2007,"_68":1137},{"_877":2007,"_68":1136},[2174,2175],[2154,2155,2156,2157,2158,2159,2160,2161,2162,2163],{"_811":1173,"_19":1174,"_849":1175,"_68":2173},{"_811":1169,"_19":1170,"_849":1171,"_68":2172},{"_811":1166,"_19":1167,"_68":2171},{"_811":1121,"_19":1122,"_68":2170},{"_811":1161,"_19":1162,"_849":1163,"_68":2169},{"_811":1157,"_19":1158,"_849":1159,"_68":2168},{"_811":266,"_19":1079,"_68":2167},{"_811":864,"_19":865,"_68":2166},{"_811":1152,"_19":1153,"_68":2165},{"_811":95,"_19":881,"_68":2164},"import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/components/ui/input-group\";\nimport { CopyIcon, CornerDownLeftIcon, RefreshCcwIcon, ScrollIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full max-w-md gap-4\">\n      <InputGroup>\n        <InputGroupTextarea\n          id=\"textarea-code-32\"\n          placeholder=\"console.log('Hello, world!');\"\n          className=\"min-h-[200px]\"\n        />\n        <InputGroupAddon align=\"block-end\" className=\"border-t\">\n          <InputGroupText>Line 1, Column 1</InputGroupText>\n          <InputGroupButton size=\"sm\" className=\"ml-auto\" variant=\"default\">\n            Run <CornerDownLeftIcon />\n          </InputGroupButton>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"block-start\" className=\"border-b\">\n          <InputGroupText className=\"font-mono font-medium\">\n            <ScrollIcon />\n            script.js\n          </InputGroupText>\n          <InputGroupButton className=\"ml-auto\" size=\"icon-xs\" title=\"Refresh\">\n            <RefreshCcwIcon />\n          </InputGroupButton>\n          <InputGroupButton variant=\"ghost\" size=\"icon-xs\" title=\"Copy\">\n            <CopyIcon />\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n","import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/components/ui/input-group\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupAddon>\n          <InputGroupText>$</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput placeholder=\"0.00\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>USD</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-0.5\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>.com</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter your username\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>@company.com</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Enter your message\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupText className=\"text-muted-foreground text-xs\">\n            120 characters left\n          </InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n","import { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { Search } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <InputGroup className=\"max-w-xs\">\n      <InputGroupInput placeholder=\"Search...\" />\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n    </InputGroup>\n  );\n}\n","import { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { SearchIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <InputGroup className=\"max-w-sm\">\n      <InputGroupInput placeholder=\"Search...\" />\n      <InputGroupAddon>\n        <SearchIcon className=\"text-muted-foreground\" />\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\">\n        <Kbd>⌘K</Kbd>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { SearchIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"inline-start-input\">Input</FieldLabel>\n      <InputGroup>\n        <InputGroupInput id=\"inline-start-input\" placeholder=\"Search...\" />\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon className=\"text-muted-foreground\" />\n        </InputGroupAddon>\n      </InputGroup>\n      <FieldDescription>Icon positioned at the start.</FieldDescription>\n    </Field>\n  );\n}\n","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { EyeOffIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"inline-end-input\">Input</FieldLabel>\n      <InputGroup>\n        <InputGroupInput id=\"inline-end-input\" type=\"password\" placeholder=\"Enter password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <EyeOffIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <FieldDescription>Icon positioned at the end.</FieldDescription>\n    </Field>\n  );\n}\n","import { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { CheckIcon, CreditCardIcon, InfoIcon, MailIcon, SearchIcon, StarIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <SearchIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput type=\"email\" placeholder=\"Enter your email\" />\n        <InputGroupAddon>\n          <MailIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Card number\" />\n        <InputGroupAddon>\n          <CreditCardIcon />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <CheckIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Card number\" />\n        <InputGroupAddon align=\"inline-end\">\n          <StarIcon />\n          <InfoIcon />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n","import {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { ChevronDownIcon, MoreHorizontalIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter file name\" />\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\" aria-label=\"More\" size=\"icon-xs\">\n                <MoreHorizontalIcon />\n              </InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem value=\"settings\">Settings</DropdownMenuItem>\n                <DropdownMenuItem value=\"copy-path\">Copy path</DropdownMenuItem>\n                <DropdownMenuItem value=\"open-location\">Open location</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup className=\"[--radius:1rem]\">\n        <InputGroupInput placeholder=\"Enter search query\" />\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\" className=\"!pr-1.5 text-xs\">\n                Search In... <ChevronDownIcon className=\"size-3\" />\n              </InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent className=\"[--radius:0.95rem]\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem value=\"documentation\">Documentation</DropdownMenuItem>\n                <DropdownMenuItem value=\"blog-posts\">Blog Posts</DropdownMenuItem>\n                <DropdownMenuItem value=\"changelog\">Changelog</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n","import { Field, FieldDescription, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/components/ui/input-group\";\nimport { CopyIcon, FileCodeIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"max-w-sm\">\n      <Field>\n        <FieldLabel htmlFor=\"block-start-input\">Input</FieldLabel>\n        <InputGroup className=\"h-auto\">\n          <InputGroupInput id=\"block-start-input\" placeholder=\"Enter your name\" />\n          <InputGroupAddon align=\"block-start\">\n            <InputGroupText>Full Name</InputGroupText>\n          </InputGroupAddon>\n        </InputGroup>\n        <FieldDescription>Header positioned above the input.</FieldDescription>\n      </Field>\n      <Field>\n        <FieldLabel htmlFor=\"block-start-textarea\">Textarea</FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea\n            id=\"block-start-textarea\"\n            placeholder=\"console.log('Hello, world!');\"\n            className=\"font-mono text-sm\"\n          />\n          <InputGroupAddon align=\"block-start\">\n            <FileCodeIcon className=\"text-muted-foreground\" />\n            <InputGroupText className=\"font-mono\">script.js</InputGroupText>\n            <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n              <CopyIcon />\n              <span className=\"sr-only\">Copy</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n        <FieldDescription>Header positioned above the textarea.</FieldDescription>\n      </Field>\n    </FieldGroup>\n  );\n}\n","import { Field, FieldDescription, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/components/ui/input-group\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"max-w-sm\">\n      <Field>\n        <FieldLabel htmlFor=\"block-end-input\">Input</FieldLabel>\n        <InputGroup className=\"h-auto\">\n          <InputGroupInput id=\"block-end-input\" placeholder=\"Enter amount\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupText>USD</InputGroupText>\n          </InputGroupAddon>\n        </InputGroup>\n        <FieldDescription>Footer positioned below the input.</FieldDescription>\n      </Field>\n      <Field>\n        <FieldLabel htmlFor=\"block-end-textarea\">Textarea</FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"block-end-textarea\" placeholder=\"Write a comment...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupText>0/280</InputGroupText>\n            <InputGroupButton variant=\"default\" size=\"sm\" className=\"ml-auto\">\n              Post\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n        <FieldDescription>Footer positioned below the textarea.</FieldDescription>\n      </Field>\n    </FieldGroup>\n  );\n}\n",{"_877":2007,"_68":1180},{"_877":2007,"_68":1179},[2203,2204],[2178,2179,2180,2181,2182,2183,2184,2185,2186,2187,2188,2189,2190],{"_811":685,"_19":1232,"_849":1233,"_68":2202},{"_811":1229,"_19":1230,"_68":2201},{"_811":634,"_19":1226,"_849":1227,"_68":2200},{"_811":898,"_19":899,"_849":1224,"_68":2199},{"_811":350,"_19":895,"_849":1223,"_68":2198},{"_811":1219,"_19":1220,"_849":1221,"_68":2198},{"_811":1215,"_19":1216,"_849":1217,"_68":2197},{"_811":1211,"_19":1212,"_849":1213,"_68":2196},{"_811":1207,"_19":1208,"_849":1209,"_68":2195},{"_811":314,"_19":1088,"_849":1205,"_68":2194},{"_811":891,"_19":892,"_849":1203,"_68":2193},{"_811":1199,"_19":1200,"_849":1201,"_68":2192},{"_811":864,"_19":865,"_68":2191},"import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-demo-api-key\">API Key</FieldLabel>\n      <Input id=\"input-demo-api-key\" type=\"password\" placeholder=\"sk-...\" />\n      <FieldDescription>Your API key is encrypted and stored securely.</FieldDescription>\n    </Field>\n  );\n}\n","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-required\">\n        Required Field <span className=\"text-destructive\">*</span>\n      </FieldLabel>\n      <Input id=\"input-required\" placeholder=\"This field is required\" required />\n      <FieldDescription>This field must be filled out.</FieldDescription>\n    </Field>\n  );\n}\n","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\" data-invalid>\n      <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n      <Input id=\"input-invalid\" placeholder=\"Error\" aria-invalid />\n      <FieldDescription>This field contains validation errors.</FieldDescription>\n    </Field>\n  );\n}\n","import { Field, FieldLabel } from \"@/components/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/components/ui/input-group\";\nimport { InfoIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-group-url\">Website URL</FieldLabel>\n      <InputGroup>\n        <InputGroupInput id=\"input-group-url\" placeholder=\"example.com\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <InfoIcon />\n        </InputGroupAddon>\n      </InputGroup>\n    </Field>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { Field } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\" orientation=\"horizontal\">\n      <Input type=\"search\" placeholder=\"Search...\" />\n      <Button>Search</Button>\n    </Field>\n  );\n}\n","import { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"grid max-w-sm grid-cols-2\">\n      <Field>\n        <FieldLabel htmlFor=\"first-name\">First Name</FieldLabel>\n        <Input id=\"first-name\" placeholder=\"Jordan\" />\n      </Field>\n      <Field>\n        <FieldLabel htmlFor=\"last-name\">Last Name</FieldLabel>\n        <Input id=\"last-name\" placeholder=\"Lee\" />\n      </Field>\n    </FieldGroup>\n  );\n}\n","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"picture\">Picture</FieldLabel>\n      <Input id=\"picture\" type=\"file\" />\n      <FieldDescription>Select a picture to upload.</FieldDescription>\n    </Field>\n  );\n}\n","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-field-username\">Username</FieldLabel>\n      <Input id=\"input-field-username\" type=\"text\" placeholder=\"Enter your username\" />\n      <FieldDescription>Choose a unique username for your account.</FieldDescription>\n    </Field>\n  );\n}\n","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\" data-disabled>\n      <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n      <Input id=\"input-demo-disabled\" type=\"email\" placeholder=\"Email\" disabled />\n      <FieldDescription>This field is currently disabled.</FieldDescription>\n    </Field>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport { Field, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-button-group\">Search</FieldLabel>\n      <ButtonGroup>\n        <Input id=\"input-button-group\" placeholder=\"Type to search...\" />\n        <Button variant=\"outline\">Search</Button>\n      </ButtonGroup>\n    </Field>\n  );\n}\n","import { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return <Input className=\"max-w-sm\" placeholder=\"Enter text\" />;\n}\n","import { Badge } from \"@/components/ui/badge\";\nimport { Field, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-badge\">\n        Webhook URL{\" \"}\n        <Badge variant=\"secondary\" className=\"ml-auto\">\n          Beta\n        </Badge>\n      </FieldLabel>\n      <Input id=\"input-badge\" type=\"url\" placeholder=\"https://api.example.com/webhook\" />\n    </Field>\n  );\n}\n",{"_877":2007,"_68":1238},{"_877":2007,"_68":1237},[2210,2211,2212,2213,2214],[2207,2208],{"_877":2007,"_68":1245},{"_877":2007,"_68":2209},"<FieldSet>\r\n  <FieldLegend>Profile</FieldLegend>\r\n  <FieldDescription>This appears on invoices and emails.</FieldDescription>\r\n  <FieldGroup>\r\n    <Field>\r\n      <FieldLabel htmlFor=\"name\">Full name</FieldLabel>\r\n      <Input id=\"name\" autoComplete=\"off\" placeholder=\"Evil Rabbit\" />\r\n      <FieldDescription>This appears on invoices and emails.</FieldDescription>\r\n    </Field>\r\n    <Field>\r\n      <FieldLabel htmlFor=\"username\">Username</FieldLabel>\r\n      <Input id=\"username\" autoComplete=\"off\" aria-invalid />\r\n      <FieldError>Choose another username.</FieldError>\r\n    </Field>\r\n    <Field orientation=\"horizontal\">\r\n      <Switch id=\"newsletter\" />\r\n      <FieldLabel htmlFor=\"newsletter\">Subscribe to the newsletter</FieldLabel>\r\n    </Field>\r\n  </FieldGroup>\r\n</FieldSet>",{"_811":516,"_19":1257,"_68":2219},{"_811":1219,"_19":1220,"_68":2218},{"_811":1253,"_19":1254,"_68":2217},{"_811":341,"_19":1181,"_68":2216},{"_811":95,"_19":881,"_68":2215},"import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from \"@/components/ui/field\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <FieldSet className=\"w-full max-w-xs\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n          <Textarea id=\"feedback\" placeholder=\"Your feedback helps us improve...\" rows={4} />\n          <FieldDescription>Share your thoughts about our service.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  );\n}\n","import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <FieldSet className=\"w-full max-w-xs\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"username\">Username</FieldLabel>\n          <Input id=\"username\" type=\"text\" placeholder=\"Max Leiter\" />\n          <FieldDescription>Choose a unique username for your account.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <FieldDescription>Must be at least 8 characters long.</FieldDescription>\n          <Input id=\"password\" type=\"password\" placeholder=\"••••••••\" />\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  );\n}\n","import {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <FieldSet className=\"w-full max-w-sm\">\n      <FieldLegend>Address Information</FieldLegend>\n      <FieldDescription>We need your address to deliver your order.</FieldDescription>\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"street\">Street Address</FieldLabel>\n          <Input id=\"street\" type=\"text\" placeholder=\"123 Main St\" />\n        </Field>\n        <div className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"city\">City</FieldLabel>\n            <Input id=\"city\" type=\"text\" placeholder=\"New York\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"zip\">Postal Code</FieldLabel>\n            <Input id=\"zip\" type=\"text\" placeholder=\"90502\" />\n          </Field>\n        </div>\n      </FieldGroup>\n    </FieldSet>\n  );\n}\n","import { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n} from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"w-full max-w-xs\">\n      <FieldSet>\n        <FieldLabel>Responses</FieldLabel>\n        <FieldDescription>\n          Get notified when ChatGPT responds to requests that take time, like research or image\n          generation.\n        </FieldDescription>\n        <FieldGroup data-slot=\"checkbox-group\">\n          <Field orientation=\"horizontal\">\n            <Checkbox ids={{ hiddenInput: \"push\" }} defaultChecked disabled />\n            <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n              Push notifications\n            </FieldLabel>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n      <FieldSeparator />\n      <FieldSet>\n        <FieldLabel>Tasks</FieldLabel>\n        <FieldDescription>\n          Get notified when tasks you've created have updates. <a href=\"#\">Manage tasks</a>\n        </FieldDescription>\n        <FieldGroup data-slot=\"checkbox-group\">\n          <Field orientation=\"horizontal\">\n            <Checkbox ids={{ hiddenInput: \"push-tasks\" }} />\n            <FieldLabel htmlFor=\"push-tasks\" className=\"font-normal\">\n              Push notifications\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox ids={{ hiddenInput: \"email-tasks\" }} />\n            <FieldLabel htmlFor=\"email-tasks\" className=\"font-normal\">\n              Email notifications\n            </FieldLabel>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </FieldGroup>\n  );\n}\n","import { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"w-full max-w-xs\">\n      <FieldSet>\n        <FieldLegend variant=\"label\">Show these items on the desktop</FieldLegend>\n        <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>\n        <FieldGroup className=\"gap-3\">\n          <Field orientation=\"horizontal\">\n            <Checkbox\n              id=\"finder-pref-9k2-hard-disks-ljj\"\n              name=\"finder-pref-9k2-hard-disks-ljj\"\n              defaultChecked\n            >\n              Hard disks\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox\n              id=\"finder-pref-9k2-external-disks-1yg\"\n              name=\"finder-pref-9k2-external-disks-1yg\"\n              defaultChecked\n            >\n              External disks\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox\n              id=\"finder-pref-9k2-cds-dvds-fzt\"\n              name=\"finder-pref-9k2-cds-dvds-fzt\"\n              defaultChecked\n            >\n              CDs, DVDs, and iPods\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox\n              id=\"finder-pref-9k2-connected-servers-6l2\"\n              name=\"finder-pref-9k2-connected-servers-6l2\"\n              defaultChecked\n            >\n              Connected servers\n            </Checkbox>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n      <FieldSeparator />\n      <Field orientation=\"horizontal\">\n        <Checkbox\n          id=\"finder-pref-9k2-sync-folders-nep\"\n          name=\"finder-pref-9k2-sync-folders-nep\"\n          defaultChecked\n        />\n        <FieldContent>\n          <FieldLabel htmlFor=\"finder-pref-9k2-sync-folders-nep\">\n            Sync Desktop & Documents folders\n          </FieldLabel>\n          <FieldDescription>\n            Your Desktop & Documents folders are being synced with iCloud Drive. You can access them\n            from other devices.\n          </FieldDescription>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  );\n}\n",[2232,2233],[2222,2223,2224,2225,2226],{"_811":694,"_19":1131,"_849":1281,"_68":2231},{"_811":1277,"_19":1278,"_849":1279,"_68":2230},{"_811":1273,"_19":1274,"_849":1275,"_68":2229},{"_811":1269,"_19":1270,"_849":1271,"_68":2228},{"_811":864,"_19":865,"_68":2227},"import { Button } from \"@/components/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\nimport { ArrowUpRightIcon, FolderCodeIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <FolderCodeIcon />\n        </EmptyMedia>\n        <EmptyTitle>No Projects Yet</EmptyTitle>\n        <EmptyDescription>\n          You haven't created any projects yet. Get started by creating your first project.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent className=\"flex-row justify-center gap-2\">\n        <Button>Create Project</Button>\n        <Button variant=\"outline\">Import Project</Button>\n      </EmptyContent>\n      <Button variant=\"link\" asChild className=\"text-muted-foreground\" size=\"sm\">\n        <a href=\"#\">\n          Learn More <ArrowUpRightIcon />\n        </a>\n      </Button>\n    </Empty>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\nimport { CloudIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Empty className=\"border border-dashed\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <CloudIcon />\n        </EmptyMedia>\n        <EmptyTitle>Cloud Storage Empty</EmptyTitle>\n        <EmptyDescription>\n          Upload files to your cloud storage to access them anywhere.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button variant=\"outline\" size=\"sm\">\n          Upload Files\n        </Button>\n      </EmptyContent>\n    </Empty>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\nimport { BellIcon, RefreshCcwIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Empty className=\"bg-muted/30 h-full\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <BellIcon />\n        </EmptyMedia>\n        <EmptyTitle>No Notifications</EmptyTitle>\n        <EmptyDescription className=\"max-w-xs text-pretty\">\n          You're all caught up. New notifications will appear here.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button variant=\"outline\">\n          <RefreshCcwIcon />\n          Refresh\n        </Button>\n      </EmptyContent>\n    </Empty>\n  );\n}\n","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia>\n          <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n            <Avatar>\n              <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n              <AvatarFallback>PK</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\n              <AvatarFallback>WE</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n              <AvatarFallback>BA</AvatarFallback>\n            </Avatar>\n          </div>\n        </EmptyMedia>\n        <EmptyTitle>No Team Members</EmptyTitle>\n        <EmptyDescription>Invite your team to collaborate on this project.</EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button size=\"sm\">\n          <PlusIcon />\n          Invite Members\n        </Button>\n      </EmptyContent>\n    </Empty>\n  );\n}\n","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\n\nexport default function Preview() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia variant=\"default\">\n          <Avatar className=\"size-12\">\n            <AvatarImage src=\"https://github.com/khabubuphathu.png\" className=\"grayscale\" />\n            <AvatarFallback>PK</AvatarFallback>\n          </Avatar>\n        </EmptyMedia>\n        <EmptyTitle>User Offline</EmptyTitle>\n        <EmptyDescription>\n          This user is currently offline. You can leave a message to notify them or try again later.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button size=\"sm\">Leave Message</Button>\n      </EmptyContent>\n    </Empty>\n  );\n}\n",{"_877":2007,"_68":1286},{"_877":2007,"_68":1285},[2258,2259],[2236,2237,2238,2239,2240,2241,2242,2243,2244,2245,2246],{"_811":694,"_19":1131,"_849":1335,"_68":2257},{"_811":1229,"_19":1230,"_849":1333,"_68":2256},{"_811":1329,"_19":1330,"_849":1331,"_68":2255},{"_811":1325,"_19":1326,"_849":1327,"_68":2254},{"_811":1321,"_19":1322,"_849":1323,"_68":2253},{"_811":1317,"_19":1318,"_849":1319,"_68":2252},{"_811":927,"_19":928,"_849":1315,"_68":2251},{"_811":1311,"_19":1312,"_849":1313,"_68":2250},{"_811":1307,"_19":1308,"_849":1309,"_68":2249},{"_811":864,"_19":865,"_68":2248},{"_811":1302,"_19":1303,"_849":1304,"_68":2247},"import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"team\">Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem value=\"email\">Email</DropdownMenuItem>\n                <DropdownMenuItem value=\"message\">Message</DropdownMenuItem>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>More options</DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuItem value=\"calendly\">Calendly</DropdownMenuItem>\n                      <DropdownMenuItem value=\"slack\">Slack</DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem value=\"webhook\">Webhook</DropdownMenuItem>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem value=\"advanced\">Advanced...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem value=\"new-team\">\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu positioning={{ placement: \"bottom-start\" }}>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-40\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>My Account</DropdownMenuLabel>\n          <DropdownMenuItem value=\"profile\">\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"billing\">\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"settings\">\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"team\">Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem value=\"email\">Email</DropdownMenuItem>\n                <DropdownMenuItem value=\"message\">Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem value=\"more\">More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem value=\"new-team\">\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\n          <DropdownMenuItem value=\"support\">Support</DropdownMenuItem>\n          <DropdownMenuItem value=\"api\" disabled>\n            API\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"logout\">\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>My Account</DropdownMenuLabel>\n          <DropdownMenuItem value=\"profile\">\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"billing\">\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"settings\">\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem value=\"logout\">\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Building2Icon, CreditCardIcon, WalletIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\");\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Payment Method</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"min-w-56\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n          <DropdownMenuRadioGroup\n            value={paymentMethod}\n            onValueChange={(details) => setPaymentMethod(details.value)}\n          >\n            <DropdownMenuRadioItem value=\"card\">\n              <CreditCardIcon />\n              Credit Card\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"paypal\">\n              <WalletIcon />\n              PayPal\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"bank\">\n              <Building2Icon />\n              Bank Transfer\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { CreditCardIcon, LogOutIcon, SettingsIcon, UserIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuItem value=\"profile\">\n          <UserIcon />\n          Profile\n        </DropdownMenuItem>\n        <DropdownMenuItem value=\"billing\">\n          <CreditCardIcon />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem value=\"settings\">\n          <SettingsIcon />\n          Settings\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem value=\"logout\" variant=\"destructive\">\n          <LogOutIcon />\n          Log out\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { PencilIcon, ShareIcon, TrashIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Actions</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"edit\">\n            <PencilIcon />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"share\">\n            <ShareIcon />\n            Share\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"delete\" variant=\"destructive\">\n            <TrashIcon />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  BellIcon,\n  CreditCardIcon,\n  DownloadIcon,\n  EyeIcon,\n  FileCodeIcon,\n  FileIcon,\n  FileTextIcon,\n  FolderIcon,\n  FolderOpenIcon,\n  FolderSearchIcon,\n  HelpCircleIcon,\n  KeyboardIcon,\n  LanguagesIcon,\n  LayoutIcon,\n  LogOutIcon,\n  MailIcon,\n  MonitorIcon,\n  MoonIcon,\n  MoreHorizontalIcon,\n  PaletteIcon,\n  SaveIcon,\n  SettingsIcon,\n  ShieldIcon,\n  SunIcon,\n  UserIcon,\n} from \"lucide-react\";\n\nexport default function Preview() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  });\n  const [theme, setTheme] = React.useState(\"light\");\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Complex Menu</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-44\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>File</DropdownMenuLabel>\n          <DropdownMenuItem value=\"new-file\">\n            <FileIcon />\n            New File\n            <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"new-folder\">\n            <FolderIcon />\n            New Folder\n            <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <FolderOpenIcon />\n              Open Recent\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                  <DropdownMenuItem value=\"project-alpha\">\n                    <FileCodeIcon />\n                    Project Alpha\n                  </DropdownMenuItem>\n                  <DropdownMenuItem value=\"project-beta\">\n                    <FileCodeIcon />\n                    Project Beta\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <MoreHorizontalIcon />\n                      More Projects\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuItem value=\"project-gamma\">\n                          <FileCodeIcon />\n                          Project Gamma\n                        </DropdownMenuItem>\n                        <DropdownMenuItem value=\"project-delta\">\n                          <FileCodeIcon />\n                          Project Delta\n                        </DropdownMenuItem>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem value=\"browse\">\n                    <FolderSearchIcon />\n                    Browse...\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem value=\"save\">\n            <SaveIcon />\n            Save\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"export\">\n            <DownloadIcon />\n            Export\n            <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>View</DropdownMenuLabel>\n          <DropdownMenuCheckboxItem\n            value=\"show-sidebar\"\n            checked={notifications.email}\n            onCheckedChange={(checked) =>\n              setNotifications({ ...notifications, email: checked === true })\n            }\n          >\n            <EyeIcon />\n            Show Sidebar\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem\n            value=\"show-statusbar\"\n            checked={notifications.sms}\n            onCheckedChange={(checked) =>\n              setNotifications({ ...notifications, sms: checked === true })\n            }\n          >\n            <LayoutIcon />\n            Show Status Bar\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <PaletteIcon />\n              Theme\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                  <DropdownMenuRadioGroup\n                    value={theme}\n                    onValueChange={(details) => setTheme(details.value)}\n                  >\n                    <DropdownMenuRadioItem value=\"light\">\n                      <SunIcon />\n                      Light\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"dark\">\n                      <MoonIcon />\n                      Dark\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"system\">\n                      <MonitorIcon />\n                      System\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Account</DropdownMenuLabel>\n          <DropdownMenuItem value=\"profile\">\n            <UserIcon />\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"billing\">\n            <CreditCardIcon />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <SettingsIcon />\n              Settings\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                  <DropdownMenuItem value=\"keyboard-shortcuts\">\n                    <KeyboardIcon />\n                    Keyboard Shortcuts\n                  </DropdownMenuItem>\n                  <DropdownMenuItem value=\"language\">\n                    <LanguagesIcon />\n                    Language\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <BellIcon />\n                      Notifications\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Notification Types</DropdownMenuLabel>\n                          <DropdownMenuCheckboxItem\n                            value=\"push-notifications\"\n                            checked={notifications.push}\n                            onCheckedChange={(checked) =>\n                              setNotifications({\n                                ...notifications,\n                                push: checked === true,\n                              })\n                            }\n                          >\n                            <BellIcon />\n                            Push Notifications\n                          </DropdownMenuCheckboxItem>\n                          <DropdownMenuCheckboxItem\n                            value=\"email-notifications\"\n                            checked={notifications.email}\n                            onCheckedChange={(checked) =>\n                              setNotifications({\n                                ...notifications,\n                                email: checked === true,\n                              })\n                            }\n                          >\n                            <MailIcon />\n                            Email Notifications\n                          </DropdownMenuCheckboxItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem value=\"privacy-security\">\n                    <ShieldIcon />\n                    Privacy & Security\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"help-support\">\n            <HelpCircleIcon />\n            Help & Support\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"documentation\">\n            <FileTextIcon />\n            Documentation\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem variant=\"destructive\" value=\"sign-out\">\n            <LogOutIcon />\n            Sign Out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { BellIcon, MailIcon, MessageSquareIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  });\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Notifications</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-48\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n          <DropdownMenuCheckboxItem\n            value=\"email-notifications\"\n            checked={notifications.email}\n            onCheckedChange={(checked) =>\n              setNotifications({ ...notifications, email: checked === true })\n            }\n          >\n            <MailIcon />\n            Email notifications\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem\n            value=\"sms-notifications\"\n            checked={notifications.sms}\n            onCheckedChange={(checked) =>\n              setNotifications({ ...notifications, sms: checked === true })\n            }\n          >\n            <MessageSquareIcon />\n            SMS notifications\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem\n            value=\"push-notifications\"\n            checked={notifications.push}\n            onCheckedChange={(checked) =>\n              setNotifications({ ...notifications, push: checked === true })\n            }\n          >\n            <BellIcon />\n            Push notifications\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true);\n  const [showActivityBar, setShowActivityBar] = React.useState(false);\n  const [showPanel, setShowPanel] = React.useState(false);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-40\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n          <DropdownMenuCheckboxItem\n            value=\"statusbar\"\n            checked={showStatusBar ?? false}\n            onCheckedChange={setShowStatusBar}\n          >\n            Status Bar\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem\n            value=\"activitybar\"\n            checked={showActivityBar}\n            onCheckedChange={setShowActivityBar}\n            disabled\n          >\n            Activity Bar\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem\n            value=\"panel\"\n            checked={showPanel}\n            onCheckedChange={setShowPanel}\n          >\n            Panel\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>My Account</DropdownMenuLabel>\n          <DropdownMenuItem value=\"profile\">Profile</DropdownMenuItem>\n          <DropdownMenuItem value=\"billing\">Billing</DropdownMenuItem>\n          <DropdownMenuItem value=\"settings\">Settings</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\n        <DropdownMenuItem value=\"support\">Support</DropdownMenuItem>\n        <DropdownMenuItem value=\"api\" disabled>\n          API\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { BadgeCheckIcon, BellIcon, CreditCardIcon, LogOutIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"khabubuphathu\" />\n            <AvatarFallback>PK</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"account\">\n            <BadgeCheckIcon />\n            Account\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"billing\">\n            <CreditCardIcon />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"notifications\">\n            <BellIcon />\n            Notifications\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem value=\"signout\">\n          <LogOutIcon />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",{"_877":2007,"_68":1340},{"_877":2007,"_68":2260},"<DropdownMenu>\r\n  <DropdownMenuTrigger asChild>\r\n    <Button variant=\"outline\">Open</Button>\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent>\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\r\n      <DropdownMenuItem>Profile</DropdownMenuItem>\r\n      <DropdownMenuItem>Billing</DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem>Team</DropdownMenuItem>\r\n      <DropdownMenuItem>Subscription</DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>",[2273,2274],[2263,2264,2265,2266,2267],{"_811":1363,"_19":1364,"_849":1365,"_68":2272},{"_811":1359,"_19":1360,"_849":1361,"_68":2271},{"_811":1355,"_19":1356,"_849":1357,"_68":2270},{"_811":864,"_19":865,"_68":2269},{"_811":1350,"_19":1351,"_849":1352,"_68":2268},"import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\n\nexport default function Preview() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Sticky Footer</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Sticky Footer</DialogTitle>\n          <DialogDescription>\n            This dialog has a sticky footer that stays visible while the content scrolls.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4\">\n          {Array.from({ length: 10 }).map((_, index) => (\n            <p key={index} className=\"mb-4 leading-normal\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor\n              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n              mollit anim id est laborum.\n            </p>\n          ))}\n        </div>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"outline\">Close</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { Field, FieldGroup } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport default function Preview() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-sm\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you're done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup>\n            <Field>\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </Field>\n            <Field>\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\n\nexport default function Preview() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Scrollable Content</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Scrollable Content</DialogTitle>\n          <DialogDescription>This is a dialog with scrollable content.</DialogDescription>\n        </DialogHeader>\n        <div className=\"-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4\">\n          {Array.from({ length: 10 }).map((_, index) => (\n            <p key={index} className=\"mb-4 leading-normal\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor\n              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n              mollit anim id est laborum.\n            </p>\n          ))}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\n\nexport default function Preview() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">No Close Button</Button>\n      </DialogTrigger>\n      <DialogContent showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>No Close Button</DialogTitle>\n          <DialogDescription>\n            This dialog doesn't have a close button in the top-right corner.\n          </DialogDescription>\n        </DialogHeader>\n      </DialogContent>\n    </Dialog>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport default function Preview() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>Anyone who has this link will be able to view this.</DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center gap-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input id=\"link\" defaultValue=\"https://ui.shadcn.com/docs/installation\" readOnly />\n          </div>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\">Close</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",{"_877":2007,"_68":1370},{"_877":2007,"_68":1369},[2287,2288],[2277,2278,2279,2280],{"_811":1229,"_19":1230,"_68":2286},{"_811":1383,"_19":1384,"_849":2284,"_68":2285},{"_811":1380,"_19":1381,"_849":2282,"_68":2283},{"_811":864,"_19":865,"_68":2281},"import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { ChevronsUpDown } from \"lucide-react\";\n\nexport default function Preview() {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={(details) => setIsOpen(details.open)}\n      className=\"flex w-[350px] flex-col gap-2\"\n    >\n      <div className=\"flex items-center justify-between gap-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">Order #4189</h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n            <ChevronsUpDown />\n            <span className=\"sr-only\">Toggle details</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"flex items-center justify-between rounded-md border px-4 py-2 text-sm\">\n        <span className=\"text-muted-foreground\">Status</span>\n        <span className=\"font-medium\">Shipped</span>\n      </div>\n      <CollapsibleContent className=\"flex flex-col gap-2\">\n        <div className=\"rounded-md border px-4 py-2 text-sm\">\n          <p className=\"font-medium\">Shipping address</p>\n          <p className=\"text-muted-foreground\">100 Market St, San Francisco</p>\n        </div>\n        <div className=\"rounded-md border px-4 py-2 text-sm\">\n          <p className=\"font-medium\">Items</p>\n          <p className=\"text-muted-foreground\">2x Studio Headphones</p>\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n","Use a trigger button to reveal additional settings.","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { MaximizeIcon, MinimizeIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n      <CardHeader>\n        <CardTitle>Radius</CardTitle>\n        <CardDescription>Set the corner radius of the element.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Collapsible\n          open={isOpen}\n          onOpenChange={(details) => setIsOpen(details.open)}\n          className=\"flex items-start gap-2\"\n        >\n          <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n            <Field>\n              <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                Radius X\n              </FieldLabel>\n              <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                Radius Y\n              </FieldLabel>\n              <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n            </Field>\n            <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n            </CollapsibleContent>\n          </FieldGroup>\n          <CollapsibleTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              {isOpen ? <MinimizeIcon /> : <MaximizeIcon />}\n            </Button>\n          </CollapsibleTrigger>\n        </Collapsible>\n      </CardContent>\n    </Card>\n  );\n}\n","Use nested collapsibles to build a file tree.","import { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { ChevronRightIcon, FileIcon, FolderIcon } from \"lucide-react\";\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] };\n\nexport default function Preview() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [{ name: \"favicon.ico\" }, { name: \"logo.svg\" }, { name: \"images\" }],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ];\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <ChevronRightIcon className=\"transition-transform group-data-[state=open]:rotate-90\" />\n              <FolderIcon />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      );\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <FileIcon />\n        <span>{fileItem.name}</span>\n      </Button>\n    );\n  };\n\n  return (\n    <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n      <CardHeader>\n        <Tabs defaultValue=\"explorer\">\n          <TabsList className=\"w-full\">\n            <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n            <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-1\">{fileTree.map((item) => renderItem(item))}</div>\n      </CardContent>\n    </Card>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Card className=\"mx-auto w-full max-w-sm\">\n      <CardContent>\n        <Collapsible className=\"data-[state=open]:bg-muted rounded-md\">\n          <CollapsibleTrigger asChild>\n            <Button variant=\"ghost\" className=\"group w-full\">\n              Product details\n              <ChevronDownIcon className=\"ml-auto group-data-[state=open]:rotate-180\" />\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"flex flex-col items-start gap-2 p-2.5 pt-0 text-sm\">\n            <div>This panel can be expanded or collapsed to reveal additional content.</div>\n            <Button size=\"xs\">Learn More</Button>\n          </CollapsibleContent>\n        </Collapsible>\n      </CardContent>\n    </Card>\n  );\n}\n",{"_877":2007,"_68":1390},{"_877":2007,"_68":1389},[2301,2302],[2291,2292,2293,2294,2295],{"_811":1229,"_19":1230,"_849":1405,"_68":2300},{"_811":849,"_19":974,"_849":1403,"_68":2299},{"_811":898,"_19":899,"_849":1401,"_68":2298},{"_811":1091,"_19":1092,"_849":1399,"_68":2297},{"_811":864,"_19":865,"_68":2296},"import { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldTitle,\n} from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"max-w-sm\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-checkbox\" name=\"terms-checkbox\">\n          Accept terms and conditions\n        </Checkbox>\n      </Field>\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-checkbox-2\" name=\"terms-checkbox-2\" defaultChecked>\n          <FieldContent>\n            <FieldTitle>Accept terms and conditions</FieldTitle>\n            <FieldDescription>By clicking this checkbox, you agree to the terms.</FieldDescription>\n          </FieldContent>\n        </Checkbox>\n      </Field>\n      <Field orientation=\"horizontal\" disabled>\n        <Checkbox id=\"toggle-checkbox\" name=\"toggle-checkbox\">\n          Enable notifications\n        </Checkbox>\n      </Field>\n      <FieldLabel>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"toggle-checkbox-2\" name=\"toggle-checkbox-2\">\n            <FieldContent>\n              <FieldTitle>Enable notifications</FieldTitle>\n              <FieldDescription>\n                You can enable or disable notifications at any time.\n              </FieldDescription>\n            </FieldContent>\n          </Checkbox>\n        </Field>\n      </FieldLabel>\n    </FieldGroup>\n  );\n}\n","import { Checkbox, CheckboxGroup } from \"@/components/ui/checkbox\";\nimport { Field, FieldDescription, FieldGroup, FieldLegend, FieldSet } from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldSet>\n      <FieldLegend variant=\"label\">Show these items on the desktop:</FieldLegend>\n      <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>\n      <CheckboxGroup defaultValue={[\"hard-disks\", \"external-disks\"]} name=\"finder-pref\">\n        <FieldGroup className=\"gap-3\">\n          <Field orientation=\"horizontal\">\n            <Checkbox value=\"hard-disks\" id=\"finder-pref-hard-disks\">\n              Hard disks\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox value=\"external-disks\" id=\"finder-pref-external-disks\">\n              External disks\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox value=\"cds-dvds\" id=\"finder-pref-cds-dvds\">\n              CDs, DVDs, and iPods\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox value=\"connected-servers\" id=\"finder-pref-connected-servers\">\n              Connected servers\n            </Checkbox>\n          </Field>\n        </FieldGroup>\n      </CheckboxGroup>\n    </FieldSet>\n  );\n}\n","import { Checkbox } from \"@/components/ui/checkbox\";\nimport { Field, FieldGroup } from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"mx-auto w-56\">\n      <Field orientation=\"horizontal\" data-disabled>\n        <Checkbox id=\"toggle-checkbox-disabled\" name=\"toggle-checkbox-disabled\">\n          Enable notifications\n        </Checkbox>\n      </Field>\n    </FieldGroup>\n  );\n}\n","import { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"mx-auto w-72\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-checkbox-desc\" name=\"terms-checkbox-desc\" defaultChecked />\n        <FieldContent>\n          <FieldLabel htmlFor=\"terms-checkbox-desc\">Accept terms and conditions</FieldLabel>\n          <FieldDescription>\n            By clicking this checkbox, you agree to the terms and conditions.\n          </FieldDescription>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  );\n}\n","import { Checkbox } from \"@/components/ui/checkbox\";\nimport { Field, FieldGroup } from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"mx-auto w-56\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-checkbox-basic\" name=\"terms-checkbox-basic\">\n          Accept terms and conditions\n        </Checkbox>\n      </Field>\n    </FieldGroup>\n  );\n}\n",{"_877":2007,"_68":1410},{"_877":2007,"_68":1409},[2313,2314],[2305,2306,2307,2308],{"_811":1426,"_19":1427,"_849":1428,"_68":2312},{"_811":864,"_19":865,"_68":2311},{"_811":965,"_19":966,"_849":1423,"_68":2310},{"_811":1419,"_19":1420,"_849":1421,"_68":2309},"import { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselControl,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\n\nexport default function Preview() {\n  return (\n    <Carousel slideCount={5} spacing=\"16px\" slidesPerPage={2} className=\"w-full max-w-sm\">\n      <CarouselControl>\n        <CarouselPrevious />\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index} index={index}>\n              <div className=\"p-1\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselNext />\n      </CarouselControl>\n    </Carousel>\n  );\n}\n","import { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\n\nconst SLIDE_COUNT = 5;\nconst SLIDES_PER_PAGE = 3;\n\nexport default function Preview() {\n  return (\n    <Carousel slideCount={SLIDE_COUNT} slidesPerPage={SLIDES_PER_PAGE} className=\"w-full max-w-sm\">\n      <CarouselContent>\n        {Array.from({ length: SLIDE_COUNT }).map((_, index) => (\n          <CarouselItem key={index} index={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious className=\"absolute top-1/2 -left-12 -translate-y-1/2\" />\n      <CarouselNext className=\"absolute top-1/2 -right-12 -translate-y-1/2\" />\n    </Carousel>\n  );\n}\n","import { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\n\nconst SLIDE_COUNT = 5;\n\nexport default function Preview() {\n  return (\n    <Carousel slideCount={SLIDE_COUNT} className=\"w-full max-w-48 sm:max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: SLIDE_COUNT }).map((_, index) => (\n          <CarouselItem key={index} index={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious className=\"absolute top-1/2 -left-12 -translate-y-1/2\" />\n      <CarouselNext className=\"absolute top-1/2 -right-12 -translate-y-1/2\" />\n    </Carousel>\n  );\n}\n","import { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\n\nconst SLIDE_COUNT = 5;\nconst SLIDES_PER_PAGE = 2;\n\nexport default function Preview() {\n  return (\n    <Carousel\n      slideCount={SLIDE_COUNT}\n      slidesPerPage={SLIDES_PER_PAGE}\n      orientation=\"vertical\"\n      spacing=\"12px\"\n      className=\"w-full max-w-xs\"\n    >\n      <CarouselContent className=\"h-80\">\n        {Array.from({ length: SLIDE_COUNT }).map((_, index) => (\n          <CarouselItem key={index} index={index}>\n            <p className=\"p-1\">\n              <Card className=\"flex min-h-full items-center justify-center\">\n                <CardContent className=\"flex items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </p>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious className=\"absolute -top-12 left-1/2 -translate-x-1/2\">\n        <ChevronUpIcon className=\"size-4\" />\n      </CarouselPrevious>\n      <CarouselNext className=\"absolute -bottom-12 left-1/2 -translate-x-1/2\">\n        <ChevronDownIcon className=\"size-4\" />\n      </CarouselNext>\n    </Carousel>\n  );\n}\n",{"_877":2007,"_68":1433},{"_877":2007,"_68":1432},[2323,2324],[2317,2318,2319],{"_811":1117,"_19":1118,"_849":1446,"_68":2322},{"_811":864,"_19":865,"_68":2321},{"_811":1441,"_19":1442,"_849":1443,"_68":2320},"import { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nexport default function Preview() {\n  return (\n    <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Small Card</CardTitle>\n        <CardDescription>This card uses the small size variant.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <p>\n          The card component supports a size prop that can be set to "sm" for a more\n          compact appearance.\n        </p>\n      </CardContent>\n      <CardFooter>\n        <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n          Action\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport default function Preview() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Login to your account</CardTitle>\n        <CardDescription>Enter your email below to login to your account</CardDescription>\n        <CardAction>\n          <Button variant=\"link\">Sign Up</Button>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <div className=\"flex flex-col gap-6\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n            </div>\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center\">\n                <Label htmlFor=\"password\">Password</Label>\n                <a\n                  href=\"#\"\n                  className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                >\n                  Forgot your password?\n                </a>\n              </div>\n              <Input id=\"password\" type=\"password\" required />\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2\">\n        <Button type=\"submit\" className=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" className=\"w-full\">\n          Login with Google\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n","import { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nexport default function Preview() {\n  return (\n    <Card className=\"relative mx-auto w-full max-w-sm pt-0\">\n      <div className=\"absolute inset-0 z-30 aspect-video bg-black/35\" />\n      <img\n        src=\"https://placehold.co/400x400/d3d3d3/d3d3d3\"\n        alt=\"Event cover\"\n        className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40\"\n      />\n      <CardHeader>\n        <CardAction>\n          <Badge variant=\"secondary\">Featured</Badge>\n        </CardAction>\n        <CardTitle>Design systems meetup</CardTitle>\n        <CardDescription>\n          A practical talk on component APIs, accessibility, and shipping faster.\n        </CardDescription>\n      </CardHeader>\n      <CardFooter>\n        <Button className=\"w-full\">View Event</Button>\n      </CardFooter>\n    </Card>\n  );\n}\n",{"_877":2007,"_68":1451},{"_877":2007,"_68":1450},[2343,2344],[2327,2328,2329,2330,2331,2332,2333],{"_811":1229,"_19":1230,"_849":2341,"_68":2342},{"_811":1476,"_19":1477,"_68":2340},{"_811":1473,"_19":1474,"_68":2339},{"_811":1470,"_19":1471,"_68":2338},{"_811":1467,"_19":1468,"_849":2336,"_68":2337},{"_811":864,"_19":865,"_68":2335},{"_811":1463,"_19":1464,"_68":2334},"import {\n  Calendar,\n  CalendarDayView,\n  CalendarMonthView,\n  CalendarViewHeader,\n  CalendarYearView,\n} from \"@/components/ui/calendar\";\n\nexport default function Preview() {\n  return (\n    <Calendar selectionMode=\"single\" className=\"rounded-lg border\">\n      <CalendarDayView header={<CalendarViewHeader />} />\n      <CalendarMonthView header={<CalendarViewHeader />} />\n      <CalendarYearView header={<CalendarViewHeader />} />\n    </Calendar>\n  );\n}\n","import * as React from \"react\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\n\nexport default function Preview() {\n  const [value, setValue] = React.useState<DateValue[]>([new CalendarDate(2026, 3, 21)]);\n\n  return (\n    <Calendar\n      selectionMode=\"single\"\n      value={value}\n      onValueChange={(details) => setValue(details.value)}\n      className=\"rounded-lg border\"\n    />\n  );\n}\n","Use the selectionMode=\"range\" prop to enable range selection.","import * as React from \"react\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\n\nexport default function Preview() {\n  const [value, setValue] = React.useState<DateValue[]>([\n    new CalendarDate(2026, 1, 12),\n    new CalendarDate(2026, 2, 11),\n  ]);\n\n  return (\n    <Card className=\"mx-auto w-fit max-w-xl p-0\">\n      <CardContent className=\"p-0\">\n        <Calendar\n          selectionMode=\"range\"\n          defaultFocusedValue={new CalendarDate(2026, 1, 12)}\n          value={value}\n          onValueChange={(details) => setValue(details.value)}\n          numOfMonths={2}\n          max={new CalendarDate(2026, 3, 21)}\n          min={new CalendarDate(1900, 1, 1)}\n        />\n      </CardContent>\n    </Card>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { Calendar, CalendarDayView, CalendarPresetTrigger } from \"@/components/ui/calendar\";\nimport { Card, CardContent, CardFooter } from \"@/components/ui/card\";\nimport { CalendarDate } from \"@internationalized/date\";\n\nfunction daysFromNow(days: number) {\n  const d = new Date();\n  d.setDate(d.getDate() + days);\n  return [new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())];\n}\n\nexport default function Preview() {\n  return (\n    <Calendar className=\"bg-transparent\" fixedWeeks>\n      <Card className=\"mx-auto w-fit max-w-[260px]\" size=\"sm\">\n        <CardContent>\n          <CalendarDayView />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: daysFromNow(0) },\n            { label: \"Tomorrow\", value: daysFromNow(1) },\n            { label: \"In 3 days\", value: daysFromNow(3) },\n            { label: \"In a week\", value: daysFromNow(7) },\n            { label: \"In 2 weeks\", value: daysFromNow(14) },\n          ].map((preset) => (\n            <CalendarPresetTrigger key={preset.label} value={preset.value} asChild>\n              <Button variant=\"outline\" size=\"sm\" className=\"flex-1\">\n                {preset.label}\n              </Button>\n            </CalendarPresetTrigger>\n          ))}\n        </CardFooter>\n      </Card>\n    </Calendar>\n  );\n}\n","import * as React from \"react\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Card, CardContent, CardFooter } from \"@/components/ui/card\";\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { Clock2Icon } from \"lucide-react\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\n\nexport default function Preview() {\n  const now = new Date();\n  const [value, setValue] = React.useState<DateValue[]>([\n    new CalendarDate(now.getFullYear(), now.getMonth() + 1, 12),\n  ]);\n\n  return (\n    <Card size=\"sm\" className=\"mx-auto w-fit\">\n      <CardContent>\n        <Calendar\n          selectionMode=\"single\"\n          value={value}\n          onValueChange={(details) => setValue(details.value)}\n          className=\"p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"border-t bg-card\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n            <InputGroup>\n              <InputGroupInput\n                id=\"time-from\"\n                type=\"time\"\n                step=\"1\"\n                defaultValue=\"10:30:00\"\n                className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n              />\n              <InputGroupAddon>\n                <Clock2Icon className=\"text-muted-foreground\" />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n            <InputGroup>\n              <InputGroupInput\n                id=\"time-to\"\n                type=\"time\"\n                step=\"1\"\n                defaultValue=\"12:30:00\"\n                className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n              />\n              <InputGroupAddon>\n                <Clock2Icon className=\"text-muted-foreground\" />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n      </CardFooter>\n    </Card>\n  );\n}\n","import * as React from \"react\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\n\nexport default function Preview() {\n  const [value, setValue] = React.useState<DateValue[]>([new CalendarDate(2026, 2, 3)]);\n\n  const bookedStart = new CalendarDate(2026, 2, 12);\n  const bookedEnd = new CalendarDate(2026, 2, 26);\n\n  return (\n    <Card className=\"mx-auto w-fit p-0\">\n      <CardContent className=\"p-0\">\n        <Calendar\n          selectionMode=\"single\"\n          defaultFocusedValue={new CalendarDate(2026, 2, 3)}\n          value={value}\n          onValueChange={(details) => setValue(details.value)}\n          isDateUnavailable={(date) =>\n            date.compare(bookedStart) >= 0 && date.compare(bookedEnd) <= 0\n          }\n        />\n      </CardContent>\n    </Card>\n  );\n}\n","A basic calendar component. We used className=\"rounded-lg border\" to style the calendar.","import { Calendar } from \"@/components/ui/calendar\";\n\nexport default function Preview() {\n  return <Calendar selectionMode=\"single\" className=\"rounded-lg border\" />;\n}\n",{"_877":2007,"_68":1483},{"_877":2007,"_68":2345},"const [date, setDate] = React.useState<DateValue[]>([\r\n  new CalendarDate(2026, 3, 21),\r\n])\r\n \r\nreturn (\r\n  <Calendar\r\n    selectionMode=\"single\"\r\n    value={date}\r\n    onValueChange={(details) =>\r\n      setDate(details.value)\r\n    }\r\n    className=\"rounded-lg border\"\r\n  />\r\n)",[2358,2359],[2348,2349,2350,2351,2352],{"_811":1426,"_19":1427,"_849":1501,"_68":2357},{"_811":172,"_19":984,"_849":1499,"_68":2356},{"_811":864,"_19":865,"_68":2355},{"_811":1441,"_19":1442,"_849":1496,"_68":2354},{"_811":1492,"_19":1493,"_849":1494,"_68":2353},"import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup, ButtonGroupSeparator } from \"@/components/ui/button-group\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"secondary\">Button</Button>\n      <ButtonGroupSeparator />\n      <Button size=\"icon\" variant=\"secondary\">\n        <PlusIcon />\n      </Button>\n    </ButtonGroup>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col items-start gap-8\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          Small\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Button\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Group\n        </Button>\n        <Button variant=\"outline\" size=\"icon-sm\">\n          <PlusIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Default</Button>\n        <Button variant=\"outline\">Button</Button>\n        <Button variant=\"outline\">Group</Button>\n        <Button variant=\"outline\" size=\"icon\">\n          <PlusIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"lg\">\n          Large\n        </Button>\n        <Button variant=\"outline\" size=\"lg\">\n          Button\n        </Button>\n        <Button variant=\"outline\" size=\"lg\">\n          Group\n        </Button>\n        <Button variant=\"outline\" size=\"icon-lg\">\n          <PlusIcon />\n        </Button>\n      </ButtonGroup>\n    </div>\n  );\n}\n","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\";\n\nexport default function Preview() {\n  const [label, setLabel] = React.useState(\"personal\");\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\">\n              <MoreHorizontalIcon />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-40\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem value=\"mark-as-read\">\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem value=\"archive\">\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem value=\"snooze\">\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem value=\"add-to-calendar\">\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem value=\"add-to-list\">\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={(details) => setLabel(details.value)}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">Personal</DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">Work</DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">Other</DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\" value=\"delete\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup, ButtonGroupSeparator } from \"@/components/ui/button-group\";\n\nexport default function Preview() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"secondary\" size=\"sm\">\n        Copy\n      </Button>\n      <ButtonGroupSeparator />\n      <Button variant=\"secondary\" size=\"sm\">\n        Paste\n      </Button>\n    </ButtonGroup>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <ButtonGroup orientation=\"vertical\" aria-label=\"Media controls\" className=\"h-fit\">\n      <Button variant=\"outline\" size=\"icon\">\n        <PlusIcon />\n      </Button>\n      <Button variant=\"outline\" size=\"icon\">\n        <MinusIcon />\n      </Button>\n    </ButtonGroup>\n  );\n}\n",{"_877":2007,"_68":1506},{"_877":2007,"_68":1505},[2384,2385],[2362,2363,2364,2365,2366,2367,2368,2369,2370,2371,2372],{"_811":1542,"_19":1543,"_68":2383},{"_811":1317,"_19":1318,"_68":2382},{"_811":1538,"_19":1539,"_68":2381},{"_811":1121,"_19":1122,"_68":2380},{"_811":1113,"_19":1114,"_849":1535,"_68":2379},{"_811":1269,"_19":1270,"_68":2378},{"_811":1531,"_19":1532,"_68":2377},{"_811":1528,"_19":1529,"_68":2376},{"_811":864,"_19":865,"_68":2375},{"_811":1441,"_19":1442,"_849":1525,"_68":2374},{"_811":1521,"_19":1522,"_849":1523,"_68":2373},"import { Button } from \"@/components/ui/button\";\nimport { GitBranchIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Button variant=\"outline\" size=\"sm\">\n      <GitBranchIcon /> New Branch\n    </Button>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { ArrowUpRightIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col items-start gap-8 sm:flex-row\">\n      <div className=\"flex items-start gap-2\">\n        <Button size=\"xs\" variant=\"outline\">\n          Extra Small\n        </Button>\n        <Button size=\"icon-xs\" aria-label=\"Submit\" variant=\"outline\">\n          <ArrowUpRightIcon />\n        </Button>\n      </div>\n      <div className=\"flex items-start gap-2\">\n        <Button size=\"sm\" variant=\"outline\">\n          Small\n        </Button>\n        <Button size=\"icon-sm\" aria-label=\"Submit\" variant=\"outline\">\n          <ArrowUpRightIcon />\n        </Button>\n      </div>\n      <div className=\"flex items-start gap-2\">\n        <Button variant=\"outline\">Default</Button>\n        <Button size=\"icon\" aria-label=\"Submit\" variant=\"outline\">\n          <ArrowUpRightIcon />\n        </Button>\n      </div>\n      <div className=\"flex items-start gap-2\">\n        <Button variant=\"outline\" size=\"lg\">\n          Large\n        </Button>\n        <Button size=\"icon-lg\" aria-label=\"Submit\" variant=\"outline\">\n          <ArrowUpRightIcon />\n        </Button>\n      </div>\n    </div>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { ArrowUpIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2 md:flex-row\">\n      <Button variant=\"outline\">Button</Button>\n      <Button variant=\"outline\" size=\"icon\" aria-label=\"Submit\">\n        <ArrowUpIcon />\n      </Button>\n    </div>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button variant=\"secondary\">Secondary</Button>;\n}\n","import { Button } from \"@/components/ui/button\";\nimport { ArrowUpIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <Button variant=\"outline\" size=\"icon\" className=\"rounded-full\">\n        <ArrowUpIcon />\n      </Button>\n    </div>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button variant=\"outline\">Outline</Button>;\n}\n","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button variant=\"link\">Link</Button>;\n}\n","import { Button } from \"@/components/ui/button\";\nimport { CircleFadingArrowUpIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <CircleFadingArrowUpIcon />\n    </Button>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button variant=\"ghost\">Ghost</Button>;\n}\n","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button variant=\"destructive\">Destructive</Button>;\n}\n","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button>Button</Button>;\n}\n",{"_877":2007,"_68":1548},{"_877":2007,"_68":1547},[2398,2399],[2388,2389,2390,2391,2392],{"_811":1229,"_19":1230,"_849":1569,"_68":2397},{"_811":1565,"_19":1566,"_849":1567,"_68":2396},{"_811":1561,"_19":1562,"_849":1563,"_68":2395},{"_811":1166,"_19":1167,"_849":1559,"_68":2394},{"_811":864,"_19":865,"_68":2393},"import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Home</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button size=\"icon-sm\" variant=\"ghost\">\n                <BreadcrumbEllipsis />\n                <span className=\"sr-only\">Toggle menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem value=\"documentation\">Documentation</DropdownMenuItem>\n                <DropdownMenuItem value=\"themes\">Themes</DropdownMenuItem>\n                <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Components</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { ChevronDownIcon, DotIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Home</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <DotIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <button className=\"flex items-center gap-1\">\n                Components\n                <ChevronDownIcon className=\"size-3.5\" />\n              </button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem value=\"documentation\">Documentation</DropdownMenuItem>\n                <DropdownMenuItem value=\"themes\">Themes</DropdownMenuItem>\n                <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <DotIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport { DotIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Home</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <DotIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Components</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <DotIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function Preview() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"/\">Home</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbEllipsis />\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Components</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function Preview() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n",{"_877":2007,"_68":1574},{"_877":2007,"_68":1573},[2412,2413],[2402,2403,2404,2405,2406],{"_811":1592,"_19":1593,"_849":1594,"_68":2411},{"_811":1113,"_19":1114,"_849":1590,"_68":2410},{"_811":864,"_19":865,"_68":2409},{"_811":1585,"_19":1586,"_849":1587,"_68":2408},{"_811":1521,"_19":1522,"_849":1583,"_68":2407},"import { Badge } from \"@/components/ui/badge\";\nimport { BadgeCheck, BookmarkIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Badge variant=\"secondary\">\n        <BadgeCheck data-icon=\"inline-start\" />\n        Verified\n      </Badge>\n      <Badge variant=\"outline\">\n        Bookmark\n        <BookmarkIcon data-icon=\"inline-end\" />\n      </Badge>\n    </div>\n  );\n}\n","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Badge>Default</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"destructive\">Destructive</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"ghost\">Ghost</Badge>\n    </div>\n  );\n}\n","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full flex-wrap justify-center gap-2\">\n      <Badge>Badge</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"destructive\">Destructive</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n    </div>\n  );\n}\n","import { Badge } from \"@/components/ui/badge\";\nimport { ArrowUpRightIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Badge asChild>\n      <a href=\"#link\">\n        Open Link <ArrowUpRightIcon data-icon=\"inline-end\" />\n      </a>\n    </Badge>\n  );\n}\n","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">Blue</Badge>\n      <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n        Green\n      </Badge>\n      <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">Sky</Badge>\n      <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n        Purple\n      </Badge>\n      <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">Red</Badge>\n    </div>\n  );\n}\n",{"_877":2007,"_68":1599},{"_877":2007,"_68":1598},[2430,2431],[2416,2417,2418,2419,2420,2421,2422],{"_811":1277,"_19":1278,"_849":1625,"_68":2429},{"_811":1621,"_19":1622,"_849":1623,"_68":2428},{"_811":685,"_19":1232,"_849":1619,"_68":2427},{"_811":1615,"_19":1616,"_849":1617,"_68":2426},{"_811":1229,"_19":1230,"_849":1613,"_68":2425},{"_811":864,"_19":865,"_68":2424},{"_811":965,"_19":966,"_849":1610,"_68":2423},"import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2 grayscale\">\n      <Avatar size=\"sm\">\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n      <Avatar size=\"lg\">\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n    </div>\n  );\n}\n","import {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-row flex-wrap items-center gap-6 md:gap-12\">\n      <Avatar>\n        <AvatarImage\n          src=\"https://github.com/khabubuphathu.png\"\n          alt=\"@khabubuphathu\"\n          className=\"grayscale\"\n        />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n        <AvatarFallback>BA</AvatarFallback>\n        <AvatarBadge className=\"bg-green-600 dark:bg-green-800\" />\n      </Avatar>\n      <AvatarGroup className=\"grayscale\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n          <AvatarFallback>PK</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\n          <AvatarFallback>WE</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n          <AvatarFallback>BA</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </div>\n  );\n}\n","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Preview() {\n  return (\n    <Avatar>\n      <AvatarImage\n        src=\"https://github.com/khabubuphathu.png\"\n        alt=\"@khabubuphathu\"\n        className=\"grayscale\"\n      />\n      <AvatarFallback>PK</AvatarFallback>\n    </Avatar>\n  );\n}\n","import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Avatar className=\"grayscale\">\n      <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n      <AvatarFallback>PK</AvatarFallback>\n      <AvatarBadge>\n        <PlusIcon />\n      </AvatarBadge>\n    </Avatar>\n  );\n}\n","import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Preview() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n      <AvatarFallback>PK</AvatarFallback>\n      <AvatarBadge className=\"bg-green-600 dark:bg-green-800\" />\n    </Avatar>\n  );\n}\n","import {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <AvatarGroup className=\"grayscale\">\n      <Avatar>\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\n        <AvatarFallback>WE</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n        <AvatarFallback>BA</AvatarFallback>\n      </Avatar>\n      <AvatarGroupCount>\n        <PlusIcon />\n      </AvatarGroupCount>\n    </AvatarGroup>\n  );\n}\n","import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Preview() {\n  return (\n    <AvatarGroup className=\"grayscale\">\n      <Avatar>\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\n        <AvatarFallback>WE</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n        <AvatarFallback>BA</AvatarFallback>\n      </Avatar>\n    </AvatarGroup>\n  );\n}\n",{"_877":2007,"_68":1630},{"_877":2007,"_68":1629},[2440,2441],[2434,2435,2436],{"_811":1643,"_19":1644,"_849":1645,"_68":2439},{"_811":864,"_19":865,"_68":2438},{"_811":1638,"_19":1639,"_849":1640,"_68":2437},"import { AspectRatio } from \"@/components/ui/aspect-ratio\";\n\nexport default function Preview() {\n  return (\n    <div className=\"w-full max-w-[12rem]\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <img\n          src=\"https://placehold.co/600x600/CCCCCC/CCCCCC/png\"\n          alt=\"Photo\"\n          className=\"size-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </div>\n  );\n}\n","import { AspectRatio } from \"@/components/ui/aspect-ratio\";\n\nexport default function Preview() {\n  return (\n    <div className=\"w-full max-w-sm\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <img\n          src=\"https://placehold.co/600x400/CCCCCC/CCCCCC/png\"\n          alt=\"Photo\"\n          className=\"size-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </div>\n  );\n}\n","import { AspectRatio } from \"@/components/ui/aspect-ratio\";\n\nexport default function Preview() {\n  return (\n    <div className=\"w-full max-w-[10rem]\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <img\n          src=\"https://placehold.co/600x400/CCCCCC/CCCCCC/png\"\n          alt=\"Photo\"\n          className=\"size-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </div>\n  );\n}\n",{"_877":2007,"_68":1650},{"_877":2007,"_68":2442},"<AspectRatio ratio={16 / 9} className=\"bg-muted\">\r\n  <img src=\"...\" className=\"size-full rounded-md object-cover\" />\r\n</AspectRatio>",[2456,2457],[2445,2446,2447,2448,2449,2450],{"_811":1229,"_19":1230,"_849":1676,"_68":2453},{"_811":1317,"_19":1318,"_849":1674,"_68":2455},{"_811":1670,"_19":1671,"_849":1672,"_68":2454},{"_811":864,"_19":865,"_68":2453},{"_811":1665,"_19":1666,"_849":1667,"_68":2452},{"_811":1661,"_19":1662,"_849":1663,"_68":2451},"import {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { BluetoothIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent size=\"sm\">\n        <AlertDialogHeader>\n          <AlertDialogMedia>\n            <BluetoothIcon />\n          </AlertDialogMedia>\n          <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n          <AlertDialogDescription>\n            Do you want to allow the USB accessory to connect to this device?\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Don't allow</AlertDialogCancel>\n          <AlertDialogAction value=\"allow\">Allow</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n","import {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent size=\"sm\">\n        <AlertDialogHeader>\n          <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n          <AlertDialogDescription>\n            Do you want to allow the USB accessory to connect to this device?\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Don't allow</AlertDialogCancel>\n          <AlertDialogAction value=\"allow\">Allow</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n","import {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your account and remove your\n            data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction value=\"continue\">Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n","import {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { CircleFadingPlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Share Project</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogMedia>\n            <CircleFadingPlusIcon />\n          </AlertDialogMedia>\n          <AlertDialogTitle>Share this project?</AlertDialogTitle>\n          <AlertDialogDescription>\n            Anyone with the link will be able to view and edit this project.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction value=\"share\">Share</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n","import {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { Trash2Icon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"destructive\">Delete Chat</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent size=\"sm\">\n        <AlertDialogHeader>\n          <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n            <Trash2Icon />\n          </AlertDialogMedia>\n          <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This will permanently delete this chat conversation. View <a href=\"#\">Settings</a> to\n            delete any memories saved during this chat.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction variant=\"destructive\" value=\"delete\">\n            Delete\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n",{"_877":2007,"_68":1681},{"_877":2007,"_68":2458},"<AlertDialog>\r\n  <AlertDialogTrigger asChild>\r\n    <Button variant=\"outline\">Show Dialog</Button>\r\n  </AlertDialogTrigger>\r\n  <AlertDialogContent>\r\n    <AlertDialogHeader>\r\n      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\r\n      <AlertDialogDescription>\r\n        This action cannot be undone. This will permanently delete your account\r\n        from our servers.\r\n      </AlertDialogDescription>\r\n    </AlertDialogHeader>\r\n    <AlertDialogFooter>\r\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\r\n      <AlertDialogAction value=\"continue\">Continue</AlertDialogAction>\r\n    </AlertDialogFooter>\r\n  </AlertDialogContent>\r\n</AlertDialog>",[2471,2472],[2461,2462,2463,2464,2465],{"_811":1698,"_19":1699,"_849":1700,"_68":2470},{"_811":1229,"_19":1230,"_849":1696,"_68":2469},{"_811":1592,"_19":1593,"_849":1694,"_68":2468},{"_811":1317,"_19":1318,"_849":1692,"_68":2467},{"_811":864,"_19":865,"_68":2466},"import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { CheckCircle2Icon, InfoIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full max-w-md items-start gap-4\">\n      <Alert>\n        <CheckCircle2Icon />\n        <AlertTitle>Payment successful</AlertTitle>\n        <AlertDescription>\n          Your payment of $29.99 has been processed. A receipt has been sent to your email address.\n        </AlertDescription>\n      </Alert>\n      <Alert>\n        <InfoIcon />\n        <AlertTitle>New feature available</AlertTitle>\n        <AlertDescription>\n          We've added dark mode support. You can enable it in your account settings.\n        </AlertDescription>\n      </Alert>\n    </div>\n  );\n}\n","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { AlertCircleIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Alert variant=\"destructive\" className=\"max-w-md\">\n      <AlertCircleIcon />\n      <AlertTitle>Payment failed</AlertTitle>\n      <AlertDescription>\n        Your payment could not be processed. Please check your payment method and try again.\n      </AlertDescription>\n    </Alert>\n  );\n}\n","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { AlertTriangleIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Alert className=\"max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50\">\n      <AlertTriangleIcon />\n      <AlertTitle>Your subscription will expire in 3 days.</AlertTitle>\n      <AlertDescription>\n        Renew now to avoid service interruption or upgrade to a paid plan to continue using the\n        service.\n      </AlertDescription>\n    </Alert>\n  );\n}\n","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { CheckCircle2Icon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Alert className=\"max-w-md\">\n      <CheckCircle2Icon />\n      <AlertTitle>Account updated successfully</AlertTitle>\n      <AlertDescription>\n        Your profile information has been saved. Changes will be reflected immediately.\n      </AlertDescription>\n    </Alert>\n  );\n}\n","import { Alert, AlertAction, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return (\n    <Alert className=\"max-w-md\">\n      <AlertTitle>Dark mode is now available</AlertTitle>\n      <AlertDescription>Enable it under your profile settings to get started.</AlertDescription>\n      <AlertAction>\n        <Button size=\"xs\" variant=\"default\">\n          Enable\n        </Button>\n      </AlertAction>\n    </Alert>\n  );\n}\n",{"_877":2007,"_68":1705},{"_877":2007,"_68":1704},[2487,2488],[2475,2476,2477,2478,2479,2480],{"_811":1229,"_19":1230,"_849":1729,"_68":2486},{"_811":1725,"_19":1726,"_849":1727,"_68":2485},{"_811":570,"_19":1434,"_849":1723,"_68":2484},{"_811":898,"_19":899,"_849":1721,"_68":2483},{"_811":1717,"_19":1718,"_849":1719,"_68":2482},{"_811":864,"_19":865,"_68":2481},"import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nexport default function Preview() {\n  return (\n    <Accordion collapsible defaultValue={[\"shipping\"]} className=\"max-w-lg\">\n      <AccordionItem value=\"shipping\">\n        <AccordionTrigger>What are your shipping options?</AccordionTrigger>\n        <AccordionContent>\n          We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on\n          international orders.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"returns\">\n        <AccordionTrigger>What is your return policy?</AccordionTrigger>\n        <AccordionContent>\n          Returns accepted within 30 days. Items must be unused and in original packaging. Refunds\n          processed within 5-7 business days.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"support\">\n        <AccordionTrigger>How can I contact customer support?</AccordionTrigger>\n        <AccordionContent>\n          Reach us via email, live chat, or phone. We respond within 24 hours during business days.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n","import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst items = [\n  {\n    value: \"notifications\",\n    trigger: \"Notification Settings\",\n    content:\n      \"Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.\",\n  },\n  {\n    value: \"privacy\",\n    trigger: \"Privacy & Security\",\n    content:\n      \"Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.\",\n  },\n  {\n    value: \"billing\",\n    trigger: \"Billing & Subscription\",\n    content:\n      \"View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Accordion className=\"max-w-lg\" defaultValue={[\"notifications\"]} multiple>\n      {items.map((item) => (\n        <AccordionItem key={item.value} value={item.value}>\n          <AccordionTrigger>{item.trigger}</AccordionTrigger>\n          <AccordionContent>{item.content}</AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n","import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nexport default function Preview() {\n  return (\n    <Accordion collapsible className=\"w-full max-w-lg\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Can I access my account history?</AccordionTrigger>\n        <AccordionContent>\n          Yes, you can view your complete account history including all transactions, plan changes,\n          and support tickets in the Account History section of your dashboard.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\" disabled>\n        <AccordionTrigger>Premium feature information</AccordionTrigger>\n        <AccordionContent>\n          This section contains information about premium features. Upgrade your plan to access this\n          content.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>How do I update my email address?</AccordionTrigger>\n        <AccordionContent>\n          You can update your email address in your account settings. You'll receive a\n          verification email at your new address to confirm the change.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n","import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\n\nconst items = [\n  {\n    value: \"plans\",\n    trigger: \"What subscription plans do you offer?\",\n    content:\n      \"We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.\",\n  },\n  {\n    value: \"billing\",\n    trigger: \"How does billing work?\",\n    content:\n      \"Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.\",\n  },\n  {\n    value: \"cancel\",\n    trigger: \"How do I cancel my subscription?\",\n    content:\n      \"You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Subscription & Billing</CardTitle>\n        <CardDescription>\n          Common questions about your account, plans, payments and cancellations.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Accordion collapsible defaultValue={[\"plans\"]}>\n          {items.map((item) => (\n            <AccordionItem key={item.value} value={item.value}>\n              <AccordionTrigger>{item.trigger}</AccordionTrigger>\n              <AccordionContent>{item.content}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </CardContent>\n    </Card>\n  );\n}\n","import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst items = [\n  {\n    value: \"billing\",\n    trigger: \"How does billing work?\",\n    content:\n      \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.\",\n  },\n  {\n    value: \"security\",\n    trigger: \"Is my data secure?\",\n    content:\n      \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.\",\n  },\n  {\n    value: \"integration\",\n    trigger: \"What integrations do you support?\",\n    content:\n      \"We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Accordion collapsible className=\"max-w-lg rounded-lg border\" defaultValue={[\"billing\"]}>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.value}\n          value={item.value}\n          className=\"border-b px-4 last:border-b-0\"\n        >\n          <AccordionTrigger>{item.trigger}</AccordionTrigger>\n          <AccordionContent>{item.content}</AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n","import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst items = [\n  {\n    value: \"item-1\",\n    trigger: \"How do I reset my password?\",\n    content:\n      \"Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.\",\n  },\n  {\n    value: \"item-2\",\n    trigger: \"Can I change my subscription plan?\",\n    content:\n      \"Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.\",\n  },\n  {\n    value: \"item-3\",\n    trigger: \"What payment methods do you accept?\",\n    content:\n      \"We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Accordion collapsible defaultValue={[\"item-1\"]} className=\"max-w-lg\">\n      {items.map((item) => (\n        <AccordionItem key={item.value} value={item.value}>\n          <AccordionTrigger>{item.trigger}</AccordionTrigger>\n          <AccordionContent>{item.content}</AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n",{"_877":2007,"_68":1734},{"_877":2007,"_68":1733},[2490,2491,2492],{"_811":1743,"_813":1744},{"_811":812,"_813":814},{"_811":1741,"_813":1742}]
</article></body></html>