@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.1

package/dist/components/Form/MaskedInput.svelte

@@ -0,0 +1,152 @@
+<script>
+  // MaskedInput — format-as-you-type using a simple mask pattern.
+  //
+  // Mask tokens:
+  //   9  → digit        (0-9)
+  //   A  → letter       (a-z, A-Z)
+  //   *  → alphanumeric
+  // Any other character in the mask is a literal (shown as-is, auto-inserted).
+  //
+  // Two display modes:
+  //   showMask = false (default) — the value grows as you type: "(555) 123-"
+  //   showMask = true            — the full template is always shown with
+  //                                unfilled slots as `maskChar`: "(555) 12_-____"
+  //
+  // `value` is always the RAW (unmasked) characters, regardless of mode.
+
+  let {
+    value       = $bindable(''),
+    mask        = '',
+    showMask    = false,
+    maskChar    = '_',
+    placeholder = undefined,
+    disabled    = false,
+    error       = false,
+    success     = false,
+    ...restProps
+  } = $props();
+
+  const tokens = { '9': /[0-9]/, 'A': /[a-zA-Z]/, '*': /[a-zA-Z0-9]/ };
+  const isToken = (ch) => Object.prototype.hasOwnProperty.call(tokens, ch);
+
+  let inputEl = $state();
+
+  // ─── Growing mode: format only as far as the user has typed ───
+  function applyMask(raw, mask) {
+    let out = '', ri = 0, mi = 0;
+    for (; mi < mask.length && ri < raw.length; mi++) {
+      const mch = mask[mi];
+      if (isToken(mch)) {
+        while (ri < raw.length) {
+          const rch = raw[ri++];
+          if (tokens[mch].test(rch)) { out += rch; break; }
+        }
+      } else {
+        out += mch;
+        if (raw[ri] === mch) ri++;
+      }
+    }
+    // auto-advance trailing literals so the next slot is exposed
+    if (raw.length > 0) {
+      while (mi < mask.length && !isToken(mask[mi])) { out += mask[mi]; mi++; }
+    }
+    return out;
+  }
+
+  // ─── Template mode: always render the full skeleton ───
+  function renderTemplate(raw, mask) {
+    let out = '', ri = 0;
+    for (let mi = 0; mi < mask.length; mi++) {
+      const mch = mask[mi];
+      out += isToken(mch) ? (ri < raw.length ? raw[ri++] : maskChar) : mch;
+    }
+    return out;
+  }
+
+  // Where the caret belongs given N filled raw chars: the first unfilled token
+  // slot, or end of string when full.
+  function caretForRaw(n, mask) {
+    let filled = 0;
+    for (let mi = 0; mi < mask.length; mi++) {
+      if (isToken(mask[mi])) {
+        if (filled === n) return mi;
+        filled++;
+      }
+    }
+    return mask.length;
+  }
+
+  // Validate raw chars against their token slots, walking slots and input
+  // chars in lockstep: each slot takes the next char that fits; chars that
+  // don't fit the current slot are dropped (they can't jump ahead). Caps at
+  // the number of token slots. (Verified against phone and plate masks.)
+  function sanitizeRaw(input, mask) {
+    const chars = [...input].filter((c) => /[a-zA-Z0-9]/.test(c));
+    const slots = [...mask].filter(isToken).map((ch) => tokens[ch]);
+    let raw = '', ci = 0, si = 0;
+    while (si < slots.length && ci < chars.length) {
+      const ch = chars[ci];
+      if (slots[si].test(ch)) { raw += ch; si++; ci++; }
+      else { ci++; }
+    }
+    return raw;
+  }
+
+  let display = $derived(
+    showMask ? renderTemplate(value ?? '', mask) : applyMask(value ?? '', mask)
+  );
+
+  function onInput(e) {
+    const isDelete = e.inputType && e.inputType.startsWith('delete');
+    const prevRaw = value ?? '';
+    let raw = sanitizeRaw(e.target.value, mask);
+
+    // Deletion that only removed literals leaves raw unchanged — drop one real
+    // char so backspace makes progress instead of sticking on a literal.
+    if (isDelete && raw.length === prevRaw.length && raw.length > 0) {
+      raw = raw.slice(0, -1);
+    }
+
+    value = raw;
+
+    if (showMask) {
+      const text = renderTemplate(raw, mask);
+      e.target.value = text;
+      const pos = caretForRaw(raw.length, mask);
+      // restore caret after the value write
+      requestAnimationFrame(() => {
+        try { e.target.setSelectionRange(pos, pos); } catch {}
+      });
+    } else {
+      e.target.value = applyMask(raw, mask);
+    }
+  }
+
+  // In template mode, clicking into the field should drop the caret at the next
+  // empty slot rather than wherever the click landed in the skeleton.
+  function onFocus(e) {
+    if (!showMask) return;
+    const pos = caretForRaw((value ?? '').length, mask);
+    requestAnimationFrame(() => {
+      try { e.target.setSelectionRange(pos, pos); } catch {}
+    });
+  }
+
+  let classes = $derived([
+    'input', 'masked-input',
+    error   ? 'input-error'   : '',
+    success ? 'input-success' : '',
+  ].filter(Boolean).join(' '));
+</script>
+
+<input
+  bind:this={inputEl}
+  class={classes}
+  type="text"
+  value={display}
+  placeholder={showMask ? undefined : (placeholder ?? mask)}
+  {disabled}
+  oninput={onInput}
+  onfocus={onFocus}
+  {...restProps}
+/>

