@miozu/jera 0.7.1 → 0.8.0

package/src/components/navigation/TabNav.svelte

@@ -0,0 +1,248 @@
+<!--
+  @component TabNav
+
+  A flexible tab navigation component with multiple variants.
+  Supports icons, badges, counts, and different visual styles.
+
+  @example Basic tabs
+  <TabNav
+    tabs={[
+      {id: 'overview', label: 'Overview'},
+      {id: 'settings', label: 'Settings'}
+    ]}
+    bind:active={activeTab}
+  />
+
+  @example With icons and counts
+  <TabNav
+    tabs={[
+      {id: 'inbox', label: 'Inbox', icon: InboxIcon, count: 12},
+      {id: 'sent', label: 'Sent', icon: SendIcon}
+    ]}
+    bind:active={activeTab}
+    variant="pills"
+  />
+
+  @example Underline variant
+  <TabNav
+    tabs={[{id: 'all', label: 'All'}, {id: 'active', label: 'Active'}]}
+    bind:active={activeTab}
+    variant="underline"
+  />
+-->
+<script>
+  let {
+    tabs = [],
+    active = $bindable(''),
+    variant = 'default',
+    size = 'md',
+    class: className = '',
+    onchange
+  } = $props();
+
+  function handleTabClick(tab) {
+    if (tab.disabled) return;
+    active = tab.id;
+    onchange?.(tab);
+  }
+</script>
+
+<nav class="tab-nav tab-nav-{variant} tab-nav-{size} {className}" role="tablist">
+  {#each tabs as tab}
+    <button
+      type="button"
+      class="tab-item"
+      class:active={active === tab.id}
+      class:disabled={tab.disabled}
+      role="tab"
+      aria-selected={active === tab.id}
+      aria-disabled={tab.disabled}
+      onclick={() => handleTabClick(tab)}
+    >
+      {#if tab.icon}
+        <span class="tab-icon">
+          {@render tab.icon()}
+        </span>
+      {/if}
+      <span class="tab-label">{tab.label}</span>
+      {#if tab.count !== undefined}
+        <span class="tab-count">({tab.count})</span>
+      {/if}
+      {#if tab.badge}
+        <span class="tab-badge">{tab.badge}</span>
+      {/if}
+    </button>
+  {/each}
+</nav>
+
+<style>
+  .tab-nav {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  /* Default variant - subtle background */
+  .tab-nav-default {
+    padding: var(--space-1);
+    background: color-mix(in srgb, var(--color-base01) 70%, transparent);
+    border-radius: var(--radius-lg);
+  }
+
+  .tab-nav-default .tab-item {
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-md);
+    background: transparent;
+    border: none;
+    color: var(--color-base04);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .tab-nav-default .tab-item:hover:not(.disabled) {
+    color: var(--color-base05);
+    background: color-mix(in srgb, var(--color-base02) 50%, transparent);
+  }
+
+  .tab-nav-default .tab-item.active {
+    background: var(--color-base00);
+    color: var(--color-base06);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Pills variant */
+  .tab-nav-pills {
+    gap: var(--space-2);
+  }
+
+  .tab-nav-pills .tab-item {
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-lg);
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--color-base04);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .tab-nav-pills .tab-item:hover:not(.disabled) {
+    background: var(--color-base01);
+    color: var(--color-base05);
+  }
+
+  .tab-nav-pills .tab-item.active {
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0D) 30%, transparent);
+    color: var(--color-base0D);
+  }
+
+  /* Underline variant */
+  .tab-nav-underline {
+    gap: 0;
+    border-bottom: 1px solid var(--color-base02);
+  }
+
+  .tab-nav-underline .tab-item {
+    padding: var(--space-3) var(--space-4);
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    color: var(--color-base04);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .tab-nav-underline .tab-item:hover:not(.disabled) {
+    color: var(--color-base05);
+    border-bottom-color: var(--color-base03);
+  }
+
+  .tab-nav-underline .tab-item.active {
+    color: var(--color-base0D);
+    border-bottom-color: var(--color-base0D);
+  }
+
+  /* Sizes */
+  .tab-nav-sm .tab-item {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
+  }
+
+  .tab-nav-lg .tab-item {
+    padding: var(--space-3) var(--space-5);
+    font-size: var(--text-base);
+  }
+
+  /* Shared styles */
+  .tab-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .tab-item.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tab-item:focus-visible {
+    outline: 2px solid var(--color-base0D);
+    outline-offset: 2px;
+  }
+
+  .tab-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tab-label {
+    line-height: 1;
+  }
+
+  .tab-count {
+    font-size: var(--text-xs);
+    color: var(--color-base04);
+  }
+
+  .tab-item.active .tab-count {
+    color: inherit;
+    opacity: 0.7;
+  }
+
+  .tab-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 var(--space-1);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    background: var(--color-base09);
+    color: var(--color-base00);
+    border-radius: 9999px;
+  }
+
+  /* Scrollable container */
+  @media (max-width: 768px) {
+    .tab-nav {
+      overflow-x: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+    .tab-nav::-webkit-scrollbar {
+      display: none;
+    }
+  }
+</style>

package/src/components/primitives/FilterChip.svelte

@@ -0,0 +1,162 @@
+<!--
+  @component FilterChip
+
+  A toggleable chip for filtering content.
+  Supports icons, counts, and multiple selection modes.
+
+  @example Basic filter chip
+  <FilterChip
+    label="Active"
+    active={filters.active}
+    onclick={() => toggleFilter('active')}
+  />
+
+  @example With icon and count
+  <FilterChip
+    label="Critical"
+    active={showCritical}
+    count={criticalCount}
+    variant="error"
+  >
+    {#snippet icon()}
+      <AlertIcon size={14} />
+    {/snippet}
+  </FilterChip>
+
+  @example Group of filters
+  <div class="filter-group">
+    {#each filters as filter}
+      <FilterChip
+        label={filter.label}
+        active={activeFilters.includes(filter.id)}
+        onclick={() => toggleFilter(filter.id)}
+      />
+    {/each}
+  </div>
+-->
+<script>
+  let {
+    label = '',
+    active = false,
+    count = null,
+    variant = 'default',
+    disabled = false,
+    class: className = '',
+    icon,
+    onclick
+  } = $props();
+</script>
+
+<button
+  type="button"
+  class="filter-chip filter-chip-{variant}"
+  class:active
+  class:disabled
+  {disabled}
+  {onclick}
+  aria-pressed={active}
+>
+  {#if icon}
+    <span class="chip-icon">
+      {@render icon()}
+    </span>
+  {/if}
+  <span class="chip-label">{label}</span>
+  {#if count !== null}
+    <span class="chip-count">{count}</span>
+  {/if}
+</button>
+
+<style>
+  .filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    background: transparent;
+    border: 1px solid var(--color-base02);
+    border-radius: var(--radius-lg);
+    color: var(--color-base04);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .filter-chip:hover:not(.disabled) {
+    border-color: var(--color-base03);
+    color: var(--color-base05);
+    background: var(--color-base01);
+  }
+
+  .filter-chip:focus-visible {
+    outline: 2px solid var(--color-base0D);
+    outline-offset: 2px;
+  }
+
+  .filter-chip.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Active states by variant */
+  .filter-chip-default.active {
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0D) 40%, transparent);
+    color: var(--color-base0D);
+  }
+
+  .filter-chip-error.active {
+    background: color-mix(in srgb, var(--color-base08) 10%, transparent);
+    border-color: color-mix(in srgb, var(--color-base08) 40%, transparent);
+    color: var(--color-base08);
+  }
+
+  .filter-chip-warning.active {
+    background: color-mix(in srgb, var(--color-base0A) 10%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0A) 40%, transparent);
+    color: var(--color-base0A);
+  }
+
+  .filter-chip-success.active {
+    background: color-mix(in srgb, var(--color-base0B) 10%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0B) 40%, transparent);
+    color: var(--color-base0B);
+  }
+
+  .filter-chip-info.active {
+    background: color-mix(in srgb, var(--color-base0C) 10%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0C) 40%, transparent);
+    color: var(--color-base0C);
+  }
+
+  .chip-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .chip-label {
+    line-height: 1;
+  }
+
+  .chip-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 var(--space-1);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    background: var(--color-base02);
+    color: var(--color-base05);
+    border-radius: 9999px;
+  }
+
+  .filter-chip.active .chip-count {
+    background: currentColor;
+    color: var(--color-base00);
+    opacity: 0.8;
+  }
+</style>

package/src/components/primitives/LinkCard.svelte

@@ -0,0 +1,94 @@
+<!--
+  @component LinkCard
+
+  A clickable card for navigation, commonly used in dashboards for quick-nav sections.
+
+  @example Basic
+  <LinkCard href="/services" label="Ops Hub" />
+
+  @example With trailing icon
+  <LinkCard href="/pm" label="PM Board">
+    {#snippet trailing()}
+      <ArrowRight size={14} />
+    {/snippet}
+  </LinkCard>
+
+  @example Disabled
+  <LinkCard href="/admin" label="Admin Panel" disabled />
+-->
+<script>
+  let {
+    href,
+    label,
+    disabled = false,
+    class: className = '',
+    trailing,
+    ...rest
+  } = $props();
+</script>
+
+{#if disabled}
+  <div class="link-card link-card-disabled {className}" {...rest}>
+    <span class="link-card-label">{label}</span>
+    {#if trailing}
+      <span class="link-card-trailing">
+        {@render trailing()}
+      </span>
+    {/if}
+  </div>
+{:else}
+  <a {href} class="link-card {className}" {...rest}>
+    <span class="link-card-label">{label}</span>
+    {#if trailing}
+      <span class="link-card-trailing">
+        {@render trailing()}
+      </span>
+    {/if}
+  </a>
+{/if}
+
+<style>
+  .link-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-lg);
+    background: var(--color-base01);
+    border: 1px solid var(--color-base02);
+    text-decoration: none;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+  }
+
+  .link-card:hover {
+    border-color: var(--color-base03);
+    background: var(--color-base02);
+  }
+
+  .link-card:hover .link-card-trailing {
+    color: var(--color-base06);
+  }
+
+  .link-card-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .link-card-disabled:hover {
+    border-color: var(--color-base02);
+    background: var(--color-base01);
+  }
+
+  .link-card-label {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-base05);
+  }
+
+  .link-card-trailing {
+    color: var(--color-base04);
+    transition: color 0.2s ease;
+  }
+</style>