@invopop/popui 0.1.97 → 0.1.98

package/dist/sidebar/index.d.ts

@@ -0,0 +1,25 @@
+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, Trigger, 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, useSidebar };

package/dist/sidebar/index.js

@@ -0,0 +1,27 @@
+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, Trigger, 
+//
+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, useSidebar };

package/dist/sidebar/is-mobile.svelte.d.ts

@@ -0,0 +1,4 @@
+import { MediaQuery } from 'svelte/reactivity';
+export declare class IsMobile extends MediaQuery {
+    constructor(breakpoint?: number);
+}

package/dist/sidebar/is-mobile.svelte.js

@@ -0,0 +1,7 @@
+import { MediaQuery } from 'svelte/reactivity';
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+export class IsMobile extends MediaQuery {
+    constructor(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
+        super(`max-width: ${breakpoint - 1}px`);
+    }
+}

package/dist/sidebar/sidebar-content.svelte

@@ -0,0 +1,25 @@
+<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',
+    '[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/sidebar/sidebar-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type SidebarContent = ReturnType<typeof SidebarContent>;
+export default SidebarContent;

package/dist/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/dist/sidebar/sidebar-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type SidebarFooter = ReturnType<typeof SidebarFooter>;
+export default SidebarFooter;

package/dist/sidebar/sidebar-group-action.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  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 top-3.5 right-3 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 group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after: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/dist/sidebar/sidebar-group-action.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLButtonAttributes> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const SidebarGroupAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarGroupAction = ReturnType<typeof SidebarGroupAction>;
+export default SidebarGroupAction;

package/dist/sidebar/sidebar-group-content.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<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/dist/sidebar/sidebar-group-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarGroupContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type SidebarGroupContent = ReturnType<typeof SidebarGroupContent>;
+export default SidebarGroupContent;

package/dist/sidebar/sidebar-group-label.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  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}

package/dist/sidebar/sidebar-group-label.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const SidebarGroupLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarGroupLabel = ReturnType<typeof SidebarGroupLabel>;
+export default SidebarGroupLabel;

package/dist/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/dist/sidebar/sidebar-group.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type SidebarGroup = ReturnType<typeof SidebarGroup>;
+export default SidebarGroup;

package/dist/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/dist/sidebar/sidebar-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type SidebarHeader = ReturnType<typeof SidebarHeader>;
+export default SidebarHeader;

package/dist/sidebar/sidebar-input.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLInputAttributes, HTMLInputElement> = $props()
+</script>
+
+<input
+  bind:this={ref}
+  bind:value
+  data-slot="sidebar-input"
+  data-sidebar="input"
+  class={cn(
+    'bg-background border-input flex h-8 w-full rounded-md border px-3 py-1 text-sm shadow-none transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  {...restProps}
+/>

package/dist/sidebar/sidebar-input.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarInput: import("svelte").Component<WithElementRef<HTMLInputAttributes, HTMLInputElement>, {}, "value" | "ref">;
+type SidebarInput = ReturnType<typeof SidebarInput>;
+export default SidebarInput;

package/dist/sidebar/sidebar-inset.svelte

@@ -0,0 +1,23 @@
+<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>
+
+<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]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</main>

package/dist/sidebar/sidebar-inset.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarInset: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type SidebarInset = ReturnType<typeof SidebarInset>;
+export default SidebarInset;

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  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 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 group-data-[collapsible=icon]:hidden 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',
+      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/dist/sidebar/sidebar-menu-action.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLButtonAttributes> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    showOnHover?: boolean;
+};
+declare const SidebarMenuAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarMenuAction = ReturnType<typeof SidebarMenuAction>;
+export default SidebarMenuAction;

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

package/dist/sidebar/sidebar-menu-badge.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarMenuBadge: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type SidebarMenuBadge = ReturnType<typeof SidebarMenuBadge>;
+export default SidebarMenuBadge;

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

@@ -0,0 +1,102 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants'
+
+  export const sidebarMenuButtonVariants = tv({
+    base: 'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium 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 [&>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 shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(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 { Tooltip as TooltipPrimitive } from 'bits-ui'
+  import { mergeProps } from 'svelte-toolbelt'
+  import type { ComponentProps, Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import TooltipContent from '../tooltip/tooltip-content.svelte'
+  import { cn, type WithElementRef, type WithoutChildrenOrChild } from '../utils.js'
+  import { useSidebar } from './context.svelte.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    child,
+    variant = 'default',
+    size = 'default',
+    isActive = false,
+    tooltipContent,
+    tooltipContentProps,
+    ...restProps
+  }: WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
+    isActive?: boolean
+    variant?: SidebarMenuButtonVariant
+    size?: SidebarMenuButtonSize
+    tooltipContent?: Snippet | string
+    tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipContent>>
+    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}
+  <TooltipPrimitive.Root>
+    <TooltipPrimitive.Trigger>
+      {#snippet child({ props })}
+        {@render Button({ props })}
+      {/snippet}
+    </TooltipPrimitive.Trigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}
+      {...tooltipContentProps}
+    >
+      {#if typeof tooltipContent === 'string'}
+        {tooltipContent}
+      {:else if tooltipContent}
+        {@render tooltipContent()}
+      {/if}
+    </TooltipContent>
+  </TooltipPrimitive.Root>
+{/if}

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

@@ -0,0 +1,51 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const sidebarMenuButtonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", unknown, unknown, undefined>>;
+export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant'];
+export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import TooltipContent from '../tooltip/tooltip-content.svelte';
+import { type WithElementRef, type WithoutChildrenOrChild } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
+    isActive?: boolean;
+    variant?: SidebarMenuButtonVariant;
+    size?: SidebarMenuButtonSize;
+    tooltipContent?: Snippet | string;
+    tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipContent>>;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const SidebarMenuButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarMenuButton = ReturnType<typeof SidebarMenuButton>;
+export default SidebarMenuButton;

package/dist/sidebar/sidebar-menu-item.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<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>

package/dist/sidebar/sidebar-menu-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarMenuItem: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}, "ref">;
+type SidebarMenuItem = ReturnType<typeof SidebarMenuItem>;
+export default SidebarMenuItem;