@miozu/jera 0.7.2 → 0.8.0

package/src/components/primitives/MetricCard.svelte

@@ -0,0 +1,266 @@
+<!--
+  @component MetricCard
+
+  A card displaying a metric value with label, icon, and optional status indicator.
+  Ideal for dashboards and overview sections.
+
+  @example Basic metric
+  <MetricCard
+    label="Total Users"
+    value={1234}
+  />
+
+  @example With icon and status
+  <MetricCard
+    label="Services"
+    value={4}
+    unit="/5"
+    status="success"
+  >
+    {#snippet icon()}
+      <ActivityIcon size={16} />
+    {/snippet}
+  </MetricCard>
+
+  @example Clickable with href
+  <MetricCard
+    label="Errors"
+    value={3}
+    status="error"
+    href="/errors"
+  >
+    {#snippet badge()}
+      <StatusBadge variant="error">ALERT</StatusBadge>
+    {/snippet}
+  </MetricCard>
+
+  @example With progress bar
+  <MetricCard
+    label="Storage"
+    value={75}
+    unit="%"
+    progress={75}
+  />
+-->
+<script>
+  let {
+    label = '',
+    value = 0,
+    unit = '',
+    sublabel = '',
+    status = '',
+    progress = null,
+    href = null,
+    class: className = '',
+    icon,
+    badge,
+    onclick
+  } = $props();
+
+  const isClickable = $derived(!!href || !!onclick);
+
+  const progressVariant = $derived.by(() => {
+    if (progress === null) return '';
+    if (progress > 80) return 'progress-error';
+    if (progress > 60) return 'progress-warning';
+    return 'progress-primary';
+  });
+</script>
+
+{#if href}
+  <a
+    {href}
+    class="metric-card {status ? `metric-card-${status}` : ''} metric-card-clickable {className}"
+  >
+    <div class="metric-header">
+      {#if icon}
+        <span class="metric-icon">
+          {@render icon()}
+        </span>
+      {/if}
+      <span class="metric-label">{label}</span>
+      {#if badge}
+        <span class="metric-badge">
+          {@render badge()}
+        </span>
+      {/if}
+    </div>
+
+    <div class="metric-body">
+      <span class="metric-value {status ? `metric-value-${status}` : ''}">
+        {value}{#if unit}<span class="metric-unit">{unit}</span>{/if}
+      </span>
+      {#if sublabel}
+        <span class="metric-sublabel">{sublabel}</span>
+      {/if}
+    </div>
+
+    {#if progress !== null}
+      <div class="metric-progress">
+        <div class="metric-progress-bar {progressVariant}" style="width: {Math.min(100, Math.max(0, progress))}%"></div>
+      </div>
+    {/if}
+  </a>
+{:else}
+  <div
+    class="metric-card {status ? `metric-card-${status}` : ''} {isClickable ? 'metric-card-clickable' : ''} {className}"
+    {onclick}
+    role={onclick ? 'button' : undefined}
+    tabindex={onclick ? 0 : undefined}
+  >
+    <div class="metric-header">
+      {#if icon}
+        <span class="metric-icon">
+          {@render icon()}
+        </span>
+      {/if}
+      <span class="metric-label">{label}</span>
+      {#if badge}
+        <span class="metric-badge">
+          {@render badge()}
+        </span>
+      {/if}
+    </div>
+
+    <div class="metric-body">
+      <span class="metric-value {status ? `metric-value-${status}` : ''}">
+        {value}{#if unit}<span class="metric-unit">{unit}</span>{/if}
+      </span>
+      {#if sublabel}
+        <span class="metric-sublabel">{sublabel}</span>
+      {/if}
+    </div>
+
+    {#if progress !== null}
+      <div class="metric-progress">
+        <div class="metric-progress-bar {progressVariant}" style="width: {Math.min(100, Math.max(0, progress))}%"></div>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .metric-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-5);
+    background: var(--color-base01);
+    border: 1px solid var(--color-base02);
+    border-radius: var(--radius-xl);
+    text-decoration: none;
+    transition: all 0.15s ease;
+  }
+
+  .metric-card-clickable {
+    cursor: pointer;
+  }
+
+  .metric-card-clickable:hover {
+    border-color: var(--color-base03);
+    background: color-mix(in srgb, var(--color-base01) 80%, var(--color-base02));
+  }
+
+  .metric-card-error {
+    border-color: color-mix(in srgb, var(--color-base08) 30%, transparent);
+  }
+
+  .metric-card-warning {
+    border-color: color-mix(in srgb, var(--color-base0A) 30%, transparent);
+  }
+
+  .metric-card-success {
+    border-color: color-mix(in srgb, var(--color-base0B) 30%, transparent);
+  }
+
+  .metric-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .metric-icon {
+    color: var(--color-base04);
+  }
+
+  .metric-label {
+    flex: 1;
+    font-size: var(--text-xs);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-base04);
+  }
+
+  .metric-badge {
+    flex-shrink: 0;
+  }
+
+  .metric-body {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-2);
+  }
+
+  .metric-value {
+    font-size: var(--text-3xl);
+    font-weight: 600;
+    color: var(--color-base06);
+    line-height: 1;
+  }
+
+  .metric-value-success {
+    color: var(--color-base0B);
+  }
+
+  .metric-value-warning {
+    color: var(--color-base0A);
+  }
+
+  .metric-value-error {
+    color: var(--color-base08);
+  }
+
+  .metric-unit {
+    font-size: var(--text-lg);
+    font-weight: 500;
+    color: var(--color-base04);
+  }
+
+  .metric-sublabel {
+    font-size: var(--text-sm);
+    color: var(--color-base04);
+  }
+
+  .metric-progress {
+    height: 4px;
+    background: var(--color-base02);
+    border-radius: 2px;
+    overflow: hidden;
+    margin-top: var(--space-1);
+  }
+
+  .metric-progress-bar {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.3s ease;
+  }
+
+  .progress-primary {
+    background: var(--color-base0D);
+  }
+
+  .progress-warning {
+    background: var(--color-base0A);
+  }
+
+  .progress-error {
+    background: var(--color-base08);
+  }
+
+  /* Focus state for clickable */
+  .metric-card-clickable:focus-visible {
+    outline: 2px solid var(--color-base0D);
+    outline-offset: 2px;
+  }
+</style>

package/src/components/primitives/StatusLine.svelte

@@ -0,0 +1,121 @@
+<!--
+  @component StatusLine
+
+  A horizontal line of status items with separators.
+  Ideal for displaying metadata, timestamps, and badges inline.
+
+  @example Basic status line
+  <StatusLine>
+    <span>Created by John</span>
+    <span>2 hours ago</span>
+    <Badge variant="success">Active</Badge>
+  </StatusLine>
+
+  @example With custom separator
+  <StatusLine separator="|">
+    <span>Version 1.2.3</span>
+    <span>Released Jan 15</span>
+  </StatusLine>
+
+  @example Compact size
+  <StatusLine size="sm">
+    <span>3 tasks</span>
+    <span>2 completed</span>
+  </StatusLine>
+-->
+<script>
+  let {
+    separator = '·',
+    size = 'md',
+    class: className = '',
+    items,
+    children
+  } = $props();
+</script>
+
+<div class="status-line status-line-{size} {className}">
+  {#if items}
+    {#each items as item, i}
+      {#if i > 0}
+        <span class="status-separator">{separator}</span>
+      {/if}
+      <span class="status-item">
+        {#if typeof item === 'string'}
+          {item}
+        {:else if item.icon}
+          <span class="status-icon">
+            {@render item.icon()}
+          </span>
+          {item.text}
+        {:else}
+          {item.text || item}
+        {/if}
+      </span>
+    {/each}
+  {:else if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .status-line {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    color: var(--color-base04);
+  }
+
+  .status-line-sm {
+    font-size: var(--text-xs);
+    gap: var(--space-1);
+  }
+
+  .status-line-md {
+    font-size: var(--text-sm);
+  }
+
+  .status-line-lg {
+    font-size: var(--text-base);
+    gap: var(--space-3);
+  }
+
+  .status-separator {
+    color: var(--color-base03);
+    user-select: none;
+  }
+
+  .status-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  .status-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Allow children to use these utility classes */
+  :global(.status-line .status-highlight) {
+    color: var(--color-base06);
+    font-weight: 500;
+  }
+
+  :global(.status-line .status-success) {
+    color: var(--color-base0B);
+  }
+
+  :global(.status-line .status-warning) {
+    color: var(--color-base0A);
+  }
+
+  :global(.status-line .status-error) {
+    color: var(--color-base08);
+  }
+
+  :global(.status-line .status-muted) {
+    color: var(--color-base03);
+  }
+</style>

package/src/components/primitives/Tooltip.svelte

@@ -0,0 +1,201 @@
+<!--
+  @component Tooltip
+
+  A fast, accessible tooltip that appears on hover.
+  Supports multiple positions and custom content.
+
+  @example Basic tooltip
+  <Tooltip text="Edit this item">
+    <Button>Edit</Button>
+  </Tooltip>
+
+  @example Different positions
+  <Tooltip text="Top tooltip" position="top">
+    <span>Hover me</span>
+  </Tooltip>
+
+  <Tooltip text="Right tooltip" position="right">
+    <span>Hover me</span>
+  </Tooltip>
+
+  @example With custom delay
+  <Tooltip text="Delayed tooltip" delay={500}>
+    <Button>Hover</Button>
+  </Tooltip>
+
+  @example Rich content
+  <Tooltip>
+    {#snippet content()}
+      <div class="tooltip-rich">
+        <strong>Title</strong>
+        <p>Description text here</p>
+      </div>
+    {/snippet}
+    <Button>Info</Button>
+  </Tooltip>
+-->
+<script>
+  let {
+    text = '',
+    position = 'top',
+    delay = 50,
+    disabled = false,
+    class: className = '',
+    content,
+    children
+  } = $props();
+
+  let visible = $state(false);
+  let timeout = null;
+
+  function show() {
+    if (disabled) return;
+    timeout = setTimeout(() => {
+      visible = true;
+    }, delay);
+  }
+
+  function hide() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    visible = false;
+  }
+</script>
+
+<div
+  class="tooltip-wrapper {className}"
+  onmouseenter={show}
+  onmouseleave={hide}
+  onfocus={show}
+  onblur={hide}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+
+  {#if visible && (text || content)}
+    <div class="tooltip tooltip-{position}" role="tooltip">
+      <div class="tooltip-content">
+        {#if content}
+          {@render content()}
+        {:else}
+          {text}
+        {/if}
+      </div>
+      <div class="tooltip-arrow"></div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .tooltip {
+    position: absolute;
+    z-index: 50;
+    pointer-events: none;
+    animation: tooltip-enter 0.15s ease-out;
+  }
+
+  @keyframes tooltip-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .tooltip-content {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--color-base06);
+    background: var(--color-base01);
+    border: 1px solid var(--color-base02);
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    white-space: nowrap;
+    max-width: 20rem;
+  }
+
+  .tooltip-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--color-base01);
+    border: 1px solid var(--color-base02);
+    transform: rotate(45deg);
+  }
+
+  /* Position: Top */
+  .tooltip-top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: var(--space-2);
+  }
+
+  .tooltip-top .tooltip-arrow {
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    border-top: none;
+    border-left: none;
+  }
+
+  /* Position: Bottom */
+  .tooltip-bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: var(--space-2);
+  }
+
+  .tooltip-bottom .tooltip-arrow {
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    border-bottom: none;
+    border-right: none;
+  }
+
+  /* Position: Left */
+  .tooltip-left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: var(--space-2);
+  }
+
+  .tooltip-left .tooltip-arrow {
+    right: -5px;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+    border-left: none;
+    border-bottom: none;
+  }
+
+  /* Position: Right */
+  .tooltip-right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: var(--space-2);
+  }
+
+  .tooltip-right .tooltip-arrow {
+    left: -5px;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+    border-right: none;
+    border-top: none;
+  }
+</style>

package/src/index.js

@@ -35,6 +35,11 @@ export { default as Stat } from './components/primitives/Stat.svelte';
 export { default as Link } from './components/primitives/Link.svelte';
 export { default as LinkCard } from './components/primitives/LinkCard.svelte';
 export { default as LazyImage } from './components/primitives/LazyImage.svelte';
+export { default as MetricCard } from './components/primitives/MetricCard.svelte';
+export { default as FilterChip } from './components/primitives/FilterChip.svelte';
+export { default as StatusLine } from './components/primitives/StatusLine.svelte';
+export { default as Tooltip } from './components/primitives/Tooltip.svelte';
+export { default as MemberCard } from './components/primitives/MemberCard.svelte';
 
 // ============================================
 // COMPONENTS - Forms
@@ -88,6 +93,8 @@ export { default as ConfirmDialog } from './components/overlays/ConfirmDialog.sv
 // ============================================
 
 export { default as Tabs } from './components/navigation/Tabs.svelte';
+export { default as TabNav } from './components/navigation/TabNav.svelte';
+export { default as ScrollNav } from './components/navigation/ScrollNav.svelte';
 export { default as Accordion } from './components/navigation/Accordion.svelte';
 export { default as AccordionItem } from './components/navigation/AccordionItem.svelte';
 
@@ -126,6 +133,13 @@ export { default as LeftBarToggle } from './components/navigation/LeftBarToggle.
 export { default as LeftBarPopover } from './components/navigation/LeftBarPopover.svelte';
 export { default as DropdownContainer } from './components/navigation/DropdownContainer.svelte';
 
+// ============================================
+// COMPONENTS - Layout
+// ============================================
+
+export { default as PageHeader } from './components/layout/PageHeader.svelte';
+export { default as SettingCard } from './components/layout/SettingCard.svelte';
+
 // ============================================
 // COMPONENTS - Documentation
 // ============================================