@vertz/ui-primitives 0.2.21 → 0.2.23

package/dist/shared/chunk-9gfp3ffv.js

@@ -0,0 +1,204 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated,
+  setSelected
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/combobox/combobox.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ComboboxRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let open = function() {
+      state.open.value = true;
+      setExpanded(input, true);
+      setHidden(listbox, false);
+      setDataState(listbox, "open");
+    }, close = function() {
+      state.open.value = false;
+      state.activeIndex.value = -1;
+      setExpanded(input, false);
+      setDataState(listbox, "closed");
+      setHiddenAnimated(listbox, true);
+      updateActiveDescendant(-1);
+    }, selectOption = function(value) {
+      state.value.value = value;
+      state.inputValue.value = value;
+      input.value = value;
+      for (const opt of optionElements) {
+        const isActive = opt.getAttribute("data-value") === value;
+        setSelected(opt, isActive);
+        setDataState(opt, isActive ? "active" : "inactive");
+      }
+      onValueChange?.(value);
+      close();
+      input.focus();
+    }, updateActiveDescendant = function(index) {
+      const opt = optionElements[index];
+      if (index >= 0 && opt) {
+        input.setAttribute("aria-activedescendant", opt.id);
+        for (let i = 0;i < optionElements.length; i++) {
+          const el = optionElements[i];
+          if (el)
+            setDataState(el, i === index ? "active" : "inactive");
+        }
+      } else {
+        input.removeAttribute("aria-activedescendant");
+      }
+    }, Option = function(value, label) {
+      const optId = `${ids.contentId}-opt-${optionElements.length}`;
+      const isSelectedOpt = value === defaultValue;
+      const opt = (() => {
+        const __el2 = __element("div");
+        __el2.setAttribute("role", "option");
+        {
+          const __v = optId;
+          if (__v != null && __v !== false)
+            __el2.setAttribute("id", __v === true ? "" : __v);
+        }
+        {
+          const __v = value;
+          if (__v != null && __v !== false)
+            __el2.setAttribute("data-value", __v === true ? "" : __v);
+        }
+        {
+          const __v = isSelectedOpt ? "true" : "false";
+          if (__v != null && __v !== false)
+            __el2.setAttribute("aria-selected", __v === true ? "" : __v);
+        }
+        {
+          const __v = isSelectedOpt ? "active" : "inactive";
+          if (__v != null && __v !== false)
+            __el2.setAttribute("data-state", __v === true ? "" : __v);
+        }
+        __on(__el2, "click", () => selectOption(value));
+        __enterChildren(__el2);
+        __insert(__el2, label ?? value);
+        __exitChildren();
+        return __el2;
+      })();
+      optionElements.push(opt);
+      listbox.appendChild(opt);
+      return opt;
+    };
+    const { defaultValue = "", onValueChange, onInputChange, ...attrs } = options;
+    const ids = linkedIds("combobox");
+    const state = {
+      open: signal(false),
+      value: signal(defaultValue),
+      inputValue: signal(defaultValue),
+      activeIndex: signal(-1)
+    };
+    const optionElements = [];
+    const input = (() => {
+      const __el0 = __element("input");
+      __el0.setAttribute("type", "text");
+      __el0.setAttribute("role", "combobox");
+      __el0.setAttribute("aria-autocomplete", "list");
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-haspopup", "listbox");
+      {
+        const __v = ids.triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultValue;
+        if (__v != null)
+          __el0.value = __v;
+      }
+      __el0.setAttribute("aria-expanded", "false");
+      __on(__el0, "input", () => {
+        state.inputValue.value = input.value;
+        onInputChange?.(input.value);
+        if (!state.open.peek())
+          open();
+      });
+      __on(__el0, "focus", () => {
+        if (!state.open.peek() && input.value.length > 0)
+          open();
+      });
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          close();
+          return;
+        }
+        if (isKey(event, Keys.ArrowDown)) {
+          event.preventDefault();
+          if (!state.open.peek()) {
+            open();
+          }
+          const next = Math.min(state.activeIndex.peek() + 1, optionElements.length - 1);
+          state.activeIndex.value = next;
+          updateActiveDescendant(next);
+          return;
+        }
+        if (isKey(event, Keys.ArrowUp)) {
+          event.preventDefault();
+          const prev = Math.max(state.activeIndex.peek() - 1, 0);
+          state.activeIndex.value = prev;
+          updateActiveDescendant(prev);
+          return;
+        }
+        if (isKey(event, Keys.Enter)) {
+          event.preventDefault();
+          const idx = state.activeIndex.peek();
+          if (idx >= 0 && idx < optionElements.length) {
+            const val = optionElements[idx]?.getAttribute("data-value");
+            if (val != null)
+              selectOption(val);
+          }
+          return;
+        }
+      });
+      return __el0;
+    })();
+    const listbox = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "listbox");
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el1.setAttribute("aria-hidden", "true");
+      __el1.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      return __el1;
+    })();
+    applyAttrs(input, attrs);
+    const __mfResult0 = { input, listbox, state, Option };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Combobox = {
+  Root: ComboboxRoot
+};
+
+export { Combobox };

