@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.2.0

package/dist/lib/components/ui/kbd/kbd-group.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd-group"
+	class={cn("gap-1 inline-flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

package/dist/lib/components/ui/kbd/kbd-group.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const KbdGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type KbdGroup = ReturnType<typeof KbdGroup>;
+export default KbdGroup;

package/dist/lib/components/ui/kbd/kbd.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd"
+	class={cn(
+		"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",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

package/dist/lib/components/ui/kbd/kbd.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const Kbd: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/lib/components/ui/label/label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Label as LabelPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,8 +11,9 @@
 
 <LabelPrimitive.Root
 	bind:ref
+	data-slot="label"
 	class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		"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",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/marker/index.d.ts

@@ -0,0 +1,4 @@
+import Content from "./marker-content.svelte";
+import Icon from "./marker-icon.svelte";
+import Root, { markerVariants, type MarkerVariant } from "./marker.svelte";
+export { Root, Icon, Content, markerVariants, type MarkerVariant, Root as Marker, Icon as MarkerIcon, Content as MarkerContent, };

package/dist/lib/components/ui/marker/index.js

@@ -0,0 +1,6 @@
+import Content from "./marker-content.svelte";
+import Icon from "./marker-icon.svelte";
+import Root, { markerVariants } from "./marker.svelte";
+export { Root, Icon, Content, markerVariants, 
+//
+Root as Marker, Icon as MarkerIcon, Content as MarkerContent, };

package/dist/lib/components/ui/marker/marker-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="marker-content"
+	class={cn("group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground min-w-0 wrap-break-word", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/lib/components/ui/marker/marker-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const MarkerContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type MarkerContent = ReturnType<typeof MarkerContent>;
+export default MarkerContent;

package/dist/lib/components/ui/marker/marker-icon.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="marker-icon"
+	aria-hidden="true"
+	class={cn("size-4 [&_svg:not([class*='size-'])]:size-4 shrink-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/lib/components/ui/marker/marker-icon.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const MarkerIcon: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type MarkerIcon = ReturnType<typeof MarkerIcon>;
+export default MarkerIcon;

package/dist/lib/components/ui/marker/marker.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const markerVariants = tv({
+		base: "min-h-4 gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground group/marker relative flex w-full items-center",
+		variants: {
+			variant: {
+				default: "cn-marker-variant-default",
+				separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+				border: "border-b border-border pb-2",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type MarkerVariant = VariantProps<typeof markerVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		child,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: MarkerVariant;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(markerVariants({ variant }), className),
+		"data-slot": "marker",
+		"data-variant": variant,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/dist/lib/components/ui/marker/marker.svelte.d.ts

@@ -0,0 +1,33 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const markerVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "cn-marker-variant-default";
+        separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border";
+        border: "border-b border-border pb-2";
+    };
+}, undefined, "min-h-4 gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground group/marker relative flex w-full items-center", {
+    variant: {
+        default: "cn-marker-variant-default";
+        separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border";
+        border: "border-b border-border pb-2";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "cn-marker-variant-default";
+        separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border";
+        border: "border-b border-border pb-2";
+    };
+}, undefined>>;
+export type MarkerVariant = VariantProps<typeof markerVariants>["variant"];
+import { type WithElementRef } from "../../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: MarkerVariant;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const Marker: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Marker = ReturnType<typeof Marker>;
+export default Marker;

package/dist/lib/components/ui/menubar/index.d.ts

@@ -1,17 +1,18 @@
-import { Menubar as MenubarPrimitive } from "bits-ui";
-import Root from "./menubar.svelte";
 import CheckboxItem from "./menubar-checkbox-item.svelte";
 import Content from "./menubar-content.svelte";
-import Item from "./menubar-item.svelte";
 import GroupHeading from "./menubar-group-heading.svelte";
+import Group from "./menubar-group.svelte";
+import Item from "./menubar-item.svelte";
+import Label from "./menubar-label.svelte";
+import Menu from "./menubar-menu.svelte";
+import Portal from "./menubar-portal.svelte";
+import RadioGroup from "./menubar-radio-group.svelte";
 import RadioItem from "./menubar-radio-item.svelte";
 import Separator from "./menubar-separator.svelte";
 import Shortcut from "./menubar-shortcut.svelte";
 import SubContent from "./menubar-sub-content.svelte";
 import SubTrigger from "./menubar-sub-trigger.svelte";
+import Sub from "./menubar-sub.svelte";
 import Trigger from "./menubar-trigger.svelte";
-declare const Menu: import("svelte").Component<import("bits-ui").MenubarMenuPropsWithoutHTML, {}, "">;
-declare const Group: import("svelte").Component<MenubarPrimitive.GroupProps, {}, "ref">;
-declare const Sub: import("svelte").Component<MenubarPrimitive.SubProps, {}, "open">;
-declare const RadioGroup: import("svelte").Component<MenubarPrimitive.RadioGroupProps, {}, "ref" | "value">;
-export { Root, CheckboxItem, Content, Item, GroupHeading, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, GroupHeading as MenubarGroupHeading, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, };
+import Root from "./menubar.svelte";
+export { Root, CheckboxItem, Content, Item, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, Label, GroupHeading, Portal, Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, Label as MenubarLabel, GroupHeading as MenubarGroupHeading, Portal as MenubarPortal, };

package/dist/lib/components/ui/menubar/index.js

@@ -1,19 +1,20 @@
-import { Menubar as MenubarPrimitive } from "bits-ui";
-import Root from "./menubar.svelte";
 import CheckboxItem from "./menubar-checkbox-item.svelte";
 import Content from "./menubar-content.svelte";
-import Item from "./menubar-item.svelte";
 import GroupHeading from "./menubar-group-heading.svelte";
+import Group from "./menubar-group.svelte";
+import Item from "./menubar-item.svelte";
+import Label from "./menubar-label.svelte";
+import Menu from "./menubar-menu.svelte";
+import Portal from "./menubar-portal.svelte";
+import RadioGroup from "./menubar-radio-group.svelte";
 import RadioItem from "./menubar-radio-item.svelte";
 import Separator from "./menubar-separator.svelte";
 import Shortcut from "./menubar-shortcut.svelte";
 import SubContent from "./menubar-sub-content.svelte";
 import SubTrigger from "./menubar-sub-trigger.svelte";
+import Sub from "./menubar-sub.svelte";
 import Trigger from "./menubar-trigger.svelte";
-const Menu = MenubarPrimitive.Menu;
-const Group = MenubarPrimitive.Group;
-const Sub = MenubarPrimitive.Sub;
-const RadioGroup = MenubarPrimitive.RadioGroup;
-export { Root, CheckboxItem, Content, Item, GroupHeading, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, 
+import Root from "./menubar.svelte";
+export { Root, CheckboxItem, Content, Item, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, Label, GroupHeading, Portal, 
 //
-Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, GroupHeading as MenubarGroupHeading, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, };
+Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, Label as MenubarLabel, GroupHeading as MenubarGroupHeading, Portal as MenubarPortal, };

package/dist/lib/components/ui/menubar/menubar-checkbox-item.svelte

@@ -1,38 +1,46 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
-	import { cn } from "../../../utils";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
 	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
+		class: className,
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
-		class: className,
+		inset,
 		children: childrenProp,
+		closeOnSelect = false,
 		...restProps
 	}: WithoutChildrenOrChild<MenubarPrimitive.CheckboxItemProps> & {
+		inset?: boolean;
 		children?: Snippet;
 	} = $props();
 </script>
 
 <MenubarPrimitive.CheckboxItem
 	bind:ref
+	{closeOnSelect}
 	bind:checked
 	bind:indeterminate
+	data-slot="menubar-checkbox-item"
+	data-inset={inset}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-inset:pl-7 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
-	{#snippet children({ checked, indeterminate })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+	{#snippet children({ checked: checked, indeterminate: indeterminate })}
+		<span
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
+		>
 			{#if indeterminate}
-				<Minus class="size-4" />
-			{:else}
-				<Check class={cn("size-4", !checked && "text-transparent")} />
+				<MinusIcon  />
+			{:else if checked}
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}

package/dist/lib/components/ui/menubar/menubar-checkbox-item.svelte.d.ts

@@ -1,6 +1,8 @@
-import { Menubar as MenubarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import { Menubar as MenubarPrimitive } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../utils.js";
 import type { Snippet } from "svelte";
 type $$ComponentProps = WithoutChildrenOrChild<MenubarPrimitive.CheckboxItemProps> & {
+    inset?: boolean;
     children?: Snippet;
 };
 declare const MenubarCheckboxItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;

package/dist/lib/components/ui/menubar/menubar-content.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
+	import MenubarPortal from "./menubar-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -12,21 +14,22 @@
 		portalProps,
 		...restProps
 	}: MenubarPrimitive.ContentProps & {
-		portalProps?: MenubarPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof MenubarPortal>>;
 	} = $props();
 </script>
 
-<MenubarPrimitive.Portal {...portalProps}>
+<MenubarPortal {...portalProps}>
 	<MenubarPrimitive.Content
 		bind:ref
-		{sideOffset}
+		data-slot="menubar-content"
 		{align}
 		{alignOffset}
 		{side}
+		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground z-50 min-w-[12rem] rounded-md border p-1 shadow-md focus:outline-none",
+			"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-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 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 origin-(--bits-menubar-content-transform-origin) overflow-hidden",
 			className
 		)}
 		{...restProps}
 	/>
-</MenubarPrimitive.Portal>
+</MenubarPortal>

package/dist/lib/components/ui/menubar/menubar-content.svelte.d.ts

@@ -1,6 +1,9 @@
 import { Menubar as MenubarPrimitive } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../utils.js";
+import MenubarPortal from "./menubar-portal.svelte";
+import type { ComponentProps } from "svelte";
 type $$ComponentProps = MenubarPrimitive.ContentProps & {
-    portalProps?: MenubarPrimitive.PortalProps;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof MenubarPortal>>;
 };
 declare const MenubarContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type MenubarContent = ReturnType<typeof MenubarContent>;

package/dist/lib/components/ui/menubar/menubar-group-heading.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
-		class: className,
 		inset,
+		class: className,
 		...restProps
-	}: MenubarPrimitive.GroupHeadingProps & {
+	}: ComponentProps<typeof MenubarPrimitive.GroupHeading> & {
 		inset?: boolean;
 	} = $props();
 </script>
 
 <MenubarPrimitive.GroupHeading
 	bind:ref
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	data-slot="menubar-group-heading"
+	data-inset={inset}
+	class={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
 	{...restProps}
 />

package/dist/lib/components/ui/menubar/menubar-group-heading.svelte.d.ts

@@ -1,5 +1,6 @@
 import { Menubar as MenubarPrimitive } from "bits-ui";
-type $$ComponentProps = MenubarPrimitive.GroupHeadingProps & {
+import type { ComponentProps } from "svelte";
+type $$ComponentProps = ComponentProps<typeof MenubarPrimitive.GroupHeading> & {
     inset?: boolean;
 };
 declare const MenubarGroupHeading: import("svelte").Component<$$ComponentProps, {}, "ref">;

package/dist/lib/components/ui/menubar/menubar-group.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		...restProps
+	}: MenubarPrimitive.GroupProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<MenubarPrimitive.Group bind:ref data-slot="menubar-group" {...restProps} />

package/dist/lib/components/ui/menubar/menubar-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Menubar as MenubarPrimitive } from "bits-ui";
+type $$ComponentProps = MenubarPrimitive.GroupProps & {
+    inset?: boolean;
+};
+declare const MenubarGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type MenubarGroup = ReturnType<typeof MenubarGroup>;
+export default MenubarGroup;

package/dist/lib/components/ui/menubar/menubar-item.svelte

@@ -1,22 +1,26 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		inset,
+		inset = undefined,
+		variant = "default",
 		...restProps
 	}: MenubarPrimitive.ItemProps & {
 		inset?: boolean;
+		variant?: "default" | "destructive";
 	} = $props();
 </script>
 
 <MenubarPrimitive.Item
 	bind:ref
+	data-slot="menubar-item"
+	data-inset={inset}
+	data-variant={variant}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		inset && "pl-8",
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/menubar/menubar-item.svelte.d.ts

@@ -1,6 +1,7 @@
 import { Menubar as MenubarPrimitive } from "bits-ui";
 type $$ComponentProps = MenubarPrimitive.ItemProps & {
     inset?: boolean;
+    variant?: "default" | "destructive";
 };
 declare const MenubarItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type MenubarItem = ReturnType<typeof MenubarItem>;

package/dist/lib/components/ui/menubar/menubar-label.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { type WithElementRef } from "bits-ui";
+	import { cn } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		inset,
+		children,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="menubar-label"
+	data-inset={inset}
+	class={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/menubar/menubar-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type WithElementRef } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    inset?: boolean;
+};
+declare const MenubarLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type MenubarLabel = ReturnType<typeof MenubarLabel>;
+export default MenubarLabel;

package/dist/lib/components/ui/menubar/menubar-menu.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let { ...restProps }: MenubarPrimitive.MenuProps = $props();
+</script>
+
+<MenubarPrimitive.Menu {...restProps} />

package/dist/lib/components/ui/menubar/menubar-menu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MenubarMenu: import("svelte").Component<import("bits-ui").MenubarMenuPropsWithoutHTML, {}, "">;
+type MenubarMenu = ReturnType<typeof MenubarMenu>;
+export default MenubarMenu;

package/dist/lib/components/ui/menubar/menubar-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let { ...restProps }: MenubarPrimitive.PortalProps = $props();
+</script>
+
+<MenubarPrimitive.Portal {...restProps} />

package/dist/lib/components/ui/menubar/menubar-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MenubarPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type MenubarPortal = ReturnType<typeof MenubarPortal>;
+export default MenubarPortal;

package/dist/lib/components/ui/menubar/menubar-radio-group.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		...restProps
+	}: MenubarPrimitive.RadioGroupProps = $props();
+</script>
+
+<MenubarPrimitive.RadioGroup bind:ref bind:value data-slot="menubar-radio-group" {...restProps} />

package/dist/lib/components/ui/menubar/menubar-radio-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Menubar as MenubarPrimitive } from "bits-ui";
+declare const MenubarRadioGroup: import("svelte").Component<MenubarPrimitive.RadioGroupProps, {}, "ref" | "value">;
+type MenubarRadioGroup = ReturnType<typeof MenubarRadioGroup>;
+export default MenubarRadioGroup;