@invopop/popui 0.1.4-beta.1 → 0.1.4-beta.10

package/dist/DatePicker.svelte

@@ -3,13 +3,16 @@
   import RangeCalendar from './range-calendar/range-calendar.svelte'
   import { parseDate, type DateValue } from '@internationalized/date'
   import type { DateRange } from 'bits-ui'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import { Calendar } from '@invopop/ui-icons'
+  import { Icon, type IconSource } from '@steeze-ui/svelte-icon'
   import Transition from 'svelte-transition'
   import type { DatePickerProps } from './types'
   import { clickOutside } from './clickOutside'
   import BaseButton from './BaseButton.svelte'
-  import { datesFromToday, toCalendarDate } from './helpers'
+  import { datesFromToday, toCalendarDate, resolveIcon } from './helpers'
+  import { buttonVariants } from './button/button.svelte'
+  import { offset, flip, shift } from 'svelte-floating-ui/dom'
+  import { createFloatingActions } from 'svelte-floating-ui'
+  import { portal } from 'svelte-portal'
 
   const {
     startOfThisWeek,
@@ -109,23 +112,47 @@
 
   let {
     label = 'Date',
-    position = 'left',
+    placement = 'bottom-start',
     from = '',
     to = '',
-    onSelect
+    onSelect,
+    stackLeft = false,
+    stackRight = false,
+    icon = undefined,
+    iconTheme = 'default'
   }: DatePickerProps = $props()
 
+  const [floatingRef, floatingContent] = createFloatingActions({
+    strategy: 'absolute',
+    placement,
+    middleware: [offset(8), flip(), shift()]
+  })
+
+  let resolvedIcon: IconSource | undefined = $state()
+
+  $effect(() => {
+    resolveIcon(icon).then((res) => (resolvedIcon = res))
+  })
+
   let selectedPeriod = $state('custom')
   let value = $state<DateRange>({
     start: undefined,
     end: undefined
   })
   let isOpen = $state(false)
+  let isStacked = $derived(stackLeft || stackRight)
+  let hasSelectedDates = $derived(value.start !== undefined)
   let styles = $derived(
-    clsx({
-      'border-border-selected-bold shadow-active': isOpen,
-      'border-border-secondary hover:border-border-default-secondary-hover': !isOpen
-    })
+    isStacked
+      ? buttonVariants({
+          variant: 'ghost',
+          stackedLeft: stackLeft,
+          stackedRight: stackRight
+        })
+      : clsx('border backdrop-blur-sm backdrop-filter', {
+          'border-border-selected-bold shadow-active': isOpen,
+          'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
+        })
   )
   let selectedLabel = $state(label)
 
@@ -137,9 +164,19 @@
 
   $effect(() => {
     if (from) {
+      const startDate = parseDate(from)
+      const endDate = to ? parseDate(to) : undefined
+
       value = {
-        start: parseDate(from),
-        end: to ? parseDate(to) : undefined
+        start: startDate,
+        end: endDate
+      }
+
+      // Update label directly without calling getLabel() to avoid circular dependency
+      if (startDate === endDate) {
+        selectedLabel = getDisplayFromValue(startDate)
+      } else {
+        selectedLabel = `${getDisplayFromValue(startDate)} → ${getDisplayFromValue(endDate)}`
       }
       return
     }
@@ -183,19 +220,34 @@
 </script>
 
 <div>
-  <div class="relative">
-    <button
-      onclick={() => {
-        isOpen = !isOpen
-      }}
-      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-2 text-left border border-border-default-secondary rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
+  <button
+    use:floatingRef
+    onclick={() => {
+      isOpen = !isOpen
+    }}
+    class="{styles} {isStacked
+      ? 'h-7 py-1.5'
+      : 'py-1.5'} datepicker-trigger flex items-center w-full {resolvedIcon
+      ? 'pl-7'
+      : 'pl-2'} pr-2 text-left rounded-lg bg-background cursor-pointer relative overflow-hidden"
+  >
+    {#if resolvedIcon}
+      <Icon
+        src={resolvedIcon}
+        theme={iconTheme}
+        class="h-4 w-4 absolute top-1.5 left-2 text-foreground-default-secondary"
+      />
+    {/if}
+    <span
+      class="flex-1 text-base truncate {hasSelectedDates
+        ? 'text-foreground'
+        : 'text-foreground-default-secondary'}"
     >
       {selectedLabel}
-    </button>
-    <Icon src={Calendar} class="h-4 w-4 absolute top-2 left-2 text-foreground-default-secondary" />
-  </div>
+    </span>
+  </button>
 
-  <div class="relative">
+  {#if isOpen}
     <Transition
       show={isOpen}
       enter="transition ease-out duration-100"
@@ -207,9 +259,9 @@
     >
       <!-- @ts-ignore -->
       <div
-        class:left-0={position === 'left'}
-        class:right-0={position === 'right'}
-        class="bg-background inline-flex flex-col shadow-lg rounded-xl absolute right-0 top-2 z-40 border border-border"
+        use:portal
+        use:floatingContent
+        class="bg-background inline-flex flex-col shadow-lg rounded-xl absolute z-1001 border border-border"
         use:clickOutside
         onclick_outside={() => {
           if (!isOpen) return
@@ -239,5 +291,5 @@
         </div>
       </div>
     </Transition>
-  </div>
+  {/if}
 </div>

package/dist/DropdownSelect.svelte

@@ -76,10 +76,9 @@
   function handleClick(val: AnyProp) {
     value = val
 
-    onSelect?.(value)
-
     if (multiple) return
 
+    onSelect?.(value)
     selectDropdown?.toggle()
   }
 
@@ -90,6 +89,7 @@
     if (isEqual(value, val)) return
 
     value = val
+    onSelect?.(value)
   }
 </script>
 

package/dist/data-table/column-definitions.js

@@ -10,19 +10,21 @@ export function createSelectionColumn() {
             checked: table.getIsAllPageRowsSelected(),
             onchange: (value) => table.toggleAllPageRowsSelected(value),
             indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
-            'aria-label': 'Select all'
+            'aria-label': 'Select all',
+            onclick: (e) => e.stopPropagation()
         }),
         cell: ({ row }) => renderComponent(InputCheckbox, {
             checked: row.getIsSelected(),
             onchange: (value) => row.toggleSelected(value),
-            'aria-label': 'Select row'
+            'aria-label': 'Select row',
+            onclick: (e) => e.stopPropagation()
         }),
         enableSorting: false,
         enableHiding: false,
         enableResizing: false,
-        size: 40,
-        minSize: 40,
-        maxSize: 40
+        size: 52,
+        minSize: 52,
+        maxSize: 52
     };
 }
 /**
@@ -33,8 +35,8 @@ export function createActionsColumn(rowActionsSnippet) {
         id: 'actions',
         cell: ({ row }) => renderSnippet(rowActionsSnippet, { row }),
         enableResizing: false,
-        size: 44,
-        minSize: 44,
-        maxSize: 44
+        size: 56,
+        minSize: 56,
+        maxSize: 56
     };
 }

package/dist/data-table/data-table-pagination.svelte

@@ -21,7 +21,13 @@
 
   let currentPage = $derived(table.getState().pagination.pageIndex + 1)
   let totalPages = $derived(table.getPageCount())
-  let totalItems = $derived(table.getFilteredRowModel().rows.length)
+  let totalItems = $derived.by(() => {
+    const rowCount = table.getRowCount?.()
+    if (table.options.manualPagination && rowCount !== undefined) {
+      return rowCount
+    }
+    return table.getFilteredRowModel().rows.length
+  })
   let rowsPerPage = $derived(table.getState().pagination.pageSize)
   let hasSelection = $derived(Object.keys(table.getState().rowSelection).length > 0)
 
@@ -145,7 +151,9 @@
             onchange={(value) => {
               const size = Number(value)
               table.setPageSize(size)
+              table.setPageIndex(0)
               onPageSizeChange?.(size)
+              onPageChange?.(1)
             }}
             placeholder="Rows per page"
             disablePlaceholder={true}

package/dist/data-table/data-table-svelte.svelte.js

@@ -53,6 +53,10 @@ export function createSvelteTable(options) {
     }
     updateOptions();
     $effect.pre(() => {
+        // Access data and columns to track them - this reads but doesn't write
+        // so it won't cause infinite loops
+        void options.data;
+        void options.columns;
         updateOptions();
     });
     return table;

package/dist/data-table/data-table-toolbar.svelte

@@ -6,7 +6,7 @@
   let { table, filters }: { table: Table<TData>; filters?: Snippet } = $props()
 </script>
 
-<div class="flex items-center justify-between">
+<div class="flex items-center justify-between px-6 py-4">
   {#if filters}
     <div class="flex-1">
       {@render filters()}

package/dist/data-table/data-table-types.d.ts

@@ -47,6 +47,7 @@ export interface DataTableProps<TData> {
     disableSelection?: boolean;
     disablePagination?: boolean;
     rowActions?: TableAction[];
+    getRowActions?: (row: TData) => TableAction[];
     onRowAction?: (action: AnyProp, row: TData) => void;
     initialPageSize?: number;
     pageSizeOptions?: number[];
@@ -56,8 +57,12 @@ export interface DataTableProps<TData> {
     filters?: Snippet;
     paginationSelectedSlot?: Snippet;
     paginationUnselectedSlot?: Snippet;
+    manualPagination?: boolean;
+    pageCount?: number;
+    rowCount?: number;
     onPageChange?: (pageIndex: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
+    onSortingChange?: (columnId: string, direction: 'asc' | 'desc') => void;
 }
 export interface DataTablePaginationProps<T> {
     table: Table<T>;

package/dist/data-table/data-table.svelte

@@ -33,6 +33,7 @@
     disableSelection = false,
     disablePagination = false,
     rowActions = [],
+    getRowActions,
     onRowAction,
     initialPageSize = 10,
     emptyState = {
@@ -45,8 +46,12 @@
     filters,
     paginationSelectedSlot,
     paginationUnselectedSlot,
+    manualPagination = false,
+    pageCount,
+    rowCount,
     onPageChange,
-    onPageSizeChange
+    onPageSizeChange,
+    onSortingChange
   }: DataTableProps<TData> = $props()
 
   const enableSelection = !disableSelection
@@ -70,7 +75,7 @@
 
   // Build TanStack columns from config
   const columns = $derived.by(() =>
-    buildColumns<TData>(columnConfig, enableSelection, RowActions, rowActions.length > 0)
+    buildColumns<TData>(columnConfig, enableSelection, RowActions, getRowActions !== undefined || rowActions.length > 0)
   )
 
   // Calculate initial column sizes based on available width
@@ -95,14 +100,13 @@
   })
 
   const table = setupTable({
-    get data() {
-      return data
-    },
-    get columns() {
-      return columns
-    },
+    getData: () => data,
+    getColumns: () => columns,
     enableSelection,
     enablePagination,
+    manualPagination,
+    pageCount,
+    getRowCount: () => rowCount,
     getRowSelection: () => rowSelection,
     getColumnVisibility: () => columnVisibility,
     getSorting: () => sorting,
@@ -129,8 +133,8 @@
 })}
   <div
     class={cn(
-      'h-10 flex items-center px-3 relative group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected',
-      align === 'right' ? 'justify-end' : ''
+      'h-10 flex items-center relative group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected',
+      align === 'right' ? 'justify-end pl-3 pr-6' : 'pl-6 pr-3'
     )}
   >
     <div class="relative z-10">
@@ -141,7 +145,7 @@
 
 {#snippet RowActions({ row }: { row: Row<TData> })}
   <BaseTableActions
-    actions={rowActions}
+    actions={getRowActions ? getRowActions(row.original) : rowActions}
     onclick={(action) => {
       if (onRowAction) {
         onRowAction(action, row.original)
@@ -180,7 +184,12 @@
         <BaseTableHeaderOrderBy
           sortDirection={column.getIsSorted() === 'asc' ? 'asc' : 'desc'}
           isActive={column.getIsSorted() !== false}
-          onOrderBy={(direction) => column.toggleSorting(direction === 'desc')}
+          onOrderBy={(direction) => {
+            column.toggleSorting(direction === 'desc')
+            if (onSortingChange) {
+              onSortingChange(column.id, direction)
+            }
+          }}
           onHide={() => column.toggleVisibility(false)}
         />
       </BaseDropdown>
@@ -188,128 +197,126 @@
   {/if}
 {/snippet}
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col h-full">
   <DataTableToolbar {table} {filters} />
-  <div class="flex flex-col gap-[5px]">
-    <div bind:this={containerRef} class="relative bg-background">
-      <div class="overflow-x-auto relative z-10">
-        <Table.Root>
-          <Table.Header>
-            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-              <Table.Row class="hover:!bg-transparent border-b border-border">
-                {#each headerGroup.headers as header, index (header.id)}
-                  {@const isLastScrollable = index === headerGroup.headers.length - 2}
-                  <Table.Head
-                    colspan={header.colSpan}
-                    style={getHeaderStyle(header, isLastScrollable)}
-                    class={getHeaderClasses(header, isLastScrollable)}
-                  >
-                    {#if !header.isPlaceholder}
-                      {#if typeof header.column.columnDef.header === 'string'}
-                        {@render ColumnHeader({
-                          column: header.column as Column<TData>,
-                          title: header.column.columnDef.header as string
-                        })}
-                      {:else}
-                        <FlexRender
-                          content={header.column.columnDef.header}
-                          context={header.getContext()}
-                        />
-                      {/if}
+  <div class="flex-1 overflow-hidden flex flex-col">
+    <div bind:this={containerRef} class="relative bg-background flex-1 overflow-auto">
+      <Table.Root>
+        <Table.Header>
+          {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+            <Table.Row class="hover:!bg-transparent border-b border-border">
+              {#each headerGroup.headers as header, index (header.id)}
+                {@const isLastScrollable = index === headerGroup.headers.length - 2}
+                <Table.Head
+                  colspan={header.colSpan}
+                  style={getHeaderStyle(header, isLastScrollable)}
+                  class={getHeaderClasses(header, isLastScrollable)}
+                >
+                  {#if !header.isPlaceholder}
+                    {#if typeof header.column.columnDef.header === 'string'}
+                      {@render ColumnHeader({
+                        column: header.column as Column<TData>,
+                        title: header.column.columnDef.header as string
+                      })}
+                    {:else}
+                      <FlexRender
+                        content={header.column.columnDef.header}
+                        context={header.getContext()}
+                      />
                     {/if}
-                    {#if header.column.getCanResize()}
-                      <!-- Always visible vertical border -->
+                  {/if}
+                  {#if header.column.getCanResize()}
+                    <!-- Always visible vertical border -->
+                    <div
+                      class={cn(
+                        'absolute right-0 top-1/2 -translate-y-1/2 h-3 w-px bg-background-default-tertiary',
+                        header.column.getIsResizing() && 'opacity-0'
+                      )}
+                    ></div>
+                    <!-- Resize handler (larger interactive area, enhanced on hover) -->
+                    <div
+                      role="button"
+                      tabindex="0"
+                      aria-label="Resize column"
+                      class="absolute right-0 top-0 h-full w-3 cursor-col-resize select-none touch-none group -mr-1.5"
+                      onmousedown={header.getResizeHandler()}
+                      ontouchstart={header.getResizeHandler()}
+                    >
                       <div
                         class={cn(
-                          'absolute right-0 top-1/2 -translate-y-1/2 h-3 w-px bg-background-default-tertiary',
-                          header.column.getIsResizing() && 'opacity-0'
+                          'absolute right-1.5 top-0 h-full w-0.5 bg-border-default-secondary transition-opacity opacity-0',
+                          !header.column.getIsResizing() && 'group-hover:opacity-100'
                         )}
                       ></div>
-                      <!-- Resize handler (larger interactive area, enhanced on hover) -->
-                      <div
-                        role="button"
-                        tabindex="0"
-                        aria-label="Resize column"
-                        class="absolute right-0 top-0 h-full w-3 cursor-col-resize select-none touch-none group -mr-1.5"
-                        onmousedown={header.getResizeHandler()}
-                        ontouchstart={header.getResizeHandler()}
-                      >
-                        <div
-                          class={cn(
-                            'absolute right-1.5 top-0 h-full w-0.5 bg-border-default-secondary transition-opacity opacity-0',
-                            !header.column.getIsResizing() && 'group-hover:opacity-100'
-                          )}
-                        ></div>
-                      </div>
-                    {/if}
-                  </Table.Head>
-                {/each}
-              </Table.Row>
-            {/each}
-          </Table.Header>
-          <Table.Body>
-            {#each table.getRowModel().rows as row (row.id)}
-              <Table.Row
-                data-state={row.getIsSelected() ? 'selected' : undefined}
-                class="border-b border-border"
-                onclick={() => onRowClick?.(row.original as TData)}
-              >
-                {#each row.getVisibleCells() as cell, index (cell.id)}
-                  {@const isLastScrollable = index === row.getVisibleCells().length - 2}
-                  {@const visibleCells = row.getVisibleCells()}
-                  {@const firstDataColumnIndex = visibleCells.findIndex(
-                    (c) => c.column.id !== 'select' && c.column.id !== 'actions'
-                  )}
-                  {@const isFirstDataColumn = index === firstDataColumnIndex}
-                  <Table.Cell
-                    style={getCellStyle(cell, isLastScrollable)}
-                    class={getCellClasses(cell, isLastScrollable, isFirstDataColumn)}
-                  >
-                    {#if cell.column.id === 'actions'}
-                      {@render StickyCellWrapper({
-                        align: 'right',
-                        children: CellContent
-                      })}
-                      {#snippet CellContent()}
-                        <FlexRender
-                          content={cell.column.columnDef.cell}
-                          context={cell.getContext()}
-                        />
-                      {/snippet}
-                    {:else if cell.column.id === 'select'}
-                      {@render StickyCellWrapper({
-                        align: 'left',
-                        children: CellContent
-                      })}
-                      {#snippet CellContent()}
-                        <FlexRender
-                          content={cell.column.columnDef.cell}
-                          context={cell.getContext()}
-                        />
-                      {/snippet}
-                    {:else}
+                    </div>
+                  {/if}
+                </Table.Head>
+              {/each}
+            </Table.Row>
+          {/each}
+        </Table.Header>
+        <Table.Body>
+          {#each table.getRowModel().rows as row (row.id)}
+            <Table.Row
+              data-state={row.getIsSelected() ? 'selected' : undefined}
+              class="border-b border-border"
+              onclick={() => onRowClick?.(row.original as TData)}
+            >
+              {#each row.getVisibleCells() as cell, index (cell.id)}
+                {@const isLastScrollable = index === row.getVisibleCells().length - 2}
+                {@const visibleCells = row.getVisibleCells()}
+                {@const firstDataColumnIndex = visibleCells.findIndex(
+                  (c) => c.column.id !== 'select' && c.column.id !== 'actions'
+                )}
+                {@const isFirstDataColumn = index === firstDataColumnIndex}
+                <Table.Cell
+                  style={getCellStyle(cell, isLastScrollable)}
+                  class={getCellClasses(cell, isLastScrollable, isFirstDataColumn)}
+                >
+                  {#if cell.column.id === 'actions'}
+                    {@render StickyCellWrapper({
+                      align: 'right',
+                      children: CellContent
+                    })}
+                    {#snippet CellContent()}
                       <FlexRender
                         content={cell.column.columnDef.cell}
                         context={cell.getContext()}
                       />
-                    {/if}
-                  </Table.Cell>
-                {/each}
-              </Table.Row>
-            {:else}
-              <Table.Row>
-                <Table.Cell colspan={columns.length} class="h-48">
-                  <EmptyState
-                    iconSource={emptyState.iconSource}
-                    title={emptyState.title}
-                    description={emptyState.description}
-                  />
+                    {/snippet}
+                  {:else if cell.column.id === 'select'}
+                    {@render StickyCellWrapper({
+                      align: 'left',
+                      children: CellContent
+                    })}
+                    {#snippet CellContent()}
+                      <FlexRender
+                        content={cell.column.columnDef.cell}
+                        context={cell.getContext()}
+                      />
+                    {/snippet}
+                  {:else}
+                    <FlexRender
+                      content={cell.column.columnDef.cell}
+                      context={cell.getContext()}
+                    />
+                  {/if}
                 </Table.Cell>
-              </Table.Row>
-            {/each}
-          </Table.Body>
-        </Table.Root>
-      </div>
+              {/each}
+            </Table.Row>
+          {:else}
+            <Table.Row class="hover:!bg-transparent">
+              <Table.Cell colspan={columns.length} class="h-48">
+                <EmptyState
+                  iconSource={emptyState.iconSource}
+                  title={emptyState.title}
+                  description={emptyState.description}
+                />
+              </Table.Cell>
+            </Table.Row>
+          {/each}
+        </Table.Body>
+      </Table.Root>
     </div>
     {#if enablePagination}
       <DataTablePagination

package/dist/data-table/table-setup.d.ts

@@ -11,6 +11,11 @@ export declare function buildColumns<TData>(columnConfig: DataTableColumn<TData>
 interface TableSetupOptions<TData> {
     enableSelection: boolean;
     enablePagination: boolean;
+    manualPagination?: boolean;
+    pageCount?: number;
+    getRowCount?: () => number | undefined;
+    getData?: () => TData[];
+    getColumns?: () => any[];
     getRowSelection: () => RowSelectionState;
     getColumnVisibility: () => VisibilityState;
     getSorting: () => SortingState;
@@ -29,8 +34,5 @@ interface TableSetupOptions<TData> {
 /**
  * Create the TanStack table instance with all configuration
  */
-export declare function setupTable<TData>(options: TableSetupOptions<TData> & {
-    data?: TData[];
-    columns?: any[];
-}): import("@tanstack/table-core").Table<unknown>;
+export declare function setupTable<TData>(options: TableSetupOptions<TData>): import("@tanstack/table-core").Table<unknown>;
 export {};

package/dist/data-table/table-setup.js

@@ -55,6 +55,12 @@ export function setupTable(options) {
                 return options.getColumnOrder();
             }
         },