package/dist/shared/chunk-b25npqer.js

@@ -0,0 +1,149 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  focusFirst,
+  saveFocus
+} from "./chunk-e2v1c9ex.js";
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/popover/popover.tsx
+import { __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function PopoverRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let open = function() {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(content, false);
+      setDataState(trigger, "open");
+      setDataState(content, "open");
+      restoreFocus = saveFocus();
+      queueMicrotask(() => focusFirst(content));
+      if (positioning) {
+        const result = createFloatingPosition(trigger, content, positioning);
+        floatingCleanup = result.cleanup;
+        dismissCleanup = createDismiss({
+          onDismiss: close,
+          insideElements: [trigger, content],
+          escapeKey: false
+        });
+      }
+      onOpenChange?.(true);
+    }, close = function() {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setDataState(trigger, "closed");
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      floatingCleanup?.();
+      floatingCleanup = null;
+      dismissCleanup?.();
+      dismissCleanup = null;
+      restoreFocus?.();
+      restoreFocus = null;
+      onOpenChange?.(false);
+    };
+    const { defaultOpen = false, onOpenChange, positioning, ...attrs } = options;
+    const ids = linkedIds("popover");
+    const state = { open: signal(defaultOpen) };
+    let restoreFocus = null;
+    let floatingCleanup = null;
+    let dismissCleanup = null;
+    const trigger = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      {
+        const __v = ids.triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-haspopup", "dialog");
+      {
+        const __v = defaultOpen ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el0, "click", () => {
+        if (state.open.peek()) {
+          close();
+        } else {
+          open();
+        }
+      });
+      return __el0;
+    })();
+    const content = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "dialog");
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: defaultOpen ? "" : "none" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __on(__el1, "keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          close();
+        }
+      });
+      return __el1;
+    })();
+    applyAttrs(trigger, attrs);
+    const __mfResult0 = { trigger, content, state };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Popover = {
+  Root: PopoverRoot
+};
+
+export { Popover };

package/dist/shared/chunk-cgb2j94g.js

