negodesign 0.0.71 → 0.0.73

package/dist/components/ui/popover/popover-portal.svelte.d.ts

@@ -1,3 +1,7 @@
-declare const PopoverPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const PopoverPortal: import("svelte").Component<$$ComponentProps, {}, "">;
 type PopoverPortal = ReturnType<typeof PopoverPortal>;
 export default PopoverPortal;

package/dist/components/ui/popover/popover-trigger.svelte

@@ -1,17 +1,69 @@
 <script lang="ts">
-	import { cn } from '../../../utils.js';
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { getPopoverContext } from "./popover-context.svelte.js";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
+		// eslint-disable-next-line no-useless-assignment
+		ref = $bindable<HTMLButtonElement | null>(null),
 		class: className,
+		children,
+		child,
+		onclick,
 		...restProps
-	}: PopoverPrimitive.TriggerProps = $props();
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		children?: Snippet;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		onclick?: (event: MouseEvent) => void;
+	} = $props();
+
+	const store = getPopoverContext();
+
+	let anchorEl = $state<HTMLButtonElement | null>(null);
+
+	function handleClick(event: MouseEvent) {
+		store.clickEvent = event;
+		store.toggle();
+		onclick?.(event);
+	}
+
+	$effect(() => {
+		const el = (anchorEl ?? document.getElementById(store.anchorId)) as HTMLButtonElement | null;
+		if (el) {
+			store.setAnchor(el);
+			ref = el;
+			anchorEl = el;
+		}
+	});
 </script>
 
-<PopoverPrimitive.Trigger
-	bind:ref
-	data-slot="popover-trigger"
-	class={cn('', className)}
-	{...restProps}
-/>
+{#if child}
+	{@render child({
+		props: {
+			id: store.anchorId,
+			type: "button",
+			"aria-haspopup": "dialog",
+			"aria-expanded": store.open,
+			"data-state": store.open ? "open" : "closed",
+			onclick: handleClick,
+		},
+	})}
+{:else}
+	<button
+		bind:this={anchorEl}
+		type="button"
+		id={store.anchorId}
+		aria-haspopup="dialog"
+		aria-expanded={store.open}
+		data-state={store.open ? "open" : "closed"}
+		onclick={handleClick}
+		data-slot="popover-trigger"
+		class={cn("", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/ui/popover/popover-trigger.svelte.d.ts

@@ -1,4 +1,14 @@
-import { Popover as PopoverPrimitive } from 'bits-ui';
-declare const PopoverTrigger: import("svelte").Component<PopoverPrimitive.TriggerProps, {}, "ref">;
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLButtonAttributes & {
+    ref?: HTMLButtonElement | null;
+    class?: string;
+    children?: Snippet;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    onclick?: (event: MouseEvent) => void;
+};
+declare const PopoverTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
 export default PopoverTrigger;

package/dist/components/ui/popover/popover.svelte

@@ -1,7 +1,54 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { generatePopoverId, setPopoverContext, type PopoverStore } from "./popover-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+	let {
+		open = $bindable<boolean>(),
+		defaultOpen = false,
+		onOpenChange,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		open?: boolean;
+		defaultOpen?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		children?: Snippet;
+	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	let store: PopoverStore = $state({
+		open: open ?? defaultOpen ?? false,
+		anchorId: generatePopoverId(),
+		anchorEl: null,
+		clickEvent: null,
+		toggle: () => {
+			setOpen(!store.open);
+		},
+		openMenu: () => setOpen(true),
+		closeMenu: () => setOpen(false),
+		setAnchor: (el: HTMLElement | null) => {
+			store.anchorEl = el;
+		},
+	});
+
+	function setOpen(value: boolean) {
+		if (store.open === value) return;
+		store.open = value;
+		open = value;
+		onOpenChange?.(value);
+	}
+
+	$effect(() => {
+		if (open !== undefined && open !== store.open) {
+			store.open = open;
+			onOpenChange?.(open);
+		}
+	});
+
+	setPopoverContext(store);
 </script>
 
-<PopoverPrimitive.Root bind:open {...restProps} />
+<div class="relative" {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/ui/popover/popover.svelte.d.ts

@@ -1,3 +1,11 @@
-declare const Popover: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: Snippet;
+};
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/components/ui/separator/separator.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
+		orientation = "horizontal",
+		decorative = false,
 		class: className,
-		"data-slot": dataSlot = "separator",
 		...restProps
-	}: SeparatorPrimitive.RootProps = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: "horizontal" | "vertical";
+		decorative?: boolean;
+	} = $props();
 </script>
 
-<SeparatorPrimitive.Root
-	bind:ref
-	data-slot={dataSlot}
+<div
+	bind:this={ref}
+	data-slot="separator"
+	data-orientation={orientation}
+	role={decorative ? undefined : "separator"}
+	aria-orientation={decorative ? undefined : orientation}
 	class={cn(
-		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
-		// this is different in shadcn/ui but self-stretch breaks things for us
-		"data-[orientation=vertical]:h-full",
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
 		className
 	)}
 	{...restProps}
-/>
+></div>

package/dist/components/ui/separator/separator.svelte.d.ts

@@ -1,4 +1,9 @@
-import { Separator as SeparatorPrimitive } from "bits-ui";
-declare const Separator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+};
+declare const Separator: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Separator = ReturnType<typeof Separator>;
 export default Separator;

