@miozu/jera 0.0.2 → 0.4.2

package/src/components/overlays/DropdownItem.svelte

@@ -0,0 +1,97 @@
+<!--
+  @component DropdownItem
+
+  An item within a Dropdown menu.
+
+  @example
+  <DropdownItem onclick={handleAction}>Action</DropdownItem>
+
+  @example
+  <DropdownItem onclick={handleDelete} variant="danger">Delete</DropdownItem>
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    variant = 'default',
+    disabled = false,
+    icon,
+    children,
+    onclick,
+    class: className = '',
+    ...rest
+  } = $props();
+</script>
+
+<button
+  type="button"
+  class={cn(
+    'dropdown-item',
+    `dropdown-item-${variant}`,
+    disabled && 'dropdown-item-disabled',
+    className
+  )}
+  {disabled}
+  {onclick}
+  {...rest}
+>
+  {#if icon}
+    <span class="dropdown-item-icon">
+      {@render icon()}
+    </span>
+  {/if}
+  <span class="dropdown-item-label">
+    {@render children?.()}
+  </span>
+</button>
+
+<style>
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+    text-align: left;
+    color: var(--color-base05);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+
+  .dropdown-item:hover:not(:disabled) {
+    background: var(--color-base02);
+  }
+
+  .dropdown-item:focus-visible {
+    outline: none;
+    background: var(--color-base02);
+  }
+
+  .dropdown-item-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .dropdown-item-danger {
+    color: var(--color-base08);
+  }
+
+  .dropdown-item-danger:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-base08) 10%, transparent);
+  }
+
+  .dropdown-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .dropdown-item-label {
+    flex: 1;
+  }
+</style>

package/src/components/overlays/Modal.svelte

