@invopop/popui 0.1.97 → 0.1.99

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+  import { Skeleton } from '../skeleton/index.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    showIcon = false,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+    showIcon?: boolean
+  } = $props()
+
+  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>

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    showIcon?: boolean;
+};
+declare const SidebarMenuSkeleton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarMenuSkeleton = ReturnType<typeof SidebarMenuSkeleton>;
+export default SidebarMenuSkeleton;

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAnchorAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  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 data-[active=true]:bg-sidebar-accent data-[active=true]: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 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]:size-4 [&>svg]:shrink-0 data-[size=md]:text-sm data-[size=sm]:text-xs',
+      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/dist/sidebar/sidebar-menu-sub-button.svelte.d.ts

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

package/dist/sidebar/sidebar-menu-sub-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),
+    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>

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

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

package/dist/sidebar/sidebar-menu-sub.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<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-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</ul>

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

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

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

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

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

package/dist/sidebar/sidebar-provider.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import * as Tooltip from '../tooltip/index.js'
+  import { cn, type WithElementRef } from '../utils.js'
+  import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, 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)
+      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 flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+      className
+    )}
+    bind:this={ref}
+    {...restProps}
+  >
+    {@render children?.()}
+  </div>
+</Tooltip.Provider>

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const SidebarProvider: import("svelte").Component<$$ComponentProps, {}, "open" | "ref">;
+type SidebarProvider = ReturnType<typeof SidebarProvider>;
+export default SidebarProvider;

package/dist/sidebar/sidebar-rail.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import ShortcutWrapper from '../ShortcutWrapper.svelte'
+  import { cn, type WithElementRef } from '../utils.js'
+  import { SIDEBAR_DRAG_THRESHOLD_PX } from './constants.js'
+  import { useSidebar } from './context.svelte.js'
+
+  function portal(node: HTMLElement) {
+    const target = typeof document !== 'undefined' ? document.body : null
+    if (target) target.appendChild(node)
+    return {
+      destroy() {
+        if (node.parentNode) node.parentNode.removeChild(node)
+      }
+    }
+  }
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props()
+
+  const sidebar = useSidebar()
+
+  let dragStartX = 0
+  let dragStartWidthPx = 0
+  let dragMoved = false
+  let dragDirection: 1 | -1 = 1
+
+  let isHovering = $state(false)
+  let isDragging = $state(false)
+  let tooltipVisible = $derived(isHovering && !isDragging)
+  let tooltipX = $state(0)
+  let tooltipY = $state(0)
+  let tooltipWidth = $state(0)
+  let tooltipHeight = $state(0)
+
+  const TOOLTIP_CURSOR_OFFSET = 12
+  const TOOLTIP_VIEWPORT_PADDING = 8
+
+  let tooltipLeft = $derived.by(() => {
+    if (tooltipWidth === 0 || typeof window === 'undefined') return tooltipX
+    const desired = tooltipX - tooltipWidth / 2
+    const minX = TOOLTIP_VIEWPORT_PADDING
+    const maxX = window.innerWidth - tooltipWidth - TOOLTIP_VIEWPORT_PADDING
+    return Math.max(minX, Math.min(maxX, desired))
+  })
+
+  let tooltipTop = $derived.by(() => {
+    const desired = tooltipY + TOOLTIP_CURSOR_OFFSET
+    if (tooltipHeight === 0 || typeof window === 'undefined') return desired
+    const maxY = window.innerHeight - tooltipHeight - TOOLTIP_VIEWPORT_PADDING
+    return Math.min(maxY, desired)
+  })
+
+  function updateTooltipPosition(e: PointerEvent) {
+    tooltipX = e.clientX
+    tooltipY = e.clientY
+  }
+
+  function onPointerEnter(e: PointerEvent) {
+    const sidebarRoot = (e.currentTarget as HTMLElement).closest('[data-slot="sidebar"]')
+    dragDirection = sidebarRoot?.getAttribute('data-side') === 'right' ? -1 : 1
+    updateTooltipPosition(e)
+    isHovering = true
+  }
+
+  function onPointerLeave() {
+    isHovering = false
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    if (sidebar.state !== 'expanded' || sidebar.isMobile) return
+    const button = e.currentTarget as HTMLButtonElement
+    const sidebarRoot = button.closest('[data-slot="sidebar"]')
+    dragDirection = sidebarRoot?.getAttribute('data-side') === 'right' ? -1 : 1
+
+    const container = sidebarRoot?.querySelector('[data-slot="sidebar-container"]')
+    dragStartWidthPx = container instanceof HTMLElement ? container.offsetWidth : 256
+    dragStartX = e.clientX
+    dragMoved = false
+    button.setPointerCapture(e.pointerId)
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (tooltipVisible) updateTooltipPosition(e)
+    const button = e.currentTarget as HTMLButtonElement
+    if (!button.hasPointerCapture(e.pointerId)) return
+    const delta = (e.clientX - dragStartX) * dragDirection
+    if (Math.abs(delta) > SIDEBAR_DRAG_THRESHOLD_PX) {
+      dragMoved = true
+      isDragging = true
+    }
+    if (dragMoved) sidebar.setWidth(dragStartWidthPx + delta)
+  }
+
+  function onPointerUp(e: PointerEvent) {
+    const button = e.currentTarget as HTMLButtonElement
+    if (button.hasPointerCapture(e.pointerId)) button.releasePointerCapture(e.pointerId)
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+    isDragging = false
+  }
+
+  function onClick(e: MouseEvent) {
+    if (dragMoved) {
+      e.preventDefault()
+      e.stopPropagation()
+      dragMoved = false
+      return
+    }
+    sidebar.toggle()
+  }
+</script>
+
+<button
+  bind:this={ref}
+  data-sidebar="rail"
+  data-slot="sidebar-rail"
+  aria-label="Toggle Sidebar"
+  tabindex={-1}
+  type="button"
+  onpointerenter={onPointerEnter}
+  onpointerleave={onPointerLeave}
+  onpointerdown={onPointerDown}
+  onpointermove={onPointerMove}
+  onpointerup={onPointerUp}
+  onpointercancel={onPointerUp}
+  onclick={onClick}
+  class={cn(
+    '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 sm:flex',
+    'after:absolute after:inset-y-0 after:left-1/2 after:w-[2px]',
+    'hover:after:bg-sidebar-border',
+    'group-data-[side=left]:cursor-w-resize group-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>
+
+{#if tooltipVisible}
+  <div
+    use:portal
+    role="tooltip"
+    bind:offsetWidth={tooltipWidth}
+    bind:offsetHeight={tooltipHeight}
+    class="fixed z-[1002] pointer-events-none rounded-md border border-border-inverse bg-background-default-negative px-3 py-2 text-sm font-medium text-foreground-inverse leading-5 tracking-tight shadow-md"
+    style="left: {tooltipLeft}px; top: {tooltipTop}px; visibility: {tooltipWidth > 0
+      ? 'visible'
+      : 'hidden'};"
+  >
+    <div class="flex flex-col gap-1.5">
+      {#if sidebar.state === 'expanded'}
+        <div>Drag to resize</div>
+      {/if}
+      <div class="flex items-center justify-between gap-3">
+        <span>
+          {sidebar.state === 'expanded' ? 'Click to collapse' : 'Click to expand'}
+        </span>
+        <div class="flex items-center gap-1">
+          <ShortcutWrapper size="md" theme="navigation">⌘</ShortcutWrapper>
+          <ShortcutWrapper size="md" theme="navigation">.</ShortcutWrapper>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

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

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

package/dist/sidebar/sidebar-separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte'
+  import { Separator } from '../separator/index.js'
+  import { cn } from '../utils.js'
+
+  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 mx-2 w-auto', className)}
+  {...restProps}
+/>

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

@@ -0,0 +1,13 @@
+declare const SidebarSeparator: import("svelte").Component<Omit<{
+    orientation?: import("bits-ui").Orientation;
+    decorative?: boolean;
+}, "children" | "child"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+type SidebarSeparator = ReturnType<typeof SidebarSeparator>;
+export default SidebarSeparator;

package/dist/sidebar/sidebar-trigger.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import { SidebarShow } from '@invopop/ui-icons'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { cn, type WithElementRef } from '../utils.js'
+  import { useSidebar } from './context.svelte.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    onclick,
+    ...restProps
+  }: WithElementRef<HTMLButtonAttributes, HTMLButtonElement> = $props()
+
+  const sidebar = useSidebar()
+</script>
+
+<button
+  bind:this={ref}
+  data-sidebar="trigger"
+  data-slot="sidebar-trigger"
+  type="button"
+  class={cn(
+    'inline-flex size-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:pointer-events-none disabled:opacity-50',
+    className
+  )}
+  onclick={(e) => {
+    onclick?.(e)
+    sidebar.toggle()
+  }}
+  {...restProps}
+>
+  <Icon src={SidebarShow} class="size-4" />
+  <span class="sr-only">Toggle Sidebar</span>
+</button>

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

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

package/dist/sidebar/sidebar.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import * as Sheet from '../sheet/index.js'
+  import { cn, type WithElementRef } from '../utils.js'
+  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={cn(
+        'bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden',
+        className
+      )}
+      style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+      {side}
+      showCloseButton={false}
+    >
+      <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"
+  >
+    <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)+1rem)]'
+          : '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'
+          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+        variant === 'floating' || variant === 'inset'
+          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+        className
+      )}
+      {...restProps}
+    >
+      <div
+        data-sidebar="sidebar"
+        data-slot="sidebar-inner"
+        class="flex size-full flex-col 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"
+      >
+        {@render children?.()}
+      </div>
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/tailwind.theme.css