package/dist/components/ui/sidebar/context.svelte.d.ts

@@ -1,42 +1,34 @@
 type Getter<T> = () => T;
 export type SidebarStateProps = {
-    /**
-     * A getter function that returns the current open state of the sidebar.
-     * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
-     * component.
-     */
     open: Getter<boolean>;
-    /**
-     * A function that sets the open state of the sidebar. To support `bind:open`, we need
-     * a source of truth for changing the open state to ensure it will be synced throughout
-     * the sub-components and any `bind:` references.
-     */
     setOpen: (open: boolean) => void;
+    collapsible?: "icon" | "offcanvas" | "none";
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
 };
 declare class SidebarState {
     #private;
     readonly props: SidebarStateProps;
     open: boolean;
     openMobile: boolean;
+    collapsible: "icon" | "none" | "offcanvas";
+    side: "right" | "left";
+    variant: "inset" | "sidebar" | "floating";
     setOpen: SidebarStateProps["setOpen"];
-    state: string;
     constructor(props: SidebarStateProps);
     get isMobile(): boolean;
+    get state(): "expanded" | "collapsed";
+    get isOpen(): boolean;
+    setConfig(config: {
+        collapsible?: "icon" | "offcanvas" | "none";
+        side?: "left" | "right";
+        variant?: "sidebar" | "floating" | "inset";
+    }): void;
     handleShortcutKeydown: (e: KeyboardEvent) => void;
     setOpenMobile: (value: boolean) => void;
-    toggle: () => boolean | void;
+    toggleSidebar: () => void;
+    toggle: () => void;
 }
-/**
- * Instantiates a new `SidebarState` instance and sets it in the context.
- *
- * @param props The constructor props for the `SidebarState` class.
- * @returns  The `SidebarState` instance.
- */
 export declare function setSidebar(props: SidebarStateProps): SidebarState;
-/**
- * Retrieves the `SidebarState` instance from the context. This is a class instance,
- * so you cannot destructure it.
- * @returns The `SidebarState` instance.
- */
 export declare function useSidebar(): SidebarState;
 export {};

package/dist/components/ui/sidebar/context.svelte.js

