sheer-ui 0.0.0

package/src/lib/components/sheet/components/sheet-trigger.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import DialogTrigger from '../../dialog/components/dialog-trigger.svelte';
+	import type { DialogTriggerProps } from '../../dialog/types.js';
+
+	let { ref = $bindable(null), ...restProps }: DialogTriggerProps = $props();
+</script>
+
+<DialogTrigger bind:ref data-slot="sheet-trigger" {...restProps} />

package/src/lib/components/sheet/index.ts

@@ -0,0 +1,47 @@
+import Root from '../dialog/components/dialog.svelte';
+import Close from './components/sheet-close.svelte';
+import Content from './components/sheet-content.svelte';
+import Description from './components/sheet-description.svelte';
+import Overlay from './components/sheet-overlay.svelte';
+import Title from './components/sheet-title.svelte';
+import Trigger from './components/sheet-trigger.svelte';
+import Portal from '../../internal/portal/portal.svelte';
+import Footer from './components/sheet-footer.svelte';
+import Header from './components/sheet-header.svelte';
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};
+
+export { sheetVariants, type Side } from './variants.js';
+
+export type {
+	DialogRootProps as SheetProps,
+	DialogCloseProps as SheetCloseProps,
+	DialogTitleProps as SheetTitleProps,
+	DialogPortalProps as SheetPortalProps,
+	DialogTriggerProps as SheetTriggerProps,
+	DialogOverlayProps as SheetOverlayProps,
+	DialogContentProps as SheetContentProps,
+	DialogDescriptionProps as SheetDescriptionProps,
+} from '../dialog/types.js';

package/src/lib/components/sheet/variants.ts

@@ -0,0 +1,20 @@
+import { declareVariants, type VariantProps } from 'overrule';
+
+// The slide itself lives in sheet-content's <style> as `data-state`-keyed keyframes
+// (with `data-side` selecting the edge); the variant owns box + placement only.
+export const sheetVariants = declareVariants({
+	base: 'bg-background fixed z-50 flex flex-col gap-4 shadow-lg',
+	variants: {
+		side: {
+			top: 'inset-x-0 top-0 h-auto border-b',
+			bottom: 'inset-x-0 bottom-0 h-auto border-t',
+			left: 'inset-y-0 inset-s-0 h-full w-3/4 border-e sm:max-w-sm',
+			right: 'inset-y-0 inset-e-0 h-full w-3/4 border-s sm:max-w-sm',
+		},
+	},
+	defaultVariants: {
+		side: 'right',
+	},
+});
+
+export type Side = VariantProps<typeof sheetVariants>['side'];

package/src/lib/components/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/lib/components/sidebar/context.svelte.ts

@@ -0,0 +1,54 @@
+import { createContext } from "svelte";
+import { isMobile as viewportIsMobile } from 'handful';
+import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants';
+
+function isEditableTarget(target: EventTarget | null) {
+	if (!(target instanceof Element)) return false;
+	return target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [role="textbox"]') !== null;
+}
+
+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: () => 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);
+	openForViewport = $derived.by(() => (viewportIsMobile.current ? this.#openMobile : this.open));
+
+	constructor(props: SidebarStateProps) {
+		this.props = props;
+	}
+
+	// Event handler to apply to the `<svelte:window>`
+	handleShortcutKeydown = (e: KeyboardEvent) => {
+		if (e.defaultPrevented || e.repeat || isEditableTarget(e.target)) return;
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			this.toggle();
+		}
+	};
+
+	setOpen = (value: boolean) => {
+		viewportIsMobile.current ? (this.#openMobile = value) : this.props.setOpen(value);
+	};
+
+	toggle = () => {
+		this.setOpen(!this.openForViewport);
+	};
+}
+
+export const [useSidebar, setSidebar] = createContext<SidebarState>();

package/src/lib/components/sidebar/index.ts

@@ -0,0 +1,77 @@
+import { useSidebar } from './context.svelte';
+import Root from './sidebar.svelte';
+import Content from './sidebar-content.svelte';
+import Footer from './sidebar-footer.svelte';
+import Group from './sidebar-group.svelte';
+import GroupAction from './sidebar-group-action.svelte';
+import GroupContent from './sidebar-group-content.svelte';
+import GroupLabel from './sidebar-group-label.svelte';
+import Header from './sidebar-header.svelte';
+import Input from './sidebar-input.svelte';
+import Inset from './sidebar-inset.svelte';
+import Menu from './sidebar-menu.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 MenuSub from './sidebar-menu-sub.svelte';
+import MenuSubButton from './sidebar-menu-sub-button.svelte';
+import MenuSubItem from './sidebar-menu-sub-item.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';
+
+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,
+};
+
+export type { SidebarCollapsible, SidebarRootProps, SidebarSide, SidebarVariant } from './types.js';