@@ -0,0 +1,141 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/carousel/carousel.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function CarouselRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let updateSlideVisibility = function() {
+      const current = state.currentIndex.peek();
+      for (let i = 0;i < slides.length; i++) {
+        const slide = slides[i];
+        if (!slide)
+          continue;
+        slide.setAttribute("aria-hidden", String(i !== current));
+        slide.setAttribute("aria-label", `Slide ${i + 1} of ${slides.length}`);
+        setDataState(slide, i === current ? "active" : "inactive");
+      }
+      if (!loop) {
+        prevButton.disabled = current <= 0;
+        nextButton.disabled = current >= slides.length - 1;
+      }
+      const translateProp = orientation === "horizontal" ? "translateX" : "translateY";
+      viewport.style.transform = `${translateProp}(-${current * 100}%)`;
+    }, goTo = function(index) {
+      const total = slides.length;
+      if (total === 0)
+        return;
+      let next = index;
+      if (loop) {
+        next = (index % total + total) % total;
+      } else {
+        next = Math.max(0, Math.min(total - 1, index));
+      }
+      if (next === state.currentIndex.peek())
+        return;
+      state.currentIndex.value = next;
+      updateSlideVisibility();
+      onSlideChange?.(next);
+    }, goNext = function() {
+      goTo(state.currentIndex.peek() + 1);
+    }, goPrev = function() {
+      goTo(state.currentIndex.peek() - 1);
+    }, Slide = function() {
+      const slide = (() => {
+        const __el4 = __element("div");
+        __el4.setAttribute("role", "group");
+        __el4.setAttribute("aria-roledescription", "slide");
+        return __el4;
+      })();
+      slides.push(slide);
+      state.slideCount.value = slides.length;
+      viewport.appendChild(slide);
+      updateSlideVisibility();
+      return slide;
+    };
+    const {
+      orientation = "horizontal",
+      loop = false,
+      defaultIndex = 0,
+      onSlideChange,
+      ...attrs
+    } = options;
+    const state = {
+      currentIndex: signal(defaultIndex),
+      slideCount: signal(0)
+    };
+    const slides = [];
+    const viewport = (() => {
+      const __el0 = __element("div");
+      {
+        const __v = { overflow: "hidden" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      return __el0;
+    })();
+    const prevButton = (() => {
+      const __el1 = __element("button");
+      __el1.setAttribute("type", "button");
+      __el1.setAttribute("aria-label", "Previous slide");
+      __on(__el1, "click", goPrev);
+      return __el1;
+    })();
+    const nextButton = (() => {
+      const __el2 = __element("button");
+      __el2.setAttribute("type", "button");
+      __el2.setAttribute("aria-label", "Next slide");
+      __on(__el2, "click", goNext);
+      return __el2;
+    })();
+    const root = (() => {
+      const __el3 = __element("div");
+      __el3.setAttribute("role", "region");
+      __el3.setAttribute("aria-roledescription", "carousel");
+      {
+        const __v = orientation;
+        if (__v != null && __v !== false)
+          __el3.setAttribute("data-orientation", __v === true ? "" : __v);
+      }
+      __on(__el3, "keydown", (event) => {
+        const prevKey = orientation === "horizontal" ? Keys.ArrowLeft : Keys.ArrowUp;
+        const nextKey = orientation === "horizontal" ? Keys.ArrowRight : Keys.ArrowDown;
+        if (isKey(event, prevKey)) {
+          event.preventDefault();
+          goPrev();
+        }
+        if (isKey(event, nextKey)) {
+          event.preventDefault();
+          goNext();
+        }
+      });
+      __enterChildren(__el3);
+      __insert(__el3, viewport);
+      __exitChildren();
+      return __el3;
+    })();
+    updateSlideVisibility();
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, viewport, prevButton, nextButton, state, Slide, goTo, goNext, goPrev };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Carousel = {
+  Root: CarouselRoot
+};
+
+export { Carousel };

package/dist/shared/chunk-e1jcf22s.js

@@ -0,0 +1,79 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/checkbox/checkbox.tsx
+import { computed, signal } from "@vertz/ui";
+import { __attr, __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+function dataStateFor(checked) {
+  if (checked === "mixed")
+    return "indeterminate";
+  return checked ? "checked" : "unchecked";
+}
+function ariaCheckedFor(checked) {
+  if (checked === "mixed")
+    return "mixed";
+  return String(checked);
+}
+function CheckboxRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (disabled)
+        return;
+      checked.value = checked.value === "mixed" ? true : !checked.value;
+      onCheckedChange?.(checked.value);
+    };
+    const { defaultChecked = false, disabled = false, onCheckedChange, ...attrs } = options;
+    const checked = signal(defaultChecked, "checked");
+    const el = computed(() => (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("role", "checkbox");
+      {
+        const __v = uniqueId("checkbox");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "aria-checked", () => ariaCheckedFor(checked.value));
+      __attr(__el0, "data-state", () => dataStateFor(checked.value));
+      {
+        const __v = disabled;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = disabled ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+      }
+      __on(__el0, "click", toggle);
+      __on(__el0, "keydown", (e) => {
+        if (isKey(e, Keys.Space)) {
+          e.preventDefault();
+          toggle();
+        }
+      });
+      return __el0;
+    })());
+    applyAttrs(el.value, attrs);
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Checkbox = {
+  Root: CheckboxRoot
+};
+
+export { Checkbox };