@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-wqsek87j.js

@@ -0,0 +1,311 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/combobox/combobox-composed.tsx
+import { computed } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, ref, useContext } from "@vertz/ui";
+var ComboboxContext = createContext(undefined, "@vertz/ui-primitives::ComboboxContext");
+function useComboboxContext(componentName) {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) {
+    throw new Error(`<Combobox.${componentName}> must be used inside <ComposedCombobox>. ` + "Ensure it is a direct or nested child of the ComposedCombobox root component.");
+  }
+  return ctx;
+}
+function ComboboxInput(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useComboboxContext("Input");
+    const __mfResult0 = (() => {
+      const __el0 = __element("input");
+      ctx.inputRef.current = __el0;
+      __el0.setAttribute("type", "text");
+      __el0.setAttribute("role", "combobox");
+      __el0.setAttribute("data-combobox-input", "");
+      __el0.setAttribute("aria-autocomplete", "list");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-haspopup", "listbox");
+      __el0.setAttribute("aria-expanded", "false");
+      {
+        const __v = ctx.selectedValue();
+        if (__v != null)
+          __el0.value = __v;
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.input, __props.className ?? __props.class));
+      __on(__el0, "input", () => {
+        const inputEl = ctx.inputRef.current;
+        if (!inputEl)
+          return;
+        if (!ctx.isOpen())
+          ctx.open();
+      });
+      __on(__el0, "focus", () => {
+        const inputEl = ctx.inputRef.current;
+        if (!inputEl)
+          return;
+        if (!ctx.isOpen() && inputEl.value.length > 0)
+          ctx.open();
+      });
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          ctx.close();
+          return;
+        }
+        if (isKey(event, Keys.ArrowDown)) {
+          event.preventDefault();
+          if (!ctx.isOpen()) {
+            ctx.open();
+          }
+          const contentEl = ctx.contentRef.current;
+          if (!contentEl)
+            return;
+          const options = [...contentEl.querySelectorAll('[role="option"]')];
+          const next = Math.min(ctx.activeIndex() + 1, options.length - 1);
+          ctx.setActiveIndex(next);
+          ctx.updateActiveDescendant(next);
+          return;
+        }
+        if (isKey(event, Keys.ArrowUp)) {
+          event.preventDefault();
+          const prev = Math.max(ctx.activeIndex() - 1, 0);
+          ctx.setActiveIndex(prev);
+          ctx.updateActiveDescendant(prev);
+          return;
+        }
+        if (isKey(event, Keys.Enter)) {
+          event.preventDefault();
+          const idx = ctx.activeIndex();
+          const contentEl = ctx.contentRef.current;
+          if (!contentEl)
+            return;
+          const options = [...contentEl.querySelectorAll('[role="option"]')];
+          if (idx >= 0 && idx < options.length) {
+            const val = options[idx]?.getAttribute("data-value");
+            if (val != null)
+              ctx.selectOption(val);
+          }
+          return;
+        }
+      });
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComboboxContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useComboboxContext("Content");
+    const instanceIndex = ctx._contentCount.value++;
+    if (instanceIndex > 0) {
+      console.warn("Duplicate <Combobox.Content> detected – only the first is used");
+    }
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "listbox");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-combobox-content", "");
+      __el0.setAttribute("aria-hidden", "true");
+      __el0.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComboboxOption(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useComboboxContext("Option");
+    const isSelected = computed(() => ctx.selectedValue() === __props.value);
+    const optId = computed(() => `${ctx.contentId}-opt-${__props.value}`);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "option");
+      __attr(__el0, "id", () => optId.value);
+      __el0.setAttribute("data-combobox-option", "");
+      __attr(__el0, "data-value", () => __props.value);
+      __attr(__el0, "aria-selected", () => isSelected.value ? "true" : "false");
+      __attr(__el0, "data-state", () => isSelected.value ? "active" : "inactive");
+      __attr(__el0, "class", () => cn(ctx.classes?.option, __props.className ?? __props.class));
+      __on(__el0, "click", () => ctx.selectOption(__props.value));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children ?? __props.value));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedComboboxRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let getInputEl = function() {
+      return inputRef.current ?? null;
+    }, getContentEl = function() {
+      return contentRef.current ?? null;
+    }, open = function() {
+      state.isOpen = true;
+      const inputEl = getInputEl();
+      const contentEl = getContentEl();
+      if (inputEl) {
+        inputEl.setAttribute("aria-expanded", "true");
+      }
+      if (contentEl) {
+        contentEl.setAttribute("data-state", "open");
+        contentEl.setAttribute("aria-hidden", "false");
+        contentEl.style.display = "";
+      }
+    }, close = function() {
+      state.isOpen = false;
+      state.activeIndex = -1;
+      const inputEl = getInputEl();
+      const contentEl = getContentEl();
+      if (inputEl) {
+        inputEl.setAttribute("aria-expanded", "false");
+        inputEl.removeAttribute("aria-activedescendant");
+      }
+      if (contentEl) {
+        contentEl.setAttribute("data-state", "closed");
+        setHiddenAnimated(contentEl, true);
+      }
+    }, selectOption = function(value) {
+      state.selectedValue = value;
+      const inputEl = getInputEl();
+      if (inputEl) {
+        inputEl.value = value;
+      }
+      const contentEl = getContentEl();
+      if (contentEl) {
+        const options = contentEl.querySelectorAll('[role="option"]');
+        for (const opt of options) {
+          const isActive = opt.getAttribute("data-value") === value;
+          opt.setAttribute("aria-selected", isActive ? "true" : "false");
+          opt.setAttribute("data-state", isActive ? "active" : "inactive");
+        }
+      }
+      __props.onValueChange?.(value);
+      close();
+      inputEl?.focus();
+    }, updateActiveDescendant = function(index) {
+      const inputEl = getInputEl();
+      const contentEl = getContentEl();
+      if (!inputEl || !contentEl)
+        return;
+      const options = [...contentEl.querySelectorAll('[role="option"]')];
+      const opt = options[index];
+      if (index >= 0 && opt) {
+        inputEl.setAttribute("aria-activedescendant", opt.id);
+        for (let i = 0;i < options.length; i++) {
+          const el = options[i];
+          if (el)
+            el.setAttribute("data-state", i === index ? "active" : "inactive");
+        }
+      } else {
+        inputEl.removeAttribute("aria-activedescendant");
+      }
+    };
+    const ids = linkedIds("combobox");
+    const inputRef = ref();
+    const contentRef = ref();
+    const state = {
+      isOpen: false,
+      selectedValue: __props.defaultValue ?? "",
+      activeIndex: -1
+    };
+    const ctx = {
+      isOpen: () => state.isOpen,
+      selectedValue: () => state.selectedValue,
+      contentId: ids.contentId,
+      inputRef,
+      contentRef,
+      classes: __props.classes,
+      open,
+      close,
+      selectOption,
+      activeIndex: () => state.activeIndex,
+      setActiveIndex: (index) => {
+        state.activeIndex = index;
+      },
+      updateActiveDescendant,
+      _contentCount: { value: 0 }
+    };
+    const origOpen = ctx.open;
+    ctx.open = () => {
+      origOpen();
+      const inputEl = getInputEl();
+      if (inputEl && __props.onInputChange) {
+        __props.onInputChange(inputEl.value);
+      }
+    };
+    const __mfResult0 = ComboboxContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("span");
+      {
+        const __v = { display: "contents" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-combobox-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedCombobox = Object.assign(ComposedComboboxRoot, {
+  Input: ComboboxInput,
+  Content: ComboboxContent,
+  Option: ComboboxOption
+});
+
+export { ComposedCombobox };

package/dist/shared/chunk-wtkxz2te.js

@@ -0,0 +1,157 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setValueRange
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/slider/slider-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { ref } from "@vertz/ui";
+function ComposedSliderRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let clamp = function(val) {
+      return Math.min(__props.max ?? 100, Math.max(__props.min ?? 0, val));
+    }, updatePosition = function(pct) {
+      const thumb = thumbRef.current;
+      const fill = fillRef.current;
+      if (thumb)
+        thumb.style.left = `${pct}%`;
+      if (fill)
+        fill.style.width = `${pct}%`;
+    }, setValue = function(val) {
+      if (__props.disabled ?? false)
+        return;
+      const clamped = clamp(val);
+      currentValue.value = clamped;
+      const thumb = thumbRef.current;
+      if (thumb)
+        setValueRange(thumb, clamped, __props.min ?? 0, __props.max ?? 100);
+      const pct = (clamped - (__props.min ?? 0)) / ((__props.max ?? 100) - (__props.min ?? 0)) * 100;
+      updatePosition(pct);
+      __props.onValueChange?.(clamped);
+    }, valueFromPointer = function(event) {
+      const track = trackRef.current;
+      if (!track)
+        return __props.min ?? 0;
+      const rect = track.getBoundingClientRect();
+      const pct = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+      const raw = (__props.min ?? 0) + pct * ((__props.max ?? 100) - (__props.min ?? 0));
+      return Math.round(raw / (__props.step ?? 1)) * (__props.step ?? 1);
+    };
+    const currentValue = signal(__props.defaultValue ?? 0, "currentValue");
+    const thumbRef = ref();
+    const fillRef = ref();
+    const trackRef = ref();
+    const initialPct = computed(() => ((__props.defaultValue ?? 0) - (__props.min ?? 0)) / ((__props.max ?? 100) - (__props.min ?? 0)) * 100);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-v-id", "ComposedSliderRoot");
+      {
+        const __v = uniqueId("slider");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "data-state", () => __props.disabled ?? false ? "disabled" : "active");
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __on(__el0, "pointerdown", (event) => {
+        if (__props.disabled ?? false)
+          return;
+        event.preventDefault();
+        setValue(valueFromPointer(event));
+        thumbRef.current?.focus();
+        function onMove(e) {
+          setValue(valueFromPointer(e));
+        }
+        function onUp() {
+          document.removeEventListener("pointermove", onMove);
+          document.removeEventListener("pointerup", onUp);
+        }
+        document.addEventListener("pointermove", onMove);
+        document.addEventListener("pointerup", onUp);
+      });
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        trackRef.current = __el1;
+        __el1.setAttribute("data-part", "track");
+        {
+          const __v = { position: "relative" };
+          if (__v != null && __v !== false)
+            __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        __attr(__el1, "class", () => cn(__props.classes?.track));
+        __enterChildren(__el1);
+        __append(__el1, (() => {
+          const __el2 = __element("div");
+          fillRef.current = __el2;
+          __el2.setAttribute("data-part", "fill");
+          __attr(__el2, "style", () => ({
+            position: "absolute",
+            height: "100%",
+            borderRadius: "inherit",
+            width: `${initialPct.value}%`
+          }));
+          __attr(__el2, "class", () => cn(__props.classes?.range));
+          return __el2;
+        })());
+        __append(__el1, (() => {
+          const __el3 = __element("div");
+          thumbRef.current = __el3;
+          __el3.setAttribute("role", "slider");
+          __attr(__el3, "tabindex", () => __props.disabled ?? false ? "-1" : "0");
+          __el3.setAttribute("data-part", "thumb");
+          __attr(__el3, "aria-valuenow", () => String(__props.defaultValue ?? 0));
+          __attr(__el3, "aria-valuemin", () => String(__props.min ?? 0));
+          __attr(__el3, "aria-valuemax", () => String(__props.max ?? 100));
+          __attr(__el3, "aria-disabled", () => __props.disabled ?? false ? "true" : undefined);
+          __attr(__el3, "style", () => ({
+            position: "absolute",
+            transform: "translate(-50%, -50%)",
+            left: `${initialPct.value}%`
+          }));
+          __attr(__el3, "class", () => cn(__props.classes?.thumb));
+          __on(__el3, "keydown", (event) => {
+            if (__props.disabled ?? false)
+              return;
+            if (isKey(event, Keys.ArrowRight, Keys.ArrowUp)) {
+              event.preventDefault();
+              setValue(currentValue.value + (__props.step ?? 1));
+            } else if (isKey(event, Keys.ArrowLeft, Keys.ArrowDown)) {
+              event.preventDefault();
+              setValue(currentValue.value - (__props.step ?? 1));
+            } else if (isKey(event, Keys.Home)) {
+              event.preventDefault();
+              setValue(__props.min ?? 0);
+            } else if (isKey(event, Keys.End)) {
+              event.preventDefault();
+              setValue(__props.max ?? 100);
+            }
+          });
+          return __el3;
+        })());
+        __exitChildren();
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedSlider = ComposedSliderRoot;
+
+export { ComposedSlider };

package/dist/shared/chunk-y1hpsqzy.js

@@ -0,0 +1,185 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createFloatingPosition,
+  resolveLayoutElement
+} from "./chunk-vef3sepw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/tooltip/tooltip-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, ref, useContext } from "@vertz/ui";
+var TooltipContext = createContext(undefined, "@vertz/ui-primitives::TooltipContext");
+function useTooltipContext(componentName) {
+  const ctx = useContext(TooltipContext);
+  if (!ctx) {
+    throw new Error(`<Tooltip.${componentName}> must be used inside <Tooltip>. ` + "Ensure it is a direct or nested child of the Tooltip root component.");
+  }
+  return ctx;
+}
+function TooltipTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useTooltipContext("Trigger");
+    const idx = ctx._triggerCount.value++;
+    if (idx > 0)
+      console.warn("Duplicate <Tooltip.Trigger> detected – only the first is used");
+    const childNodes = computed(() => Array.isArray(__props.children) ? __props.children : [__props.children]);
+    const childEl = computed(() => childNodes.value.find((c) => c instanceof HTMLElement));
+    if (childEl.value) {
+      childEl.value.setAttribute("aria-describedby", ctx.contentId);
+    }
+    const __mfResult0 = (() => {
+      const __el0 = __element("span");
+      {
+        const __v = { display: "contents" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-tooltip-trigger", "");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-describedby", __v === true ? "" : __v);
+      }
+      __on(__el0, "mouseenter", () => ctx.show());
+      __on(__el0, "mouseleave", () => ctx.hide());
+      __on(__el0, "focus", () => ctx.show());
+      __on(__el0, "blur", () => ctx.hide());
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TooltipContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useTooltipContext("Content");
+    const idx = ctx._contentCount.value++;
+    if (idx > 0)
+      console.warn("Duplicate <Tooltip.Content> detected – only the first is used");
+    const isOpen = ctx.isOpen();
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "tooltip");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-tooltip-content", "");
+      {
+        const __v = isOpen ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = isOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: isOpen ? "" : "none" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedTooltipRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let applyPositioning = function() {
+      const content = contentRef.current;
+      const triggerSpan = content?.parentElement?.querySelector("[data-tooltip-trigger]");
+      if (!triggerSpan || !content)
+        return;
+      const trigger = resolveLayoutElement(triggerSpan);
+      content.style.position = "fixed";
+      const floatingOpts = __props.positioning ?? { placement: "top", offset: 4 };
+      const result = createFloatingPosition(trigger, content, floatingOpts);
+      state.floatingCleanup = result.cleanup;
+    }, show = function() {
+      if (state.showTimeout !== null)
+        return;
+      state.showTimeout = setTimeout(() => {
+        state.showTimeout = null;
+        isOpen.value = true;
+        applyPositioning();
+      }, __props.delay ?? 300);
+    }, hide = function() {
+      if (state.showTimeout !== null) {
+        clearTimeout(state.showTimeout);
+        state.showTimeout = null;
+      }
+      isOpen.value = false;
+      state.floatingCleanup?.();
+      state.floatingCleanup = null;
+    };
+    const contentId = uniqueId("tooltip");
+    const contentRef = ref();
+    const isOpen = signal(false, "isOpen");
+    const state = {
+      showTimeout: null,
+      floatingCleanup: null
+    };
+    const ctx = {
+      isOpen: () => isOpen.value,
+      contentId,
+      contentRef,
+      classes: __props.classes,
+      show,
+      hide,
+      _triggerCount: { value: 0 },
+      _contentCount: { value: 0 }
+    };
+    const __mfResult0 = TooltipContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("span");
+      {
+        const __v = { display: "contents" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-tooltip-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedTooltip = Object.assign(ComposedTooltipRoot, {
+  Trigger: TooltipTrigger,
+  Content: TooltipContent
+});
+
+export { ComposedTooltip };