package/src/lib/components/sidebar/sidebar-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join('scrollbar-hidden gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-desktop-surface.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { useSidebar } from './context.svelte.js';
+	import type { SidebarRootProps } from './types.js';
+
+	let {
+		ref = $bindable(null),
+		side = 'left',
+		variant = 'sidebar',
+		collapsible = 'offcanvas',
+		class: className,
+		children,
+		...restProps
+	}: SidebarRootProps = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<div
+	bind:this={ref}
+	class="text-sidebar-foreground group peer hidden md:block"
+	data-state={sidebar.open ? 'expanded' : 'collapsed'}
+	data-collapsible={sidebar.open ? '' : 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={join(
+			'transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent',
+			'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)))]'
+				: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+		)}>
+	</div>
+	<div
+		data-slot="sidebar-container"
+		class={join(
+			'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+			side === 'left'
+				? 'inset-s-0 group-data-[collapsible=offcanvas]:-inset-s-(--sidebar-width)'
+				: 'inset-e-0 group-data-[collapsible=offcanvas]:-inset-e-(--sidebar-width)',
+			// 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]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col">
+			{@render children?.()}
+		</div>
+	</div>
+</div>

package/src/lib/components/sidebar/sidebar-footer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join('gap-2 p-2 flex flex-col', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-group-action.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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: join(
+			'absolute top-3.5 right-3 w-5 rounded-md p-0 text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 grid aspect-square place-items-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
+			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/lib/components/sidebar/sidebar-group-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join('text-sm w-full', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-group-label.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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: join(
+			'h-8 rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-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/lib/components/sidebar/sidebar-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join('p-2 relative flex w-full min-w-0 flex-col', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-header.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join('gap-2 p-2 flex flex-col', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-input.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ComponentProps } from 'svelte';
+	import { Input } from '../input';
+	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={join('h-8! w-full bg-background! shadow-none!', className)}
+	{...restProps} />

package/src/lib/components/sidebar/sidebar-inset.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join(
+		'bg-background 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-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</main>

package/src/lib/components/sidebar/sidebar-menu-action.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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: join(
+			'absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 grid place-items-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
+			showOnHover &&
+				'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground md:opacity-0 data-open:opacity-100',
+			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/lib/components/sidebar/sidebar-menu-badge.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join(
+		'pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground grid place-items-center tabular-nums select-none group-data-[collapsible=icon]:hidden',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-menu-button.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" module>
+	import { declareVariants, type VariantProps } from 'overrule';
+
+	export const sidebarMenuButtonVariants = declareVariants({
+		base: 'gap-2 rounded-md p-2 text-left ring-sidebar-ring transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
+		variants: {
+			variant: {
+				default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+				outline:
+					'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
+			},
+			size: {
+				default: 'h-8 text-sm group-data-[collapsible=icon]:p-2!',
+				sm: 'h-7 text-xs group-data-[collapsible=icon]:p-2!',
+				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 '../tooltip/index';
+	import type { WithElementRef, WithoutChildrenOrChild } from '../../internal/utils.js';
+	import { mergeProps } from '../../internal/merge-props.js';
+	import type { ComponentProps, Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useSidebar } from './context.svelte';
+
+	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: sidebarMenuButtonVariants({ variant, size, class: className }),
+		'data-slot': 'sidebar-menu-button',
+		'data-sidebar': 'menu-button',
+		'data-size': size,
+		'data-active': isActive,
+		...restProps,
+	});
+
+	const contentProps = $derived(
+		mergeProps({ side: 'right', align: 'center', hidden: sidebar.open, class: 'max-md:hidden' }, tooltipContentProps),
+	);
+</script>
+
+{#snippet Button({ props }: { props?: Record<string, unknown> })}
+	{#if child}
+		{@render child({ props: mergeProps(buttonProps, props) })}
+	{:else}
+		<button bind:this={ref} {...mergeProps(buttonProps, props)}>
+			{@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 {...contentProps}>
+			{#if typeof tooltipContent === 'string'}
+				{tooltipContent}
+			{:else if tooltipContent}
+				{@render tooltipContent()}
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Root>
+{/if}

package/src/lib/components/sidebar/sidebar-menu-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join('group/menu-item relative', className)}
+	{...restProps}>
+	{@render children?.()}
+</li>