@miozu/jera 0.7.2 → 0.8.1

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/MemberCard.svelte

@@ -0,0 +1,291 @@
+<!--
+  @component MemberCard
+
+  A card displaying a team member with avatar, name, role, and actions.
+  Supports various layouts and interactive states.
+
+  @example Basic member card
+  <MemberCard
+    name="John Doe"
+    email="john@example.com"
+    role="Developer"
+  />
+
+  @example With avatar and status
+  <MemberCard
+    name="Jane Smith"
+    email="jane@example.com"
+    role="Admin"
+    avatarUrl="/avatars/jane.jpg"
+    status="online"
+  />
+
+  @example With actions
+  <MemberCard name="Bob Wilson" email="bob@example.com">
+    {#snippet actions()}
+      <Button size="sm" variant="ghost">Edit</Button>
+      <Button size="sm" variant="danger">Remove</Button>
+    {/snippet}
+  </MemberCard>
+
+  @example Compact variant
+  <MemberCard
+    name="Alice Johnson"
+    role="Designer"
+    variant="compact"
+  />
+-->
+<script>
+  let {
+    name = '',
+    email = '',
+    role = '',
+    avatarUrl = null,
+    status = null,
+    timestamp = null,
+    variant = 'default',
+    class: className = '',
+    badge,
+    actions,
+    onclick
+  } = $props();
+
+  const initials = $derived.by(() => {
+    if (!name) return '?';
+    const parts = name.split(' ');
+    if (parts.length >= 2) {
+      return parts[0][0] + parts[1][0];
+    }
+    return name.slice(0, 2);
+  });
+
+  const statusColors = {
+    online: 'status-online',
+    offline: 'status-offline',
+    away: 'status-away',
+    busy: 'status-busy'
+  };
+
+  function formatRelativeTime(dateStr) {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diff = now - date;
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+    if (days === 0) return 'Today';
+    if (days === 1) return 'Yesterday';
+    if (days < 7) return `${days} days ago`;
+    if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  }
+</script>
+
+<div
+  class="member-card member-card-{variant} {onclick ? 'member-card-clickable' : ''} {className}"
+  {onclick}
+  role={onclick ? 'button' : undefined}
+  tabindex={onclick ? 0 : undefined}
+>
+  <div class="member-avatar">
+    {#if avatarUrl}
+      <img src={avatarUrl} alt={name} class="avatar-image" />
+    {:else}
+      <span class="avatar-initials">{initials.toUpperCase()}</span>
+    {/if}
+    {#if status}
+      <span class="avatar-status {statusColors[status] || ''}"></span>
+    {/if}
+  </div>
+
+  <div class="member-info">
+    <div class="member-name">{name}</div>
+    {#if variant !== 'compact' && email}
+      <div class="member-email">{email}</div>
+    {/if}
+    {#if role || timestamp}
+      <div class="member-meta">
+        {#if role}
+          <span class="member-role">{role}</span>
+        {/if}
+        {#if timestamp}
+          <span class="member-timestamp">{formatRelativeTime(timestamp)}</span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  {#if badge}
+    <div class="member-badge">
+      {@render badge()}
+    </div>
+  {/if}
+
+  {#if actions}
+    <div class="member-actions" onclick={(e) => e.stopPropagation()}>
+      {@render actions()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .member-card {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    background: transparent;
+    border-radius: var(--radius-lg);
+    transition: background 0.15s ease;
+  }
+
+  .member-card-default {
+    padding: var(--space-4);
+  }
+
+  .member-card-compact {
+    padding: var(--space-2);
+    gap: var(--space-2);
+  }
+
+  .member-card-clickable {
+    cursor: pointer;
+  }
+
+  .member-card-clickable:hover {
+    background: var(--color-base01);
+  }
+
+  .member-card-clickable:focus-visible {
+    outline: 2px solid var(--color-base0D);
+    outline-offset: 2px;
+  }
+
+  .member-avatar {
+    position: relative;
+    flex-shrink: 0;
+    width: var(--space-10);
+    height: var(--space-10);
+    border-radius: var(--radius-lg);
+    background: color-mix(in srgb, var(--color-base0D) 15%, transparent);
+    overflow: hidden;
+  }
+
+  .member-card-compact .member-avatar {
+    width: var(--space-8);
+    height: var(--space-8);
+    border-radius: var(--radius-md);
+  }
+
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatar-initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-base0D);
+  }
+
+  .member-card-compact .avatar-initials {
+    font-size: var(--text-xs);
+  }
+
+  .avatar-status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: var(--space-3);
+    height: var(--space-3);
+    border-radius: var(--radius-full);
+    border: 2px solid var(--color-base00);
+  }
+
+  .status-online {
+    background: var(--color-base0B);
+  }
+
+  .status-offline {
+    background: var(--color-base03);
+  }
+
+  .status-away {
+    background: var(--color-base0A);
+  }
+
+  .status-busy {
+    background: var(--color-base08);
+  }
+
+  .member-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .member-name {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-base06);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .member-card-compact .member-name {
+    font-size: var(--text-xs);
+  }
+
+  .member-email {
+    font-size: var(--text-xs);
+    color: var(--color-base04);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .member-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-top: var(--space-1);
+  }
+
+  .member-role {
+    font-size: var(--text-xs);
+    color: var(--color-base04);
+  }
+
+  .member-timestamp {
+    font-size: var(--text-xs);
+    color: var(--color-base03);
+  }
+
+  .member-timestamp::before {
+    content: '·';
+    margin-right: var(--space-2);
+    color: var(--color-base03);
+  }
+
+  .member-badge {
+    flex-shrink: 0;
+  }
+
+  .member-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .member-card:hover .member-actions {
+    opacity: 1;
+  }
+</style>