@@ -0,0 +1,232 @@
+<!--
+  @component Modal
+
+  A flexible modal dialog component with backdrop, focus trap, and escape key support.
+
+  @example
+  <Modal bind:open={showModal} title="Confirm Action">
+    <p>Are you sure you want to proceed?</p>
+    {#snippet footer()}
+      <Button variant="ghost" onclick={() => showModal = false}>Cancel</Button>
+      <Button variant="primary" onclick={handleConfirm}>Confirm</Button>
+    {/snippet}
+  </Modal>
+-->
+<script>
+  import { focusTrap, escapeKey, portal } from '../../actions/index.js';
+  import { cv } from '../../utils/cn.svelte.js';
+
+  let {
+    open = $bindable(false),
+    title = '',
+    size = 'md',
+    variant = 'default',
+    closeOnBackdrop = true,
+    closeOnEscape = true,
+    showClose = true,
+    children,
+    footer,
+    icon,
+    onclose = () => {},
+    class: className = ''
+  } = $props();
+
+  // Variant styles for the icon container
+  const iconVariants = {
+    default: { bg: 'var(--color-base02)', color: 'var(--color-base05)' },
+    danger: { bg: 'color-mix(in srgb, var(--color-base08) 10%, transparent)', color: 'var(--color-base08)' },
+    warning: { bg: 'color-mix(in srgb, var(--color-base0A) 10%, transparent)', color: 'var(--color-base0A)' },
+    success: { bg: 'color-mix(in srgb, var(--color-base0B) 10%, transparent)', color: 'var(--color-base0B)' },
+    info: { bg: 'color-mix(in srgb, var(--color-base0D) 10%, transparent)', color: 'var(--color-base0D)' }
+  };
+
+  const iconStyle = $derived(iconVariants[variant] || iconVariants.default);
+
+  function close() {
+    open = false;
+    onclose();
+  }
+
+  function handleBackdropClick(e) {
+    if (closeOnBackdrop && e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleEscape() {
+    if (closeOnEscape) {
+      close();
+    }
+  }
+</script>
+
+{#if open}
+  <div
+    class="modal-backdrop"
+    onclick={handleBackdropClick}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={title ? 'modal-title' : undefined}
+    use:portal={'body'}
+    use:focusTrap={{ enabled: open }}
+    use:escapeKey={handleEscape}
+  >
+    <div class="modal modal-{size} {className}">
+      <!-- Close button -->
+      {#if showClose}
+        <button
+          class="modal-close"
+          onclick={close}
+          aria-label="Close modal"
+          type="button"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      {/if}
+
+      <!-- Content -->
+      <div class="modal-content">
+        {#if icon || title}
+          <div class="modal-header">
+            {#if icon}
+              <div class="modal-icon" style="background: {iconStyle.bg}; color: {iconStyle.color};">
+                {@render icon()}
+              </div>
+            {/if}
+
+            {#if title || children}
+              <div class="modal-text">
+                {#if title}
+                  <h3 id="modal-title" class="modal-title">{title}</h3>
+                {/if}
+                {#if children}
+                  <div class="modal-body">
+                    {@render children()}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {:else if children}
+          <div class="modal-body">
+            {@render children()}
+          </div>
+        {/if}
+
+        {#if footer}
+          <div class="modal-footer">
+            {@render footer()}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--color-base00) 80%, transparent);
+    backdrop-filter: blur(4px);
+  }
+
+  .modal {
+    position: relative;
+    background: var(--color-base01);
+    border-radius: 0.75rem;
+    box-shadow: var(--shadow-2xl);
+    border: 1px solid var(--color-base03);
+    margin: 1rem;
+    animation: modal-enter 0.2s ease-out;
+  }
+
+  /* Size variants */
+  .modal-sm { width: 100%; max-width: 20rem; }
+  .modal-md { width: 100%; max-width: 28rem; }
+  .modal-lg { width: 100%; max-width: 36rem; }
+  .modal-xl { width: 100%; max-width: 48rem; }
+  .modal-full { width: 100%; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); }
+
+  .modal-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    padding: 0.25rem;
+    background: transparent;
+    border: none;
+    border-radius: 0.5rem;
+    color: var(--color-base05);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+  }
+
+  .modal-close:hover {
+    background: var(--color-base02);
+    color: var(--color-base07);
+  }
+
+  .modal-content {
+    padding: 1.5rem;
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .modal-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 0.5rem;
+  }
+
+  .modal-text {
+    flex: 1;
+    padding-top: 0.25rem;
+  }
+
+  .modal-title {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--color-base07);
+    line-height: 1.4;
+  }
+
+  .modal-body {
+    font-size: 0.875rem;
+    color: var(--color-base05);
+    line-height: 1.5;
+  }
+
+  .modal-footer {
+    display: flex;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+    justify-content: flex-end;
+  }
+
+  @keyframes modal-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+</style>

package/src/components/overlays/Popover.svelte

@@ -0,0 +1,206 @@
+<!--
+  @component Popover
+
+  A tooltip/popover component with smart positioning and hover interaction.
+
+  @example
+  <Popover content="This is helpful information" position="top">
+    <Button>Hover me</Button>
+  </Popover>
+
+  @example With custom content
+  <Popover position="bottom">
+    {#snippet content()}
+      <div>Custom <strong>HTML</strong> content</div>
+    {/snippet}
+    <Button>Hover for details</Button>
+  </Popover>
+-->
+<script>
+  import { fly } from 'svelte/transition';
+
+  let {
+    children,
+    content = '',
+    position = 'top',
+    delay = { show: 100, hide: 100 },
+    offset = 8,
+    class: className = ''
+  } = $props();
+
+  let visible = $state(false);
+  let timeoutId = $state(null);
+  let popoverEl = $state(null);
+  let triggerEl = $state(null);
+  let isHoveringPopover = $state(false);
+  let windowWidth = $state(0);
+  let windowHeight = $state(0);
+
+  // Animation configs based on position
+  const animations = {
+    top: { in: { y: 8, duration: 200 }, out: { y: -8, duration: 150 } },
+    bottom: { in: { y: -8, duration: 200 }, out: { y: 8, duration: 150 } },
+    left: { in: { x: 8, duration: 200 }, out: { x: -8, duration: 150 } },
+    right: { in: { x: -8, duration: 200 }, out: { x: 8, duration: 150 } }
+  };
+
+  const anim = $derived(animations[position] || animations.top);
+
+  function handleMouseEnter(event) {
+    clearTimeout(timeoutId);
+    triggerEl = event.currentTarget;
+    timeoutId = setTimeout(() => {
+      visible = true;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          positionPopover();
+        });
+      });
+    }, delay.show);
+  }
+
+  function handleMouseLeave() {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      if (!isHoveringPopover) {
+        visible = false;
+      }
+    }, delay.hide);
+  }
+
+  function handlePopoverEnter() {
+    clearTimeout(timeoutId);
+    isHoveringPopover = true;
+  }
+
+  function handlePopoverLeave() {
+    isHoveringPopover = false;
+    handleMouseLeave();
+  }
+
+  function positionPopover() {
+    if (!popoverEl || !triggerEl) return;
+
+    const triggerRect = triggerEl.getBoundingClientRect();
+    const popoverWidth = popoverEl.offsetWidth;
+    const popoverHeight = popoverEl.offsetHeight;
+
+    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+    const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+
+    let left = 0;
+    let top = 0;
+
+    switch (position) {
+      case 'top':
+        left = triggerCenterX - popoverWidth / 2;
+        top = triggerRect.top - popoverHeight - offset;
+        break;
+      case 'bottom':
+        left = triggerCenterX - popoverWidth / 2;
+        top = triggerRect.bottom + offset;
+        break;
+      case 'left':
+        left = triggerRect.left - popoverWidth - offset;
+        top = triggerCenterY - popoverHeight / 2;
+        break;
+      case 'right':
+        left = triggerRect.right + offset;
+        top = triggerCenterY - popoverHeight / 2;
+        break;
+    }
+
+    // Viewport boundary detection
+    const margin = 8;
+
+    if (left < margin) {
+      left = margin;
+    } else if (left + popoverWidth > windowWidth - margin) {
+      left = windowWidth - popoverWidth - margin;
+    }
+
+    if (top < margin) {
+      if (position === 'top') {
+        top = triggerRect.bottom + offset;
+      } else {
+        top = margin;
+      }
+    } else if (top + popoverHeight > windowHeight - margin) {
+      if (position === 'bottom') {
+        top = triggerRect.top - popoverHeight - offset;
+      } else {
+        top = windowHeight - popoverHeight - margin;
+      }
+    }
+
+    popoverEl.style.left = `${left}px`;
+    popoverEl.style.top = `${top}px`;
+  }
+
+  function handleScroll() {
+    if (visible && triggerEl && popoverEl) {
+      requestAnimationFrame(positionPopover);
+    }
+  }
+</script>
+
+<svelte:window
+  bind:innerWidth={windowWidth}
+  bind:innerHeight={windowHeight}
+  onscroll={visible ? handleScroll : undefined}
+  onresize={visible ? handleScroll : undefined}
+/>
+
+<div
+  class="popover-wrapper {className}"
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+>
+  {@render children?.()}
+
+  {#if visible}
+    <div
+      class="popover"
+      role="tooltip"
+      in:fly={anim.in}
+      out:fly={anim.out}
+      bind:this={popoverEl}
+      onmouseenter={handlePopoverEnter}
+      onmouseleave={handlePopoverLeave}
+    >
+      {#if typeof content === 'string'}
+        {content}
+      {:else if typeof content === 'function'}
+        {@render content()}
+      {:else}
+        {content}
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .popover-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .popover {
+    position: fixed;
+    z-index: 9999;
+    min-width: 8rem;
+    max-width: 18rem;
+    width: max-content;
+    padding: 0.5rem 0.75rem;
+    background: var(--color-base01);
+    color: var(--color-base07);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    border-radius: 0.5rem;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--color-base03);
+    pointer-events: auto;
+    word-wrap: break-word;
+    hyphens: auto;
+  }
+</style>

package/src/components/primitives/Avatar.svelte

@@ -0,0 +1,132 @@
+<!--
+  @component Avatar
+
+  User avatar with image, initials fallback, and status indicator.
+
+  @example With image
+  <Avatar src="/user.jpg" alt="John Doe" />
+
+  @example With initials fallback
+  <Avatar name="John Doe" />
+
+  @example With status
+  <Avatar src="/user.jpg" status="online" />
+-->
+<script>
+  import { cv } from '../../utils/cn.svelte.js';
+
+  let {
+    src = '',
+    alt = '',
+    name = '',
+    size = 'md',
+    status = null,
+    class: className = ''
+  } = $props();
+
+  // Generate initials from name
+  const initials = $derived.by(() => {
+    if (!name) return '';
+    const parts = name.trim().split(/\s+/);
+    if (parts.length >= 2) {
+      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    return parts[0].slice(0, 2).toUpperCase();
+  });
+
+  // Generate consistent color from name
+  const bgColor = $derived.by(() => {
+    if (!name) return 'var(--color-base03)';
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const colors = [
+      'var(--color-base08)',     // red
+      'var(--orange)',          // orange
+      'var(--color-base0B)',   // green
+      'var(--color-base0A)',   // yellow
+      'var(--color-base0D)',      // blue
+      'var(--color-base0D)',   // magenta
+      'var(--peach)',           // peach
+      'var(--color-base0E)'     // cyan
+    ];
+    return colors[Math.abs(hash) % colors.length];
+  });
+
+  let imgError = $state(false);
+  const showImage = $derived(src && !imgError);
+</script>
+
+<div class="avatar avatar-{size} {className}">
+  {#if showImage}
+    <img
+      {src}
+      alt={alt || name}
+      class="avatar-image"
+      onerror={() => imgError = true}
+    />
+  {:else}
+    <span class="avatar-initials" style="background: {bgColor};">
+      {initials}
+    </span>
+  {/if}
+
+  {#if status}
+    <span class="avatar-status avatar-status-{status}"></span>
+  {/if}
+</div>
+
+<style>
+  .avatar {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  /* Size variants */
+  .avatar-xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
+  .avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
+  .avatar-md { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
+  .avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
+  .avatar-xl { width: 4rem; height: 4rem; font-size: 1.25rem; }
+  .avatar-2xl { width: 5rem; height: 5rem; font-size: 1.5rem; }
+
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatar-initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: white;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  .avatar-status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 25%;
+    height: 25%;
+    min-width: 8px;
+    min-height: 8px;
+    border-radius: 50%;
+    border: 2px solid var(--color-base00);
+  }
+
+  .avatar-status-online { background: var(--color-base0B); }
+  .avatar-status-offline { background: var(--color-base04); }
+  .avatar-status-busy { background: var(--color-base08); }
+  .avatar-status-away { background: var(--color-base0A); }
+</style>