@urbicon-ui/table 6.1.4

package/dist/cells/NumberCell.svelte

@@ -0,0 +1,225 @@
+<script lang="ts" generics="Item">
+  import { useTableI18n } from '../i18n';
+  import { numberCellVariants, type NumberCellVariantProps } from '../variants';
+
+  const tt = useTableI18n();
+
+  export type NumberCellProps<Item> = {
+    item: Item;
+    valueKey?: keyof Item;
+    value?: number | ((item: Item) => number);
+    format?: 'integer' | 'decimal' | 'currency' | 'percentage' | 'custom';
+    currency?: string;
+    locale?: string;
+    decimals?: number;
+    customFormatter?: (value: number) => string;
+    prefix?: string;
+    suffix?: string;
+    fallback?: string;
+    colorMode?: 'none' | 'positive-negative' | 'threshold';
+    thresholds?: {
+      danger?: number;
+      warning?: number;
+      success?: number;
+    };
+    onClick?: (item: Item, value: number | null) => void;
+    className?: string;
+    testId?: string;
+  } & NumberCellVariantProps;
+
+  // Props with sensible defaults
+  let {
+    item,
+    valueKey = undefined,
+    value = undefined,
+    format = 'decimal',
+    currency = 'EUR',
+    locale = 'de-DE',
+    decimals = 2,
+    customFormatter = undefined,
+    prefix = '',
+    suffix = '',
+    fallback = '—',
+    colorMode = 'none',
+    thresholds = {},
+    onClick = undefined,
+    className = '',
+    testId = undefined,
+    size = 'md',
+    align = 'right',
+    variant = 'default'
+  }: NumberCellProps<Item> = $props();
+
+  // Extract numeric value from item or prop
+  const extractValue = (item: Item): number | null => {
+    if (typeof value === 'function') {
+      return value(item);
+    }
+    if (typeof value === 'number') {
+      return value;
+    }
+    if (valueKey) {
+      const extractedValue = item[valueKey];
+      if (typeof extractedValue === 'number') return extractedValue;
+      if (typeof extractedValue === 'string') {
+        const parsed = parseFloat(extractedValue);
+        return isNaN(parsed) ? null : parsed;
+      }
+    }
+    return null;
+  };
+
+  // Get the numeric value
+  const numericValue = $derived.by(() => extractValue(item));
+
+  // Check if value is clickable
+  const isClickable = $derived(Boolean(onClick && numericValue !== null));
+
+  // Format the number based on options
+  const formatNumber = (num: number | null): string => {
+    if (num === null) return fallback;
+
+    try {
+      // Custom formatter takes precedence
+      if (customFormatter) {
+        return prefix + customFormatter(num) + suffix;
+      }
+
+      let formatted: string;
+
+      switch (format) {
+        case 'integer':
+          formatted = new Intl.NumberFormat(locale, {
+            maximumFractionDigits: 0
+          }).format(num);
+          break;
+
+        case 'decimal':
+          formatted = new Intl.NumberFormat(locale, {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals
+          }).format(num);
+          break;
+
+        case 'currency':
+          formatted = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency: currency,
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals
+          }).format(num);
+          break;
+
+        case 'percentage':
+          formatted = new Intl.NumberFormat(locale, {
+            style: 'percent',
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals
+          }).format(num / 100);
+          break;
+
+        default:
+          formatted = new Intl.NumberFormat(locale).format(num);
+      }
+
+      return prefix + formatted + suffix;
+    } catch (error) {
+      console.warn('NumberCell: Error formatting number', error);
+      return fallback;
+    }
+  };
+
+  // Get formatted number string
+  const formattedNumber = $derived.by(() => formatNumber(numericValue));
+
+  // Determine color variant based on value
+  type NumberVariant = 'default' | 'neutral' | 'positive' | 'negative' | 'currency';
+  const getColorVariant = (num: number | null): NumberVariant => {
+    if (num === null || colorMode === 'none') return variant;
+
+    if (colorMode === 'positive-negative') {
+      if (num > 0) return 'positive';
+      if (num < 0) return 'negative';
+      return 'neutral';
+    }
+
+    if (colorMode === 'threshold' && thresholds) {
+      if (thresholds.danger !== undefined && num <= thresholds.danger) {
+        return 'negative';
+      }
+      if (thresholds.warning !== undefined && num <= thresholds.warning) {
+        return 'neutral';
+      }
+      if (thresholds.success !== undefined && num >= thresholds.success) {
+        return 'positive';
+      }
+    }
+
+    return variant;
+  };
+
+  const colorVariant = $derived.by(() => getColorVariant(numericValue));
+
+  // Generate tooltip with raw value
+  const tooltipText = $derived.by(() => {
+    const num = numericValue;
+    if (num === null) return undefined;
+
+    // Show raw value if different from formatted
+    const raw = num.toString();
+    const formatted = formattedNumber;
+
+    if (raw !== formatted && !formatted.includes(raw)) {
+      return tt('number.valueLabel', { value: raw });
+    }
+
+    return undefined;
+  });
+
+  const tooltipValue = $derived(tooltipText);
+
+  // Generate test ID
+  const computedTestId = $derived.by(() => {
+    if (testId) return testId;
+    if (item && typeof item === 'object' && 'id' in item) {
+      return `number-cell-${item.id}-${String(valueKey)}`;
+    }
+    return undefined;
+  });
+
+  const styles = $derived(numberCellVariants({ size, align, variant: colorVariant }));
+
+  // Event handlers
+  function handleClick(event: MouseEvent) {
+    const num = numericValue;
+    if (onClick && num !== null) {
+      event.stopPropagation();
+      onClick(item, num);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      const num = numericValue;
+      if (onClick && num !== null) {
+        onClick(item, num);
+      }
+    }
+  }
+</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}
+>
+  <span class={styles.number()}>
+    {formattedNumber}
+  </span>
+</div>

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

