slexkit 0.2.0

package/dist/components/radio-group.js

@@ -0,0 +1,189 @@
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  child,
+  createSvelteRenderer,
+  delegate,
+  delegated,
+  each,
+  emit,
+  from_html,
+  get,
+  if_block,
+  index,
+  list,
+  pop,
+  proxy,
+  push,
+  remove_input_defaults,
+  reset,
+  set,
+  set_attribute,
+  set_checked,
+  set_text,
+  set_value,
+  sibling,
+  state,
+  template_effect,
+  text1 as text,
+  user_derived,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/radio-group.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/input/RadioGroup.svelte
+var root_3 = from_html(`<span> </span>`);
+var root_1 = from_html(`<div class="slex-radio-group-label"><!> <!></div>`);
+var root_4 = from_html(`<span class="slex-choice-event-layer"><label class="slex-radio-field"><input type="radio" class="slex-radio"/> <span class="slex-radio-label"><!> <span> </span></span></label></span>`);
+var root = from_html(`<div class="slex-radio-group" data-scope="radio-group" data-part="root" role="radiogroup"><!> <div class="slex-radio-group-list"></div></div>`);
+function RadioGroup($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  let value = state(undefined);
+  const lastHapticAt = new Map;
+  user_effect(() => bindPropStore($$props.props, (next) => {
+    set(p, next, true);
+    set(value, next.value, true);
+  }));
+  function choose(next) {
+    set(value, next, true);
+    emit($$props.ctx, "change", next);
+  }
+  function vibrate(disabled, duration = 8) {
+    if (disabled || get(p).haptic === false || get(p).haptics === false)
+      return;
+    const api = globalThis.navigator;
+    api?.vibrate?.(duration);
+  }
+  function haptic(key, disabled, duration = 8) {
+    const now = Date.now();
+    if (now - (lastHapticAt.get(key) ?? 0) < 80)
+      return;
+    lastHapticAt.set(key, now);
+    vibrate(disabled, duration);
+  }
+  function groupName() {
+    return text(get(p).name ?? $$props.ctx.id, $$props.ctx.id);
+  }
+  var div = root();
+  var node = child(div);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var div_1 = root_1();
+      var node_1 = child(div_1);
+      {
+        var consequent = ($$anchor3) => {
+          InlineIcon($$anchor3, {
+            get name() {
+              return get(p).icon;
+            },
+            className: "slex-radio-group-icon"
+          });
+        };
+        if_block(node_1, ($$render) => {
+          if (get(p).icon)
+            $$render(consequent);
+        });
+      }
+      var node_2 = sibling(node_1, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var span = root_3();
+          var text_1 = child(span, true);
+          reset(span);
+          template_effect(($0) => set_text(text_1, $0), [() => text(get(p).label)]);
+          append($$anchor3, span);
+        };
+        if_block(node_2, ($$render) => {
+          if (get(p).label)
+            $$render(consequent_1);
+        });
+      }
+      reset(div_1);
+      append($$anchor2, div_1);
+    };
+    if_block(node, ($$render) => {
+      if (get(p).label || get(p).icon)
+        $$render(consequent_2);
+    });
+  }
+  var div_2 = sibling(node, 2);
+  each(div_2, 21, () => list(get(p).options), index, ($$anchor2, item) => {
+    const itemValue = user_derived(() => get(item).value ?? get(item).label);
+    const disabled = user_derived(() => !!get(item).disabled || !!get(p).disabled);
+    const hapticKey = user_derived(() => text(get(itemValue)));
+    var span_1 = root_4();
+    var label = child(span_1);
+    var input = child(label);
+    remove_input_defaults(input);
+    var span_2 = sibling(input, 2);
+    var node_3 = child(span_2);
+    {
+      var consequent_3 = ($$anchor3) => {
+        {
+          let $0 = user_derived(() => get(itemValue) === get(value));
+          InlineIcon($$anchor3, {
+            get name() {
+              return get(item).icon;
+            },
+            get selected() {
+              return get($0);
+            },
+            className: "slex-radio-icon"
+          });
+        }
+      };
+      if_block(node_3, ($$render) => {
+        if (get(item).icon)
+          $$render(consequent_3);
+      });
+    }
+    var span_3 = sibling(node_3, 2);
+    var text_2 = child(span_3, true);
+    reset(span_3);
+    reset(span_2);
+    reset(label);
+    reset(span_1);
+    template_effect(($0, $1, $2) => {
+      set_attribute(input, "name", $0);
+      set_value(input, $1);
+      set_checked(input, get(itemValue) === get(value));
+      input.disabled = get(disabled);
+      set_attribute(input, "data-state", get(itemValue) === get(value) ? "checked" : "unchecked");
+      set_text(text_2, $2);
+    }, [
+      () => groupName(),
+      () => text(get(itemValue)),
+      () => text(get(item).label)
+    ]);
+    delegated("pointerdown", span_1, () => haptic(get(hapticKey), get(disabled), 8));
+    delegated("click", span_1, () => haptic(get(hapticKey), get(disabled), 8));
+    delegated("change", input, () => choose(get(itemValue)));
+    append($$anchor2, span_1);
+  });
+  reset(div_2);
+  reset(div);
+  template_effect(($0, $1) => {
+    set_attribute(div, "data-orientation", $0);
+    set_attribute(div, "aria-label", $1);
+  }, [
+    () => text(get(p).orientation, "vertical"),
+    () => text(get(p)["aria-label"] ?? get(p).ariaLabel ?? get(p).label) || undefined
+  ]);
+  append($$anchor, div);
+  pop();
+}
+delegate(["pointerdown", "click", "change"]);
+
+// src/components/entries/radio-group.ts
+register("radio-group", createSvelteRenderer("radio-group", RadioGroup), { state: "value" });
+var radio_group_default = RadioGroup;
+export {
+  radio_group_default as default,
+  RadioGroup
+};

