@invopop/popui 0.1.3 → 0.1.4-beta.2

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

@@ -1,63 +1,114 @@
 import { type WithElementRef } from '../utils.js';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import { type VariantProps } from 'tailwind-variants';
+import type { IconSource } from '@steeze-ui/svelte-icon';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
         primary: string;
-        secondary: string;
+        warning: string;
+        danger: string;
+        outline: string;
         ghost: string;
-        link: string;
+        secondary: string;
+        dark: string;
+        'dark-ghost': string;
     };
     size: {
-        default: string;
         sm: string;
+        md: string;
         lg: string;
-        icon: string;
-        'icon-sm': string;
     };
-}, undefined, "ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border", {
+    iconOnly: {
+        true: string;
+        false: string;
+    };
+    hasIcon: {
+        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: {
-        default: string;
-        destructive: string;
-        outline: string;
         primary: string;
-        secondary: string;
+        warning: string;
+        danger: string;
+        outline: string;
         ghost: string;
-        link: string;
+        secondary: string;
+        dark: string;
+        'dark-ghost': string;
     };
     size: {
-        default: string;
         sm: string;
+        md: string;
         lg: string;
-        icon: string;
-        'icon-sm': string;
+    };
+    iconOnly: {
+        true: string;
+        false: string;
+    };
+    hasIcon: {
+        true: string;
+        false: string;
+    };
+    stackedLeft: {
+        true: string;
+        false: string;
+    };
+    stackedRight: {
+        true: string;
+        false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
         primary: string;
-        secondary: string;
+        warning: string;
+        danger: string;
+        outline: string;
         ghost: string;
-        link: string;
+        secondary: string;
+        dark: string;
+        'dark-ghost': string;
     };
     size: {
-        default: string;
         sm: string;
+        md: string;
         lg: string;
-        icon: string;
-        'icon-sm': string;
     };
-}, undefined, "ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border", unknown, unknown, undefined>>;
+    iconOnly: {
+        true: string;
+        false: string;
+    };
+    hasIcon: {
+        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'];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    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/clickOutside.d.ts

@@ -1,4 +1,7 @@
-/** Dispatch event on click outside of node */
-export function clickOutside(node: any): {
+/**
+ * Dispatch event on click outside of node
+ * @param {HTMLElement} node
+ */
+export function clickOutside(node: HTMLElement): {
     destroy(): void;
 };

package/dist/clickOutside.js

@@ -1,8 +1,14 @@
-/** Dispatch event on click outside of node */
+/**
+ * Dispatch event on click outside of node
+ * @param {HTMLElement} node
+ */
 export function clickOutside(node) {
+  /**
+   * @param {MouseEvent} event
+   */
   const handleClick = (event) => {
-    if (node && !node.contains(event.target) && !event.defaultPrevented) {
-      node.dispatchEvent(new CustomEvent('click_outside', node))
+    if (node && !node.contains(/** @type {Node} */ (event.target)) && !event.defaultPrevented) {
+      node.dispatchEvent(new CustomEvent('click_outside'))
     }
   }
 

package/dist/data-table/cells/boolean-cell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { BooleanCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: boolean; config?: BooleanCellConfig } = $props()
+
+  const showWhenTrue = config?.showWhenTrue ?? true
+  const showWhenFalse = config?.showWhenFalse ?? false
+  const shouldShow = value ? showWhenTrue : showWhenFalse
+</script>
+
+{#if shouldShow && config?.icon}
+  <div class="flex justify-center">
+    <Icon src={config.icon} class={config.iconClass ?? 'size-4'} />
+  </div>
+{/if}

package/dist/data-table/cells/boolean-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BooleanCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: boolean;
+    config?: BooleanCellConfig;
+};
+declare const BooleanCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type BooleanCell = ReturnType<typeof BooleanCell>;
+export default BooleanCell;

package/dist/data-table/cells/currency-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../utils.js'
+  import type { CurrencyCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: any; config?: CurrencyCellConfig } = $props()
+</script>
+
+<span class={cn('font-mono text-base text-foreground', config?.className)}>
+  {value}
+</span>

package/dist/data-table/cells/currency-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CurrencyCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: any;
+    config?: CurrencyCellConfig;
+};
+declare const CurrencyCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type CurrencyCell = ReturnType<typeof CurrencyCell>;
+export default CurrencyCell;

package/dist/data-table/cells/date-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../utils.js'
+  import type { DateCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: any; config?: DateCellConfig } = $props()
+</script>
+
+<span class={cn('font-mono text-base text-foreground', config?.className)}>
+  {value}
+</span>

package/dist/data-table/cells/date-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DateCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: any;
+    config?: DateCellConfig;
+};
+declare const DateCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type DateCell = ReturnType<typeof DateCell>;
+export default DateCell;

package/dist/data-table/cells/tag-cell.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import TagStatus from '../../TagStatus.svelte'
+  import type { TagCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: string; config: TagCellConfig } = $props()
+
+  const option = $derived(config.options.find((opt) => opt.value === value))
+</script>
+
+{#if option}
+  <TagStatus label={option.label} status={option.color} dot={config.showDot ?? false} />
+{/if}

package/dist/data-table/cells/tag-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TagCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: string;
+    config: TagCellConfig;
+};
+declare const TagCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type TagCell = ReturnType<typeof TagCell>;
+export default TagCell;

package/dist/data-table/cells/text-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../utils.js'
+  import type { TextCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: any; config?: TextCellConfig } = $props()
+</script>
+
+<div class={cn('truncate', config?.className)}>
+  {value}
+</div>

package/dist/data-table/cells/text-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TextCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: any;
+    config?: TextCellConfig;
+};
+declare const TextCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextCell = ReturnType<typeof TextCell>;
+export default TextCell;

package/dist/data-table/column-definitions.d.ts

@@ -0,0 +1,12 @@
+import type { ColumnDef, Row } from '@tanstack/table-core';
+import type { Snippet } from 'svelte';
+/**
+ * Create the selection column definition for row selection
+ */
+export declare function createSelectionColumn<TData>(): ColumnDef<TData>;
+/**
+ * Create the actions column definition for row actions
+ */
+export declare function createActionsColumn<TData>(rowActionsSnippet: Snippet<[{
+    row: Row<TData>;
+}]>): ColumnDef<TData>;

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

@@ -0,0 +1,42 @@
+import { renderComponent, renderSnippet } from './render-helpers.js';
+import InputCheckbox from '../InputCheckbox.svelte';
+/**
+ * Create the selection column definition for row selection
+ */
+export function createSelectionColumn() {
+    return {
+        id: 'select',
+        header: ({ table }) => renderComponent(InputCheckbox, {
+            checked: table.getIsAllPageRowsSelected(),
+            onchange: (value) => table.toggleAllPageRowsSelected(value),
+            indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
+            'aria-label': 'Select all',
+            onclick: (e) => e.stopPropagation()
+        }),
+        cell: ({ row }) => renderComponent(InputCheckbox, {
+            checked: row.getIsSelected(),
+            onchange: (value) => row.toggleSelected(value),
+            'aria-label': 'Select row',
+            onclick: (e) => e.stopPropagation()
+        }),
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        size: 52,
+        minSize: 52,
+        maxSize: 52
+    };
+}
+/**
+ * Create the actions column definition for row actions
+ */
+export function createActionsColumn(rowActionsSnippet) {
+    return {
+        id: 'actions',
+        cell: ({ row }) => renderSnippet(rowActionsSnippet, { row }),
+        enableResizing: false,
+        size: 56,
+        minSize: 56,
+        maxSize: 56
+    };
+}

package/dist/data-table/column-sizing-helpers.d.ts

@@ -0,0 +1,6 @@
+import type { ColumnSizingState } from '@tanstack/table-core';
+/**
+ * Calculate initial column sizes based on available container width
+ * Scales column sizes proportionally if container is wider than default sizes
+ */
+export declare function calculateColumnSizing(columns: any[], containerWidth: number): ColumnSizingState | null;

package/dist/data-table/column-sizing-helpers.js

@@ -0,0 +1,24 @@
+/**
+ * Calculate initial column sizes based on available container width
+ * Scales column sizes proportionally if container is wider than default sizes
+ */
+export function calculateColumnSizing(columns, containerWidth) {
+    // Collect all column sizes
+    const defaultSizes = {};
+    columns.forEach((col) => {
+        if (col.size) {
+            defaultSizes[col.id] = col.size;
+        }
+    });
+    const totalDefaultSize = Object.values(defaultSizes).reduce((sum, size) => sum + size, 0);
+    // If container is wider than default, scale columns proportionally
+    if (containerWidth > totalDefaultSize && totalDefaultSize > 0) {
+        const scale = containerWidth / totalDefaultSize;
+        const newSizing = {};
+        Object.entries(defaultSizes).forEach(([key, value]) => {
+            newSizing[key] = Math.floor(value * scale);
+        });
+        return newSizing;
+    }
+    return null;
+}

package/dist/data-table/create-columns.d.ts

@@ -0,0 +1,3 @@
+import type { ColumnDef } from '@tanstack/table-core';
+import type { DataTableColumn } from './data-table-types.js';
+export declare function createColumns<TData>(columns: DataTableColumn<TData>[]): ColumnDef<TData>[];

package/dist/data-table/create-columns.js

@@ -0,0 +1,50 @@
+import { renderComponent } from './render-helpers.js';
+import TextCell from './cells/text-cell.svelte';
+import BooleanCell from './cells/boolean-cell.svelte';
+import TagCell from './cells/tag-cell.svelte';
+import DateCell from './cells/date-cell.svelte';
+import CurrencyCell from './cells/currency-cell.svelte';
+export function createColumns(columns) {
+    return columns.map((col) => {
+        const tanstackCol = {
+            id: col.id,
+            accessorKey: col.accessorKey,
+            header: col.header,
+            enableSorting: col.enableSorting ?? true,
+            enableHiding: col.enableHiding ?? true,
+            enableResizing: col.enableResizing ?? true,
+            size: col.size,
+            minSize: col.minSize,
+            maxSize: col.maxSize
+        };
+        // Cell renderer
+        if (col.cell) {
+            // Custom cell renderer
+            tanstackCol.cell = ({ row }) => {
+                const value = col.accessorKey ? row.original[col.accessorKey] : undefined;
+                return col.cell(value, row.original);
+            };
+        }
+        else if (col.cellType) {
+            // Built-in cell renderer based on type
+            tanstackCol.cell = ({ row }) => {
+                const value = col.accessorKey ? row.original[col.accessorKey] : undefined;
+                switch (col.cellType) {
+                    case 'text':
+                        return renderComponent(TextCell, { value: value, config: col.cellConfig });
+                    case 'boolean':
+                        return renderComponent(BooleanCell, { value: value, config: col.cellConfig });
+                    case 'tag':
+                        return renderComponent(TagCell, { value: value, config: col.cellConfig });
+                    case 'date':
+                        return renderComponent(DateCell, { value: value, config: col.cellConfig });
+                    case 'currency':
+                        return renderComponent(CurrencyCell, { value: value, config: col.cellConfig });
+                    default:
+                        return value;
+                }
+            };
+        }
+        return tanstackCol;
+    });
+}

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

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import Button from '../button/button.svelte'
+  import InputSelect from '../InputSelect.svelte'
+  import { ArrowLeft, ArrowRight, ScrollLeft, ScrollRight } from '@invopop/ui-icons'
+  import { cn } from '../utils.js'
+  import type { DataTablePaginationProps } from './data-table-types.js'
+
+  let {
+    table,
+    id,
+    class: className,
+    showRowsPerPage = true,
+    rowsPerPageOptions = [10, 25, 50, 100],
+    itemsLabel = 'items',
+    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}`)
+
+  function handlePageInput(event: Event) {
+    const target = event.target as HTMLInputElement
+    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 = ''
+    }
+  }
+
+  function handlePageBlur(event: Event) {
+    const target = event.target as HTMLInputElement
+    const value = parseInt(target.value)
+    if (isNaN(value) || value < 1) {
+      pageInputValue = `${currentPage}`
+    } else if (value > totalPages) {
+      table.setPageIndex(totalPages - 1)
+      onPageChange?.(totalPages)
+    }
+  }
+
+  function formatNumber(num: number): string {
+    return new Intl.NumberFormat('en-US').format(num)
+  }
+</script>
+
+<div
+  {id}
+  class={cn(
+    'flex items-center justify-between h-11 px-4 py-[5px] bg-background backdrop-blur-[10px]',
+    className
+  )}
+>
+  <div class="flex items-center gap-3">
+    <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1.5">
+        <div class="flex items-center">
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ScrollLeft}
+            onclick={() => {
+              table.setPageIndex(0)
+              onPageChange?.(1)
+            }}
+            disabled={currentPage === 1}
+            class={cn(currentPage === 1 && 'pointer-events-none opacity-30')}
+            aria-label="First page"
+          />
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ArrowLeft}
+            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"
+          />
+        </div>
+        <div class="flex items-center gap-1.5">
+          <input
+            type="number"
+            bind:value={pageInputValue}
+            min="1"
+            max={totalPages}
+            oninput={handlePageInput}
+            onblur={handlePageBlur}
+            class="w-12 h-8 px-2 py-1 text-base tracking-tight rounded-lg border border-border-default-secondary bg-background-default-default backdrop-blur-[2px] caret-foreground-accent text-foreground outline-none focus:ring-0 hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+          />
+          <span class="text-sm text-foreground-default-secondary whitespace-nowrap">
+            / {totalPages}
+          </span>
+        </div>
+        <div class="flex items-center">
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ArrowRight}
+            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"
+          />
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ScrollRight}
+            onclick={() => {
+              table.setPageIndex(totalPages - 1)
+              onPageChange?.(totalPages)
+            }}
+            disabled={currentPage === totalPages}
+            class={cn(currentPage === totalPages && 'pointer-events-none opacity-30')}
+            aria-label="Last page"
+          />
+        </div>
+      </div>
+      {#if showRowsPerPage}
+        <div class="w-[105px]">
+          <InputSelect
+            value={`${rowsPerPage}`}
+            options={rowsPerPageOptions.map((size) => ({
+              value: `${size}`,
+              label: `${size} rows`
+            }))}
+            onchange={(value) => {
+              const size = Number(value)
+              table.setPageSize(size)
+              onPageSizeChange?.(size)
+            }}
+            placeholder="Rows per page"
+            disablePlaceholder={true}
+            aria-label="Rows per page"
+          />
+        </div>
+      {/if}
+    </div>
+    {#if totalItems > 0}
+      <span class="text-sm text-foreground-default-secondary">
+        {formatNumber(totalItems)}
+        {itemsLabel}
+      </span>
+    {/if}
+  </div>
+  <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-pagination.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DataTablePaginationProps } from './data-table-types.js';
+declare const DataTablePagination: import("svelte").Component<DataTablePaginationProps<any>, {}, "">;
+type DataTablePagination = ReturnType<typeof DataTablePagination>;
+export default DataTablePagination;

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

@@ -0,0 +1,40 @@
+import { type RowData, type TableOptions } from "@tanstack/table-core";
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
+type MaybeThunk<T extends object> = T | (() => T | null | undefined);
+type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R] ? H & Intersection<R> : unknown) & {};
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+export declare function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(...sources: Sources): Intersection<{
+    [K in keyof Sources]: Sources[K];
+}>;
+export {};