@miozu/jera 0.0.2 → 0.3.0

package/src/components/primitives/Avatar.svelte

@@ -0,0 +1,132 @@
+<!--
+  @component Avatar
+
+  User avatar with image, initials fallback, and status indicator.
+
+  @example With image
+  <Avatar src="/user.jpg" alt="John Doe" />
+
+  @example With initials fallback
+  <Avatar name="John Doe" />
+
+  @example With status
+  <Avatar src="/user.jpg" status="online" />
+-->
+<script>
+  import { cv } from '../../utils/cn.svelte.js';
+
+  let {
+    src = '',
+    alt = '',
+    name = '',
+    size = 'md',
+    status = null,
+    class: className = ''
+  } = $props();
+
+  // Generate initials from name
+  const initials = $derived.by(() => {
+    if (!name) return '';
+    const parts = name.trim().split(/\s+/);
+    if (parts.length >= 2) {
+      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    return parts[0].slice(0, 2).toUpperCase();
+  });
+
+  // Generate consistent color from name
+  const bgColor = $derived.by(() => {
+    if (!name) return 'var(--color-border)';
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const colors = [
+      'var(--color-error)',     // red
+      'var(--orange)',          // orange
+      'var(--color-success)',   // green
+      'var(--color-warning)',   // yellow
+      'var(--color-info)',      // blue
+      'var(--color-primary)',   // magenta
+      'var(--peach)',           // peach
+      'var(--color-accent)'     // cyan
+    ];
+    return colors[Math.abs(hash) % colors.length];
+  });
+
+  let imgError = $state(false);
+  const showImage = $derived(src && !imgError);
+</script>
+
+<div class="avatar avatar-{size} {className}">
+  {#if showImage}
+    <img
+      {src}
+      alt={alt || name}
+      class="avatar-image"
+      onerror={() => imgError = true}
+    />
+  {:else}
+    <span class="avatar-initials" style="background: {bgColor};">
+      {initials}
+    </span>
+  {/if}
+
+  {#if status}
+    <span class="avatar-status avatar-status-{status}"></span>
+  {/if}
+</div>
+
+<style>
+  .avatar {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  /* Size variants */
+  .avatar-xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
+  .avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
+  .avatar-md { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
+  .avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
+  .avatar-xl { width: 4rem; height: 4rem; font-size: 1.25rem; }
+  .avatar-2xl { width: 5rem; height: 5rem; font-size: 1.5rem; }
+
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatar-initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: white;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  .avatar-status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 25%;
+    height: 25%;
+    min-width: 8px;
+    min-height: 8px;
+    border-radius: 50%;
+    border: 2px solid var(--color-bg);
+  }
+
+  .avatar-status-online { background: var(--color-success); }
+  .avatar-status-offline { background: var(--color-text-muted); }
+  .avatar-status-busy { background: var(--color-error); }
+  .avatar-status-away { background: var(--color-warning); }
+</style>

package/src/components/primitives/Badge.svelte

@@ -0,0 +1,118 @@
+<!--
+  @component Badge
+
+  A versatile badge/tag component for status, labels, and counts.
+  Consolidates Badge, StatusBadge, and Status patterns into one component.
+
+  @example
+  <Badge>Default</Badge>
+  <Badge variant="success">Active</Badge>
+  <Badge variant="error" size="sm">Error</Badge>
+
+  @example
+  // With icon
+  <Badge variant="primary">
+    {#snippet iconLeft()}<CheckIcon size={12} />{/snippet}
+    Verified
+  </Badge>
+
+  @example
+  // Clickable badge
+  <Badge onclick={() => filter('active')} clickable>Active</Badge>
+-->
+<script module>
+  import { cv } from '../../utils/cn.svelte.js';
+
+  export const badgeStyles = cv({
+    base: [
+      'inline-flex items-center justify-center gap-1',
+      'font-medium rounded-full',
+      'transition-colors'
+    ].join(' '),
+
+    variants: {
+      variant: {
+        default: 'bg-[var(--color-surface-alt)] text-[var(--color-text)]',
+        primary: 'bg-[color-mix(in_srgb,var(--color-primary)_15%,transparent)] text-[var(--color-primary)]',
+        secondary: 'bg-[color-mix(in_srgb,var(--color-secondary)_15%,transparent)] text-[var(--color-secondary)]',
+        success: 'bg-[color-mix(in_srgb,var(--color-success)_15%,transparent)] text-[var(--color-success)]',
+        warning: 'bg-[color-mix(in_srgb,var(--color-warning)_15%,transparent)] text-[var(--color-warning)]',
+        error: 'bg-[color-mix(in_srgb,var(--color-error)_15%,transparent)] text-[var(--color-error)]',
+        info: 'bg-[color-mix(in_srgb,var(--color-info)_15%,transparent)] text-[var(--color-info)]'
+      },
+
+      size: {
+        sm: 'px-2 py-0.5 text-xs',
+        md: 'px-2.5 py-1 text-xs',
+        lg: 'px-3 py-1.5 text-sm'
+      },
+
+      clickable: {
+        true: 'cursor-pointer hover:opacity-80',
+        false: ''
+      }
+    },
+
+    defaults: {
+      variant: 'default',
+      size: 'md',
+      clickable: 'false'
+    }
+  });
+</script>
+
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    children,
+    iconLeft,
+    iconRight,
+    variant = 'default',
+    size = 'md',
+    clickable = false,
+    class: className = '',
+    onclick,
+    ...rest
+  } = $props();
+
+  const badgeClass = $derived(
+    badgeStyles({
+      variant,
+      size,
+      clickable: (clickable || onclick) ? 'true' : 'false',
+      class: className
+    })
+  );
+</script>
+
+{#if onclick || clickable}
+  <button
+    type="button"
+    class={badgeClass}
+    {onclick}
+    {...rest}
+  >
+    {#if iconLeft}
+      <span class="shrink-0">{@render iconLeft()}</span>
+    {/if}
+    {#if children}
+      {@render children()}
+    {/if}
+    {#if iconRight}
+      <span class="shrink-0">{@render iconRight()}</span>
+    {/if}
+  </button>
+{:else}
+  <span class={badgeClass} {...rest}>
+    {#if iconLeft}
+      <span class="shrink-0">{@render iconLeft()}</span>
+    {/if}
+    {#if children}
+      {@render children()}
+    {/if}
+    {#if iconRight}
+      <span class="shrink-0">{@render iconRight()}</span>
+    {/if}
+  </span>
+{/if}

package/src/components/primitives/Button.svelte

@@ -0,0 +1,262 @@
+<!--
+  @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,
+    iconRight,
+    variant = 'primary',
+    size = 'md',
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    href,
+    type = 'button',
+    class: className = '',
+    onclick,
+    ...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
+    })
+  );
+
+  // Loading spinner
+  const spinnerSize = $derived({
+    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}
+    class={buttonClass}
+    aria-disabled={isDisabled || undefined}
+    role="button"
+    {...restProps}
+  >
+    {#if loading}
+      <svg
+        class="animate-spin"
+        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>
+    {/if}
+
+    {#if children}
+      <span class={cn(loading && 'opacity-0')}>
+        {@render children()}
+      </span>
+    {/if}
+
+    {#if iconRight && !loading}
+      <span class="inline-flex shrink-0">
+        {@render iconRight()}
+      </span>
+    {/if}
+  </a>
+{:else}
+  <button
+    {type}
+    class={buttonClass}
+    disabled={isDisabled}
+    aria-busy={loading || undefined}
+    {onclick}
+    {...restProps}
+  >
+    {#if loading}
+      <svg
+        class="animate-spin"
+        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>
+    {/if}
+
+    {#if children}
+      <span class={cn(loading && 'opacity-70')}>
+        {@render children()}
+      </span>
+    {/if}
+
+    {#if iconRight && !loading}
+      <span class="inline-flex shrink-0">
+        {@render iconRight()}
+      </span>
+    {/if}
+  </button>
+{/if}
+
+<style>
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .animate-spin {
+    animation: spin 1s linear infinite;
+  }
+</style>

package/src/components/primitives/Card.svelte

@@ -0,0 +1,104 @@
+<!--
+  @component Card
+
+  A flexible card container with optional title and variants.
+
+  @example Basic
+  <Card>
+    <p>Card content here</p>
+  </Card>
+
+  @example With title
+  <Card title="Settings">
+    <p>Your settings content</p>
+  </Card>
+
+  @example Danger variant
+  <Card title="Danger Zone" variant="danger">
+    <Button variant="danger">Delete Account</Button>
+  </Card>
+-->
+<script>
+  let {
+    title = '',
+    variant = 'default',
+    class: className = '',
+    children
+  } = $props();
+</script>
+
+<div class="card card-{variant} {className}">
+  {#if title}
+    <h3 class="card-title">{@html title}</h3>
+  {/if}
+  <div class="card-content">
+    {@render children?.()}
+  </div>
+</div>
+
+<style>
+  .card {
+    background: transparent;
+    border: 1px solid var(--color-border-muted);
+    border-radius: var(--radius-xl);
+    padding: var(--space-6);
+    transition: border-color 0.2s ease;
+  }
+
+  .card:hover {
+    border-color: var(--color-border);
+  }
+
+  .card-danger {
+    border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
+    background: color-mix(in srgb, var(--color-error) 3%, transparent);
+  }
+
+  .card-danger:hover {
+    border-color: color-mix(in srgb, var(--color-error) 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);
+  }
+
+  .card-warning:hover {
+    border-color: color-mix(in srgb, var(--color-warning) 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);
+  }
+
+  .card-success:hover {
+    border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
+  }
+
+  .card-title {
+    margin: 0 0 var(--space-5) 0;
+    font-size: var(--text-base);
+    font-weight: 500;
+    color: var(--color-text-strong);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .card-danger .card-title {
+    color: var(--color-error);
+  }
+
+  .card-warning .card-title {
+    color: var(--color-warning);
+  }
+
+  .card-success .card-title {
+    color: var(--color-success);
+  }
+
+  .card-content {
+    /* Allow child components to handle their own spacing */
+  }
+</style>