@miozu/jera 0.0.2 → 0.4.2

package/src/components/primitives/Link.svelte

@@ -0,0 +1,122 @@
+<!--
+  @component Link
+
+  A minimal link component with optional trailing icon.
+  Renders as <a> with href, or <button> without.
+
+  @example Basic link
+  <Link href="/about">Learn more</Link>
+
+  @example Button mode
+  <Link onclick={handleClick}>View details</Link>
+
+  @example Without icon
+  <Link href="/docs" showIcon={false}>Documentation</Link>
+
+  @example Custom icon
+  <Link href="/external" external>
+    {#snippet icon()}
+      <ExternalIcon size={14} />
+    {/snippet}
+    External Link
+  </Link>
+-->
+<script>
+  let {
+    href = null,
+    external = false,
+    showIcon = true,
+    class: className = '',
+    onclick,
+    children,
+    icon,
+    ...rest
+  } = $props();
+
+  const target = external ? '_blank' : undefined;
+  const rel = external ? 'noopener noreferrer' : undefined;
+</script>
+
+{#if href}
+  <a {href} {target} {rel} class="link {className}" {...rest}>
+    {#if children}
+      {@render children()}
+    {/if}
+    {#if showIcon}
+      {#if icon}
+        {@render icon()}
+      {:else}
+        <svg
+          class="link-icon"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="7" y1="17" x2="17" y2="7"></line>
+          <polyline points="7 7 17 7 17 17"></polyline>
+        </svg>
+      {/if}
+    {/if}
+  </a>
+{:else}
+  <button type="button" class="link {className}" {onclick} {...rest}>
+    {#if children}
+      {@render children()}
+    {/if}
+    {#if showIcon}
+      {#if icon}
+        {@render icon()}
+      {:else}
+        <svg
+          class="link-icon"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="7" y1="17" x2="17" y2="7"></line>
+          <polyline points="7 7 17 7 17 17"></polyline>
+        </svg>
+      {/if}
+    {/if}
+  </button>
+{/if}
+
+<style>
+  .link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--color-base0D);
+    text-decoration: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: color 0.15s ease;
+  }
+
+  .link:hover {
+    color: color-mix(in srgb, var(--color-base0D) 80%, transparent);
+  }
+
+  .link-icon {
+    flex-shrink: 0;
+    transition: transform 0.15s ease;
+  }
+
+  .link:hover .link-icon {
+    transform: translate(2px, -2px);
+  }
+</style>

package/src/components/primitives/Stat.svelte

@@ -0,0 +1,197 @@
+<!--
+  @component Stat
+
+  A metric display component showing a value and label with optional status indicator.
+
+  @example Basic
+  <Stat value="42" label="Users" />
+
+  @example With status
+  <Stat value="95%" label="Uptime" status="success" />
+
+  @example With bar
+  <Stat value="75" max={100} label="Progress" showBar />
+
+  @example With unit and secondary value
+  <Stat value="12" unit="/15" label="Tasks" status="warning" />
+
+  @example As link
+  <Stat value="8" label="Errors" href="/errors" status="error" />
+-->
+<script>
+  let {
+    value,
+    label,
+    unit = '',
+    secondary = '',
+    status = '',
+    size = 'md',
+    showBar = false,
+    barValue = 0,
+    max = 100,
+    href = '',
+    class: className = '',
+    children
+  } = $props();
+
+  const barPercent = $derived(Math.min((barValue || value) / max * 100, 100));
+  const Tag = $derived(href ? 'a' : 'div');
+</script>
+
+<svelte:element
+  this={Tag}
+  {href}
+  class="stat stat-{size} {status ? `stat-${status}` : ''} {href ? 'stat-link' : ''} {className}"
+>
+  {#if status}
+    <span class="stat-dot stat-dot-{status}"></span>
+  {/if}
+
+  <div class="stat-content">
+    <div class="stat-value">
+      {value}{#if unit}<span class="stat-unit">{unit}</span>{/if}
+    </div>
+
+    {#if secondary}
+      <div class="stat-secondary">{secondary}</div>
+    {/if}
+
+    <div class="stat-label">{label}</div>
+
+    {#if showBar}
+      <div class="stat-bar">
+        <div
+          class="stat-bar-fill {status ? `stat-bar-${status}` : ''}"
+          style="width: {barPercent}%"
+        ></div>
+      </div>
+    {/if}
+
+    {#if children}
+      <div class="stat-extra">
+        {@render children()}
+      </div>
+    {/if}
+  </div>
+</svelte:element>
+
+<style>
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .stat-link {
+    cursor: pointer;
+  }
+
+  .stat-link:hover .stat-value {
+    color: var(--color-base07);
+  }
+
+  /* Size variants */
+  .stat-sm .stat-value {
+    font-size: var(--text-lg);
+  }
+
+  .stat-sm .stat-label {
+    font-size: 10px;
+  }
+
+  .stat-md .stat-value {
+    font-size: var(--text-2xl);
+  }
+
+  .stat-md .stat-label {
+    font-size: var(--text-xs);
+  }
+
+  .stat-lg .stat-value {
+    font-size: var(--text-3xl);
+  }
+
+  .stat-lg .stat-label {
+    font-size: var(--text-sm);
+  }
+
+  /* Content */
+  .stat-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .stat-value {
+    font-weight: 600;
+    color: var(--color-base06);
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    transition: color 0.2s ease;
+  }
+
+  .stat-unit {
+    font-size: 0.6em;
+    font-weight: 400;
+    color: var(--color-base04);
+  }
+
+  .stat-secondary {
+    font-size: var(--text-sm);
+    color: var(--color-base04);
+    margin-top: var(--space-1);
+  }
+
+  .stat-label {
+    color: var(--color-base04);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-top: var(--space-1);
+  }
+
+  .stat-extra {
+    margin-top: var(--space-2);
+  }
+
+  /* Status dot */
+  .stat-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    position: absolute;
+    top: var(--space-3);
+    right: var(--space-3);
+  }
+
+  .stat-dot-success { background: var(--color-base0B); }
+  .stat-dot-warning { background: var(--color-base0A); }
+  .stat-dot-error { background: var(--color-base08); }
+  .stat-dot-info { background: var(--color-base0D); }
+
+  /* Status value colors */
+  .stat-error .stat-value { color: var(--color-base08); }
+  .stat-warning .stat-value { color: var(--color-base0A); }
+  .stat-success .stat-value { color: var(--color-base0B); }
+
+  /* Progress bar */
+  .stat-bar {
+    height: 4px;
+    background: var(--color-base02);
+    border-radius: var(--radius-full);
+    margin-top: var(--space-3);
+    overflow: hidden;
+  }
+
+  .stat-bar-fill {
+    height: 100%;
+    background: var(--color-base0D);
+    border-radius: var(--radius-full);
+    transition: width 0.3s ease;
+  }
+
+  .stat-bar-success { background: var(--color-base0B); }
+  .stat-bar-warning { background: var(--color-base0A); }
+  .stat-bar-error { background: var(--color-base08); }
+</style>

package/src/components/primitives/StatusBadge.svelte

@@ -0,0 +1,122 @@
+<!--
+  @component StatusBadge
+
+  A status indicator badge with semantic color variants.
+
+  @example Status variants
+  <StatusBadge variant="pending">Pending</StatusBadge>
+  <StatusBadge variant="approved">Approved</StatusBadge>
+  <StatusBadge variant="rejected">Rejected</StatusBadge>
+
+  @example Role variants
+  <StatusBadge variant="owner">Owner</StatusBadge>
+  <StatusBadge variant="admin">Admin</StatusBadge>
+  <StatusBadge variant="member">Member</StatusBadge>
+
+  @example Connection status
+  <StatusBadge variant="connected">Connected</StatusBadge>
+  <StatusBadge variant="disconnected">Disconnected</StatusBadge>
+-->
+<script>
+  let {
+    variant = 'default',
+    size = 'md',
+    class: className = '',
+    children
+  } = $props();
+</script>
+
+<span class="status-badge status-badge-{variant} status-badge-{size} {className}">
+  {#if children}
+    {@render children()}
+  {:else}
+    {variant}
+  {/if}
+</span>
+
+<style>
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    border-radius: var(--radius-md);
+    border: 1px solid;
+    font-weight: 500;
+    transition: background 0.2s ease;
+  }
+
+  /* Sizes */
+  .status-badge-sm {
+    padding: 0.125rem 0.5rem;
+    font-size: var(--text-xs);
+  }
+
+  .status-badge-md {
+    padding: 0.25rem 0.5rem;
+    font-size: var(--text-xs);
+  }
+
+  .status-badge-lg {
+    padding: 0.375rem 0.75rem;
+    font-size: var(--text-sm);
+  }
+
+  /* Default */
+  .status-badge-default {
+    background: color-mix(in srgb, var(--color-base04) 10%, transparent);
+    color: var(--color-base04);
+    border-color: color-mix(in srgb, var(--color-base04) 30%, transparent);
+  }
+
+  /* Status variants */
+  .status-badge-pending {
+    background: color-mix(in srgb, var(--color-base0A) 10%, transparent);
+    color: var(--color-base0A);
+    border-color: color-mix(in srgb, var(--color-base0A) 30%, transparent);
+  }
+
+  .status-badge-approved,
+  .status-badge-success,
+  .status-badge-connected {
+    background: color-mix(in srgb, var(--color-base0B) 10%, transparent);
+    color: var(--color-base0B);
+    border-color: color-mix(in srgb, var(--color-base0B) 30%, transparent);
+  }
+
+  .status-badge-rejected,
+  .status-badge-error,
+  .status-badge-disconnected {
+    background: color-mix(in srgb, var(--color-base08) 10%, transparent);
+    color: var(--color-base08);
+    border-color: color-mix(in srgb, var(--color-base08) 30%, transparent);
+  }
+
+  /* Role variants */
+  .status-badge-owner,
+  .status-badge-primary,
+  .status-badge-public {
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+    color: var(--color-base0D);
+    border-color: color-mix(in srgb, var(--color-base0D) 30%, transparent);
+  }
+
+  .status-badge-admin {
+    background: color-mix(in srgb, var(--color-base0C) 10%, transparent);
+    color: var(--color-base0C);
+    border-color: color-mix(in srgb, var(--color-base0C) 30%, transparent);
+  }
+
+  .status-badge-member,
+  .status-badge-private {
+    background: color-mix(in srgb, var(--color-base04) 10%, transparent);
+    color: var(--color-base04);
+    border-color: color-mix(in srgb, var(--color-base04) 30%, transparent);
+  }
+
+  /* Info variant */
+  .status-badge-info {
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+    color: var(--color-base0D);
+    border-color: color-mix(in srgb, var(--color-base0D) 30%, transparent);
+  }
+</style>

package/src/index.js

@@ -0,0 +1,183 @@
+/**
+ * @miozu/jera
+ *
+ * A minimal, reactive component library for Svelte 5.
+ * Designed for elegance, scalability, and AI-assisted development.
+ *
+ * @author Nicholas Glazer <glazer.nicholas@gmail.com>
+ * @license MIT
+ *
+ * @example
+ * // Import components
+ * import { Button, Input, IconInput, SearchInput, PinInput, RangeSlider, Toast, Modal } from '@miozu/jera';
+ *
+ * // Import utilities
+ * import { cn, cv } from '@miozu/jera';
+ *
+ * // Import actions
+ * import { clickOutside, focusTrap } from '@miozu/jera/actions';
+ *
+ * // Import tokens (CSS)
+ * import '@miozu/jera/tokens';
+ */
+
+// ============================================
+// COMPONENTS - Primitives
+// ============================================
+
+export { default as Button } from './components/primitives/Button.svelte';
+export { default as Badge } from './components/primitives/Badge.svelte';
+export { default as StatusBadge } from './components/primitives/StatusBadge.svelte';
+export { default as Divider } from './components/primitives/Divider.svelte';
+export { default as Avatar } from './components/primitives/Avatar.svelte';
+export { default as Card } from './components/primitives/Card.svelte';
+export { default as Stat } from './components/primitives/Stat.svelte';
+export { default as Link } from './components/primitives/Link.svelte';
+export { default as LazyImage } from './components/primitives/LazyImage.svelte';
+
+// ============================================
+// COMPONENTS - Forms
+// ============================================
+
+export { default as Input } from './components/forms/Input.svelte';
+export { default as IconInput } from './components/forms/IconInput.svelte';
+export { default as Textarea } from './components/forms/Textarea.svelte';
+export { default as Select } from './components/forms/Select.svelte';
+export { default as Checkbox } from './components/forms/Checkbox.svelte';
+export { default as Switch } from './components/forms/Switch.svelte';
+export { default as NumberInput } from './components/forms/NumberInput.svelte';
+export { default as Radio } from './components/forms/Radio.svelte';
+export { default as RadioGroup } from './components/forms/RadioGroup.svelte';
+export { default as FileUpload } from './components/forms/FileUpload.svelte';
+export { default as RangeSlider } from './components/forms/RangeSlider.svelte';
+export { default as SearchInput } from './components/forms/SearchInput.svelte';
+export { default as PinInput } from './components/forms/PinInput.svelte';
+export { default as Dropzone } from './components/forms/Dropzone.svelte';
+
+// ============================================
+// COMPONENTS - Feedback
+// ============================================
+
+export {
+  default as Toast,
+  ToastController,
+  createToastContext,
+  getToastContext
+} from './components/feedback/Toast.svelte';
+
+export { default as Skeleton } from './components/feedback/Skeleton.svelte';
+export { default as ProgressBar } from './components/feedback/ProgressBar.svelte';
+export { default as Spinner } from './components/feedback/Spinner.svelte';
+export { default as EmptyState } from './components/feedback/EmptyState.svelte';
+export { default as Alert } from './components/feedback/Alert.svelte';
+
+// ============================================
+// COMPONENTS - Overlays
+// ============================================
+
+export { default as Modal } from './components/overlays/Modal.svelte';
+export { default as Popover } from './components/overlays/Popover.svelte';
+export { default as Dropdown } from './components/overlays/Dropdown.svelte';
+export { default as DropdownItem } from './components/overlays/DropdownItem.svelte';
+export { default as DropdownDivider } from './components/overlays/DropdownDivider.svelte';
+export { default as ConfirmDialog } from './components/overlays/ConfirmDialog.svelte';
+
+// ============================================
+// COMPONENTS - Navigation
+// ============================================
+
+export { default as Tabs } from './components/navigation/Tabs.svelte';
+export { default as Accordion } from './components/navigation/Accordion.svelte';
+export { default as AccordionItem } from './components/navigation/AccordionItem.svelte';
+
+// Sidebar Components (Legacy - Enhanced)
+export { default as Sidebar } from './components/navigation/Sidebar.svelte';
+export { default as SidebarSection } from './components/navigation/SidebarSection.svelte';
+export { default as SidebarItem } from './components/navigation/SidebarItem.svelte';
+export { default as SidebarGroup } from './components/navigation/SidebarGroup.svelte';
+export { default as SidebarPopover } from './components/navigation/SidebarPopover.svelte';
+export { default as SidebarAccountItem } from './components/navigation/SidebarAccountItem.svelte';
+export { default as SidebarToggle } from './components/navigation/SidebarToggle.svelte';
+export { default as SidebarSearch } from './components/navigation/SidebarSearch.svelte';
+export { default as SidebarGroupSwitcher } from './components/navigation/SidebarGroupSwitcher.svelte';
+export { default as SidebarAccountGroup } from './components/navigation/SidebarAccountGroup.svelte';
+
+// Enterprise Navigation System
+export { default as NavigationContainer } from './components/navigation/NavigationContainer.svelte';
+export { default as SidebarNavigationItem } from './components/navigation/SidebarNavigationItem.svelte';
+
+// Navigation Blocks
+export { default as NavigationSearch } from './components/navigation/blocks/NavigationSearch.svelte';
+export { default as NavigationSection } from './components/navigation/blocks/NavigationSection.svelte';
+export { default as NavigationAccountGroup } from './components/navigation/blocks/NavigationAccountGroup.svelte';
+export { default as NavigationGroupSwitcher } from './components/navigation/blocks/NavigationGroupSwitcher.svelte';
+export { default as NavigationCustomBlock } from './components/navigation/blocks/NavigationCustomBlock.svelte';
+
+// Enterprise Components
+export { default as WorkspaceMenu } from './components/navigation/WorkspaceMenu.svelte';
+
+// ============================================
+// COMPONENTS - Documentation
+// ============================================
+
+export { default as CodeBlock } from './components/docs/CodeBlock.svelte';
+export { default as PropsTable } from './components/docs/PropsTable.svelte';
+export { default as SplitPane } from './components/docs/SplitPane.svelte';
+export { default as DocSection } from './components/docs/DocSection.svelte';
+
+// ============================================
+// UTILITIES - Class Composition
+// ============================================
+
+export { cn, rcn, cv, mergeClasses, when, match } from './utils/cn.svelte.js';
+
+// ============================================
+// UTILITIES - Reactive State
+// ============================================
+
+export {
+  createReactive,
+  createDerived,
+  ThemeState,
+  getTheme,
+  resetTheme,
+  createComponentState,
+  createIdGenerator,
+  generateId
+} from './utils/reactive.svelte.js';
+
+// Sidebar State Management
+export {
+  createSidebarState,
+  SIDEBAR_CONTEXT_KEY
+} from './utils/sidebar.svelte.js';
+
+// Enterprise Navigation State Management
+export {
+  NavigationState,
+  createNavigationState,
+  NAVIGATION_CONTEXT_KEY
+} from './utils/navigation.svelte.js';
+
+// Code Highlighting
+export {
+  getHighlighter,
+  highlightCode,
+  DEFAULT_LANGUAGES
+} from './utils/highlighter.js';
+
+// ============================================
+// ACTIONS
+// ============================================
+
+export {
+  clickOutside,
+  focusTrap,
+  autoFocus,
+  longPress,
+  escapeKey,
+  portal,
+  intersect,
+  resize,
+  copy
+} from './actions/index.js';