@invopop/popui 0.1.96 → 0.1.98

package/dist/sidebar/sidebar-rail.svelte

@@ -0,0 +1,165 @@
+<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'
+
+  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
+    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/dist/types.d.ts

@@ -200,6 +200,7 @@ export interface CounterWidgetProps {
     resetDate?: string;
     icon?: IconSource;
     allowOverage?: boolean;
+    collapsed?: boolean;
 }
 export interface ProgressBarProps {
     percentage?: number;
@@ -211,7 +212,7 @@ export interface ProgressBarProps {
 export interface ProgressBarCircleProps {
     progress: number;
     size: number;
-    variant?: 'default' | 'dark';
+    variant?: 'default' | 'dark' | 'warning' | 'critical';
 }
 export interface TagProgressProps {
     progress: number;
@@ -533,6 +534,7 @@ export interface MenuItemProps {
     collapsable?: boolean;
     open?: boolean;
     active?: boolean;
+    collapsedSidebar?: boolean;
     iconTheme?: IconTheme;
     icon?: IconSource | string | undefined;
     imageUrl?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.96",
+  "version": "0.1.98",
   "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",