feature: move all shadcn related code to src/shared/shadcn

2026-01-01 14:37:18 +03:00
parent 8713207afb
commit 1321347ac3
88 changed files with 107 additions and 653 deletions
--- a/src/shared/shadcn/hooks/is-mobile.svelte.ts
+++ b/src/shared/shadcn/hooks/is-mobile.svelte.ts
@@ -0,0 +1,9 @@
+import { MediaQuery } from 'svelte/reactivity';
+
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+
+export class IsMobile extends MediaQuery {
+    constructor(breakpoint: number = DEFAULT_MOBILE_BREAKPOINT) {
+        super(`max-width: ${breakpoint - 1}px`);
+    }
+}
--- a/src/shared/shadcn/ui/button/button.svelte
+++ b/src/shared/shadcn/ui/button/button.svelte
@@ -0,0 +1,85 @@
+<script lang="ts" module>
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const buttonVariants = tv({
+    base:
+        "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',
+            destructive:
+                'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs',
+            outline:
+                'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
+            ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+            sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+            lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+            icon: 'size-9',
+            'icon-sm': 'size-8',
+            'icon-lg': 'size-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+
+export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+export type ButtonProps =
+    & WithElementRef<HTMLButtonAttributes>
+    & WithElementRef<HTMLAnchorAttributes>
+    & {
+        variant?: ButtonVariant;
+        size?: ButtonSize;
+    };
+</script>
+
+<script lang="ts">
+    let {
+    class: className,
+    variant = 'default',
+    size = 'default',
+    ref = $bindable(null),
+    href = undefined,
+    type = 'button',
+    disabled,
+    children,
+    ...restProps
+}: ButtonProps = $props();
+</script>
+
+{#if href}
+    <a
+        bind:this={ref}
+        data-slot="button"
+        class={cn(buttonVariants({ variant, size }), className)}
+        href={disabled ? undefined : href}
+        aria-disabled={disabled}
+        role={disabled ? 'link' : undefined}
+        tabindex={disabled ? -1 : undefined}
+        {...restProps}
+    >
+        {@render children?.()}
+    </a>
+{:else}
+    <button
+        bind:this={ref}
+        data-slot="button"
+        class={cn(buttonVariants({ variant, size }), className)}
+        {type}
+        {disabled}
+        {...restProps}
+    >
+        {@render children?.()}
+    </button>
+{/if}
--- a/src/shared/shadcn/ui/button/index.ts
+++ b/src/shared/shadcn/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+    type ButtonProps,
+    type ButtonSize,
+    type ButtonVariant,
+    buttonVariants,
+} from './button.svelte';
+
+export {
+    type ButtonProps,
+    type ButtonProps as Props,
+    type ButtonSize,
+    type ButtonVariant,
+    buttonVariants,
+    Root,
+    //
+    Root as Button,
+};
--- a/src/shared/shadcn/ui/input/index.ts
+++ b/src/shared/shadcn/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from './input.svelte';
+
+export {
+    Root,
+    //
+    Root as Input,
+};
--- a/src/shared/shadcn/ui/input/input.svelte
+++ b/src/shared/shadcn/ui/input/input.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+
+type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+type Props = WithElementRef<
+    & Omit<HTMLInputAttributes, 'type'>
+    & ({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+>;
+
+let {
+    ref = $bindable(null),
+    value = $bindable(),
+    type,
+    files = $bindable(),
+    class: className,
+    'data-slot': dataSlot = 'input',
+    ...restProps
+}: Props = $props();
+</script>
+
+{#if type === 'file'}
+    <input
+        bind:this={ref}
+        data-slot={dataSlot}
+        class={cn(
+            'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50',
+            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+            className,
+        )}
+        type="file"
+        bind:files
+        bind:value
+        {...restProps}
+    />
+{:else}
+    <input
+        bind:this={ref}
+        data-slot={dataSlot}
+        class={cn(
+            'border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+            className,
+        )}
+        {type}
+        bind:value
+        {...restProps}
+    />
+{/if}
--- a/src/shared/shadcn/ui/separator/index.ts
+++ b/src/shared/shadcn/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from './separator.svelte';
+
+export {
+    Root,
+    //
+    Root as Separator,
+};
--- a/src/shared/shadcn/ui/separator/separator.svelte
+++ b/src/shared/shadcn/ui/separator/separator.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Separator as SeparatorPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    'data-slot': dataSlot = 'separator',
+    ...restProps
+}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+    bind:ref
+    data-slot={dataSlot}
+    class={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+    )}
+    {...restProps}
+/>
--- a/src/shared/shadcn/ui/sheet/index.ts
+++ b/src/shared/shadcn/ui/sheet/index.ts
@@ -0,0 +1,34 @@
+import Close from './sheet-close.svelte';
+import Content from './sheet-content.svelte';
+import Description from './sheet-description.svelte';
+import Footer from './sheet-footer.svelte';
+import Header from './sheet-header.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Portal from './sheet-portal.svelte';
+import Title from './sheet-title.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Root from './sheet.svelte';
+
+export {
+    Close,
+    Close as SheetClose,
+    Content,
+    Content as SheetContent,
+    Description,
+    Description as SheetDescription,
+    Footer,
+    Footer as SheetFooter,
+    Header,
+    Header as SheetHeader,
+    Overlay,
+    Overlay as SheetOverlay,
+    Portal,
+    Portal as SheetPortal,
+    Root,
+    //
+    Root as Sheet,
+    Title,
+    Title as SheetTitle,
+    Trigger,
+    Trigger as SheetTrigger,
+};
--- a/src/shared/shadcn/ui/sheet/sheet-close.svelte
+++ b/src/shared/shadcn/ui/sheet/sheet-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+
+let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
--- a/src/shared/shadcn/ui/sheet/sheet-content.svelte
+++ b/src/shared/shadcn/ui/sheet/sheet-content.svelte
@@ -0,0 +1,64 @@
+<script lang="ts" module>
+    import { tv, type VariantProps } from 'tailwind-variants';
+export const sheetVariants = tv({
+    base:
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+    variants: {
+        side: {
+            top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+            bottom:
+                'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+            left:
+                'data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm',
+            right:
+                'data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm',
+        },
+    },
+    defaultVariants: {
+        side: 'right',
+    },
+});
+
+export type Side = VariantProps<typeof sheetVariants>['side'];
+</script>
+
+<script lang="ts">
+    import { cn, type WithoutChildrenOrChild } from '$shared/shadcn/utils/shadcn-utils.js';
+import XIcon from '@lucide/svelte/icons/x';
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ComponentProps } from 'svelte';
+import SheetOverlay from './sheet-overlay.svelte';
+import SheetPortal from './sheet-portal.svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    side = 'right',
+    portalProps,
+    children,
+    ...restProps
+}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+    side?: Side;
+    children: Snippet;
+} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+        bind:ref
+        data-slot="sheet-content"
+        class={cn(sheetVariants({ side }), className)}
+        {...restProps}
+    >
+        {@render children?.()}
+        <SheetPrimitive.Close
+            class="ring-offset-background focus-visible:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+        >
+            <XIcon class="size-4" />
+            <span class="sr-only">Close</span>
+        </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+</SheetPortal>
--- a/src/shared/shadcn/ui/sheet/sheet-description.svelte
+++ b/src/shared/shadcn/ui/sheet/sheet-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Dialog as SheetPrimitive } from 'bits-ui';
+
+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}
+/>
--- a/src/shared/shadcn/ui/sheet/sheet-footer.svelte
+++ b/src/shared/shadcn/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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>
--- a/src/shared/shadcn/ui/sheet/sheet-header.svelte
+++ b/src/shared/shadcn/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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-header"
+    class={cn('flex flex-col gap-1.5 p-4', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>
--- a/src/shared/shadcn/ui/sheet/sheet-overlay.svelte
+++ b/src/shared/shadcn/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Dialog as SheetPrimitive } from 'bits-ui';
+
+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}
+/>
--- a/src/shared/shadcn/ui/sheet/sheet-portal.svelte
+++ b/src/shared/shadcn/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+
+let { ...restProps }: SheetPrimitive.PortalProps = $props();
+</script>
+
+<SheetPrimitive.Portal {...restProps} />
--- a/src/shared/shadcn/ui/sheet/sheet-title.svelte
+++ b/src/shared/shadcn/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Dialog as SheetPrimitive } from 'bits-ui';
+
+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}
+/>
--- a/src/shared/shadcn/ui/sheet/sheet-trigger.svelte
+++ b/src/shared/shadcn/ui/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} />
--- a/src/shared/shadcn/ui/sheet/sheet.svelte
+++ b/src/shared/shadcn/ui/sheet/sheet.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+
+let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />
--- a/src/shared/shadcn/ui/sidebar/constants.ts
+++ b/src/shared/shadcn/ui/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';
--- a/src/shared/shadcn/ui/sidebar/context.svelte.ts
+++ b/src/shared/shadcn/ui/sidebar/context.svelte.ts
@@ -0,0 +1,81 @@
+import { IsMobile } from '$shared/shadcn/hooks/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;
+};
+
+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;
+    }
+
+    // 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));
+}
--- a/src/shared/shadcn/ui/sidebar/index.ts
+++ b/src/shared/shadcn/ui/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,
+    Content as SidebarContent,
+    Footer,
+    Footer as SidebarFooter,
+    Group,
+    Group as SidebarGroup,
+    GroupAction,
+    GroupAction as SidebarGroupAction,
+    GroupContent,
+    GroupContent as SidebarGroupContent,
+    GroupLabel,
+    GroupLabel as SidebarGroupLabel,
+    Header,
+    Header as SidebarHeader,
+    Input,
+    Input as SidebarInput,
+    Inset,
+    Inset as SidebarInset,
+    Menu,
+    Menu as SidebarMenu,
+    MenuAction,
+    MenuAction as SidebarMenuAction,
+    MenuBadge,
+    MenuBadge as SidebarMenuBadge,
+    MenuButton,
+    MenuButton as SidebarMenuButton,
+    MenuItem,
+    MenuItem as SidebarMenuItem,
+    MenuSkeleton,
+    MenuSkeleton as SidebarMenuSkeleton,
+    MenuSub,
+    MenuSub as SidebarMenuSub,
+    MenuSubButton,
+    MenuSubButton as SidebarMenuSubButton,
+    MenuSubItem,
+    MenuSubItem as SidebarMenuSubItem,
+    Provider,
+    Provider as SidebarProvider,
+    Rail,
+    Rail as SidebarRail,
+    Root,
+    //
+    Root as Sidebar,
+    Separator,
+    Separator as SidebarSeparator,
+    Trigger,
+    Trigger as SidebarTrigger,
+    useSidebar,
+};
--- a/src/shared/shadcn/ui/sidebar/sidebar-content.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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-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>
--- a/src/shared/shadcn/ui/sidebar/sidebar-footer.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-footer.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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-footer"
+    data-sidebar="footer"
+    class={cn('flex flex-col gap-2 p-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>
--- a/src/shared/shadcn/ui/sidebar/sidebar-group-action.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-group-action.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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 absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden 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}
--- a/src/shared/shadcn/ui/sidebar/sidebar-group-content.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-group-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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>
--- a/src/shared/shadcn/ui/sidebar/sidebar-group-label.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-group-label.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden 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}
--- a/src/shared/shadcn/ui/sidebar/sidebar-group.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-group.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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-group"
+    data-sidebar="group"
+    class={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>
--- a/src/shared/shadcn/ui/sidebar/sidebar-header.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-header.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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-header"
+    data-sidebar="header"
+    class={cn('flex flex-col gap-2 p-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>
--- a/src/shared/shadcn/ui/sidebar/sidebar-input.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-input.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { Input } from '$shared/shadcn/input/index.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { ComponentProps } from 'svelte';
+
+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}
+/>
--- a/src/shared/shadcn/ui/sidebar/sidebar-inset.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-inset.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</main>
--- a/src/shared/shadcn/ui/sidebar/sidebar-menu-action.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-menu-action.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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 end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden 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}
--- a/src/shared/shadcn/ui/sidebar/sidebar-menu-badge.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-menu-badge.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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 end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        '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>
--- a/src/shared/shadcn/ui/sidebar/sidebar-menu-button.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-menu-button.svelte
@@ -0,0 +1,108 @@
+<script lang="ts" module>
+    import { tv, type VariantProps } from 'tailwind-variants';
+
+export const sidebarMenuButtonVariants = tv({
+    base:
+        'peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground 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 flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! 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: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        },
+    },
+    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 '$shared/shadcn/tooltip/index.js';
+import {
+    cn,
+    type WithElementRef,
+    type WithoutChildrenOrChild,
+} from '$shared/shadcn/utils/shadcn-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}
--- a/src/shared/shadcn/ui/sidebar/sidebar-menu-item.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-menu-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+    bind:this={ref}
+    data-slot="sidebar-menu-item"
+    data-sidebar="menu-item"
+    class={cn('group/menu-item relative', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</li>
--- a/src/shared/shadcn/ui/sidebar/sidebar-menu-skeleton.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { Skeleton } from '$shared/shadcn/skeleton/index.js';
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    showIcon = false,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+    showIcon?: boolean;
+} = $props();
+
+// Random width between 50% and 90%
+const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+    {...restProps}
+>
+    {#if showIcon}
+        <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+    {/if}
+    <Skeleton
+        class="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style="--skeleton-width: {width};"
+    />
+    {@render children?.()}
+</div>
--- a/src/shared/shadcn/ui/sidebar/sidebar-menu-sub-button.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        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}
--- a/src/shared/shadcn/ui/sidebar/sidebar-menu-sub-item.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-menu-sub-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li
+    bind:this={ref}
+    data-slot="sidebar-menu-sub-item"
+    data-sidebar="menu-sub-item"
+    class={cn('group/menu-sub-item relative', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</li>
--- a/src/shared/shadcn/ui/sidebar/sidebar-menu-sub.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-menu-sub.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+    bind:this={ref}
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-sub"
+    class={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</ul>
--- a/src/shared/shadcn/ui/sidebar/sidebar-menu.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-menu.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+    bind:this={ref}
+    data-slot="sidebar-menu"
+    data-sidebar="menu"
+    class={cn('flex w-full min-w-0 flex-col gap-1', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</ul>
--- a/src/shared/shadcn/ui/sidebar/sidebar-provider.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-provider.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import * as Tooltip from '$shared/shadcn/tooltip/index.js';
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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),
+    open = $bindable(true),
+    onOpenChange = () => {},
+    class: className,
+    style,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+} = $props();
+
+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}`;
+    },
+});
+</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>
--- a/src/shared/shadcn/ui/sidebar/sidebar-rail.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-rail.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-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.toggle}
+    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]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-[calc(1/2*100%-1px)] 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:start-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-end-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-start-2',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</button>
--- a/src/shared/shadcn/ui/sidebar/sidebar-separator.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-separator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Separator } from '$shared/shadcn/separator/index.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { ComponentProps } from 'svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+    bind:ref
+    data-slot="sidebar-separator"
+    data-sidebar="separator"
+    class={cn('bg-sidebar-border', className)}
+    {...restProps}
+/>
--- a/src/shared/shadcn/ui/sidebar/sidebar-trigger.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar-trigger.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { Button } from '$shared/shadcn/button/index.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+import type { ComponentProps } from 'svelte';
+import { useSidebar } from './context.svelte.js';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    onclick,
+    ...restProps
+}: ComponentProps<typeof Button> & {
+    onclick?: (e: MouseEvent) => void;
+} = $props();
+
+const sidebar = useSidebar();
+</script>
+
+<Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    class={cn('size-7', className)}
+    type="button"
+    onclick={(e => {
+        onclick?.(e);
+        sidebar.toggle();
+    })}
+    {...restProps}
+>
+    <PanelLeftIcon />
+    <span class="sr-only">Toggle Sidebar</span>
+</Button>
--- a/src/shared/shadcn/ui/sidebar/sidebar.svelte
+++ b/src/shared/shadcn/ui/sidebar/sidebar.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+    import * as Sheet from '$shared/shadcn/sheet/index.js';
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
+import { useSidebar } from './context.svelte.js';
+
+let {
+    ref = $bindable(null),
+    side = 'left',
+    variant = 'sidebar',
+    collapsible = 'offcanvas',
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+} = $props();
+
+const sidebar = useSidebar();
+</script>
+
+{#if collapsible === 'none'}
+    <div
+        class={cn(
+            'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+            className,
+        )}
+        bind:this={ref}
+        {...restProps}
+    >
+        {@render children?.()}
+    </div>
+{:else if sidebar.isMobile}
+    <Sheet.Root
+        bind:open={() => sidebar.openMobile, v => sidebar.setOpenMobile(v)}
+        {...restProps}
+    >
+        <Sheet.Content
+            data-sidebar="sidebar"
+            data-slot="sidebar"
+            data-mobile="true"
+            class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+            style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+            {side}
+        >
+            <Sheet.Header class="sr-only">
+                <Sheet.Title>Sidebar</Sheet.Title>
+                <Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+            </Sheet.Header>
+            <div class="flex h-full w-full flex-col">
+                {@render children?.()}
+            </div>
+        </Sheet.Content>
+    </Sheet.Root>
+{:else}
+    <div
+        bind:this={ref}
+        class="text-sidebar-foreground group peer hidden md:block"
+        data-state={sidebar.state}
+        data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}
+        data-variant={variant}
+        data-side={side}
+        data-slot="sidebar"
+    >
+        <!-- This is what handles the sidebar gap on desktop -->
+        <div
+            data-slot="sidebar-gap"
+            class={cn(
+                'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+                'group-data-[collapsible=offcanvas]:w-0',
+                'group-data-[side=right]:rotate-180',
+                variant === 'floating' || variant === 'inset'
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+            )}
+        >
+        </div>
+        <div
+            data-slot="sidebar-container"
+            class={cn(
+                'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+                side === 'left'
+                    ? 'start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]'
+                    : 'end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]',
+                // Adjust the padding for floating and inset variants.
+                variant === 'floating' || variant === 'inset'
+                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s',
+                className,
+            )}
+            {...restProps}
+        >
+            <div
+                data-sidebar="sidebar"
+                data-slot="sidebar-inner"
+                class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+            >
+                {@render children?.()}
+            </div>
+        </div>
+    </div>
+{/if}
--- a/src/shared/shadcn/ui/skeleton/index.ts
+++ b/src/shared/shadcn/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from './skeleton.svelte';
+
+export {
+    Root,
+    //
+    Root as Skeleton,
+};
--- a/src/shared/shadcn/ui/skeleton/skeleton.svelte
+++ b/src/shared/shadcn/ui/skeleton/skeleton.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import {
+    cn,
+    type WithElementRef,
+    type WithoutChildren,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="skeleton"
+    class={cn('bg-accent animate-pulse rounded-md', className)}
+    {...restProps}
+>
+</div>
--- a/src/shared/shadcn/ui/tooltip/index.ts
+++ b/src/shared/shadcn/ui/tooltip/index.ts
@@ -0,0 +1,19 @@
+import Content from './tooltip-content.svelte';
+import Portal from './tooltip-portal.svelte';
+import Provider from './tooltip-provider.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Root from './tooltip.svelte';
+
+export {
+    Content,
+    Content as TooltipContent,
+    Portal,
+    Portal as TooltipPortal,
+    Provider,
+    Provider as TooltipProvider,
+    Root,
+    //
+    Root as Tooltip,
+    Trigger,
+    Trigger as TooltipTrigger,
+};
--- a/src/shared/shadcn/ui/tooltip/tooltip-content.svelte
+++ b/src/shared/shadcn/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { WithoutChildrenOrChild } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+import TooltipPortal from './tooltip-portal.svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 0,
+    side = 'top',
+    children,
+    arrowClasses,
+    portalProps,
+    ...restProps
+}: TooltipPrimitive.ContentProps & {
+    arrowClasses?: string;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+    <TooltipPrimitive.Content
+        bind:ref
+        data-slot="tooltip-content"
+        {sideOffset}
+        {side}
+        class={cn(
+            'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+            className,
+        )}
+        {...restProps}
+    >
+        {@render children?.()}
+        <TooltipPrimitive.Arrow>
+            {#snippet child({ props })}
+                <div
+                    class={cn(
+                        'bg-primary z-50 size-2.5 rotate-45 rounded-[2px]',
+                        'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+                        'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+                        'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+                        'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
+                        arrowClasses,
+                    )}
+                    {...props}
+                >
+                </div>
+            {/snippet}
+        </TooltipPrimitive.Arrow>
+    </TooltipPrimitive.Content>
+</TooltipPortal>
--- a/src/shared/shadcn/ui/tooltip/tooltip-portal.svelte
+++ b/src/shared/shadcn/ui/tooltip/tooltip-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />
--- a/src/shared/shadcn/ui/tooltip/tooltip-provider.svelte
+++ b/src/shared/shadcn/ui/tooltip/tooltip-provider.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />
--- a/src/shared/shadcn/ui/tooltip/tooltip-trigger.svelte
+++ b/src/shared/shadcn/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
--- a/src/shared/shadcn/ui/tooltip/tooltip.svelte
+++ b/src/shared/shadcn/ui/tooltip/tooltip.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />
--- a/src/shared/shadcn/utils/shadcn-utils.ts
+++ b/src/shared/shadcn/utils/shadcn-utils.ts
@@ -0,0 +1,37 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx for conditional classes and tailwind-merge to handle conflicts
+ */
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Type utility to add a ref property to HTML element attributes
+ * Used in shadcn-svelte components to support element references
+ * @template T - The attributes type (e.g., HTMLAttributes<HTMLDivElement>)
+ * @template E - The element type (e.g., HTMLDivElement)
+ */
+export type WithElementRef<T, E extends HTMLElement = HTMLElement> = T & {
+    /**
+     * Reference to the DOM element
+     */
+    ref?: E | null;
+};
+
+/**
+ * Type utility to remove 'children' and 'child' properties from a type
+ * Used in shadcn-svelte components that use Snippets instead of children
+ * @template T - The type to remove children from
+ */
+export type WithoutChildren<T> = Omit<T, 'children'>;
+
+/**
+ * Type utility to remove 'children' and 'child' properties from a type
+ * Used in shadcn-svelte components that use Snippets instead of children
+ * @template T - The type to remove children and child from
+ */
+export type WithoutChildrenOrChild<T> = Omit<T, 'children' | 'child'>;