@miozu/jera 0.0.2 → 0.4.2

package/src/components/navigation/SidebarSearch.svelte

@@ -0,0 +1,236 @@
+<!--
+  @component SidebarSearch
+
+  Search functionality for sidebar with expand/collapse behavior.
+  Matches dash.selify.ai search with filtering capabilities.
+
+  @example
+  <SidebarSearch
+    bind:query={searchQuery}
+    bind:expanded={searchExpanded}
+    placeholder="Search navigation..."
+    onSearch={(query) => filterNavigation(query)}
+  />
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
+  import { SIDEBAR_CONTEXT_KEY } from '../../utils/sidebar.svelte.js';
+
+  let {
+    query = $bindable(''),
+    expanded = $bindable(false),
+    placeholder = 'Search...',
+    onSearch = null,
+    onClear = null,
+    class: className = ''
+  } = $props();
+
+  const sidebar = getContext(SIDEBAR_CONTEXT_KEY);
+  const isCollapsed = $derived(sidebar?.collapsed ?? false);
+
+  let searchInput;
+
+  function expandSearch() {
+    expanded = true;
+    // Focus input after transition
+    setTimeout(() => {
+      if (searchInput) searchInput.focus();
+    }, 50);
+  }
+
+  function collapseSearch() {
+    expanded = false;
+    query = '';
+    if (onClear) onClear();
+  }
+
+  function handleInput(event) {
+    query = event.target.value;
+    if (onSearch) onSearch(query);
+  }
+
+  function handleKeydown(event) {
+    if (event.key === 'Escape') {
+      collapseSearch();
+    }
+  }
+
+  function handleBlur() {
+    // Collapse if query is empty after a delay
+    setTimeout(() => {
+      if (!query.trim()) {
+        expanded = false;
+      }
+    }, 200);
+  }
+</script>
+
+<div class="search-section {className}">
+  {#if expanded}
+    <div class="search-input-wrapper" transition:fly={{ x: -20, duration: 200 }}>
+      <svg
+        class="search-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <path d="m21 21-4.35-4.35"></path>
+      </svg>
+      <input
+        bind:this={searchInput}
+        type="text"
+        bind:value={query}
+        {placeholder}
+        class="search-input"
+        oninput={handleInput}
+        onblur={handleBlur}
+        onkeydown={handleKeydown}
+      />
+      <button
+        class="search-close"
+        onclick={collapseSearch}
+        title="Clear search"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          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>
+    </div>
+  {:else}
+    <button
+      class="search-toggle"
+      onclick={expandSearch}
+      title="Search navigation"
+      transition:fly={{ x: -20, duration: 200, delay: 50 }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <path d="m21 21-4.35-4.35"></path>
+      </svg>
+      {#if !isCollapsed}
+        <span class="search-label" transition:fly={{ x: -15, duration: 200, delay: 75 }}>
+          Search
+        </span>
+      {/if}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .search-section {
+    padding: 0.5rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--color-base03, #565E78) 30%, transparent);
+  }
+
+  .search-toggle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    color: var(--color-text, var(--color-base06, #F3F4F7));
+    cursor: pointer;
+    border-radius: 0.375rem;
+    transition: all 200ms ease;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    text-align: left;
+  }
+
+  .search-toggle:hover {
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 10%, transparent);
+  }
+
+  .search-label {
+    flex: 1;
+    text-align: left;
+    font-weight: 500;
+  }
+
+  .search-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 0.75rem;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 1.25rem;
+    color: var(--color-text-muted, var(--color-base04, #737E99));
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 0.5rem 0.5rem 0.5rem 2.25rem;
+    background-color: var(--color-surface-alt, var(--color-base02, #3E4359));
+    border: 1px solid color-mix(in srgb, var(--color-base03, #565E78) 40%, transparent);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    color: var(--color-text, var(--color-base06, #F3F4F7));
+    transition: all 200ms ease;
+    font-family: inherit;
+  }
+
+  .search-input::placeholder {
+    color: var(--color-text-muted, var(--color-base04, #737E99));
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--color-primary, var(--color-base0D, #83D2FC));
+    background-color: var(--color-surface, var(--color-base01, #2C3040));
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 20%, transparent);
+  }
+
+  .search-close {
+    position: absolute;
+    right: 1.25rem;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    transition: all 200ms ease;
+  }
+
+  .search-close:hover {
+    background-color: color-mix(in srgb, var(--color-base03, #565E78) 50%, transparent);
+    color: var(--color-text, var(--color-base06, #F3F4F7));
+  }
+</style>

package/src/components/navigation/SidebarSection.svelte

@@ -0,0 +1,158 @@
+<!--
+  @component SidebarSection
+
+  Grouped section within sidebar with optional title.
+  Shows title when expanded, shows divider when collapsed.
+
+  @example
+  <SidebarSection title="Management">
+    <SidebarItem href="/settings" icon={Settings} label="Settings" />
+    <SidebarItem href="/billing" icon={CreditCard} label="Billing" />
+  </SidebarSection>
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { fade, fly, slide } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import { SIDEBAR_CONTEXT_KEY } from '../../utils/sidebar.svelte.js';
+
+  let {
+    title = '',
+    count = null,
+    expandable = false,
+    expanded = $bindable(true),
+    class: className = '',
+    children
+  } = $props();
+
+  const sidebar = getContext(SIDEBAR_CONTEXT_KEY);
+  const isCollapsed = $derived(sidebar?.collapsed ?? false);
+
+  function toggleExpanded() {
+    if (expandable) {
+      expanded = !expanded;
+    }
+  }
+</script>
+
+<div class="sidebar-section {className}">
+  {#if title}
+    {#if !isCollapsed}
+      {#if expandable}
+        <button
+          class="section-header expandable"
+          onclick={toggleExpanded}
+          aria-expanded={expanded}
+          transition:fade={{ duration: 150 }}
+        >
+          <span class="section-title">{title}</span>
+          {#if count !== null}
+            <span class="section-count">{count}</span>
+          {/if}
+          <svg
+            class="section-chevron {expanded ? 'rotate-180' : ''}"
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            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>
+      {:else}
+        <div class="section-header" transition:fade={{ duration: 150 }}>
+          <span class="section-title">{title}</span>
+          {#if count !== null}
+            <span class="section-count">{count}</span>
+          {/if}
+        </div>
+      {/if}
+    {:else}
+      <div class="section-divider"></div>
+    {/if}
+  {/if}
+
+  {#if !expandable || expanded}
+    <ul class="nav-list" transition:slide={{ duration: 200, easing: cubicOut }}>
+      {@render children?.()}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .sidebar-section {
+    padding: 0;
+  }
+
+  .section-header {
+    padding: 0.25rem 0.75rem;
+    margin-bottom: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    text-align: left;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .section-header.expandable {
+    cursor: pointer;
+    transition: all 200ms ease;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .section-header.expandable:hover {
+    color: var(--color-text, var(--color-base06, #F3F4F7));
+  }
+
+  .section-title {
+    flex: 1;
+    text-align: left;
+  }
+
+  .section-count {
+    padding: 0.125rem 0.375rem;
+    font-size: 0.625rem;
+    background-color: var(--color-surface-alt, var(--color-base02, #3E4359));
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    border-radius: 9999px;
+    flex-shrink: 0;
+  }
+
+  .section-chevron {
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    transition: all 200ms ease;
+    flex-shrink: 0;
+  }
+
+  .section-chevron.rotate-180 {
+    transform: rotate(180deg);
+  }
+
+  .section-divider {
+    margin: 0.5rem 0.75rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--color-base03, #565E78) 30%, transparent);
+  }
+
+  .nav-list {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+</style>

package/src/components/navigation/SidebarToggle.svelte

@@ -0,0 +1,86 @@
+<!--
+  @component SidebarToggle
+
+  Toggle button for collapsing/expanding the sidebar.
+  Automatically gets collapsed state from Sidebar context.
+
+  @example
+  <Sidebar bind:collapsed>
+    ...
+    {#snippet footer()}
+      <SidebarToggle />
+    {/snippet}
+  </Sidebar>
+
+  @example With custom styling
+  <SidebarToggle class="my-custom-toggle" />
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { SIDEBAR_CONTEXT_KEY } from '../../utils/sidebar.svelte.js';
+
+  let {
+    class: className = ''
+  } = $props();
+
+  const sidebar = getContext(SIDEBAR_CONTEXT_KEY);
+  const isCollapsed = $derived(sidebar?.collapsed ?? false);
+
+  function handleClick() {
+    sidebar?.toggle?.();
+  }
+</script>
+
+<button
+  type="button"
+  class="sidebar-toggle {className}"
+  onclick={handleClick}
+  title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+  aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+  aria-expanded={!isCollapsed}
+>
+  <svg
+    class="toggle-icon"
+    class:collapsed={isCollapsed}
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="m15 18-6-6 6-6"></path>
+  </svg>
+</button>
+
+<style>
+  .sidebar-toggle {
+    width: 100%;
+    padding: 0.625rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    background: transparent;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .sidebar-toggle:hover {
+    color: var(--color-text, var(--color-base06, #F3F4F7));
+    background-color: var(--color-surface-alt, var(--color-base02, #3E4359));
+  }
+
+  .toggle-icon {
+    transition: transform 200ms ease;
+  }
+
+  .toggle-icon.collapsed {
+    transform: rotate(180deg);
+  }
+</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-base01);
+    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-base05);
+    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-base07);
+    background: var(--color-base02);
+  }
+
+  .tab:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-base0D);
+  }
+
+  .tab-active {
+    background: var(--color-base02);
+    color: var(--color-base07);
+    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-base03);
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .tab-active .tab-badge {
+    background: var(--color-base0D);
+    color: var(--color-base07);
+  }
+
+  /* Underline variant */
+  .tabs-underline {
+    background: transparent;
+    padding: 0;
+    gap: 0;
+    border-bottom: 1px solid var(--color-base03);
+  }
+
+  .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-base0D);
+    color: var(--color-base0D);
+  }
+
+  .tabs-underline .tab:hover:not(.tab-disabled) {
+    background: transparent;
+    border-bottom-color: var(--color-base03);
+  }
+
+  /* Pills variant */
+  .tabs-pills {
+    background: transparent;
+    padding: 0;
+    gap: 0.5rem;
+  }
+
+  .tabs-pills .tab {
+    border: 1px solid var(--color-base03);
+  }
+
+  .tabs-pills .tab-active {
+    background: var(--color-base0D);
+    border-color: var(--color-base0D);
+    color: var(--color-base07);
+  }
+</style>