@vertz/ui-primitives 0.2.23 → 0.2.25

package/dist/shared/chunk-ev367pq3.js

@@ -0,0 +1,102 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/breadcrumb/breadcrumb-composed.tsx
+import { computed } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, Link, useContext } from "@vertz/ui";
+var BreadcrumbContext = createContext(undefined, "@vertz/ui-primitives::BreadcrumbContext");
+function BreadcrumbItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(BreadcrumbContext);
+    const separatorText = computed(() => ctx?.separator ?? "/");
+    if (__props.href && __props.current) {
+      console.warn('Breadcrumb.Item: both "href" and "current" are set. "current" takes precedence — the link will not render.');
+    }
+    const content = computed(() => __props.current ? (() => {
+      const __el0 = __element("span");
+      __el0.setAttribute("aria-current", "page");
+      __attr(__el0, "class", () => cn(ctx?.classes?.page, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() : __props.href ? Link({ get href() {
+      return __props.href;
+    }, get className() {
+      return cn(ctx?.classes?.link, __props.className ?? __props.class);
+    }, get children() {
+      return __props.children ?? "";
+    } }) : (() => {
+      const __el1 = __element("span");
+      __attr(__el1, "class", () => cn(ctx?.classes?.link, __props.className ?? __props.class));
+      __enterChildren(__el1);
+      __append(__el1, __child(() => __props.children));
+      __exitChildren();
+      return __el1;
+    })());
+    const __mfResult0 = (() => {
+      const __el2 = __element("li");
+      __attr(__el2, "class", () => cn(ctx?.classes?.item));
+      __enterChildren(__el2);
+      __append(__el2, (() => {
+        const __el3 = __element("span");
+        __el3.setAttribute("role", "presentation");
+        __el3.setAttribute("aria-hidden", "true");
+        __attr(__el3, "class", () => cn(ctx?.classes?.separator));
+        __enterChildren(__el3);
+        __append(__el3, __child(() => separatorText.value));
+        __exitChildren();
+        return __el3;
+      })());
+      __append(__el2, __child(() => content.value));
+      __exitChildren();
+      return __el2;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedBreadcrumbRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = BreadcrumbContext.Provider({ get value() {
+      return { classes: __props.classes, separator: __props.separator ?? "/" };
+    }, children: () => (() => {
+      const __el0 = __element("nav");
+      __el0.setAttribute("aria-label", "Breadcrumb");
+      __attr(__el0, "class", () => cn(__props.classes?.nav, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("ol");
+        __attr(__el1, "class", () => cn(__props.classes?.list));
+        {
+          const __v = { listStyle: "none", margin: "0", padding: "0" };
+          if (__v != null && __v !== false)
+            __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        __enterChildren(__el1);
+        __append(__el1, __child(() => __props.children));
+        __exitChildren();
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedBreadcrumb = Object.assign(ComposedBreadcrumbRoot, {
+  Item: BreadcrumbItem
+});
+
+export { ComposedBreadcrumb };

package/dist/shared/chunk-fjykbv0v.js

@@ -0,0 +1,214 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/scroll-area/scroll-area-composed.tsx
+import { computed } from "@vertz/ui";
+import { __append, __attr, __child, __conditional, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { ref } from "@vertz/ui";
+function ComposedScrollAreaRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let syncThumbY = function() {
+      const vp = viewportRef.current;
+      const thumb = thumbYRef.current;
+      if (!vp || !thumb)
+        return;
+      const { scrollTop, scrollHeight, clientHeight } = vp;
+      if (scrollHeight <= clientHeight) {
+        thumb.style.height = "0";
+        return;
+      }
+      const ratio = clientHeight / scrollHeight;
+      thumb.style.height = `${ratio * 100}%`;
+      const scrollRatio = scrollTop / (scrollHeight - clientHeight);
+      thumb.style.transform = `translateY(${scrollRatio * (1 / ratio - 1) * 100}%)`;
+    }, syncThumbX = function() {
+      const vp = viewportRef.current;
+      const thumb = thumbXRef.current;
+      if (!vp || !thumb)
+        return;
+      const { scrollLeft, scrollWidth, clientWidth } = vp;
+      if (scrollWidth <= clientWidth) {
+        thumb.style.width = "0";
+        return;
+      }
+      const ratio = clientWidth / scrollWidth;
+      thumb.style.width = `${ratio * 100}%`;
+      const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
+      thumb.style.transform = `translateX(${scrollRatio * (1 / ratio - 1) * 100}%)`;
+    }, handleViewportScroll = function() {
+      if ((__props.orientation ?? "vertical") === "vertical" || (__props.orientation ?? "vertical") === "both")
+        syncThumbY();
+      if ((__props.orientation ?? "vertical") === "horizontal" || (__props.orientation ?? "vertical") === "both")
+        syncThumbX();
+    }, handleThumbYDown = function(e) {
+      const vp = viewportRef.current;
+      const thumb = thumbYRef.current;
+      if (!vp || !thumb)
+        return;
+      isDraggingY = true;
+      startY = e.clientY;
+      startScrollTop = vp.scrollTop;
+      thumb.setPointerCapture(e.pointerId);
+      e.preventDefault();
+    }, handleThumbYMove = function(e) {
+      if (!isDraggingY)
+        return;
+      const vp = viewportRef.current;
+      const scrollbar = scrollbarYRef.current;
+      if (!vp || !scrollbar)
+        return;
+      const delta = e.clientY - startY;
+      const scrollbarHeight = scrollbar.clientHeight;
+      const scrollRange = vp.scrollHeight - vp.clientHeight;
+      if (scrollbarHeight > 0) {
+        vp.scrollTop = startScrollTop + delta / scrollbarHeight * scrollRange;
+      }
+    }, handleThumbYUp = function(e) {
+      isDraggingY = false;
+      const thumb = thumbYRef.current;
+      if (thumb)
+        thumb.releasePointerCapture(e.pointerId);
+    }, handleThumbXDown = function(e) {
+      const vp = viewportRef.current;
+      const thumb = thumbXRef.current;
+      if (!vp || !thumb)
+        return;
+      isDraggingX = true;
+      startX = e.clientX;
+      startScrollLeft = vp.scrollLeft;
+      thumb.setPointerCapture(e.pointerId);
+      e.preventDefault();
+    }, handleThumbXMove = function(e) {
+      if (!isDraggingX)
+        return;
+      const vp = viewportRef.current;
+      const scrollbar = scrollbarXRef.current;
+      if (!vp || !scrollbar)
+        return;
+      const delta = e.clientX - startX;
+      const scrollbarWidth = scrollbar.clientWidth;
+      const scrollRange = vp.scrollWidth - vp.clientWidth;
+      if (scrollbarWidth > 0) {
+        vp.scrollLeft = startScrollLeft + delta / scrollbarWidth * scrollRange;
+      }
+    }, handleThumbXUp = function(e) {
+      isDraggingX = false;
+      const thumb = thumbXRef.current;
+      if (thumb)
+        thumb.releasePointerCapture(e.pointerId);
+    };
+    const viewportRef = ref();
+    const scrollbarYRef = ref();
+    const scrollbarXRef = ref();
+    const thumbYRef = ref();
+    const thumbXRef = ref();
+    let isDraggingY = false;
+    let startY = 0;
+    let startScrollTop = 0;
+    let isDraggingX = false;
+    let startX = 0;
+    let startScrollLeft = 0;
+    const showY = computed(() => (__props.orientation ?? "vertical") === "vertical" || (__props.orientation ?? "vertical") === "both");
+    const showX = computed(() => (__props.orientation ?? "vertical") === "horizontal" || (__props.orientation ?? "vertical") === "both");
+    queueMicrotask(() => handleViewportScroll());
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-v-id", "ComposedScrollAreaRoot");
+      __el0.setAttribute("data-part", "scroll-area");
+      {
+        const __v = { position: "relative", overflow: "hidden" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        viewportRef.current = __el1;
+        __el1.setAttribute("data-part", "scroll-area-viewport");
+        {
+          const __v = { overflow: "scroll", scrollbarWidth: "none" };
+          if (__v != null && __v !== false)
+            __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        __attr(__el1, "class", () => cn(__props.classes?.viewport));
+        __on(__el1, "scroll", handleViewportScroll);
+        __enterChildren(__el1);
+        __append(__el1, (() => {
+          const __el2 = __element("div");
+          __el2.setAttribute("data-part", "scroll-area-content");
+          __enterChildren(__el2);
+          __append(__el2, __child(() => __props.children));
+          __exitChildren();
+          return __el2;
+        })());
+        __exitChildren();
+        return __el1;
+      })());
+      __append(__el0, __conditional(() => showY.value, () => (() => {
+        const __el3 = __element("div");
+        scrollbarYRef.current = __el3;
+        __el3.setAttribute("data-part", "scroll-area-scrollbar");
+        __el3.setAttribute("aria-hidden", "true");
+        __el3.setAttribute("data-orientation", "vertical");
+        {
+          const __v = { position: "absolute", top: "0", right: "0", bottom: "0" };
+          if (__v != null && __v !== false)
+            __el3.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        __attr(__el3, "class", () => cn(__props.classes?.scrollbar));
+        __enterChildren(__el3);
+        __append(__el3, (() => {
+          const __el4 = __element("div");
+          thumbYRef.current = __el4;
+          __el4.setAttribute("data-part", "scroll-area-thumb");
+          __attr(__el4, "class", () => cn(__props.classes?.thumb));
+          __on(__el4, "pointerdown", handleThumbYDown);
+          __on(__el4, "pointermove", handleThumbYMove);
+          __on(__el4, "pointerup", handleThumbYUp);
+          return __el4;
+        })());
+        __exitChildren();
+        return __el3;
+      })(), () => null));
+      __append(__el0, __conditional(() => showX.value, () => (() => {
+        const __el5 = __element("div");
+        scrollbarXRef.current = __el5;
+        __el5.setAttribute("data-part", "scroll-area-scrollbar");
+        __el5.setAttribute("aria-hidden", "true");
+        __el5.setAttribute("data-orientation", "horizontal");
+        {
+          const __v = { position: "absolute", bottom: "0", left: "0", right: "0" };
+          if (__v != null && __v !== false)
+            __el5.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        __attr(__el5, "class", () => cn(__props.classes?.scrollbar));
+        __enterChildren(__el5);
+        __append(__el5, (() => {
+          const __el6 = __element("div");
+          thumbXRef.current = __el6;
+          __el6.setAttribute("data-part", "scroll-area-thumb");
+          __attr(__el6, "class", () => cn(__props.classes?.thumb));
+          __on(__el6, "pointerdown", handleThumbXDown);
+          __on(__el6, "pointermove", handleThumbXMove);
+          __on(__el6, "pointerup", handleThumbXUp);
+          return __el6;
+        })());
+        __exitChildren();
+        return __el5;
+      })(), () => null));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedScrollArea = ComposedScrollAreaRoot;
+
+export { ComposedScrollArea };

package/dist/shared/chunk-ghkw5bjq.js

@@ -0,0 +1,55 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/progress/progress-composed.tsx
+import { computed } from "@vertz/ui";
+import { __append, __attr, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+function dataStateFor(pct) {
+  if (pct >= 100)
+    return "complete";
+  if (pct > 0)
+    return "loading";
+  return "idle";
+}
+function ComposedProgressRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const pct = computed(() => ((__props.defaultValue ?? 0) - (__props.min ?? 0)) / ((__props.max ?? 100) - (__props.min ?? 0)) * 100);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "progressbar");
+      {
+        const __v = uniqueId("progress");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "aria-valuenow", () => String(__props.defaultValue ?? 0));
+      __attr(__el0, "aria-valuemin", () => String(__props.min ?? 0));
+      __attr(__el0, "aria-valuemax", () => String(__props.max ?? 100));
+      __attr(__el0, "data-state", () => dataStateFor(pct.value));
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        __el1.setAttribute("data-part", "indicator");
+        __attr(__el1, "style", () => ({ width: `${pct.value}%` }));
+        __attr(__el1, "class", () => cn(__props.classes?.indicator));
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedProgress = ComposedProgressRoot;
+
+export { ComposedProgress };

package/dist/shared/chunk-gqb1n1hj.js

@@ -0,0 +1,60 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/toggle/toggle-composed.tsx
+import { signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+function ComposedToggleRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (__props.disabled ?? false)
+        return;
+      pressed.value = !pressed.value;
+      __props.onPressedChange?.(pressed.value);
+    };
+    const pressed = signal(__props.defaultPressed ?? false, "pressed");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("data-v-id", "ComposedToggleRoot");
+      __el0.setAttribute("type", "button");
+      {
+        const __v = uniqueId("toggle");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "aria-pressed", () => pressed.value ? "true" : "false");
+      __attr(__el0, "data-state", () => pressed.value ? "on" : "off");
+      __attr(__el0, "disabled", () => __props.disabled ?? false);
+      __attr(__el0, "aria-disabled", () => __props.disabled ?? false ? "true" : undefined);
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __on(__el0, "click", toggle);
+      __on(__el0, "keydown", (e) => {
+        if (isKey(e, Keys.Space)) {
+          e.preventDefault();
+          toggle();
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedToggle = ComposedToggleRoot;
+
+export { ComposedToggle };