@happyvertical/smrt-ui 0.30.0

package/dist/components/data/types.d.ts

@@ -0,0 +1,104 @@
+/**
+ * DataTable types
+ */
+import type { Snippet } from 'svelte';
+/**
+ * Column definition for DataTable
+ */
+export interface DataTableColumn<T> {
+    /** Unique column identifier */
+    id: string;
+    /** Column header label */
+    label: string;
+    /** Property key to access from row data (supports dot notation) */
+    accessor?: keyof T | string;
+    /** Custom cell renderer */
+    cell?: Snippet<[{
+        row: T;
+        value: unknown;
+        index: number;
+    }]>;
+    /** Custom header renderer */
+    header?: Snippet<[{
+        column: DataTableColumn<T>;
+    }]>;
+    /** Whether column is sortable */
+    sortable?: boolean;
+    /** Column width (CSS value) */
+    width?: string;
+    /** Minimum width (CSS value) */
+    minWidth?: string;
+    /** Maximum width (CSS value) */
+    maxWidth?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Whether column is hidden */
+    hidden?: boolean;
+    /** Custom sort function */
+    sortFn?: (a: T, b: T, direction: SortDirection) => number;
+    /** Column class name */
+    className?: string;
+}
+/**
+ * Sort direction
+ */
+export type SortDirection = 'asc' | 'desc' | null;
+/**
+ * Sort state
+ */
+export interface SortState {
+    columnId: string | null;
+    direction: SortDirection;
+}
+/**
+ * DataTable props
+ */
+export interface DataTableProps<T> {
+    /** Data rows */
+    data: T[];
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Unique key accessor for rows */
+    rowKey?: keyof T | ((row: T) => string | number);
+    /** Enable row selection */
+    selectable?: boolean;
+    /** Selected row keys */
+    selected?: Set<string | number>;
+    /** Selection change callback */
+    onSelectionChange?: (selected: Set<string | number>) => void;
+    /** Row click callback */
+    onRowClick?: (row: T, index: number) => void;
+    /** Enable sorting */
+    sortable?: boolean;
+    /** Current sort state */
+    sort?: SortState;
+    /** Sort change callback */
+    onSortChange?: (sort: SortState) => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Empty state content */
+    empty?: Snippet;
+    /** Custom row class function */
+    rowClass?: (row: T, index: number) => string;
+    /** Table size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Enable striped rows */
+    striped?: boolean;
+    /** Enable hover highlight */
+    hoverable?: boolean;
+    /** Enable sticky header */
+    stickyHeader?: boolean;
+    /** Table caption for accessibility */
+    caption?: string;
+    /** Dense mode (reduced padding) */
+    dense?: boolean;
+}
+/**
+ * Get nested value from object using dot notation
+ */
+export declare function getNestedValue<T>(obj: T, path: string): unknown;
+/**
+ * Default sort function for basic types
+ */
+export declare function defaultSort<T>(a: T, b: T, accessor: string, direction: SortDirection): number;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/data/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/data/types.ts"],"names":[],"mappings":"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"}

package/dist/components/data/types.js

@@ -0,0 +1,45 @@
+/**
+ * DataTable types
+ */
+/**
+ * Get nested value from object using dot notation
+ */
+export function getNestedValue(obj, path) {
+    return path.split('.').reduce((acc, part) => {
+        if (acc && typeof acc === 'object' && part in acc) {
+            return acc[part];
+        }
+        return undefined;
+    }, obj);
+}
+/**
+ * Default sort function for basic types
+ */
+export function defaultSort(a, b, accessor, direction) {
+    if (!direction)
+        return 0;
+    const aVal = getNestedValue(a, accessor);
+    const bVal = getNestedValue(b, accessor);
+    // Handle nullish values
+    if (aVal == null && bVal == null)
+        return 0;
+    if (aVal == null)
+        return direction === 'asc' ? 1 : -1;
+    if (bVal == null)
+        return direction === 'asc' ? -1 : 1;
+    // Compare values
+    let comparison = 0;
+    if (typeof aVal === 'string' && typeof bVal === 'string') {
+        comparison = aVal.localeCompare(bVal);
+    }
+    else if (typeof aVal === 'number' && typeof bVal === 'number') {
+        comparison = aVal - bVal;
+    }
+    else if (aVal instanceof Date && bVal instanceof Date) {
+        comparison = aVal.getTime() - bVal.getTime();
+    }
+    else {
+        comparison = String(aVal).localeCompare(String(bVal));
+    }
+    return direction === 'asc' ? comparison : -comparison;
+}

