sheer-ui 0.0.0

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import { Skeleton } from '../skeleton/index.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showIcon = false,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		showIcon?: boolean;
+	} = $props();
+
+	const uid = $props.id();
+	// Pseudo-random width between 50% and 90%, derived from the SSR-stable instance id
+	// (Math.random here would mismatch between server render and hydration).
+	const width = `${50 + (parseInt(uid.replace(/\D/g, '') || '0', 10) * 7) % 41}%`;
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu-skeleton"
+	data-sidebar="menu-skeleton"
+	class={join('h-8 gap-2 rounded-md px-2 flex items-center', 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>

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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: join(
+			'h-7 gap-2 rounded-md px-2 text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:text-sidebar-accent-foreground flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
+			className,
+		),
+		'data-slot': 'sidebar-menu-sub-button',
+		'data-sidebar': 'menu-sub-button',
+		'data-size': size,
+		'data-active': isActive,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}

package/src/lib/components/sidebar/sidebar-menu-sub-item.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), 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={join('group/menu-sub-item relative', className)}
+	{...restProps}>
+	{@render children?.()}
+</li>

package/src/lib/components/sidebar/sidebar-menu-sub.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<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu-sub"
+	data-sidebar="menu-sub"
+	class={join(
+		'mx-3.5 translate-x-px gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</ul>

package/src/lib/components/sidebar/sidebar-menu.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<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu"
+	data-sidebar="menu"
+	class={join('gap-1 flex w-full min-w-0 flex-col', className)}
+	{...restProps}>
+	{@render children?.()}
+</ul>

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import * as Sheet from '../sheet/index.js';
+	import { boxWith } from '../../internal/tools/index.js';
+	import { DialogRootState, DialogState } from '../dialog/dialog.svelte.js';
+	import { join } from 'overrule';
+	import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
+	import { useSidebar } from './context.svelte.js';
+	import type { SidebarRootProps } from './types.js';
+
+	let { ref = $bindable(null), side = 'left', class: className, children }: SidebarRootProps = $props();
+
+	const sidebar = useSidebar();
+
+	// SidebarState is an external machine that owns `open`; the sheet cell
+	// derives from it, and sheet-initiated dismissals route back through it.
+	// This surface acts as its own sheet root so the cell stays internal.
+	const sheetCell = new DialogState(() => sidebar.openForViewport);
+	$effect(() => {
+		const o = sheetCell.open;
+		untrack(() => {
+			if (o !== sidebar.openForViewport) sidebar.setOpen(o);
+		});
+	});
+
+	DialogRootState.create({
+		variant: boxWith(() => 'dialog'),
+		cell: sheetCell,
+		onOpenChangeComplete: boxWith(() => () => {}),
+	});
+</script>
+
+	<Sheet.Content
+		bind:ref
+		data-sidebar="sidebar"
+		data-slot="sidebar"
+		data-mobile="true"
+		class={join('bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden', className)}
+		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>

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { beforeNavigate } from '$app/navigation';
+	import * as Tooltip from '../tooltip';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './constants';
+	import { setSidebar, SidebarState } from './context.svelte';
+	import { OpenCell } from '../../internal/open-cell.svelte.js';
+	import { isMobile } from 'handful';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		open = true,
+		state: givenCell,
+		class: className,
+		style,
+		children,
+		...restProps
+	}: Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, 'children'> & {
+		/** Derivation source for the sidebar's open state. Not bindable. */
+		open?: boolean;
+		/** A caller-constructed cell used instead of building one from `open`. */
+		state?: OpenCell;
+		/** Children receive the state cell, typed and guaranteed within the tree. */
+		children?: Snippet<[OpenCell]>;
+	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	const cell = givenCell ?? new OpenCell(() => open);
+
+	const sidebar = setSidebar(
+		new SidebarState({
+			open: () => cell.open,
+			setOpen: (value: boolean) => {
+				cell.open = value;
+
+				// This sets the cookie to keep the sidebar state.
+				document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+			},
+		}),
+	);
+
+	// Closes the mobile sidebar on navigation, since clicking a nav link doesn't dismiss it.
+	beforeNavigate(() => isMobile.current && sidebar.openForViewport && sidebar.setOpen(false));
+</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={join('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}
+		bind:this={ref}
+		{...restProps}>
+		{@render children?.(cell)}
+	</div>
+</Tooltip.Provider>

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join(
+		'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',
+		'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+		'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+		'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+		'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+		'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</button>

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { Separator } from '../separator';
+	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={join('bg-sidebar-border', className)} {...restProps} />

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { Button } from '../button/index.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
+	bind:ref
+	data-sidebar="trigger"
+	data-slot="sidebar-trigger"
+	variant="ghost"
+	size="icon-sm"
+	class={join('np-sidebar-trigger', className)}
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+	{...restProps}>
+	<PanelLeftIcon />
+	<span class="sr-only">Toggle Sidebar</span>
+</Button>

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { isMobile as viewportIsMobile } from 'handful';
+	import MobileSurface from './sidebar-mobile-surface.svelte';
+	import DesktopSurface from './sidebar-desktop-surface.svelte';
+	import type { SidebarRootProps } from './types.js';
+
+	let {
+		ref = $bindable(null),
+		side = 'left',
+		variant = 'sidebar',
+		collapsible = 'offcanvas',
+		class: className,
+		children,
+		...restProps
+	}: SidebarRootProps = $props();
+</script>
+
+{#if collapsible === 'none'}
+	<div
+		class={join('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className)}
+		bind:this={ref}
+		{...restProps}>
+		{@render children?.()}
+	</div>
+{:else if viewportIsMobile.current}
+	<MobileSurface bind:ref {side} class={className} {children} {...restProps} />
+{:else}
+	<DesktopSurface bind:ref {side} {variant} {collapsible} class={className} {children} {...restProps} />
+{/if}

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../internal/utils.js';
+
+export type SidebarSide = 'left' | 'right';
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+export type SidebarCollapsible = 'offcanvas' | 'icon' | 'none';
+
+export type SidebarRootProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+	side?: SidebarSide;
+	variant?: SidebarVariant;
+	collapsible?: SidebarCollapsible;
+	children?: Snippet;
+};

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

@@ -0,0 +1,7 @@
+import Root from './skeleton.svelte';
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};

package/src/lib/components/skeleton/skeleton.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef, WithoutChildren } from '../../internal/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={join('bg-muted animate-pulse rounded-md', className)} {...restProps}></div>

package/src/lib/components/slider/components/slider-range.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { SliderRangeProps } from '../types.js';
+	import { SliderRangeState } from '../slider.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), ...restProps }: SliderRangeProps = $props();
+
+	const rangeState = SliderRangeState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'slider-range',
+				class: 'bg-primary absolute data-horizontal:h-full data-vertical:w-full',
+			},
+			restProps,
+			rangeState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>
+		{@render children?.()}
+	</span>
+{/if}

package/src/lib/components/slider/components/slider-thumb-label.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { SliderThumbLabelProps } from '../types.js';
+	import { getSliderRoot, SliderThumbLabelState } from '../slider.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { getLabelPosition } from '../helpers.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		index,
+		position: positionProp,
+		...restProps
+	}: SliderThumbLabelProps = $props();
+
+	const root = getSliderRoot();
+
+	const position = $derived(getLabelPosition(root.direction, positionProp));
+
+	const tickLabelState = SliderThumbLabelState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		index: boxWith(() => index),
+		position: boxWith(() => position),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, tickLabelState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>{@render children?.()}</span>
+{/if}

package/src/lib/components/slider/components/slider-thumb.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { SliderThumbProps } from '../types.js';
+	import { SliderThumbState } from '../slider.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), index, disabled = false, ...restProps }: SliderThumbProps = $props();
+
+	const thumbState = SliderThumbState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		index: boxWith(() => index),
+		disabled: boxWith(() => disabled),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'slider-thumb',
+				class:
+					'border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
+			},
+			restProps,
+			thumbState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({
+		active: thumbState.root.isThumbActive(thumbState.opts.index.current),
+		props: mergedProps,
+	})}
+{:else}
+	<span {...mergedProps}>
+		{@render children?.({
+			active: thumbState.root.isThumbActive(thumbState.opts.index.current),
+		})}
+	</span>
+{/if}

package/src/lib/components/slider/components/slider-tick-label.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { SliderTickLabelProps } from '../types.js';
+	import { getSliderRoot, SliderTickLabelState } from '../slider.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { getLabelPosition } from '../helpers.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		index,
+		position: positionProp,
+		...restProps
+	}: SliderTickLabelProps = $props();
+
+	const root = getSliderRoot();
+
+	const position = $derived(getLabelPosition(root.direction, positionProp));
+
+	const tickLabelState = SliderTickLabelState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		index: boxWith(() => index),
+		position: boxWith(() => position),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, tickLabelState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>{@render children?.()}</span>
+{/if}

package/src/lib/components/slider/components/slider-tick.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { SliderTickProps } from '../types.js';
+	import { SliderTickState } from '../slider.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), index, ...restProps }: SliderTickProps = $props();
+
+	const tickState = SliderTickState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		index: boxWith(() => index),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, tickState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>{@render children?.()}</span>
+{/if}