slexkit 0.2.0

package/dist/chunks/accordion-cfjyxw93.js

@@ -0,0 +1,630 @@
+import {
+  getTabsContext,
+  getTheme,
+  setTabsContext,
+  tv,
+  warnThemeDeprecation
+} from "./accordion-hzyrngd6.js";
+import {
+  InlineIcon
+} from "./accordion-cw5r75jm.js";
+import {
+  action,
+  append,
+  attribute_effect,
+  bindPropStore,
+  child,
+  clsx,
+  clsx_default,
+  comment,
+  delegate,
+  delegated,
+  each,
+  emit,
+  first_child,
+  from_html,
+  get,
+  getContext,
+  if_block,
+  index,
+  list,
+  next,
+  noop,
+  pop,
+  prop,
+  props_id,
+  proxy,
+  push,
+  reset,
+  rest_props,
+  set,
+  setContext,
+  set_attribute,
+  set_class,
+  set_text,
+  sibling,
+  snippet,
+  state,
+  template_effect,
+  text,
+  text1 as text2,
+  untrack,
+  user_derived,
+  user_effect
+} from "./accordion-nw12ytps.js";
+
+// node_modules/.bun/flowbite-svelte@1.33.1+c74efb4fcdd27e5c/node_modules/flowbite-svelte/dist/utils/singleselection.svelte.js
+var SINGLE_SELECTION_KEY = Symbol("singleton");
+function createSingleSelectionContext(nonReactive = false) {
+  if (nonReactive)
+    return setContext(SINGLE_SELECTION_KEY, {});
+  const context = proxy({ value: null });
+  return setContext(SINGLE_SELECTION_KEY, context);
+}
+function setSelected(context, open, value) {
+  if (open)
+    context.value = value ?? null;
+  else if (context.value === value)
+    context.value = null;
+  return context;
+}
+function useSingleSelection(callback) {
+  const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
+  if (!context.hasOwnProperty?.("value"))
+    return () => context;
+  user_effect(() => {
+    if (context.value !== null)
+      callback(context.value);
+  });
+  return (open, v) => untrack(() => setSelected(context, open, v));
+}
+
+// node_modules/.bun/flowbite-svelte@1.33.1+c74efb4fcdd27e5c/node_modules/flowbite-svelte/dist/tabs/theme.js
+var tabs = tv({
+  slots: {
+    base: "flex space-x-2 rtl:space-x-reverse",
+    content: "p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4",
+    divider: "h-px bg-gray-200 dark:bg-gray-700",
+    active: "p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500",
+    inactive: "p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+  },
+  variants: {
+    tabStyle: {
+      full: {
+        active: "p-4 w-full rounded-none group-first:rounded-s-lg group-last:rounded-e-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:bg-gray-700 dark:text-white",
+        inactive: "p-4 w-full rounded-none group-first:rounded-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+      },
+      pill: {
+        active: "py-3 px-4 text-white bg-primary-600 rounded-lg",
+        inactive: "py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
+      },
+      underline: {
+        base: "-mb-px",
+        active: "p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500 bg-transparent",
+        inactive: "p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400 bg-transparent"
+      },
+      none: {
+        active: "",
+        inactive: ""
+      }
+    },
+    hasDivider: {
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      tabStyle: ["full", "pill"],
+      hasDivider: true,
+      class: {
+        divider: "hidden"
+      }
+    }
+  ],
+  defaultVariants: {
+    tabStyle: "none",
+    hasDivider: true
+  }
+});
+var tabItem = tv({
+  slots: {
+    base: "group focus-within:z-10",
+    button: "inline-block text-sm font-medium text-center disabled:cursor-not-allowed"
+  },
+  variants: {
+    open: {
+      true: {
+        button: "active"
+      }
+    },
+    disabled: {
+      true: {
+        button: "cursor-not-allowed"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      open: true,
+      class: {
+        button: ""
+      }
+    },
+    {
+      open: false,
+      class: {
+        button: ""
+      }
+    }
+  ],
+  defaultVariants: {
+    open: false,
+    disabled: false
+  }
+});
+
+// node_modules/.bun/flowbite-svelte@1.33.1+c74efb4fcdd27e5c/node_modules/flowbite-svelte/dist/tabs/Tabs.svelte
+var root_1 = from_html(`<div></div>`);
+var root = from_html(`<ul><!></ul> <!> <div role="tabpanel"><!></div>`, 1);
+function Tabs($$anchor, $$props) {
+  const uuid = props_id();
+  push($$props, true);
+  let selected = prop($$props, "selected", 15), tabStyle = prop($$props, "tabStyle", 3, "none"), divider = prop($$props, "divider", 3, true), restProps = rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "children",
+    "selected",
+    "tabStyle",
+    "ulClass",
+    "contentClass",
+    "divider",
+    "class",
+    "classes"
+  ]);
+  const activeClasses = user_derived(() => typeof $$props.classes?.active === "string" ? $$props.classes.active : undefined);
+  warnThemeDeprecation("Tabs", untrack(() => ({ ulClass: $$props.ulClass, contentClass: $$props.contentClass })), { ulClass: "class", contentClass: "content" });
+  const theme = user_derived(() => getTheme("tabs"));
+  const styling = user_derived(() => $$props.classes ?? { content: $$props.contentClass });
+  const $$d = user_derived(() => tabs({ tabStyle: tabStyle(), hasDivider: divider() })), base = user_derived(() => get($$d).base), content = user_derived(() => get($$d).content), dividerClass = user_derived(() => get($$d).divider);
+  const panelId = `tab-panel-${uuid}`;
+  const ctx = user_derived(() => ({ tabStyle: tabStyle(), panelId }));
+  const dividerBool = user_derived(() => ["full", "pill"].includes(tabStyle()) ? false : divider());
+  createSingleSelectionContext();
+  const tabRegistry = proxy(new Map);
+  let selectedTab = state(proxy({}));
+  const updateSelection = useSingleSelection((v) => {
+    set(selectedTab, v ?? {}, true);
+    selected(v?.id);
+  });
+  user_effect(() => {
+    if (selected() && selected() !== get(selectedTab).id) {
+      const targetTab = tabRegistry.get(selected());
+      if (targetTab) {
+        updateSelection(true, targetTab);
+      }
+    }
+  });
+  user_effect(() => {
+    if (tabRegistry.size > 0 && !get(selectedTab).id) {
+      const targetTab = selected() ? tabRegistry.get(selected()) : tabRegistry.values().next().value;
+      if (targetTab) {
+        updateSelection(true, targetTab);
+      }
+    }
+  });
+  const registerFn = (tabData) => {
+    if (tabData.id) {
+      tabRegistry.set(tabData.id, tabData);
+    }
+  };
+  const unregisterFn = (tabId) => {
+    tabRegistry.delete(tabId);
+  };
+  setTabsContext({
+    get activeClasses() {
+      return get(activeClasses);
+    },
+    get ctx() {
+      return get(ctx);
+    },
+    registerTab: registerFn,
+    unregisterTab: unregisterFn
+  });
+  var fragment = root();
+  var ul = first_child(fragment);
+  attribute_effect(ul, ($0) => ({ role: "tablist", ...restProps, class: $0 }), [
+    () => get(base)({
+      class: clsx_default(get(theme)?.base, $$props.class ?? $$props.ulClass)
+    })
+  ]);
+  var node = child(ul);
+  snippet(node, () => $$props.children);
+  reset(ul);
+  var node_1 = sibling(ul, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var div = root_1();
+      template_effect(($0) => set_class(div, 1, $0), [
+        () => clsx(get(dividerClass)({ class: clsx_default(get(theme)?.divider, $$props.classes?.divider) }))
+      ]);
+      append($$anchor2, div);
+    };
+    if_block(node_1, ($$render) => {
+      if (get(dividerBool))
+        $$render(consequent);
+    });
+  }
+  var div_1 = sibling(node_1, 2);
+  var node_2 = child(div_1);
+  snippet(node_2, () => get(selectedTab).snippet ?? noop);
+  reset(div_1);
+  template_effect(($0) => {
+    set_attribute(div_1, "id", panelId);
+    set_class(div_1, 1, $0);
+    set_attribute(div_1, "aria-labelledby", get(selectedTab).id);
+  }, [
+    () => clsx(get(content)({ class: clsx_default(get(theme)?.content, get(styling).content) }))
+  ]);
+  append($$anchor, fragment);
+  pop();
+}
+
+// node_modules/.bun/flowbite-svelte@1.33.1+c74efb4fcdd27e5c/node_modules/flowbite-svelte/dist/tabs/TabItem.svelte
+var root2 = from_html(`<li><button type="button" role="tab"><!></button></li>`);
+function TabItem($$anchor, $$props) {
+  const tabId = props_id();
+  push($$props, true);
+  let open = prop($$props, "open", 15, false), title = prop($$props, "title", 3, "Tab title"), restProps = rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "children",
+    "titleSlot",
+    "open",
+    "title",
+    "key",
+    "activeClass",
+    "inactiveClass",
+    "class",
+    "classes",
+    "disabled",
+    "tabStyle"
+  ]);
+  const theme = user_derived(() => getTheme("tabItem"));
+  const tabsCtx = getTabsContext();
+  if (!tabsCtx) {
+    throw new Error("TabItem must be used within a Tabs component");
+  }
+  const activeClasses = tabsCtx.activeClasses;
+  const ctx = tabsCtx.ctx;
+  const compoTabStyle = user_derived(() => $$props.tabStyle ?? ctx.tabStyle ?? "full");
+  const $$d = user_derived(() => tabs({ tabStyle: get(compoTabStyle), hasDivider: true })), active = user_derived(() => get($$d).active), inactive = user_derived(() => get($$d).inactive);
+  const tabIdentifier = user_derived(() => $$props.key ?? tabId);
+  const self = user_derived(() => ({ id: get(tabIdentifier), snippet: $$props.children }));
+  const registerTab = tabsCtx.registerTab;
+  const unregisterTab = tabsCtx.unregisterTab;
+  const updateSingleSelection = useSingleSelection((value) => open(value?.id === get(self).id));
+  user_effect(() => {
+    updateSingleSelection(open(), get(self));
+    registerTab?.(get(self));
+    return () => {
+      if (get(self).id) {
+        unregisterTab?.(get(self).id);
+      }
+    };
+  });
+  const $$d_1 = user_derived(() => tabItem({ open: open(), disabled: $$props.disabled })), base = user_derived(() => get($$d_1).base), button = user_derived(() => get($$d_1).button);
+  var li = root2();
+  attribute_effect(li, ($0) => ({ ...restProps, class: $0, role: "presentation" }), [
+    () => get(base)({ class: clsx_default(get(theme)?.base, $$props.class) })
+  ]);
+  var button_1 = child(li);
+  var node = child(button_1);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = comment();
+      var node_1 = first_child(fragment);
+      snippet(node_1, () => $$props.titleSlot);
+      append($$anchor2, fragment);
+    };
+    var alternate = ($$anchor2) => {
+      var text3 = text();
+      template_effect(() => set_text(text3, title()));
+      append($$anchor2, text3);
+    };
+    if_block(node, ($$render) => {
+      if ($$props.titleSlot)
+        $$render(consequent);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  reset(button_1);
+  reset(li);
+  template_effect(($0) => {
+    set_attribute(button_1, "id", get(self).id);
+    set_attribute(button_1, "aria-controls", ctx.panelId);
+    set_attribute(button_1, "aria-selected", open());
+    button_1.disabled = $$props.disabled;
+    set_class(button_1, 1, $0);
+  }, [
+    () => clsx(get(button)({
+      class: clsx_default(open() ? $$props.activeClass ?? get(active)({ class: activeClasses }) : $$props.inactiveClass ?? get(inactive)(), get(theme)?.button, $$props.classes?.button)
+    }))
+  ]);
+  delegated("click", button_1, () => open(true));
+  append($$anchor, li);
+  pop();
+}
+delegate(["click"]);
+
+// src/components/svelte/input/Tabs.svelte
+var root_5 = from_html(`<span class="slex-sr-only"> </span>`);
+var root_3 = from_html(`<!> <!>`, 1);
+var root_8 = from_html(`<div></div>`);
+var root_12 = from_html(`<!> <span class="slex-tabs-selected-indicator" aria-hidden="true"></span>`, 1);
+var root3 = from_html(`<div class="slex-tabs"><!></div>`);
+function Tabs2($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  let value = state(undefined);
+  let iconVersion = state(0);
+  const orientation = user_derived(() => text2(get(p).orientation, "horizontal"));
+  const items = user_derived(() => list(get(p).tabs));
+  const triggerClass = "slex-tabs-trigger";
+  user_effect(() => bindPropStore($$props.props, (next2) => {
+    set(p, next2, true);
+    set(value, next2.value, true);
+  }));
+  function choose(next2) {
+    set(value, next2, true);
+    emit($$props.ctx, "change", next2);
+  }
+  function requestIndicatorUpdate() {
+    set(iconVersion, get(iconVersion) + 1);
+  }
+  function isLayoutContent(value2) {
+    return !!value2 && typeof value2 === "object" && !Array.isArray(value2);
+  }
+  function renderTabPanel(node, item) {
+    function render(next2) {
+      node.replaceChildren();
+      if (isLayoutContent(next2.content)) {
+        $$props.ctx.renderTree(next2.content, node, $$props.ctx.forCtx);
+        return;
+      }
+      if (next2.content !== undefined && next2.content !== null) {
+        node.textContent = text2(next2.content);
+      }
+    }
+    render(item);
+    return {
+      update(next2) {
+        render(next2);
+      },
+      destroy() {
+        node.replaceChildren();
+      }
+    };
+  }
+  function annotateTabs(node) {
+    let raf;
+    let resizeObserver;
+    let indicatorReady = false;
+    function scheduleIndicatorUpdate(list3, selectedTrigger) {
+      if (raf !== undefined)
+        cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        raf = undefined;
+        if (!selectedTrigger) {
+          list3.style.setProperty("--slex-tabs-indicator-opacity", "0");
+          return;
+        }
+        const listRect = list3.getBoundingClientRect();
+        const triggerRect = selectedTrigger.getBoundingClientRect();
+        const iconRect = selectedTrigger.querySelector(".slex-tabs-trigger-icon")?.getBoundingClientRect();
+        const vertical = get(orientation) === "vertical";
+        const indicatorStyle = getComputedStyle(list3);
+        const inlineInset = Number.parseFloat(indicatorStyle.getPropertyValue("--slex-tabs-indicator-inline-inset")) || 0;
+        const blockInset = Number.parseFloat(indicatorStyle.getPropertyValue("--slex-tabs-indicator-block-inset")) || 0;
+        const iconOnly = !!iconRect && selectedTrigger.classList.contains("slex-tabs-trigger--icon");
+        const targetRect = iconOnly && iconRect.width > 0 ? iconRect : triggerRect;
+        const width = vertical ? 2 : iconOnly ? Math.max(14, Math.min(22, targetRect.width + 2)) : Math.max(8, triggerRect.width - inlineInset * 2);
+        const height = vertical ? Math.max(8, triggerRect.height - blockInset * 2) : 2;
+        const targetCenterX = targetRect.left - listRect.left + targetRect.width / 2;
+        const targetCenterY = targetRect.top - listRect.top + targetRect.height / 2;
+        const x = vertical ? listRect.width - width : targetCenterX - width / 2;
+        const y = vertical ? targetCenterY - height / 2 : listRect.height - height;
+        list3.style.setProperty("--slex-tabs-indicator-width", `${Math.max(0, width)}px`);
+        list3.style.setProperty("--slex-tabs-indicator-height", `${Math.max(0, height)}px`);
+        list3.style.setProperty("--slex-tabs-indicator-x", `${Math.max(0, x)}px`);
+        list3.style.setProperty("--slex-tabs-indicator-y", `${Math.max(0, y)}px`);
+        list3.style.setProperty("--slex-tabs-indicator-opacity", "1");
+        if (!indicatorReady) {
+          indicatorReady = true;
+          requestAnimationFrame(() => {
+            list3.dataset.indicatorReady = "true";
+          });
+        }
+      });
+    }
+    function applyNow() {
+      const triggers = node.querySelectorAll(".slex-tabs-trigger");
+      const list3 = node.querySelector(".slex-tabs-list");
+      let selectedTrigger;
+      get(items).forEach((item, index2) => {
+        const trigger = triggers[index2];
+        if (!trigger)
+          return;
+        const itemValue = item.value ?? item.label;
+        const selected = text2(itemValue) === text2(get(value));
+        trigger.dataset.value = text2(itemValue);
+        trigger.toggleAttribute("data-selected", selected);
+        trigger.classList.toggle("slex-tabs-trigger--selected", selected);
+        trigger.setAttribute("aria-selected", String(selected));
+        if (selected)
+          selectedTrigger = trigger;
+      });
+      if (list3)
+        scheduleIndicatorUpdate(list3, selectedTrigger);
+    }
+    function apply() {
+      applyNow();
+      queueMicrotask(applyNow);
+    }
+    apply();
+    const list2 = node.querySelector(".slex-tabs-list");
+    if (list2 && "ResizeObserver" in window) {
+      resizeObserver = new ResizeObserver(apply);
+      resizeObserver.observe(list2);
+    }
+    return {
+      update() {
+        apply();
+      },
+      destroy() {
+        if (raf !== undefined)
+          cancelAnimationFrame(raf);
+        resizeObserver?.disconnect();
+      }
+    };
+  }
+  var div = root3();
+  var node_1 = child(div);
+  {
+    let $0 = user_derived(() => text2(get(value)));
+    Tabs(node_1, {
+      class: "slex-tabs-list",
+      tabStyle: "none",
+      divider: false,
+      get selected() {
+        return get($0);
+      },
+      get "aria-orientation"() {
+        return get(orientation);
+      },
+      classes: { content: "slex-tabs-content" },
+      children: ($$anchor2, $$slotProps) => {
+        var fragment = root_12();
+        var node_2 = first_child(fragment);
+        each(node_2, 17, () => get(items), index, ($$anchor3, item) => {
+          const itemValue = user_derived(() => get(item).value ?? get(item).label);
+          const selected = user_derived(() => text2(get(itemValue)) === text2(get(value)));
+          const hasIcon = user_derived(() => !!text2(get(item).icon));
+          const label = user_derived(() => text2(get(item).label ?? get(itemValue)));
+          const itemIconOnly = user_derived(() => !!get(item).iconOnly || get(hasIcon) && !get(item).label);
+          const iconClass = user_derived(() => get(itemIconOnly) ? "slex-tabs-trigger--icon" : get(hasIcon) ? "slex-tabs-trigger--with-icon" : "");
+          {
+            const titleSlot = ($$anchor4) => {
+              var fragment_2 = root_3();
+              var node_3 = first_child(fragment_2);
+              {
+                var consequent = ($$anchor5) => {
+                  InlineIcon($$anchor5, {
+                    get name() {
+                      return get(item).icon;
+                    },
+                    get selected() {
+                      return get(selected);
+                    },
+                    className: "slex-tabs-trigger-icon",
+                    onIconLoad: requestIndicatorUpdate
+                  });
+                };
+                if_block(node_3, ($$render) => {
+                  if (get(hasIcon))
+                    $$render(consequent);
+                });
+              }
+              var node_4 = sibling(node_3, 2);
+              {
+                var consequent_1 = ($$anchor5) => {
+                  var span = root_5();
+                  var text_1 = child(span, true);
+                  reset(span);
+                  template_effect(() => set_text(text_1, get(label)));
+                  append($$anchor5, span);
+                };
+                var alternate = ($$anchor5) => {
+                  var text_2 = text();
+                  template_effect(() => set_text(text_2, get(label)));
+                  append($$anchor5, text_2);
+                };
+                if_block(node_4, ($$render) => {
+                  if (get(itemIconOnly))
+                    $$render(consequent_1);
+                  else
+                    $$render(alternate, -1);
+                });
+              }
+              append($$anchor4, fragment_2);
+            };
+            let $02 = user_derived(() => text2(get(itemValue)));
+            let $1 = user_derived(() => !!get(item).disabled);
+            let $2 = user_derived(() => text2(get(itemValue)));
+            let $3 = user_derived(() => `${triggerClass} slex-tabs-trigger--selected ${get(iconClass)}`);
+            let $4 = user_derived(() => `${triggerClass} ${get(iconClass)}`);
+            let $5 = user_derived(() => ({ button: get(selected) ? "slex-tabs-trigger--selected" : "" }));
+            TabItem($$anchor3, {
+              get key() {
+                return get($02);
+              },
+              get open() {
+                return get(selected);
+              },
+              get disabled() {
+                return get($1);
+              },
+              get "data-value"() {
+                return get($2);
+              },
+              get activeClass() {
+                return get($3);
+              },
+              get inactiveClass() {
+                return get($4);
+              },
+              get classes() {
+                return get($5);
+              },
+              onclick: () => choose(get(itemValue)),
+              titleSlot,
+              children: ($$anchor4, $$slotProps2) => {
+                var fragment_5 = comment();
+                var node_5 = first_child(fragment_5);
+                {
+                  var consequent_2 = ($$anchor5) => {
+                    var div_1 = root_8();
+                    action(div_1, ($$node, $$action_arg) => renderTabPanel?.($$node, $$action_arg), () => get(item));
+                    append($$anchor5, div_1);
+                  };
+                  if_block(node_5, ($$render) => {
+                    if (get(item).content)
+                      $$render(consequent_2);
+                  });
+                }
+                append($$anchor4, fragment_5);
+              },
+              $$slots: { titleSlot: true, default: true }
+            });
+          }
+        });
+        next(2);
+        append($$anchor2, fragment);
+      },
+      $$slots: { default: true }
+    });
+  }
+  reset(div);
+  action(div, ($$node, $$action_arg) => annotateTabs?.($$node, $$action_arg), () => ({
+    value: get(value),
+    items: get(items),
+    iconVersion: get(iconVersion)
+  }));
+  template_effect(() => set_attribute(div, "data-orientation", get(orientation)));
+  append($$anchor, div);
+  pop();
+}
+
+export { Tabs2 as Tabs };