@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-dvk4h36t.js

@@ -0,0 +1,140 @@
+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;
+      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 };

package/dist/shared/chunk-e3h0ddmx.js

@@ -0,0 +1,168 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setValueRange
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/slider/slider.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function SliderRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let clamp = function(val) {
+      return Math.min(max, Math.max(min, val));
+    }, updatePosition = function(pct2) {
+      thumb.style.left = `${pct2}%`;
+      fill.style.width = `${pct2}%`;
+    }, setValue = function(val) {
+      if (state.disabled.peek())
+        return;
+      const clamped = clamp(val);
+      state.value.value = clamped;
+      setValueRange(thumb, clamped, min, max);
+      const pct2 = (clamped - min) / (max - min) * 100;
+      updatePosition(pct2);
+      setDataState(root, "active");
+      onValueChange?.(clamped);
+    }, valueFromPointer = function(event) {
+      const rect = track.getBoundingClientRect();
+      const pct2 = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+      const raw = min + pct2 * (max - min);
+      return Math.round(raw / step) * step;
+    };
+    const {
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      onValueChange,
+      ...attrs
+    } = options;
+    const state = {
+      value: signal(defaultValue),
+      disabled: signal(disabled)
+    };
+    const fill = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-part", "fill");
+      {
+        const __v = { position: "absolute", height: "100%", borderRadius: "inherit" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      return __el0;
+    })();
+    const thumb = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "slider");
+      {
+        const __v = disabled ? "-1" : "0";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("tabindex", __v === true ? "" : __v);
+      }
+      __el1.setAttribute("data-part", "thumb");
+      {
+        const __v = disabled ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = { position: "absolute", transform: "translate(-50%, -50%)" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __on(__el1, "keydown", (event) => {
+        if (state.disabled.peek())
+          return;
+        const current = state.value.peek();
+        if (isKey(event, Keys.ArrowRight, Keys.ArrowUp)) {
+          event.preventDefault();
+          setValue(current + step);
+        } else if (isKey(event, Keys.ArrowLeft, Keys.ArrowDown)) {
+          event.preventDefault();
+          setValue(current - step);
+        } else if (isKey(event, Keys.Home)) {
+          event.preventDefault();
+          setValue(min);
+        } else if (isKey(event, Keys.End)) {
+          event.preventDefault();
+          setValue(max);
+        }
+      });
+      return __el1;
+    })();
+    setValueRange(thumb, defaultValue, min, max);
+    const track = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("data-part", "track");
+      {
+        const __v = { position: "relative" };
+        if (__v != null && __v !== false)
+          __el2.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __enterChildren(__el2);
+      __insert(__el2, fill);
+      __insert(__el2, thumb);
+      __exitChildren();
+      return __el2;
+    })();
+    const root = (() => {
+      const __el3 = __element("div");
+      {
+        const __v = uniqueId("slider");
+        if (__v != null && __v !== false)
+          __el3.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = disabled ? "disabled" : "active";
+        if (__v != null && __v !== false)
+          __el3.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el3, "pointerdown", (event) => {
+        if (state.disabled.peek())
+          return;
+        event.preventDefault();
+        setValue(valueFromPointer(event));
+        thumb.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(__el3);
+      __insert(__el3, track);
+      __exitChildren();
+      return __el3;
+    })();
+    const pct = (defaultValue - min) / (max - min) * 100;
+    updatePosition(pct);
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, thumb, track, state };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Slider = {
+  Root: SliderRoot
+};
+
+export { Slider };

package/dist/shared/chunk-e6660g7e.js

@@ -0,0 +1,179 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/collapsible/collapsible-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, ref, useContext } from "@vertz/ui";
+var CollapsibleContext = createContext(undefined, "@vertz/ui-primitives::CollapsibleContext");
+function useCollapsibleContext(componentName) {
+  const ctx = useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error(`<Collapsible.${componentName}> must be used inside <Collapsible>. ` + "Ensure it is a direct or nested child of the Collapsible root component.");
+  }
+  return ctx;
+}
+function CollapsibleTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useCollapsibleContext("Trigger");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      ctx.triggerRef.current = __el0;
+      __el0.setAttribute("type", "button");
+      {
+        const __v = ctx.ids.triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.defaultOpen ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.disabled;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.disabled ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.trigger, __props.className ?? __props.class));
+      __on(__el0, "click", ctx.toggle);
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CollapsibleContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useCollapsibleContext("Content");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      {
+        const __v = ctx.ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-part", "collapsible-content");
+      {
+        const __v = ctx.defaultOpen ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: ctx.defaultOpen ? "" : "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 ComposedCollapsibleRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (__props.disabled ?? false)
+        return;
+      const contentEl = contentRef.current;
+      const triggerEl = triggerRef.current;
+      if (!contentEl || !triggerEl)
+        return;
+      isOpen = !isOpen;
+      if (isOpen) {
+        setHidden(contentEl, false);
+      }
+      const height = contentEl.scrollHeight;
+      contentEl.style.setProperty("--collapsible-content-height", `${height}px`);
+      setExpanded(triggerEl, isOpen);
+      setDataState(triggerEl, isOpen ? "open" : "closed");
+      setDataState(contentEl, isOpen ? "open" : "closed");
+      if (!isOpen) {
+        setHiddenAnimated(contentEl, true);
+      }
+      __props.onOpenChange?.(isOpen);
+    };
+    const ids = linkedIds("collapsible");
+    const triggerRef = ref();
+    const contentRef = ref();
+    let isOpen = __props.defaultOpen ?? false;
+    const ctx = {
+      ids,
+      triggerRef,
+      contentRef,
+      classes: __props.classes,
+      disabled: __props.disabled ?? false,
+      defaultOpen: __props.defaultOpen ?? false,
+      toggle
+    };
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-v-id", "ComposedCollapsibleRoot");
+      __el0.setAttribute("data-part", "collapsible");
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __enterChildren(__el0);
+      __append(__el0, CollapsibleContext.Provider({ get value() {
+        return ctx;
+      }, children: () => __child(() => __props.children) }));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedCollapsible = Object.assign(ComposedCollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
+
+export { ComposedCollapsible };