@miozu/jera 0.3.0 → 0.4.2

package/src/components/primitives/Button.svelte

@@ -2,126 +2,16 @@
   @component Button
 
   A polymorphic button component with variants, sizes, and loading states.
-  Demonstrates advanced Svelte 5 patterns:
-
-  - Polymorphic rendering (as button, a, or custom element)
-  - Reactive class composition with cv()
-  - Snippets for icon slots
-  - $derived for computed properties
-  - TypeScript-style prop definitions
 
   @example
   <Button>Click me</Button>
   <Button variant="secondary" size="lg">Large Secondary</Button>
   <Button href="/about">Link Button</Button>
   <Button loading>Loading...</Button>
-  <Button disabled>Disabled</Button>
-  <Button>
-    {#snippet iconLeft()}<IconPlus />{/snippet}
-    Add Item
-  </Button>
 -->
-<script module>
-  import { cv } from '../../utils/cn.svelte.js';
-
-  /**
-   * Button style variants using cv() for type-safe composition
-   */
-  export const buttonStyles = cv({
-    base: [
-      'inline-flex items-center justify-center gap-2',
-      'font-medium rounded-lg',
-      'transition-all duration-150 ease-out',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-      'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
-      'select-none'
-    ].join(' '),
-
-    variants: {
-      variant: {
-        primary: [
-          'bg-primary text-white',
-          'hover:brightness-110 active:brightness-95',
-          'focus-visible:ring-primary/50'
-        ].join(' '),
-
-        secondary: [
-          'bg-surface-alt text-text-strong border border-border',
-          'hover:bg-hover hover:border-muted',
-          'focus-visible:ring-border'
-        ].join(' '),
-
-        ghost: [
-          'bg-transparent text-text',
-          'hover:bg-hover',
-          'focus-visible:ring-border'
-        ].join(' '),
-
-        outline: [
-          'bg-transparent text-primary border border-primary/40',
-          'hover:bg-primary/5 hover:border-primary',
-          'focus-visible:ring-primary/50'
-        ].join(' '),
-
-        danger: [
-          'bg-error text-white',
-          'hover:brightness-110 active:brightness-95',
-          'focus-visible:ring-error/50'
-        ].join(' '),
-
-        success: [
-          'bg-success text-white',
-          'hover:brightness-110 active:brightness-95',
-          'focus-visible:ring-success/50'
-        ].join(' ')
-      },
-
-      size: {
-        xs: 'h-7 px-2.5 text-xs',
-        sm: 'h-8 px-3 text-sm',
-        md: 'h-10 px-4 text-sm',
-        lg: 'h-12 px-6 text-base',
-        xl: 'h-14 px-8 text-lg'
-      },
-
-      fullWidth: {
-        true: 'w-full',
-        false: ''
-      },
-
-      iconOnly: {
-        true: 'aspect-square p-0',
-        false: ''
-      }
-    },
-
-    compounds: [
-      // Icon-only buttons need adjusted padding
-      { condition: { iconOnly: 'true', size: 'xs' }, class: 'w-7' },
-      { condition: { iconOnly: 'true', size: 'sm' }, class: 'w-8' },
-      { condition: { iconOnly: 'true', size: 'md' }, class: 'w-10' },
-      { condition: { iconOnly: 'true', size: 'lg' }, class: 'w-12' },
-      { condition: { iconOnly: 'true', size: 'xl' }, class: 'w-14' }
-    ],
-
-    defaults: {
-      variant: 'primary',
-      size: 'md',
-      fullWidth: 'false',
-      iconOnly: 'false'
-    }
-  });
-</script>
-
 <script>
   import { cn } from '../../utils/cn.svelte.js';
 
-  /**
-   * @typedef {import('svelte').Snippet} Snippet
-   * @typedef {'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'success'} Variant
-   * @typedef {'xs' | 'sm' | 'md' | 'lg' | 'xl'} Size
-   */
-
   let {
     children,
     iconLeft,
@@ -138,36 +28,26 @@
     ...restProps
   } = $props();
 
-  // Derived state
   const isLink = $derived(!!href);
   const isIconOnly = $derived(!children && (!!iconLeft || !!iconRight));
   const isDisabled = $derived(disabled || loading);
 
-  // Reactive class composition
   const buttonClass = $derived(
-    buttonStyles({
-      variant,
-      size,
-      fullWidth: fullWidth ? 'true' : 'false',
-      iconOnly: isIconOnly ? 'true' : 'false',
-      class: className
-    })
+    cn(
+      'btn',
+      `btn-${variant}`,
+      `btn-${size}`,
+      fullWidth && 'btn-full',
+      isIconOnly && 'btn-icon-only',
+      className
+    )
   );
 
-  // Loading spinner
   const spinnerSize = $derived({
-    xs: 12,
-    sm: 14,
-    md: 16,
-    lg: 18,
-    xl: 20
+    xs: 12, sm: 14, md: 16, lg: 18, xl: 20
   }[size]);
 </script>
 
-<!--
-  Polymorphic rendering: renders as <a> if href provided, otherwise <button>
-  Uses Svelte 5's element binding with spread props
--->
 {#if isLink}
   <a
     {href}
@@ -177,34 +57,18 @@
     {...restProps}
   >
     {#if loading}
-      <svg
-        class="animate-spin"
-        width={spinnerSize}
-        height={spinnerSize}
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-      >
+      <svg class="btn-spinner" width={spinnerSize} height={spinnerSize} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <circle cx="12" cy="12" r="10" opacity="0.25" />
         <path d="M12 2a10 10 0 0 1 10 10" opacity="0.75" />
       </svg>
     {:else if iconLeft}
-      <span class="inline-flex shrink-0">
-        {@render iconLeft()}
-      </span>
+      <span class="btn-icon">{@render iconLeft()}</span>
     {/if}
-
     {#if children}
-      <span class={cn(loading && 'opacity-0')}>
-        {@render children()}
-      </span>
+      <span class={loading ? 'btn-content-loading' : ''}>{@render children()}</span>
     {/if}
-
     {#if iconRight && !loading}
-      <span class="inline-flex shrink-0">
-        {@render iconRight()}
-      </span>
+      <span class="btn-icon">{@render iconRight()}</span>
     {/if}
   </a>
 {:else}
@@ -217,46 +81,134 @@
     {...restProps}
   >
     {#if loading}
-      <svg
-        class="animate-spin"
-        width={spinnerSize}
-        height={spinnerSize}
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-      >
+      <svg class="btn-spinner" width={spinnerSize} height={spinnerSize} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <circle cx="12" cy="12" r="10" opacity="0.25" />
         <path d="M12 2a10 10 0 0 1 10 10" opacity="0.75" />
       </svg>
     {:else if iconLeft}
-      <span class="inline-flex shrink-0">
-        {@render iconLeft()}
-      </span>
+      <span class="btn-icon">{@render iconLeft()}</span>
     {/if}
-
     {#if children}
-      <span class={cn(loading && 'opacity-70')}>
-        {@render children()}
-      </span>
+      <span class={loading ? 'btn-content-loading' : ''}>{@render children()}</span>
     {/if}
-
     {#if iconRight && !loading}
-      <span class="inline-flex shrink-0">
-        {@render iconRight()}
-      </span>
+      <span class="btn-icon">{@render iconRight()}</span>
     {/if}
   </button>
 {/if}
 
 <style>
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
+  /* Base button styles */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    font-weight: 500;
+    border-radius: var(--radius-lg, 0.5rem);
+    border: 1px solid transparent;
+    cursor: pointer;
+    user-select: none;
+    transition: all 150ms ease-out;
+  }
+
+  .btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-base00), 0 0 0 4px var(--color-base0D);
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
   }
 
-  .animate-spin {
+  /* Variants */
+  .btn-primary {
+    background-color: var(--color-base0D);
+    color: var(--color-base07);
+  }
+  .btn-primary:hover {
+    filter: brightness(1.1);
+  }
+  .btn-primary:active {
+    filter: brightness(0.95);
+  }
+
+  .btn-secondary {
+    background-color: var(--color-base02);
+    color: var(--color-base07);
+    border-color: var(--color-base03);
+  }
+  .btn-secondary:hover {
+    background-color: var(--color-base03);
+  }
+
+  .btn-ghost {
+    background-color: transparent;
+    color: var(--color-base05);
+  }
+  .btn-ghost:hover {
+    background-color: var(--color-base02);
+  }
+
+  .btn-outline {
+    background-color: transparent;
+    color: var(--color-base0D);
+    border-color: color-mix(in srgb, var(--color-base0D) 40%, transparent);
+  }
+  .btn-outline:hover {
+    background-color: color-mix(in srgb, var(--color-base0D) 5%, transparent);
+    border-color: var(--color-base0D);
+  }
+
+  .btn-danger {
+    background-color: var(--color-base08);
+    color: var(--color-base07);
+  }
+  .btn-danger:hover {
+    filter: brightness(1.1);
+  }
+
+  .btn-success {
+    background-color: var(--color-base0B);
+    color: var(--color-base07);
+  }
+  .btn-success:hover {
+    filter: brightness(1.1);
+  }
+
+  /* Sizes */
+  .btn-xs { height: 1.75rem; padding: 0 0.625rem; font-size: 0.75rem; }
+  .btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.875rem; }
+  .btn-md { height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }
+  .btn-lg { height: 3rem; padding: 0 1.5rem; font-size: 1rem; }
+  .btn-xl { height: 3.5rem; padding: 0 2rem; font-size: 1.125rem; }
+
+  /* Modifiers */
+  .btn-full { width: 100%; }
+  .btn-icon-only { aspect-ratio: 1; padding: 0; }
+  .btn-icon-only.btn-xs { width: 1.75rem; }
+  .btn-icon-only.btn-sm { width: 2rem; }
+  .btn-icon-only.btn-md { width: 2.5rem; }
+  .btn-icon-only.btn-lg { width: 3rem; }
+  .btn-icon-only.btn-xl { width: 3.5rem; }
+
+  /* Icon and spinner */
+  .btn-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .btn-spinner {
     animation: spin 1s linear infinite;
   }
+
+  .btn-content-loading {
+    opacity: 0;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
 </style>

package/src/components/primitives/Card.svelte

@@ -39,63 +39,63 @@
 <style>
   .card {
     background: transparent;
-    border: 1px solid var(--color-border-muted);
+    border: 1px solid var(--color-base02);
     border-radius: var(--radius-xl);
     padding: var(--space-6);
     transition: border-color 0.2s ease;
   }
 
   .card:hover {
-    border-color: var(--color-border);
+    border-color: var(--color-base03);
   }
 
   .card-danger {
-    border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
-    background: color-mix(in srgb, var(--color-error) 3%, transparent);
+    border-color: color-mix(in srgb, var(--color-base08) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base08) 3%, transparent);
   }
 
   .card-danger:hover {
-    border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
+    border-color: color-mix(in srgb, var(--color-base08) 40%, transparent);
   }
 
   .card-warning {
-    border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
-    background: color-mix(in srgb, var(--color-warning) 3%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0A) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base0A) 3%, transparent);
   }
 
   .card-warning:hover {
-    border-color: color-mix(in srgb, var(--color-warning) 40%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0A) 40%, transparent);
   }
 
   .card-success {
-    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
-    background: color-mix(in srgb, var(--color-success) 3%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0B) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base0B) 3%, transparent);
   }
 
   .card-success:hover {
-    border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0B) 40%, transparent);
   }
 
   .card-title {
     margin: 0 0 var(--space-5) 0;
     font-size: var(--text-base);
     font-weight: 500;
-    color: var(--color-text-strong);
+    color: var(--color-base07);
     display: flex;
     align-items: center;
     gap: var(--space-2);
   }
 
   .card-danger .card-title {
-    color: var(--color-error);
+    color: var(--color-base08);
   }
 
   .card-warning .card-title {
-    color: var(--color-warning);
+    color: var(--color-base0A);
   }
 
   .card-success .card-title {
-    color: var(--color-success);
+    color: var(--color-base0B);
   }
 
   .card-content {

package/src/components/primitives/Divider.svelte

@@ -50,7 +50,7 @@
 
 <style>
   .divider {
-    background: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base04) 30%, transparent);
     flex-shrink: 0;
   }
 
