huntabyte__shadcn-svelte/docs/static/registry/context-menu.json

{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "context-menu",
	"type": "registry:ui",
	"devDependencies": [
		"bits-ui@^2.14.4",
		"@internationalized/date@^3.10.0",
		"@lucide/svelte@^0.561.0"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\timport CheckIcon from \"@lucide/svelte/icons/check\";\n\timport { cn, type WithoutChildrenOrChild } from \"$UTILS$.js\";\n\timport type { Snippet } from \"svelte\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tchecked = $bindable(false),\n\t\tindeterminate = $bindable(false),\n\t\tclass: className,\n\t\tchildren: childrenProp,\n\t\t...restProps\n\t}: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {\n\t\tchildren?: Snippet;\n\t} = $props();\n</script>\n\n<ContextMenuPrimitive.CheckboxItem\n\tbind:ref\n\tbind:checked\n\tbind:indeterminate\n\tdata-slot=\"context-menu-checkbox-item\"\n\tclass={cn(\n\t\t\"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\tclassName\n\t)}\n\t{...restProps}\n>\n\t{#snippet children({ checked })}\n\t\t<span\n\t\t\tclass=\"pointer-events-none absolute start-2 flex size-3.5 items-center justify-center\"\n\t\t>\n\t\t\t{#if checked}\n\t\t\t\t<CheckIcon class=\"size-4\" />\n\t\t\t{/if}\n\t\t</span>\n\t\t{@render childrenProp?.()}\n\t{/snippet}\n</ContextMenuPrimitive.CheckboxItem>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-checkbox-item.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\timport { cn } from \"$UTILS$.js\";\n\timport ContextMenuPortal from \"./context-menu-portal.svelte\";\n\timport type { ComponentProps } from \"svelte\";\n\timport type { WithoutChildrenOrChild } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tportalProps,\n\t\tclass: className,\n\t\t...restProps\n\t}: ContextMenuPrimitive.ContentProps & {\n\t\tportalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;\n\t} = $props();\n</script>\n\n<ContextMenuPortal {...portalProps}>\n\t<ContextMenuPrimitive.Content\n\t\tbind:ref\n\t\tdata-slot=\"context-menu-content\"\n\t\tclass={cn(\n\t\t\t\"bg-popover text-popover-foreground 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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-context-menu-content-available-height) min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n\t\t\tclassName\n\t\t)}\n\t\t{...restProps}\n\t/>\n</ContextMenuPortal>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-content.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\timport { cn } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tinset,\n\t\t...restProps\n\t}: ContextMenuPrimitive.GroupHeadingProps & {\n\t\tinset?: boolean;\n\t} = $props();\n</script>\n\n<ContextMenuPrimitive.GroupHeading\n\tbind:ref\n\tdata-slot=\"context-menu-group-heading\"\n\tdata-inset={inset}\n\tclass={cn(\"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:ps-8\", className)}\n\t{...restProps}\n/>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-group-heading.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\n\tlet { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps = $props();\n</script>\n\n<ContextMenuPrimitive.Group bind:ref data-slot=\"context-menu-group\" {...restProps} />\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-group.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\timport { cn } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tinset,\n\t\tvariant = \"default\",\n\t\t...restProps\n\t}: ContextMenuPrimitive.ItemProps & {\n\t\tinset?: boolean;\n\t\tvariant?: \"default\" | \"destructive\";\n\t} = $props();\n</script>\n\n<ContextMenuPrimitive.Item\n\tbind:ref\n\tdata-slot=\"context-menu-item\"\n\tdata-inset={inset}\n\tdata-variant={variant}\n\tclass={cn(\n\t\t\"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive 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]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\tclassName\n\t)}\n\t{...restProps}\n/>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-item.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\tinset,\n\t\tchildren,\n\t\t...restProps\n\t}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {\n\t\tinset?: boolean;\n\t} = $props();\n</script>\n\n<div\n\tbind:this={ref}\n\tdata-slot=\"context-menu-label\"\n\tdata-inset={inset}\n\tclass={cn(\"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:ps-8\", className)}\n\t{...restProps}\n>\n\t{@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-label.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\n\tlet { ...restProps }: ContextMenuPrimitive.PortalProps = $props();\n</script>\n\n<ContextMenuPrimitive.Portal {...restProps} />\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-portal.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tvalue = $bindable(\"\"),\n\t\t...restProps\n\t}: ContextMenuPrimitive.RadioGroupProps = $props();\n</script>\n\n<ContextMenuPrimitive.RadioGroup\n\tbind:ref\n\tbind:value\n\tdata-slot=\"context-menu-radio-group\"\n\t{...restProps}\n/>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-radio-group.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\timport CircleIcon from \"@lucide/svelte/icons/circle\";\n\timport { cn, type WithoutChild } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tchildren: childrenProp,\n\t\t...restProps\n\t}: WithoutChild<ContextMenuPrimitive.RadioItemProps> = $props();\n</script>\n\n<ContextMenuPrimitive.RadioItem\n\tbind:ref\n\tdata-slot=\"context-menu-radio-item\"\n\tclass={cn(\n\t\t\"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\tclassName\n\t)}\n\t{...restProps}\n>\n\t{#snippet children({ checked })}\n\t\t<span\n\t\t\tclass=\"pointer-events-none absolute start-2 flex size-3.5 items-center justify-center\"\n\t\t>\n\t\t\t{#if checked}\n\t\t\t\t<CircleIcon class=\"size-2 fill-current\" />\n\t\t\t{/if}\n\t\t</span>\n\t\t{@render childrenProp?.({ checked })}\n\t{/snippet}\n</ContextMenuPrimitive.RadioItem>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-radio-item.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } 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}: ContextMenuPrimitive.SeparatorProps = $props();\n</script>\n\n<ContextMenuPrimitive.Separator\n\tbind:ref\n\tdata-slot=\"context-menu-separator\"\n\tclass={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n\t{...restProps}\n/>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-separator.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<HTMLSpanElement>> = $props();\n</script>\n\n<span\n\tbind:this={ref}\n\tdata-slot=\"context-menu-shortcut\"\n\tclass={cn(\"text-muted-foreground ms-auto text-xs tracking-widest\", className)}\n\t{...restProps}\n>\n\t{@render children?.()}\n</span>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-shortcut.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } 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}: ContextMenuPrimitive.SubContentProps = $props();\n</script>\n\n<ContextMenuPrimitive.SubContent\n\tbind:ref\n\tdata-slot=\"context-menu-sub-content\"\n\tclass={cn(\n\t\t\"bg-popover text-popover-foreground 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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n\t\tclassName\n\t)}\n\t{...restProps}\n/>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-sub-content.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\timport ChevronRightIcon from \"@lucide/svelte/icons/chevron-right\";\n\timport { cn, type WithoutChild } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tinset,\n\t\tchildren,\n\t\t...restProps\n\t}: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {\n\t\tinset?: boolean;\n\t} = $props();\n</script>\n\n<ContextMenuPrimitive.SubTrigger\n\tbind:ref\n\tdata-slot=\"context-menu-sub-trigger\"\n\tdata-inset={inset}\n\tclass={cn(\n\t\t\"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\tclassName\n\t)}\n\t{...restProps}\n>\n\t{@render children?.()}\n\t<ChevronRightIcon class=\"ms-auto\" />\n</ContextMenuPrimitive.SubTrigger>\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-sub-trigger.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\n\tlet { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps = $props();\n</script>\n\n<ContextMenuPrimitive.Sub bind:open {...restProps} />\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-sub.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\n\tlet { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.TriggerProps = $props();\n</script>\n\n<ContextMenuPrimitive.Trigger bind:ref data-slot=\"context-menu-trigger\" {...restProps} />\n",
			"type": "registry:file",
			"target": "context-menu/context-menu-trigger.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { ContextMenu as ContextMenuPrimitive } from \"bits-ui\";\n\n\tlet { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();\n</script>\n\n<ContextMenuPrimitive.Root bind:open {...restProps} />\n",
			"type": "registry:file",
			"target": "context-menu/context-menu.svelte"
		},
		{
			"content": "import Root from \"./context-menu.svelte\";\nimport Sub from \"./context-menu-sub.svelte\";\nimport Portal from \"./context-menu-portal.svelte\";\nimport Trigger from \"./context-menu-trigger.svelte\";\nimport Group from \"./context-menu-group.svelte\";\nimport RadioGroup from \"./context-menu-radio-group.svelte\";\nimport Item from \"./context-menu-item.svelte\";\nimport GroupHeading from \"./context-menu-group-heading.svelte\";\nimport Content from \"./context-menu-content.svelte\";\nimport Shortcut from \"./context-menu-shortcut.svelte\";\nimport RadioItem from \"./context-menu-radio-item.svelte\";\nimport Separator from \"./context-menu-separator.svelte\";\nimport SubContent from \"./context-menu-sub-content.svelte\";\nimport SubTrigger from \"./context-menu-sub-trigger.svelte\";\nimport CheckboxItem from \"./context-menu-checkbox-item.svelte\";\nimport Label from \"./context-menu-label.svelte\";\n\nexport {\n\tRoot,\n\tSub,\n\tPortal,\n\tItem,\n\tGroupHeading,\n\tLabel,\n\tGroup,\n\tTrigger,\n\tContent,\n\tShortcut,\n\tSeparator,\n\tRadioItem,\n\tSubContent,\n\tSubTrigger,\n\tRadioGroup,\n\tCheckboxItem,\n\t//\n\tRoot as ContextMenu,\n\tSub as ContextMenuSub,\n\tPortal as ContextMenuPortal,\n\tItem as ContextMenuItem,\n\tGroupHeading as ContextMenuGroupHeading,\n\tGroup as ContextMenuGroup,\n\tContent as ContextMenuContent,\n\tTrigger as ContextMenuTrigger,\n\tShortcut as ContextMenuShortcut,\n\tRadioItem as ContextMenuRadioItem,\n\tSeparator as ContextMenuSeparator,\n\tRadioGroup as ContextMenuRadioGroup,\n\tSubContent as ContextMenuSubContent,\n\tSubTrigger as ContextMenuSubTrigger,\n\tCheckboxItem as ContextMenuCheckboxItem,\n\tLabel as ContextMenuLabel,\n};\n",
			"type": "registry:file",
			"target": "context-menu/index.ts"
		}
	]
}