@urbicon-ui/table 6.1.4

package/dist/cells/CustomCell.svelte

@@ -0,0 +1,136 @@
+<script lang="ts" generics="Item">
+  import type { Component, Snippet } from 'svelte';
+  import { useTableI18n } from '../i18n';
+  import { customCellVariants, type CustomCellVariantProps } from '../variants';
+
+  const tt = useTableI18n();
+
+  export type CustomCellProps<Item> = {
+    item: Item;
+    content?: (item: Item) => string;
+    component?: Component<Record<string, unknown>>;
+    componentProps?: Record<string, unknown>;
+    children?: Snippet<[item: Item]>;
+    class?: string;
+    style?: string;
+    align?: CustomCellVariantProps['align'];
+    wrap?: CustomCellVariantProps['wrap'];
+    truncate?: CustomCellVariantProps['truncate'];
+    interactive?: CustomCellVariantProps['interactive'];
+    size?: CustomCellVariantProps['size'];
+    onClick?: (item: Item) => void;
+    onDoubleClick?: (item: Item) => void;
+    title?: string | ((item: Item) => string);
+    testId?: string;
+  };
+
+  let {
+    item,
+    content = undefined,
+    component = undefined,
+    componentProps = {},
+    class: className = '',
+    style = '',
+    align = 'left',
+    wrap = false,
+    truncate = true,
+    interactive = false,
+    size = 'md',
+    onClick = undefined,
+    onDoubleClick = undefined,
+    title = undefined,
+    testId = undefined,
+    children = undefined
+  }: CustomCellProps<Item> = $props();
+
+  // Compute dynamic properties
+  const isClickable = $derived(Boolean(onClick || onDoubleClick || interactive));
+
+  const computedTitle = $derived.by(() => {
+    if (typeof title === 'function') {
+      return title(item);
+    }
+    return title;
+  });
+
+  const computedTestId = $derived.by(() => {
+    if (testId) return testId;
+    if (item && typeof item === 'object' && 'id' in item) {
+      return `custom-cell-${item.id}`;
+    }
+    return 'custom-cell';
+  });
+
+  // Tailwind-Variants styling
+  const styles = $derived(
+    customCellVariants({
+      align,
+      wrap,
+      truncate,
+      interactive: isClickable,
+      size
+    })
+  );
+
+  // Event handlers
+  function handleClick(event: MouseEvent) {
+    if (onClick) {
+      event.stopPropagation();
+      onClick(item);
+    }
+  }
+
+  function handleDoubleClick(event: MouseEvent) {
+    if (onDoubleClick) {
+      event.stopPropagation();
+      onDoubleClick(item);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      if (onClick) {
+        onClick(item);
+      }
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="{styles.container()} {className}"
+  {style}
+  title={computedTitle}
+  data-testid={computedTestId}
+  onclick={handleClick}
+  ondblclick={handleDoubleClick}
+  onkeydown={handleKeyDown}
+  role={isClickable ? 'button' : undefined}
+  tabindex={isClickable ? 0 : undefined}
+  aria-label={isClickable ? tt('aria.interactiveCell') : undefined}
+>
+  <div class={styles.content()}>
+    {#if component}
+      <!-- Svelte Component Rendering -->
+      {@const Component = component}
+      <Component {item} {...componentProps} />
+    {:else if content}
+      <!-- HTML Content Function — consumers opt into this API explicitly
+           and are responsible for sanitising the output; the `content`
+           callback is their authoring surface. -->
+      <div class={styles.text()}>
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html content(item)}
+      </div>
+    {:else if children}
+      <!-- Snippet-based Content -->
+      {@render children(item)}
+    {:else}
+      <!-- Default fallback content -->
+      <span class={styles.fallback()}>
+        {JSON.stringify(item)}
+      </span>
+    {/if}
+  </div>
+</div>

package/dist/cells/CustomCell.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { Component, Snippet } from 'svelte';
+import { type CustomCellVariantProps } from '../variants';
+export type CustomCellProps<Item> = {
+    item: Item;
+    content?: (item: Item) => string;
+    component?: Component<Record<string, unknown>>;
+    componentProps?: Record<string, unknown>;
+    children?: Snippet<[item: Item]>;
+    class?: string;
+    style?: string;
+    align?: CustomCellVariantProps['align'];
+    wrap?: CustomCellVariantProps['wrap'];
+    truncate?: CustomCellVariantProps['truncate'];
+    interactive?: CustomCellVariantProps['interactive'];
+    size?: CustomCellVariantProps['size'];
+    onClick?: (item: Item) => void;
+    onDoubleClick?: (item: Item) => void;
+    title?: string | ((item: Item) => string);
+    testId?: string;
+};
+declare function $$render<Item>(): {
+    props: CustomCellProps<Item>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CustomCell: $$IsomorphicComponent;
+type CustomCell<Item> = InstanceType<typeof CustomCell<Item>>;
+export default CustomCell;

package/dist/cells/DateCell.svelte

@@ -0,0 +1,194 @@
+<script lang="ts" generics="Item">
+  import { dateCellVariants, type DateCellVariantProps } from '../variants';
+
+  export type DateCellProps<Item> = {
+    item: Item;
+    dateKey?: keyof Item;
+    format?: 'short' | 'medium' | 'long' | 'relative' | 'datetime';
+    customFormat?: (date: Date) => string;
+    locale?: string;
+    showTime?: boolean;
+    timezone?: string;
+    fallback?: string;
+    onClick?: (item: Item, date: Date | null) => void;
+    className?: string;
+    testId?: string;
+    size?: DateCellVariantProps['size'];
+  };
+
+  let {
+    item,
+    dateKey = undefined,
+    format = 'medium',
+    customFormat = undefined,
+    locale = undefined as string | undefined,
+    showTime = false,
+    timezone = undefined,
+    fallback = '—',
+    onClick = undefined,
+    className = '',
+    testId = undefined,
+    size = 'md'
+  }: DateCellProps<Item> = $props();
+
+  // Extract date value from item
+  const extractDate = (item: Item, key?: keyof Item): Date | null => {
+    if (!key) return null;
+
+    const value = item[key];
+    if (!value) return null;
+
+    if (value instanceof Date) return value;
+    if (typeof value === 'string' || typeof value === 'number') {
+      const parsed = new Date(value);
+      return isNaN(parsed.getTime()) ? null : parsed;
+    }
+
+    return null;
+  };
+
+  // Get the date value
+  const dateValue = $derived.by(() => extractDate(item, dateKey));
+
+  // Check if date is clickable
+  const isClickable = $derived(Boolean(onClick && dateValue));
+
+  // Format the date based on options
+  const formatDate = (date: Date | null): string => {
+    if (!date) return fallback;
+
+    try {
+      // Custom formatter takes precedence
+      if (customFormat) {
+        return customFormat(date);
+      }
+
+      // Built-in format options
+      const options: Intl.DateTimeFormatOptions = {};
+
+      switch (format) {
+        case 'short':
+          options.dateStyle = 'short';
+          break;
+        case 'medium':
+          options.dateStyle = 'medium';
+          break;
+        case 'long':
+          options.dateStyle = 'long';
+          break;
+        case 'relative':
+          return formatRelativeDate(date);
+        default:
+          options.dateStyle = 'medium';
+      }
+
+      if (showTime) {
+        options.timeStyle = 'short';
+      }
+
+      if (timezone) {
+        options.timeZone = timezone;
+      }
+
+      return new Intl.DateTimeFormat(locale, options).format(date);
+    } catch (error) {
+      console.warn('DateCell: Error formatting date', error);
+      return fallback;
+    }
+  };
+
+  const formatRelativeDate = (date: Date): string => {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffMinutes = Math.floor(diffMs / (1000 * 60));
+
+    if (Math.abs(diffDays) > 7) {
+      return new Intl.DateTimeFormat(locale, { dateStyle: 'short' }).format(date);
+    }
+
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+
+    if (diffMs < 0) {
+      const futureDays = Math.abs(diffDays);
+      const futureHours = Math.abs(diffHours);
+      const futureMinutes = Math.abs(diffMinutes);
+
+      if (futureDays > 0) return rtf.format(futureDays, 'day');
+      if (futureHours > 0) return rtf.format(futureHours, 'hour');
+      if (futureMinutes > 0) return rtf.format(futureMinutes, 'minute');
+      return rtf.format(0, 'second');
+    }
+
+    if (diffDays >= 1) return rtf.format(-diffDays, 'day');
+    if (diffHours >= 1) return rtf.format(-diffHours, 'hour');
+    if (diffMinutes >= 1) return rtf.format(-diffMinutes, 'minute');
+    return rtf.format(0, 'second');
+  };
+
+  // Get formatted date string
+  const formattedDate = $derived.by(() => formatDate(dateValue));
+
+  // Generate tooltip with full date info
+  const tooltipText = $derived.by(() => {
+    const date = dateValue;
+    if (!date) return undefined;
+
+    const fullFormat = new Intl.DateTimeFormat(locale, {
+      dateStyle: 'full',
+      timeStyle: 'medium',
+      timeZone: timezone
+    }).format(date);
+
+    return fullFormat;
+  });
+
+  const tooltipValue = $derived(tooltipText);
+
+  // Generate test ID
+  const computedTestId = $derived.by(() => {
+    if (testId) return testId;
+    if (item && typeof item === 'object' && 'id' in item) {
+      return `date-cell-${item.id}-${String(dateKey)}`;
+    }
+    return undefined;
+  });
+
+  // TV Styles
+  const styles = $derived(dateCellVariants({ interactive: isClickable, size, format }));
+
+  // Event handlers
+  function handleClick(event: MouseEvent) {
+    const date = dateValue;
+    if (onClick && date) {
+      event.stopPropagation();
+      onClick(item, date);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      const date = dateValue;
+      if (onClick && date) {
+        onClick(item, date);
+      }
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="{styles.container()} {className}"
+  title={tooltipValue}
+  data-testid={computedTestId}
+  onclick={handleClick}
+  onkeydown={handleKeyDown}
+  role={isClickable ? 'button' : undefined}
+  tabindex={isClickable ? 0 : undefined}
+>
+  <time datetime={dateValue?.toISOString()} class={styles.date()}>
+    {formattedDate}
+  </time>
+</div>

package/dist/cells/DateCell.svelte.d.ts

@@ -0,0 +1,39 @@
+import { type DateCellVariantProps } from '../variants';
+export type DateCellProps<Item> = {
+    item: Item;
+    dateKey?: keyof Item;
+    format?: 'short' | 'medium' | 'long' | 'relative' | 'datetime';
+    customFormat?: (date: Date) => string;
+    locale?: string;
+    showTime?: boolean;
+    timezone?: string;
+    fallback?: string;
+    onClick?: (item: Item, date: Date | null) => void;
+    className?: string;
+    testId?: string;
+    size?: DateCellVariantProps['size'];
+};
+declare function $$render<Item>(): {
+    props: DateCellProps<Item>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DateCell: $$IsomorphicComponent;
+type DateCell<Item> = InstanceType<typeof DateCell<Item>>;
+export default DateCell;

package/dist/cells/LinkCell.svelte

@@ -0,0 +1,240 @@
+<script lang="ts" generics="Item">
+  import { useTableI18n } from '../i18n';
+  import { linkCellVariants, type LinkCellVariantProps } from '../variants';
+
+  const tt = useTableI18n();
+
+  export type LinkCellProps<Item> = {
+    item: Item;
+    href?: string | ((item: Item) => string);
+    urlKey?: keyof Item;
+    text?: string | ((item: Item) => string);
+    textKey?: keyof Item;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    external?: boolean;
+    download?: boolean | string;
+    rel?: string;
+    onClick?: (item: Item, event: MouseEvent) => void;
+    fallback?: string;
+    maxLength?: number;
+    showIcon?: boolean;
+    className?: string;
+    testId?: string;
+  } & LinkCellVariantProps;
+
+  // Props with sensible defaults
+  let {
+    item,
+    href = undefined,
+    urlKey = undefined,
+    text = undefined,
+    textKey = undefined,
+    target = '_self',
+    external = false,
+    download = false,
+    rel = undefined,
+    onClick = undefined,
+    fallback = '—',
+    maxLength = undefined,
+    showIcon = true,
+    className = '',
+    testId = undefined,
+    size = 'md',
+    variant = 'default',
+    disabled = false
+  }: LinkCellProps<Item> = $props();
+
+  // Extract URL from item or prop
+  const extractUrl = (item: Item): string | null => {
+    if (typeof href === 'function') {
+      return href(item);
+    }
+    if (typeof href === 'string') {
+      return href;
+    }
+    if (urlKey) {
+      const value = item[urlKey];
+      return typeof value === 'string' ? value : null;
+    }
+    return null;
+  };
+
+  // Extract display text from item or prop
+  const extractText = (item: Item): string => {
+    if (typeof text === 'function') {
+      return text(item);
+    }
+    if (typeof text === 'string') {
+      return text;
+    }
+    if (textKey) {
+      const value = item[textKey];
+      if (typeof value === 'string') return value;
+    }
+
+    // Fallback to URL if no text specified
+    const url = extractUrl(item);
+    if (url) {
+      try {
+        const urlObj = new URL(url);
+        return urlObj.hostname + urlObj.pathname;
+      } catch {
+        return url;
+      }
+    }
+
+    return fallback;
+  };
+
+  // Get computed values
+  const computedHref = $derived(() => extractUrl(item));
+  const computedText = $derived(() => extractText(item));
+
+  // Determine if link is valid
+  const isValidLink = $derived(() => {
+    const url = computedHref();
+    return url && url.trim().length > 0;
+  });
+
+  // Determine if link should open externally
+  const isExternal = $derived(() => {
+    if (external) return true;
+    if (target === '_blank') return true;
+
+    const url = computedHref();
+    if (!url) return false;
+
+    try {
+      const urlObj = new URL(url);
+      return urlObj.origin !== window.location.origin;
+    } catch {
+      return false;
+    }
+  });
+
+  // Compute rel attribute
+  const computedRel = $derived(() => {
+    if (rel) return rel;
+    if (isExternal()) return 'noopener noreferrer';
+    return undefined;
+  });
+
+  // Truncate text if maxLength is specified
+  const displayText = $derived.by(() => {
+    const text = computedText();
+    if (!maxLength || text.length <= maxLength) {
+      return text;
+    }
+    return text.substring(0, maxLength - 3) + '...';
+  });
+
+  // Generate tooltip
+  const tooltipText = $derived.by(() => {
+    const url = computedHref();
+    const text = computedText();
+
+    if (!url) return undefined;
+
+    if (maxLength && text.length > maxLength) {
+      return `${text}\n${url}`;
+    }
+
+    if (text !== url) {
+      return url;
+    }
+
+    return undefined;
+  });
+
+  const tooltipValue = $derived(tooltipText);
+
+  // Generate test ID
+  const computedTestId = $derived(() => {
+    if (testId) return testId;
+    if (item && typeof item === 'object' && 'id' in item) {
+      return `link-cell-${item.id}`;
+    }
+    return undefined;
+  });
+
+  // Determine variant based on state
+  const linkVariant = $derived.by(() => {
+    if (!isValidLink()) return 'default'; // Will be overridden by disabled state in template
+    if (isExternal()) return 'external';
+    return variant;
+  });
+
+  const styles = $derived(
+    linkCellVariants({ size, variant: linkVariant, disabled: !isValidLink() || disabled })
+  );
+
+  // Event handlers
+  function handleClick(event: MouseEvent) {
+    if (onClick) {
+      onClick(item, event);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      const linkElement = event.target as HTMLAnchorElement;
+      linkElement.click();
+    }
+  }
+</script>
+
+{#if isValidLink()}
+  <div class={styles.container()}>
+    <!-- `href` is consumer-provided at runtime; `resolve()` only applies to
+         internal SvelteKit routes and would false-positive on any external
+         (mailto:/tel:/http) link the consumer configures. -->
+    <!-- eslint-disable svelte/no-navigation-without-resolve -->
+    <a
+      href={computedHref()}
+      {target}
+      rel={computedRel()}
+      download={download === true ? true : download || undefined}
+      class="{styles.link()} {className}"
+      title={tooltipValue}
+      data-testid={computedTestId}
+      onclick={handleClick}
+      onkeydown={handleKeyDown}
+    >
+      <span class={styles.text()}>
+        {displayText}
+      </span>
+
+      {#if showIcon && isExternal()}
+        <svg
+          class={styles.icon()}
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M7 17L17 7" />
+          <path d="M7 7h10v10" />
+        </svg>
+      {/if}
+    </a>
+    <!-- eslint-enable svelte/no-navigation-without-resolve -->
+  </div>
+{:else}
+  <div class={styles.container()}>
+    <span
+      class="{styles.link()} {className}"
+      title={tt('table.link.invalid')}
+      data-testid={computedTestId}
+    >
+      <span class={styles.text()}>
+        {displayText}
+      </span>
+    </span>
+  </div>
+{/if}

package/dist/cells/LinkCell.svelte.d.ts

@@ -0,0 +1,42 @@
+import { type LinkCellVariantProps } from '../variants';
+export type LinkCellProps<Item> = {
+    item: Item;
+    href?: string | ((item: Item) => string);
+    urlKey?: keyof Item;
+    text?: string | ((item: Item) => string);
+    textKey?: keyof Item;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    external?: boolean;
+    download?: boolean | string;
+    rel?: string;
+    onClick?: (item: Item, event: MouseEvent) => void;
+    fallback?: string;
+    maxLength?: number;
+    showIcon?: boolean;
+    className?: string;
+    testId?: string;
+} & LinkCellVariantProps;
+declare function $$render<Item>(): {
+    props: LinkCellProps<Item>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LinkCell: $$IsomorphicComponent;
+type LinkCell<Item> = InstanceType<typeof LinkCell<Item>>;
+export default LinkCell;