@@ -837,6 +837,26 @@
   --text-xs: 10px;
   --text-xs--line-height: 12px;
   --text-xs--letter-spacing: var(--tracking-wide);
+
+  /* ============================================
+     SHADCN-COMPATIBLE TOKEN ALIASES (Sheet, Separator, Sidebar)
+     ============================================ */
+
+  /* Generic aliases used by Sheet and Sidebar.Input */
+  --color-foreground-secondary: var(--color-foreground-default-secondary);
+  --color-input: var(--color-border-default-default);
+  --color-ring: var(--color-foreground-default-default);
+
+  /* Sidebar — defaults to the brand-bold (inverse/dark) surface so popui's
+     Sidebar matches the existing dark chrome out of the box. */
+  --color-sidebar: var(--color-background-default-bold);
+  --color-sidebar-foreground: var(--color-foreground-inverse-default);
+  --color-sidebar-primary: var(--color-foreground-inverse-default);
+  --color-sidebar-primary-foreground: var(--color-background-default-bold);
+  --color-sidebar-accent: var(--color-background-selected-inverse);
+  --color-sidebar-accent-foreground: var(--color-foreground-inverse-default);
+  --color-sidebar-border: var(--color-border-inverse-default);
+  --color-sidebar-ring: var(--color-border-inverse-secondary);
 }
 
 @layer theme {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.97",
+  "version": "0.1.99",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },
@@ -106,6 +106,7 @@
     "svelte-intersection-observer-action": "^0.0.4",
     "svelte-portal": "^2.2.1",
     "svelte-sonner": "^1.0.5",
+    "svelte-toolbelt": "^0.10.6",
     "svelte-transition": "^0.0.17",
     "svelte-viewport-info": "^1.0.2",
     "tailwind-variants": "^1.0.0",