negodesign 0.0.77 → 0.0.79

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

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

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

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sidebar-footer"
-	data-sidebar="footer"
-	class={cn("mt-auto gap-2 p-2 flex flex-col", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-footer"
+	data-sidebar="footer"
+	class={cn("mt-auto gap-2 p-2 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -1,21 +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<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sidebar-group-content"
-	data-sidebar="group-content"
-	class={cn("text-sm", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
+<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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group-content"
+	data-sidebar="group-content"
+	class={cn("text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -1,38 +1,38 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		showOnHover = false,
-		children,
-		child,
-		...restProps
-	}: WithElementRef<HTMLButtonAttributes> & {
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-		showOnHover?: boolean;
-	} = $props();
-
-	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"
-				: "",
-			className
-		),
-		"data-slot": "sidebar-menu-action",
-		"data-sidebar": "menu-action",
-		...restProps,
-	});
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<button bind:this={ref} {...mergedProps}>
-		{@render children?.()}
-	</button>
-{/if}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showOnHover = false,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		showOnHover?: boolean;
+	} = $props();
+
+	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"
+				: "",
+			className
+		),
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

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

@@ -1,71 +1,71 @@
-<script lang="ts" module>
-	import { cn } from "../../../utils.js";
-
-	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 = "default" | "outline";
-	export type SidebarMenuButtonSize = "default" | "sm" | "lg";
-</script>
-
-<script lang="ts">
-	import type { WithElementRef } from "../../../utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		child,
-		variant = "default",
-		size = "default",
-		isActive = false,
-		tooltipContent = undefined,
-		tooltipContentProps = undefined,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
-		isActive?: boolean;
-		variant?: SidebarMenuButtonVariant;
-		size?: SidebarMenuButtonSize;
-		tooltipContent?: Snippet | string;
-		tooltipContentProps?: Record<string, unknown>;
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-	} = $props();
-
-	const buttonProps = $derived({
-		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
-		"data-slot": "sidebar-menu-button",
-		"data-sidebar": "menu-button",
-		"data-size": size,
-		"data-active": isActive,
-		...restProps,
-	});
-</script>
-
-{#if child}
-	{@render child({ props: buttonProps })}
-{:else}
-	<button bind:this={ref} {...buttonProps}>
-		{@render children?.()}
-	</button>
+<script lang="ts" module>
+	import { cn } from "../../../utils.js";
+
+	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 = "default" | "outline";
+	export type SidebarMenuButtonSize = "default" | "sm" | "lg";
+</script>
+
+<script lang="ts">
+	import type { WithElementRef } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		variant = "default",
+		size = "default",
+		isActive = false,
+		tooltipContent = undefined,
+		tooltipContentProps = undefined,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+		isActive?: boolean;
+		variant?: SidebarMenuButtonVariant;
+		size?: SidebarMenuButtonSize;
+		tooltipContent?: Snippet | string;
+		tooltipContentProps?: Record<string, unknown>;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const buttonProps = $derived({
+		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
+		"data-slot": "sidebar-menu-button",
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: buttonProps })}
+{:else}
+	<button bind:this={ref} {...buttonProps}>
+		{@render children?.()}
+	</button>
 {/if}

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

@@ -1,39 +1,39 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		children,
-		child,
-		class: className,
-		size = "md",
-		isActive = false,
-		...restProps
-	}: WithElementRef<HTMLAnchorAttributes> & {
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-		size?: "sm" | "md";
-		isActive?: boolean;
-	} = $props();
-
-	const mergedProps = $derived({
-		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
-			className,
-		),
-		"data-slot": "sidebar-menu-sub-button",
-		"data-sidebar": "menu-sub-button",
-		"data-size": size,
-		"data-active": isActive,
-		...restProps,
-	});
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<a bind:this={ref} {...mergedProps}>
-		{@render children?.()}
-	</a>
-{/if}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		size = "md",
+		isActive = false,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+			className,
+		),
+		"data-slot": "sidebar-menu-sub-button",
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}

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

@@ -1,63 +1,63 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import {
-		SIDEBAR_COOKIE_MAX_AGE,
-		SIDEBAR_COOKIE_NAME,
-		SIDEBAR_WIDTH,
-		SIDEBAR_WIDTH_ICON,
-	} from "./constants.js";
-	import { setSidebar } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		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);
-
-			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} />
-
-<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?.()}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import {
+		SIDEBAR_COOKIE_MAX_AGE,
+		SIDEBAR_COOKIE_NAME,
+		SIDEBAR_WIDTH,
+		SIDEBAR_WIDTH_ICON,
+	} from "./constants.js";
+	import { setSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		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);
+
+			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} />
+
+<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-rail.svelte

@@ -1,36 +1,36 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { useSidebar } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
-
-	const sidebar = useSidebar();
-</script>
-
-<button
-	bind:this={ref}
-	data-sidebar="rail"
-	data-slot="sidebar-rail"
-	aria-label="Toggle Sidebar"
-	tabindex={-1}
-	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",
-		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-		"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</button>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-sidebar="rail"
+	data-slot="sidebar-rail"
+	aria-label="Toggle Sidebar"
+	tabindex={-1}
+	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",
+		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+		"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>