@miozu/jera 0.0.2 → 0.4.2

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-base02)] text-[var(--color-base05)]',
+        primary: 'bg-[color-mix(in_srgb,var(--color-base0D)_15%,transparent)] text-[var(--color-base0D)]',
+        secondary: 'bg-[color-mix(in_srgb,var(--color-base0C)_15%,transparent)] text-[var(--color-base0C)]',
+        success: 'bg-[color-mix(in_srgb,var(--color-base0B)_15%,transparent)] text-[var(--color-base0B)]',
+        warning: 'bg-[color-mix(in_srgb,var(--color-base0A)_15%,transparent)] text-[var(--color-base0A)]',
+        error: 'bg-[color-mix(in_srgb,var(--color-base08)_15%,transparent)] text-[var(--color-base08)]',
+        info: 'bg-[color-mix(in_srgb,var(--color-base0D)_15%,transparent)] text-[var(--color-base0D)]'
+      },
+
+      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,214 @@
+<!--
+  @component Button
+
+  A polymorphic button component with variants, sizes, and loading states.
+
+  @example
+  <Button>Click me</Button>
+  <Button variant="secondary" size="lg">Large Secondary</Button>
+  <Button href="/about">Link Button</Button>
+  <Button loading>Loading...</Button>
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    children,
+    iconLeft,
+    iconRight,
+    variant = 'primary',
+    size = 'md',
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    href,
+    type = 'button',
+    class: className = '',
+    onclick,
+    ...restProps
+  } = $props();
+
+  const isLink = $derived(!!href);
+  const isIconOnly = $derived(!children && (!!iconLeft || !!iconRight));
+  const isDisabled = $derived(disabled || loading);
+
+  const buttonClass = $derived(
+    cn(
+      'btn',
+      `btn-${variant}`,
+      `btn-${size}`,
+      fullWidth && 'btn-full',
+      isIconOnly && 'btn-icon-only',
+      className
+    )
+  );
+
+  const spinnerSize = $derived({
+    xs: 12, sm: 14, md: 16, lg: 18, xl: 20
+  }[size]);
+</script>
+
+{#if isLink}
+  <a
+    {href}
+    class={buttonClass}
+    aria-disabled={isDisabled || undefined}
+    role="button"
+    {...restProps}
+  >
+    {#if loading}
+      <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="btn-icon">{@render iconLeft()}</span>
+    {/if}
+    {#if children}
+      <span class={loading ? 'btn-content-loading' : ''}>{@render children()}</span>
+    {/if}
+    {#if iconRight && !loading}
+      <span class="btn-icon">{@render iconRight()}</span>
+    {/if}
+  </a>
+{:else}
+  <button
+    {type}
+    class={buttonClass}
+    disabled={isDisabled}
+    aria-busy={loading || undefined}
+    {onclick}
+    {...restProps}
+  >
+    {#if loading}
+      <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="btn-icon">{@render iconLeft()}</span>
+    {/if}
+    {#if children}
+      <span class={loading ? 'btn-content-loading' : ''}>{@render children()}</span>
+    {/if}
+    {#if iconRight && !loading}
+      <span class="btn-icon">{@render iconRight()}</span>
+    {/if}
+  </button>
+{/if}
+
+<style>
+  /* 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;
+  }
+
+  /* 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

@@ -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-base02);
+    border-radius: var(--radius-xl);
+    padding: var(--space-6);
+    transition: border-color 0.2s ease;
+  }
+
+  .card:hover {
+    border-color: var(--color-base03);
+  }
+
+  .card-danger {
+    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-base08) 40%, transparent);
+  }
+
+  .card-warning {
+    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-base0A) 40%, transparent);
+  }
+
+  .card-success {
+    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-base0B) 40%, transparent);
+  }
+
+  .card-title {
+    margin: 0 0 var(--space-5) 0;
+    font-size: var(--text-base);
+    font-weight: 500;
+    color: var(--color-base07);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .card-danger .card-title {
+    color: var(--color-base08);
+  }
+
+  .card-warning .card-title {
+    color: var(--color-base0A);
+  }
+
+  .card-success .card-title {
+    color: var(--color-base0B);
+  }
+
+  .card-content {
+    /* Allow child components to handle their own spacing */
+  }
+</style>

package/src/components/primitives/Divider.svelte

@@ -0,0 +1,105 @@
+<!--
+  @component Divider
+
+  A visual separator for content sections.
+
+  @example Horizontal divider
+  <Divider />
+
+  @example Vertical divider
+  <Divider orientation="vertical" />
+
+  @example With label
+  <Divider>
+    or continue with
+  </Divider>
+-->
+<script>
+  let {
+    orientation = 'horizontal',
+    thickness = '1px',
+    spacing = '1rem',
+    children,
+    class: className = ''
+  } = $props();
+
+  const isHorizontal = $derived(orientation === 'horizontal');
+</script>
+
+{#if children}
+  <div
+    class="divider divider-{orientation} divider-labeled {className}"
+    style="--divider-spacing: {spacing};"
+    role="separator"
+    aria-orientation={orientation}
+  >
+    <span class="divider-line" style="--divider-thickness: {thickness};"></span>
+    <span class="divider-label">
+      {@render children()}
+    </span>
+    <span class="divider-line" style="--divider-thickness: {thickness};"></span>
+  </div>
+{:else}
+  <div
+    class="divider divider-{orientation} {className}"
+    style="--divider-thickness: {thickness}; --divider-spacing: {spacing};"
+    role="separator"
+    aria-orientation={orientation}
+  ></div>
+{/if}
+
+<style>
+  .divider {
+    background: color-mix(in srgb, var(--color-base04) 30%, transparent);
+    flex-shrink: 0;
+  }
+
+  .divider-horizontal {
+    width: 100%;
+    height: var(--divider-thickness, 1px);
+    margin: var(--divider-spacing, 1rem) 0;
+  }
+
+  .divider-vertical {
+    width: var(--divider-thickness, 1px);
+    height: 100%;
+    margin: 0 var(--divider-spacing, 1rem);
+  }
+
+  .divider-labeled {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: transparent;
+  }
+
+  .divider-labeled.divider-horizontal {
+    height: auto;
+  }
+
+  .divider-labeled.divider-vertical {
+    flex-direction: column;
+    width: auto;
+  }
+
+  .divider-line {
+    flex: 1;
+    background: color-mix(in srgb, var(--color-base04) 30%, transparent);
+  }
+
+  .divider-horizontal .divider-line {
+    height: var(--divider-thickness, 1px);
+  }
+
+  .divider-vertical .divider-line {
+    width: var(--divider-thickness, 1px);
+  }
+
+  .divider-label {
+    font-size: 0.75rem;
+    color: var(--color-base04);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+  }
+</style>

package/src/components/primitives/LazyImage.svelte

@@ -0,0 +1,104 @@
+<!--
+  @component LazyImage
+
+  Intersection Observer-based lazy loading image with placeholder support.
+
+  @example Basic
+  <LazyImage src="/photo.jpg" alt="Description" />
+
+  @example With placeholder
+  <LazyImage
+    src="/large-photo.jpg"
+    alt="Photo"
+    placeholder="/tiny-blur.jpg"
+  />
+
+  @example Custom threshold
+  <LazyImage
+    src="/image.jpg"
+    alt="Image"
+    threshold={0.5}
+    rootMargin="100px"
+  />
+-->
+<script>
+  import { onMount } from 'svelte';
+
+  let {
+    src,
+    alt = '',
+    width,
+    height,
+    loading = 'lazy',
+    threshold = 0.01,
+    rootMargin = '50px',
+    placeholder = null,
+    class: className = '',
+    onload,
+    ...rest
+  } = $props();
+
+  let imgElement = $state(null);
+  let isLoaded = $state(false);
+  let isInView = $state(false);
+  let actualSrc = $state(placeholder || '');
+
+  onMount(() => {
+    if ('IntersectionObserver' in window && imgElement) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && !isLoaded) {
+              isInView = true;
+              actualSrc = src;
+              observer.unobserve(imgElement);
+            }
+          });
+        },
+        { rootMargin, threshold }
+      );
+
+      observer.observe(imgElement);
+
+      return () => {
+        observer.disconnect();
+      };
+    } else {
+      actualSrc = src;
+      isInView = true;
+    }
+  });
+
+  function handleLoad() {
+    isLoaded = true;
+    onload?.();
+  }
+</script>
+
+<img
+  bind:this={imgElement}
+  src={actualSrc}
+  {alt}
+  {width}
+  {height}
+  {loading}
+  class="lazy-image {isLoaded ? 'lazy-loaded' : 'lazy-loading'} {className}"
+  onload={handleLoad}
+  decoding="async"
+  {...rest}
+/>
+
+<style>
+  .lazy-image {
+    transition: opacity 0.3s ease;
+  }
+
+  .lazy-loading {
+    opacity: 0;
+    background: var(--color-base01);
+  }
+
+  .lazy-loaded {
+    opacity: 1;
+  }
+</style>