package/dist/components/Form/MaskedInput.svelte.d.ts

@@ -0,0 +1,25 @@
+export default MaskedInput;
+type MaskedInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const MaskedInput: import("svelte").Component<{
+    value?: string;
+    mask?: string;
+    showMask?: boolean;
+    maskChar?: string;
+    placeholder?: any;
+    disabled?: boolean;
+    error?: boolean;
+    success?: boolean;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    value?: string;
+    mask?: string;
+    showMask?: boolean;
+    maskChar?: string;
+    placeholder?: any;
+    disabled?: boolean;
+    error?: boolean;
+    success?: boolean;
+} & Record<string, any>;

package/dist/components/Form/Radio.svelte

@@ -0,0 +1,28 @@
+<script>
+  let {
+    group    = $bindable(undefined),
+    value,
+    label    = undefined,
+    disabled = false,
+    children,
+    ...restProps
+  } = $props();
+</script>
+
+<label class="radio" class:radio-disabled={disabled}>
+  <input
+    type="radio"
+    bind:group
+    {value}
+    {disabled}
+    {...restProps}
+  />
+  <span class="radio-circle">
+    <span class="radio-dot"></span>
+  </span>
+  {#if label}
+    <span class="radio-label">{label}</span>
+  {:else if children}
+    <span class="radio-label">{@render children()}</span>
+  {/if}
+</label>

package/dist/components/Form/Radio.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Radio;
+type Radio = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Radio: import("svelte").Component<{
+    group?: any;
+    value: any;
+    label?: any;
+    disabled?: boolean;
+    children: any;
+} & Record<string, any>, {}, "group">;
+type $$ComponentProps = {
+    group?: any;
+    value: any;
+    label?: any;
+    disabled?: boolean;
+    children: any;
+} & Record<string, any>;

package/dist/components/Form/RadioGroup.svelte

@@ -0,0 +1,28 @@
+<script>
+  import Radio from './Radio.svelte';
+
+  let {
+    value    = $bindable(undefined),
+    options  = [],          // [{ value, label, disabled? }] or string[]
+    name     = undefined,
+    disabled = false,
+    inline   = false,       // lay out horizontally
+  } = $props();
+
+  // Normalize string options to { value, label }
+  let normalized = $derived(
+    options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o))
+  );
+</script>
+
+<div class="radio-group" class:radio-group-inline={inline} role="radiogroup">
+  {#each normalized as opt}
+    <Radio
+      bind:group={value}
+      value={opt.value}
+      label={opt.label}
+      disabled={disabled || opt.disabled}
+      {name}
+    />
+  {/each}
+</div>

package/dist/components/Form/RadioGroup.svelte.d.ts

@@ -0,0 +1,19 @@
+export default RadioGroup;
+type RadioGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const RadioGroup: import("svelte").Component<{
+    value?: any;
+    options?: any[];
+    name?: any;
+    disabled?: boolean;
+    inline?: boolean;
+}, {}, "value">;
+type $$ComponentProps = {
+    value?: any;
+    options?: any[];
+    name?: any;
+    disabled?: boolean;
+    inline?: boolean;
+};

package/dist/components/Form/Select.svelte

@@ -0,0 +1,20 @@
+<script>
+  let {
+    value    = $bindable(''),
+    disabled = false,
+    error    = false,
+    size     = 'md',
+    children,
+    ...restProps
+  } = $props();
+
+  const sizeClass = { sm: 'select-sm', md: '', lg: 'select-lg' };
+
+  let classes = $derived(
+    ['select', sizeClass[size], error ? 'select-error' : ''].filter(Boolean).join(' ')
+  );
+</script>
+
+<select class={classes} {disabled} bind:value {...restProps}>
+  {@render children?.()}
+</select>

package/dist/components/Form/Select.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Select;
+type Select = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Select: import("svelte").Component<{
+    value?: string;
+    disabled?: boolean;
+    error?: boolean;
+    size?: string;
+    children: any;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    value?: string;
+    disabled?: boolean;
+    error?: boolean;
+    size?: string;
+    children: any;
+} & Record<string, any>;

package/dist/components/Form/Textarea.svelte

@@ -0,0 +1,30 @@
+<script>
+  let {
+    value       = $bindable(''),
+    placeholder = undefined,
+    rows        = 4,
+    disabled    = false,
+    readonly    = false,
+    error       = false,
+    success     = false,
+    resize      = 'vertical',   // 'none' | 'vertical' | 'horizontal' | 'both'
+    ...restProps
+  } = $props();
+
+  let classes = $derived([
+    'textarea',
+    error   ? 'textarea-error'   : '',
+    success ? 'textarea-success' : '',
+  ].filter(Boolean).join(' '));
+</script>
+
+<textarea
+  class={classes}
+  bind:value
+  {placeholder}
+  {rows}
+  {disabled}
+  {readonly}
+  style:resize
+  {...restProps}
+></textarea>

package/dist/components/Form/Textarea.svelte.d.ts

@@ -0,0 +1,25 @@
+export default Textarea;
+type Textarea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Textarea: import("svelte").Component<{
+    value?: string;
+    placeholder?: any;
+    rows?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: boolean;
+    success?: boolean;
+    resize?: string;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    value?: string;
+    placeholder?: any;
+    rows?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: boolean;
+    success?: boolean;
+    resize?: string;
+} & Record<string, any>;

package/dist/components/Form/Toggle.svelte

@@ -0,0 +1,21 @@
+<script>
+  let {
+    checked  = $bindable(false),
+    label    = undefined,
+    disabled = false,
+    children,
+    ...restProps
+  } = $props();
+</script>
+
+<label class="toggle" class:toggle-disabled={disabled}>
+  <input type="checkbox" bind:checked {disabled} {...restProps} />
+  <div class="toggle-track">
+    <div class="toggle-thumb"></div>
+  </div>
+  {#if label}
+    <span class="toggle-label">{label}</span>
+  {:else if children}
+    <span class="toggle-label">{@render children()}</span>
+  {/if}
+</label>

package/dist/components/Form/Toggle.svelte.d.ts

@@ -0,0 +1,17 @@
+export default Toggle;
+type Toggle = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Toggle: import("svelte").Component<{
+    checked?: boolean;
+    label?: any;
+    disabled?: boolean;
+    children: any;
+} & Record<string, any>, {}, "checked">;
+type $$ComponentProps = {
+    checked?: boolean;
+    label?: any;
+    disabled?: boolean;
+    children: any;
+} & Record<string, any>;

package/dist/components/Modal.svelte

@@ -0,0 +1,77 @@
+<script>
+  let {
+    open            = $bindable(false),
+    size            = 'md',
+    drawer          = false,
+    closeOnBackdrop = true,
+    title           = undefined,
+    subtitle        = undefined,
+    header,
+    footer,
+    children,
+  } = $props();
+
+  const sizeClass = {
+    sm: 'modal-sm', md: '', lg: 'modal-lg', xl: 'modal-xl', full: 'modal-full'
+  };
+
+  let closing = $state(false);
+
+  function close() {
+    closing = true;
+    setTimeout(() => { closing = false; open = false; }, 200);
+  }
+
+  function onbackdrop() {
+    if (closeOnBackdrop) close();
+  }
+
+  function onkeydown(e) {
+    if (open && e.key === 'Escape') close();
+  }
+
+  let modalClass = $derived(
+    ['modal', sizeClass[size], drawer ? 'modal-drawer' : ''].filter(Boolean).join(' ')
+  );
+
+  let backdropClass = $derived(
+    ['modal-backdrop', closing ? 'closing' : '', drawer ? 'modal-backdrop-drawer' : '']
+      .filter(Boolean).join(' ')
+  );
+</script>
+
+<svelte:window onkeydown={onkeydown} />
+
+{#if open || closing}
+  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+  <div class={backdropClass} onclick={onbackdrop} role="dialog" aria-modal="true">
+    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+    <div class={modalClass} onclick={(e) => e.stopPropagation()}>
+
+      <div class="modal-header">
+        {#if header}
+          {@render header()}
+        {:else if title}
+          <div>
+            <h2 class="modal-title">{title}</h2>
+            {#if subtitle}<p class="modal-subtitle">{subtitle}</p>{/if}
+          </div>
+        {/if}
+        <button class="btn btn-ghost btn-icon modal-close" onclick={close} aria-label="Close">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        {@render children?.()}
+      </div>
+
+      {#if footer}
+        <div class="modal-footer">
+          {@render footer()}
+        </div>
+      {/if}
+
+    </div>
+  </div>
+{/if}

package/dist/components/Modal.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Modal;
+type Modal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Modal: import("svelte").Component<{
+    open?: boolean;
+    size?: string;
+    drawer?: boolean;
+    closeOnBackdrop?: boolean;
+    title?: any;
+    subtitle?: any;
+    header: any;
+    footer: any;
+    children: any;
+}, {}, "open">;
+type $$ComponentProps = {
+    open?: boolean;
+    size?: string;
+    drawer?: boolean;
+    closeOnBackdrop?: boolean;
+    title?: any;
+    subtitle?: any;
+    header: any;
+    footer: any;
+    children: any;
+};

package/dist/components/Pagination.svelte

@@ -0,0 +1,77 @@
+<script>
+  // Pagination — page navigation with ellipsis truncation.
+  // `page` is 1-based and bindable. Emits onchange(page) too.
+  let {
+    page      = $bindable(1),
+    total     = 1,            // total number of pages
+    siblings  = 1,            // pages shown on each side of current
+    onchange,
+    ...restProps
+  } = $props();
+
+  // Build the list of page items, inserting '…' where truncated.
+  function range(start, end) {
+    const out = [];
+    for (let i = start; i <= end; i++) out.push(i);
+    return out;
+  }
+
+  let items = $derived.by(() => {
+    const totalNumbers = siblings * 2 + 5; // first, last, current, 2 ellipsis slots
+    if (total <= totalNumbers) return range(1, total);
+
+    const left  = Math.max(page - siblings, 1);
+    const right = Math.min(page + siblings, total);
+    const showLeftDots  = left > 2;
+    const showRightDots = right < total - 1;
+
+    if (!showLeftDots && showRightDots) {
+      return [...range(1, siblings * 2 + 3), '…', total];
+    }
+    if (showLeftDots && !showRightDots) {
+      return [1, '…', ...range(total - (siblings * 2 + 2), total)];
+    }
+    return [1, '…', ...range(left, right), '…', total];
+  });
+
+  function go(p) {
+    if (p < 1 || p > total || p === page) return;
+    page = p;
+    onchange?.(p);
+  }
+</script>
+
+<nav class="pagination" aria-label="Pagination" {...restProps}>
+  <button
+    class="pagination-btn pagination-arrow"
+    disabled={page <= 1}
+    onclick={() => go(page - 1)}
+    aria-label="Previous page"
+  >
+    <span class="material-symbols-outlined">chevron_left</span>
+  </button>
+
+  {#each items as item}
+    {#if item === '…'}
+      <span class="pagination-ellipsis">…</span>
+    {:else}
+      <button
+        class="pagination-btn"
+        class:active={item === page}
+        aria-current={item === page ? 'page' : undefined}
+        onclick={() => go(item)}
+      >
+        {item}
+      </button>
+    {/if}
+  {/each}
+
+  <button
+    class="pagination-btn pagination-arrow"
+    disabled={page >= total}
+    onclick={() => go(page + 1)}
+    aria-label="Next page"
+  >
+    <span class="material-symbols-outlined">chevron_right</span>
+  </button>
+</nav>

package/dist/components/Pagination.svelte.d.ts

@@ -0,0 +1,17 @@
+export default Pagination;
+type Pagination = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Pagination: import("svelte").Component<{
+    page?: number;
+    total?: number;
+    siblings?: number;
+    onchange: any;
+} & Record<string, any>, {}, "page">;
+type $$ComponentProps = {
+    page?: number;
+    total?: number;
+    siblings?: number;
+    onchange: any;
+} & Record<string, any>;

package/dist/components/Progress.svelte

@@ -0,0 +1,34 @@
+<script>
+  // Progress — a linear progress bar. Determinate when `value` is set
+  // (0–max); indeterminate when `indeterminate` is true.
+  let {
+    value        = 0,
+    max          = 100,
+    indeterminate = false,
+    variant      = 'primary',   // 'primary' | 'success' | 'warning' | 'error'
+    size         = 'md',        // 'sm' | 'md' | 'lg'
+    showLabel    = false,
+    ...restProps
+  } = $props();
+
+  let pct = $derived(Math.max(0, Math.min(100, (value / max) * 100)));
+</script>
+
+<div class="progress-container" {...restProps}>
+  <div
+    class="progress progress-{size}"
+    role="progressbar"
+    aria-valuenow={indeterminate ? undefined : value}
+    aria-valuemin="0"
+    aria-valuemax={max}
+  >
+    <div
+      class="progress-bar progress-{variant}"
+      class:progress-indeterminate={indeterminate}
+      style:width={indeterminate ? undefined : `${pct}%`}
+    ></div>
+  </div>
+  {#if showLabel && !indeterminate}
+    <span class="progress-label">{Math.round(pct)}%</span>
+  {/if}
+</div>

package/dist/components/Progress.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Progress;
+type Progress = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Progress: import("svelte").Component<{
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    variant?: string;
+    size?: string;
+    showLabel?: boolean;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    variant?: string;
+    size?: string;
+    showLabel?: boolean;
+} & Record<string, any>;