@svadmin/ui 0.51.0 → 0.53.0

package/dist/components/fields/BooleanField.svelte

@@ -1,13 +1,95 @@
+<script module lang="ts">
+  export type BooleanTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+</script>
+
 <script lang="ts">
-  interface Props { value: boolean | null | undefined; trueIcon?: string; falseIcon?: string }
-  let { value, trueIcon = '✓', falseIcon = '✗' }: Props = $props();
+  import { Badge } from '../ui/badge/index.js';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: boolean | null | undefined;
+    mode?: 'icon' | 'badge' | 'tag' | 'text';
+    trueIcon?: string;
+    falseIcon?: string;
+    trueLabel?: string;
+    falseLabel?: string;
+    nullLabel?: string;
+    trueTone?: BooleanTone;
+    falseTone?: BooleanTone;
+    class?: string;
+  }
+
+  let {
+    value,
+    mode = 'icon',
+    trueIcon = '✓',
+    falseIcon = '✗',
+    trueLabel = 'Yes',
+    falseLabel = 'No',
+    nullLabel = '—',
+    trueTone = 'success',
+    falseTone = 'danger',
+    class: className = '',
+  }: Props = $props();
+
+  const toneClass: Record<BooleanTone, string> = {
+    success: 'border-success/30 bg-success/10 text-success',
+    warning: 'border-warning/30 bg-warning/10 text-warning-foreground',
+    danger: 'border-destructive/30 bg-destructive/10 text-destructive',
+    info: 'border-primary/30 bg-primary/10 text-primary',
+    neutral: 'border-border bg-muted text-muted-foreground',
+  };
 </script>
