slexkit 0.2.0

package/dist/components/input.js

@@ -0,0 +1,384 @@
+import {
+  append,
+  bindPropStore,
+  bind_value,
+  bool,
+  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_derived,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/input.ts
+import { register } from "../runtime.js";
+
+// src/engine/engineering.ts
+var NUMBER_RE = /^[+-]?(?:(?:\d+(?:\.\d*)?)|(?:\.\d+))(?:[eE][+-]?\d+)?/;
+var PREFIX_FACTORS = {
+  p: 0.000000000001,
+  n: 0.000000001,
+  u: 0.000001,
+  "µ": 0.000001,
+  m: 0.001,
+  k: 1000,
+  K: 1000,
+  M: 1e6,
+  meg: 1e6,
+  G: 1e9,
+  T: 1000000000000
+};
+var PREFIXES = ["meg", "p", "n", "u", "µ", "m", "k", "K", "M", "G", "T"];
+function invalid(raw, error) {
+  return {
+    raw,
+    number: null,
+    valid: false,
+    prefix: "",
+    unit: "",
+    normalized: "",
+    error
+  };
+}
+function parseSuffix(suffix) {
+  const compact = suffix.trim();
+  if (!compact)
+    return { prefix: "", unit: "" };
+  for (const prefix of PREFIXES) {
+    if (prefix === "meg") {
+      if (compact.toLowerCase().startsWith("meg")) {
+        return { prefix: "meg", unit: compact.slice(3).trim() };
+      }
+      continue;
+    }
+    if (compact.startsWith(prefix)) {
+      return { prefix, unit: compact.slice(prefix.length).trim() };
+    }
+  }
+  return { prefix: "", unit: compact };
+}
+function parseEngineeringNumber(input) {
+  const raw = input == null ? "" : String(input);
+  const source = raw.trim();
+  if (!source) {
+    return {
+      raw,
+      number: null,
+      valid: false,
+      prefix: "",
+      unit: "",
+      normalized: "",
+      error: "empty"
+    };
+  }
+  const numberMatch = source.match(NUMBER_RE);
+  if (!numberMatch)
+    return invalid(raw, "invalid_number");
+  const numberText = numberMatch[0];
+  const rest = source.slice(numberText.length).trim();
+  const base = Number(numberText);
+  if (!Number.isFinite(base))
+    return invalid(raw, "invalid_number");
+  const { prefix, unit } = parseSuffix(rest);
+  const multiplier = prefix ? PREFIX_FACTORS[prefix] : 1;
+  if (!Number.isFinite(multiplier))
+    return invalid(raw, "invalid_prefix");
+  const number = base * multiplier;
+  if (!Number.isFinite(number))
+    return invalid(raw, "out_of_range");
+  return {
+    raw,
+    number,
+    valid: true,
+    prefix,
+    unit,
+    normalized: `${number}${unit ? ` ${unit}` : ""}`
+  };
+}
+
+// src/components/svelte/input/Input.svelte
+var nextInputId = 0;
+var root_1 = from_html(`<label class="slex-input-label"> </label>`);
+var root_2 = from_html(`<span class="slex-input-unit" aria-hidden="true"> </span>`);
+var root_3 = from_html(`<span class="slex-input-controls"><button class="slex-input-step" type="button">-</button> <button class="slex-input-step" type="button">+</button></span>`);
+var root_4 = from_html(`<div class="slex-input-description"> </div>`);
+var root_5 = from_html(`<div class="slex-input-error" role="alert"> </div>`);
+var root = from_html(`<div class="slex-input-field"><!> <div class="slex-input-control"><input class="slex-input"/> <!> <!></div> <!> <!></div>`);
+function Input($$anchor, $$props) {
+  push($$props, true);
+  const engineeringPrefixFactors = {
+    p: 0.000000000001,
+    n: 0.000000001,
+    u: 0.000001,
+    "µ": 0.000001,
+    "碌": 0.000001,
+    m: 0.001,
+    k: 1000,
+    K: 1000,
+    M: 1e6,
+    meg: 1e6,
+    G: 1e9,
+    T: 1000000000000
+  };
+  let p = state(proxy({}));
+  let value = state("");
+  const fallbackId = `slex-input-${++nextInputId}`;
+  const labelText = user_derived(() => text(get(p).label));
+  const unitText = user_derived(() => text(get(p).unit));
+  const descriptionText = user_derived(() => text(get(p).description ?? get(p).help ?? get(p).hint));
+  const errorText = user_derived(() => text(get(p).error ?? get(p).errorMessage));
+  const disabled = user_derived(() => bool(get(p).disabled));
+  const readonly = user_derived(() => bool(get(p).readonly) || bool(get(p).readOnly));
+  const required = user_derived(() => bool(get(p).required));
+  const invalid2 = user_derived(() => bool(get(p).invalid) || !!get(errorText));
+  const steppable = user_derived(isSteppableInput);
+  const controls = user_derived(() => get(steppable) && get(p).controls !== false && get(p).controls !== "false");
+  const componentId = user_derived(() => safeId($$props.componentName));
+  const inputId = user_derived(() => text(get(p).id) || (get(componentId) ? `slex-input-${get(componentId)}` : fallbackId));
+  const descriptionId = user_derived(() => `${get(inputId)}-description`);
+  const errorId = user_derived(() => `${get(inputId)}-error`);
+  const explicitAriaLabel = user_derived(() => text(get(p)["aria-label"] ?? get(p).ariaLabel));
+  const computedAriaLabel = user_derived(() => get(explicitAriaLabel) || (get(labelText) ? "" : text(get(p).placeholder)));
+  const describedBy = user_derived(() => [
+    get(descriptionText) ? get(descriptionId) : "",
+    get(errorText) ? get(errorId) : ""
+  ].filter(Boolean).join(" "));
+  const numericValue = user_derived(readNumericValue);
+  const controlLabel = user_derived(() => get(labelText) || text(get(p).placeholder) || $$props.componentName || "input");
+  const decrementDisabled = user_derived(() => !canStep(-1));
+  const incrementDisabled = user_derived(() => !canStep(1));
+  user_effect(() => bindPropStore($$props.props, (next) => {
+    set(p, next, true);
+    set(value, text(next.value), true);
+  }));
+  function safeId(value2) {
+    return value2.trim().replace(/[^\w-]+/g, "-");
+  }
+  function inputType() {
+    return text(get(p).type, "text") === "engineering" ? "text" : text(get(p).type, "text");
+  }
+  function isSteppableInput() {
+    const kind = text(get(p).type, "text");
+    return kind === "number" || kind === "engineering" || get(p).min !== undefined || get(p).max !== undefined || get(p).step !== undefined;
+  }
+  function numericProp(input) {
+    if (input === undefined || input === null || input === "")
+      return;
+    const next = Number(input);
+    return Number.isFinite(next) ? next : undefined;
+  }
+  function stepSize() {
+    const next = numericProp(get(p).step);
+    if (next !== undefined && next > 0)
+      return next;
+    if (text(get(p).type, "text") !== "engineering")
+      return 1;
+    const parsed = parseEngineeringNumber(get(value));
+    if (!parsed.valid || !parsed.prefix)
+      return 1;
+    return engineeringPrefixFactors[parsed.prefix] ?? 1;
+  }
+  function readNumericValue() {
+    if (text(get(p).type, "text") === "engineering") {
+      const parsed = parseEngineeringNumber(get(value));
+      return parsed.valid && parsed.number !== null ? parsed.number : null;
+    }
+    const next = Number(get(value));
+    return Number.isFinite(next) ? next : null;
+  }
+  function clamp(next) {
+    const min = numericProp(get(p).min);
+    const max = numericProp(get(p).max);
+    let clamped = next;
+    if (min !== undefined)
+      clamped = Math.max(min, clamped);
+    if (max !== undefined)
+      clamped = Math.min(max, clamped);
+    return clamped;
+  }
+  function canStep(direction) {
+    if (!get(controls) || get(disabled) || get(readonly) || get(numericValue) === null)
+      return false;
+    return clamp(get(numericValue) + direction * stepSize()) !== get(numericValue);
+  }
+  function formatSteppedValue(next) {
+    if (text(get(p).type, "text") !== "engineering")
+      return text(next);
+    const parsed = parseEngineeringNumber(get(value));
+    if (!parsed.valid)
+      return text(next);
+    const factor = parsed.prefix ? engineeringPrefixFactors[parsed.prefix] : undefined;
+    const visibleNumber = factor ? next / factor : next;
+    return `${formatNumber(visibleNumber)}${parsed.prefix}${parsed.unit}`;
+  }
+  function formatNumber(next) {
+    return text(Number(next.toPrecision(12)));
+  }
+  function emitValue(nextValue) {
+    set(value, nextValue, true);
+    emit($$props.ctx, "change", text(get(p).type, "text") === "engineering" ? parseEngineeringNumber(get(value)) : get(value));
+  }
+  function stepBy(direction) {
+    if (!canStep(direction) || get(numericValue) === null)
+      return;
+    emitValue(formatSteppedValue(clamp(get(numericValue) + direction * stepSize())));
+  }
+  function update(event) {
+    if (get(disabled) || get(readonly))
+      return;
+    set(value, event.target.value, true);
+    emit($$props.ctx, "change", text(get(p).type, "text") === "engineering" ? parseEngineeringNumber(get(value)) : get(value));
+  }
+  var div = root();
+  var node = child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var label = root_1();
+      var text_1 = child(label, true);
+      reset(label);
+      template_effect(() => {
+        set_attribute(label, "for", get(inputId));
+        set_text(text_1, get(labelText));
+      });
+      append($$anchor2, label);
+    };
+    if_block(node, ($$render) => {
+      if (get(labelText))
+        $$render(consequent);
+    });
+  }
+  var div_1 = sibling(node, 2);
+  var input_1 = child(div_1);
+  remove_input_defaults(input_1);
+  var node_1 = sibling(input_1, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var span = root_2();
+      var text_2 = child(span, true);
+      reset(span);
+      template_effect(() => set_text(text_2, get(unitText)));
+      append($$anchor2, span);
+    };
+    if_block(node_1, ($$render) => {
+      if (get(unitText))
+        $$render(consequent_1);
+    });
+  }
+  var node_2 = sibling(node_1, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var span_1 = root_3();
+      var button = child(span_1);
+      var button_1 = sibling(button, 2);
+      reset(span_1);
+      template_effect(() => {
+        set_attribute(button, "aria-label", `Decrease ${get(controlLabel)}`);
+        button.disabled = get(decrementDisabled);
+        set_attribute(button_1, "aria-label", `Increase ${get(controlLabel)}`);
+        button_1.disabled = get(incrementDisabled);
+      });
+      delegated("click", button, () => stepBy(-1));
+      delegated("click", button_1, () => stepBy(1));
+      append($$anchor2, span_1);
+    };
+    if_block(node_2, ($$render) => {
+      if (get(controls))
+        $$render(consequent_2);
+    });
+  }
+  reset(div_1);
+  var node_3 = sibling(div_1, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var div_2 = root_4();
+      var text_3 = child(div_2, true);
+      reset(div_2);
+      template_effect(() => {
+        set_attribute(div_2, "id", get(descriptionId));
+        set_text(text_3, get(descriptionText));
+      });
+      append($$anchor2, div_2);
+    };
+    if_block(node_3, ($$render) => {
+      if (get(descriptionText))
+        $$render(consequent_3);
+    });
+  }
+  var node_4 = sibling(node_3, 2);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var div_3 = root_5();
+      var text_4 = child(div_3, true);
+      reset(div_3);
+      template_effect(() => {
+        set_attribute(div_3, "id", get(errorId));
+        set_text(text_4, get(errorText));
+      });
+      append($$anchor2, div_3);
+    };
+    if_block(node_4, ($$render) => {
+      if (get(errorText))
+        $$render(consequent_4);
+    });
+  }
+  reset(div);
+  template_effect(($0, $1, $2, $3, $4, $5, $6) => {
+    set_attribute(div, "data-invalid", get(invalid2) ? "true" : undefined);
+    set_attribute(div, "data-required", get(required) ? "true" : undefined);
+    set_attribute(div, "data-readonly", get(readonly) ? "true" : undefined);
+    set_attribute(div_1, "data-has-unit", get(unitText) ? "true" : undefined);
+    set_attribute(div_1, "data-has-controls", get(controls) ? "true" : undefined);
+    set_attribute(input_1, "id", get(inputId));
+    set_attribute(input_1, "type", $0);
+    set_attribute(input_1, "inputmode", $1);
+    set_attribute(input_1, "name", $2);
+    set_attribute(input_1, "placeholder", $3);
+    input_1.disabled = get(disabled);
+    input_1.readOnly = get(readonly);
+    input_1.required = get(required);
+    set_attribute(input_1, "min", $4);
+    set_attribute(input_1, "max", $5);
+    set_attribute(input_1, "step", $6);
+    set_attribute(input_1, "aria-label", get(computedAriaLabel) || undefined);
+    set_attribute(input_1, "aria-describedby", get(describedBy) || undefined);
+    set_attribute(input_1, "aria-invalid", get(invalid2) ? "true" : undefined);
+  }, [
+    () => inputType(),
+    () => text(get(p).type, "text") === "engineering" ? "decimal" : undefined,
+    () => text(get(p).name) || undefined,
+    () => text(get(p).placeholder),
+    () => get(p).min === undefined ? undefined : text(get(p).min),
+    () => get(p).max === undefined ? undefined : text(get(p).max),
+    () => get(p).step === undefined ? undefined : text(get(p).step)
+  ]);
+  delegated("input", input_1, update);
+  bind_value(input_1, () => get(value), ($$value) => set(value, $$value));
+  append($$anchor, div);
+  pop();
+}
+delegate(["input", "click"]);
+
+// src/components/entries/input.ts
+register("input", createSvelteRenderer("input", Input), { state: "value" });
+var input_default = Input;
+export {
+  input_default as default,
+  Input
+};

