@vertz/ui-primitives 0.2.23 → 0.2.24

package/dist/shared/chunk-rrt62bp0.js

@@ -0,0 +1,353 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition,
+  resolveLayoutElement
+} from "./chunk-vef3sepw.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/dropdown-menu/dropdown-menu-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 DropdownMenuContext = createContext(undefined, "@vertz/ui-primitives::DropdownMenuContext");
+function useDropdownMenuContext(componentName) {
+  const ctx = useContext(DropdownMenuContext);
+  if (!ctx) {
+    throw new Error(`<DropdownMenu.${componentName}> must be used inside <DropdownMenu>. ` + "Ensure it is a direct or nested child of the DropdownMenu root component.");
+  }
+  return ctx;
+}
+function MenuTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useDropdownMenuContext("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-dropdownmenu-trigger", "");
+      __el0.setAttribute("aria-haspopup", "menu");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-expanded", "false");
+      __el0.setAttribute("data-state", "closed");
+      __on(__el0, "click", () => ctx.toggle());
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          if (!ctx.isOpen())
+            ctx.open(true);
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenuContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useDropdownMenuContext("Content");
+    const instanceIndex = ctx._contentCount.value++;
+    if (instanceIndex > 0) {
+      console.warn("Duplicate <DropdownMenu.Content> detected – only the first is used");
+    }
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "menu");
+      __el0.setAttribute("tabindex", "-1");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-dropdownmenu-content", "");
+      __el0.setAttribute("aria-hidden", "true");
+      __el0.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "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));
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          ctx.close();
+          return;
+        }
+        const el = event.currentTarget ?? event.target;
+        const items = [...el.querySelectorAll('[role="menuitem"]')];
+        const focusedIdx = items.indexOf(document.activeElement);
+        if (isKey(event, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          const active = items[focusedIdx];
+          if (active) {
+            const val = active.getAttribute("data-value");
+            if (val !== null) {
+              ctx.onSelect?.(val);
+              ctx.close();
+            }
+          }
+          return;
+        }
+        handleListNavigation(event, items, { orientation: "vertical" });
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+          const char = event.key.toLowerCase();
+          const match = items.find((item) => item.textContent?.toLowerCase().startsWith(char));
+          if (match)
+            match.focus();
+        }
+      });
+      __on(__el0, "click", (event) => {
+        const target = event.target.closest('[role="menuitem"]');
+        if (target)
+          ctx.close();
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenuItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useDropdownMenuContext("Item");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "menuitem");
+      __attr(__el0, "data-value", () => __props.value);
+      __el0.setAttribute("tabindex", "-1");
+      __attr(__el0, "class", () => cn(ctx.classes?.item, __props.className ?? __props.class));
+      __on(__el0, "click", () => {
+        ctx.onSelect?.(__props.value);
+        ctx.close();
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenuGroup(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useDropdownMenuContext("Group");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "group");
+      __attr(__el0, "aria-label", () => __props.label);
+      __attr(__el0, "class", () => cn(ctx.classes?.group, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenuLabel(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useDropdownMenuContext("Label");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "none");
+      __attr(__el0, "class", () => cn(classes?.label, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenuSeparator(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useDropdownMenuContext("Separator");
+    const __mfResult0 = (() => {
+      const __el0 = __element("hr");
+      __el0.setAttribute("role", "separator");
+      __attr(__el0, "class", () => cn(classes?.separator, __props.className ?? __props.class));
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedDropdownMenuRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let getContentEl = function() {
+      return contentRef.current ?? null;
+    }, getItems = function() {
+      const content = getContentEl();
+      if (!content)
+        return [];
+      return [...content.querySelectorAll('[role="menuitem"]')];
+    }, getTriggerEl = function() {
+      const content = getContentEl();
+      const triggerSpan = content?.parentElement?.querySelector("[data-dropdownmenu-trigger]");
+      if (!triggerSpan)
+        return null;
+      return resolveLayoutElement(triggerSpan);
+    }, updateActiveItem = function(items, index) {
+      items.forEach((item, i) => {
+        item.setAttribute("tabindex", i === index ? "0" : "-1");
+      });
+    }, syncContentAttrs = function() {
+      const contentEl = getContentEl();
+      if (!contentEl)
+        return;
+      const open2 = isOpen.value;
+      contentEl.style.display = open2 ? "" : "none";
+      contentEl.setAttribute("aria-hidden", open2 ? "false" : "true");
+      contentEl.setAttribute("data-state", open2 ? "open" : "closed");
+      const triggerEl = getTriggerEl();
+      if (triggerEl) {
+        triggerEl.setAttribute("aria-expanded", open2 ? "true" : "false");
+        triggerEl.setAttribute("data-state", open2 ? "open" : "closed");
+      }
+    }, open = function(activateFirst = false) {
+      isOpen.value = true;
+      state.activeIndex = -1;
+      syncContentAttrs();
+      __props.onOpenChange?.(true);
+      const contentEl = getContentEl();
+      const triggerEl = getTriggerEl();
+      if (!contentEl)
+        return;
+      {
+        const floatingOpts = __props.positioning ?? { placement: "bottom-start", offset: 4 };
+        const refEl = floatingOpts.referenceElement ?? triggerEl ?? contentEl;
+        contentEl.style.position = "fixed";
+        const result = createFloatingPosition(refEl, contentEl, floatingOpts);
+        state.floatingCleanup = result.cleanup;
+        state.dismissCleanup = createDismiss({
+          onDismiss: close,
+          insideElements: [refEl, contentEl, ...triggerEl ? [triggerEl] : []],
+          escapeKey: false
+        });
+      }
+      const items = getItems();
+      if (activateFirst && items.length > 0) {
+        state.activeIndex = 0;
+        updateActiveItem(items, 0);
+        items[0]?.focus();
+      } else {
+        updateActiveItem(items, -1);
+        contentEl.focus();
+      }
+    }, close = function() {
+      isOpen.value = false;
+      syncContentAttrs();
+      state.floatingCleanup?.();
+      state.floatingCleanup = null;
+      state.dismissCleanup?.();
+      state.dismissCleanup = null;
+      __props.onOpenChange?.(false);
+      getTriggerEl()?.focus();
+    }, toggle = function() {
+      if (isOpen.value)
+        close();
+      else
+        open();
+    };
+    const ids = linkedIds("menu");
+    const contentRef = ref();
+    const isOpen = signal(false, "isOpen");
+    const state = { activeIndex: -1, floatingCleanup: null, dismissCleanup: null };
+    const ctx = {
+      isOpen: () => isOpen.value,
+      contentId: ids.contentId,
+      contentRef,
+      classes: __props.classes,
+      onSelect: __props.onSelect,
+      open,
+      close,
+      toggle,
+      _contentCount: { value: 0 }
+    };
+    const __mfResult0 = DropdownMenuContext.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-dropdownmenu-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedDropdownMenu = Object.assign(ComposedDropdownMenuRoot, {
+  Trigger: MenuTrigger,
+  Content: MenuContent,
+  Item: MenuItem,
+  Group: MenuGroup,
+  Label: MenuLabel,
+  Separator: MenuSeparator
+});
+
+export { ComposedDropdownMenu };

package/dist/shared/chunk-s24gkmna.js

@@ -0,0 +1,131 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/checkbox/checkbox-composed.tsx
+import { signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } 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 ComposedCheckboxRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (__props.disabled ?? false)
+        return;
+      checked.value = checked.value === "mixed" ? true : !checked.value;
+      __props.onCheckedChange?.(checked.value);
+    };
+    const checked = signal(__props.defaultChecked ?? false, "checked");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("data-v-id", "ComposedCheckboxRoot");
+      __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));
+      __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", "indicator");
+        __attr(__el1, "data-state", () => dataStateFor(checked.value));
+        __attr(__el1, "class", () => cn(__props.classes?.indicator));
+        {
+          const __v = { width: "100%", height: "100%", pointerEvents: "none" };
+          if (__v != null && __v !== false)
+            __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        __enterChildren(__el1);
+        __append(__el1, (() => {
+          const __el2 = __element("svg");
+          __el2.setAttribute("aria-hidden", "true");
+          __el2.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+          __el2.setAttribute("viewBox", "0 0 24 24");
+          __el2.setAttribute("fill", "none");
+          __el2.setAttribute("stroke", "currentColor");
+          __el2.setAttribute("stroke-width", "3");
+          __el2.setAttribute("stroke-linecap", "round");
+          __el2.setAttribute("stroke-linejoin", "round");
+          __el2.setAttribute("data-part", "indicator-icon");
+          __el2.setAttribute("data-icon", "check");
+          __el2.setAttribute("width", "100%");
+          __el2.setAttribute("height", "100%");
+          __enterChildren(__el2);
+          __append(__el2, (() => {
+            const __el3 = __element("path");
+            __el3.setAttribute("d", "M4 12 9 17 20 6");
+            return __el3;
+          })());
+          __exitChildren();
+          return __el2;
+        })());
+        __append(__el1, (() => {
+          const __el4 = __element("svg");
+          __el4.setAttribute("aria-hidden", "true");
+          __el4.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+          __el4.setAttribute("viewBox", "0 0 24 24");
+          __el4.setAttribute("fill", "none");
+          __el4.setAttribute("stroke", "currentColor");
+          __el4.setAttribute("stroke-width", "3");
+          __el4.setAttribute("stroke-linecap", "round");
+          __el4.setAttribute("stroke-linejoin", "round");
+          __el4.setAttribute("data-part", "indicator-icon");
+          __el4.setAttribute("data-icon", "minus");
+          __el4.setAttribute("width", "100%");
+          __el4.setAttribute("height", "100%");
+          __enterChildren(__el4);
+          __append(__el4, (() => {
+            const __el5 = __element("path");
+            __el5.setAttribute("d", "M5 12h14");
+            return __el5;
+          })());
+          __exitChildren();
+          return __el4;
+        })());
+        __exitChildren();
+        return __el1;
+      })());
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedCheckbox = ComposedCheckboxRoot;
+
+export { ComposedCheckbox };

package/dist/shared/chunk-s62e7jf4.js

@@ -0,0 +1,30 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/textarea/textarea-composed.tsx
+import { computed } from "@vertz/ui";
+import { __attr, __discardMountFrame, __element, __flushMountFrame, __pushMountFrame, __spread } from "@vertz/ui/internals";
+function ComposedTextareaRoot(__props) {
+  const { classes: __$drop_0, className: __$drop_1, class: __$drop_2, value: __$drop_3, ...props } = __props;
+  const __mfDepth = __pushMountFrame();
+  try {
+    const el = computed(() => (() => {
+      const __el0 = __element("textarea");
+      __attr(__el0, "class", () => cn(__props.classes?.base, __props.className ?? __props.class));
+      __spread(__el0, props);
+      return __el0;
+    })());
+    if (__props.value !== undefined)
+      el.value.value = __props.value;
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedTextarea = ComposedTextareaRoot;
+
+export { ComposedTextarea };

package/dist/shared/chunk-spng4yb9.js

@@ -0,0 +1,73 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/alert/alert-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var AlertContext = createContext(undefined, "@vertz/ui-primitives::AlertContext");
+function AlertTitle(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(AlertContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("h5");
+      __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 AlertDescription(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(AlertContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __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 ComposedAlertRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = AlertContext.Provider({ get value() {
+      return { classes: __props.classes };
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "alert");
+      __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;
+  }
+}
+var ComposedAlert = Object.assign(ComposedAlertRoot, {
+  Title: AlertTitle,
+  Description: AlertDescription
+});
+
+export { ComposedAlert };

package/dist/shared/chunk-v0b5pkcq.js

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