@miozu/jera 0.0.2 → 0.3.0

package/src/components/overlays/Dropdown.svelte

@@ -0,0 +1,153 @@
+<!--
+  @component Dropdown
+
+  An action menu dropdown component.
+
+  @example
+  <Dropdown>
+    {#snippet trigger()}
+      <Button>Options</Button>
+    {/snippet}
+    <DropdownItem onclick={handleEdit}>Edit</DropdownItem>
+    <DropdownItem onclick={handleDelete} variant="danger">Delete</DropdownItem>
+  </Dropdown>
+-->
+<script>
+  import { clickOutside, escapeKey } from '../../actions/index.js';
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    open = $bindable(false),
+    position = 'bottom-start',
+    trigger,
+    children,
+    class: className = ''
+  } = $props();
+
+  let dropdownEl = $state(null);
+
+  function toggle() {
+    open = !open;
+  }
+
+  function close() {
+    open = false;
+  }
+
+  // Position classes
+  const positionMap = {
+    'bottom-start': 'dropdown-bottom-start',
+    'bottom-end': 'dropdown-bottom-end',
+    'bottom-center': 'dropdown-bottom-center',
+    'top-start': 'dropdown-top-start',
+    'top-end': 'dropdown-top-end',
+    'top-center': 'dropdown-top-center'
+  };
+</script>
+
+<div
+  class={cn('dropdown', className)}
+  bind:this={dropdownEl}
+  use:clickOutside={close}
+  use:escapeKey={close}
+>
+  <div class="dropdown-trigger" onclick={toggle}>
+    {@render trigger?.()}
+  </div>
+
+  {#if open}
+    <div class="dropdown-content {positionMap[position] || positionMap['bottom-start']}">
+      {@render children?.()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-trigger {
+    display: inline-flex;
+  }
+
+  .dropdown-content {
+    position: absolute;
+    z-index: 50;
+    min-width: 10rem;
+    padding: var(--space-1);
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    animation: dropdown-enter 0.15s ease-out;
+  }
+
+  /* Position variants */
+  .dropdown-bottom-start {
+    top: 100%;
+    left: 0;
+    margin-top: var(--space-1);
+  }
+
+  .dropdown-bottom-end {
+    top: 100%;
+    right: 0;
+    margin-top: var(--space-1);
+  }
+
+  .dropdown-bottom-center {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: var(--space-1);
+  }
+
+  .dropdown-top-start {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: var(--space-1);
+  }
+
+  .dropdown-top-end {
+    bottom: 100%;
+    right: 0;
+    margin-bottom: var(--space-1);
+  }
+
+  .dropdown-top-center {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: var(--space-1);
+  }
+
+  @keyframes dropdown-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .dropdown-top-start,
+  .dropdown-top-end,
+  .dropdown-top-center {
+    animation-name: dropdown-enter-up;
+  }
+
+  @keyframes dropdown-enter-up {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

package/src/components/overlays/DropdownDivider.svelte

@@ -0,0 +1,23 @@
+<!--
+  @component DropdownDivider
+
+  A divider within a Dropdown menu.
+
+  @example
+  <DropdownItem>Edit</DropdownItem>
+  <DropdownDivider />
+  <DropdownItem variant="danger">Delete</DropdownItem>
+-->
+<script>
+  let { class: className = '' } = $props();
+</script>
+
+<div class="dropdown-divider {className}" role="separator"></div>
+
+<style>
+  .dropdown-divider {
+    height: 1px;
+    margin: var(--space-1) 0;
+    background: var(--color-border-muted);
+  }
+</style>

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-text);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+
+  .dropdown-item:hover:not(:disabled) {
+    background: var(--color-surface-hover);
+  }
+
+  .dropdown-item:focus-visible {
+    outline: none;
+    background: var(--color-surface-hover);
+  }
+
+  .dropdown-item-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .dropdown-item-danger {
+    color: var(--color-error);
+  }
+
+  .dropdown-item-danger:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-error) 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-surface-alt)', color: 'var(--color-text)' },
+    danger: { bg: 'color-mix(in srgb, var(--color-error) 10%, transparent)', color: 'var(--color-error)' },
+    warning: { bg: 'color-mix(in srgb, var(--color-warning) 10%, transparent)', color: 'var(--color-warning)' },
+    success: { bg: 'color-mix(in srgb, var(--color-success) 10%, transparent)', color: 'var(--color-success)' },
+    info: { bg: 'color-mix(in srgb, var(--color-info) 10%, transparent)', color: 'var(--color-info)' }
+  };
+
+  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-bg) 80%, transparent);
+    backdrop-filter: blur(4px);
+  }
+
+  .modal {
+    position: relative;
+    background: var(--color-surface);
+    border-radius: 0.75rem;
+    box-shadow: var(--shadow-2xl);
+    border: 1px solid var(--color-border);
+    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-text);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+  }
+
+  .modal-close:hover {
+    background: var(--color-surface-alt);
+    color: var(--color-text-strong);
+  }
+
+  .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-text-strong);
+    line-height: 1.4;
+  }
+
+  .modal-body {
+    font-size: 0.875rem;
+    color: var(--color-text);
+    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-surface);
+    color: var(--color-text-strong);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    border-radius: 0.5rem;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--color-border);
+    pointer-events: auto;
+    word-wrap: break-word;
+    hyphens: auto;
+  }
+</style>