-{#if value}
-  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-success/10 text-success">
-    {trueIcon}
+
+{#if value == null}
+  <span class={cn('text-muted-foreground', className)}>{nullLabel}</span>
+{:else if mode === 'badge' || mode === 'tag'}
+  <Badge
+    variant="outline"
+    class={cn(
+      'font-medium text-xs',
+      value ? toneClass[trueTone] : toneClass[falseTone],
+      className
+    )}
+  >
+    {value ? trueLabel : falseLabel}
+  </Badge>
+{:else if mode === 'text'}
+  <span
+    class={cn(
+      'font-medium text-sm',
+      value
+        ? trueTone === 'success'
+          ? 'text-success'
+          : 'text-foreground'
+        : falseTone === 'danger'
+          ? 'text-destructive'
+          : 'text-muted-foreground',
+      className
+    )}
+  >
+    {value ? trueLabel : falseLabel}
   </span>
 {:else}
-  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-destructive/10 text-destructive">
-    {falseIcon}
-  </span>
+  {#if value}
+    <span
+      class={cn(
+        'inline-flex items-center justify-center w-5 h-5 rounded-full text-xs font-semibold',
+        toneClass[trueTone],
+        className
+      )}
+    >
+      {trueIcon}
+    </span>
+  {:else}
+    <span
+      class={cn(
+        'inline-flex items-center justify-center w-5 h-5 rounded-full text-xs font-semibold',
+        toneClass[falseTone],
+        className
+      )}
+    >
+      {falseIcon}
+    </span>
+  {/if}
 {/if}

package/dist/components/fields/BooleanField.svelte.d.ts

@@ -1,7 +1,15 @@
+export type BooleanTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 interface Props {
     value: boolean | null | undefined;
+    mode?: 'icon' | 'badge' | 'tag' | 'text';
     trueIcon?: string;
     falseIcon?: string;
+    trueLabel?: string;
+    falseLabel?: string;
+    nullLabel?: string;
+    trueTone?: BooleanTone;
+    falseTone?: BooleanTone;
+    class?: string;
 }
 declare const BooleanField: import("svelte").Component<Props, {}, "">;
 type BooleanField = ReturnType<typeof BooleanField>;

package/dist/components/fields/CodeField.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { Copy, Check } from '@lucide/svelte';
+  import { Badge } from '../ui/badge/index.js';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: string | number | Record<string, unknown> | unknown[] | null | undefined;
+    language?: string;
+    copyable?: boolean;
+    title?: string;
+    copiedTitle?: string;
+    nullLabel?: string;
+    maxHeight?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    language,
+    copyable = true,
+    title = 'Copy code',
+    copiedTitle = 'Copied!',
+    nullLabel = '—',
+    maxHeight = 'max-h-48',
+    class: className = '',
+  }: Props = $props();
+
+  let copied = $state(false);
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  const formattedCode = $derived.by(() => {
+    if (value == null || value === '') return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return String(value);
+    }
+  });
+
+  async function handleCopy() {
+    if (!formattedCode || !copyable) return;
+    try {
+      if (typeof navigator !== 'undefined' && navigator.clipboard) {
+        await navigator.clipboard.writeText(formattedCode);
+      }
+    } catch {
+      // Fallback
+    }
+
+    copied = true;
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      copied = false;
+    }, 1500);
+  }
+</script>
+
+{#if !formattedCode}
+  <span class={cn('field-code text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <div class={cn('field-code relative group rounded-md border border-border/80 bg-muted/40 text-xs font-mono', className)}>
+    {#if language || copyable}
+      <div class="flex items-center justify-between border-b border-border/60 bg-muted/60 px-2.5 py-1 text-[11px] text-muted-foreground">
+        {#if language}
+          <Badge variant="outline" class="h-4 px-1 text-[10px] font-mono">
+            {language.toUpperCase()}
+          </Badge>
+        {:else}
+          <span></span>
+        {/if}
+
+        {#if copyable}
+          <button
+            type="button"
+            class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-muted-foreground hover:text-foreground hover:bg-background/80 transition-colors focus:outline-none focus:ring-1 focus:ring-ring"
+            onclick={handleCopy}
+            title={copied ? copiedTitle : title}
+            aria-label={copied ? copiedTitle : title}
+          >
+            {#if copied}
+              <Check class="h-3 w-3 text-success animate-in zoom-in-50" />
+              <span class="text-[10px] text-success">{copiedTitle}</span>
+            {:else}
+              <Copy class="h-3 w-3" />
+              <span class="text-[10px]">{title}</span>
+            {/if}
+          </button>
+        {/if}
+      </div>
+    {/if}
+
+    <pre class={cn('p-2.5 overflow-x-auto overflow-y-auto leading-relaxed select-all', maxHeight)}><code>{formattedCode}</code></pre>
+  </div>
+{/if}

package/dist/components/fields/CodeField.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    value?: string | number | Record<string, unknown> | unknown[] | null | undefined;
+    language?: string;
+    copyable?: boolean;
+    title?: string;
+    copiedTitle?: string;
+    nullLabel?: string;
+    maxHeight?: string;
+    class?: string;
+}
+declare const CodeField: import("svelte").Component<Props, {}, "">;
+type CodeField = ReturnType<typeof CodeField>;
+export default CodeField;

package/dist/components/fields/CopyField.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { Copy, Check } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: string | number | null | undefined;
+    displayValue?: string;
+    masked?: boolean;
+    monospace?: boolean;
+    copyable?: boolean;
+    title?: string;
+    copiedTitle?: string;
+    nullLabel?: string;
+    oncopy?: (value: string) => void;
+    class?: string;
+  }
+
+  let {
+    value,
+    displayValue,
+    masked = false,
+    monospace = true,
+    copyable = true,
+    title = 'Copy',
+    copiedTitle = 'Copied!',
+    nullLabel = '—',
+    oncopy,
+    class: className = '',
+  }: Props = $props();
+
+  let copied = $state(false);
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let destroyed = false;
+
+  onDestroy(() => {
+    destroyed = true;
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+
+  function maskText(str: string): string {
+    if (str.length <= 8) return '****';
+    return `${str.slice(0, 4)}...${str.slice(-4)}`;
+  }
+
+  const rawString = $derived(value != null && value !== '' ? String(value) : '');
+  const displayText = $derived.by(() => {
+    if (!rawString) return nullLabel;
+    if (displayValue) return displayValue;
+    if (masked) return maskText(rawString);
+    return rawString;
+  });
+
+  async function handleCopy(event: MouseEvent) {
+    event.stopPropagation();
+    if (!rawString || !copyable) return;
+
+    const writeText = globalThis.navigator?.clipboard?.writeText;
+    if (!writeText) return;
+
+    try {
+      await writeText.call(globalThis.navigator.clipboard, rawString);
+    } catch {
+      return;
+    }
+
+    if (destroyed) return;
+    copied = true;
+    oncopy?.(rawString);
+
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      copied = false;
+      timeoutId = null;
+    }, 1500);
+  }
+</script>
+
+{#if !rawString}
+  <span class={cn('field-copy text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <span class={cn('field-copy inline-flex items-center gap-1.5 text-sm group', className)}>
+    <span class={cn(monospace ? 'font-mono text-xs' : '', 'truncate select-all')}>
+      {displayText}
+    </span>
+    {#if copyable}
+      <button
+        type="button"
+        class="inline-flex items-center justify-center h-5 w-5 rounded text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors focus:outline-none focus:ring-1 focus:ring-ring"
+        onclick={handleCopy}
+        title={copied ? copiedTitle : title}
+        aria-label={copied ? copiedTitle : title}
+      >
+        {#if copied}
+          <Check class="h-3 w-3 text-success animate-in zoom-in-50 duration-150" />
+        {:else}
+          <Copy class="h-3 w-3 opacity-70 group-hover:opacity-100 transition-opacity" />
+        {/if}
+      </button>
+    {/if}
+  </span>
+{/if}

package/dist/components/fields/CopyField.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    value?: string | number | null | undefined;
+    displayValue?: string;
+    masked?: boolean;
+    monospace?: boolean;
+    copyable?: boolean;
+    title?: string;
+    copiedTitle?: string;
+    nullLabel?: string;
+    oncopy?: (value: string) => void;
+    class?: string;
+}
+declare const CopyField: import("svelte").Component<Props, {}, "">;
+type CopyField = ReturnType<typeof CopyField>;
+export default CopyField;

package/dist/components/fields/DateField.svelte

@@ -1,6 +1,76 @@
+<script module lang="ts">
+  export type DateFieldFormat = 'date' | 'time' | 'datetime' | 'relative' | 'iso';
+</script>
+
 <script lang="ts">
-  interface Props { value: string | number | Date | null | undefined; locale?: string; options?: Intl.DateTimeFormatOptions }
-  let { value, locale = 'en-US', options = { dateStyle: 'medium' } }: Props = $props();
-  const formatted = $derived(value != null ? new Intl.DateTimeFormat(locale, options).format(new Date(value as string | number | Date)) : '—');
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: string | number | Date | null | undefined;
+    locale?: string;
+    format?: DateFieldFormat;
+    options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    locale = 'en-US',
+    format = 'date',
+    options,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  function formatRelative(date: Date, loc: string): string {
+    const now = Date.now();
+    const diffMs = date.getTime() - now;
+    const diffSec = Math.round(diffMs / 1000);
+    const diffMin = Math.round(diffSec / 60);
+    const diffHour = Math.round(diffMin / 60);
+    const diffDay = Math.round(diffHour / 24);
+
+    try {
+      const rtf = new Intl.RelativeTimeFormat(loc, { numeric: 'auto' });
+      if (Math.abs(diffSec) < 60) return rtf.format(diffSec, 'second');
+      if (Math.abs(diffMin) < 60) return rtf.format(diffMin, 'minute');
+      if (Math.abs(diffHour) < 24) return rtf.format(diffHour, 'hour');
+      if (Math.abs(diffDay) < 30) return rtf.format(diffDay, 'day');
+    } catch {
+      // Fallback
+    }
+    return new Intl.DateTimeFormat(loc, { dateStyle: 'medium' }).format(date);
+  }
+
+  const formatted = $derived.by(() => {
+    if (value == null || value === '') return nullLabel;
+    const d = value instanceof Date ? value : new Date(value);
+    if (isNaN(d.getTime())) return nullLabel;
+
+    if (format === 'iso') return d.toISOString();
+    if (format === 'relative') return formatRelative(d, locale);
+
+    const defaultOptions: Intl.DateTimeFormatOptions =
+      options ??
+      (format === 'datetime'
+        ? { dateStyle: 'medium', timeStyle: 'short' }
+        : format === 'time'
+          ? { timeStyle: 'medium' }
+          : { dateStyle: 'medium' });
+
+    try {
+      return new Intl.DateTimeFormat(locale, defaultOptions).format(d);
+    } catch {
+      return d.toLocaleDateString();
+    }
+  });
+
+  const fullIsoTitle = $derived.by(() => {
+    if (value == null || value === '') return undefined;
+    const d = value instanceof Date ? value : new Date(value);
+    return isNaN(d.getTime()) ? undefined : d.toISOString();
+  });
 </script>
-<span class="field-date">{formatted}</span>
+
+<span class={cn('field-date text-sm', className)} title={fullIsoTitle}>{formatted}</span>

package/dist/components/fields/DateField.svelte.d.ts

@@ -1,7 +1,11 @@
+export type DateFieldFormat = 'date' | 'time' | 'datetime' | 'relative' | 'iso';
 interface Props {
     value: string | number | Date | null | undefined;
     locale?: string;
+    format?: DateFieldFormat;
     options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    class?: string;
 }
 declare const DateField: import("svelte").Component<Props, {}, "">;
 type DateField = ReturnType<typeof DateField>;

package/dist/components/fields/DateRangeField.svelte

@@ -0,0 +1,98 @@
+<script module lang="ts">
+  export type DateRangeFormat = 'date' | 'time' | 'datetime' | 'iso';
+  export type DateRangeValue =
+    | [string | number | Date | null | undefined, string | number | Date | null | undefined]
+    | { start?: string | number | Date | null; end?: string | number | Date | null; from?: string | number | Date | null; to?: string | number | Date | null }
+    | null
+    | undefined;
+</script>
+
+<script lang="ts">
+  import { Calendar } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: DateRangeValue;
+    startDate?: string | number | Date | null | undefined;
+    endDate?: string | number | Date | null | undefined;
+    separator?: string;
+    locale?: string;
+    format?: DateRangeFormat;
+    options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    showIcon?: boolean;
+    class?: string;
+  }
+
+  let {
+    value,
+    startDate,
+    endDate,
+    separator = '~',
+    locale = 'en-US',
+    format = 'date',
+    options,
+    nullLabel = '—',
+    showIcon = false,
+    class: className = '',
+  }: Props = $props();
+
+  const start = $derived.by(() => {
+    if (startDate !== undefined) return startDate;
+    if (Array.isArray(value)) return value[0];
+    if (value && typeof value === 'object') {
+      const obj = value as Record<string, unknown>;
+      return (obj.start ?? obj.from) as string | number | Date | null | undefined;
+    }
+    return undefined;
+  });
+
+  const end = $derived.by(() => {
+    if (endDate !== undefined) return endDate;
+    if (Array.isArray(value)) return value[1];
+    if (value && typeof value === 'object') {
+      const obj = value as Record<string, unknown>;
+      return (obj.end ?? obj.to) as string | number | Date | null | undefined;
+    }
+    return undefined;
+  });
+
+  function formatDate(val: string | number | Date | null | undefined): string | null {
+    if (val == null || val === '') return null;
+    const d = val instanceof Date ? val : new Date(val);
+    if (isNaN(d.getTime())) return null;
+
+    if (format === 'iso') return d.toISOString();
+
+    const defaultOptions: Intl.DateTimeFormatOptions =
+      options ??
+      (format === 'datetime'
+        ? { dateStyle: 'medium', timeStyle: 'short' }
+        : format === 'time'
+          ? { timeStyle: 'medium' }
+          : { dateStyle: 'medium' });
+
+    try {
+      return new Intl.DateTimeFormat(locale, defaultOptions).format(d);
+    } catch {
+      return d.toLocaleDateString();
+    }
+  }
+
+  const startFormatted = $derived(formatDate(start));
+  const endFormatted = $derived(formatDate(end));
+
+  const display = $derived.by(() => {
+    if (!startFormatted && !endFormatted) return nullLabel;
+    if (startFormatted && endFormatted) return `${startFormatted} ${separator} ${endFormatted}`;
+    if (startFormatted) return `${startFormatted} ${separator} ${nullLabel}`;
+    return `${nullLabel} ${separator} ${endFormatted}`;
+  });
+</script>
+
+<span class={cn('field-date-range inline-flex items-center gap-1.5 text-sm', className)}>
+  {#if showIcon}
+    <Calendar class="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+  {/if}
+  <span>{display}</span>
+</span>

package/dist/components/fields/DateRangeField.svelte.d.ts

@@ -0,0 +1,22 @@
+export type DateRangeFormat = 'date' | 'time' | 'datetime' | 'iso';
+export type DateRangeValue = [string | number | Date | null | undefined, string | number | Date | null | undefined] | {
+    start?: string | number | Date | null;
+    end?: string | number | Date | null;
+    from?: string | number | Date | null;
+    to?: string | number | Date | null;
+} | null | undefined;
+interface Props {
+    value?: DateRangeValue;
+    startDate?: string | number | Date | null | undefined;
+    endDate?: string | number | Date | null | undefined;
+    separator?: string;
+    locale?: string;
+    format?: DateRangeFormat;
+    options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    showIcon?: boolean;
+    class?: string;
+}
+declare const DateRangeField: import("svelte").Component<Props, {}, "">;
+type DateRangeField = ReturnType<typeof DateRangeField>;
+export default DateRangeField;

package/dist/components/fields/NumberField.svelte

@@ -1,6 +1,74 @@
 <script lang="ts">
-  interface Props { value: number | string | null | undefined; locale?: string; options?: Intl.NumberFormatOptions }
-  let { value, locale = 'en-US', options = {} }: Props = $props();
-  const formatted = $derived(value != null ? new Intl.NumberFormat(locale, options).format(Number(value)) : '—');
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: number | string | null | undefined;
+    locale?: string;
+    currency?: string;
+    unit?: string;
+    prefix?: string;
+    precision?: number;
+    compact?: boolean;
+    signed?: boolean;
+    tabular?: boolean;
+    options?: Intl.NumberFormatOptions;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    locale = 'en-US',
+    currency,
+    unit,
+    prefix,
+    precision,
+    compact = false,
+    signed = false,
+    tabular = true,
+    options = {},
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const formatted = $derived.by(() => {
+    if (value == null || value === '') return nullLabel;
+    const num = Number(value);
+    if (isNaN(num)) return nullLabel;
+
+    const opts: Intl.NumberFormatOptions = { ...options };
+
+    if (currency) {
+      opts.style = 'currency';
+      opts.currency = currency;
+    }
+    if (compact) {
+      opts.notation = 'compact';
+      opts.compactDisplay = 'short';
+    }
+    if (precision != null) {
+      opts.minimumFractionDigits = precision;
+      opts.maximumFractionDigits = precision;
+    }
+    if (signed && num > 0 && !currency) {
+      opts.signDisplay = 'always';
+    }
+
+    try {
+      let result = new Intl.NumberFormat(locale, opts).format(num);
+      if (prefix && !currency) {
+        result = `${prefix}${result}`;
+      }
+      if (unit) {
+        result = `${result} ${unit}`;
+      }
+      return result;
+    } catch {
+      return String(num);
+    }
+  });
 </script>
-<span class="field-number">{formatted}</span>
+
+<span class={cn('field-number text-sm', tabular && 'font-mono tabular-nums', className)}>
+  {formatted}
+</span>

package/dist/components/fields/NumberField.svelte.d.ts

@@ -1,7 +1,16 @@
 interface Props {
     value: number | string | null | undefined;
     locale?: string;
+    currency?: string;
+    unit?: string;
+    prefix?: string;
+    precision?: number;
+    compact?: boolean;
+    signed?: boolean;
+    tabular?: boolean;
     options?: Intl.NumberFormatOptions;
+    nullLabel?: string;
+    class?: string;
 }
 declare const NumberField: import("svelte").Component<Props, {}, "">;
 type NumberField = ReturnType<typeof NumberField>;