package/dist/components/display/ConfidenceBadge.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+/**
+ * ConfidenceBadge - Displays AI confidence level indicator
+ *
+ * Shows a visual indicator for confidence scores (0-100).
+ * Useful for OCR results, AI predictions, etc.
+ *
+ * Accessibility: Uses role="meter" with aria-valuenow for screen readers
+ */
+
+/** Props for ConfidenceBadge component */
+export interface Props {
+  /** Confidence value (0-100) */
+  confidence: number;
+  /** Show percentage value */
+  showPercent?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Optional CSS class */
+  class?: string;
+  /** Accessible label */
+  'aria-label'?: string;
+}
+
+const {
+  confidence,
+  showPercent = true,
+  size = 'md',
+  class: className = '',
+  'aria-label': ariaLabel,
+}: Props = $props();
+
+// Clamp confidence to valid range
+const clampedConfidence = $derived(Math.max(0, Math.min(100, confidence)));
+
+// Determine level based on confidence
+const level = $derived.by(() => {
+  if (clampedConfidence >= 80) return 'high';
+  if (clampedConfidence >= 50) return 'medium';
+  return 'low';
+});
+
+// Color scheme based on level - uses CSS variables with fallbacks
+const colors = $derived.by(() => {
+  switch (level) {
+    case 'high':
+      return {
+        bg: 'var(--smrt-color-primary-container, #dcfce7)',
+        text: 'var(--smrt-color-on-primary-container, #166534)',
+        bar: 'var(--smrt-color-primary, #22c55e)',
+      };
+    case 'medium':
+      return {
+        bg: 'var(--smrt-color-secondary-container, #fef3c7)',
+        text: 'var(--smrt-color-on-secondary-container, #92400e)',
+        bar: 'var(--smrt-color-secondary, #f59e0b)',
+      };
+    case 'low':
+      return {
+        bg: 'var(--smrt-color-error-container, #fee2e2)',
+        text: 'var(--smrt-color-on-error-container, #dc2626)',
+        bar: 'var(--smrt-color-error, #ef4444)',
+      };
+  }
+});
+
+// Format percentage
+const percentText = $derived(`${Math.round(clampedConfidence)}%`);
+
+// Accessible label
+const defaultLabel = $derived(`Confidence: ${Math.round(clampedConfidence)}%`);
+
+// Human-readable value text for screen readers
+const valueText = $derived(
+  `${level} confidence (${Math.round(clampedConfidence)}%)`,
+);
+</script>
+
+<span
+  class="confidence-badge {className}"
+  class:sm={size === 'sm'}
+  class:lg={size === 'lg'}
+  style:--badge-bg={colors.bg}
+  style:--badge-text={colors.text}
+  style:--bar-color={colors.bar}
+  role="meter"
+  aria-valuenow={clampedConfidence}
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-valuetext={valueText}
+  aria-label={ariaLabel ?? defaultLabel}
+>
+  <span class="confidence-bar" style:width="{clampedConfidence}%"></span>
+  {#if showPercent}
+    <span class="confidence-value" aria-hidden="true">{percentText}</span>
+  {/if}
+</span>
+
+<style>
+  .confidence-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    border-radius: var(--smrt-radius-sm, 4px);
+    background-color: var(--badge-bg);
+    color: var(--badge-text);
+    position: relative;
+    overflow: hidden;
+    min-width: 60px;
+  }
+
+  .confidence-badge.sm {
+    padding: 0.125rem 0.375rem;
+    font-size: var(--smrt-typography-label-small-size, 0.625rem);
+    min-width: 48px;
+  }
+
+  .confidence-badge.lg {
+    padding: 0.375rem 0.75rem;
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+    min-width: 80px;
+  }
+
+  .confidence-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background-color: var(--bar-color);
+    opacity: 0.3;
+    transition: width var(--smrt-duration-short4, 300ms) var(--smrt-easing-standard, ease);
+  }
+
+  .confidence-value {
+    position: relative;
+    z-index: 1;
+    font-variant-numeric: tabular-nums;
+  }
+</style>

package/dist/components/display/ConfidenceBadge.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ConfidenceBadge - Displays AI confidence level indicator
+ *
+ * Shows a visual indicator for confidence scores (0-100).
+ * Useful for OCR results, AI predictions, etc.
+ *
+ * Accessibility: Uses role="meter" with aria-valuenow for screen readers
+ */
+/** Props for ConfidenceBadge component */
+export interface Props {
+    /** Confidence value (0-100) */
+    confidence: number;
+    /** Show percentage value */
+    showPercent?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Optional CSS class */
+    class?: string;
+    /** Accessible label */
+    'aria-label'?: string;
+}
+declare const ConfidenceBadge: import("svelte").Component<Props, {}, "">;
+type ConfidenceBadge = ReturnType<typeof ConfidenceBadge>;
+export default ConfidenceBadge;
+//# sourceMappingURL=ConfidenceBadge.svelte.d.ts.map

