@invopop/popui 0.1.96 → 0.1.98

package/dist/CounterWidget.svelte

@@ -2,7 +2,9 @@
   import type { CounterWidgetProps } from './types'
   import { Icon } from '@steeze-ui/svelte-icon'
   import { Warning, Failure } from '@invopop/ui-icons'
+  import { untrack } from 'svelte'
   import ProgressBar from './ProgressBar.svelte'
+  import ProgressBarCircle from './ProgressBarCircle.svelte'
 
   let {
     label,
@@ -10,43 +12,76 @@
     total,
     resetDate = '',
     icon,
-    allowOverage = true
+    allowOverage = true,
+    collapsed = false
   }: CounterWidgetProps = $props()
 
-  let percentage = $derived(total > 0 ? (current / total) * 100 : 0)
+  let progress = $derived(total > 0 ? current / total : 0)
+  let percentage = $derived(progress * 100)
   let isOverage = $derived(current > total && allowOverage)
   let isCritical = $derived(percentage >= 100 || (current > total && !allowOverage))
   let isWarning = $derived(percentage >= 80 && percentage < 100)
+  let circleVariant = $derived.by<'dark' | 'warning' | 'critical'>(() => {
+    if (isCritical) return 'critical'
+    if (isWarning) return 'warning'
+    return 'dark'
+  })
+
+  const EXPAND_DELAY_MS = 200
+  let showCollapsed = $state(untrack(() => collapsed))
+  let expandTimer: ReturnType<typeof setTimeout> | null = null
+
+  $effect(() => {
+    if (expandTimer) clearTimeout(expandTimer)
+    if (collapsed) {
+      showCollapsed = true
+    } else {
+      expandTimer = setTimeout(() => (showCollapsed = false), EXPAND_DELAY_MS)
+    }
+    return () => {
+      if (expandTimer) clearTimeout(expandTimer)
+    }
+  })
 </script>
 
