@svadmin/ui 0.51.0 → 0.53.0

package/dist/components/fields/PercentField.svelte

@@ -0,0 +1,92 @@
+<script module lang="ts">
+  export type PercentTone = 'auto' | 'success' | 'warning' | 'destructive' | 'info' | 'neutral';
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: number | string | null | undefined;
+    precision?: number;
+    scale?: '100' | '1';
+    showProgress?: boolean;
+    tone?: PercentTone;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    precision = 1,
+    scale = '100',
+    showProgress = false,
+    tone = 'neutral',
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const numericValue = $derived.by(() => {
+    if (value == null || value === '') return null;
+    const num = typeof value === 'number' ? value : Number(value);
+    return isNaN(num) ? null : num;
+  });
+
+  const percentNumber = $derived.by(() => {
+    if (numericValue === null) return null;
+    return scale === '1' ? numericValue * 100 : numericValue;
+  });
+
+  const formatted = $derived.by(() => {
+    if (percentNumber === null) return nullLabel;
+    return `${percentNumber.toFixed(precision)}%`;
+  });
+
+  const resolvedTone = $derived.by(() => {
+    if (tone !== 'auto') return tone;
+    if (percentNumber === null) return 'neutral';
+    if (percentNumber >= 80) return 'success';
+    if (percentNumber >= 50) return 'warning';
+    return 'destructive';
+  });
+
+  const toneTextClass: Record<PercentTone, string> = {
+    auto: '',
+    success: 'text-success font-medium',
+    warning: 'text-warning-foreground font-medium',
+    destructive: 'text-destructive font-medium',
+    info: 'text-primary font-medium',
+    neutral: 'text-foreground',
+  };
+
+  const toneBarClass: Record<PercentTone, string> = {
+    auto: '',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    destructive: 'bg-destructive',
+    info: 'bg-primary',
+    neutral: 'bg-primary',
+  };
+
+  const clampedProgress = $derived.by(() => {
+    if (percentNumber === null) return 0;
+    return Math.min(100, Math.max(0, percentNumber));
+  });
+</script>
+
+{#if numericValue === null}
+  <span class={cn('field-percent text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <div class={cn('field-percent inline-flex items-center gap-2 text-sm', className)}>
+    <span class={cn('tabular-nums', toneTextClass[resolvedTone])}>
+      {formatted}
+    </span>
+    {#if showProgress}
+      <div class="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
+        <div
+          class={cn('h-full transition-all duration-300', toneBarClass[resolvedTone])}
+          style="width: {clampedProgress}%"
+        ></div>
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,13 @@
+export type PercentTone = 'auto' | 'success' | 'warning' | 'destructive' | 'info' | 'neutral';
+interface Props {
+    value?: number | string | null | undefined;
+    precision?: number;
+    scale?: '100' | '1';
+    showProgress?: boolean;
+    tone?: PercentTone;
+    nullLabel?: string;
+    class?: string;
+}
+declare const PercentField: import("svelte").Component<Props, {}, "">;
+type PercentField = ReturnType<typeof PercentField>;
+export default PercentField;

package/dist/components/fields/RatingField.svelte

@@ -0,0 +1,76 @@
+<script module lang="ts">
+  export type RatingSize = 'sm' | 'default' | 'lg';
+</script>
+
+<script lang="ts">
+  import { Star, StarHalf } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: number | string | null | undefined;
+    max?: number;
+    showValue?: boolean;
+    size?: RatingSize;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    max = 5,
+    showValue = false,
+    size = 'default',
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const numericValue = $derived.by(() => {
+    if (value == null || value === '') return null;
+    const num = typeof value === 'number' ? value : Number(value);
+    return isNaN(num) ? null : Math.max(0, Math.min(max, num));
+  });
+
+  const sizeClasses: Record<RatingSize, { icon: string; text: string }> = {
+    sm: { icon: 'h-3.5 w-3.5', text: 'text-xs' },
+    default: { icon: 'h-4 w-4', text: 'text-sm' },
+    lg: { icon: 'h-5 w-5', text: 'text-base' },
+  };
+
+  const stars = $derived.by(() => {
+    if (numericValue === null) return [];
+    const result: ('full' | 'half' | 'empty')[] = [];
+    for (let i = 1; i <= max; i++) {
+      if (numericValue >= i) {
+        result.push('full');
+      } else if (numericValue >= i - 0.5) {
+        result.push('half');
+      } else {
+        result.push('empty');
+      }
+    }
+    return result;
+  });
+</script>
+
+{#if numericValue === null}
+  <span class={cn('field-rating text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <div class={cn('field-rating inline-flex items-center gap-1.5', className)}>
+    <div class="inline-flex items-center gap-0.5 text-amber-500">
+      {#each stars as starType, idx (idx)}
+        {#if starType === 'full'}
+          <Star class={cn(sizeClasses[size].icon, 'fill-amber-500 text-amber-500')} />
+        {:else if starType === 'half'}
+          <StarHalf class={cn(sizeClasses[size].icon, 'fill-amber-500 text-amber-500')} />
+        {:else}
+          <Star class={cn(sizeClasses[size].icon, 'text-muted-foreground/30')} />
+        {/if}
+      {/each}
+    </div>
+    {#if showValue}
+      <span class={cn('tabular-nums font-medium text-foreground', sizeClasses[size].text)}>
+        {numericValue}
+      </span>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,12 @@
+export type RatingSize = 'sm' | 'default' | 'lg';
+interface Props {
+    value?: number | string | null | undefined;
+    max?: number;
+    showValue?: boolean;
+    size?: RatingSize;
+    nullLabel?: string;
+    class?: string;
+}
+declare const RatingField: import("svelte").Component<Props, {}, "">;
+type RatingField = ReturnType<typeof RatingField>;
+export default RatingField;

package/dist/components/fields/TagField.svelte

@@ -1,12 +1,96 @@
+<script module lang="ts">
+  export type TagTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+</script>
+
 <script lang="ts">
   import { Badge } from '../ui/badge/index.js';
-  interface Props { value: string | string[] | null | undefined }
-  let { value }: Props = $props();
-  const tags = $derived(Array.isArray(value) ? value : value ? [value] : []);
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: string | string[] | null | undefined;
+    colorMap?: Record<string, TagTone | string>;
+    tone?: TagTone;
+    variant?: 'secondary' | 'outline' | 'default' | 'destructive';
+    size?: 'sm' | 'default';
+    clickable?: boolean;
+    onclick?: (tag: string) => void;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    colorMap,
+    tone,
+    variant = 'secondary',
+    size = 'default',
+    clickable = false,
+    onclick,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const toneClass: Record<TagTone, 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',
+  };
+
+  const tags = $derived(
+    Array.isArray(value)
+      ? value.filter((t): t is string => t != null && t !== '')
+      : value != null && value !== ''
+        ? [String(value)]
+        : []
+  );
+
+  function resolveTagClass(tag: string): string {
+    const mapped = colorMap?.[tag] ?? tone;
+    if (mapped && mapped in toneClass) {
+      return toneClass[mapped as TagTone];
+    }
+    if (typeof mapped === 'string') {
+      return mapped;
+    }
+    return '';
+  }
 </script>
-<span class="inline-flex flex-wrap gap-1">
+
+<span class={cn('inline-flex flex-wrap gap-1 items-center', className)}>
   {#each tags as tag, _i (_i)}
-    <Badge variant="secondary">{tag}</Badge>
+    {@const customClass = resolveTagClass(tag)}
+    {#if clickable || onclick}
+      <button
+        type="button"
+        onclick={() => onclick?.(tag)}
+        class="focus:outline-none focus:ring-1 focus:ring-ring rounded"
+      >
+        <Badge
+          variant={customClass ? 'outline' : variant}
+          class={cn(
+            'transition-colors cursor-pointer hover:opacity-80',
+            size === 'sm' ? 'px-1.5 py-0 text-[11px] h-5' : '',
+            customClass
+          )}
+        >
+          {tag}
+        </Badge>
+      </button>
+    {:else}
+      <Badge
+        variant={customClass ? 'outline' : variant}
+        class={cn(
+          size === 'sm' ? 'px-1.5 py-0 text-[11px] h-5' : '',
+          customClass
+        )}
+      >
+        {tag}
+      </Badge>
+    {/if}
   {/each}
-  {#if tags.length === 0}<span class="text-muted-foreground">—</span>{/if}
+  {#if tags.length === 0}
+    <span class="text-muted-foreground">{nullLabel}</span>
+  {/if}
 </span>

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

@@ -1,5 +1,14 @@
+export type TagTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 interface Props {
     value: string | string[] | null | undefined;
+    colorMap?: Record<string, TagTone | string>;
+    tone?: TagTone;
+    variant?: 'secondary' | 'outline' | 'default' | 'destructive';
+    size?: 'sm' | 'default';
+    clickable?: boolean;
+    onclick?: (tag: string) => void;
+    nullLabel?: string;
+    class?: string;
 }
 declare const TagField: import("svelte").Component<Props, {}, "">;
 type TagField = ReturnType<typeof TagField>;

package/dist/components/fields/UrlField.svelte

@@ -1,14 +1,50 @@
 <script lang="ts">
   import { ExternalLink } from '@lucide/svelte';
-  interface Props { value: string | null | undefined; label?: string }
-  let { value, label }: Props = $props();
-  const display = $derived(label ?? value ?? '');
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: string | null | undefined;
+    label?: string;
+    target?: string;
+    maxDisplayLength?: number;
+    showIcon?: boolean;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    label,
+    target = '_blank',
+    maxDisplayLength = 40,
+    showIcon = true,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const display = $derived.by(() => {
+    if (label) return label;
+    if (!value) return '';
+    if (maxDisplayLength && value.length > maxDisplayLength) {
+      return value.slice(0, maxDisplayLength) + '…';
+    }
+    return value;
+  });
 </script>
+
 {#if value}
-  <a href={value} target="_blank" rel="noopener noreferrer" class="text-primary hover:underline no-underline inline-flex items-center gap-1">
-    {display}
-    <ExternalLink class="h-3 w-3 opacity-60" />
+  <a
+    href={value}
+    {target}
+    rel="noopener noreferrer"
+    class={cn('text-primary hover:underline inline-flex items-center gap-1 text-sm font-medium', className)}
+    title={value}
+  >
+    <span>{display}</span>
+    {#if showIcon}
+      <ExternalLink class="h-3 w-3 shrink-0 opacity-60" />
+    {/if}
   </a>
 {:else}
-  <span class="text-muted-foreground">—</span>
+  <span class="text-muted-foreground">{nullLabel}</span>
 {/if}

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

@@ -1,6 +1,11 @@
 interface Props {
     value: string | null | undefined;
     label?: string;
+    target?: string;
+    maxDisplayLength?: number;
+    showIcon?: boolean;
+    nullLabel?: string;
+    class?: string;
 }
 declare const UrlField: import("svelte").Component<Props, {}, "">;
 type UrlField = ReturnType<typeof UrlField>;

package/dist/index.d.ts

@@ -103,8 +103,14 @@ export { default as ImageField } from './components/fields/ImageField.svelte';
 export { default as SelectField } from './components/fields/SelectField.svelte';
 export { default as MultiSelectField } from './components/fields/MultiSelectField.svelte';
 export { default as RelationField } from './components/fields/RelationField.svelte';
+export { default as DateRangeField } from './components/fields/DateRangeField.svelte';
 export { default as JsonField } from './components/fields/JsonField.svelte';
 export { default as RichTextField } from './components/fields/RichTextField.svelte';
+export { default as CopyField } from './components/fields/CopyField.svelte';
+export { default as AvatarField } from './components/fields/AvatarField.svelte';
+export { default as CodeField } from './components/fields/CodeField.svelte';
+export { default as PercentField } from './components/fields/PercentField.svelte';
+export { default as RatingField } from './components/fields/RatingField.svelte';
 export { CreateButton, EditButton, DeleteButton, ShowButton, ListButton, RefreshButton, ExportButton, ImportButton, SaveButton, CloneButton, } from './components/buttons/index.js';
 export { Button, buttonVariants } from './components/ui/button/index.js';
 export { Input } from './components/ui/input/index.js';
@@ -204,3 +210,14 @@ export type { DemoMember, DemoProject, DemoTeam, DemoIntegration, DemoApiKey, De
 export { default as RowActions } from './components/RowActions.svelte';
 export type { RowActionItem } from './components/RowActions.svelte';
 export { default as DetailDrawer } from './components/DetailDrawer.svelte';
+export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';
+export type { TimelineItem } from './components/content/AuditTimeline.svelte';
+export type { TagTone } from './components/fields/TagField.svelte';
+export type { BooleanTone } from './components/fields/BooleanField.svelte';
+export type { DateFieldFormat } from './components/fields/DateField.svelte';
+export type { AvatarStatus, AvatarSize } from './components/fields/AvatarField.svelte';
+export { default as FilterDropdown } from './components/FilterDropdown.svelte';
+export { default as BatchActionBar } from './components/BatchActionBar.svelte';
+export type { DateRangeFormat, DateRangeValue } from './components/fields/DateRangeField.svelte';
+export type { PercentTone } from './components/fields/PercentField.svelte';
+export type { RatingSize } from './components/fields/RatingField.svelte';

package/dist/index.js

@@ -106,8 +106,14 @@ export { default as ImageField } from './components/fields/ImageField.svelte';
 export { default as SelectField } from './components/fields/SelectField.svelte';
 export { default as MultiSelectField } from './components/fields/MultiSelectField.svelte';
 export { default as RelationField } from './components/fields/RelationField.svelte';
+export { default as DateRangeField } from './components/fields/DateRangeField.svelte';
 export { default as JsonField } from './components/fields/JsonField.svelte';
 export { default as RichTextField } from './components/fields/RichTextField.svelte';
+export { default as CopyField } from './components/fields/CopyField.svelte';
+export { default as AvatarField } from './components/fields/AvatarField.svelte';
+export { default as CodeField } from './components/fields/CodeField.svelte';
+export { default as PercentField } from './components/fields/PercentField.svelte';
+export { default as RatingField } from './components/fields/RatingField.svelte';
 // Rich text editor (requires @svadmin/editor) as a direct import in consumer app
 // CRUD Buttons
 export { CreateButton, EditButton, DeleteButton, ShowButton, ListButton, RefreshButton, ExportButton, ImportButton, SaveButton, CloneButton, } from './components/buttons/index.js';
@@ -202,3 +208,6 @@ export { default as SystemErrorState } from './components/content/SystemErrorSta
 export { referenceDemoData } from './reference-data.js';
 export { default as RowActions } from './components/RowActions.svelte';
 export { default as DetailDrawer } from './components/DetailDrawer.svelte';
+export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';
+export { default as FilterDropdown } from './components/FilterDropdown.svelte';
+export { default as BatchActionBar } from './components/BatchActionBar.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [