negodesign 0.0.71 → 0.0.72

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>;
     }]>;

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import * as Tooltip from "../tooltip/index.js";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import {
@@ -12,42 +11,53 @@
 
 	let {
 		ref = $bindable(null),
-		open = $bindable(true),
+		defaultOpen = true,
+		open = $bindable(defaultOpen),
 		onOpenChange = () => {},
+		collapsible = "offcanvas",
+		side = "left",
 		class: className,
 		style,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		defaultOpen?: boolean;
 		open?: boolean;
 		onOpenChange?: (open: boolean) => void;
+		collapsible?: "icon" | "offcanvas" | "none";
+		side?: "left" | "right";
 	} = $props();
 
+	// svelte-ignore state_referenced_locally
 	const sidebar = setSidebar({
 		open: () => open,
 		setOpen: (value: boolean) => {
 			open = value;
 			onOpenChange(value);
 
-			// This sets the cookie to keep the sidebar state.
-			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+			if (typeof document !== "undefined") {
+				document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+			}
 		},
+		collapsible,
+		side,
 	});
 </script>
 
 <svelte:window onkeydown={sidebar.handleShortcutKeydown} />
 
-<Tooltip.Provider delayDuration={0}>
-	<div
-		data-slot="sidebar-wrapper"
-		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
-		class={cn(
-			"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-			className
-		)}
-		bind:this={ref}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
-</Tooltip.Provider>
+<div
+	data-slot="sidebar-wrapper"
+	data-side={sidebar.side}
+	data-collapsible={sidebar.collapsible}
+	data-variant={sidebar.variant}
+	style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+	class={cn(
+		"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+		className
+	)}
+	bind:this={ref}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/sidebar/sidebar-provider.svelte.d.ts

@@ -1,8 +1,11 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    collapsible?: "icon" | "offcanvas" | "none";
+    side?: "left" | "right";
 };
 declare const SidebarProvider: import("svelte").Component<$$ComponentProps, {}, "ref" | "open">;
 type SidebarProvider = ReturnType<typeof SidebarProvider>;

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

@@ -19,7 +19,7 @@
 	data-slot="sidebar-rail"
 	aria-label="Toggle Sidebar"
 	tabindex={-1}
-	onclick={sidebar.toggle}
+	onclick={sidebar.toggleSidebar}
 	title="Toggle Sidebar"
 	class={cn(
 		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",

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

@@ -1,19 +1,22 @@
 <script lang="ts">
-	import { Separator } from "../separator/index.js";
-	import { cn } from "../../../utils.js";
-	import type { ComponentProps } from "svelte";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		...restProps
-	}: ComponentProps<typeof Separator> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<Separator
-	bind:ref
+<div
+	bind:this={ref}
 	data-slot="sidebar-separator"
 	data-sidebar="separator"
-	class={cn("bg-sidebar-border mx-2 w-auto", className)}
+	role="separator"
+	class={cn(
+		"bg-sidebar-border mx-2 my-1 h-px transition-all group-data-[collapsible=icon]:mx-0",
+		className
+	)}
 	{...restProps}
-/>
+></div>

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

@@ -1,13 +1,5 @@
-declare const SidebarSeparator: import("svelte").Component<Omit<{
-    orientation?: import("bits-ui").Orientation;
-    decorative?: boolean;
-}, "child" | "children"> & {
-    child?: import("svelte").Snippet<[{
-        props: Record<string, unknown>;
-    }]> | undefined;
-    children?: import("svelte").Snippet<[]> | undefined;
-    style?: import("bits-ui").StyleProperties | string | null | undefined;
-    ref?: HTMLElement | null | undefined;
-} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const SidebarSeparator: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type SidebarSeparator = ReturnType<typeof SidebarSeparator>;
 export default SidebarSeparator;

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

@@ -28,10 +28,10 @@
 	type="button"
 	onclick={(e) => {
 		onclick?.(e);
-		sidebar.toggle();
+		sidebar.toggleSidebar();
 	}}
 	{...restProps}
 >
 	<HugeiconsIcon icon={SidebarLeftIcon} strokeWidth={2}  />
 	<span class="sr-only">Toggle Sidebar</span>
-</Button>
+</Button>