@@ -84,7 +84,7 @@
 
   .divider-line {
     flex: 1;
-    background: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base04) 30%, transparent);
   }
 
   .divider-horizontal .divider-line {
@@ -97,7 +97,7 @@
 
   .divider-label {
     font-size: 0.75rem;
-    color: var(--color-text-muted);
+    color: var(--color-base04);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     white-space: nowrap;

package/src/components/primitives/LazyImage.svelte

@@ -95,7 +95,7 @@
 
   .lazy-loading {
     opacity: 0;
-    background: var(--color-surface);
+    background: var(--color-base01);
   }
 
   .lazy-loaded {

package/src/components/primitives/Link.svelte

@@ -98,7 +98,7 @@
     gap: 0.375rem;
     font-size: var(--text-xs);
     font-weight: 500;
-    color: var(--color-primary);
+    color: var(--color-base0D);
     text-decoration: none;
     background: transparent;
     border: none;
@@ -108,7 +108,7 @@
   }
 
   .link:hover {
-    color: color-mix(in srgb, var(--color-primary) 80%, transparent);
+    color: color-mix(in srgb, var(--color-base0D) 80%, transparent);
   }
 
   .link-icon {

package/src/components/primitives/Stat.svelte

@@ -0,0 +1,197 @@
+<!--
+  @component Stat
+
+  A metric display component showing a value and label with optional status indicator.
+
+  @example Basic
+  <Stat value="42" label="Users" />
+
+  @example With status
+  <Stat value="95%" label="Uptime" status="success" />
+
+  @example With bar
+  <Stat value="75" max={100} label="Progress" showBar />
+
+  @example With unit and secondary value
+  <Stat value="12" unit="/15" label="Tasks" status="warning" />
+
+  @example As link
+  <Stat value="8" label="Errors" href="/errors" status="error" />
+-->
+<script>
+  let {
+    value,
+    label,
+    unit = '',
+    secondary = '',
+    status = '',
+    size = 'md',
+    showBar = false,
+    barValue = 0,
+    max = 100,
+    href = '',
+    class: className = '',
+    children
+  } = $props();
+
+  const barPercent = $derived(Math.min((barValue || value) / max * 100, 100));
+  const Tag = $derived(href ? 'a' : 'div');
+</script>
+
+<svelte:element
+  this={Tag}
+  {href}
+  class="stat stat-{size} {status ? `stat-${status}` : ''} {href ? 'stat-link' : ''} {className}"
+>
+  {#if status}
+    <span class="stat-dot stat-dot-{status}"></span>
+  {/if}
+
+  <div class="stat-content">
+    <div class="stat-value">
+      {value}{#if unit}<span class="stat-unit">{unit}</span>{/if}
+    </div>
+
+    {#if secondary}
+      <div class="stat-secondary">{secondary}</div>
+    {/if}
+
+    <div class="stat-label">{label}</div>
+
+    {#if showBar}
+      <div class="stat-bar">
+        <div
+          class="stat-bar-fill {status ? `stat-bar-${status}` : ''}"
+          style="width: {barPercent}%"
+        ></div>
+      </div>
+    {/if}
+
+    {#if children}
+      <div class="stat-extra">
+        {@render children()}
+      </div>
+    {/if}
+  </div>
+</svelte:element>
+
+<style>
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .stat-link {
+    cursor: pointer;
+  }
+
+  .stat-link:hover .stat-value {
+    color: var(--color-base07);
+  }
+
+  /* Size variants */
+  .stat-sm .stat-value {
+    font-size: var(--text-lg);
+  }
+
+  .stat-sm .stat-label {
+    font-size: 10px;
+  }
+
+  .stat-md .stat-value {
+    font-size: var(--text-2xl);
+  }
+
+  .stat-md .stat-label {
+    font-size: var(--text-xs);
+  }
+
+  .stat-lg .stat-value {
+    font-size: var(--text-3xl);
+  }
+
+  .stat-lg .stat-label {
+    font-size: var(--text-sm);
+  }
+
+  /* Content */
+  .stat-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .stat-value {
+    font-weight: 600;
+    color: var(--color-base06);
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    transition: color 0.2s ease;
+  }
+
+  .stat-unit {
+    font-size: 0.6em;
+    font-weight: 400;
+    color: var(--color-base04);
+  }
+
+  .stat-secondary {
+    font-size: var(--text-sm);
+    color: var(--color-base04);
+    margin-top: var(--space-1);
+  }
+
+  .stat-label {
+    color: var(--color-base04);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-top: var(--space-1);
+  }
+
+  .stat-extra {
+    margin-top: var(--space-2);
+  }
+
+  /* Status dot */
+  .stat-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    position: absolute;
+    top: var(--space-3);
+    right: var(--space-3);
+  }
+
+  .stat-dot-success { background: var(--color-base0B); }
+  .stat-dot-warning { background: var(--color-base0A); }
+  .stat-dot-error { background: var(--color-base08); }
+  .stat-dot-info { background: var(--color-base0D); }
+
+  /* Status value colors */
+  .stat-error .stat-value { color: var(--color-base08); }
+  .stat-warning .stat-value { color: var(--color-base0A); }
+  .stat-success .stat-value { color: var(--color-base0B); }
+
+  /* Progress bar */
+  .stat-bar {
+    height: 4px;
+    background: var(--color-base02);
+    border-radius: var(--radius-full);
+    margin-top: var(--space-3);
+    overflow: hidden;
+  }
+
+  .stat-bar-fill {
+    height: 100%;
+    background: var(--color-base0D);
+    border-radius: var(--radius-full);
+    transition: width 0.3s ease;
+  }
+
+  .stat-bar-success { background: var(--color-base0B); }
+  .stat-bar-warning { background: var(--color-base0A); }
+  .stat-bar-error { background: var(--color-base08); }
+</style>