@@ -5,50 +5,62 @@ class SidebarState {
     props;
     open = $derived.by(() => this.props.open());
     openMobile = $state(false);
+    collapsible = $state("offcanvas");
+    side = $state("left");
+    variant = $state("sidebar");
     setOpen;
     #isMobile;
-    state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
     constructor(props) {
+        this.props = props;
         this.setOpen = props.setOpen;
         this.#isMobile = new IsMobile();
-        this.props = props;
+        if (props.collapsible !== undefined)
+            this.collapsible = props.collapsible;
+        if (props.side !== undefined)
+            this.side = props.side;
+        if (props.variant !== undefined)
+            this.variant = props.variant;
     }
-    // Convenience getter for checking if the sidebar is mobile
-    // without this, we would need to use `sidebar.isMobile.current` everywhere
     get isMobile() {
         return this.#isMobile.current;
     }
-    // Event handler to apply to the `<svelte:window>`
+    get state() {
+        return this.open ? "expanded" : "collapsed";
+    }
+    get isOpen() {
+        return this.isMobile ? this.openMobile : this.open;
+    }
+    setConfig(config) {
+        if (config.collapsible !== undefined)
+            this.collapsible = config.collapsible;
+        if (config.side !== undefined)
+            this.side = config.side;
+        if (config.variant !== undefined)
+            this.variant = config.variant;
+    }
     handleShortcutKeydown = (e) => {
         if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
             e.preventDefault();
-            this.toggle();
+            this.toggleSidebar();
         }
     };
     setOpenMobile = (value) => {
         this.openMobile = value;
     };
-    toggle = () => {
-        return this.#isMobile.current
-            ? (this.openMobile = !this.openMobile)
-            : this.setOpen(!this.open);
+    toggleSidebar = () => {
+        if (this.#isMobile.current) {
+            this.openMobile = !this.openMobile;
+        }
+        else {
+            this.setOpen(!this.open);
+        }
     };
+    toggle = this.toggleSidebar;
 }
 const SYMBOL_KEY = "scn-sidebar";
-/**
- * Instantiates a new `SidebarState` instance and sets it in the context.
- *
- * @param props The constructor props for the `SidebarState` class.
- * @returns  The `SidebarState` instance.
- */
 export function setSidebar(props) {
     return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
 }
-/**
- * Retrieves the `SidebarState` instance from the context. This is a class instance,
- * so you cannot destructure it.
- * @returns The `SidebarState` instance.
- */
 export function useSidebar() {
     return getContext(Symbol.for(SYMBOL_KEY));
 }

package/dist/components/ui/sidebar/sidebar-content.svelte

@@ -16,7 +16,7 @@
 	data-sidebar="content"
 	class={cn(
 		"no-scrollbar gap-2 [--radius:var(--radius-xl)] flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-		className
+		className,
 	)}
 	{...restProps}
 >

package/dist/components/ui/sidebar/sidebar-footer.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-footer"
 	data-sidebar="footer"
