@invopop/popui 0.1.3-6.beta.1 → 0.1.4-beta.1

package/dist/BaseButton.svelte

@@ -14,6 +14,8 @@
     shortcut = false,
     fullwidth = false,
     notification = false,
+    stackedLeft = false,
+    stackedRight = false,
     children,
     onclick,
     class: className,
@@ -30,6 +32,8 @@
     iconClass,
     type,
     disabled,
+    stackedLeft,
+    stackedRight,
     onclick,
     class: `${fullWidthClass} ${className || ''}`,
     ...rest

package/dist/DropdownSelect.svelte

@@ -7,6 +7,7 @@
   import clsx from 'clsx'
   import TagStatus from './TagStatus.svelte'
   import { resolveIcon } from './helpers.js'
+  import { buttonVariants } from './button/button.svelte'
 
   let {
     value = $bindable(''),
@@ -17,7 +18,10 @@
     multiple = false,
     fullWidth = false,
     widthClass = 'min-w-[160px] max-w-[420px]',
-    onSelect
+    onSelect,
+    stackLeft = false,
+    stackRight = false,
+    multipleLabel = 'items'
   }: DropdownSelectProps = $props()
 
   let selectDropdown: BaseDropdown | undefined = $state()
@@ -39,20 +43,34 @@
 
   let selectedItems = $derived(items.filter((i) => i.selected))
   let selectedColor = $derived(!multiple && items.find((i) => i.selected)?.color)
+  let selectedColors = $derived(
+    multiple ? selectedItems.filter((i) => i.color).map((i) => i.color) : []
+  )
+  let hasMultipleColors = $derived(multiple && selectedColors.length > 0)
   let selectedIcon = $derived(!multiple && items.find((i) => i.selected)?.icon)
   let selectedIconColor = $derived(
     (!multiple && items.find((i) => i.selected)?.iconClass) || 'text-foreground-default-secondary'
   )
   let selectedLabel = $derived(
-    `${selectedItems[0]?.label || ''}${selectedItems.length > 1 && multiple ? ' and more' : ''}` ||
-      placeholder
+    hasMultipleColors && selectedItems.length > 1
+      ? `${selectedItems.length} ${multipleLabel}`
+      : `${selectedItems[0]?.label || ''}${selectedItems.length > 1 && multiple ? ' and more' : ''}` ||
+          placeholder
   )
 
+  let isStacked = $derived(stackLeft || stackRight)
+
   let styles = $derived(
-    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
-    })
+    isStacked
+      ? buttonVariants({
+          variant: 'ghost',
+          stackedLeft: stackLeft,
+          stackedRight: stackRight
+        })
+      : clsx('border backdrop-blur-sm backdrop-filter dropdown-select', {
+          'border-border-selected-bold shadow-active': isOpen,
+          'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
+        })
   )
 
   function handleClick(val: AnyProp) {
@@ -90,13 +108,26 @@
   placement="bottom-start"
   {fullWidth}
   bind:this={selectDropdown}
-  class={fullWidth ? '' : widthClass}
+  class={fullWidth || isStacked ? '' : widthClass}
 >
   {#snippet trigger()}
     <div
-      class="{styles} dropdown-select flex items-center rounded-lg py-1.5 pl-2 pr-[28px] bg-background overflow-hidden w-full h-8"
+      class="{styles} flex items-center rounded-lg py-1.5 pl-2 bg-background overflow-hidden w-full h-7"
+      class:pr-[28px]={!isStacked}
+      class:pr-2={isStacked}
     >
-      {#if selectedColor}
+      {#if hasMultipleColors}
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          <div class="flex items-center -space-x-0.5">
+            {#each selectedColors.slice(0, 3) as color}
+              <span class="border-l border-background rounded-xs flex first:border-l-0">
+                <TagStatus dot status={color} />
+              </span>
+            {/each}
+          </div>
+          {@render label()}
+        </div>
+      {:else if selectedColor}
         <div class="flex items-center gap-1 flex-1 min-w-0">
           <TagStatus dot status={selectedColor} />
           {@render label()}

package/dist/DropdownSelectGroup.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+  }
+
+  let { children }: Props = $props()
+</script>
+
+<div
+  class="flex items-center h-7 rounded-md border border-border-default-secondary divide-x divide-border-default-secondary"
+>
+  {@render children()}
+</div>

package/dist/DropdownSelectGroup.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+}
+declare const DropdownSelectGroup: import("svelte").Component<Props, {}, "">;
+type DropdownSelectGroup = ReturnType<typeof DropdownSelectGroup>;
+export default DropdownSelectGroup;

package/dist/TagStatus.svelte

@@ -19,7 +19,7 @@
       'bg-background-status-void text-foreground-default-secondary': status === 'grey',
       'shadow-avatar text-foreground-default-secondary': status === 'empty',
       'px-1.5': dot,
-      'p-1!': dot && !label,
+      'p-0!': dot && !label,
       'px-1': !dot
     })
   )

