slexkit 0.2.0

package/dist/components/stat.js

@@ -0,0 +1,178 @@
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  child,
+  createSvelteRenderer,
+  each,
+  from_html,
+  get,
+  if_block,
+  pop,
+  proxy,
+  push,
+  reset,
+  set,
+  set_attribute,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text1 as text,
+  user_derived,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/stat.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/display/Stat.svelte
+var root_2 = from_html(`<span class="slex-stat-character"><span class="slex-stat-character-current"> </span></span>`);
+var root_3 = from_html(`<span class="slex-stat-unit"> </span>`);
+var root = from_html(`<div class="slex-stat"><div class="slex-stat-label"><!> <span> </span></div> <div class="slex-stat-value"><span class="slex-stat-number"></span> <!></div></div>`);
+function Stat($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  let previousDisplayValue = state("");
+  let currentDisplayValue = state("");
+  let valueChange = state("changed");
+  let hasDisplayValue = false;
+  let shouldAnimateValue = state(false);
+  let valueAnimationPhase = state("update");
+  const valueText = user_derived(() => text(get(p).value));
+  const valueSegments = user_derived(() => statSegments(get(previousDisplayValue), get(currentDisplayValue)));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  function numericValue(value) {
+    const parsed = Number.parseFloat(value.replaceAll(",", ""));
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  function changeDirection(previous, next) {
+    const previousNumber = numericValue(previous);
+    const nextNumber = numericValue(next);
+    if (previousNumber === null || nextNumber === null)
+      return "changed";
+    if (nextNumber > previousNumber)
+      return "up";
+    if (nextNumber < previousNumber)
+      return "down";
+    return "changed";
+  }
+  function booleanProp(value) {
+    return value === true || value === "true" || value === 1 || value === "1";
+  }
+  function initialPreviousValue(value) {
+    return Array.from(value).map((char) => isDigit(char) ? "0" : char).join("");
+  }
+  user_effect(() => {
+    const next = get(valueText);
+    if (!hasDisplayValue) {
+      set(shouldAnimateValue, booleanProp(get(p).animateInitial), true);
+      set(previousDisplayValue, get(shouldAnimateValue) ? initialPreviousValue(next) : next, true);
+      set(currentDisplayValue, next, true);
+      set(valueChange, "up");
+      set(valueAnimationPhase, "initial");
+      hasDisplayValue = true;
+      return;
+    }
+    if (next === get(currentDisplayValue))
+      return;
+    set(valueChange, changeDirection(get(currentDisplayValue), next), true);
+    set(previousDisplayValue, get(currentDisplayValue), true);
+    set(currentDisplayValue, next, true);
+    set(shouldAnimateValue, true);
+    set(valueAnimationPhase, "update");
+  });
+  function isDigit(char) {
+    return /^[0-9]$/.test(char);
+  }
+  function statSegments(previous, current) {
+    const previousChars = Array.from(previous);
+    const currentChars = Array.from(current);
+    const currentOffset = Math.max(0, currentChars.length - previousChars.length);
+    const previousOffset = Math.max(0, previousChars.length - currentChars.length);
+    return currentChars.map((char, index) => {
+      const previousChar = previousChars[index - currentOffset + previousOffset] ?? "";
+      return {
+        char,
+        previousChar,
+        changed: previousChar !== char,
+        key: `${index}:${char}`,
+        kind: isDigit(char) ? "digit" : "symbol"
+      };
+    });
+  }
+  var div = root();
+  var div_1 = child(div);
+  var node = child(div_1);
+  {
+    var consequent = ($$anchor2) => {
+      InlineIcon($$anchor2, {
+        get name() {
+          return get(p).icon;
+        },
+        className: "slex-stat-icon"
+      });
+    };
+    if_block(node, ($$render) => {
+      if (get(p).icon)
+        $$render(consequent);
+    });
+  }
+  var span = sibling(node, 2);
+  var text_1 = child(span, true);
+  reset(span);
+  reset(div_1);
+  var div_2 = sibling(div_1, 2);
+  var span_1 = child(div_2);
+  each(span_1, 21, () => get(valueSegments), (segment) => segment.key, ($$anchor2, segment) => {
+    var span_2 = root_2();
+    var span_3 = child(span_2);
+    var text_2 = child(span_3, true);
+    reset(span_3);
+    reset(span_2);
+    template_effect(() => {
+      set_attribute(span_2, "data-stat-kind", get(segment).kind);
+      set_attribute(span_2, "data-stat-change", get(segment).changed && get(shouldAnimateValue) ? get(valueChange) : undefined);
+      set_attribute(span_2, "data-stat-initial", get(segment).changed && get(shouldAnimateValue) && get(valueAnimationPhase) === "initial" ? "true" : undefined);
+      set_attribute(span_2, "data-stat-previous", get(segment).previousChar || undefined);
+      set_text(text_2, get(segment).char);
+    });
+    append($$anchor2, span_2);
+  });
+  reset(span_1);
+  var node_1 = sibling(span_1, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var span_4 = root_3();
+      var text_3 = child(span_4, true);
+      reset(span_4);
+      template_effect(($0) => set_text(text_3, $0), [() => text(get(p).unit)]);
+      append($$anchor2, span_4);
+    };
+    if_block(node_1, ($$render) => {
+      if (get(p).unit)
+        $$render(consequent_1);
+    });
+  }
+  reset(div_2);
+  reset(div);
+  template_effect(($0, $1) => {
+    set_attribute(div, "data-tone", $0);
+    set_text(text_1, $1);
+  }, [
+    () => get(p).tone || get(p).type ? text(get(p).tone ?? get(p).type) : undefined,
+    () => text(get(p).label ?? $$props.componentName)
+  ]);
+  append($$anchor, div);
+  pop();
+}
+
+// src/components/entries/stat.ts
+register("stat", createSvelteRenderer("stat", Stat), { state: "readable" });
+var stat_default = Stat;
+export {
+  stat_default as default,
+  Stat
+};

