slexkit 0.2.0

package/dist/components/accordion.js

@@ -0,0 +1,163 @@
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  child,
+  createSvelteRenderer,
+  delegate,
+  delegated,
+  each,
+  emit,
+  from_html,
+  get,
+  if_block,
+  index,
+  list,
+  next,
+  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/accordion.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/disclosure/Accordion.svelte
+var root_1 = from_html(`<section class="slex-accordion-item"><h3 class="slex-accordion-heading"><button type="button" class="slex-accordion-trigger"><span class="slex-accordion-label"><!> <span> </span></span> <span class="slex-accordion-indicator" aria-hidden="true"></span></button></h3> <div class="slex-accordion-content"><div class="slex-accordion-content-inner"> </div></div></section>`);
+var root = from_html(`<div class="slex-accordion" data-scope="accordion"><div class="slex-accordion-inner"></div></div>`);
+function Accordion($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  let value = state(undefined);
+  let openStates = state(proxy({}));
+  const items = user_derived(() => list(get(p).items));
+  function keyFor(item) {
+    return text(item.value ?? item.label);
+  }
+  function valueForKey(key) {
+    const item = get(items).find((entry) => keyFor(entry) === key);
+    return item ? item.value ?? item.label : undefined;
+  }
+  function selectedKeys(nextValue, multiple) {
+    if (multiple && Array.isArray(nextValue))
+      return nextValue.map((entry) => text(entry));
+    const selected = text(nextValue);
+    return selected ? [selected] : [];
+  }
+  function openValue(states = get(openStates)) {
+    const keys = Object.keys(states).filter((key) => states[key]);
+    if (get(p).multiple)
+      return keys.map((key) => valueForKey(key)).filter((entry) => entry !== undefined);
+    return keys.length ? valueForKey(keys[0]) : undefined;
+  }
+  user_effect(() => bindPropStore($$props.props, (next2) => {
+    set(p, next2, true);
+    set(value, next2.value, true);
+    const selected = selectedKeys(next2.value, next2.multiple === true);
+    const nextOpenStates = {};
+    for (const item of list(next2.items)) {
+      const key = keyFor(item);
+      nextOpenStates[key] = selected.includes(key);
+    }
+    set(openStates, nextOpenStates, true);
+  }));
+  function toggleItem(key) {
+    const open = !!get(openStates)[key];
+    let nextStates;
+    if (get(p).multiple) {
+      nextStates = { ...get(openStates), [key]: !open };
+    } else {
+      nextStates = {};
+      for (const item of get(items))
+        nextStates[keyFor(item)] = false;
+      nextStates[key] = !open;
+    }
+    set(openStates, nextStates, true);
+    const nextValue = openValue(nextStates);
+    set(value, nextValue, true);
+    emit($$props.ctx, "change", nextValue);
+  }
+  var div = root();
+  var div_1 = child(div);
+  each(div_1, 21, () => get(items), index, ($$anchor2, item) => {
+    const key = user_derived(() => keyFor(get(item)));
+    const open = user_derived(() => !!get(openStates)[get(key)]);
+    var section = root_1();
+    var h3 = child(section);
+    var button = child(h3);
+    var span = child(button);
+    var node = child(span);
+    {
+      var consequent = ($$anchor3) => {
+        InlineIcon($$anchor3, {
+          get name() {
+            return get(item).icon;
+          },
+          get selected() {
+            return get(open);
+          },
+          className: "slex-accordion-icon"
+        });
+      };
+      if_block(node, ($$render) => {
+        if (get(item).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);
+    reset(h3);
+    var div_2 = sibling(h3, 2);
+    var div_3 = child(div_2);
+    var text_2 = child(div_3, true);
+    reset(div_3);
+    reset(div_2);
+    reset(section);
+    template_effect(($0, $1) => {
+      set_attribute(section, "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}-${get(key)}-content`);
+      button.disabled = get(item).disabled === true;
+      set_text(text_1, $0);
+      set_attribute(div_2, "id", `${$$props.ctx.id}-${get(key)}-content`);
+      set_attribute(div_2, "data-state", get(open) ? "open" : "closed");
+      set_attribute(div_2, "aria-hidden", !get(open));
+      set_text(text_2, $1);
+    }, [
+      () => text(get(item).label),
+      () => text(get(item).content)
+    ]);
+    delegated("click", button, () => toggleItem(get(key)));
+    append($$anchor2, section);
+  });
+  reset(div_1);
+  reset(div);
+  append($$anchor, div);
+  pop();
+}
+delegate(["click"]);
+
+// src/components/entries/accordion.ts
+register("accordion", createSvelteRenderer("accordion", Accordion), { state: "none" });
+var accordion_default = Accordion;
+export {
+  accordion_default as default,
+  Accordion
+};

package/dist/components/badge.js

@@ -0,0 +1,80 @@
+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/badge.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/content/Badge.svelte
+var root = from_html(`<span class="slex-badge"><!><span class="slex-badge-label"> </span></span>`);
+function Badge($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  function tone() {
+    const raw = text(get(p).tone ?? get(p).type ?? get(p).variant, "neutral").toLowerCase();
+    if (raw === "danger" || raw === "error")
+      return "destructive";
+    if (raw === "muted" || raw === "neutral" || raw === "default")
+      return "neutral";
+    return raw;
+  }
+  var span = root();
+  var node = child(span);
+  {
+    var consequent = ($$anchor2) => {
+      InlineIcon($$anchor2, {
+        get name() {
+          return get(p).icon;
+        },
+        className: "slex-badge-icon"
+      });
+    };
+    if_block(node, ($$render) => {
+      if (get(p).icon)
+        $$render(consequent);
+    });
+  }
+  var span_1 = sibling(node);
+  var text_1 = child(span_1, true);
+  reset(span_1);
+  reset(span);
+  template_effect(($0, $1) => {
+    set_attribute(span, "data-tone", $0);
+    set_text(text_1, $1);
+  }, [
+    () => tone(),
+    () => text(get(p).label ?? get(p).text ?? get(p).content ?? $$props.componentName)
+  ]);
+  append($$anchor, span);
+  pop();
+}
+
+// src/components/entries/badge.ts
+register("badge", createSvelteRenderer("badge", Badge), { state: "readable" });
+var badge_default = Badge;
+export {
+  badge_default as default,
+  Badge
+};

package/dist/components/button.css

@@ -0,0 +1,114 @@
+.slex-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease,
+    transform 150ms ease;
+}
+
+.slex-button--primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
+
+.slex-button--primary:hover:not(:disabled):not(.slex-button--disabled) {
+  background: color-mix(in oklab, var(--primary) 90%, transparent);
+  border-color: color-mix(in oklab, var(--primary) 90%, transparent);
+  color: var(--primary-foreground);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.slex-button--secondary {
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+  border-color: var(--border);
+}
+
+.slex-button--secondary:hover:not(:disabled):not(.slex-button--disabled) {
+  background: var(--accent);
+  color: var(--accent-foreground);
+  border-color: var(--border);
+}
+
+.slex-button--danger {
+  background: var(--destructive);
+  color: var(--destructive-foreground);
+  border-color: var(--destructive);
+}
+
+.slex-button--danger:hover:not(:disabled):not(.slex-button--disabled) {
+  background: color-mix(in oklab, var(--destructive) 90%, transparent);
+  border-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+}
+
+.slex-button--ghost {
+  background: transparent;
+  color: var(--muted-foreground);
+  border-color: transparent;
+}
+
+.slex-button--ghost:hover:not(:disabled):not(.slex-button--disabled) {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.slex-button:disabled,
+.slex-button[disabled],
+.slex-button--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+  transform: none;
+  box-shadow: none;
+}
+
+.slex-button:active:not(:disabled):not(.slex-button--disabled) {
+  transform: translateY(0);
+  box-shadow: var(--shadow-sm);
+}
+
+.slex-button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.slex-button--icon {
+  width: var(--slex-control-height, 2.25rem);
+  min-height: var(--slex-control-height, 2.25rem);
+  padding-inline: 0;
+}
+
+.slex-button-icon {
+  display: inline-flex;
+  width: 1.125rem;
+  height: 1.125rem;
+  color: currentColor;
+}
+
+.slex-button-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}

package/dist/components/button.js

@@ -0,0 +1,16 @@
+import {
+  Button
+} from "../chunks/accordion-830dw78f.js";
+import"../chunks/accordion-cw5r75jm.js";
+import {
+  createSvelteRenderer
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/button.ts
+import { register } from "../runtime.js";
+register("button", createSvelteRenderer("button", Button), { state: "none" });
+var button_default = Button;
+export {
+  button_default as default,
+  Button
+};

package/dist/components/callout.js

@@ -0,0 +1,154 @@
+import {
+  Toast
+} from "../chunks/accordion-ehnhpeca.js";
+import"../chunks/accordion-hzyrngd6.js";
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  action,
+  append,
+  bindPropStore,
+  child,
+  createSvelteRenderer,
+  first_child,
+  from_html,
+  get,
+  if_block,
+  pop,
+  proxy,
+  push,
+  renderChildren,
+  reset,
+  set,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text1 as text,
+  user_derived,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/callout.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/content/Callout.svelte
+var root_1 = from_html(`<span aria-hidden="true"></span>`);
+var root_3 = from_html(`<div class="slex-callout-title"><!><span> </span></div>`);
+var root_2 = from_html(`<!> <div class="slex-callout-body"> </div>`, 1);
+function Callout($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  function tone() {
+    const raw = text(get(p).tone ?? get(p).type, "info").toLowerCase();
+    if (raw === "error" || raw === "destructive")
+      return "danger";
+    if (raw === "neutral" || raw === "default" || raw === "muted")
+      return "info";
+    return raw;
+  }
+  function titleText() {
+    return text(get(p).title ?? get(p).label ?? get(p).heading);
+  }
+  function descriptionText() {
+    return text(get(p).text ?? get(p).content ?? get(p).description ?? get(p).message);
+  }
+  function role() {
+    return tone() === "danger" ? "alert" : "note";
+  }
+  function color() {
+    const kind = tone();
+    if (kind === "success")
+      return "green";
+    if (kind === "warning")
+      return "yellow";
+    if (kind === "danger")
+      return "red";
+    if (kind === "muted" || kind === "neutral")
+      return "gray";
+    return "blue";
+  }
+  {
+    const icon = ($$anchor2) => {
+      var span = root_1();
+      append($$anchor2, span);
+    };
+    let $0 = user_derived(tone);
+    let $1 = user_derived(color);
+    let $2 = user_derived(role);
+    let $3 = user_derived(() => role() === "alert" ? "assertive" : "polite");
+    Toast($$anchor, {
+      class: "slex-callout",
+      "data-scope": "callout",
+      get "data-tone"() {
+        return get($0);
+      },
+      get color() {
+        return get($1);
+      },
+      get role() {
+        return get($2);
+      },
+      get "aria-live"() {
+        return get($3);
+      },
+      dismissable: false,
+      align: false,
+      classes: { icon: "slex-callout-mark", content: "slex-callout-content" },
+      icon,
+      children: ($$anchor2, $$slotProps) => {
+        var fragment_1 = root_2();
+        var node = first_child(fragment_1);
+        {
+          var consequent_1 = ($$anchor3) => {
+            var div = root_3();
+            var node_1 = child(div);
+            {
+              var consequent = ($$anchor4) => {
+                InlineIcon($$anchor4, {
+                  get name() {
+                    return get(p).icon;
+                  },
+                  className: "slex-callout-icon"
+                });
+              };
+              if_block(node_1, ($$render) => {
+                if (get(p).icon)
+                  $$render(consequent);
+              });
+            }
+            var span_1 = sibling(node_1);
+            var text_1 = child(span_1, true);
+            reset(span_1);
+            reset(div);
+            template_effect(($02) => set_text(text_1, $02), [() => titleText()]);
+            append($$anchor3, div);
+          };
+          var d = user_derived(() => titleText());
+          if_block(node, ($$render) => {
+            if (get(d))
+              $$render(consequent_1);
+          });
+        }
+        var div_1 = sibling(node, 2);
+        var text_2 = child(div_1, true);
+        reset(div_1);
+        action(div_1, ($$node, $$action_arg) => renderChildren?.($$node, $$action_arg), () => $$props.ctx);
+        template_effect(($02) => set_text(text_2, $02), [() => descriptionText()]);
+        append($$anchor2, fragment_1);
+      },
+      $$slots: { icon: true, default: true }
+    });
+  }
+  pop();
+}
+
+// src/components/entries/callout.ts
+register("callout", createSvelteRenderer("callout", Callout), { state: "readable" });
+var callout_default = Callout;
+export {
+  callout_default as default,
+  Callout
+};

package/dist/components/card.js

@@ -0,0 +1,95 @@
+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/card.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/layout/Card.svelte
+var root_3 = from_html(`<span> </span>`);
+var root_1 = from_html(`<div class="slex-card-title"><!><!></div>`);
+var root = from_html(`<div class="slex-card"><!> <div class="slex-card-body"></div></div>`);
+function Card($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  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-card-icon"
+          });
+        };
+        if_block(node_1, ($$render) => {
+          if (get(p).icon)
+            $$render(consequent);
+        });
+      }
+      var node_2 = sibling(node_1);
+      {
+        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).title)]);
+          append($$anchor3, span);
+        };
+        if_block(node_2, ($$render) => {
+          if (get(p).title)
+            $$render(consequent_1);
+        });
+      }
+      reset(div_1);
+      append($$anchor2, div_1);
+    };
+    if_block(node, ($$render) => {
+      if (get(p).title || get(p).icon)
+        $$render(consequent_2);
+    });
+  }
+  var div_2 = sibling(node, 2);
+  action(div_2, ($$node, $$action_arg) => renderChildren?.($$node, $$action_arg), () => $$props.ctx);
+  reset(div);
+  template_effect(($0) => set_attribute(div, "data-tone", $0), [() => get(p).tone ? text(get(p).tone) : undefined]);
+  append($$anchor, div);
+  pop();
+}
+
+// src/components/entries/card.ts
+register("card", createSvelteRenderer("card", Card), { state: "none" });
+var card_default = Card;
+export {
+  card_default as default,
+  Card
+};