slexkit 0.2.0

package/dist/chunks/accordion-5f0nvjjm.js

@@ -0,0 +1,376 @@
+import {
+  InlineIcon
+} from "./accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  bind_select_value,
+  bind_this,
+  child,
+  delegate,
+  delegated,
+  each,
+  emit,
+  event,
+  from_html,
+  get,
+  if_block,
+  index,
+  label,
+  list,
+  next,
+  onMount,
+  pop,
+  proxy,
+  push,
+  reset,
+  set,
+  set_attribute,
+  set_class,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text1 as text,
+  user_derived,
+  user_effect
+} from "./accordion-nw12ytps.js";
+
+// src/components/svelte/input/Select.svelte
+var root_3 = from_html(`<span> </span>`);
+var root_1 = from_html(`<label class="slex-select-label"><!> <!></label>`);
+var root_8 = from_html(`<span class="slex-select-check" aria-hidden="true"></span>`);
+var root_6 = from_html(`<li role="option"><span class="slex-select-option-label"><!> <span> </span></span> <!></li>`);
+var root_5 = from_html(`<ul class="slex-select-menu" role="listbox"></ul>`);
+var root_9 = from_html(`<option> </option>`);
+var root = from_html(`<div class="slex-select"><!> <button type="button" class="slex-select-trigger" aria-haspopup="listbox"><span class="slex-select-value"><!> <span> </span></span> <span class="slex-select-icon" aria-hidden="true"></span></button> <!> <select class="slex-select-native" tabindex="-1" aria-hidden="true"><option> </option><!></select></div>`);
+function Select($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  let value = state("");
+  let open = state(false);
+  let activeIndex = state(-1);
+  let triggerEl = state(null);
+  const ariaLabel = user_derived(() => text(get(p)["aria-label"] ?? get(p).ariaLabel));
+  const baseId = user_derived(() => `slex-select-${$$props.ctx.id}`);
+  const labelId = user_derived(() => `${get(baseId)}-label`);
+  const valueId = user_derived(() => `${get(baseId)}-value`);
+  const listboxId = user_derived(() => `${get(baseId)}-listbox`);
+  user_effect(() => bindPropStore($$props.props, (next2) => {
+    set(p, next2, true);
+    set(value, next2.value ?? "", true);
+    set(activeIndex, selectedIndex(), true);
+  }));
+  const options = user_derived(() => list(get(p).options).map((item) => ({
+    label: text(item.label ?? item.value),
+    value: text(item.value ?? item.label),
+    disabled: !!item.disabled,
+    icon: item.icon
+  })));
+  const placeholder = user_derived(() => label($$props.ctx, "select.placeholder", get(p).placeholder, "Select..."));
+  const selected = user_derived(() => get(options).find((item) => item.value === text(get(value))));
+  const displayLabel = user_derived(() => get(selected)?.label || get(placeholder));
+  const activeOptionId = user_derived(() => get(open) && get(activeIndex) >= 0 ? `${get(baseId)}-option-${get(activeIndex)}` : undefined);
+  onMount(() => {
+    function closeFromOutside(event2) {
+      const target = event2.target;
+      if (!target || !get(triggerEl)?.closest(".slex-select")?.contains(target))
+        close(false);
+    }
+    document.addEventListener("mousedown", closeFromOutside);
+    return () => document.removeEventListener("mousedown", closeFromOutside);
+  });
+  function choose(next2) {
+    if (get(p).disabled)
+      return;
+    set(value, next2, true);
+    set(activeIndex, selectedIndex(), true);
+    close();
+    emit($$props.ctx, "change", next2);
+    emit($$props.ctx, "select", next2);
+  }
+  function selectedIndex() {
+    return get(options).findIndex((item) => item.value === text(get(value)));
+  }
+  function firstEnabledIndex() {
+    return get(options).findIndex((item) => !item.disabled);
+  }
+  function lastEnabledIndex() {
+    for (let i = get(options).length - 1;i >= 0; i -= 1) {
+      if (!get(options)[i].disabled)
+        return i;
+    }
+    return -1;
+  }
+  function moveActive(delta) {
+    if (!get(options).length) {
+      set(activeIndex, -1);
+      return;
+    }
+    const start = get(activeIndex) >= 0 ? get(activeIndex) : selectedIndex();
+    let next2 = start;
+    for (let i = 0;i < get(options).length; i += 1) {
+      next2 = (next2 + delta + get(options).length) % get(options).length;
+      if (!get(options)[next2].disabled) {
+        set(activeIndex, next2, true);
+        return;
+      }
+    }
+    set(activeIndex, -1);
+  }
+  function openMenu(direction = 1) {
+    if (get(p).disabled)
+      return;
+    set(open, true);
+    const current = selectedIndex();
+    set(activeIndex, current >= 0 && !get(options)[current]?.disabled ? current : direction > 0 ? firstEnabledIndex() : lastEnabledIndex(), true);
+  }
+  function close(focusTrigger = true) {
+    set(open, false);
+    set(activeIndex, selectedIndex(), true);
+    if (focusTrigger)
+      requestAnimationFrame(() => get(triggerEl)?.focus());
+  }
+  function toggle() {
+    if (get(open))
+      close(false);
+    else
+      openMenu();
+  }
+  function onKeydown(event2) {
+    if (get(p).disabled)
+      return;
+    if (!get(open) && (event2.key === "Enter" || event2.key === " " || event2.key === "ArrowDown" || event2.key === "ArrowUp")) {
+      event2.preventDefault();
+      openMenu(event2.key === "ArrowUp" ? -1 : 1);
+      return;
+    }
+    if (!get(open))
+      return;
+    if (event2.key === "ArrowDown") {
+      event2.preventDefault();
+      moveActive(1);
+    } else if (event2.key === "ArrowUp") {
+      event2.preventDefault();
+      moveActive(-1);
+    } else if (event2.key === "Home") {
+      event2.preventDefault();
+      set(activeIndex, firstEnabledIndex(), true);
+    } else if (event2.key === "End") {
+      event2.preventDefault();
+      set(activeIndex, lastEnabledIndex(), true);
+    } else if (event2.key === "Enter" || event2.key === " ") {
+      event2.preventDefault();
+      const item = get(options)[get(activeIndex)];
+      if (item && !item.disabled)
+        choose(item.value);
+    } else if (event2.key === "Escape") {
+      event2.preventDefault();
+      close();
+    } else if (event2.key === "Tab") {
+      close(false);
+    }
+  }
+  var div = root();
+  var node = child(div);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var label_1 = root_1();
+      var node_1 = child(label_1);
+      {
+        var consequent = ($$anchor3) => {
+          InlineIcon($$anchor3, {
+            get name() {
+              return get(p).icon;
+            },
+            className: "slex-select-label-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(label_1);
+      template_effect(() => {
+        set_attribute(label_1, "id", get(labelId));
+        set_attribute(label_1, "for", get(baseId));
+      });
+      append($$anchor2, label_1);
+    };
+    if_block(node, ($$render) => {
+      if (get(p).label || get(p).icon)
+        $$render(consequent_2);
+    });
+  }
+  var button = sibling(node, 2);
+  var span_1 = child(button);
+  var node_3 = child(span_1);
+  {
+    var consequent_3 = ($$anchor2) => {
+      InlineIcon($$anchor2, {
+        get name() {
+          return get(selected).icon;
+        },
+        selected: true,
+        className: "slex-select-value-icon"
+      });
+    };
+    if_block(node_3, ($$render) => {
+      if (get(selected)?.icon)
+        $$render(consequent_3);
+    });
+  }
+  var span_2 = sibling(node_3, 2);
+  var text_2 = child(span_2, true);
+  reset(span_2);
+  reset(span_1);
+  next(2);
+  reset(button);
+  bind_this(button, ($$value) => set(triggerEl, $$value), () => get(triggerEl));
+  var node_4 = sibling(button, 2);
+  {
+    var consequent_6 = ($$anchor2) => {
+      var ul = root_5();
+      each(ul, 21, () => get(options), index, ($$anchor3, item, index2) => {
+        const isSelected = user_derived(() => get(item).value === text(get(value)));
+        const isActive = user_derived(() => index2 === get(activeIndex));
+        var li = root_6();
+        let classes;
+        var span_3 = child(li);
+        var node_5 = child(span_3);
+        {
+          var consequent_4 = ($$anchor4) => {
+            InlineIcon($$anchor4, {
+              get name() {
+                return get(item).icon;
+              },
+              get selected() {
+                return get(isSelected);
+              },
+              className: "slex-select-option-icon"
+            });
+          };
+          if_block(node_5, ($$render) => {
+            if (get(item).icon)
+              $$render(consequent_4);
+          });
+        }
+        var span_4 = sibling(node_5, 2);
+        var text_3 = child(span_4, true);
+        reset(span_4);
+        reset(span_3);
+        var node_6 = sibling(span_3, 2);
+        {
+          var consequent_5 = ($$anchor4) => {
+            var span_5 = root_8();
+            append($$anchor4, span_5);
+          };
+          if_block(node_6, ($$render) => {
+            if (get(isSelected))
+              $$render(consequent_5);
+          });
+        }
+        reset(li);
+        template_effect(() => {
+          set_attribute(li, "id", `${get(baseId)}-option-${index2}`);
+          classes = set_class(li, 1, "slex-select-option", null, classes, {
+            "slex-select-option--active": get(isActive),
+            "slex-select-option--selected": get(isSelected)
+          });
+          set_attribute(li, "aria-selected", get(isSelected));
+          set_attribute(li, "aria-disabled", get(item).disabled || undefined);
+          set_attribute(li, "data-disabled", get(item).disabled ? "" : undefined);
+          set_text(text_3, get(item).label);
+        });
+        event("mouseenter", li, () => {
+          if (!get(item).disabled)
+            set(activeIndex, index2, true);
+        });
+        delegated("mousedown", li, (event2) => event2.preventDefault());
+        delegated("click", li, () => {
+          if (!get(item).disabled)
+            choose(get(item).value);
+        });
+        append($$anchor3, li);
+      });
+      reset(ul);
+      template_effect(() => {
+        set_attribute(ul, "id", get(listboxId));
+        set_attribute(ul, "aria-labelledby", get(p).label ? get(labelId) : undefined);
+        set_attribute(ul, "aria-label", !get(p).label && get(ariaLabel) ? get(ariaLabel) : undefined);
+      });
+      append($$anchor2, ul);
+    };
+    if_block(node_4, ($$render) => {
+      if (get(open))
+        $$render(consequent_6);
+    });
+  }
+  var select = sibling(node_4, 2);
+  var option = child(select);
+  var text_4 = child(option, true);
+  reset(option);
+  option.value = option.__value = "";
+  var node_7 = sibling(option);
+  each(node_7, 17, () => get(options), index, ($$anchor2, item) => {
+    var option_1 = root_9();
+    var text_5 = child(option_1, true);
+    reset(option_1);
+    var option_1_value = {};
+    template_effect(() => {
+      option_1.disabled = get(item).disabled;
+      set_text(text_5, get(item).label);
+      if (option_1_value !== (option_1_value = get(item).value)) {
+        option_1.value = (option_1.__value = get(item).value) ?? "";
+      }
+    });
+    append($$anchor2, option_1);
+  });
+  reset(select);
+  reset(div);
+  template_effect(($0, $1) => {
+    set_attribute(div, "data-variant", $0);
+    set_attribute(button, "id", get(baseId));
+    button.disabled = !!get(p).disabled;
+    set_attribute(button, "aria-expanded", get(open));
+    set_attribute(button, "aria-controls", get(listboxId));
+    set_attribute(button, "aria-activedescendant", get(activeOptionId));
+    set_attribute(button, "aria-labelledby", get(p).label ? `${get(labelId)} ${get(valueId)}` : undefined);
+    set_attribute(button, "aria-label", !get(p).label && get(ariaLabel) ? get(ariaLabel) : undefined);
+    set_attribute(span_1, "id", get(valueId));
+    set_attribute(span_1, "data-placeholder", get(selected) ? undefined : "");
+    set_text(text_2, get(displayLabel));
+    select.disabled = !!get(p).disabled;
+    select.required = !!get(p).required;
+    set_attribute(select, "aria-label", get(ariaLabel) || undefined);
+    option.disabled = !!get(p).required;
+    set_text(text_4, $1);
+  }, [
+    () => text(get(p).variant, "default"),
+    () => label($$props.ctx, "select.placeholder", get(p).placeholder, "Select...")
+  ]);
+  delegated("click", button, toggle);
+  delegated("keydown", button, onKeydown);
+  delegated("change", select, (event2) => choose(event2.target.value));
+  bind_select_value(select, () => get(value), ($$value) => set(value, $$value));
+  append($$anchor, div);
+  pop();
+}
+delegate(["click", "keydown", "mousedown", "change"]);
+
+export { Select };

package/dist/chunks/accordion-830dw78f.js

@@ -0,0 +1,221 @@
+import {
+  InlineIcon,
+  resolveIconWeight
+} from "./accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  child,
+  comment,
+  delegate,
+  delegated,
+  emit,
+  first_child,
+  from_html,
+  get,
+  if_block,
+  label,
+  pop,
+  proxy,
+  push,
+  reset,
+  set,
+  set_attribute,
+  set_class,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text,
+  text1 as text2,
+  user_derived,
+  user_effect
+} from "./accordion-nw12ytps.js";
+
+// src/components/svelte/input/Button.svelte
+var root_3 = from_html(`<span class="slex-sr-only"> </span>`);
+var root_1 = from_html(`<a><!> <!></a>`);
+var root_7 = from_html(`<span class="slex-sr-only"> </span>`);
+var root_5 = from_html(`<button type="button"><!> <!></button>`);
+function Button($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  function variant() {
+    const kind = text2(get(p).type ?? get(p).variant ?? "primary");
+    if (kind === "destructive")
+      return "danger";
+    if (kind === "default")
+      return "primary";
+    return kind;
+  }
+  function selected() {
+    return resolveIconWeight({
+      selected: get(p).selected,
+      active: get(p).active,
+      pressed: get(p).pressed
+    }) === "duotone";
+  }
+  function iconOnly() {
+    return !!(get(p).iconOnly || get(p).icon && !get(p).label);
+  }
+  function label2() {
+    return label($$props.ctx, "button.label", get(p).label ?? get(p).title ?? get(p)["aria-label"] ?? get(p).ariaLabel, $$props.componentName);
+  }
+  function click(event) {
+    if (get(p).disabled)
+      return;
+    emit($$props.ctx, "click", { type: "click", target: $$props.ctx.id, native: event });
+  }
+  var fragment = comment();
+  var node = first_child(fragment);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var a = root_1();
+      var node_1 = child(a);
+      {
+        var consequent = ($$anchor3) => {
+          InlineIcon($$anchor3, {
+            get name() {
+              return get(p).icon;
+            },
+            get active() {
+              return get(p).active;
+            },
+            get selected() {
+              return get(p).selected;
+            },
+            get pressed() {
+              return get(p).pressed;
+            },
+            className: "slex-button-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), [() => label2()]);
+          append($$anchor3, span);
+        };
+        var d = user_derived(() => iconOnly());
+        var alternate = ($$anchor3) => {
+          var text_2 = text();
+          template_effect(($0) => set_text(text_2, $0), [() => label2()]);
+          append($$anchor3, text_2);
+        };
+        if_block(node_2, ($$render) => {
+          if (get(d))
+            $$render(consequent_1);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      reset(a);
+      template_effect(($0, $1, $2, $3, $4, $5, $6) => {
+        set_class(a, 1, $0);
+        set_attribute(a, "href", $1);
+        set_attribute(a, "target", $2);
+        set_attribute(a, "rel", get(p).target === "_blank" ? "noreferrer" : undefined);
+        set_attribute(a, "aria-disabled", get(p).disabled ? "true" : undefined);
+        set_attribute(a, "data-selected", $3);
+        set_attribute(a, "aria-pressed", $4);
+        set_attribute(a, "title", $5);
+        set_attribute(a, "aria-label", $6);
+      }, [
+        () => `slex-button slex-button--${variant()} ${iconOnly() ? "slex-button--icon" : ""} ${get(p).disabled ? "slex-button--disabled" : ""}`,
+        () => get(p).disabled ? undefined : text2(get(p).href),
+        () => text2(get(p).target) || undefined,
+        () => selected() ? "" : undefined,
+        () => get(p).pressed === undefined ? undefined : selected(),
+        () => text2(get(p).title ?? get(p).label),
+        () => text2(get(p)["aria-label"] ?? get(p).ariaLabel ?? get(p).title ?? get(p).label) || undefined
+      ]);
+      append($$anchor2, a);
+    };
+    var alternate_2 = ($$anchor2) => {
+      var button = root_5();
+      var node_3 = child(button);
+      {
+        var consequent_3 = ($$anchor3) => {
+          InlineIcon($$anchor3, {
+            get name() {
+              return get(p).icon;
+            },
+            get active() {
+              return get(p).active;
+            },
+            get selected() {
+              return get(p).selected;
+            },
+            get pressed() {
+              return get(p).pressed;
+            },
+            className: "slex-button-icon"
+          });
+        };
+        if_block(node_3, ($$render) => {
+          if (get(p).icon)
+            $$render(consequent_3);
+        });
+      }
+      var node_4 = sibling(node_3, 2);
+      {
+        var consequent_4 = ($$anchor3) => {
+          var span_1 = root_7();
+          var text_3 = child(span_1, true);
+          reset(span_1);
+          template_effect(($0) => set_text(text_3, $0), [() => label2()]);
+          append($$anchor3, span_1);
+        };
+        var d_1 = user_derived(() => iconOnly());
+        var alternate_1 = ($$anchor3) => {
+          var text_4 = text();
+          template_effect(($0) => set_text(text_4, $0), [() => label2()]);
+          append($$anchor3, text_4);
+        };
+        if_block(node_4, ($$render) => {
+          if (get(d_1))
+            $$render(consequent_4);
+          else
+            $$render(alternate_1, -1);
+        });
+      }
+      reset(button);
+      template_effect(($0, $1, $2, $3, $4) => {
+        set_class(button, 1, $0);
+        button.disabled = !!get(p).disabled;
+        set_attribute(button, "data-selected", $1);
+        set_attribute(button, "aria-pressed", $2);
+        set_attribute(button, "title", $3);
+        set_attribute(button, "aria-label", $4);
+      }, [
+        () => `slex-button slex-button--${variant()} ${iconOnly() ? "slex-button--icon" : ""}`,
+        () => selected() ? "" : undefined,
+        () => get(p).pressed === undefined ? undefined : selected(),
+        () => text2(get(p).title ?? get(p).label),
+        () => text2(get(p)["aria-label"] ?? get(p).ariaLabel ?? get(p).title ?? get(p).label) || undefined
+      ]);
+      delegated("click", button, click);
+      append($$anchor2, button);
+    };
+    if_block(node, ($$render) => {
+      if (get(p).href)
+        $$render(consequent_2);
+      else
+        $$render(alternate_2, -1);
+    });
+  }
+  append($$anchor, fragment);
+  pop();
+}
+delegate(["click"]);
+
+export { Button };