package/dist/components/submit.css

@@ -0,0 +1,9 @@
+.slex-submit-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border);
+}

package/dist/components/submit.js

@@ -0,0 +1,77 @@
+import {
+  append,
+  bindPropStore,
+  child,
+  createSvelteRenderer,
+  delegate,
+  delegated,
+  from_html,
+  get,
+  label,
+  pop,
+  proxy,
+  push,
+  reset,
+  set,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/submit.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/input/Submit.svelte
+var root = from_html(`<div class="slex-submit-bar"><button type="button" class="slex-button slex-button--ghost"> </button> <button type="button" class="slex-button slex-button--primary"> </button></div>`);
+function Submit($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  function submitTool() {
+    if (get(p).disabled)
+      return;
+    const runtime = $$props.ctx.g.__slexkitTool;
+    if (!runtime?.submit)
+      return;
+    const result = {};
+    for (const key of Array.isArray(get(p).returnKeys) ? get(p).returnKeys : []) {
+      result[String(key)] = String(key).split(".").reduce((current, part) => current && typeof current === "object" ? current[part] : undefined, $$props.ctx.g);
+    }
+    runtime.submit(result);
+  }
+  function ignoreTool() {
+    const runtime = $$props.ctx.g.__slexkitTool;
+    runtime?.ignore?.();
+  }
+  var div = root();
+  var button = child(div);
+  var text = child(button, true);
+  reset(button);
+  var button_1 = sibling(button, 2);
+  var text_1 = child(button_1, true);
+  reset(button_1);
+  reset(div);
+  template_effect(($0, $1) => {
+    set_text(text, $0);
+    button_1.disabled = !!get(p).disabled;
+    set_text(text_1, $1);
+  }, [
+    () => label($$props.ctx, "submit.ignore", get(p).ignoreLabel, "Ignore"),
+    () => label($$props.ctx, "submit.submit", get(p).submitLabel, "Submit")
+  ]);
+  delegated("click", button, ignoreTool);
+  delegated("click", button_1, submitTool);
+  append($$anchor, div);
+  pop();
+}
+delegate(["click"]);
+
+// src/components/entries/submit.ts
+register("submit", createSvelteRenderer("submit", Submit), { state: "none" });
+var submit_default = Submit;
+export {
+  submit_default as default,
+  Submit
+};

package/dist/components/switch.css

@@ -0,0 +1,114 @@
+.slex-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.slex-switch-event-layer {
+  display: inline-flex;
+}
+
+.slex-choice-event-layer {
+  display: inline-flex;
+}
+
+.slex-switch-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+  color: var(--foreground);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.slex-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;
+}
+
+.slex-switch-control {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  width: 2.75rem;
+  height: 1.5rem;
+  margin-inline-end: 0;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: 9999px;
+  background: var(--input);
+  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.slex-switch-control::after {
+  content: "";
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--background);
+  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 12%, transparent);
+  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+  transform: translateX(0);
+  will-change: transform;
+}
+
+.slex-switch:hover .slex-switch-control {
+  border-color: color-mix(in oklab, var(--primary) 42%, var(--input));
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
+}
+
+.slex-switch:hover .slex-switch-control::after {
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 10%, transparent);
+}
+
+.slex-switch:active .slex-switch-control::after {
+  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 16%, transparent);
+}
+
+.slex-switch-input:checked + .slex-switch-control {
+  border-color: var(--primary);
+  background: var(--primary);
+}
+
+.slex-switch:hover .slex-switch-input:checked + .slex-switch-control {
+  background: color-mix(in oklab, var(--primary) 88%, var(--background));
+}
+
+.slex-switch-input:checked + .slex-switch-control::after {
+  background: var(--background);
+  transform: translateX(1.25rem);
+}
+
+.slexkit-root[dir="rtl"] .slex-switch-input:checked + .slex-switch-control::after {
+  transform: translateX(-1.25rem);
+}
+
+.slex-switch-input:focus-visible + .slex-switch-control {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent);
+}
+
+.slex-switch-input:disabled + .slex-switch-control {
+  opacity: 0.55;
+}
+
+.slex-switch:has(.slex-switch-input:disabled) {
+  cursor: not-allowed;
+}
+
+.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control,
+.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control::after {
+  box-shadow: none;
+}