-<div class="border border-border-inverse rounded-xl w-full py-[5px] pl-2 pr-1.5 flex flex-col">
-  <div class="flex items-center justify-between text-base font-medium">
-    <div class="flex items-center gap-1.5">
-      {#if icon}
-        <Icon src={icon} class="size-3 text-icon-inverse rounded-xs" />
-      {/if}
-      <span class="font-medium text-foreground-inverse">
-        {label}
-      </span>
+{#if showCollapsed}
+  <div
+    class="size-8 p-1.75 flex items-center justify-center rounded-lg border border-transparent hover:bg-background-selected-inverse"
+    title="{label}: {current}/{total}"
+    data-counter-widget-collapsed
+  >
+    <ProgressBarCircle {progress} size={16} variant={circleVariant} />
+  </div>
+{:else}
+  <div class="border border-border-inverse rounded-xl w-full py-[5px] pl-2 pr-1.5 flex flex-col">
+    <div class="flex items-center justify-between text-base font-medium">
+      <div class="flex items-center gap-1.5">
+        {#if icon}
+          <Icon src={icon} class="size-3 text-icon-inverse rounded-xs" />
+        {/if}
+        <span class="font-medium text-foreground-inverse">
+          {label}
+        </span>
+      </div>
+      <div class="flex items-center gap-1.5">
+        {#if isCritical && !isOverage}
+          <Icon src={Failure} class="size-4 text-icon-critical-inverse" />
+        {:else if isWarning && !isOverage}
+          <Icon src={Warning} class="size-4 text-icon-warning-inverse" />
+        {/if}
+        <span class="font-mono text-foreground-inverse">
+          {current}<span class="text-white/70">/{total}</span>
+        </span>
+      </div>
     </div>
-    <div class="flex items-center gap-1.5">
-      {#if isCritical && !isOverage}
-        <Icon src={Failure} class="size-4 text-icon-critical-inverse" />
-      {:else if isWarning && !isOverage}
-        <Icon src={Warning} class="size-4 text-icon-warning-inverse" />
-      {/if}
-      <span class="font-mono text-foreground-inverse">
-        {current}<span class="text-white/70">/{total}</span>
-      </span>
+    <div class="py-2">
+      <ProgressBar {percentage} {current} {total} {allowOverage} />
     </div>
-  </div>
-  <div class="py-2">
-    <ProgressBar {percentage} {current} {total} {allowOverage} />
-  </div>
 
-  {#if resetDate}
-    <span class="text-sm font-normal text-foreground-inverse-secondary">
-      {label} reset {resetDate}
-    </span>
-  {/if}
-</div>
+    {#if resetDate}
+      <span class="text-sm font-normal text-foreground-inverse-secondary">
+        {label} reset {resetDate}
+      </span>
+    {/if}
+  </div>
+{/if}

package/dist/GlobalSearch.svelte

@@ -15,7 +15,7 @@
       'cursor-pointer flex items-center border border-border-inverse-default rounded-lg box-border',
       {
         'gap-1 px-2 py-1.5 w-full hover:bg-background-selected-inverse h-8': !collapsed,
-        'p-2 size-8': collapsed
+        'p-2 size-8 mx-auto': collapsed
       }
     )
   )

package/dist/MenuItem.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
   import MenuItem from './MenuItem.svelte'
+  import { flip, shift, offset } from 'svelte-floating-ui/dom'
+  import { createFloatingActions } from 'svelte-floating-ui'
   import clsx from 'clsx'
   import { cn } from './utils.js'
-  import type { MenuItemProps } from './types.ts'
+  import type { MenuItemProps, DrawerOption, AnyProp } from './types.ts'
   import { Icon, type IconSource } from '@steeze-ui/svelte-icon'
-  import { ChevronDown, ChevronRight } from '@invopop/ui-icons'
+  import { ChevronDown, ChevronRight, FolderL } from '@invopop/ui-icons'
   import { resolveIcon } from './helpers.js'
+  import DrawerContext from './DrawerContext.svelte'
   import TagBeta from './TagBeta.svelte'
 
+  const [floatingRef, floatingContent] = createFloatingActions({
+    strategy: 'absolute',
+    placement: 'bottom-start',
+    middleware: [offset(-4), flip(), shift()]
+  })
+
   let {
     label = '',
     url = '',
@@ -15,6 +24,7 @@
     collapsable = false,
     open = $bindable(false),
     active = false,
+    collapsedSidebar = false,
     iconTheme = 'default',
     icon = undefined,
     imageUrl = undefined,
@@ -27,28 +37,46 @@
   }: MenuItemProps = $props()
 
   let resolvedIcon: IconSource | undefined = $state()
+  let hovered = $state(false)
+  let highlight = $state(false)
+  let leaveHoverTimeout: ReturnType<typeof setTimeout> | null = null
   let rowStyles = $derived(
-    clsx('flex items-center rounded-lg border border-transparent p-1', {
-      'gap-1.5': action || collapsable,
+    clsx('flex items-center rounded-lg border border-transparent', {
+      'py-1 pr-1': !collapsedSidebar,
+      'pl-2': !collapsedSidebar && !imageUrl,
+      'pl-[10px]': !collapsedSidebar && imageUrl,
+      'gap-1.5': !collapsedSidebar && (action || collapsable),
+      'size-8 p-[7px] justify-center mx-auto': collapsedSidebar,
       'bg-background-selected-inverse': active,
       'hover:bg-background-selected-inverse': !active
     })
   )
   let buttonStyles = $derived(
-    clsx(
-      'flex-1 min-w-0 h-6 cursor-pointer text-base flex items-center hover:text-white focus:text-white',
-      {
-        'text-foreground-inverse font-medium': !isFolderItem,
-        'text-foreground-inverse-secondary': isFolderItem && !active,
-        'text-white': active
-      }
-    )
+    clsx('cursor-pointer text-base flex items-center hover:text-white focus:text-white', {
+      'flex-1 min-w-0 h-6': !collapsedSidebar,
+      'group': collapsedSidebar,
+      'text-foreground-inverse font-medium': !isFolderItem,
+      'text-foreground-inverse-secondary': isFolderItem && !active,
+      'text-white': active
+    })
+  )
+  let iconStyles = $derived(
+    clsx({ 'group-hover:text-white text-icon-inverse-bold!': collapsedSidebar })
   )
   let wrapperStyles = $derived(
     clsx({
       'group/menu-item ml-4 border-l border-white-10 pl-2 pt-0.5 relative': isFolderItem
     })
   )
+  let items = $derived([
+    { label, value: url, selected: active, icon: resolvedIcon },
+    ...(children || []).map((c) => ({
+      label: c.label || '',
+      value: c.url || '',
+      selected: c.active,
+      icon: FolderL
+    }))
+  ] as DrawerOption[])
 
   $effect(() => {
     resolveIcon(icon).then((res) => (resolvedIcon = res))
@@ -61,25 +89,58 @@
 
     onclick?.(url)
   }
+
+  function handleClickChild(value: AnyProp) {
+    hovered = false
+    onclick?.(value as string)
+  }
+
+  function handleHover() {
+    highlight = true
+    if (leaveHoverTimeout) {
+      clearTimeout(leaveHoverTimeout)
+    }
+    hovered = true
+  }
+
+  function handleBlur() {
+    highlight = false
+    leaveHoverTimeout = setTimeout(() => {
+      hovered = false
+    }, 200)
+  }
 </script>
 
 <div bind:this={ref} class={cn(wrapperStyles, className)} data-menu-item-root>
   {#if isFolderItem}
     <div
       class={clsx('border-l border-white h-3 w-px absolute top-3.5 left-0 -m-px', {
-        'opacity-0 group-hover/menu-item:opacity-100': !active
+        'opacity-0 group-hover/menu-item:opacity-100': !active && !collapsedSidebar,
+        'opacity-0': collapsedSidebar && !highlight && !active
       })}
       data-menu-item-tree-indicator
     ></div>
   {/if}
-  <div class={rowStyles} data-menu-item-row>
+  <div
+    class={rowStyles}
+    data-menu-item-row
+    use:floatingRef
+    onmouseenter={collapsedSidebar ? handleHover : undefined}
+    onmouseleave={collapsedSidebar ? handleBlur : undefined}
+    role={collapsedSidebar ? 'presentation' : undefined}
+  >
     <button
       onclick={handleClick}
       title={label}
       data-menu-item-button
       class={buttonStyles}
     >
-      <span class="flex items-center space-x-1.5 min-w-0 flex-1" data-menu-item-content>
+      <span
+        class={clsx('flex items-center', {
+          'space-x-1.5 min-w-0 flex-1': !collapsedSidebar
+        })}
+        data-menu-item-content
+      >
         {#if imageUrl}
           <img
             src={imageUrl}
@@ -91,22 +152,24 @@
           <Icon
             src={resolvedIcon}
             theme={iconTheme}
-            class="h-4 w-4 text-icon-inverse"
+            class="{iconStyles} h-4 w-4 text-icon-inverse"
             data-menu-item-icon
           />
         {/if}
-        <span class="truncate tracking-normal" data-menu-item-label>{label}</span>
-        {#if beta}
-          <TagBeta />
+        {#if !collapsedSidebar}
+          <span class="truncate tracking-normal" data-menu-item-label>{label}</span>
+          {#if beta}
+            <TagBeta />
+          {/if}
         {/if}
       </span>
     </button>
-    {#if action}
+    {#if !collapsedSidebar && action}
       <span class="shrink-0" data-menu-item-action>
         {@render action()}
       </span>
     {/if}
-    {#if collapsable}
+    {#if !collapsedSidebar && collapsable}
       <button
         class="shrink-0 cursor-pointer"
         data-menu-item-chevron
@@ -116,13 +179,27 @@
       </button>
     {/if}
   </div>
-  {#if children?.length && (open || !collapsable)}
-    <ul data-menu-item-children>
-      {#each children as child}
-        <li>
-          <MenuItem {...child} isFolderItem {onclick} />
-        </li>
-      {/each}
-    </ul>
+  {#if children?.length}
+    {#if collapsedSidebar}
+      {#if hovered}
+        <div
+          use:floatingContent
+          role="contentinfo"
+          onmouseenter={handleHover}
+          onmouseleave={handleBlur}
+          class="pt-4 z-30"
+        >
+          <DrawerContext autofocus onclick={handleClickChild} {items} />
+        </div>
+      {/if}
+    {:else if open || !collapsable}
+      <ul data-menu-item-children>
+        {#each children as child}
+          <li>
+            <MenuItem {...child} isFolderItem {onclick} />
+          </li>
+        {/each}
+      </ul>
+    {/if}
   {/if}
 </div>

package/dist/ProgressBarCircle.svelte

@@ -4,13 +4,16 @@
   let { progress, size, variant = 'default' }: ProgressBarCircleProps = $props()
 
   let angle = $derived(360 * progress)
-  let filledColor = $derived(
-    variant === 'dark' ? 'var(--color-icon-inverse-bold)' : 'var(--color-icon-selected-default)'
-  )
+  let filledColor = $derived.by(() => {
+    if (variant === 'critical') return 'var(--color-background-critical-inverse)'
+    if (variant === 'warning') return 'var(--color-background-warning-inverse)'
+    if (variant === 'dark') return 'var(--color-icon-inverse-bold)'
+    return 'var(--color-icon-selected-default)'
+  })
   let restColor = $derived(
-    variant === 'dark'
-      ? 'var(--color-background-selected-inverse-hover)'
-      : 'var(--color-background-default-tertiary)'
+    variant === 'default'
+      ? 'var(--color-background-default-tertiary)'
+      : 'var(--color-background-selected-inverse-hover)'
   )
   let background = $derived(
     `conic-gradient(${filledColor} 0deg ${angle}deg, ${restColor} ${angle}deg 360deg)`

package/dist/index.d.ts

@@ -77,6 +77,41 @@ import { TooltipContent } from './tooltip';
 import { TooltipTrigger } from './tooltip';
 import { TooltipProvider } from './tooltip';
 import { TooltipAutoHide } from './tooltip';
+import { Separator } from './separator';
+import { Sheet } from './sheet';
+import { SheetClose } from './sheet';
+import { SheetContent } from './sheet';
+import { SheetDescription } from './sheet';
+import { SheetFooter } from './sheet';
+import { SheetHeader } from './sheet';
+import { SheetOverlay } from './sheet';
+import { SheetPortal } from './sheet';
+import { SheetTitle } from './sheet';
+import { SheetTrigger } from './sheet';
+import { Sidebar } from './sidebar';
+import { SidebarContent } from './sidebar';
+import { SidebarFooter } from './sidebar';
+import { SidebarGroup } from './sidebar';
+import { SidebarGroupAction } from './sidebar';
+import { SidebarGroupContent } from './sidebar';
+import { SidebarGroupLabel } from './sidebar';
+import { SidebarHeader } from './sidebar';
+import { SidebarInput } from './sidebar';
+import { SidebarInset } from './sidebar';
+import { SidebarMenu } from './sidebar';
+import { SidebarMenuAction } from './sidebar';
+import { SidebarMenuBadge } from './sidebar';
+import { SidebarMenuButton } from './sidebar';
+import { SidebarMenuItem } from './sidebar';
+import { SidebarMenuSkeleton } from './sidebar';
+import { SidebarMenuSub } from './sidebar';
+import { SidebarMenuSubButton } from './sidebar';
+import { SidebarMenuSubItem } from './sidebar';
+import { SidebarProvider } from './sidebar';
+import { SidebarRail } from './sidebar';
+import { SidebarSeparator } from './sidebar';
+import { SidebarTrigger } from './sidebar';
+import { useSidebar } from './sidebar';
 import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
@@ -88,4 +123,4 @@ import { FlexRender } from './data-table';
 import { createSvelteTable } from './data-table';
 import { renderComponent } from './data-table';
 import { renderSnippet } from './data-table';
-export { Accordion, AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTableActions, Breadcrumbs, ButtonFile, ButtonSearch, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, DropdownSelectGroup, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, ProgressBarCircle, SeparatorHorizontal, ShortcutWrapper, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList, StatusLabel, AvatarIcon, AvatarStack, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, TooltipProvider, TooltipAutoHide, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };
+export { Accordion, AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTableActions, Breadcrumbs, ButtonFile, ButtonSearch, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, DropdownSelectGroup, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, ProgressBarCircle, SeparatorHorizontal, ShortcutWrapper, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList, StatusLabel, AvatarIcon, AvatarStack, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, TooltipProvider, TooltipAutoHide, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };

package/dist/index.js

@@ -69,6 +69,45 @@ import TitleMain from './TitleMain.svelte'
 import TitleSection from './TitleSection.svelte'
 import { Toaster } from './sonner'
 import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider, TooltipAutoHide } from './tooltip'
+import { Separator } from './separator'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger
+} from './sheet'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar
+} from './sidebar'
 import { resolveIcon, getCountryName, getStatusType } from './helpers.js'
 import { buttonVariants } from './button/button.svelte' // Ensure button styles are included
 import {
@@ -161,6 +200,41 @@ export {
   TooltipTrigger,
   TooltipProvider,
   TooltipAutoHide,
+  Separator,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
   resolveIcon,
   getCountryName,
   getStatusType,

package/dist/separator/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './separator.svelte';
+export { Root, Root as Separator };

package/dist/separator/index.js

@@ -0,0 +1,4 @@
+import Root from './separator.svelte';
+export { Root, 
+//
+Root as Separator };

package/dist/separator/separator.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Separator as SeparatorPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    'data-slot': dataSlot = 'separator',
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props()
+</script>
+
+<SeparatorPrimitive.Root
+  bind:ref
+  data-slot={dataSlot}
+  class={cn(
+    'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:h-full',
+    className
+  )}
+  {...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { Separator as SeparatorPrimitive } from 'bits-ui';
+declare const Separator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/sheet/index.d.ts

@@ -0,0 +1,11 @@
+import Root from './sheet.svelte';
+import Portal from './sheet-portal.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.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 };

package/dist/sheet/index.js

@@ -0,0 +1,13 @@
+import Root from './sheet.svelte';
+import Portal from './sheet-portal.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.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 };

package/dist/sheet/sheet-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+
+  let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props()
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />

package/dist/sheet/sheet-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+declare const SheetClose: import("svelte").Component<SheetPrimitive.TriggerProps, {}, "ref">;
+type SheetClose = ReturnType<typeof SheetClose>;
+export default SheetClose;

package/dist/sheet/sheet-content.svelte

@@ -0,0 +1,65 @@
+<script lang="ts" module>
+  export type Side = 'top' | 'right' | 'bottom' | 'left'
+</script>
+
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+  import { Close } from '@invopop/ui-icons'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { Snippet } from 'svelte'
+  import SheetPortal from './sheet-portal.svelte'
+  import SheetOverlay from './sheet-overlay.svelte'
+  import { cn, type WithoutChildrenOrChild } from '../utils.js'
+  import type { ComponentProps } from 'svelte'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    side = 'right',
+    showCloseButton = true,
+    portalProps,
+    children,
+    ...restProps
+  }: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>
+    side?: Side
+    showCloseButton?: boolean
+    children: Snippet
+  } = $props()
+</script>
+
+<SheetPortal {...portalProps}>
+  <SheetOverlay />
+  <SheetPrimitive.Content
+    bind:ref
+    data-slot="sheet-content"
+    data-side={side}
+    class={cn(
+      'bg-background text-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out',
+      'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t',
+      'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r',
+      'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l',
+      'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b',
+      'data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+      'data-[state=open]:animate-in data-[state=open]:fade-in-0',
+      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+      'data-[side=bottom]:data-[state=open]:slide-in-from-bottom data-[side=bottom]:data-[state=closed]:slide-out-to-bottom',
+      'data-[side=left]:data-[state=open]:slide-in-from-left data-[side=left]:data-[state=closed]:slide-out-to-left',
+      'data-[side=right]:data-[state=open]:slide-in-from-right data-[side=right]:data-[state=closed]:slide-out-to-right',
+      'data-[side=top]:data-[state=open]:slide-in-from-top data-[side=top]:data-[state=closed]:slide-out-to-top',
+      className
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+    {#if showCloseButton}
+      <SheetPrimitive.Close
+        data-slot="sheet-close"
+        class="absolute top-4 right-4 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <Icon src={Close} class="size-4" />
+        <span class="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    {/if}
+  </SheetPrimitive.Content>
+</SheetPortal>