-	class={cn("gap-2 p-2 flex flex-col", className)}
+	class={cn("mt-auto gap-2 p-2 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/sidebar/sidebar-group-content.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-group-content"
 	data-sidebar="group-content"
-	class={cn("text-sm w-full", className)}
+	class={cn("text-sm", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/sidebar/sidebar-menu-action.svelte

@@ -18,8 +18,9 @@
 	const mergedProps = $derived({
 		class: cn(
 			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
-			showOnHover &&
-				"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
+			showOnHover
+				? "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0"
+				: "",
 			className
 		),
 		"data-slot": "sidebar-menu-action",

package/dist/components/ui/sidebar/sidebar-menu-button.svelte

@@ -1,38 +1,36 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { cn } from "../../../utils.js";
 
-	export const sidebarMenuButtonVariants = tv({
-		base: "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
-		variants: {
-			variant: {
-				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-				outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
-			},
-			size: {
-				default: "h-9 text-sm",
-				sm: "h-8 text-xs",
-				lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	});
+	export function sidebarMenuButtonVariants(opts: {
+		variant?: SidebarMenuButtonVariant;
+		size?: SidebarMenuButtonSize;
+	} = {}) {
+		const variant = opts.variant ?? "default";
+		const size = opts.size ?? "default";
+		const variantClasses = {
+			default:
+				"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+			outline:
+				"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+		};
+		const sizeClasses = {
+			default: "h-9 text-sm",
+			sm: "h-8 text-xs",
+			lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!",
+		};
+		const base =
+			"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate";
+		return cn(base, variantClasses[variant], sizeClasses[size]);
+	}
 
-	export type SidebarMenuButtonVariant = VariantProps<
-		typeof sidebarMenuButtonVariants
-	>["variant"];
-	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
+	export type SidebarMenuButtonVariant = "default" | "outline";
+	export type SidebarMenuButtonSize = "default" | "sm" | "lg";
 </script>
 
 <script lang="ts">
-	import * as Tooltip from "../tooltip/index.js";
-	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "../../../utils.js";
-	import { mergeProps } from "bits-ui";
-	import type { ComponentProps, Snippet } from "svelte";
+	import type { WithElementRef } from "../../../utils.js";
+	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { useSidebar } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
@@ -42,20 +40,18 @@
 		variant = "default",
 		size = "default",
 		isActive = false,
-		tooltipContent,
-		tooltipContentProps,
+		tooltipContent = undefined,
+		tooltipContentProps = undefined,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
 		isActive?: boolean;
 		variant?: SidebarMenuButtonVariant;
 		size?: SidebarMenuButtonSize;
 		tooltipContent?: Snippet | string;
-		tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+		tooltipContentProps?: Record<string, unknown>;
 		child?: Snippet<[{ props: Record<string, unknown> }]>;
 	} = $props();
 
-	const sidebar = useSidebar();
-
 	const buttonProps = $derived({
 		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
 		"data-slot": "sidebar-menu-button",
@@ -66,37 +62,10 @@
 	});
 </script>
 
-{#snippet Button({ props }: { props?: Record<string, unknown> })}
-	{@const mergedProps = mergeProps(buttonProps, props)}
-	{#if child}
-		{@render child({ props: mergedProps })}
-	{:else}
-		<button bind:this={ref} {...mergedProps}>
-			{@render children?.()}
-		</button>
-	{/if}
-{/snippet}
-
-{#if !tooltipContent}
-	{@render Button({})}
+{#if child}
+	{@render child({ props: buttonProps })}
 {:else}
-	<Tooltip.Root>
-		<Tooltip.Trigger>
-			{#snippet child({ props })}
-				{@render Button({ props })}
-			{/snippet}
-		</Tooltip.Trigger>
-		<Tooltip.Content
-			side="right"
-			align="center"
-			hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
-			{...tooltipContentProps}
-		>
-			{#if typeof tooltipContent === "string"}
-				{tooltipContent}
-			{:else if tooltipContent}
-				{@render tooltipContent()}
-			{/if}
-		</Tooltip.Content>
-	</Tooltip.Root>
-{/if}
+	<button bind:this={ref} {...buttonProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/ui/sidebar/sidebar-menu-button.svelte.d.ts

@@ -1,47 +1,18 @@
-import { type VariantProps } from "tailwind-variants";
-export declare const sidebarMenuButtonVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
-        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]";
-    };
-    size: {
-        default: "h-9 text-sm";
-        sm: "h-8 text-xs";
-        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!";
-    };
-}, undefined, "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
-    variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
-        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]";
-    };
-    size: {
-        default: "h-9 text-sm";
-        sm: "h-8 text-xs";
-        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
-        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]";
-    };
-    size: {
-        default: "h-9 text-sm";
-        sm: "h-8 text-xs";
-        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!";
-    };
-}, undefined>>;
-export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>["variant"];
-export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
-import * as Tooltip from "../tooltip/index.js";
-import { type WithElementRef, type WithoutChildrenOrChild } from "../../../utils.js";
-import type { ComponentProps, Snippet } from "svelte";
+export declare function sidebarMenuButtonVariants(opts?: {
+    variant?: SidebarMenuButtonVariant;
+    size?: SidebarMenuButtonSize;
+}): string;
+export type SidebarMenuButtonVariant = "default" | "outline";
+export type SidebarMenuButtonSize = "default" | "sm" | "lg";
+import type { WithElementRef } from "../../../utils.js";
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
     isActive?: boolean;
     variant?: SidebarMenuButtonVariant;
     size?: SidebarMenuButtonSize;
     tooltipContent?: Snippet | string;
-    tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+    tooltipContentProps?: Record<string, unknown>;
     child?: Snippet<[{
         props: Record<string, unknown>;
     }]>;