package/dist/components/switch.js

@@ -0,0 +1,114 @@
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  bind_checked,
+  child,
+  createSvelteRenderer,
+  delegate,
+  delegated,
+  emit,
+  from_html,
+  get,
+  if_block,
+  pop,
+  proxy,
+  push,
+  remove_input_defaults,
+  reset,
+  set,
+  set_attribute,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text1 as text,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/switch.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/input/Switch.svelte
+var root = from_html(`<span class="slex-switch-event-layer"><label class="slex-switch"><input type="checkbox" role="switch" class="slex-switch-input"/> <span class="slex-switch-control" aria-hidden="true"></span> <span class="slex-switch-label"><!> <span> </span></span></label></span>`);
+function Switch($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  let enabled = state(false);
+  let lastHapticAt = 0;
+  user_effect(() => bindPropStore($$props.props, (next) => {
+    set(p, next, true);
+    set(enabled, !!next.enabled);
+  }));
+  function toggle(event) {
+    if (get(p).disabled)
+      return;
+    set(enabled, event.target.checked, true);
+    emit($$props.ctx, "change", get(enabled));
+  }
+  function vibrate(duration = 8) {
+    if (get(p).haptic === false || get(p).haptics === false || get(p).disabled)
+      return;
+    const api = globalThis.navigator;
+    api?.vibrate?.(duration);
+  }
+  function haptic(duration = 8) {
+    const now = Date.now();
+    if (now - lastHapticAt < 80)
+      return;
+    lastHapticAt = now;
+    vibrate(duration);
+  }
+  var span = root();
+  var label = child(span);
+  var input = child(label);
+  remove_input_defaults(input);
+  var span_1 = sibling(input, 4);
+  var node = child(span_1);
+  {
+    var consequent = ($$anchor2) => {
+      InlineIcon($$anchor2, {
+        get name() {
+          return get(p).icon;
+        },
+        className: "slex-switch-icon"
+      });
+    };
+    if_block(node, ($$render) => {
+      if (get(p).icon)
+        $$render(consequent);
+    });
+  }
+  var span_2 = sibling(node, 2);
+  var text_1 = child(span_2, true);
+  reset(span_2);
+  reset(span_1);
+  reset(label);
+  reset(span);
+  template_effect(($0, $1) => {
+    set_attribute(label, "data-state", get(enabled) ? "on" : "off");
+    input.disabled = !!get(p).disabled;
+    set_attribute(input, "aria-label", $0);
+    set_text(text_1, $1);
+  }, [
+    () => text(get(p)["aria-label"] ?? get(p).ariaLabel ?? get(p).label) || undefined,
+    () => text(get(p).label)
+  ]);
+  delegated("pointerdown", span, () => haptic(8));
+  delegated("click", span, () => haptic(8));
+  delegated("change", input, toggle);
+  bind_checked(input, () => get(enabled), ($$value) => set(enabled, $$value));
+  append($$anchor, span);
+  pop();
+}
+delegate(["pointerdown", "click", "change"]);
+
+// src/components/entries/switch.ts
+register("switch", createSvelteRenderer("switch", Switch), { state: "enabled" });
+var switch_default = Switch;
+export {
+  switch_default as default,
+  Switch
+};

package/dist/components/table.js