@@ -0,0 +1,47 @@
+import { type NumberCellVariantProps } from '../variants';
+export type NumberCellProps<Item> = {
+    item: Item;
+    valueKey?: keyof Item;
+    value?: number | ((item: Item) => number);
+    format?: 'integer' | 'decimal' | 'currency' | 'percentage' | 'custom';
+    currency?: string;
+    locale?: string;
+    decimals?: number;
+    customFormatter?: (value: number) => string;
+    prefix?: string;
+    suffix?: string;
+    fallback?: string;
+    colorMode?: 'none' | 'positive-negative' | 'threshold';
+    thresholds?: {
+        danger?: number;
+        warning?: number;
+        success?: number;
+    };
+    onClick?: (item: Item, value: number | null) => void;
+    className?: string;
+    testId?: string;
+} & NumberCellVariantProps;
+declare function $$render<Item>(): {
+    props: NumberCellProps<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 NumberCell: $$IsomorphicComponent;
+type NumberCell<Item> = InstanceType<typeof NumberCell<Item>>;
+export default NumberCell;

package/dist/cells/StatusBadge.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" generics="Item">
+  import { Badge } from '@urbicon-ui/blocks';
+  import type { BadgeProps } from '@urbicon-ui/blocks';
+  import { useTableI18n } from '../i18n';
+  import { customCellVariants, type CustomCellVariantProps } from '../variants';
+
+  const tt = useTableI18n();
+
+  export type StatusConfig = {
+    intent: BadgeProps['intent'];
+    text: string;
+    icon: boolean;
+  };
+
+  export type StatusBadgeProps<Item> = {
+    item: Item;
+    statusKey?: keyof Item;
+    statusMap?: Record<string, StatusConfig>;
+    size?: BadgeProps['size'];
+    /** Visual variant — restricted to label variants. The `dot` arm of Badge forbids children. */
+    variant?: Exclude<BadgeProps['variant'], 'dot'>;
+    onClick?: (item: Item, status: string) => void;
+    className?: string;
+    testId?: string;
+    align?: CustomCellVariantProps['align'];
+    interactive?: boolean;
+  };
+
+  const defaultStatusMap: Record<string, StatusConfig> = $derived({
+    active: { intent: 'success', text: tt('status.active'), icon: true },
+    inactive: { intent: 'danger', text: tt('status.inactive'), icon: true },
+    pending: { intent: 'warning', text: tt('status.pending'), icon: true },
+    online: { intent: 'success', text: tt('status.online'), icon: true },
+    offline: { intent: 'neutral', text: tt('status.offline'), icon: true },
+    processing: { intent: 'primary', text: tt('status.processing'), icon: true },
+    completed: { intent: 'success', text: tt('status.completed'), icon: false },
+    failed: { intent: 'danger', text: tt('status.failed'), icon: false },
+    draft: { intent: 'neutral', text: tt('status.draft'), icon: false },
+    published: { intent: 'success', text: tt('status.published'), icon: true },
+    archived: { intent: 'neutral', text: tt('status.archived'), icon: false }
+  });
+
+  const staticFallbackConfig: StatusConfig = { intent: 'neutral', text: '', icon: false };
+
+  let {
+    item,
+    statusKey = 'status' as keyof Item,
+    statusMap = undefined as Record<string, StatusConfig> | undefined,
+    size = 'sm',
+    variant = 'filled',
+    onClick = undefined,
+    className = '',
+    testId = undefined,
+    align = 'center',
+    interactive = false
+  }: StatusBadgeProps<Item> = $props();
+
+  const mergedStatusMap = $derived({ ...defaultStatusMap, ...statusMap });
+  const statusValue = $derived(String(item[statusKey]) || 'default');
+  const fallbackConfig: StatusConfig = $derived({
+    ...staticFallbackConfig,
+    text: tt('status.unknown')
+  });
+  const config = $derived(mergedStatusMap[statusValue] || fallbackConfig);
+  const isClickable = $derived(Boolean(onClick && !interactive === false));
+
+  const computedTestId = $derived(() => {
+    if (testId) return testId;
+    if (item && typeof item === 'object' && 'id' in item) {
+      return `status-badge-${item.id}`;
+    }
+    return 'status-badge';
+  });
+
+  const containerStyles = $derived(
+    customCellVariants({
+      align,
+      interactive: isClickable,
+      size: 'md'
+    })
+  );
+
+  function handleClick(event: MouseEvent) {
+    if (onClick) {
+      event.stopPropagation();
+      onClick(item, statusValue);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      if (onClick) {
+        onClick(item, statusValue);
+      }
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="{containerStyles.container()} {className}"
+  data-testid={computedTestId()}
+  onclick={handleClick}
+  onkeydown={handleKeyDown}
+  role={isClickable ? 'button' : undefined}
+  tabindex={isClickable ? 0 : undefined}
+  title={`${tt('status.tooltip', { text: config.text })}${isClickable ? ` ${tt('status.clickToChange')}` : ''}`}
+>
+  <div class={containerStyles.content()}>
+    <!-- Badge with max-width and truncation -->
+    <div class="inline-block max-w-32">
+      <Badge {size} {variant} intent={config.intent} class="w-full truncate">
+        {#if config.icon}
+          <div class="mr-1 h-1.5 w-1.5 shrink-0 rounded-full bg-current opacity-75"></div>
+        {/if}
+        <span class="truncate">{config.text}</span>
+      </Badge>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,44 @@
+import type { BadgeProps } from '@urbicon-ui/blocks';
+import { type CustomCellVariantProps } from '../variants';
+export type StatusConfig = {
+    intent: BadgeProps['intent'];
+    text: string;
+    icon: boolean;
+};
+export type StatusBadgeProps<Item> = {
+    item: Item;
+    statusKey?: keyof Item;
+    statusMap?: Record<string, StatusConfig>;
+    size?: BadgeProps['size'];
+    /** Visual variant — restricted to label variants. The `dot` arm of Badge forbids children. */
+    variant?: Exclude<BadgeProps['variant'], 'dot'>;
+    onClick?: (item: Item, status: string) => void;
+    className?: string;
+    testId?: string;
+    align?: CustomCellVariantProps['align'];
+    interactive?: boolean;
+};
+declare function $$render<Item>(): {
+    props: StatusBadgeProps<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 StatusBadge: $$IsomorphicComponent;
+type StatusBadge<Item> = InstanceType<typeof StatusBadge<Item>>;
+export default StatusBadge;

package/dist/cells/UserAvatar.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" generics="Item">
+  // Use our own Avatar component instead of Flowbite
+  import { Avatar } from '@urbicon-ui/blocks';
+  import SearchHighlight from '../features/SearchHighlight.svelte';
+  import { userCellVariants, type UserCellVariantProps } from '../variants';
+
+  export type UserAvatarProps<Item> = {
+    item: Item;
+    nameKey?: keyof Item;
+    emailKey?: keyof Item;
+    avatarKey?: keyof Item;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    layout?: 'horizontal' | 'vertical' | 'compact';
+    showEmail?: boolean;
+    clickable?: boolean;
+    onClick?: (item: Item) => void;
+    mobile?: boolean;
+  } & UserCellVariantProps;
+
+  let {
+    item,
+    nameKey = 'name' as keyof Item,
+    emailKey = 'email' as keyof Item,
+    avatarKey = 'avatar' as keyof Item,
+    size = 'md',
+    layout = 'horizontal',
+    showEmail = true,
+    clickable = false,
+    onClick = undefined,
+    mobile = false
+  }: UserAvatarProps<Item> = $props();
+
+  // Performance-optimized values via $derived
+  const name = $derived.by(() => (item[nameKey] != null ? String(item[nameKey]) : ''));
+  const email = $derived.by(() => (item[emailKey] != null ? String(item[emailKey]) : ''));
+  const avatarUrl = $derived.by(() => (item[avatarKey] != null ? String(item[avatarKey]) : ''));
+
+  const avatarSize = $derived(mobile ? (size === 'lg' ? 'md' : 'sm') : size);
+
+  const styles = $derived(userCellVariants({ layout, size, clickable }));
+
+  function handleClick() {
+    if (clickable && onClick) {
+      onClick(item);
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class={styles.container()}
+  onclick={handleClick}
+  role={clickable ? 'button' : undefined}
+  tabindex={clickable ? 0 : undefined}
+>
+  <div class={styles.avatar()}>
+    <Avatar size={avatarSize} src={avatarUrl} alt={name} {name} variant="circle" />
+  </div>
+
+  <div class={styles.content()}>
+    <div class={styles.name()} title={name}>
+      <SearchHighlight text={name} />
+    </div>
+
+    {#if showEmail && email}
+      <div class={styles.email()} title={email}>
+        <SearchHighlight text={email} />
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,37 @@
+import { type UserCellVariantProps } from '../variants';
+export type UserAvatarProps<Item> = {
+    item: Item;
+    nameKey?: keyof Item;
+    emailKey?: keyof Item;
+    avatarKey?: keyof Item;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    layout?: 'horizontal' | 'vertical' | 'compact';
+    showEmail?: boolean;
+    clickable?: boolean;
+    onClick?: (item: Item) => void;
+    mobile?: boolean;
+} & UserCellVariantProps;
+declare function $$render<Item>(): {
+    props: UserAvatarProps<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 UserAvatar: $$IsomorphicComponent;
+type UserAvatar<Item> = InstanceType<typeof UserAvatar<Item>>;
+export default UserAvatar;

package/dist/cells/index.d.ts

@@ -0,0 +1,8 @@
+export { type ActionButtonsProps, default as ActionButtons, type ExtraAction } from './ActionButtons.svelte';
+export { type CopyButtonProps, default as CopyButton } from './CopyButton.svelte';
+export { type CustomCellProps, default as CustomCell } from './CustomCell.svelte';
+export { type DateCellProps, default as DateCell } from './DateCell.svelte';
+export { default as LinkCell, type LinkCellProps } from './LinkCell.svelte';
+export { default as NumberCell, type NumberCellProps } from './NumberCell.svelte';
+export { default as StatusBadge, type StatusBadgeProps } from './StatusBadge.svelte';
+export { default as UserAvatar, type UserAvatarProps } from './UserAvatar.svelte';

package/dist/cells/index.js

@@ -0,0 +1,9 @@
+// Cell Components
+export { default as ActionButtons } from './ActionButtons.svelte';
+export { default as CopyButton } from './CopyButton.svelte';
+export { default as CustomCell } from './CustomCell.svelte';
+export { default as DateCell } from './DateCell.svelte';
+export { default as LinkCell } from './LinkCell.svelte';
+export { default as NumberCell } from './NumberCell.svelte';
+export { default as StatusBadge } from './StatusBadge.svelte';
+export { default as UserAvatar } from './UserAvatar.svelte';