huntabyte__shadcn-svelte/docs/static/registry/sheet.json

{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "sheet",
	"type": "registry:ui",
	"devDependencies": [
		"bits-ui@^2.14.4",
		"@internationalized/date@^3.10.0",
		"@lucide/svelte@^0.561.0",
		"tailwind-variants@^3.2.2"
	],
	"files": [
		{
			"content": "import Root from \"./sheet.svelte\";\nimport Portal from \"./sheet-portal.svelte\";\nimport Trigger from \"./sheet-trigger.svelte\";\nimport Close from \"./sheet-close.svelte\";\nimport Overlay from \"./sheet-overlay.svelte\";\nimport Content from \"./sheet-content.svelte\";\nimport Header from \"./sheet-header.svelte\";\nimport Footer from \"./sheet-footer.svelte\";\nimport Title from \"./sheet-title.svelte\";\nimport Description from \"./sheet-description.svelte\";\n\nexport {\n\tRoot,\n\tClose,\n\tTrigger,\n\tPortal,\n\tOverlay,\n\tContent,\n\tHeader,\n\tFooter,\n\tTitle,\n\tDescription,\n\t//\n\tRoot as Sheet,\n\tClose as SheetClose,\n\tTrigger as SheetTrigger,\n\tPortal as SheetPortal,\n\tOverlay as SheetOverlay,\n\tContent as SheetContent,\n\tHeader as SheetHeader,\n\tFooter as SheetFooter,\n\tTitle as SheetTitle,\n\tDescription as SheetDescription,\n};\n",
			"type": "registry:file",
			"target": "sheet/index.ts"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Dialog as SheetPrimitive } from \"bits-ui\";\n\n\tlet { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();\n</script>\n\n<SheetPrimitive.Close bind:ref data-slot=\"sheet-close\" {...restProps} />\n",
			"type": "registry:file",
			"target": "sheet/sheet-close.svelte"
		},
		{
			"content": "<script lang=\"ts\" module>\n\timport { tv, type VariantProps } from \"tailwind-variants\";\n\texport const sheetVariants = tv({\n\t\tbase: \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n\t\tvariants: {\n\t\t\tside: {\n\t\t\t\ttop: \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n\t\t\t\tbottom: \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n\t\t\t\tleft: \"data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start rtl:data-[state=closed]:slide-out-to-end rtl:data-[state=open]:slide-in-from-end inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm\",\n\t\t\t\tright: \"data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end rtl:data-[state=closed]:slide-out-to-start rtl:data-[state=open]:slide-in-from-start inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tside: \"right\",\n\t\t},\n\t});\n\n\texport type Side = VariantProps<typeof sheetVariants>[\"side\"];\n</script>\n\n<script lang=\"ts\">\n\timport { Dialog as SheetPrimitive } from \"bits-ui\";\n\timport XIcon from \"@lucide/svelte/icons/x\";\n\timport type { Snippet } from \"svelte\";\n\timport SheetPortal from \"./sheet-portal.svelte\";\n\timport SheetOverlay from \"./sheet-overlay.svelte\";\n\timport { cn, type WithoutChildrenOrChild } from \"$UTILS$.js\";\n\timport type { ComponentProps } from \"svelte\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tside = \"right\",\n\t\tportalProps,\n\t\tchildren,\n\t\t...restProps\n\t}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {\n\t\tportalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;\n\t\tside?: Side;\n\t\tchildren: Snippet;\n\t} = $props();\n</script>\n\n<SheetPortal {...portalProps}>\n\t<SheetOverlay />\n\t<SheetPrimitive.Content\n\t\tbind:ref\n\t\tdata-slot=\"sheet-content\"\n\t\tclass={cn(sheetVariants({ side }), className)}\n\t\t{...restProps}\n\t>\n\t\t{@render children?.()}\n\t\t<SheetPrimitive.Close\n\t\t\tclass=\"ring-offset-background focus-visible:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none\"\n\t\t>\n\t\t\t<XIcon class=\"size-4\" />\n\t\t\t<span class=\"sr-only\">Close</span>\n\t\t</SheetPrimitive.Close>\n\t</SheetPrimitive.Content>\n</SheetPortal>\n",
			"type": "registry:file",
			"target": "sheet/sheet-content.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Dialog as SheetPrimitive } from \"bits-ui\";\n\timport { cn } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\t...restProps\n\t}: SheetPrimitive.DescriptionProps = $props();\n</script>\n\n<SheetPrimitive.Description\n\tbind:ref\n\tdata-slot=\"sheet-description\"\n\tclass={cn(\"text-muted-foreground text-sm\", className)}\n\t{...restProps}\n/>\n",
			"type": "registry:file",
			"target": "sheet/sheet-description.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { cn, type WithElementRef } from \"$UTILS$.js\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tchildren,\n\t\t...restProps\n\t}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n\tbind:this={ref}\n\tdata-slot=\"sheet-footer\"\n\tclass={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n\t{...restProps}\n>\n\t{@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "sheet/sheet-footer.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport { cn, type WithElementRef } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tchildren,\n\t\t...restProps\n\t}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n\tbind:this={ref}\n\tdata-slot=\"sheet-header\"\n\tclass={cn(\"flex flex-col gap-1.5 p-4\", className)}\n\t{...restProps}\n>\n\t{@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "sheet/sheet-header.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Dialog as SheetPrimitive } from \"bits-ui\";\n\timport { cn } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\t...restProps\n\t}: SheetPrimitive.OverlayProps = $props();\n</script>\n\n<SheetPrimitive.Overlay\n\tbind:ref\n\tdata-slot=\"sheet-overlay\"\n\tclass={cn(\n\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n\t\tclassName\n\t)}\n\t{...restProps}\n/>\n",
			"type": "registry:file",
			"target": "sheet/sheet-overlay.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Dialog as SheetPrimitive } from \"bits-ui\";\n\n\tlet { ...restProps }: SheetPrimitive.PortalProps = $props();\n</script>\n\n<SheetPrimitive.Portal {...restProps} />\n",
			"type": "registry:file",
			"target": "sheet/sheet-portal.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Dialog as SheetPrimitive } from \"bits-ui\";\n\timport { cn } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\t...restProps\n\t}: SheetPrimitive.TitleProps = $props();\n</script>\n\n<SheetPrimitive.Title\n\tbind:ref\n\tdata-slot=\"sheet-title\"\n\tclass={cn(\"text-foreground font-semibold\", className)}\n\t{...restProps}\n/>\n",
			"type": "registry:file",
			"target": "sheet/sheet-title.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Dialog as SheetPrimitive } from \"bits-ui\";\n\n\tlet { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();\n</script>\n\n<SheetPrimitive.Trigger bind:ref data-slot=\"sheet-trigger\" {...restProps} />\n",
			"type": "registry:file",
			"target": "sheet/sheet-trigger.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Dialog as SheetPrimitive } from \"bits-ui\";\n\n\tlet { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();\n</script>\n\n<SheetPrimitive.Root bind:open {...restProps} />\n",
			"type": "registry:file",
			"target": "sheet/sheet.svelte"
		}
	]
}