@@ -0,0 +1,157 @@
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  child,
+  comment,
+  createSvelteRenderer,
+  each,
+  first_child,
+  from_html,
+  get,
+  if_block,
+  index,
+  pop,
+  proxy,
+  push,
+  readCell,
+  readColumnLabel,
+  readColumns,
+  reset,
+  rows,
+  set,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text1 as text,
+  user_derived,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/table.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/content/Table.svelte
+var root_2 = from_html(`<th scope="col"><span class="slex-table-column-label"><!> <span> </span></span></th>`);
+var root_1 = from_html(`<thead><tr></tr></thead>`);
+var root_6 = from_html(`<td> </td>`);
+var root_8 = from_html(`<td> </td>`);
+var root_9 = from_html(`<td> </td>`);
+var root_4 = from_html(`<tr><!></tr>`);
+var root = from_html(`<div class="slex-table-wrap"><table class="slex-table"><!><tbody></tbody></table></div>`);
+function Table($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  var div = root();
+  var table = child(div);
+  var node = child(table);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var thead = root_1();
+      var tr = child(thead);
+      each(tr, 21, () => rows(get(p).columns), index, ($$anchor3, column, index2) => {
+        var th = root_2();
+        var span = child(th);
+        var node_1 = child(span);
+        {
+          var consequent = ($$anchor4) => {
+            InlineIcon($$anchor4, {
+              get name() {
+                return get(column).icon;
+              },
+              className: "slex-table-column-icon"
+            });
+          };
+          if_block(node_1, ($$render) => {
+            if (get(column) && typeof get(column) === "object" && "icon" in get(column))
+              $$render(consequent);
+          });
+        }
+        var span_1 = sibling(node_1, 2);
+        var text_1 = child(span_1, true);
+        reset(span_1);
+        reset(span);
+        reset(th);
+        template_effect(($0) => set_text(text_1, $0), [
+          () => readColumnLabel(get(column), readColumns(get(p).columns)[index2] ?? "")
+        ]);
+        append($$anchor3, th);
+      });
+      reset(tr);
+      reset(thead);
+      append($$anchor2, thead);
+    };
+    var d = user_derived(() => readColumns(get(p).columns).length);
+    if_block(node, ($$render) => {
+      if (get(d))
+        $$render(consequent_1);
+    });
+  }
+  var tbody = sibling(node);
+  each(tbody, 21, () => rows(get(p).rows ?? get(p).items), index, ($$anchor2, row) => {
+    var tr_1 = root_4();
+    var node_2 = child(tr_1);
+    {
+      var consequent_2 = ($$anchor3) => {
+        var fragment_1 = comment();
+        var node_3 = first_child(fragment_1);
+        each(node_3, 17, () => readColumns(get(p).columns), index, ($$anchor4, column) => {
+          var td = root_6();
+          var text_2 = child(td, true);
+          reset(td);
+          template_effect(($0) => set_text(text_2, $0), [() => readCell(get(row), get(column))]);
+          append($$anchor4, td);
+        });
+        append($$anchor3, fragment_1);
+      };
+      var d_1 = user_derived(() => readColumns(get(p).columns).length);
+      var consequent_3 = ($$anchor3) => {
+        var fragment_2 = comment();
+        var node_4 = first_child(fragment_2);
+        each(node_4, 17, () => get(row), index, ($$anchor4, cell) => {
+          var td_1 = root_8();
+          var text_3 = child(td_1, true);
+          reset(td_1);
+          template_effect(($0) => set_text(text_3, $0), [() => text(get(cell))]);
+          append($$anchor4, td_1);
+        });
+        append($$anchor3, fragment_2);
+      };
+      var d_2 = user_derived(() => Array.isArray(get(row)));
+      var alternate = ($$anchor3) => {
+        var td_2 = root_9();
+        var text_4 = child(td_2, true);
+        reset(td_2);
+        template_effect(($0) => set_text(text_4, $0), [() => text(get(row))]);
+        append($$anchor3, td_2);
+      };
+      if_block(node_2, ($$render) => {
+        if (get(d_1))
+          $$render(consequent_2);
+        else if (get(d_2))
+          $$render(consequent_3, 1);
+        else
+          $$render(alternate, -1);
+      });
+    }
+    reset(tr_1);
+    append($$anchor2, tr_1);
+  });
+  reset(tbody);
+  reset(table);
+  reset(div);
+  append($$anchor, div);
+  pop();
+}
+
+// src/components/entries/table.ts
+register("table", createSvelteRenderer("table", Table), { state: "readable" });
+var table_default = Table;
+export {
+  table_default as default,
+  Table
+};