@miozu/jera 0.0.2 → 0.4.2

package/src/components/feedback/ProgressBar.svelte

@@ -0,0 +1,116 @@
+<!--
+  @component ProgressBar
+
+  Visual progress indicator with optional label.
+
+  @example Basic usage
+  <ProgressBar value={65} />
+
+  @example With label
+  <ProgressBar value={65} showLabel />
+
+  @example Custom color
+  <ProgressBar value={80} variant="success" />
+-->
+<script>
+  let {
+    value = 0,
+    max = 100,
+    size = 'md',
+    variant = 'primary',
+    showLabel = false,
+    label = null,
+    indeterminate = false,
+    class: className = ''
+  } = $props();
+
+  const percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+
+  const variantColors = {
+    primary: 'var(--color-base0D)',
+    success: 'var(--color-base0B)',
+    warning: 'var(--color-base0A)',
+    error: 'var(--color-base08)',
+    info: 'var(--color-base0D)'
+  };
+
+  const barColor = $derived(variantColors[variant] || variantColors.primary);
+</script>
+
+<div class="progress-container {className}">
+  {#if showLabel || label}
+    <div class="progress-header">
+      {#if label}
+        <span class="progress-label">{label}</span>
+      {/if}
+      {#if showLabel && !indeterminate}
+        <span class="progress-value">{Math.round(percentage)}%</span>
+      {/if}
+    </div>
+  {/if}
+
+  <div
+    class="progress progress-{size}"
+    role="progressbar"
+    aria-valuenow={indeterminate ? undefined : value}
+    aria-valuemin="0"
+    aria-valuemax={max}
+  >
+    <div
+      class="progress-bar"
+      class:progress-indeterminate={indeterminate}
+      style="width: {indeterminate ? '100%' : percentage + '%'}; background: {barColor};"
+    ></div>
+  </div>
+</div>
+
+<style>
+  .progress-container {
+    width: 100%;
+  }
+
+  .progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.375rem;
+  }
+
+  .progress-label {
+    font-size: 0.875rem;
+    color: var(--color-base05);
+  }
+
+  .progress-value {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-base07);
+  }
+
+  .progress {
+    width: 100%;
+    background: var(--color-base02);
+    border-radius: 9999px;
+    overflow: hidden;
+  }
+
+  .progress-sm { height: 0.25rem; }
+  .progress-md { height: 0.5rem; }
+  .progress-lg { height: 0.75rem; }
+
+  .progress-bar {
+    height: 100%;
+    border-radius: 9999px;
+    transition: width 0.3s ease-out;
+  }
+
+  .progress-indeterminate {
+    width: 30% !important;
+    animation: indeterminate 1.5s ease-in-out infinite;
+  }
+
+  @keyframes indeterminate {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(400%); }
+  }
+</style>

package/src/components/feedback/Skeleton.svelte