package/dist/button/button.svelte

@@ -36,6 +36,14 @@
       hasIcon: {
         true: '',
         false: ''
+      },
+      stackedLeft: {
+        true: '',
+        false: ''
+      },
+      stackedRight: {
+        true: '',
+        false: ''
       }
     },
     compoundVariants: [
@@ -122,13 +130,25 @@
         size: 'lg',
         iconOnly: true,
         class: 'w-8'
+      },
+      {
+        stackedLeft: true,
+        class:
+          '!rounded-l-none hover:!bg-background-default-secondary active:!bg-background-default-secondary'
+      },
+      {
+        stackedRight: true,
+        class:
+          '!rounded-r-none hover:!bg-background-default-secondary active:!bg-background-default-secondary'
       }
     ],
     defaultVariants: {
       variant: 'primary',
       size: 'md',
       iconOnly: false,
-      hasIcon: false
+      hasIcon: false,
+      stackedLeft: false,
+      stackedRight: false
     }
   })
 
@@ -141,6 +161,8 @@
       icon?: IconSource
       iconPosition?: 'left' | 'right'
       iconClass?: string
+      stackedLeft?: boolean
+      stackedRight?: boolean
     }
 </script>
 
@@ -154,6 +176,8 @@
     icon,
     iconPosition = 'left',
     iconClass = '',
+    stackedLeft = false,
+    stackedRight = false,
     ref = $bindable(null),
     href = undefined,
     type = 'button',
@@ -220,7 +244,7 @@
     bind:this={ref}
     data-slot="button"
     class={cn(
-      buttonVariants({ variant, size, iconOnly, hasIcon }),
+      buttonVariants({ variant, size, iconOnly, hasIcon, stackedLeft, stackedRight }),
       iconPosition === 'right' && 'flex-row-reverse',
       paddingClass,
       className
@@ -238,7 +262,7 @@
     bind:this={ref}
     data-slot="button"
     class={cn(
-      buttonVariants({ variant, size, iconOnly, hasIcon }),
+      buttonVariants({ variant, size, iconOnly, hasIcon, stackedLeft, stackedRight }),
       'group',
       iconPosition === 'right' && 'flex-row-reverse',
       paddingClass,

package/dist/button/button.svelte.d.ts

@@ -26,6 +26,14 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    stackedLeft: {
+        true: string;
+        false: string;
+    };
+    stackedRight: {
+        true: string;
+        false: string;
+    };
 }, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-selected focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", {
     variant: {
         primary: string;
@@ -50,6 +58,14 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    stackedLeft: {
+        true: string;
+        false: string;
+    };
+    stackedRight: {
+        true: string;
+        false: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
@@ -74,6 +90,14 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    stackedLeft: {
+        true: string;
+        false: string;
+    };
+    stackedRight: {
+        true: string;
+        false: string;
+    };
 }, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-selected focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
@@ -83,6 +107,8 @@ export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<
     icon?: IconSource;
     iconPosition?: 'left' | 'right';
     iconClass?: string;
+    stackedLeft?: boolean;
+    stackedRight?: boolean;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;

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

@@ -12,13 +12,18 @@
     showRowsPerPage = true,
     rowsPerPageOptions = [10, 25, 50, 100],
     itemsLabel = 'items',
-    children
+    children,
+    selectedSlot,
+    unselectedSlot,
+    onPageChange,
+    onPageSizeChange
   }: DataTablePaginationProps<any> = $props()
 
   let currentPage = $derived(table.getState().pagination.pageIndex + 1)
   let totalPages = $derived(table.getPageCount())
   let totalItems = $derived(table.getFilteredRowModel().rows.length)
   let rowsPerPage = $derived(table.getState().pagination.pageSize)
+  let hasSelection = $derived(Object.keys(table.getState().rowSelection).length > 0)
 
   let pageInputValue = $derived(`${currentPage}`)
 
@@ -27,6 +32,7 @@
     const value = parseInt(target.value)
     if (value >= 1 && value <= totalPages) {
       table.setPageIndex(value - 1)
+      onPageChange?.(value)
     } else if (target.value === '') {
       // Allow empty input temporarily
       pageInputValue = ''
@@ -40,6 +46,7 @@
       pageInputValue = `${currentPage}`
     } else if (value > totalPages) {
       table.setPageIndex(totalPages - 1)
+      onPageChange?.(totalPages)
     }
   }
 
@@ -63,7 +70,10 @@
             variant="ghost"
             size="md"
             icon={ScrollLeft}
-            onclick={() => table.setPageIndex(0)}
+            onclick={() => {
+              table.setPageIndex(0)
+              onPageChange?.(1)
+            }}
             disabled={currentPage === 1}
             class={cn(currentPage === 1 && 'pointer-events-none opacity-30')}
             aria-label="First page"
@@ -72,7 +82,11 @@
             variant="ghost"
             size="md"
             icon={ArrowLeft}
-            onclick={() => table.previousPage()}
+            onclick={() => {
+              const newPage = currentPage - 1
+              table.previousPage()
+              onPageChange?.(newPage)
+            }}
             disabled={currentPage === 1}
             class={cn(currentPage === 1 && 'pointer-events-none opacity-30')}
             aria-label="Previous page"
@@ -97,7 +111,11 @@
             variant="ghost"
             size="md"
             icon={ArrowRight}
-            onclick={() => table.nextPage()}
+            onclick={() => {
+              const newPage = currentPage + 1
+              table.nextPage()
+              onPageChange?.(newPage)
+            }}
             disabled={currentPage === totalPages}
             class={cn(currentPage === totalPages && 'pointer-events-none opacity-30')}
             aria-label="Next page"
@@ -106,7 +124,10 @@
             variant="ghost"
             size="md"
             icon={ScrollRight}
-            onclick={() => table.setPageIndex(totalPages - 1)}
+            onclick={() => {
+              table.setPageIndex(totalPages - 1)
+              onPageChange?.(totalPages)
+            }}
             disabled={currentPage === totalPages}
             class={cn(currentPage === totalPages && 'pointer-events-none opacity-30')}
             aria-label="Last page"
@@ -122,7 +143,9 @@
               label: `${size} rows`
             }))}
             onchange={(value) => {
-              table.setPageSize(Number(value))
+              const size = Number(value)
+              table.setPageSize(size)
+              onPageSizeChange?.(size)
             }}
             placeholder="Rows per page"
             disablePlaceholder={true}
