@invopop/popui 0.1.97 → 0.1.98

package/dist/CounterWidget.svelte

@@ -2,6 +2,7 @@
   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'
 
@@ -25,9 +26,25 @@
     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>
 
-{#if collapsed}
+{#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}"

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

@@ -46,7 +46,7 @@
       'pl-2': !collapsedSidebar && !imageUrl,
       'pl-[10px]': !collapsedSidebar && imageUrl,
       'gap-1.5': !collapsedSidebar && (action || collapsable),
-      'size-8 p-[7px] justify-center': collapsedSidebar,
+      'size-8 p-[7px] justify-center mx-auto': collapsedSidebar,
       'bg-background-selected-inverse': active,
       'hover:bg-background-selected-inverse': !active
     })

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>

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

@@ -0,0 +1,15 @@
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import SheetPortal from './sheet-portal.svelte';
+import { type WithoutChildrenOrChild } from '../utils.js';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+    side?: Side;
+    showCloseButton?: boolean;
+    children: Snippet;
+};
+declare const SheetContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SheetContent = ReturnType<typeof SheetContent>;
+export default SheetContent;

package/dist/sheet/sheet-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.DescriptionProps = $props()
+</script>
+
+<SheetPrimitive.Description
+  bind:ref
+  data-slot="sheet-description"
+  class={cn('text-foreground-secondary text-sm', className)}
+  {...restProps}
+/>

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

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

package/dist/sheet/sheet-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../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="sheet-footer"
+  class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

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

package/dist/sheet/sheet-header.svelte

@@ -0,0 +1,20 @@
+<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<HTMLDivElement>> = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sheet-header"
+  class={cn('flex flex-col gap-1.5 p-4', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

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

package/dist/sheet/sheet-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.OverlayProps = $props()
+</script>
+
+<SheetPrimitive.Overlay
+  bind:ref
+  data-slot="sheet-overlay"
+  class={cn(
+    'fixed inset-0 z-50 bg-black/10 supports-[backdrop-filter]:backdrop-blur-xs',
+    className
+  )}
+  {...restProps}
+/>

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

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

package/dist/sheet/sheet-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+
+  let { ...restProps }: SheetPrimitive.PortalProps = $props()
+</script>
+
+<SheetPrimitive.Portal {...restProps} />

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

@@ -0,0 +1,3 @@
+declare const SheetPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type SheetPortal = ReturnType<typeof SheetPortal>;
+export default SheetPortal;

package/dist/sheet/sheet-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.TitleProps = $props()
+</script>
+
+<SheetPrimitive.Title
+  bind:ref
+  data-slot="sheet-title"
+  class={cn('text-foreground font-medium', className)}
+  {...restProps}
+/>

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

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

package/dist/sheet/sheet-trigger.svelte

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

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

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

package/dist/sheet/sheet.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+
+  let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props()
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />

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

@@ -0,0 +1,3 @@
+declare const Sheet: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/sidebar/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export declare const SIDEBAR_WIDTH_STORAGE_KEY = "sidebar_width";
+export declare const SIDEBAR_COOKIE_MAX_AGE: number;
+export declare const SIDEBAR_WIDTH = "16rem";
+export declare const SIDEBAR_WIDTH_MOBILE = "18rem";
+export declare const SIDEBAR_WIDTH_ICON = "3rem";
+export declare const SIDEBAR_KEYBOARD_SHORTCUT = ".";
+export declare const SIDEBAR_MIN_WIDTH_PX = 240;
+export declare const SIDEBAR_MAX_WIDTH_PX = 384;
+export declare const SIDEBAR_DRAG_THRESHOLD_PX = 4;

package/dist/sidebar/constants.js

@@ -0,0 +1,10 @@
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+export const SIDEBAR_WIDTH_STORAGE_KEY = 'sidebar_width';
+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 = '.';
+export const SIDEBAR_MIN_WIDTH_PX = 240;
+export const SIDEBAR_MAX_WIDTH_PX = 384;
+export const SIDEBAR_DRAG_THRESHOLD_PX = 4;

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

@@ -0,0 +1,23 @@
+type Getter<T> = () => T;
+export type SidebarStateProps = {
+    open: Getter<boolean>;
+    setOpen: (open: boolean) => void;
+};
+declare class SidebarState {
+    #private;
+    readonly props: SidebarStateProps;
+    open: boolean;
+    openMobile: boolean;
+    width: string;
+    setOpen: SidebarStateProps['setOpen'];
+    state: string;
+    constructor(props: SidebarStateProps);
+    get isMobile(): boolean;
+    setWidth: (px: number) => void;
+    handleShortcutKeydown: (e: KeyboardEvent) => void;
+    setOpenMobile: (value: boolean) => void;
+    toggle: () => boolean | void;
+}
+export declare function setSidebar(props: SidebarStateProps): SidebarState;
+export declare function useSidebar(): SidebarState;
+export {};

package/dist/sidebar/context.svelte.js

@@ -0,0 +1,58 @@
+import { getContext, setContext } from 'svelte';
+import { SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_MAX_WIDTH_PX, SIDEBAR_MIN_WIDTH_PX, SIDEBAR_WIDTH, SIDEBAR_WIDTH_STORAGE_KEY } from './constants.js';
+import { IsMobile } from './is-mobile.svelte.js';
+class SidebarState {
+    props;
+    open = $derived.by(() => this.props.open());
+    openMobile = $state(false);
+    width = $state(SIDEBAR_WIDTH);
+    setOpen;
+    #isMobile;
+    state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
+    constructor(props) {
+        this.setOpen = props.setOpen;
+        this.#isMobile = new IsMobile();
+        this.props = props;
+        if (typeof localStorage !== 'undefined') {
+            const stored = localStorage.getItem(SIDEBAR_WIDTH_STORAGE_KEY);
+            if (stored)
+                this.width = stored;
+        }
+    }
+    get isMobile() {
+        return this.#isMobile.current;
+    }
+    setWidth = (px) => {
+        const clamped = Math.max(SIDEBAR_MIN_WIDTH_PX, Math.min(SIDEBAR_MAX_WIDTH_PX, px));
+        this.width = `${clamped}px`;
+        if (typeof localStorage !== 'undefined') {
+            try {
+                localStorage.setItem(SIDEBAR_WIDTH_STORAGE_KEY, this.width);
+            }
+            catch {
+                // ignore quota / private-mode errors
+            }
+        }
+    };
+    handleShortcutKeydown = (e) => {
+        if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+    setOpenMobile = (value) => {
+        this.openMobile = value;
+    };
+    toggle = () => {
+        return this.#isMobile.current
+            ? (this.openMobile = !this.openMobile)
+            : this.setOpen(!this.open);
+    };
+}
+const SYMBOL_KEY = 'scn-sidebar';
+export function setSidebar(props) {
+    return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+export function useSidebar() {
+    return getContext(Symbol.for(SYMBOL_KEY));
+}