@@ -0,0 +1,107 @@
+<!--
+  @component Skeleton
+
+  Loading placeholder with shimmer animation.
+
+  @example Text line
+  <Skeleton width="80%" />
+
+  @example Circle avatar
+  <Skeleton variant="circle" size="48px" />
+
+  @example Rectangle card
+  <Skeleton variant="rect" width="100%" height="200px" />
+-->
+<script>
+  let {
+    variant = 'text',
+    width = '100%',
+    height = null,
+    size = null,
+    lines = 1,
+    animate = true,
+    class: className = ''
+  } = $props();
+
+  // Compute dimensions based on variant
+  const computedHeight = $derived.by(() => {
+    if (height) return height;
+    if (size) return size;
+    switch (variant) {
+      case 'text': return '1rem';
+      case 'heading': return '1.5rem';
+      case 'circle': return size || '2.5rem';
+      case 'rect': return '4rem';
+      default: return '1rem';
+    }
+  });
+
+  const computedWidth = $derived.by(() => {
+    if (width) return width;
+    if (size && variant === 'circle') return size;
+    return '100%';
+  });
+</script>
+
+{#if lines > 1}
+  <div class="skeleton-lines {className}">
+    {#each Array(lines) as _, i}
+      <div
+        class="skeleton skeleton-{variant}"
+        class:skeleton-animate={animate}
+        style="width: {i === lines - 1 ? '60%' : computedWidth}; height: {computedHeight};"
+      ></div>
+    {/each}
+  </div>
+{:else}
+  <div
+    class="skeleton skeleton-{variant} {className}"
+    class:skeleton-animate={animate}
+    style="width: {computedWidth}; height: {computedHeight};"
+  ></div>
+{/if}
+
+<style>
+  .skeleton {
+    background: var(--color-base02);
+    border-radius: 0.25rem;
+  }
+
+  .skeleton-text {
+    border-radius: 0.25rem;
+  }
+
+  .skeleton-heading {
+    border-radius: 0.25rem;
+  }
+
+  .skeleton-circle {
+    border-radius: 50%;
+  }
+
+  .skeleton-rect {
+    border-radius: 0.5rem;
+  }
+
+  .skeleton-lines {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .skeleton-animate {
+    background: linear-gradient(
+      90deg,
+      var(--color-base02) 0%,
+      var(--color-base03) 50%,
+      var(--color-base02) 100%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  }
+
+  @keyframes skeleton-shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+</style>

package/src/components/feedback/Spinner.svelte

@@ -0,0 +1,77 @@
+<!--
+  @component Spinner
+
+  Loading spinner indicator.
+
+  @example Basic usage
+  <Spinner />
+
+  @example With size
+  <Spinner size="lg" />
+
+  @example Custom color
+  <Spinner color="var(--color-base0B)" />
+-->
+<script>
+  let {
+    size = 'md',
+    color = 'currentColor',
+    label = 'Loading...',
+    class: className = ''
+  } = $props();
+
+  const sizes = {
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48
+  };
+
+  const sizeValue = $derived(sizes[size] || sizes.md);
+</script>
+
+<svg
+  class="spinner {className}"
+  width={sizeValue}
+  height={sizeValue}
+  viewBox="0 0 24 24"
+  fill="none"
+  aria-label={label}
+  role="status"
+>
+  <circle
+    class="spinner-track"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="currentColor"
+    stroke-width="3"
+    opacity="0.2"
+  />
+  <circle
+    class="spinner-indicator"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke={color}
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-dasharray="60 200"
+  />
+</svg>
+
+<style>
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  .spinner-track {
+    opacity: 0.2;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+</style>

package/src/components/feedback/Toast.svelte

@@ -0,0 +1,261 @@
+<!--
+  @component Toast
+
+  A toast notification system with stacking, auto-dismiss, and animations.
+
+  @example
+  // In your root layout
+  <script>
+    import { Toast, createToastContext } from '@miozu/jera';
+    const toast = createToastContext();
+  </script>
+  <Toast />
+
+  // In any component
+  import { getToastContext } from '@miozu/jera';
+  const toast = getToastContext();
+  toast.success('Saved successfully!');
+-->
+<script module>
+  import { getContext, setContext } from 'svelte';
+
+  const TOAST_KEY = Symbol('jera-toast');
+
+  /**
+   * Toast Controller Class
+   */
+  export class ToastController {
+    toasts = $state.raw([]);
+    position = $state('bottom-right');
+    defaultDuration = 4000;
+    maxToasts = 5;
+    #counter = 0;
+
+    show(options) {
+      const id = `toast-${++this.#counter}`;
+      const toast = {
+        id,
+        type: options.type ?? 'info',
+        title: options.title,
+        message: options.message,
+        duration: options.duration ?? this.defaultDuration,
+        createdAt: Date.now()
+      };
+      this.toasts = [toast, ...this.toasts].slice(0, this.maxToasts);
+      return id;
+    }
+
+    dismiss(id) {
+      this.toasts = this.toasts.filter(t => t.id !== id);
+    }
+
+    dismissAll() {
+      this.toasts = [];
+    }
+
+    pause(id) {
+      this.toasts = this.toasts.map(t =>
+        t.id === id ? { ...t, pausedAt: Date.now() } : t
+      );
+    }
+
+    resume(id) {
+      this.toasts = this.toasts.map(t => {
+        if (t.id !== id || !t.pausedAt) return t;
+        const pausedDuration = Date.now() - t.pausedAt;
+        return { ...t, createdAt: t.createdAt + pausedDuration, pausedAt: undefined };
+      });
+    }
+
+    info = (message, options = {}) => this.show({ ...options, message, type: 'info' });
+    success = (message, options = {}) => this.show({ ...options, message, type: 'success' });
+    warning = (message, options = {}) => this.show({ ...options, message, type: 'warning' });
+    error = (message, options = {}) => this.show({ ...options, message, type: 'error' });
+  }
+
+  export function createToastContext() {
+    const controller = new ToastController();
+    setContext(TOAST_KEY, controller);
+    return controller;
+  }
+
+  export function getToastContext() {
+    return getContext(TOAST_KEY);
+  }
+</script>
+
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+  import { portal } from '../../actions/index.js';
+
+  const toast = getToastContext();
+
+  const icons = {
+    info: `<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>`,
+    success: `<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`,
+    warning: `<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>`,
+    error: `<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>`
+  };
+
+  const positionClass = $derived({
+    'top-left': 'toast-top-left',
+    'top-center': 'toast-top-center',
+    'top-right': 'toast-top-right',
+    'bottom-left': 'toast-bottom-left',
+    'bottom-center': 'toast-bottom-center',
+    'bottom-right': 'toast-bottom-right'
+  }[toast.position]);
+</script>
+
+{#if toast.toasts.length > 0}
+  <div use:portal class={cn('toast-container', positionClass)} role="region" aria-label="Notifications">
+    {#each toast.toasts as item (item.id)}
+      {@const remaining = item.duration - (Date.now() - item.createdAt)}
+      <div
+        class={cn('toast-item', `toast-${item.type}`)}
+        role="alert"
+        aria-live="polite"
+        onmouseenter={() => toast.pause(item.id)}
+        onmouseleave={() => toast.resume(item.id)}
+      >
+        <span class="toast-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            {@html icons[item.type]}
+          </svg>
+        </span>
+        <div class="toast-content">
+          {#if item.title}
+            <p class="toast-title">{item.title}</p>
+          {/if}
+          <p class={cn('toast-message', item.title && 'has-title')}>{item.message}</p>
+        </div>
+        <button type="button" class="toast-close" onclick={() => toast.dismiss(item.id)} aria-label="Dismiss">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+          </svg>
+        </button>
+        {#if item.duration > 0 && !item.pausedAt}
+          {@const _ = setTimeout(() => toast.dismiss(item.id), remaining)}
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .toast-container {
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    gap: 0.5rem;
+    pointer-events: none;
+  }
+
+  .toast-top-left { top: 1rem; left: 1rem; flex-direction: column; }
+  .toast-top-center { top: 1rem; left: 50%; transform: translateX(-50%); flex-direction: column; }
+  .toast-top-right { top: 1rem; right: 1rem; flex-direction: column; }
+  .toast-bottom-left { bottom: 1rem; left: 1rem; flex-direction: column-reverse; }
+  .toast-bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }
+  .toast-bottom-right { bottom: 1rem; right: 1rem; flex-direction: column-reverse; }
+
+  .toast-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    width: 100%;
+    max-width: 24rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+    pointer-events: auto;
+    animation: toast-in 200ms ease-out;
+  }
+
+  .toast-info {
+    background-color: var(--color-base01);
+    border-color: var(--color-base03);
+    color: var(--color-base05);
+  }
+
+  .toast-success {
+    background-color: color-mix(in srgb, var(--color-base0B) 10%, var(--color-base00));
+    border-color: color-mix(in srgb, var(--color-base0B) 30%, transparent);
+    color: var(--color-base0B);
+  }
+
+  .toast-warning {
+    background-color: color-mix(in srgb, var(--color-base0A) 10%, var(--color-base00));
+    border-color: color-mix(in srgb, var(--color-base0A) 30%, transparent);
+    color: var(--color-base0A);
+  }
+
+  .toast-error {
+    background-color: color-mix(in srgb, var(--color-base08) 10%, var(--color-base00));
+    border-color: color-mix(in srgb, var(--color-base08) 30%, transparent);
+    color: var(--color-base08);
+  }
+
+  .toast-icon {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .toast-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .toast-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .toast-title {
+    font-weight: 500;
+    font-size: 0.875rem;
+    margin: 0;
+  }
+
+  .toast-message {
+    font-size: 0.875rem;
+    margin: 0;
+  }
+
+  .toast-message.has-title {
+    margin-top: 0.25rem;
+    opacity: 0.9;
+  }
+
+  .toast-close {
+    flex-shrink: 0;
+    padding: 0.25rem;
+    border-radius: 0.375rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 150ms;
+  }
+
+  .toast-close:hover {
+    opacity: 1;
+  }
+
+  .toast-close svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  @keyframes toast-in {
+    from {
+      opacity: 0;
+      transform: translateX(1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+</style>

package/src/components/forms/Checkbox.svelte

@@ -0,0 +1,147 @@
+<!--
+  @component Checkbox
+
+  An accessible checkbox input with custom styling.
+
+  @example
+  <Checkbox bind:checked={agreed}>I agree to the terms</Checkbox>
+
+  @example
+  <Checkbox bind:checked={enabled} disabled>Disabled option</Checkbox>
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+  import { generateId } from '../../utils/reactive.svelte.js';
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    required = false,
+    error = false,
+    name = '',
+    id,
+    class: className = '',
+    children,
+    onchange,
+    ...rest
+  } = $props();
+
+  const inputId = id || generateId();
+  const checkboxClass = $derived(cn(
+    'checkbox-box',
+    error && 'checkbox-error'
+  ));
+</script>
+
+<label
+  class={cn('checkbox-wrapper', disabled && 'checkbox-disabled', className)}
+  for={inputId}
+>
+  <input
+    type="checkbox"
+    id={inputId}
+    {name}
+    {disabled}
+    {required}
+    bind:checked
+    {onchange}
+    class="checkbox-input"
+    aria-invalid={error || undefined}
+    {...rest}
+  />
+
+  <span class={checkboxClass}>
+    {#if checked}
+      <svg
+        class="checkbox-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    {/if}
+  </span>
+
+  {#if children}
+    <span class="checkbox-label">
+      {@render children()}
+    </span>
+  {/if}
+</label>
+
+<style>
+  .checkbox-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .checkbox-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .checkbox-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .checkbox-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: 2px solid var(--color-base03);
+    border-radius: var(--radius-default);
+    background-color: var(--color-base00);
+    transition: var(--transition-all);
+  }
+
+  .checkbox-input:checked + .checkbox-box {
+    background-color: var(--color-base0D);
+    border-color: var(--color-base0D);
+  }
+
+  .checkbox-error {
+    border-color: var(--color-base08);
+  }
+
+  .checkbox-input:checked + .checkbox-error {
+    background-color: var(--color-base08);
+    border-color: var(--color-base08);
+  }
+
+  .checkbox-input:focus-visible + .checkbox-box {
+    outline: 2px solid var(--color-base0D);
+    outline-offset: 2px;
+  }
+
+  .checkbox-input:focus-visible + .checkbox-error {
+    outline-color: var(--color-base08);
+  }
+
+  .checkbox-icon {
+    width: 12px;
+    height: 12px;
+    color: white;
+  }
+
+  .checkbox-label {
+    font-size: var(--text-sm);
+    color: var(--color-base05);
+  }
+</style>