@@ -138,7 +161,13 @@
       </span>
     {/if}
   </div>
-  {#if children}
-    {@render children()}
-  {/if}
+  <div class="flex items-center gap-2">
+    {#if hasSelection && selectedSlot}
+      {@render selectedSlot()}
+    {:else if !hasSelection && unselectedSlot}
+      {@render unselectedSlot()}
+    {:else if children}
+      {@render children()}
+    {/if}
+  </div>
 </div>

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

@@ -54,6 +54,10 @@ export interface DataTableProps<TData> {
     onRowClick?: (row: TData) => void;
     onSelectionChange?: (selectedRows: TData[]) => void;
     filters?: Snippet;
+    paginationSelectedSlot?: Snippet;
+    paginationUnselectedSlot?: Snippet;
+    onPageChange?: (pageIndex: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
 }
 export interface DataTablePaginationProps<T> {
     table: Table<T>;
@@ -63,4 +67,8 @@ export interface DataTablePaginationProps<T> {
     rowsPerPageOptions?: number[];
     itemsLabel?: string;
     children?: Snippet;
+    selectedSlot?: Snippet;
+    unselectedSlot?: Snippet;
+    onPageChange?: (pageIndex: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
 }

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

@@ -42,7 +42,11 @@
     },
     onRowClick,
     onSelectionChange,
-    filters
+    filters,
+    paginationSelectedSlot,
+    paginationUnselectedSlot,
+    onPageChange,
+    onPageSizeChange
   }: DataTableProps<TData> = $props()
 
   const enableSelection = !disableSelection
@@ -214,6 +218,14 @@
                       {/if}
                     {/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"
@@ -224,10 +236,8 @@
                       >
                         <div
                           class={cn(
-                            'absolute right-1.5 top-0 h-full w-0.5 bg-border-default-secondary transition-opacity',
-                            header.column.getIsResizing()
-                              ? 'opacity-0'
-                              : 'opacity-0 group-hover:opacity-100'
+                            '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>
@@ -246,9 +256,14 @@
               >
                 {#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)}
+                    class={getCellClasses(cell, isLastScrollable, isFirstDataColumn)}
                   >
                     {#if cell.column.id === 'actions'}
                       {@render StickyCellWrapper({
@@ -297,7 +312,13 @@
       </div>
     </div>
     {#if enablePagination}
-      <DataTablePagination {table} />
+      <DataTablePagination
+        {table}
+        selectedSlot={paginationSelectedSlot}
+        unselectedSlot={paginationUnselectedSlot}
+        {onPageChange}
+        {onPageSizeChange}
+      />
     {/if}
   </div>
 </div>

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

@@ -14,4 +14,4 @@ export declare function getCellStyle<TData>(cell: Cell<TData, unknown>, isLastSc
 /**
  * Calculate CSS classes for table cells
  */
-export declare function getCellClasses<TData>(cell: Cell<TData, unknown>, isLastScrollable: boolean): string;
+export declare function getCellClasses<TData>(cell: Cell<TData, unknown>, isLastScrollable: boolean, isFirstDataColumn?: boolean): string;

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-white': header.id === 'actions',
-        'sticky left-0 bg-white z-10': header.id === 'select',
+        'sticky right-0 text-right bg-background': header.id === 'actions',
+        'sticky left-0 bg-background z-10': header.id === 'select',
         'w-full': isLastScrollable,
         'hover:!bg-transparent': !header.column.getCanSort()
     });
@@ -39,10 +39,11 @@ export function getCellStyle(cell, isLastScrollable) {
 /**
  * Calculate CSS classes for table cells
  */
-export function getCellClasses(cell, isLastScrollable) {
+export function getCellClasses(cell, isLastScrollable, isFirstDataColumn = false) {
     return clsx('whitespace-nowrap overflow-hidden', {
         'sticky right-0 text-right !p-0': cell.column.id === 'actions',
         'sticky left-0 !p-0 z-10': cell.column.id === 'select',
-        'w-full': isLastScrollable
+        'w-full': isLastScrollable,
+        'font-medium': isFirstDataColumn
     });
 }

package/dist/index.d.ts

@@ -20,6 +20,7 @@ import DrawerContext from './DrawerContext.svelte';
 import DrawerContextItem from './DrawerContextItem.svelte';
 import DrawerContextSeparator from './DrawerContextSeparator.svelte';
 import DropdownSelect from './DropdownSelect.svelte';
+import DropdownSelectGroup from './DropdownSelectGroup.svelte';
 import EmptyState from './EmptyState.svelte';
 import FeedEvents from './FeedEvents.svelte';
 import FeedIconEvent from './FeedIconEvent.svelte';
@@ -81,4 +82,4 @@ import { FlexRender } from './data-table';
 import { createSvelteTable } from './data-table';
 import { renderComponent } from './data-table';
 import { renderSnippet } from './data-table';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, 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, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };
+export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, 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, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };

package/dist/index.js

@@ -20,6 +20,7 @@ import DrawerContext from './DrawerContext.svelte'
 import DrawerContextItem from './DrawerContextItem.svelte'
 import DrawerContextSeparator from './DrawerContextSeparator.svelte'
 import DropdownSelect from './DropdownSelect.svelte'
+import DropdownSelectGroup from './DropdownSelectGroup.svelte'
 import EmptyState from './EmptyState.svelte'
 import FeedEvents from './FeedEvents.svelte'
 import FeedIconEvent from './FeedIconEvent.svelte'
@@ -102,6 +103,7 @@ export {
   DrawerContextItem,
   DrawerContextSeparator,
   DropdownSelect,
+  DropdownSelectGroup,
   EmptyState,
   FeedEvents,
   FeedIconEvent,

package/dist/types.d.ts

@@ -168,6 +168,8 @@ export interface BaseButtonProps {
     shortcut?: boolean;
     fullwidth?: boolean;
     notification?: boolean;
+    stackedLeft?: boolean;
+    stackedRight?: boolean;
     children?: Snippet;
     [key: string]: any;
     onclick?: (event: MouseEvent) => void;
@@ -402,6 +404,9 @@ export interface DropdownSelectProps {
     fullWidth?: boolean;
     widthClass?: string;
     onSelect?: (value: AnyProp) => void;
+    stackLeft?: boolean;
+    stackRight?: boolean;
+    multipleLabel?: string;
 }
 export interface EmptyStateProps {
     icon?: Snippet;

package/package.json

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