package/dist/components/row.js

@@ -0,0 +1,200 @@
+import {
+  action,
+  append,
+  bindPropStore,
+  createSvelteRenderer,
+  from_html,
+  get,
+  pop,
+  proxy,
+  push,
+  renderChildren,
+  set,
+  set_attribute,
+  set_class,
+  set_style,
+  state,
+  template_effect,
+  text1 as text,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/row.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/layout/balancedTiles.ts
+function chooseBalancedColumns({
+  itemCount,
+  containerWidth,
+  targetTileWidth = 136,
+  gap = 16
+}) {
+  if (!Number.isFinite(itemCount) || itemCount <= 1)
+    return Math.max(1, Math.floor(itemCount || 1));
+  const usableWidth = Number.isFinite(containerWidth) && containerWidth > 0 ? containerWidth : Infinity;
+  const target = Math.max(80, targetTileWidth);
+  const spacing = Math.max(0, gap);
+  const maxFit = Number.isFinite(usableWidth) ? Math.max(1, Math.min(itemCount, Math.floor((usableWidth + spacing) / (target + spacing)))) : itemCount;
+  if (maxFit >= itemCount)
+    return itemCount;
+  let bestColumns = 1;
+  let bestScore = Number.POSITIVE_INFINITY;
+  for (let columns = 1;columns <= maxFit; columns += 1) {
+    const rows = Math.ceil(itemCount / columns);
+    const lastRowCount = itemCount - columns * (rows - 1);
+    const orphanPenalty = rows > 1 && lastRowCount === 1 ? 100 : 0;
+    const balancePenalty = rows > 1 ? (columns - lastRowCount) / columns * 10 : 0;
+    const rowPenalty = rows;
+    const widthPenalty = (maxFit - columns) * 0.05;
+    const score = orphanPenalty + balancePenalty + rowPenalty + widthPenalty;
+    if (score < bestScore) {
+      bestScore = score;
+      bestColumns = columns;
+    }
+  }
+  return bestColumns;
+}
+function createBalancedTileLayout(itemCount, columns) {
+  const count = Math.max(0, Math.floor(itemCount));
+  const safeColumns = Math.max(1, Math.min(count || 1, Math.floor(columns)));
+  const rows = Math.ceil(count / safeColumns);
+  const lastRowCount = count - safeColumns * (rows - 1);
+  const hasPartialLastRow = rows > 1 && lastRowCount > 0 && lastRowCount < safeColumns;
+  const tracks = hasPartialLastRow ? lcm(safeColumns, lastRowCount) : safeColumns;
+  const fullRowSpan = Math.max(1, tracks / safeColumns);
+  const lastRowSpan = hasPartialLastRow ? Math.max(1, tracks / lastRowCount) : fullRowSpan;
+  return {
+    columns: safeColumns,
+    tracks,
+    spans: Array.from({ length: count }, (_, index) => {
+      const isLastPartialRow = hasPartialLastRow && Math.floor(index / safeColumns) === rows - 1;
+      return isLastPartialRow ? lastRowSpan : fullRowSpan;
+    })
+  };
+}
+function gcd(a, b) {
+  let x = Math.abs(Math.floor(a));
+  let y = Math.abs(Math.floor(b));
+  while (y > 0) {
+    const next = x % y;
+    x = y;
+    y = next;
+  }
+  return x || 1;
+}
+function lcm(a, b) {
+  return Math.max(1, Math.abs(Math.floor(a * b / gcd(a, b))));
+}
+
+// src/components/svelte/layout/Row.svelte
+var root = from_html(`<div></div>`);
+function Row($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  function tileKind(children) {
+    if (children.length < 2)
+      return null;
+    if (children.every((child) => child.classList.contains("slex-stat")))
+      return "stat";
+    if (children.every((child) => child.classList.contains("slex-card")))
+      return "card";
+    return null;
+  }
+  function numericStyle(value, fallback) {
+    const n = Number.parseFloat(value);
+    return Number.isFinite(n) ? n : fallback;
+  }
+  function renderBalancedChildren(node, options) {
+    const children = renderChildren(node, $$props.ctx);
+    let current = options;
+    let pending = false;
+    const reset = () => {
+      node.classList.remove("slex-row--balanced-tiles");
+      node.removeAttribute("data-tile-kind");
+      node.style.removeProperty("--slex-balanced-cols");
+      node.style.removeProperty("--slex-balanced-tracks");
+      for (const child of Array.from(node.children)) {
+        if (child instanceof HTMLElement)
+          child.style.removeProperty("grid-column");
+      }
+    };
+    const rebalance = () => {
+      pending = false;
+      reset();
+      if (current.disabled)
+        return;
+      const directChildren = Array.from(node.children);
+      const kind = tileKind(directChildren);
+      if (!kind)
+        return;
+      const styles = getComputedStyle(node);
+      const gap = numericStyle(styles.columnGap || styles.gap, 16);
+      const targetTileWidth = numericStyle(styles.getPropertyValue("--slex-balanced-tile-width"), 136);
+      const width = node.getBoundingClientRect().width || node.clientWidth;
+      const columns = chooseBalancedColumns({
+        itemCount: directChildren.length,
+        containerWidth: width,
+        targetTileWidth,
+        gap
+      });
+      const layout = createBalancedTileLayout(directChildren.length, columns);
+      node.classList.add("slex-row--balanced-tiles");
+      node.dataset.tileKind = kind;
+      node.style.setProperty("--slex-balanced-cols", String(layout.columns));
+      node.style.setProperty("--slex-balanced-tracks", String(layout.tracks));
+      directChildren.forEach((child, index) => {
+        if (child instanceof HTMLElement)
+          child.style.gridColumn = `span ${layout.spans[index]}`;
+      });
+    };
+    const schedule = () => {
+      if (pending)
+        return;
+      pending = true;
+      queueMicrotask(rebalance);
+    };
+    const resizeObserver = new ResizeObserver(schedule);
+    resizeObserver.observe(node);
+    const mutationObserver = new MutationObserver(schedule);
+    mutationObserver.observe(node, { childList: true });
+    schedule();
+    return {
+      update(next) {
+        current = next;
+        schedule();
+      },
+      destroy() {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+        children.destroy();
+      }
+    };
+  }
+  var div = root();
+  let styles_1;
+  action(div, ($$node, $$action_arg) => renderBalancedChildren?.($$node, $$action_arg), () => ({ disabled: !!(get(p).align || get(p).justify) }));
+  template_effect(($0, $1, $2) => {
+    set_class(div, 1, $0);
+    set_attribute(div, "id", $1);
+    styles_1 = set_style(div, "", styles_1, $2);
+  }, [
+    () => `slex-row${get(p).class ? ` ${text(get(p).class)}` : ""}`,
+    () => get(p).id ? text(get(p).id) : undefined,
+    () => ({
+      "align-items": text(get(p).align),
+      "justify-content": text(get(p).justify),
+      gap: text(get(p).gap)
+    })
+  ]);
+  append($$anchor, div);
+  pop();
+}
+
+// src/components/entries/row.ts
+register("row", createSvelteRenderer("row", Row), { state: "none" });
+var row_default = Row;
+export {
+  row_default as default,
+  Row
+};

package/dist/components/section.js

@@ -0,0 +1,161 @@
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  action,
+  append,
+  bindPropStore,
+  child,
+  createSvelteRenderer,
+  from_html,
+  get,
+  if_block,
+  pop,
+  proxy,
+  push,
+  renderChildren,
+  reset,
+  set,
+  set_attribute,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text1 as text,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/section.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/content/Section.svelte
+var root_2 = from_html(`<div class="slex-section-eyebrow"> </div>`);
+var root_5 = from_html(`<span> </span>`);
+var root_3 = from_html(`<h2 class="slex-section-title"><!><!></h2>`);
+var root_6 = from_html(`<p class="slex-section-subtitle"> </p>`);
+var root_7 = from_html(`<a class="slex-section-action"> </a>`);
+var root_1 = from_html(`<header class="slex-section-header"><!> <!> <!> <!></header>`);
+var root = from_html(`<section class="slex-section"><!> <div class="slex-section-body"></div></section>`);
+function Section($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  var section = root();
+  var node = child(section);
+  {
+    var consequent_6 = ($$anchor2) => {
+      var header = root_1();
+      var node_1 = child(header);
+      {
+        var consequent = ($$anchor3) => {
+          var div = root_2();
+          var text_1 = child(div, true);
+          reset(div);
+          template_effect(($0) => set_text(text_1, $0), [() => text(get(p).eyebrow)]);
+          append($$anchor3, div);
+        };
+        if_block(node_1, ($$render) => {
+          if (get(p).eyebrow)
+            $$render(consequent);
+        });
+      }
+      var node_2 = sibling(node_1, 2);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var h2 = root_3();
+          var node_3 = child(h2);
+          {
+            var consequent_1 = ($$anchor4) => {
+              InlineIcon($$anchor4, {
+                get name() {
+                  return get(p).icon;
+                },
+                className: "slex-section-icon"
+              });
+            };
+            if_block(node_3, ($$render) => {
+              if (get(p).icon)
+                $$render(consequent_1);
+            });
+          }
+          var node_4 = sibling(node_3);
+          {
+            var consequent_2 = ($$anchor4) => {
+              var span = root_5();
+              var text_2 = child(span, true);
+              reset(span);
+              template_effect(($0) => set_text(text_2, $0), [() => text(get(p).title)]);
+              append($$anchor4, span);
+            };
+            if_block(node_4, ($$render) => {
+              if (get(p).title)
+                $$render(consequent_2);
+            });
+          }
+          reset(h2);
+          append($$anchor3, h2);
+        };
+        if_block(node_2, ($$render) => {
+          if (get(p).title || get(p).icon)
+            $$render(consequent_3);
+        });
+      }
+      var node_5 = sibling(node_2, 2);
+      {
+        var consequent_4 = ($$anchor3) => {
+          var p_1 = root_6();
+          var text_3 = child(p_1, true);
+          reset(p_1);
+          template_effect(($0) => set_text(text_3, $0), [() => text(get(p).subtitle)]);
+          append($$anchor3, p_1);
+        };
+        if_block(node_5, ($$render) => {
+          if (get(p).subtitle)
+            $$render(consequent_4);
+        });
+      }
+      var node_6 = sibling(node_5, 2);
+      {
+        var consequent_5 = ($$anchor3) => {
+          var a = root_7();
+          var text_4 = child(a, true);
+          reset(a);
+          template_effect(($0, $1) => {
+            set_attribute(a, "href", $0);
+            set_text(text_4, $1);
+          }, [
+            () => text(get(p).actionHref, "#"),
+            () => text(get(p).actionLabel)
+          ]);
+          append($$anchor3, a);
+        };
+        if_block(node_6, ($$render) => {
+          if (get(p).actionLabel)
+            $$render(consequent_5);
+        });
+      }
+      reset(header);
+      append($$anchor2, header);
+    };
+    if_block(node, ($$render) => {
+      if (get(p).title || get(p).subtitle || get(p).eyebrow)
+        $$render(consequent_6);
+    });
+  }
+  var div_1 = sibling(node, 2);
+  action(div_1, ($$node, $$action_arg) => renderChildren?.($$node, $$action_arg), () => $$props.ctx);
+  reset(section);
+  template_effect(($0) => set_attribute(section, "id", $0), [
+    () => text(get(p).id ?? $$props.componentName) || undefined
+  ]);
+  append($$anchor, section);
+  pop();
+}
+
+// src/components/entries/section.ts
+register("section", createSvelteRenderer("section", Section), { state: "readable" });
+var section_default = Section;
+export {
+  section_default as default,
+  Section
+};