+        get data() {
+            return options.getData?.() ?? [];
+        },
+        get columns() {
+            return options.getColumns?.() ?? [];
+        },
         enableRowSelection: options.enableSelection,
         enableColumnResizing: true,
         columnResizeMode: 'onChange',
@@ -116,15 +122,22 @@ export function setupTable(options) {
             }
         },
         getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: options.enablePagination ? getPaginationRowModel() : undefined,
-        getSortedRowModel: getSortedRowModel()
+        getPaginationRowModel: options.enablePagination && !options.manualPagination ? getPaginationRowModel() : undefined,
+        getSortedRowModel: getSortedRowModel(),
+        // Manual pagination configuration
+        manualPagination: options.manualPagination,
+        get pageCount() {
+            // Calculate pageCount from rowCount and current pageSize
+            const rowCount = options.getRowCount?.();
+            if (rowCount !== undefined) {
+                const pageSize = options.getPagination().pageSize;
+                return Math.ceil(rowCount / pageSize);
+            }
+            return options.pageCount ?? -1;
+        },
+        get rowCount() {
+            return options.getRowCount?.();
+        }
     };
-    // Add data and columns as getters if provided
-    if (options.data !== undefined) {
-        tableOptions.data = options.data;
-    }
-    if (options.columns !== undefined) {
-        tableOptions.columns = options.columns;
-    }
     return createSvelteTable(tableOptions);
 }

