@vertz/ui-primitives 0.2.22 → 0.2.24

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 };

package/dist/shared/chunk-hdvdfd1c.js

@@ -0,0 +1,96 @@
+import {
+  setDataState
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/progress/progress.tsx
+import { __append, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { ref, signal } from "@vertz/ui";
+function dataStateFor(pct) {
+  if (pct >= 100)
+    return "complete";
+  if (pct > 0)
+    return "loading";
+  return "idle";
+}
+function ProgressBar(defaultValue, min, max, initialPct, indicatorRef) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    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);
+      }
+      {
+        const __v = String(defaultValue);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-valuenow", __v === true ? "" : __v);
+      }
+      {
+        const __v = String(min);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-valuemin", __v === true ? "" : __v);
+      }
+      {
+        const __v = String(max);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-valuemax", __v === true ? "" : __v);
+      }
+      {
+        const __v = dataStateFor(initialPct);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        indicatorRef.current = __el1;
+        __el1.setAttribute("data-part", "indicator");
+        {
+          const __v = { width: `${initialPct}%` };
+          if (__v != null && __v !== false)
+            __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ProgressRoot(options = {}) {
+  const { defaultValue = 0, min = 0, max = 100, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const indicatorRef = ref();
+  const initialPct = (defaultValue - min) / (max - min) * 100;
+  const root = ProgressBar(defaultValue, min, max, initialPct, indicatorRef);
+  const indicator = indicatorRef.current;
+  applyAttrs(root, attrs);
+  function setValue(val) {
+    const clamped = Math.min(max, Math.max(min, val));
+    state.value.value = clamped;
+    root.setAttribute("aria-valuenow", String(clamped));
+    const pct = (clamped - min) / (max - min) * 100;
+    indicator.style.width = `${pct}%`;
+    setDataState(root, dataStateFor(pct));
+  }
+  return { root, indicator, state, setValue };
+}
+var Progress = {
+  Root: ProgressRoot
+};
+
+export { Progress };

package/dist/shared/chunk-hfjtkytb.js

@@ -0,0 +1,310 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/alert-dialog/alert-dialog-composed.tsx
+import { 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 AlertDialogContext = createContext(undefined, "@vertz/ui-primitives::AlertDialogContext");
+function useAlertDialogContext(componentName) {
+  const ctx = useContext(AlertDialogContext);
+  if (!ctx) {
+    throw new Error(`<AlertDialog.${componentName}> must be used inside <AlertDialog>. ` + "Ensure it is a direct or nested child of the AlertDialog root component.");
+  }
+  return ctx;
+}
+function AlertDialogTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useAlertDialogContext("Trigger");
+    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-alertdialog-trigger", "");
+      __el0.setAttribute("data-state", "closed");
+      __on(__el0, "click", () => {
+        if (!ctx.isOpen)
+          ctx.open();
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AlertDialogContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useAlertDialogContext("Content");
+    const __mfResult0 = (() => {
+      const __el0 = __element("dialog");
+      ctx.dialogRef.current = __el0;
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("role", "alertdialog");
+      {
+        const __v = ctx.titleId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-labelledby", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.descriptionId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-describedby", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-state", "closed");
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __on(__el0, "cancel", (e) => {
+        e.preventDefault();
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AlertDialogTitle(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useAlertDialogContext("Title");
+    const __mfResult0 = (() => {
+      const __el0 = __element("h2");
+      {
+        const __v = ctx.titleId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-slot", "alertdialog-title");
+      __attr(__el0, "class", () => cn(ctx.classes?.title, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AlertDialogDescription(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useAlertDialogContext("Description");
+    const __mfResult0 = (() => {
+      const __el0 = __element("p");
+      {
+        const __v = ctx.descriptionId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-slot", "alertdialog-description");
+      __attr(__el0, "class", () => cn(ctx.classes?.description, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AlertDialogHeader(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useAlertDialogContext("Header");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(classes?.header, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AlertDialogFooter(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useAlertDialogContext("Footer");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(classes?.footer, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AlertDialogCancel(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useAlertDialogContext("Cancel");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("data-slot", "alertdialog-cancel");
+      __attr(__el0, "class", () => cn(ctx.classes?.cancel, __props.className ?? __props.class));
+      __on(__el0, "click", () => {
+        __props.onClick?.();
+        ctx.close();
+      });
+      __attr(__el0, "disabled", () => __props.disabled);
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AlertDialogAction(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useAlertDialogContext("Action");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("data-slot", "alertdialog-action");
+      __attr(__el0, "class", () => cn(ctx.classes?.action, __props.className ?? __props.class));
+      __on(__el0, "click", () => {
+        __props.onClick?.();
+        ctx.onAction?.();
+        ctx.close();
+      });
+      __attr(__el0, "disabled", () => __props.disabled);
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedAlertDialogRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let showDialog = function() {
+      const el = dialogRef.current;
+      if (!el || el.open)
+        return;
+      el.setAttribute("data-state", "open");
+      el.showModal();
+    }, hideDialog = function() {
+      const el = dialogRef.current;
+      if (!el || !el.open)
+        return;
+      el.setAttribute("data-state", "closed");
+      el.offsetHeight;
+      const onEnd = () => {
+        el.removeEventListener("animationend", onEnd);
+        if (el.open)
+          el.close();
+      };
+      el.addEventListener("animationend", onEnd);
+      setTimeout(onEnd, 200);
+    }, open = function() {
+      isOpen.value = true;
+      showDialog();
+      __props.onOpenChange?.(true);
+    }, close = function() {
+      hideDialog();
+      isOpen.value = false;
+      __props.onOpenChange?.(false);
+    };
+    const ids = linkedIds("alertdialog");
+    const titleId = `${ids.contentId}-title`;
+    const descriptionId = `${ids.contentId}-description`;
+    const dialogRef = ref();
+    const isOpen = signal(false, "isOpen");
+    const ctx = {
+      isOpen,
+      titleId,
+      descriptionId,
+      contentId: ids.contentId,
+      dialogRef,
+      classes: __props.classes,
+      onAction: __props.onAction,
+      open,
+      close
+    };
+    const __mfResult0 = AlertDialogContext.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-alertdialog-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedAlertDialog = Object.assign(ComposedAlertDialogRoot, {
+  Trigger: AlertDialogTrigger,
+  Content: AlertDialogContent,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Header: AlertDialogHeader,
+  Footer: AlertDialogFooter,
+  Cancel: AlertDialogCancel,
+  Action: AlertDialogAction
+});
+
+export { ComposedAlertDialog };

package/dist/shared/chunk-hpvjfj0j.js

@@ -0,0 +1,31 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/button/button-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame, __spread } from "@vertz/ui/internals";
+function ComposedButtonRoot(__props) {
+  const { classes: __$drop_0, className: __$drop_1, class: __$drop_2, children: __$drop_3, disabled: __$drop_4, type: __$drop_5, ...rest } = __props;
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __attr(__el0, "type", () => __props.type ?? "button");
+      __attr(__el0, "class", () => cn(__props.classes?.base, __props.className ?? __props.class));
+      __attr(__el0, "disabled", () => __props.disabled || undefined);
+      __spread(__el0, rest);
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedButton = ComposedButtonRoot;
+
+export { ComposedButton };

package/dist/shared/chunk-hxmxvp56.js

@@ -0,0 +1,67 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/switch/switch-composed.tsx
+import { signal } from "@vertz/ui";
+import { __append, __attr, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+function ComposedSwitchRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (__props.disabled ?? false)
+        return;
+      checked.value = !checked.value;
+      __props.onCheckedChange?.(checked.value);
+    };
+    const checked = signal(__props.defaultChecked ?? false, "checked");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("data-v-id", "ComposedSwitchRoot");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("role", "switch");
+      {
+        const __v = uniqueId("switch");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "aria-checked", () => checked.value ? "true" : "false");
+      __attr(__el0, "data-state", () => checked.value ? "checked" : "unchecked");
+      __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, (() => {
+        const __el1 = __element("span");
+        __el1.setAttribute("data-part", "thumb");
+        __attr(__el1, "data-state", () => checked.value ? "checked" : "unchecked");
+        __attr(__el1, "class", () => cn(__props.classes?.thumb));
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedSwitch = ComposedSwitchRoot;
+
+export { ComposedSwitch };