@svadmin/lite 0.17.0 → 0.22.1

package/dist/components/LiteRowActions.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { HTMLFormAttributes } from 'svelte/elements';
+
+  interface RowAction {
+    id: string;
+    label: string;
+    href?: string;
+    action?: string;
+    method?: HTMLFormAttributes['method'];
+    danger?: boolean;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    actions: RowAction[];
+    label?: string;
+  }
+
+  let { actions, label = 'Row actions' }: Props = $props();
+</script>
+
+<div class="lite-inline-xs" role="group" aria-label={label}>
+  {#each actions as action (action.id)}
+    {#if action.disabled}
+      <span class="lite-btn lite-btn-sm" aria-disabled="true">{action.label}</span>
+    {:else if action.href}
+      <a class="lite-btn lite-btn-sm" class:lite-btn-danger={action.danger} href={action.href}>{action.label}</a>
+    {:else if action.action}
+      <form method={action.method ?? 'POST'} action={action.action}>
+        <button class="lite-btn lite-btn-sm" class:lite-btn-danger={action.danger} type="submit">{action.label}</button>
+      </form>
+    {:else}
+      <span class="lite-muted">{action.label}</span>
+    {/if}
+  {/each}
+</div>

package/dist/components/LiteRowActions.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLFormAttributes } from 'svelte/elements';
+interface RowAction {
+    id: string;
+    label: string;
+    href?: string;
+    action?: string;
+    method?: HTMLFormAttributes['method'];
+    danger?: boolean;
+    disabled?: boolean;
+}
+interface Props {
+    actions: RowAction[];
+    label?: string;
+}
+declare const LiteRowActions: import("svelte").Component<Props, {}, "">;
+type LiteRowActions = ReturnType<typeof LiteRowActions>;
+export default LiteRowActions;

package/dist/components/LiteSensitiveDataMask.svelte

@@ -2,11 +2,14 @@
   interface Props {
     value?: string | number | null;
     type?: 'phone' | 'id-card' | 'email' | 'bank-card' | 'secret' | 'custom';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
     value = '',
     type = 'phone',
+    class: className = '',
   }: Props = $props();
 
   const rawString = $derived(String(value ?? ''));
@@ -31,6 +34,6 @@
   const masked = $derived(mask(rawString, type));
 </script>
 
-<span class="lite-sensitive-mask" style="font-family: monospace; font-size: 12px;">
+<span class="lite-sensitive-mask {className}" style="font-family: monospace; font-size: 12px;">
   {masked}
 </span>

package/dist/components/LiteSensitiveDataMask.svelte.d.ts

@@ -1,6 +1,8 @@
 interface Props {
     value?: string | number | null;
     type?: 'phone' | 'id-card' | 'email' | 'bank-card' | 'secret' | 'custom';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteSensitiveDataMask: import("svelte").Component<Props, {}, "">;
 type LiteSensitiveDataMask = ReturnType<typeof LiteSensitiveDataMask>;

package/dist/components/LiteSkeleton.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  interface Props {
+    lines?: number;
+    width?: string;
+    height?: string;
+    circle?: boolean;
+    label?: string;
+    /**
+     * Page-level skeleton layout, mirroring the reference PageSkeleton: header,
+     * then `rows` blocks of the requested shape. `text` keeps the plain lines.
+     */
+    variant?: 'text' | 'list' | 'show' | 'form';
+    /** Number of body rows/blocks for the page variants. */
+    rows?: number;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let {
+    lines = 3,
+    width = '100%',
+    height = '14px',
+    circle = false,
+    label = 'Loading',
+    variant = 'text',
+    rows = 5,
+    class: className = '',
+  }: Props = $props();
+
+  const blockCount = $derived(Math.max(1, rows));
+</script>
+
+<div
+  class={`lite-skeleton lite-skeleton--${variant} ${className}`.trim()}
+  role="status"
+  aria-label={label}
+  aria-busy="true"
+  data-variant={variant}
+>
+  {#if variant !== 'text'}
+    <!-- Page-level skeleton: same structure as the reference, generated from props. -->
+    <div class="lite-skeleton__header" aria-hidden="true">
+      <span class="lite-skeleton__line" style="width:200px;height:32px"></span>
+      <span class="lite-skeleton__line" style="width:300px"></span>
+      {#if variant === 'list'}<span class="lite-skeleton__line" style="width:120px;height:40px"></span>{/if}
+    </div>
+    <div class="lite-skeleton__panel" aria-hidden="true">
+      {#each Array.from({ length: blockCount }, (_, index) => index) as index (index)}
+        <div class="lite-skeleton__block" data-shape={variant}>
+          {#if variant === 'list'}
+            <span class="lite-skeleton__line" style="flex:1;height:24px"></span>
+            <span class="lite-skeleton__line" style="flex:1;height:24px"></span>
+            <span class="lite-skeleton__line" style="flex:1;height:24px"></span>
+            <span class="lite-skeleton__line" style="flex:1;height:24px"></span>
+          {:else if variant === 'show'}
+            <span class="lite-skeleton__line" style="width:100px"></span>
+            <span class="lite-skeleton__line" style="width:250px;height:24px"></span>
+          {:else}
+            <span class="lite-skeleton__line" style="width:100px"></span>
+            <span class="lite-skeleton__line" style="width:100%;max-width:420px;height:40px"></span>
+          {/if}
+        </div>
+      {/each}
+      {#if variant === 'form'}
+        <div class="lite-skeleton__block" data-shape="actions">
+          <span class="lite-skeleton__line" style="width:100px;height:40px"></span>
+          <span class="lite-skeleton__line" style="width:100px;height:40px"></span>
+        </div>
+      {/if}
+    </div>
+  {:else if circle}
+    <span class="lite-skeleton__circle" aria-hidden="true"></span>
+  {:else}
+    {#each Array.from({ length: Math.max(1, lines) }, (_, index) => index) as index (index)}
+      <span class="lite-skeleton__line" style={`width:${index === lines - 1 && lines > 1 ? '65%' : width};height:${height}`} aria-hidden="true"></span>
+    {/each}
+  {/if}
+  <span class="lite-skeleton__sr">{label}</span>
+</div>
+
+<style>
+  .lite-skeleton { display: block; }
+  .lite-skeleton__line, .lite-skeleton__circle { display: block; background: #F2F3F5; animation: lite-skeleton-pulse 1.4s ease-in-out infinite; }
+  .lite-skeleton__line { border-radius: 4px; }
+  .lite-skeleton__circle { width: 40px; height: 40px; border-radius: 999px; }
+  .lite-skeleton__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  @keyframes lite-skeleton-pulse { 50% { opacity: 0.5; } }
+
+  .lite-skeleton__line + .lite-skeleton__line { margin-top: 8px; }
+
+  .lite-skeleton__header { display: flex; flex-wrap: wrap; }
+  .lite-skeleton__header > * + * { margin-left: 8px; }
+  .lite-skeleton__header > :first-child { flex: 0 0 auto; }
+  .lite-skeleton__panel { margin-top: 24px; padding: 16px; border: 1px solid #E5E6EB; border-radius: 6px; }
+  .lite-skeleton__block + .lite-skeleton__block { margin-top: 16px; }
+  .lite-skeleton__block[data-shape='list'] { display: flex; }
+  .lite-skeleton__block[data-shape='list'] > * + * { margin-left: 16px; }
+  .lite-skeleton__block[data-shape='actions'] { display: flex; }
+  .lite-skeleton__block[data-shape='actions'] > * + * { margin-left: 8px; }
+</style>

package/dist/components/LiteSkeleton.svelte.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    lines?: number;
+    width?: string;
+    height?: string;
+    circle?: boolean;
+    label?: string;
+    /**
+     * Page-level skeleton layout, mirroring the reference PageSkeleton: header,
+     * then `rows` blocks of the requested shape. `text` keeps the plain lines.
+     */
+    variant?: 'text' | 'list' | 'show' | 'form';
+    /** Number of body rows/blocks for the page variants. */
+    rows?: number;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteSkeleton: import("svelte").Component<Props, {}, "">;
+type LiteSkeleton = ReturnType<typeof LiteSkeleton>;
+export default LiteSkeleton;

package/dist/components/LiteSpace.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    direction?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    wrap?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    children: Snippet;
+  }
+
+  let { direction = 'horizontal', size = 'md', wrap = false, class: className = '', children }: Props = $props();
+</script>
+
+<div class="lite-space {className}" data-direction={direction} data-size={size} data-wrap={wrap || undefined}>
+  {@render children()}
+</div>
+
+<style>
+  .lite-space { display: flex; }
+  .lite-space[data-direction='horizontal'] { flex-direction: row; }
+  .lite-space[data-direction='vertical'] { flex-direction: column; }
+  .lite-space[data-wrap] { flex-wrap: wrap; }
+  .lite-space[data-direction='horizontal'] > * + * { margin-left: 8px; }
+  .lite-space[data-direction='vertical'] > * + * { margin-top: 8px; }
+  .lite-space[data-size='sm'][data-direction='horizontal'] > * + * { margin-left: 4px; }
+  .lite-space[data-size='sm'][data-direction='vertical'] > * + * { margin-top: 4px; }
+  .lite-space[data-size='lg'][data-direction='horizontal'] > * + * { margin-left: 16px; }
+  .lite-space[data-size='lg'][data-direction='vertical'] > * + * { margin-top: 16px; }
+</style>

package/dist/components/LiteSpace.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    direction?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    wrap?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    children: Snippet;
+}
+declare const LiteSpace: import("svelte").Component<Props, {}, "">;
+type LiteSpace = ReturnType<typeof LiteSpace>;
+export default LiteSpace;

package/dist/components/LiteSpin.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    spinning?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    children?: Snippet;
+  }
+
+  let { spinning = true, size = 'md', label = 'Loading', children }: Props = $props();
+  const px = $derived(size === 'sm' ? 16 : size === 'lg' ? 36 : 24);
+</script>
+
+<div class="lite-spin" aria-busy={spinning || undefined}>
+  {#if spinning}
+    <span class="lite-spin__indicator" style={`width:${px}px;height:${px}px`} role="status" aria-label={label}></span>
+  {/if}
+  {#if children}{@render children()}{/if}
+</div>
+
+<style>
+  .lite-spin { display: inline-flex; align-items: center; }
+  .lite-spin__indicator { display: inline-block; border: 2px solid #E5E6EB; border-top-color: #165DFF; border-radius: 999px; animation: lite-spin 0.8s linear infinite; }
+  @keyframes lite-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .lite-spin__indicator { animation: none; } }
+</style>

package/dist/components/LiteSpin.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    spinning?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    children?: Snippet;
+}
+declare const LiteSpin: import("svelte").Component<Props, {}, "">;
+type LiteSpin = ReturnType<typeof LiteSpin>;
+export default LiteSpin;

package/dist/components/LiteSplitPaneLayout.svelte

@@ -5,25 +5,37 @@
     direction?: 'horizontal' | 'vertical';
     pane1?: Snippet;
     pane2?: Snippet;
+    /** Caller class for the outer split container. */
+    class?: string;
+    /** Caller class for the first pane. */
+    classPane1?: string;
+    /** Caller class for the divider. */
+    classDivider?: string;
+    /** Caller class for the second pane. */
+    classPane2?: string;
   }
 
   let {
     direction = 'horizontal',
     pane1,
     pane2,
+    class: className = '',
+    classPane1 = '',
+    classDivider = '',
+    classPane2 = '',
   }: Props = $props();
 </script>
 
-<div class="lite-split-layout lite-split-{direction}">
-  <div class="lite-split-pane-1">
+<div class={`lite-split-layout lite-split-${direction} ${className}`.trim()}>
+  <div class={`lite-split-pane-1 ${classPane1}`.trim()}>
     {#if pane1}
       {@render pane1()}
     {/if}
   </div>
 
-  <div class="lite-split-divider"></div>
+  <div class={`lite-split-divider ${classDivider}`.trim()}></div>
 
-  <div class="lite-split-pane-2">
+  <div class={`lite-split-pane-2 ${classPane2}`.trim()}>
     {#if pane2}
       {@render pane2()}
     {/if}

package/dist/components/LiteSplitPaneLayout.svelte.d.ts

@@ -3,6 +3,14 @@ interface Props {
     direction?: 'horizontal' | 'vertical';
     pane1?: Snippet;
     pane2?: Snippet;
+    /** Caller class for the outer split container. */
+    class?: string;
+    /** Caller class for the first pane. */
+    classPane1?: string;
+    /** Caller class for the divider. */
+    classDivider?: string;
+    /** Caller class for the second pane. */
+    classPane2?: string;
 }
 declare const LiteSplitPaneLayout: import("svelte").Component<Props, {}, "">;
 type LiteSplitPaneLayout = ReturnType<typeof LiteSplitPaneLayout>;

package/dist/components/LiteStatistic.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  interface Props {
+    title?: string;
+    value: number | string;
+    precision?: number;
+    prefix?: string;
+    suffix?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    trendLabel?: string;
+    loading?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let {
+    title,
+    value,
+    precision = 0,
+    prefix,
+    suffix,
+    trend,
+    trendLabel,
+    loading = false,
+    class: className = '',
+  }: Props = $props();
+
+  const display = $derived(
+    typeof value === 'number'
+      ? new Intl.NumberFormat(undefined, { minimumFractionDigits: precision, maximumFractionDigits: precision }).format(value)
+      : value,
+  );
+</script>
+
+<div class="lite-statistic {className}" aria-busy={loading || undefined}>
+  {#if title}<p class="lite-statistic__title">{title}</p>{/if}
+  <p class="lite-statistic__value">
+    {#if prefix}<span>{prefix}</span>{/if}
+    {#if loading}<span class="lite-statistic__skeleton" aria-hidden="true"></span><span class="lite-statistic__sr">{display}</span>{:else}{display}{/if}
+    {#if suffix}<span>{suffix}</span>{/if}
+  </p>
+  {#if trend || trendLabel}
+    <p class="lite-statistic__trend" data-trend={trend ?? 'neutral'}>
+      {#if trend === 'up'}↑{:else if trend === 'down'}↓{:else}→{/if}
+      {#if trendLabel}<span>{trendLabel}</span>{/if}
+    </p>
+  {/if}
+</div>
+
+<style>
+  .lite-statistic { display: block; min-width: 0; }
+  .lite-statistic__title { margin: 0; color: #86909C; font-size: 13px; }
+  .lite-statistic__value { display: flex; align-items: baseline; margin: 0; color: #1D2129; font-size: 24px; font-weight: 650; line-height: 1.2; }
+  .lite-statistic__value > span:first-child, .lite-statistic__value > span:last-child { color: #86909C; font-size: 13px; font-weight: 500; }
+  .lite-statistic__trend { display: flex; margin: 0; color: #86909C; font-size: 12px; }
+  .lite-statistic__trend[data-trend='up'] { color: #009A29; }
+  .lite-statistic__trend[data-trend='down'] { color: #F53F3F; }
+  .lite-statistic__skeleton { display: inline-block; width: 72px; height: 22px; border-radius: 4px; background: #F2F3F5; animation: lite-statistic-pulse 1.4s ease-in-out infinite; }
+  .lite-statistic__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  @keyframes lite-statistic-pulse { 50% { opacity: 0.5; } }
+
+  .lite-statistic__value > * + * { margin-left: 4px; }
+  .lite-statistic__trend > * + * { margin-left: 4px; }
+</style>

package/dist/components/LiteStatistic.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    title?: string;
+    value: number | string;
+    precision?: number;
+    prefix?: string;
+    suffix?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    trendLabel?: string;
+    loading?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteStatistic: import("svelte").Component<Props, {}, "">;
+type LiteStatistic = ReturnType<typeof LiteStatistic>;
+export default LiteStatistic;

package/dist/components/LiteStatsCard.svelte

@@ -20,6 +20,8 @@
     icon?: string;
     /** Link to detail page */
     href?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -30,11 +32,12 @@
     trendValue,
     icon,
     href,
+    class: className = '',
   }: Props = $props();
 </script>
 
 {#if href}
-  <a href={href} class="lite-stats-card lite-card" style="text-decoration:none;display:block;">
+  <a href={href} class="lite-stats-card lite-card {className}" style="text-decoration:none;display:block;">
     {#if icon}
       <div class="lite-stats-icon">{icon}</div>
     {/if}
@@ -51,7 +54,7 @@
     {/if}
   </a>
 {:else}
-  <div class="lite-stats-card lite-card">
+  <div class="lite-stats-card lite-card {className}">
     {#if icon}
       <div class="lite-stats-icon">{icon}</div>
     {/if}

package/dist/components/LiteStatsCard.svelte.d.ts

@@ -18,6 +18,8 @@ interface Props {
     icon?: string;
     /** Link to detail page */
     href?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteStatsCard: import("svelte").Component<Props, {}, "">;
 type LiteStatsCard = ReturnType<typeof LiteStatsCard>;

package/dist/components/LiteStatusBadge.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import LiteBadge, { type LiteBadgeVariant } from './LiteBadge.svelte';
+
+  interface Props {
+    status: string;
+    tone?: LiteBadgeVariant;
+    label?: string;
+    href?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let { status, tone, label, href, class: className = '' }: Props = $props();
+
+  const normalized = $derived(status.toLowerCase().replace(/[\s_]+/g, '-'));
+  const resolvedTone = $derived(tone ?? (
+    ['active', 'success', 'completed', 'approved', 'online', 'enabled'].includes(normalized) ? 'success'
+      : ['error', 'failed', 'rejected', 'danger', 'offline', 'disabled'].includes(normalized) ? 'destructive'
+        : ['warning', 'pending', 'review', 'processing'].includes(normalized) ? 'warning'
+          : ['info', 'new', 'draft'].includes(normalized) ? 'info'
+            : 'secondary'
+  ));
+</script>
+
+{#if href}
+  <a href={href} class="lite-status-badge {className}"><LiteBadge variant={resolvedTone}>{label ?? status}</LiteBadge></a>
+{:else}
+  <span class="lite-status-badge {className}"><LiteBadge variant={resolvedTone}>{label ?? status}</LiteBadge></span>
+{/if}
+
+<style>
+  .lite-status-badge { display: inline-flex; text-decoration: none; }
+</style>

package/dist/components/LiteStatusBadge.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type LiteBadgeVariant } from './LiteBadge.svelte';
+interface Props {
+    status: string;
+    tone?: LiteBadgeVariant;
+    label?: string;
+    href?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteStatusBadge: import("svelte").Component<Props, {}, "">;
+type LiteStatusBadge = ReturnType<typeof LiteStatusBadge>;
+export default LiteStatusBadge;

package/dist/components/LiteStatusTabs.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  interface StatusTab {
+    id: string;
+    label: string;
+    count?: number;
+    href: string;
+    active?: boolean;
+  }
+
+  interface Props {
+    tabs: StatusTab[];
+    label?: string;
+  }
+
+  let { tabs, label = 'Status tabs' }: Props = $props();
+</script>
+
+<nav class="lite-status-tabs" aria-label={label}>
+  {#each tabs as tab (tab.id)}
+    <a href={tab.href} class:active={tab.active} aria-current={tab.active ? 'page' : undefined}>
+      {tab.label}
+      {#if tab.count !== undefined}<span class="lite-badge lite-badge-secondary">{tab.count}</span>{/if}
+    </a>
+  {/each}
+</nav>
+
+<style>
+  .lite-status-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #E5E6EB; }
+  .lite-status-tabs a { display: inline-flex; align-items: center; padding: 8px 12px; border-bottom: 2px solid transparent; color: #4E5969; font-size: 13px; text-decoration: none; }
+  .lite-status-tabs a:hover { color: #165DFF; text-decoration: none; }
+  .lite-status-tabs a.active { border-bottom-color: #165DFF; color: #165DFF; font-weight: 600; }
+
+  .lite-status-tabs a + a { margin-left: 4px; }
+  .lite-status-tabs a > * + * { margin-left: 6px; }
+</style>

package/dist/components/LiteStatusTabs.svelte.d.ts

@@ -0,0 +1,14 @@
+interface StatusTab {
+    id: string;
+    label: string;
+    count?: number;
+    href: string;
+    active?: boolean;
+}
+interface Props {
+    tabs: StatusTab[];
+    label?: string;
+}
+declare const LiteStatusTabs: import("svelte").Component<Props, {}, "">;
+type LiteStatusTabs = ReturnType<typeof LiteStatusTabs>;
+export default LiteStatusTabs;

package/dist/components/LiteStepForm.svelte

@@ -15,6 +15,8 @@
     nextText?: string;
     prevText?: string;
     children?: Snippet;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -26,10 +28,11 @@
     nextText = 'Next Step',
     prevText = 'Previous Step',
     children,
+    class: className = '',
   }: Props = $props();
 </script>
 
-<div class="lite-step-form-card">
+<div class="lite-step-form-card {className}">
   <!-- Step Indicators -->
   <div class="lite-step-header">
     {#each steps as step, index (index)}

package/dist/components/LiteStepForm.svelte.d.ts

@@ -12,6 +12,8 @@ interface Props {
     nextText?: string;
     prevText?: string;
     children?: Snippet;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteStepForm: import("svelte").Component<Props, {}, "">;
 type LiteStepForm = ReturnType<typeof LiteStepForm>;