pika-ux 1.0.0-beta.0

package/src/shadcn/sheet/sheet-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+    bind:ref
+    data-slot="sheet-description"
+    class={cn('text-muted-foreground text-sm', className)}
+    {...restProps}
+/>

package/src/shadcn/sheet/sheet-footer.svelte

@@ -0,0 +1,15 @@
+<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="sheet-footer" class={cn('mt-auto flex flex-col gap-2 p-4', className)} {...restProps}>
+    {@render children?.()}
+</div>

package/src/shadcn/sheet/sheet-header.svelte

@@ -0,0 +1,15 @@
+<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<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="sheet-header" class={cn('flex flex-col gap-1.5 p-4', className)} {...restProps}>
+    {@render children?.()}
+</div>

package/src/shadcn/sheet/sheet-overlay.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+    bind:ref
+    data-slot="sheet-overlay"
+    class={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className
+    )}
+    {...restProps}
+/>

package/src/shadcn/sheet/sheet-title.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+    bind:ref
+    data-slot="sheet-title"
+    class={cn('text-foreground font-semibold', className)}
+    {...restProps}
+/>

package/src/shadcn/sheet/sheet-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />

package/src/shadcn/sidebar/constants.ts

@@ -0,0 +1,6 @@
+export const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";

package/src/shadcn/sidebar/context.svelte.ts

@@ -0,0 +1,80 @@
+import { IsMobile } from '../is-mobile.svelte.js';
+import { getContext, setContext } from 'svelte';
+import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';
+
+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;
+};
+
+export class SidebarState {
+    readonly props: SidebarStateProps;
+    open = $derived.by(() => this.props.open());
+    openMobile = $state(false);
+    setOpen: SidebarStateProps['setOpen'];
+    #isMobile: IsMobile;
+    state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
+
+    constructor(props: SidebarStateProps) {
+        this.setOpen = props.setOpen;
+        this.#isMobile = new IsMobile();
+        this.props = props;
+    }
+
+    // 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;
+    }
+
+    //CHANGED: removed keyboard shortcut
+    // Event handler to apply to the `<svelte:window>`
+    // handleShortcutKeydown = (e: KeyboardEvent) => {
+    //     if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+    //         e.preventDefault();
+    //         this.toggle();
+    //     }
+    // };
+
+    setOpenMobile = (value: boolean) => {
+        this.openMobile = value;
+    };
+
+    toggle = () => {
+        return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open);
+    };
+}
+
+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: SidebarStateProps): SidebarState {
+    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(): SidebarState {
+    return getContext(Symbol.for(SYMBOL_KEY));
+}

package/src/shadcn/sidebar/index.ts

@@ -0,0 +1,75 @@
+import { useSidebar } from "./context.svelte.js";
+import Content from "./sidebar-content.svelte";
+import Footer from "./sidebar-footer.svelte";
+import GroupAction from "./sidebar-group-action.svelte";
+import GroupContent from "./sidebar-group-content.svelte";
+import GroupLabel from "./sidebar-group-label.svelte";
+import Group from "./sidebar-group.svelte";
+import Header from "./sidebar-header.svelte";
+import Input from "./sidebar-input.svelte";
+import Inset from "./sidebar-inset.svelte";
+import MenuAction from "./sidebar-menu-action.svelte";
+import MenuBadge from "./sidebar-menu-badge.svelte";
+import MenuButton from "./sidebar-menu-button.svelte";
+import MenuItem from "./sidebar-menu-item.svelte";
+import MenuSkeleton from "./sidebar-menu-skeleton.svelte";
+import MenuSubButton from "./sidebar-menu-sub-button.svelte";
+import MenuSubItem from "./sidebar-menu-sub-item.svelte";
+import MenuSub from "./sidebar-menu-sub.svelte";
+import Menu from "./sidebar-menu.svelte";
+import Provider from "./sidebar-provider.svelte";
+import Rail from "./sidebar-rail.svelte";
+import Separator from "./sidebar-separator.svelte";
+import Trigger from "./sidebar-trigger.svelte";
+import Root from "./sidebar.svelte";
+
+export {
+	Content,
+	Footer,
+	Group,
+	GroupAction,
+	GroupContent,
+	GroupLabel,
+	Header,
+	Input,
+	Inset,
+	Menu,
+	MenuAction,
+	MenuBadge,
+	MenuButton,
+	MenuItem,
+	MenuSkeleton,
+	MenuSub,
+	MenuSubButton,
+	MenuSubItem,
+	Provider,
+	Rail,
+	Root,
+	Separator,
+	//
+	Root as Sidebar,
+	Content as SidebarContent,
+	Footer as SidebarFooter,
+	Group as SidebarGroup,
+	GroupAction as SidebarGroupAction,
+	GroupContent as SidebarGroupContent,
+	GroupLabel as SidebarGroupLabel,
+	Header as SidebarHeader,
+	Input as SidebarInput,
+	Inset as SidebarInset,
+	Menu as SidebarMenu,
+	MenuAction as SidebarMenuAction,
+	MenuBadge as SidebarMenuBadge,
+	MenuButton as SidebarMenuButton,
+	MenuItem as SidebarMenuItem,
+	MenuSkeleton as SidebarMenuSkeleton,
+	MenuSub as SidebarMenuSub,
+	MenuSubButton as SidebarMenuSubButton,
+	MenuSubItem as SidebarMenuSubItem,
+	Provider as SidebarProvider,
+	Rail as SidebarRail,
+	Separator as SidebarSeparator,
+	Trigger as SidebarTrigger,
+	Trigger,
+	useSidebar,
+};

package/src/shadcn/sidebar/sidebar-content.svelte

@@ -0,0 +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(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/shadcn/sidebar/sidebar-footer.svelte

@@ -0,0 +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('flex flex-col gap-2 p-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/shadcn/sidebar/sidebar-group-action.svelte

@@ -0,0 +1,36 @@
+<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,
+        children,
+        child,
+        ...restProps
+    }: WithElementRef<HTMLButtonAttributes> & {
+        child?: Snippet<[{ props: Record<string, unknown> }]>;
+    } = $props();
+
+    const mergedProps = $derived({
+        class: cn(
+            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+            // Increases the hit area of the button on mobile.
+            'after:absolute after:-inset-2 md:after:hidden',
+            'group-data-[collapsible=icon]:hidden',
+            className
+        ),
+        'data-slot': 'sidebar-group-action',
+        'data-sidebar': 'group-action',
+        ...restProps,
+    });
+</script>
+
+{#if child}
+    {@render child({ props: mergedProps })}
+{:else}
+    <button bind:this={ref} {...mergedProps}>
+        {@render children?.()}
+    </button>
+{/if}

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

package/src/shadcn/sidebar/sidebar-group-label.svelte

@@ -0,0 +1,34 @@
+<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),
+        children,
+        child,
+        class: className,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+        child?: Snippet<[{ props: Record<string, unknown> }]>;
+    } = $props();
+
+    const mergedProps = $derived({
+        class: cn(
+            'text-sidebar-foreground/70 ring-sidebar-ring outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+            'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+            className
+        ),
+        'data-slot': 'sidebar-group-label',
+        'data-sidebar': 'group-label',
+        ...restProps,
+    });
+</script>
+
+{#if child}
+    {@render child({ props: mergedProps })}
+{:else}
+    <div bind:this={ref} {...mergedProps}>
+        {@render children?.()}
+    </div>
+{/if}

package/src/shadcn/sidebar/sidebar-group.svelte

@@ -0,0 +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-group"
+    data-sidebar="group"
+    class={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/shadcn/sidebar/sidebar-header.svelte

@@ -0,0 +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-header"
+    data-sidebar="header"
+    class={cn('flex flex-col gap-2 p-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/shadcn/sidebar/sidebar-input.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { ComponentProps } from 'svelte';
+    import { Input } from '../input/index.js';
+    import { cn } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        value = $bindable(''),
+        class: className,
+        ...restProps
+    }: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+    bind:ref
+    bind:value
+    data-slot="sidebar-input"
+    data-sidebar="input"
+    class={cn('bg-background h-8 w-full shadow-none', className)}
+    {...restProps}
+/>

package/src/shadcn/sidebar/sidebar-inset.svelte

@@ -0,0 +1,24 @@
+<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>
+
+<main
+    bind:this={ref}
+    data-slot="sidebar-inset"
+    class={cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</main>

package/src/shadcn/sidebar/sidebar-menu-action.svelte

@@ -0,0 +1,43 @@
+<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 outline-hidden absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+            // Increases the hit area of the button on mobile.
+            'after:absolute after:-inset-2 md:after:hidden',
+            'peer-data-[size=sm]/menu-button:top-1',
+            'peer-data-[size=default]/menu-button:top-1.5',
+            'peer-data-[size=lg]/menu-button:top-2.5',
+            'group-data-[collapsible=icon]:hidden',
+            showOnHover &&
+                'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=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/src/shadcn/sidebar/sidebar-menu-badge.svelte

@@ -0,0 +1,29 @@
+<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>
+
+<div
+    bind:this={ref}
+    data-slot="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    class={cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/shadcn/sidebar/sidebar-menu-button.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" module>
+    import { tv, type VariantProps } from 'tailwind-variants';
+
+    export const sidebarMenuButtonVariants = tv({
+        base: 'peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        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-8 text-sm',
+                sm: 'h-7 text-xs',
+                lg: 'group-data-[collapsible=icon]:p-0! h-12 text-sm',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    });
+
+    export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant'];
+    export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];
+</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 { HTMLAttributes } from 'svelte/elements';
+    import { useSidebar } from './context.svelte.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        child,
+        variant = 'default',
+        size = 'default',
+        isActive = false,
+        tooltipContent,
+        tooltipContentProps,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+        isActive?: boolean;
+        variant?: SidebarMenuButtonVariant;
+        size?: SidebarMenuButtonSize;
+        tooltipContent?: Snippet | string;
+        tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+        child?: Snippet<[{ props: Record<string, unknown> }]>;
+    } = $props();
+
+    const sidebar = useSidebar();
+
+    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>
+
+{#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({})}
+{: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}