@miozu/jera 0.0.2 → 0.4.2

package/src/components/forms/Switch.svelte

@@ -0,0 +1,159 @@
+<!--
+  @component Switch
+
+  An accessible toggle switch for boolean values.
+
+  @example
+  <Switch bind:checked={enabled}>Enable notifications</Switch>
+
+  @example
+  <Switch bind:checked={darkMode} size="lg" />
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+  import { generateId } from '../../utils/reactive.svelte.js';
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    name = '',
+    id,
+    class: className = '',
+    children,
+    onchange,
+    ...rest
+  } = $props();
+
+  const inputId = id || generateId();
+
+  // Size classes map to CSS classes defined below
+  const sizeClass = $derived(`switch-${size}`);
+</script>
+
+<label
+  class={cn('switch-wrapper', disabled && 'switch-disabled', className)}
+  for={inputId}
+>
+  <input
+    type="checkbox"
+    role="switch"
+    id={inputId}
+    {name}
+    {disabled}
+    bind:checked
+    {onchange}
+    class="switch-input"
+    aria-checked={checked}
+    {...rest}
+  />
+
+  <span class={cn('switch-track', sizeClass, checked && 'switch-track-checked')}>
+    <span class={cn('switch-thumb', checked && 'switch-thumb-checked')} />
+  </span>
+
+  {#if children}
+    <span class="switch-label">
+      {@render children()}
+    </span>
+  {/if}
+</label>
+
+<style>
+  .switch-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .switch-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .switch-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .switch-track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--radius-full);
+    background-color: var(--color-base03);
+    transition: var(--transition-colors);
+  }
+
+  .switch-track-checked {
+    background-color: var(--color-base0D);
+  }
+
+  .switch-input:focus-visible + .switch-track {
+    outline: 2px solid var(--color-base0D);
+    outline-offset: 2px;
+  }
+
+  .switch-thumb {
+    position: absolute;
+    left: 2px;
+    border-radius: var(--radius-full);
+    background-color: white;
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--duration-fast) var(--ease-out);
+  }
+
+  .switch-label {
+    font-size: var(--text-sm);
+    color: var(--color-base05);
+  }
+
+  /* Size variants - Small */
+  .switch-sm {
+    width: 2rem;
+    height: 1rem;
+  }
+  .switch-sm .switch-thumb {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .switch-sm .switch-thumb-checked {
+    transform: translateX(1rem);
+  }
+
+  /* Size variants - Medium (default) */
+  .switch-md {
+    width: 2.5rem;
+    height: 1.25rem;
+  }
+  .switch-md .switch-thumb {
+    width: 1rem;
+    height: 1rem;
+  }
+  .switch-md .switch-thumb-checked {
+    transform: translateX(1.25rem);
+  }
+
+  /* Size variants - Large */
+  .switch-lg {
+    width: 3rem;
+    height: 1.5rem;
+  }
+  .switch-lg .switch-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .switch-lg .switch-thumb-checked {
+    transform: translateX(1.5rem);
+  }
+</style>

package/src/components/forms/Textarea.svelte

@@ -0,0 +1,122 @@
+<!--
+  @component Textarea
+
+  A multi-line text input component.
+
+  @example
+  <Textarea bind:value={description} placeholder="Enter description" rows={4} />
+
+  @example
+  // Auto-resize based on content
+  <Textarea bind:value={notes} autoResize />
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    value = $bindable(''),
+    ref = $bindable(),
+    placeholder = '',
+    disabled = false,
+    required = false,
+    name = '',
+    id = '',
+    rows = 3,
+    maxlength,
+    minlength,
+    autoResize = false,
+    class: className = '',
+    unstyled = false,
+    error = false,
+    oninput,
+    onchange,
+    onkeydown,
+    onfocus,
+    onblur,
+    ...rest
+  } = $props();
+
+  const textareaClass = $derived(
+    unstyled ? className : cn(
+      'textarea-base',
+      autoResize && 'textarea-auto-resize',
+      error && 'textarea-error',
+      className
+    )
+  );
+
+  function handleInput(e) {
+    if (autoResize && ref) {
+      ref.style.height = 'auto';
+      ref.style.height = ref.scrollHeight + 'px';
+    }
+    oninput?.(e);
+  }
+</script>
+
+<textarea
+  class={textareaClass}
+  bind:this={ref}
+  bind:value
+  {id}
+  {name}
+  {rows}
+  {placeholder}
+  {disabled}
+  {required}
+  {maxlength}
+  {minlength}
+  aria-invalid={error || undefined}
+  oninput={handleInput}
+  {onchange}
+  {onkeydown}
+  {onfocus}
+  {onblur}
+  {...rest}
+></textarea>
+
+<style>
+  .textarea-base {
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    color: var(--color-base07);
+    background-color: var(--color-base00);
+    border: 1px solid var(--color-base02);
+    border-radius: var(--radius-lg);
+    transition: var(--transition-colors);
+    resize: vertical;
+    font-family: inherit;
+  }
+
+  .textarea-base::placeholder {
+    color: var(--color-base04);
+  }
+
+  .textarea-base:focus {
+    outline: none;
+    border-color: var(--color-base0D);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
+  }
+
+  .textarea-base:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    resize: none;
+  }
+
+  .textarea-auto-resize {
+    resize: none;
+    overflow: hidden;
+  }
+
+  .textarea-error {
+    border-color: var(--color-base08);
+  }
+
+  .textarea-error:focus {
+    border-color: var(--color-base08);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base08) 20%, transparent);
+  }
+</style>

