@miozu/jera 0.0.2 → 0.3.0

package/src/components/primitives/Divider.svelte

@@ -0,0 +1,105 @@
+<!--
+  @component Divider
+
+  A visual separator for content sections.
+
+  @example Horizontal divider
+  <Divider />
+
+  @example Vertical divider
+  <Divider orientation="vertical" />
+
+  @example With label
+  <Divider>
+    or continue with
+  </Divider>
+-->
+<script>
+  let {
+    orientation = 'horizontal',
+    thickness = '1px',
+    spacing = '1rem',
+    children,
+    class: className = ''
+  } = $props();
+
+  const isHorizontal = $derived(orientation === 'horizontal');
+</script>
+
+{#if children}
+  <div
+    class="divider divider-{orientation} divider-labeled {className}"
+    style="--divider-spacing: {spacing};"
+    role="separator"
+    aria-orientation={orientation}
+  >
+    <span class="divider-line" style="--divider-thickness: {thickness};"></span>
+    <span class="divider-label">
+      {@render children()}
+    </span>
+    <span class="divider-line" style="--divider-thickness: {thickness};"></span>
+  </div>
+{:else}
+  <div
+    class="divider divider-{orientation} {className}"
+    style="--divider-thickness: {thickness}; --divider-spacing: {spacing};"
+    role="separator"
+    aria-orientation={orientation}
+  ></div>
+{/if}
+
+<style>
+  .divider {
+    background: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
+    flex-shrink: 0;
+  }
+
+  .divider-horizontal {
+    width: 100%;
+    height: var(--divider-thickness, 1px);
+    margin: var(--divider-spacing, 1rem) 0;
+  }
+
+  .divider-vertical {
+    width: var(--divider-thickness, 1px);
+    height: 100%;
+    margin: 0 var(--divider-spacing, 1rem);
+  }
+
+  .divider-labeled {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: transparent;
+  }
+
+  .divider-labeled.divider-horizontal {
+    height: auto;
+  }
+
+  .divider-labeled.divider-vertical {
+    flex-direction: column;
+    width: auto;
+  }
+
+  .divider-line {
+    flex: 1;
+    background: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
+  }
+
+  .divider-horizontal .divider-line {
+    height: var(--divider-thickness, 1px);
+  }
+
+  .divider-vertical .divider-line {
+    width: var(--divider-thickness, 1px);
+  }
+
+  .divider-label {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+  }
+</style>

package/src/components/primitives/LazyImage.svelte

@@ -0,0 +1,104 @@
+<!--
+  @component LazyImage
+
+  Intersection Observer-based lazy loading image with placeholder support.
+
+  @example Basic
+  <LazyImage src="/photo.jpg" alt="Description" />
+
+  @example With placeholder
+  <LazyImage
+    src="/large-photo.jpg"
+    alt="Photo"
+    placeholder="/tiny-blur.jpg"
+  />
+
+  @example Custom threshold
+  <LazyImage
+    src="/image.jpg"
+    alt="Image"
+    threshold={0.5}
+    rootMargin="100px"
+  />
+-->
+<script>
+  import { onMount } from 'svelte';
+
+  let {
+    src,
+    alt = '',
+    width,
+    height,
+    loading = 'lazy',
+    threshold = 0.01,
+    rootMargin = '50px',
+    placeholder = null,
+    class: className = '',
+    onload,
+    ...rest
+  } = $props();
+
+  let imgElement = $state(null);
+  let isLoaded = $state(false);
+  let isInView = $state(false);
+  let actualSrc = $state(placeholder || '');
+
+  onMount(() => {
+    if ('IntersectionObserver' in window && imgElement) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && !isLoaded) {
+              isInView = true;
+              actualSrc = src;
+              observer.unobserve(imgElement);
+            }
+          });
+        },
+        { rootMargin, threshold }
+      );
+
+      observer.observe(imgElement);
+
+      return () => {
+        observer.disconnect();
+      };
+    } else {
+      actualSrc = src;
+      isInView = true;
+    }
+  });
+
+  function handleLoad() {
+    isLoaded = true;
+    onload?.();
+  }
+</script>
+
+<img
+  bind:this={imgElement}
+  src={actualSrc}
+  {alt}
+  {width}
+  {height}
+  {loading}
+  class="lazy-image {isLoaded ? 'lazy-loaded' : 'lazy-loading'} {className}"
+  onload={handleLoad}
+  decoding="async"
+  {...rest}
+/>
+
+<style>
+  .lazy-image {
+    transition: opacity 0.3s ease;
+  }
+
+  .lazy-loading {
+    opacity: 0;
+    background: var(--color-surface);
+  }
+
+  .lazy-loaded {
+    opacity: 1;
+  }
+</style>

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-primary);
+    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-primary) 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/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-text-muted) 10%, transparent);
+    color: var(--color-text-muted);
+    border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
+  }
+
+  /* Status variants */
+  .status-badge-pending {
+    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
+    color: var(--color-warning);
+    border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
+  }
+
+  .status-badge-approved,
+  .status-badge-success,
+  .status-badge-connected {
+    background: color-mix(in srgb, var(--color-success) 10%, transparent);
+    color: var(--color-success);
+    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
+  }
+
+  .status-badge-rejected,
+  .status-badge-error,
+  .status-badge-disconnected {
+    background: color-mix(in srgb, var(--color-error) 10%, transparent);
+    color: var(--color-error);
+    border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
+  }
+
+  /* Role variants */
+  .status-badge-owner,
+  .status-badge-primary,
+  .status-badge-public {
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+  }
+
+  .status-badge-admin {
+    background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
+    color: var(--color-secondary);
+    border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
+  }
+
+  .status-badge-member,
+  .status-badge-private {
+    background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
+    color: var(--color-text-muted);
+    border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
+  }
+
+  /* Info variant */
+  .status-badge-info {
+    background: color-mix(in srgb, var(--color-info) 10%, transparent);
+    color: var(--color-info);
+    border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
+  }
+</style>

package/src/index.js

@@ -0,0 +1,128 @@
+/**
+ * @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, buttonStyles } from './components/primitives/Button.svelte';
+export { default as Badge, badgeStyles } 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 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,
+  toastStyles,
+  positionStyles
+} 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';
+
+// ============================================
+// 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';
+
+// ============================================
+// UTILITIES - Class Composition
+// ============================================
+
+export { cn, rcn, cv, mergeClasses, when, match } from './utils/cn.svelte.js';
+
+// ============================================
+// UTILITIES - Reactive State
+// ============================================
+
+export {
+  createReactive,
+  createDerived,
+  ThemeState,
+  createThemeContext,
+  getThemeContext,
+  createComponentState,
+  createIdGenerator,
+  generateId
+} from './utils/reactive.svelte.js';
+
+// ============================================
+// ACTIONS
+// ============================================
+
+export {
+  clickOutside,
+  focusTrap,
+  autoFocus,
+  longPress,
+  escapeKey,
+  portal,
+  intersect,
+  resize,
+  copy
+} from './actions/index.js';