@miozu/jera 0.0.2 → 0.3.0

package/src/components/navigation/AccordionItem.svelte

@@ -0,0 +1,146 @@
+<!--
+  @component AccordionItem
+
+  Individual accordion section. Must be used inside Accordion.
+
+  @example
+  <AccordionItem id="section-1" title="Click to expand">
+    Hidden content here
+  </AccordionItem>
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { slide } from 'svelte/transition';
+
+  let {
+    id,
+    title = '',
+    disabled = false,
+    children,
+    class: className = ''
+  } = $props();
+
+  const accordion = getContext('accordion');
+
+  // Generate id if not provided
+  const itemId = id || `accordion-${Math.random().toString(36).slice(2, 9)}`;
+
+  const isOpen = $derived(accordion?.isExpanded(itemId) ?? false);
+
+  function handleClick() {
+    if (!disabled && accordion) {
+      accordion.toggle(itemId);
+    }
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick();
+    }
+  }
+</script>
+
+<div class="accordion-item {className}" class:accordion-item-disabled={disabled}>
+  <button
+    type="button"
+    class="accordion-trigger"
+    class:accordion-trigger-open={isOpen}
+    aria-expanded={isOpen}
+    aria-controls="content-{itemId}"
+    aria-disabled={disabled}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+  >
+    <span class="accordion-title">{title}</span>
+    <svg
+      class="accordion-icon"
+      class:accordion-icon-open={isOpen}
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <polyline points="6 9 12 15 18 9"></polyline>
+    </svg>
+  </button>
+
+  {#if isOpen}
+    <div
+      id="content-{itemId}"
+      class="accordion-content"
+      transition:slide={{ duration: 200 }}
+    >
+      <div class="accordion-body">
+        {@render children?.()}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .accordion-item {
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .accordion-item:last-child {
+    border-bottom: none;
+  }
+
+  .accordion-item-disabled {
+    opacity: 0.5;
+  }
+
+  .accordion-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 1rem;
+    background: transparent;
+    border: none;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    color: var(--color-text-strong);
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.15s ease;
+  }
+
+  .accordion-trigger:hover:not([aria-disabled="true"]) {
+    background: var(--color-surface);
+  }
+
+  .accordion-trigger-open {
+    background: var(--color-surface);
+  }
+
+  .accordion-title {
+    flex: 1;
+  }
+
+  .accordion-icon {
+    flex-shrink: 0;
+    color: var(--color-text);
+    transition: transform 0.2s ease;
+  }
+
+  .accordion-icon-open {
+    transform: rotate(180deg);
+  }
+
+  .accordion-content {
+    overflow: hidden;
+  }
+
+  .accordion-body {
+    padding: 0 1rem 1rem 1rem;
+    font-size: 0.875rem;
+    color: var(--color-text);
+    line-height: 1.6;
+  }
+</style>

package/src/components/navigation/Tabs.svelte

@@ -0,0 +1,239 @@
+<!--
+  @component Tabs
+
+  Tabbed navigation component.
+
+  @example Basic usage
+  <Tabs
+    tabs={[
+      { id: 'tab1', label: 'Overview' },
+      { id: 'tab2', label: 'Settings' },
+      { id: 'tab3', label: 'Analytics' }
+    ]}
+    bind:active={activeTab}
+  />
+
+  @example With icons
+  <Tabs
+    tabs={[
+      { id: 'home', label: 'Home', icon: HomeIcon },
+      { id: 'settings', label: 'Settings', icon: SettingsIcon }
+    ]}
+  />
+-->
+<script>
+  let {
+    tabs = [],
+    active = $bindable(null),
+    variant = 'default',
+    size = 'md',
+    fullWidth = false,
+    onchange = () => {},
+    class: className = ''
+  } = $props();
+
+  // Initialize active to first tab if not set
+  $effect(() => {
+    if (active === null && tabs.length > 0) {
+      active = tabs[0].id;
+    }
+  });
+
+  function selectTab(tab) {
+    if (tab.disabled) return;
+    active = tab.id;
+    onchange(tab);
+  }
+
+  function handleKeydown(e, tab, index) {
+    let nextIndex = index;
+
+    if (e.key === 'ArrowRight') {
+      nextIndex = (index + 1) % tabs.length;
+    } else if (e.key === 'ArrowLeft') {
+      nextIndex = (index - 1 + tabs.length) % tabs.length;
+    } else if (e.key === 'Home') {
+      nextIndex = 0;
+    } else if (e.key === 'End') {
+      nextIndex = tabs.length - 1;
+    } else {
+      return;
+    }
+
+    e.preventDefault();
+    const nextTab = tabs[nextIndex];
+    if (!nextTab.disabled) {
+      selectTab(nextTab);
+      // Focus the next tab button
+      const buttons = e.currentTarget.parentElement.querySelectorAll('[role="tab"]');
+      buttons[nextIndex]?.focus();
+    }
+  }
+</script>
+
+<div
+  class="tabs tabs-{variant} tabs-{size} {className}"
+  class:tabs-full-width={fullWidth}
+  role="tablist"
+>
+  {#each tabs as tab, index}
+    <button
+      type="button"
+      role="tab"
+      class="tab"
+      class:tab-active={active === tab.id}
+      class:tab-disabled={tab.disabled}
+      aria-selected={active === tab.id}
+      aria-disabled={tab.disabled}
+      tabindex={active === tab.id ? 0 : -1}
+      onclick={() => selectTab(tab)}
+      onkeydown={(e) => handleKeydown(e, tab, index)}
+    >
+      {#if tab.icon}
+        <span class="tab-icon">
+          <svelte:component this={tab.icon} size={16} />
+        </span>
+      {/if}
+      {#if tab.label}
+        <span class="tab-label">{tab.label}</span>
+      {/if}
+      {#if tab.badge !== undefined}
+        <span class="tab-badge">{tab.badge}</span>
+      {/if}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .tabs {
+    display: inline-flex;
+    gap: 0.25rem;
+    background: var(--color-surface);
+    border-radius: 0.5rem;
+    padding: 0.25rem;
+  }
+
+  .tabs-full-width {
+    display: flex;
+    width: 100%;
+  }
+
+  .tabs-full-width .tab {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: transparent;
+    border: none;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-text);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+  }
+
+  /* Size variants */
+  .tabs-sm .tab {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+  }
+
+  .tabs-lg .tab {
+    padding: 0.625rem 1.25rem;
+    font-size: 1rem;
+  }
+
+  .tab:hover:not(.tab-disabled) {
+    color: var(--color-text-strong);
+    background: var(--color-surface-alt);
+  }
+
+  .tab:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary);
+  }
+
+  .tab-active {
+    background: var(--color-surface-alt);
+    color: var(--color-text-strong);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .tab-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tab-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .tab-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 0.375rem;
+    background: var(--color-border);
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .tab-active .tab-badge {
+    background: var(--color-primary);
+    color: var(--color-text-strong);
+  }
+
+  /* Underline variant */
+  .tabs-underline {
+    background: transparent;
+    padding: 0;
+    gap: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .tabs-underline .tab {
+    border-radius: 0;
+    margin-bottom: -1px;
+    border-bottom: 2px solid transparent;
+  }
+
+  .tabs-underline .tab-active {
+    background: transparent;
+    box-shadow: none;
+    border-bottom-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+
+  .tabs-underline .tab:hover:not(.tab-disabled) {
+    background: transparent;
+    border-bottom-color: var(--color-border);
+  }
+
+  /* Pills variant */
+  .tabs-pills {
+    background: transparent;
+    padding: 0;
+    gap: 0.5rem;
+  }
+
+  .tabs-pills .tab {
+    border: 1px solid var(--color-border);
+  }
+
+  .tabs-pills .tab-active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-text-strong);
+  }
+</style>

package/src/components/overlays/ConfirmDialog.svelte

@@ -0,0 +1,272 @@
+<!--
+  @component ConfirmDialog
+
+  A confirmation dialog with semantic variants.
+
+  @example Danger confirmation
+  <ConfirmDialog
+    bind:open={showDelete}
+    title="Delete Item"
+    message="Are you sure you want to delete this item? This action cannot be undone."
+    variant="danger"
+    confirmText="Delete"
+    onconfirm={handleDelete}
+  />
+
+  @example Warning confirmation
+  <ConfirmDialog
+    bind:open={showWarning}
+    title="Unsaved Changes"
+    message="You have unsaved changes. Are you sure you want to leave?"
+    variant="warning"
+    confirmText="Leave"
+    cancelText="Stay"
+  />
+
+  @example With custom icon
+  <ConfirmDialog bind:open={show} title="Confirm">
+    {#snippet icon()}
+      <CustomIcon size={24} />
+    {/snippet}
+  </ConfirmDialog>
+-->
+<script>
+  import Button from '../primitives/Button.svelte';
+  import { escapeKey } from '../../actions/index.js';
+
+  let {
+    open = $bindable(false),
+    title = 'Confirm Action',
+    message = 'Are you sure you want to proceed?',
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+    variant = 'danger',
+    class: className = '',
+    icon,
+    onconfirm,
+    oncancel
+  } = $props();
+
+  const variantConfig = $derived({
+    danger: {
+      iconColor: 'var(--color-error)',
+      iconBg: 'color-mix(in srgb, var(--color-error) 10%, transparent)',
+      buttonVariant: 'danger'
+    },
+    warning: {
+      iconColor: 'var(--color-warning)',
+      iconBg: 'color-mix(in srgb, var(--color-warning) 10%, transparent)',
+      buttonVariant: 'primary'
+    },
+    success: {
+      iconColor: 'var(--color-success)',
+      iconBg: 'color-mix(in srgb, var(--color-success) 10%, transparent)',
+      buttonVariant: 'success'
+    },
+    info: {
+      iconColor: 'var(--color-primary)',
+      iconBg: 'color-mix(in srgb, var(--color-primary) 10%, transparent)',
+      buttonVariant: 'primary'
+    }
+  }[variant] || {
+    iconColor: 'var(--color-primary)',
+    iconBg: 'color-mix(in srgb, var(--color-primary) 10%, transparent)',
+    buttonVariant: 'primary'
+  });
+
+  function handleConfirm() {
+    onconfirm?.();
+    open = false;
+  }
+
+  function handleCancel() {
+    oncancel?.();
+    open = false;
+  }
+
+  function handleBackdropClick(e) {
+    if (e.target === e.currentTarget) {
+      handleCancel();
+    }
+  }
+</script>
+
+{#if open}
+  <div
+    class="confirm-backdrop {className}"
+    onclick={handleBackdropClick}
+    use:escapeKey={handleCancel}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="confirm-title"
+  >
+    <div class="confirm-dialog">
+      <button
+        type="button"
+        class="confirm-close"
+        onclick={handleCancel}
+        aria-label="Close"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+
+      <div class="confirm-content">
+        <div class="confirm-header">
+          <div
+            class="confirm-icon"
+            style="background: {variantConfig.iconBg}; color: {variantConfig.iconColor};"
+          >
+            {#if icon}
+              {@render icon()}
+            {:else if variant === 'danger'}
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="3 6 5 6 21 6"></polyline>
+                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+              </svg>
+            {:else if variant === 'warning'}
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                <line x1="12" y1="9" x2="12" y2="13"></line>
+                <line x1="12" y1="17" x2="12.01" y2="17"></line>
+              </svg>
+            {:else if variant === 'success'}
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+              </svg>
+            {:else}
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="12" y1="16" x2="12" y2="12"></line>
+                <line x1="12" y1="8" x2="12.01" y2="8"></line>
+              </svg>
+            {/if}
+          </div>
+
+          <div class="confirm-text">
+            <h3 id="confirm-title" class="confirm-title">{title}</h3>
+            <p class="confirm-message">{message}</p>
+          </div>
+        </div>
+
+        <div class="confirm-actions">
+          <Button variant="ghost" size="sm" onclick={handleCancel}>
+            {cancelText}
+          </Button>
+          <Button variant={variantConfig.buttonVariant} size="sm" onclick={handleConfirm}>
+            {confirmText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .confirm-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .confirm-backdrop::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: color-mix(in srgb, var(--color-bg) 80%, transparent);
+    backdrop-filter: blur(8px);
+  }
+
+  .confirm-dialog {
+    position: relative;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border-muted);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-2xl);
+    width: 100%;
+    max-width: 28rem;
+    margin: var(--space-4);
+    animation: dialog-enter 0.2s ease-out;
+  }
+
+  @keyframes dialog-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  .confirm-close {
+    position: absolute;
+    top: var(--space-4);
+    right: var(--space-4);
+    padding: var(--space-1);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-lg);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+  }
+
+  .confirm-close:hover {
+    background: var(--color-surface-hover);
+    color: var(--color-text);
+  }
+
+  .confirm-content {
+    padding: var(--space-6);
+  }
+
+  .confirm-header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-4);
+  }
+
+  .confirm-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: var(--radius-lg);
+  }
+
+  .confirm-text {
+    flex: 1;
+    padding-top: var(--space-1);
+  }
+
+  .confirm-title {
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-lg);
+    font-weight: 600;
+    color: var(--color-text-strong);
+  }
+
+  .confirm-message {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    line-height: 1.5;
+  }
+
+  .confirm-actions {
+    display: flex;
+    gap: var(--space-3);
+    justify-content: flex-end;
+    margin-top: var(--space-6);
+  }
+</style>