@miozu/jera 0.7.2 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miozu/jera",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Zero-dependency, AI-first component library for Svelte 5",
   "type": "module",
   "svelte": "./src/index.js",

package/src/components/layout/PageHeader.svelte

@@ -0,0 +1,293 @@
+<!--
+  @component PageHeader
+
+  A flexible page header with icon, title, description, stats, and action slots.
+  Designed for data-heavy pages with search and filtering capabilities.
+
+  @example Basic
+  <PageHeader title="Dashboard" description="Overview of your system" />
+
+  @example With icon and stats
+  <PageHeader
+    title="Team Members"
+    description="Manage your workspace team"
+    stats={[
+      {label: "Members", value: 12},
+      {label: "Active", value: 11, variant: "success"}
+    ]}
+  >
+    {#snippet icon()}
+      <Users size={20} />
+    {/snippet}
+  </PageHeader>
+
+  @example With actions and search
+  <PageHeader title="Products">
+    {#snippet actions()}
+      <Button>Add Product</Button>
+    {/snippet}
+    {#snippet search()}
+      <input placeholder="Search..." />
+    {/snippet}
+  </PageHeader>
+-->
+<script>
+  let {
+    title = '',
+    description = '',
+    stats = [],
+    size = 'default',
+    class: className = '',
+    icon,
+    actions,
+    search,
+    filters
+  } = $props();
+</script>
+
+<header class="page-header page-header-{size} {className}">
+  <div class="header-main">
+    <div class="header-title-section">
+      {#if icon}
+        <div class="title-icon">
+          {@render icon()}
+        </div>
+      {/if}
+      <div class="title-text">
+        <h1 class="page-title">{title}</h1>
+        {#if description}
+          <p class="page-description">{description}</p>
+        {/if}
+      </div>
+    </div>
+
+    {#if stats.length > 0}
+      <div class="header-stats">
+        {#each stats as stat}
+          <div class="header-stat">
+            {#if stat.icon}
+              <span class="stat-icon" class:stat-icon-success={stat.variant === 'success'} class:stat-icon-warning={stat.variant === 'warning'} class:stat-icon-error={stat.variant === 'error'}>
+                {@render stat.icon()}
+              </span>
+            {/if}
+            <span class="stat-label">{stat.label}</span>
+            <span class="stat-value" class:stat-value-success={stat.variant === 'success'} class:stat-value-warning={stat.variant === 'warning'} class:stat-value-error={stat.variant === 'error'}>
+              {stat.value}
+            </span>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    {#if actions}
+      <div class="header-actions">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+
+  {#if search || filters}
+    <div class="header-toolbar">
+      {#if search}
+        <div class="toolbar-search">
+          {@render search()}
+        </div>
+      {/if}
+      {#if filters}
+        <div class="toolbar-filters">
+          {@render filters()}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</header>
+
+<style>
+  .page-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    padding: var(--space-6);
+    background: var(--color-base00);
+    border-bottom: 1px solid var(--color-base02);
+  }
+
+  .page-header-compact {
+    padding: var(--space-4);
+    gap: var(--space-3);
+  }
+
+  .page-header-large {
+    padding: var(--space-8);
+    gap: var(--space-6);
+  }
+
+  .header-main {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-6);
+    flex-wrap: wrap;
+  }
+
+  .header-title-section {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .title-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--radius-lg);
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+    color: var(--color-base0D);
+    flex-shrink: 0;
+  }
+
+  .title-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+
+  .page-title {
+    margin: 0;
+    font-size: var(--text-2xl);
+    font-weight: 600;
+    color: var(--color-base06);
+    line-height: 1.2;
+  }
+
+  .page-header-compact .page-title {
+    font-size: var(--text-xl);
+  }
+
+  .page-header-large .page-title {
+    font-size: var(--text-3xl);
+  }
+
+  .page-description {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--color-base04);
+    line-height: 1.5;
+  }
+
+  .header-stats {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+    flex-shrink: 0;
+  }
+
+  .header-stat {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .stat-icon {
+    color: var(--color-base04);
+  }
+
+  .stat-icon-success {
+    color: var(--color-base0B);
+  }
+
+  .stat-icon-warning {
+    color: var(--color-base0A);
+  }
+
+  .stat-icon-error {
+    color: var(--color-base08);
+  }
+
+  .stat-label {
+    font-size: var(--text-xs);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-base04);
+  }
+
+  .stat-value {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    color: var(--color-base06);
+  }
+
+  .stat-value-success {
+    color: var(--color-base0B);
+  }
+
+  .stat-value-warning {
+    color: var(--color-base0A);
+  }
+
+  .stat-value-error {
+    color: var(--color-base08);
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    flex-shrink: 0;
+  }
+
+  .header-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding: var(--space-3) var(--space-4);
+    background: var(--color-base01);
+    border-radius: var(--radius-lg);
+  }
+
+  .toolbar-search {
+    flex: 1;
+    min-width: 0;
+    max-width: 24rem;
+  }
+
+  .toolbar-filters {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .header-main {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .header-stats {
+      flex-wrap: wrap;
+      gap: var(--space-4);
+    }
+
+    .header-actions {
+      width: 100%;
+      justify-content: flex-end;
+    }
+
+    .header-toolbar {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .toolbar-search {
+      max-width: none;
+    }
+  }
+</style>

package/src/components/layout/SettingCard.svelte

@@ -0,0 +1,153 @@
+<!--
+  @component SettingCard
+
+  A card container for settings sections with optional danger variant.
+  Provides consistent layout for settings items with labels, descriptions, and actions.
+
+  @example Basic settings card
+  <SettingCard title="Account Settings">
+    <div class="setting-item">
+      <div class="setting-content">
+        <h4 class="setting-label">Display Name</h4>
+        <p class="setting-description">Your public display name</p>
+      </div>
+      <Input value={name} />
+    </div>
+  </SettingCard>
+
+  @example Danger zone
+  <SettingCard title="Danger Zone" variant="danger">
+    <div class="setting-item">
+      <div class="setting-content">
+        <h4 class="setting-label">Delete Account</h4>
+        <p class="setting-description">This cannot be undone</p>
+      </div>
+      <Button variant="danger">Delete</Button>
+    </div>
+  </SettingCard>
+-->
+<script>
+  let {
+    title = '',
+    variant = 'default',
+    class: className = '',
+    children
+  } = $props();
+</script>
+
+<div class="setting-card setting-card-{variant} {className}">
+  {#if title}
+    <h3 class="card-title">{title}</h3>
+  {/if}
+  {#if children}
+    <div class="card-content">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .setting-card {
+    background: transparent;
+    border: 1px solid color-mix(in srgb, var(--color-base02) 60%, transparent);
+    border-radius: var(--radius-xl);
+    padding: var(--space-6);
+    transition: border-color 0.15s ease;
+  }
+
+  .setting-card:hover {
+    border-color: var(--color-base02);
+  }
+
+  .setting-card-danger {
+    border-color: color-mix(in srgb, var(--color-base08) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base08) 3%, transparent);
+  }
+
+  .setting-card-danger:hover {
+    border-color: color-mix(in srgb, var(--color-base08) 50%, transparent);
+  }
+
+  .card-title {
+    margin: 0 0 var(--space-5);
+    font-size: var(--text-base);
+    font-weight: 500;
+    color: var(--color-base06);
+  }
+
+  .setting-card-danger .card-title {
+    color: var(--color-base08);
+  }
+
+  .card-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Utility classes for setting items - exposed globally */
+  :global(.setting-item) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding: var(--space-4) 0;
+    border-bottom: 1px solid var(--color-base02);
+  }
+
+  :global(.setting-item:last-child) {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  :global(.setting-item:first-child) {
+    padding-top: 0;
+  }
+
+  :global(.setting-content) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  :global(.setting-label) {
+    margin: 0 0 var(--space-1);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-base06);
+  }
+
+  :global(.setting-description) {
+    margin: 0;
+    font-size: var(--text-xs);
+    color: var(--color-base04);
+    line-height: 1.5;
+  }
+
+  :global(.setting-item-icon) {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    color: color-mix(in srgb, var(--color-base04) 80%, transparent);
+  }
+
+  :global(.setting-item-with-icon) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-4) 0;
+    border-bottom: 1px solid var(--color-base02);
+  }
+
+  :global(.setting-item-with-icon:last-child) {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  /* Responsive */
+  @media (max-width: 640px) {
+    :global(.setting-item) {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-3);
+    }
+  }
+</style>

package/src/components/navigation/ScrollNav.svelte

@@ -0,0 +1,174 @@
+<!--
+  @component ScrollNav
+
+  A horizontally scrollable navigation container with gradient indicators.
+  Perfect for tab navigation that overflows on mobile.
+
+  @example Basic scroll nav
+  <ScrollNav>
+    <TabNav tabs={tabs} bind:active={activeTab} />
+  </ScrollNav>
+
+  @example With custom gradient size
+  <ScrollNav gradientSize={80}>
+    <div class="nav-items">
+      {#each items as item}
+        <a href={item.href}>{item.label}</a>
+      {/each}
+    </div>
+  </ScrollNav>
+-->
+<script>
+  import { onMount } from 'svelte';
+
+  let {
+    gradientSize = 60,
+    scrollAmount = 200,
+    class: className = '',
+    children
+  } = $props();
+
+  let containerRef = $state(null);
+  let canScrollLeft = $state(false);
+  let canScrollRight = $state(false);
+
+  function checkScroll() {
+    if (!containerRef) return;
+    const { scrollLeft, scrollWidth, clientWidth } = containerRef;
+    canScrollLeft = scrollLeft > 0;
+    canScrollRight = scrollLeft + clientWidth < scrollWidth - 1;
+  }
+
+  function scrollTo(direction) {
+    if (!containerRef) return;
+    const amount = direction === 'left' ? -scrollAmount : scrollAmount;
+    containerRef.scrollBy({ left: amount, behavior: 'smooth' });
+  }
+
+  onMount(() => {
+    checkScroll();
+    const observer = new ResizeObserver(checkScroll);
+    if (containerRef) {
+      observer.observe(containerRef);
+    }
+    return () => observer.disconnect();
+  });
+</script>
+
+<div class="scroll-nav {className}">
+  {#if canScrollLeft}
+    <div class="scroll-gradient scroll-gradient-left" style="width: {gradientSize}px">
+      <button
+        type="button"
+        class="scroll-btn scroll-btn-left"
+        onclick={() => scrollTo('left')}
+        aria-label="Scroll left"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+      </button>
+    </div>
+  {/if}
+
+  <div
+    class="scroll-container"
+    bind:this={containerRef}
+    onscroll={checkScroll}
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+
+  {#if canScrollRight}
+    <div class="scroll-gradient scroll-gradient-right" style="width: {gradientSize}px">
+      <button
+        type="button"
+        class="scroll-btn scroll-btn-right"
+        onclick={() => scrollTo('right')}
+        aria-label="Scroll right"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .scroll-nav {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .scroll-container {
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .scroll-container::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scroll-gradient {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .scroll-gradient-left {
+    left: 0;
+    background: linear-gradient(to right, var(--color-base00), transparent);
+    justify-content: flex-start;
+    padding-left: var(--space-1);
+  }
+
+  .scroll-gradient-right {
+    right: 0;
+    background: linear-gradient(to left, var(--color-base00), transparent);
+    justify-content: flex-end;
+    padding-right: var(--space-1);
+  }
+
+  .scroll-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    background: var(--color-base01);
+    border: 1px solid var(--color-base02);
+    border-radius: 9999px;
+    color: var(--color-base05);
+    cursor: pointer;
+    pointer-events: all;
+    transition: all 0.15s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .scroll-btn:hover {
+    background: var(--color-base02);
+    color: var(--color-base06);
+  }
+
+  .scroll-btn:focus-visible {
+    outline: 2px solid var(--color-base0D);
+    outline-offset: 2px;
+  }
+
+  .scroll-btn:active {
+    transform: scale(0.95);
+  }
+</style>