package/dist/components/link.js

@@ -0,0 +1,77 @@
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  child,
+  createSvelteRenderer,
+  from_html,
+  get,
+  if_block,
+  pop,
+  proxy,
+  push,
+  reset,
+  set,
+  set_attribute,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text1 as text,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/link.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/content/Link.svelte
+var root = from_html(`<a class="slex-link"><!> <span> </span></a>`);
+function Link($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  var a = root();
+  var node = child(a);
+  {
+    var consequent = ($$anchor2) => {
+      InlineIcon($$anchor2, {
+        get name() {
+          return get(p).icon;
+        },
+        className: "slex-link-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(a);
+  template_effect(($0, $1, $2, $3) => {
+    set_attribute(a, "data-variant", $0);
+    set_attribute(a, "href", $1);
+    set_attribute(a, "target", $2);
+    set_attribute(a, "rel", get(p).target === "_blank" ? "noreferrer" : undefined);
+    set_text(text_1, $3);
+  }, [
+    () => text(get(p).variant),
+    () => text(get(p).href, "#"),
+    () => text(get(p).target) || undefined,
+    () => text(get(p).text ?? get(p).label ?? get(p).content ?? get(p).href)
+  ]);
+  append($$anchor, a);
+  pop();
+}
+
+// src/components/entries/link.ts
+register("link", createSvelteRenderer("link", Link), { state: "readable" });
+var link_default = Link;
+export {
+  link_default as default,
+  Link
+};

package/dist/components/progress.js

@@ -0,0 +1,111 @@
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  child,
+  createSvelteRenderer,
+  from_html,
+  get,
+  if_block,
+  pop,
+  proxy,
+  push,
+  reset,
+  set,
+  set_attribute,
+  set_style,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text1 as text,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/progress.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/feedback/Progress.svelte
+var root_3 = from_html(`<span> </span>`);
+var root_1 = from_html(`<div class="slex-progress-label"><!> <!></div>`);
+var root = from_html(`<div class="slex-progress" data-scope="progress" role="progressbar"><!> <div class="slex-progress-track"><div class="slex-progress-range"></div></div></div>`);
+function Progress($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  function value() {
+    const next = Number(get(p).value ?? 0);
+    return Number.isFinite(next) ? Math.min(100, Math.max(0, next)) : 0;
+  }
+  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-progress-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);
+  var div_3 = child(div_2);
+  let styles;
+  reset(div_2);
+  reset(div);
+  template_effect(($0, $1, $2) => {
+    set_attribute(div, "data-state", get(p).indeterminate ? "indeterminate" : "determinate");
+    set_attribute(div, "aria-label", $0);
+    set_attribute(div, "aria-valuemin", get(p).indeterminate ? undefined : 0);
+    set_attribute(div, "aria-valuemax", get(p).indeterminate ? undefined : 100);
+    set_attribute(div, "aria-valuenow", $1);
+    styles = set_style(div_3, "", styles, $2);
+  }, [
+    () => text(get(p)["aria-label"] ?? get(p).ariaLabel ?? get(p).label) || undefined,
+    () => get(p).indeterminate ? undefined : value(),
+    () => ({ width: `${value()}%` })
+  ]);
+  append($$anchor, div);
+  pop();
+}
+
+// src/components/entries/progress.ts
+register("progress", createSvelteRenderer("progress", Progress), { state: "readable" });
+var progress_default = Progress;
+export {
+  progress_default as default,
+  Progress
+};