package/dist/data-table/table-styles.js

@@ -17,8 +17,8 @@ export function getHeaderStyle(header, isLastScrollable) {
  */
 export function getHeaderClasses(header, isLastScrollable) {
     return clsx('relative whitespace-nowrap overflow-hidden', {
-        'sticky right-0 text-right bg-background': header.id === 'actions',
-        'sticky left-0 bg-background z-10': header.id === 'select',
+        'sticky right-0 text-right bg-background pl-3 pr-6': header.id === 'actions',
+        'sticky left-0 bg-background z-10 pl-6 pr-3': header.id === 'select',
         'w-full': isLastScrollable,
         'hover:!bg-transparent': !header.column.getCanSort()
     });

package/dist/table/table-header.svelte

@@ -15,7 +15,7 @@
 <thead
   bind:this={ref}
   data-slot="table-header"
-  class={cn('[&_tr]:border-b [&_tr]:border-border bg-background', className)}
+  class={cn('sticky top-0 z-20 [&_tr]:border-b [&_tr]:border-border bg-background', className)}
   onclick={bubble('click')}
   onkeydown={bubble('keydown')}
 >

package/dist/types.d.ts

@@ -368,13 +368,17 @@ export interface DataListItemProps {
 }
 export interface DatePickerProps {
     label?: string;
-    position?: 'left' | 'right';
+    placement?: Placement;
     from?: string;
     to?: string;
     onSelect?: (date: {
         from: string;
         to: string;
     }) => void;
+    stackLeft?: boolean;
+    stackRight?: boolean;
+    icon?: IconSource | string;
+    iconTheme?: IconTheme;
 }
 export interface DrawerContextProps {
     items?: DrawerOption[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.4-beta.1",
+  "version": "0.1.4-beta.10",
   "repository": {
     "url":  "https://github.com/invopop/popui"
   },