slexkit 0.2.0

package/dist/components/checkbox.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/checkbox.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/input/Checkbox.svelte
+var root = from_html(`<span class="slex-choice-event-layer"><label class="slex-checkbox-field"><input type="checkbox" class="slex-checkbox"/> <span class="slex-checkbox-label"><!> <span> </span></span></label></span>`);
+function Checkbox($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  let checked = state(false);
+  let lastHapticAt = 0;
+  user_effect(() => bindPropStore($$props.props, (next) => {
+    set(p, next, true);
+    set(checked, !!(next.checked ?? next.value));
+  }));
+  function toggle(event) {
+    if (get(p).disabled)
+      return;
+    set(checked, event.target.checked, true);
+    emit($$props.ctx, "change", get(checked));
+  }
+  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, 2);
+  var node = child(span_1);
+  {
+    var consequent = ($$anchor2) => {
+      InlineIcon($$anchor2, {
+        get name() {
+          return get(p).icon;
+        },
+        className: "slex-checkbox-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) => {
+    input.disabled = !!get(p).disabled;
+    set_attribute(input, "data-state", get(checked) ? "checked" : "unchecked");
+    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(checked), ($$value) => set(checked, $$value));
+  append($$anchor, span);
+  pop();
+}
+delegate(["pointerdown", "click", "change"]);
+
+// src/components/entries/checkbox.ts
+register("checkbox", createSvelteRenderer("checkbox", Checkbox), { state: "checked" });
+var checkbox_default = Checkbox;
+export {
+  checkbox_default as default,
+  Checkbox
+};

package/dist/components/choice.css

@@ -0,0 +1,165 @@
+.slex-checkbox-field,
+.slex-radio-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--foreground);
+  font-size: 0.875rem;
+  cursor: pointer;
+  user-select: none;
+  transition: color 150ms ease, opacity 150ms ease;
+}
+
+.slex-checkbox-label,
+.slex-radio-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+  color: var(--foreground);
+  line-height: 1.35;
+  transition: color 150ms ease;
+}
+
+.slex-checkbox,
+.slex-radio {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  border: 1.5px solid var(--input);
+  color: var(--primary);
+  accent-color: var(--primary);
+  background: var(--background);
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    transform 120ms ease;
+}
+
+.slex-checkbox {
+  border-radius: calc(var(--radius) - 4px);
+}
+
+.slex-radio {
+  border-radius: 999px;
+}
+
+.slex-checkbox::after,
+.slex-radio::after {
+  content: "";
+  display: block;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: opacity 120ms ease, transform 140ms ease;
+}
+
+.slex-checkbox::after {
+  width: 0.55rem;
+  height: 0.34rem;
+  border: solid var(--primary-foreground);
+  border-width: 0 0 2px 2px;
+  transform: translateY(-0.08rem) rotate(-45deg) scale(0.5);
+}
+
+.slex-radio::after {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 999px;
+  background: var(--primary-foreground);
+}
+
+.slex-checkbox-field:hover .slex-checkbox:not(:disabled),
+.slex-radio-field:hover .slex-radio:not(:disabled) {
+  border-color: color-mix(in oklab, var(--primary) 48%, var(--input));
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
+}
+
+.slex-checkbox-field:active .slex-checkbox:not(:disabled),
+.slex-radio-field:active .slex-radio:not(:disabled) {
+  transform: scale(0.92);
+  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
+}
+
+.slex-checkbox:checked,
+.slex-radio:checked {
+  border-color: var(--primary);
+  background: var(--primary);
+}
+
+.slex-checkbox:checked::after,
+.slex-radio:checked::after {
+  opacity: 1;
+}
+
+.slex-checkbox:checked::after {
+  transform: translateY(-0.08rem) rotate(-45deg) scale(1);
+}
+
+.slex-radio:checked::after {
+  transform: scale(1);
+}
+
+.slex-checkbox-field:hover .slex-checkbox-label,
+.slex-radio-field:hover .slex-radio-label {
+  color: var(--foreground);
+}
+
+.slex-checkbox:focus-visible,
+.slex-radio:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.slex-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.slex-radio-group-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+  color: var(--foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.slex-radio-group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.slex-radio-group[data-orientation="horizontal"] .slex-radio-group-list {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.slex-checkbox:disabled,
+.slex-radio:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  box-shadow: none;
+  transform: none;
+}
+
+.slex-checkbox-field:has(.slex-checkbox:disabled),
+.slex-radio-field:has(.slex-radio:disabled) {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.slex-radio-indicator {
+  display: none;
+}

package/dist/components/code-block.js

@@ -0,0 +1,264 @@
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  child,
+  clsx,
+  comment,
+  createSvelteRenderer,
+  each,
+  first_child,
+  from_html,
+  get,
+  if_block,
+  index,
+  pop,
+  proxy,
+  push,
+  reset,
+  set,
+  set_attribute,
+  set_class,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text,
+  text1 as text2,
+  user_derived,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/code-block.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/content/CodeBlock.svelte
+var root_3 = from_html(`<span> </span>`);
+var root_4 = from_html(`<span class="slex-code-block-language"> </span>`);
+var root_1 = from_html(`<figcaption class="slex-code-block-header"><span class="slex-code-block-title"><!> <!></span> <!></figcaption>`);
+var root_7 = from_html(`<span> </span>`);
+var root_5 = from_html(`<span class="slex-code-line"><span class="slex-code-line-content"></span></span>`);
+var root = from_html(`<figure class="slex-code-block"><!> <pre class="slex-code-block-pre"><code></code></pre></figure>`);
+function CodeBlock($$anchor, $$props) {
+  push($$props, true);
+  const supportedLanguages = new Set([
+    "bash",
+    "css",
+    "html",
+    "javascript",
+    "js",
+    "json",
+    "markdown",
+    "md",
+    "python",
+    "py",
+    "sh",
+    "shell",
+    "sql",
+    "ts",
+    "tsx",
+    "typescript",
+    "xml",
+    "yaml",
+    "yml"
+  ]);
+  const keywordLanguages = new Set(["javascript", "js", "ts", "tsx", "typescript"]);
+  const keywords = new Set([
+    "as",
+    "async",
+    "await",
+    "break",
+    "case",
+    "catch",
+    "class",
+    "const",
+    "continue",
+    "default",
+    "do",
+    "else",
+    "export",
+    "extends",
+    "finally",
+    "for",
+    "from",
+    "function",
+    "if",
+    "import",
+    "in",
+    "interface",
+    "let",
+    "new",
+    "of",
+    "return",
+    "switch",
+    "throw",
+    "try",
+    "type",
+    "var",
+    "while"
+  ]);
+  const literals = new Set(["false", "null", "true", "undefined"]);
+  const tokenPattern = /\/\/[^\n]*|\/\*[\s\S]*?\*\/|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`|\r\n|\r|\n|\b\d+(?:\.\d+)?\b|\b[$A-Z_a-z][$\w]*\b|./g;
+  let p = state(proxy({}));
+  let code = user_derived(() => text2(get(p).code ?? get(p).content ?? get(p).source));
+  let languageName = user_derived(() => text2(get(p).language).trim().toLowerCase());
+  let languageClass = user_derived(() => get(languageName) === "js" ? "javascript" : get(languageName) || "");
+  let lines = user_derived(() => highlightCode(get(code), get(languageName)) ?? plainCodeLines(get(code)));
+  let highlighted = user_derived(() => supportedLanguages.has(get(languageName)));
+  let showLineNumbers = user_derived(() => get(p).lineNumbers !== false && get(p).lineNumbers !== "false");
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  function highlightCode(source, language) {
+    if (!supportedLanguages.has(language))
+      return null;
+    const tokens = Array.from(source.matchAll(tokenPattern), ([value]) => {
+      if (value.startsWith("//") || value.startsWith("/*"))
+        return { text: value, kind: "comment" };
+      if (/^["'`]/.test(value))
+        return { text: value, kind: "string" };
+      if (/^\d/.test(value))
+        return { text: value, kind: "number" };
+      if (literals.has(value))
+        return { text: value, kind: "literal" };
+      if (keywordLanguages.has(language) && keywords.has(value))
+        return { text: value, kind: "keyword" };
+      return { text: value };
+    });
+    return splitTokenLines(tokens);
+  }
+  function plainCodeLines(source) {
+    return splitTokenLines([{ text: source }]);
+  }
+  function splitTokenLines(tokens) {
+    const lines2 = [[]];
+    for (const token of tokens) {
+      for (const part of token.text.split(/(\r\n|\r|\n)/)) {
+        if (!part)
+          continue;
+        if (part === `
+` || part === "\r" || part === `\r
+`) {
+          lines2.push([]);
+        } else {
+          lines2[lines2.length - 1].push({ ...token, text: part });
+        }
+      }
+    }
+    return lines2;
+  }
+  var figure = root();
+  var node = child(figure);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var figcaption = root_1();
+      var span = child(figcaption);
+      var node_1 = child(span);
+      {
+        var consequent = ($$anchor3) => {
+          InlineIcon($$anchor3, {
+            get name() {
+              return get(p).icon;
+            },
+            className: "slex-code-block-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_1 = root_3();
+          var text_1 = child(span_1, true);
+          reset(span_1);
+          template_effect(($0) => set_text(text_1, $0), [() => text2(get(p).title)]);
+          append($$anchor3, span_1);
+        };
+        if_block(node_2, ($$render) => {
+          if (get(p).title)
+            $$render(consequent_1);
+        });
+      }
+      reset(span);
+      var node_3 = sibling(span, 2);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var span_2 = root_4();
+          var text_2 = child(span_2, true);
+          reset(span_2);
+          template_effect(($0) => set_text(text_2, $0), [() => text2(get(p).language)]);
+          append($$anchor3, span_2);
+        };
+        if_block(node_3, ($$render) => {
+          if (get(p).language)
+            $$render(consequent_2);
+        });
+      }
+      reset(figcaption);
+      append($$anchor2, figcaption);
+    };
+    if_block(node, ($$render) => {
+      if (get(p).title || get(p).language || get(p).icon)
+        $$render(consequent_3);
+    });
+  }
+  var pre = sibling(node, 2);
+  var code_1 = child(pre);
+  each(code_1, 21, () => get(lines), index, ($$anchor2, line) => {
+    var span_3 = root_5();
+    var span_4 = child(span_3);
+    each(span_4, 21, () => get(line), index, ($$anchor3, token) => {
+      var fragment_1 = comment();
+      var node_4 = first_child(fragment_1);
+      {
+        var consequent_4 = ($$anchor4) => {
+          var span_5 = root_7();
+          var text_3 = child(span_5, true);
+          reset(span_5);
+          template_effect(() => {
+            set_class(span_5, 1, `slex-code-token slex-code-token--${get(token).kind}`);
+            set_text(text_3, get(token).text);
+          });
+          append($$anchor4, span_5);
+        };
+        var alternate = ($$anchor4) => {
+          var text_4 = text();
+          template_effect(() => set_text(text_4, get(token).text));
+          append($$anchor4, text_4);
+        };
+        if_block(node_4, ($$render) => {
+          if (get(token).kind)
+            $$render(consequent_4);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      append($$anchor3, fragment_1);
+    });
+    reset(span_4);
+    reset(span_3);
+    append($$anchor2, span_3);
+  });
+  reset(code_1);
+  reset(pre);
+  reset(figure);
+  template_effect(($0) => {
+    set_class(code_1, 1, $0);
+    set_attribute(code_1, "data-line-numbers", get(showLineNumbers) ? "true" : "false");
+  }, [
+    () => clsx(`${get(highlighted) ? "slex-code-highlight" : ""} slex-code-lines${get(p).language ? ` language-${get(highlighted) ? get(languageClass) : text2(get(p).language)}` : ""}`.trim())
+  ]);
+  append($$anchor, figure);
+  pop();
+}
+
+// src/components/entries/code-block.ts
+register("code-block", createSvelteRenderer("code-block", CodeBlock), { state: "readable" });
+var code_block_default = CodeBlock;
+export {
+  code_block_default as default,
+  CodeBlock
+};

package/dist/components/collapsible.js

@@ -0,0 +1,111 @@
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  action,
+  append,
+  bindPropStore,
+  child,
+  createSvelteRenderer,
+  delegate,
+  delegated,
+  emit,
+  from_html,
+  get,
+  if_block,
+  label,
+  next,
+  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/collapsible.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/disclosure/Collapsible.svelte
+var root = from_html(`<div class="slex-collapsible"><button type="button" class="slex-collapsible-trigger"><span class="slex-collapsible-label"><!> <span> </span></span> <span class="slex-collapsible-indicator" aria-hidden="true"></span></button> <div class="slex-collapsible-content"><div class="slex-collapsible-content-inner"> </div></div></div>`);
+function Collapsible($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  let open = state(false);
+  user_effect(() => bindPropStore($$props.props, (next2) => {
+    set(p, next2, true);
+    set(open, !!(next2.open ?? next2.value));
+  }));
+  function toggle() {
+    set(open, !get(open));
+    emit($$props.ctx, get(open) ? "open" : "close", get(open));
+    emit($$props.ctx, "change", get(open));
+  }
+  var div = root();
+  var button = child(div);
+  var span = child(button);
+  var node = child(span);
+  {
+    var consequent = ($$anchor2) => {
+      InlineIcon($$anchor2, {
+        get name() {
+          return get(p).icon;
+        },
+        get selected() {
+          return get(open);
+        },
+        className: "slex-collapsible-icon"
+      });
+    };
+    if_block(node, ($$render) => {
+      if (get(p).icon)
+        $$render(consequent);
+    });
+  }
+  var span_1 = sibling(node, 2);
+  var text_1 = child(span_1, true);
+  reset(span_1);
+  reset(span);
+  next(2);
+  reset(button);
+  var div_1 = sibling(button, 2);
+  var div_2 = child(div_1);
+  var text_2 = child(div_2, true);
+  reset(div_2);
+  action(div_2, ($$node, $$action_arg) => renderChildren?.($$node, $$action_arg), () => $$props.ctx);
+  reset(div_1);
+  reset(div);
+  template_effect(($0, $1) => {
+    set_attribute(div, "data-state", get(open) ? "open" : "closed");
+    set_attribute(button, "data-state", get(open) ? "open" : "closed");
+    set_attribute(button, "aria-expanded", get(open));
+    set_attribute(button, "aria-controls", `${$$props.ctx.id}-content`);
+    set_text(text_1, $0);
+    set_attribute(div_1, "id", `${$$props.ctx.id}-content`);
+    set_attribute(div_1, "data-state", get(open) ? "open" : "closed");
+    set_attribute(div_1, "aria-hidden", !get(open));
+    set_text(text_2, $1);
+  }, [
+    () => label($$props.ctx, "collapsible.trigger", get(p).trigger, "Toggle"),
+    () => text(get(p).content)
+  ]);
+  delegated("click", button, toggle);
+  append($$anchor, div);
+  pop();
+}
+delegate(["click"]);
+
+// src/components/entries/collapsible.ts
+register("collapsible", createSvelteRenderer("collapsible", Collapsible), { state: "none" });
+var collapsible_default = Collapsible;
+export {
+  collapsible_default as default,
+  Collapsible
+};

package/dist/components/column.js

@@ -0,0 +1,49 @@
+import {
+  action,
+  append,
+  bindPropStore,
+  createSvelteRenderer,
+  from_html,
+  get,
+  pop,
+  proxy,
+  push,
+  renderChildren,
+  set,
+  set_attribute,
+  set_class,
+  state,
+  template_effect,
+  text1 as text,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/column.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/layout/Column.svelte
+var root = from_html(`<div></div>`);
+function Column($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  var div = root();
+  action(div, ($$node, $$action_arg) => renderChildren?.($$node, $$action_arg), () => $$props.ctx);
+  template_effect(($0, $1) => {
+    set_class(div, 1, $0);
+    set_attribute(div, "id", $1);
+  }, [
+    () => `slex-column${get(p).class ? ` ${text(get(p).class)}` : ""}`,
+    () => get(p).id ? text(get(p).id) : undefined
+  ]);
+  append($$anchor, div);
+  pop();
+}
+
+// src/components/entries/column.ts
+register("column", createSvelteRenderer("column", Column), { state: "none" });
+var column_default = Column;
+export {
+  column_default as default,
+  Column
+};