package/dist/components/display/ConfidenceBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfidenceBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/ConfidenceBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AAEH,0CAA0C;AAC1C,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqED,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/display/CurrencyDisplay.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+/**
+ * CurrencyDisplay - Formats and displays monetary values
+ *
+ * Displays formatted currency with configurable unit.
+ * Use `unit="cents"` (default) when amount is in cents, or `unit="dollars"` for dollar values.
+ * Supports CAD/USD with appropriate symbols and locale formatting.
+ */
+
+/** Props for CurrencyDisplay component */
+export interface Props {
+  /** Amount value */
+  amount: number;
+  /** Currency code */
+  currency?: 'CAD' | 'USD';
+  /** Whether amount is in cents or dollars (default: cents) */
+  unit?: 'cents' | 'dollars';
+  /** Show +/- sign for non-zero values */
+  showSign?: boolean;
+  /** Display size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Highlight negative values in red */
+  highlightNegative?: boolean;
+  /** Highlight positive values in green */
+  highlightPositive?: boolean;
+  /** Optional CSS class */
+  class?: string;
+}
+
+const {
+  amount,
+  currency = 'CAD',
+  unit = 'cents',
+  showSign = false,
+  size = 'md',
+  highlightNegative = false,
+  highlightPositive = false,
+  class: className = '',
+}: Props = $props();
+
+// Format amount using Intl.NumberFormat
+const formatted = $derived.by(() => {
+  const dollars = unit === 'cents' ? amount / 100 : amount;
+  const absValue = Math.abs(dollars);
+
+  const formatter = new Intl.NumberFormat('en-CA', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+
+  let display = formatter.format(absValue);
+
+  // Add sign if requested
+  if (showSign && amount !== 0) {
+    const sign = amount > 0 ? '+' : '-';
+    display = sign + display;
+  } else if (amount < 0) {
+    display = `-${display}`;
+  }
+
+  return display;
+});
+
+// Determine color class
+const colorClass = $derived.by(() => {
+  if (highlightNegative && amount < 0) return 'negative';
+  if (highlightPositive && amount > 0) return 'positive';
+  return '';
+});
+</script>
+
+<span
+  class="currency-display {className}"
+  class:sm={size === 'sm'}
+  class:lg={size === 'lg'}
+  class:negative={colorClass === 'negative'}
+  class:positive={colorClass === 'positive'}
+>
+  {formatted}
+</span>
+
+<style>
+  .currency-display {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .currency-display.sm {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  .currency-display.lg {
+    font-size: var(--smrt-typography-title-large-size, 1.25rem);
+    font-weight: var(--smrt-typography-title-large-weight, 600);
+  }
+
+  .currency-display.negative {
+    color: var(--smrt-color-error, #dc2626);
+  }
+
+  .currency-display.positive {
+    color: var(--smrt-color-tertiary, #16a34a);
+  }
+</style>

package/dist/components/display/CurrencyDisplay.svelte.d.ts

@@ -0,0 +1,30 @@
+/**
+ * CurrencyDisplay - Formats and displays monetary values
+ *
+ * Displays formatted currency with configurable unit.
+ * Use `unit="cents"` (default) when amount is in cents, or `unit="dollars"` for dollar values.
+ * Supports CAD/USD with appropriate symbols and locale formatting.
+ */
+/** Props for CurrencyDisplay component */
+export interface Props {
+    /** Amount value */
+    amount: number;
+    /** Currency code */
+    currency?: 'CAD' | 'USD';
+    /** Whether amount is in cents or dollars (default: cents) */
+    unit?: 'cents' | 'dollars';
+    /** Show +/- sign for non-zero values */
+    showSign?: boolean;
+    /** Display size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Highlight negative values in red */
+    highlightNegative?: boolean;
+    /** Highlight positive values in green */
+    highlightPositive?: boolean;
+    /** Optional CSS class */
+    class?: string;
+}
+declare const CurrencyDisplay: import("svelte").Component<Props, {}, "">;
+type CurrencyDisplay = ReturnType<typeof CurrencyDisplay>;
+export default CurrencyDisplay;
+//# sourceMappingURL=CurrencyDisplay.svelte.d.ts.map

package/dist/components/display/CurrencyDisplay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrencyDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/CurrencyDisplay.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AAEH,0CAA0C;AAC1C,MAAM,WAAW,KAAK;IACpB,mBAAmB;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwDD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/display/DateDisplay.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+/**
+ * DateDisplay - Formats and displays dates
+ *
+ * Supports various format options and relative time display.
+ */
+
+/** Props for DateDisplay component */
+export interface Props {
+  /** Date to display (Date, ISO string, or timestamp) */
+  date: Date | string | number | null | undefined;
+  /** Display format */
+  format?: 'short' | 'medium' | 'long' | 'relative';
+  /** Fallback text when date is null/undefined */
+  fallback?: string;
+  /** Show time along with date */
+  showTime?: boolean;
+  /** Locale for formatting (defaults to en-CA) */
+  locale?: string;
+  /** Optional CSS class */
+  class?: string;
+}
+
+const {
+  date,
+  format = 'medium',
+  fallback = 'N/A',
+  showTime = false,
+  locale = 'en-CA',
+  class: className = '',
+}: Props = $props();
+
+// Parse the date
+const parsedDate = $derived.by(() => {
+  if (date === null || date === undefined) return null;
+  if (date instanceof Date) return date;
+  const d = new Date(date);
+  return Number.isNaN(d.getTime()) ? null : d;
+});
+
+// Format options for Intl.DateTimeFormat
+const dateOptions: Record<string, Intl.DateTimeFormatOptions> = {
+  short: { month: 'short', day: 'numeric' },
+  medium: { year: 'numeric', month: 'short', day: 'numeric' },
+  long: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
+};
+
+// Format relative time
+function formatRelative(d: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHours = Math.floor(diffMin / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  const diffWeeks = Math.floor(diffDays / 7);
+  const diffMonths = Math.floor(diffDays / 30);
+  const diffYears = Math.floor(diffDays / 365);
+
+  // Future dates
+  if (diffMs < 0) {
+    const absDiffDays = Math.abs(diffDays);
+    if (absDiffDays === 0) return 'today';
+    if (absDiffDays === 1) return 'tomorrow';
+    if (absDiffDays < 7) return `in ${absDiffDays} days`;
+    if (absDiffDays < 30) return `in ${Math.abs(diffWeeks)} weeks`;
+    if (absDiffDays < 365) return `in ${Math.abs(diffMonths)} months`;
+    return `in ${Math.abs(diffYears)} years`;
+  }
+
+  // Past dates
+  if (diffSec < 60) return 'just now';
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays === 1) return 'yesterday';
+  if (diffDays < 7) return `${diffDays} days ago`;
+  if (diffWeeks < 4) return `${diffWeeks} weeks ago`;
+  if (diffMonths < 12) return `${diffMonths} months ago`;
+  return `${diffYears} years ago`;
+}
+
+// Format the date
+const formatted = $derived.by(() => {
+  if (!parsedDate) return fallback;
+
+  if (format === 'relative') {
+    return formatRelative(parsedDate);
+  }
+
+  const options = { ...dateOptions[format] };
+  if (showTime) {
+    options.hour = 'numeric';
+    options.minute = '2-digit';
+  }
+
+  return new Intl.DateTimeFormat(locale, options).format(parsedDate);
+});
+
+// ISO string for datetime attribute
+const isoString = $derived(parsedDate?.toISOString() ?? '');
+</script>
+
+{#if parsedDate}
+  <time class="date-display {className}" datetime={isoString}>
+    {formatted}
+  </time>
+{:else}
+  <span class="date-display date-fallback {className}">
+    {fallback}
+  </span>
+{/if}
+
+<style>
+  .date-display {
+    white-space: nowrap;
+  }
+
+  .date-fallback {
+    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    font-style: italic;
+  }
+</style>

package/dist/components/display/DateDisplay.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+ * DateDisplay - Formats and displays dates
+ *
+ * Supports various format options and relative time display.
+ */
+/** Props for DateDisplay component */
+export interface Props {
+    /** Date to display (Date, ISO string, or timestamp) */
+    date: Date | string | number | null | undefined;
+    /** Display format */
+    format?: 'short' | 'medium' | 'long' | 'relative';
+    /** Fallback text when date is null/undefined */
+    fallback?: string;
+    /** Show time along with date */
+    showTime?: boolean;
+    /** Locale for formatting (defaults to en-CA) */
+    locale?: string;
+    /** Optional CSS class */
+    class?: string;
+}
+declare const DateDisplay: import("svelte").Component<Props, {}, "">;
+type DateDisplay = ReturnType<typeof DateDisplay>;
+export default DateDisplay;
+//# sourceMappingURL=DateDisplay.svelte.d.ts.map

package/dist/components/display/DateDisplay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/DateDisplay.svelte.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AAEH,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,uDAAuD;IACvD,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChD,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;IAClD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiGD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}