@vertz/ui-primitives 0.2.41 → 0.2.43

package/dist/shared/{chunk-5964gmv0.js → chunk-csjtyvam.js}

@@ -3,8 +3,7 @@ import {
 } from "./chunk-q7xbcj9q.js";
 
 // src/list/list-composed.tsx
-import { computed } from "@vertz/ui";
-import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
 import { createContext, ListAnimationContext, onMount, ref, useContext } from "@vertz/ui";
 var ListContext = createContext(undefined, "@vertz/ui-primitives::ListContext");
 function useListContext(subComponent) {
@@ -14,54 +13,22 @@ function useListContext(subComponent) {
   }
   return ctx;
 }
-function ListItem(__props) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const ctx = useListContext("Item");
-    const __mfResult0 = (() => {
-      const __el0 = __element("li");
-      __attr(__el0, "class", () => cn(ctx.classes?.item, __props.className ?? __props.class));
-      {
-        const __v = ctx.sortable ? "" : undefined;
-        if (__v != null && __v !== false)
-          __el0.setAttribute("data-sortable-item", __v === true ? "" : __v);
-      }
-      __enterChildren(__el0);
-      __append(__el0, __child(() => __props.children));
-      __exitChildren();
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
+function ListItem({ children, className, class: classProp }) {
+  const ctx = useListContext("Item");
+  return jsxDEV_7x81h0kn("li", {
+    class: cn(ctx.classes?.item, className ?? classProp),
+    "data-sortable-item": ctx.sortable ? "" : undefined,
+    children
+  }, undefined, false, undefined, this);
 }
-function ListDragHandle(__props) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const ctx = useListContext("DragHandle");
-    const __mfResult0 = (() => {
-      const __el0 = __element("div");
-      __el0.setAttribute("data-list-drag-handle", "");
-      {
-        const __v = ctx.sortable ? "" : undefined;
-        if (__v != null && __v !== false)
-          __el0.setAttribute("data-sortable", __v === true ? "" : __v);
-      }
-      __attr(__el0, "class", () => cn(ctx.classes?.dragHandle, __props.className ?? __props.class));
-      __enterChildren(__el0);
-      __append(__el0, __child(() => __props.children));
-      __exitChildren();
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
+function ListDragHandle({ children, className, class: classProp }) {
+  const ctx = useListContext("DragHandle");
+  return jsxDEV_7x81h0kn("div", {
+    "data-list-drag-handle": "",
+    "data-sortable": ctx.sortable ? "" : undefined,
+    class: cn(ctx.classes?.dragHandle, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
 }
 var DEFAULT_DURATION = 200;
 var DEFAULT_EASING = "ease-out";
@@ -155,8 +122,17 @@ function createAnimationHooks(animate) {
           el.style.paddingTop = "0";
           el.style.paddingBottom = "0";
           el.style.opacity = "0";
-          el.addEventListener("transitionend", () => done(), { once: true });
-          setTimeout(() => done(), duration + 50);
+          let exitDone = false;
+          let safetyTimer;
+          const safeDone = () => {
+            if (exitDone)
+              return;
+            exitDone = true;
+            clearTimeout(safetyTimer);
+            done();
+          };
+          el.addEventListener("transitionend", safeDone, { once: true });
+          safetyTimer = setTimeout(safeDone, duration + 50);
         } else {
           done();
         }
@@ -362,44 +338,42 @@ function setupDragSort(ulEl, getSortable, getOnReorder, getAnimate) {
     document.addEventListener("pointerup", onUp);
   });
 }
-function ComposedListRoot(__props) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const ctx = {
-      classes: __props.classes,
-      animate: __props.animate ?? false,
-      sortable: __props.sortable ?? false,
-      onReorder: __props.onReorder
-    };
-    const animHooks = computed(() => __props.animate ?? false ? createAnimationHooks(__props.animate ?? false) : undefined);
-    const ulRef = ref();
-    if (__props.sortable ?? false) {
-      onMount(() => {
-        const ul = ulRef.current;
-        if (ul) {
-          setupDragSort(ul, () => __props.sortable ?? false, () => __props.onReorder, () => __props.animate ?? false);
-        }
-      });
-    }
-    const __mfResult0 = ListContext.Provider({ get value() {
-      return ctx;
-    }, children: () => ListAnimationContext.Provider({ get value() {
-      return animHooks.value;
-    }, children: () => (() => {
-      const __el0 = __element("ul");
-      ulRef.current = __el0;
-      __attr(__el0, "class", () => cn(__props.classes?.root, __props.className ?? __props.class));
-      __enterChildren(__el0);
-      __append(__el0, __child(() => __props.children));
-      __exitChildren();
-      return __el0;
-    })() }) });
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
+function ComposedListRoot({
+  children,
+  classes,
+  className,
+  class: classProp,
+  animate = false,
+  sortable = false,
+  onReorder
+}) {
+  const ctx = {
+    classes,
+    animate,
+    sortable,
+    onReorder
+  };
+  const animHooks = animate ? createAnimationHooks(animate) : undefined;
+  const ulRef = ref();
+  if (sortable) {
+    onMount(() => {
+      const ul = ulRef.current;
+      if (ul) {
+        setupDragSort(ul, () => sortable, () => onReorder, () => animate);
+      }
+    });
   }
+  return jsxDEV_7x81h0kn(ListContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn(ListAnimationContext.Provider, {
+      value: animHooks,
+      children: jsxDEV_7x81h0kn("ul", {
+        ref: ulRef,
+        class: cn(classes?.root, className ?? classProp),
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 }
 function reorder(arr, from, to) {
   const result = [...arr];

package/dist/shared/chunk-d6rtejz3.js

@@ -0,0 +1,128 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+
+// src/toggle-group/toggle-group-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var ToggleGroupContext = createContext(undefined, "@vertz/ui-primitives::ToggleGroupContext");
+function useToggleGroupContext(componentName) {
+  const ctx = useContext(ToggleGroupContext);
+  if (!ctx) {
+    throw new Error(`<ToggleGroup.${componentName}> must be used inside <ToggleGroup>. ` + "Ensure it is a direct or nested child of the ToggleGroup root component.");
+  }
+  return ctx;
+}
+function ToggleGroupItem({ value, children }) {
+  const ctx = useToggleGroupContext("Item");
+  const isOn = ctx.selectedValues.includes(value);
+  const isFirst = ctx.claimFirstItem();
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "data-togglegroup-item": "",
+    "data-value": value,
+    "aria-pressed": isOn ? "true" : "false",
+    "data-state": isOn ? "on" : "off",
+    disabled: ctx.disabled,
+    "aria-disabled": ctx.disabled ? "true" : undefined,
+    tabindex: isFirst ? "0" : "-1",
+    class: cn(ctx.classes?.item),
+    onClick: () => ctx.toggle(value),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedToggleGroupRoot({
+  children,
+  classes,
+  type = "single",
+  defaultValue = [],
+  orientation = "horizontal",
+  disabled = false,
+  onValueChange
+}) {
+  let selectedValues = [...defaultValue];
+  function toggle(itemValue) {
+    if (disabled)
+      return;
+    const current = [...selectedValues];
+    const idx = current.indexOf(itemValue);
+    if (type === "single") {
+      if (idx >= 0) {
+        current.length = 0;
+      } else {
+        current.length = 0;
+        current.push(itemValue);
+      }
+    } else {
+      if (idx >= 0) {
+        current.splice(idx, 1);
+      } else {
+        current.push(itemValue);
+      }
+    }
+    selectedValues = current;
+    onValueChange?.(current);
+  }
+  const _state = { firstItemClaimed: false };
+  const ctx = {
+    selectedValues,
+    classes,
+    disabled,
+    toggle,
+    claimFirstItem: () => {
+      if (_state.firstItemClaimed)
+        return false;
+      _state.firstItemClaimed = true;
+      return true;
+    }
+  };
+  return jsxDEV_7x81h0kn(ToggleGroupContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("div", {
+      role: "group",
+      id: uniqueId("toggle-group"),
+      "data-orientation": orientation,
+      "data-togglegroup-root": "",
+      class: cn(classes?.root),
+      onKeydown: (event) => {
+        if (!isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
+          return;
+        }
+        event.preventDefault();
+        const root = event.currentTarget;
+        const items = [...root.querySelectorAll("[data-togglegroup-item]")];
+        const currentIdx = items.indexOf(document.activeElement);
+        if (currentIdx < 0)
+          return;
+        const len = items.length;
+        let nextIdx;
+        if (isKey(event, Keys.ArrowRight, Keys.ArrowDown)) {
+          nextIdx = (currentIdx + 1) % len;
+        } else if (isKey(event, Keys.ArrowLeft, Keys.ArrowUp)) {
+          nextIdx = (currentIdx - 1 + len) % len;
+        } else if (isKey(event, Keys.Home)) {
+          nextIdx = 0;
+        } else if (isKey(event, Keys.End)) {
+          nextIdx = len - 1;
+        } else {
+          return;
+        }
+        items.forEach((el, j) => el.setAttribute("tabindex", j === nextIdx ? "0" : "-1"));
+        items[nextIdx]?.focus();
+      },
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedToggleGroup = Object.assign(ComposedToggleGroupRoot, {
+  Item: ToggleGroupItem
+});
+
+export { ComposedToggleGroup };

package/dist/shared/chunk-dvaf0bmq.js

@@ -0,0 +1,140 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setValueRange
+} from "./chunk-vevfhpc9.js";
+
+// src/slider/slider-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { ref } from "@vertz/ui";
+function ComposedSliderRoot({
+  classes,
+  defaultValue = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  onValueChange
+}) {
+  let currentValue = defaultValue;
+  const thumbRef = ref();
+  const fillRef = ref();
+  const trackRef = ref();
+  function clamp(val) {
+    return Math.min(max, Math.max(min, val));
+  }
+  function updatePosition(pct) {
+    const thumb = thumbRef.current;
+    const fill = fillRef.current;
+    if (thumb)
+      thumb.style.left = `${pct}%`;
+    if (fill)
+      fill.style.width = `${pct}%`;
+  }
+  function setValue(val) {
+    if (disabled)
+      return;
+    const clamped = clamp(val);
+    currentValue = clamped;
+    const thumb = thumbRef.current;
+    if (thumb)
+      setValueRange(thumb, clamped, min, max);
+    const pct = (clamped - min) / (max - min) * 100;
+    updatePosition(pct);
+    onValueChange?.(clamped);
+  }
+  function valueFromPointer(event) {
+    const track = trackRef.current;
+    if (!track)
+      return min;
+    const rect = track.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+    const raw = min + pct * (max - min);
+    return Math.round(raw / step) * step;
+  }
+  const initialPct = (defaultValue - min) / (max - min) * 100;
+  return jsxDEV_7x81h0kn("div", {
+    id: uniqueId("slider"),
+    "data-state": disabled ? "disabled" : "active",
+    class: cn(classes?.root),
+    onPointerdown: (event) => {
+      if (disabled)
+        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);
+    },
+    children: jsxDEV_7x81h0kn("div", {
+      ref: trackRef,
+      "data-part": "track",
+      style: { position: "relative" },
+      class: cn(classes?.track),
+      children: [
+        jsxDEV_7x81h0kn("div", {
+          ref: fillRef,
+          "data-part": "fill",
+          style: {
+            position: "absolute",
+            height: "100%",
+            borderRadius: "inherit",
+            width: `${initialPct}%`
+          },
+          class: cn(classes?.range)
+        }, undefined, false, undefined, this),
+        jsxDEV_7x81h0kn("div", {
+          ref: thumbRef,
+          role: "slider",
+          tabindex: disabled ? "-1" : "0",
+          "data-part": "thumb",
+          "aria-valuenow": String(defaultValue),
+          "aria-valuemin": String(min),
+          "aria-valuemax": String(max),
+          "aria-disabled": disabled ? "true" : undefined,
+          style: {
+            position: "absolute",
+            transform: "translate(-50%, -50%)",
+            left: `${initialPct}%`
+          },
+          class: cn(classes?.thumb),
+          onKeydown: (event) => {
+            if (disabled)
+              return;
+            if (isKey(event, Keys.ArrowRight, Keys.ArrowUp)) {
+              event.preventDefault();
+              setValue(currentValue + step);
+            } else if (isKey(event, Keys.ArrowLeft, Keys.ArrowDown)) {
+              event.preventDefault();
+              setValue(currentValue - step);
+            } else if (isKey(event, Keys.Home)) {
+              event.preventDefault();
+              setValue(min);
+            } else if (isKey(event, Keys.End)) {
+              event.preventDefault();
+              setValue(max);
+            }
+          }
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedSlider = ComposedSliderRoot;
+
+export { ComposedSlider };

package/dist/shared/chunk-dwkv9ya6.js

@@ -0,0 +1,22 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/label/label-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ComposedLabelRoot({
+  classes,
+  className,
+  class: classProp,
+  for: htmlFor,
+  children
+}) {
+  return jsxDEV_7x81h0kn("label", {
+    class: cn(classes?.base, className ?? classProp),
+    for: htmlFor,
+    children
+  }, undefined, false, undefined, this);
+}
+var ComposedLabel = ComposedLabelRoot;
+
+export { ComposedLabel };

package/dist/shared/chunk-e0ckxrjg.js

@@ -0,0 +1,41 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/progress/progress-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function dataStateFor(pct) {
+  if (pct >= 100)
+    return "complete";
+  if (pct > 0)
+    return "loading";
+  return "idle";
+}
+function ComposedProgressRoot({
+  classes,
+  defaultValue = 0,
+  min = 0,
+  max = 100
+}) {
+  const pct = (defaultValue - min) / (max - min) * 100;
+  return jsxDEV_7x81h0kn("div", {
+    role: "progressbar",
+    id: uniqueId("progress"),
+    "aria-valuenow": String(defaultValue),
+    "aria-valuemin": String(min),
+    "aria-valuemax": String(max),
+    "data-state": dataStateFor(pct),
+    class: cn(classes?.root),
+    children: jsxDEV_7x81h0kn("div", {
+      "data-part": "indicator",
+      style: { width: `${pct}%` },
+      class: cn(classes?.indicator)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedProgress = ComposedProgressRoot;
+
+export { ComposedProgress };