package/src/components/navigation/Accordion.svelte

@@ -0,0 +1,65 @@
+<!--
+  @component Accordion
+
+  Collapsible content sections.
+
+  @example Single item
+  <Accordion>
+    <AccordionItem title="Section 1">
+      Content for section 1
+    </AccordionItem>
+    <AccordionItem title="Section 2">
+      Content for section 2
+    </AccordionItem>
+  </Accordion>
+
+  @example Controlled
+  <Accordion bind:expanded={openSections} multiple>
+    ...
+  </Accordion>
+-->
+<script>
+  import { setContext } from 'svelte';
+
+  let {
+    expanded = $bindable([]),
+    multiple = false,
+    children,
+    class: className = ''
+  } = $props();
+
+  function toggle(id) {
+    if (multiple) {
+      if (expanded.includes(id)) {
+        expanded = expanded.filter(i => i !== id);
+      } else {
+        expanded = [...expanded, id];
+      }
+    } else {
+      expanded = expanded.includes(id) ? [] : [id];
+    }
+  }
+
+  function isExpanded(id) {
+    return expanded.includes(id);
+  }
+
+  setContext('accordion', {
+    toggle,
+    isExpanded: (id) => expanded.includes(id)
+  });
+</script>
+
+<div class="accordion {className}">
+  {@render children?.()}
+</div>
+
+<style>
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--color-base03);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+</style>

package/src/components/navigation/AccordionItem.svelte

@@ -0,0 +1,146 @@
+<!--
+  @component AccordionItem
+
+  Individual accordion section. Must be used inside Accordion.
+
+  @example
+  <AccordionItem id="section-1" title="Click to expand">
+    Hidden content here
+  </AccordionItem>
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { slide } from 'svelte/transition';
+
+  let {
+    id,
+    title = '',
+    disabled = false,
+    children,
+    class: className = ''
+  } = $props();
+
+  const accordion = getContext('accordion');
+
+  // Generate id if not provided
+  const itemId = id || `accordion-${Math.random().toString(36).slice(2, 9)}`;
+
+  const isOpen = $derived(accordion?.isExpanded(itemId) ?? false);
+
+  function handleClick() {
+    if (!disabled && accordion) {
+      accordion.toggle(itemId);
+    }
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick();
+    }
+  }
+</script>
+
+<div class="accordion-item {className}" class:accordion-item-disabled={disabled}>
+  <button
+    type="button"
+    class="accordion-trigger"
+    class:accordion-trigger-open={isOpen}
+    aria-expanded={isOpen}
+    aria-controls="content-{itemId}"
+    aria-disabled={disabled}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+  >
+    <span class="accordion-title">{title}</span>
+    <svg
+      class="accordion-icon"
+      class:accordion-icon-open={isOpen}
+      width="16"
+      height="16"
+      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>
+
+  {#if isOpen}
+    <div
+      id="content-{itemId}"
+      class="accordion-content"
+      transition:slide={{ duration: 200 }}
+    >
+      <div class="accordion-body">
+        {@render children?.()}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .accordion-item {
+    border-bottom: 1px solid var(--color-base03);
+  }
+
+  .accordion-item:last-child {
+    border-bottom: none;
+  }
+
+  .accordion-item-disabled {
+    opacity: 0.5;
+  }
+
+  .accordion-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 1rem;
+    background: transparent;
+    border: none;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    color: var(--color-base07);
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.15s ease;
+  }
+
+  .accordion-trigger:hover:not([aria-disabled="true"]) {
+    background: var(--color-base01);
+  }
+
+  .accordion-trigger-open {
+    background: var(--color-base01);
+  }
+
+  .accordion-title {
+    flex: 1;
+  }
+
+  .accordion-icon {
+    flex-shrink: 0;
+    color: var(--color-base05);
+    transition: transform 0.2s ease;
+  }
+
+  .accordion-icon-open {
+    transform: rotate(180deg);
+  }
+
+  .accordion-content {
+    overflow: hidden;
+  }
+
+  .accordion-body {
+    padding: 0 1rem 1rem 1rem;
+    font-size: 0.875rem;
+    color: var(--color-base05);
+    line-height: 1.6;
+  }
+</style>