@vertz/ui-primitives 0.2.23 → 0.2.25

package/dist/shared/{chunk-7cb3z0s8.js → chunk-8evj43jn.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-a6wp8c32.js";
 import {
   createFloatingPosition
-} from "./chunk-0mcr52hc.js";
+} from "./chunk-vef3sepw.js";
 import {
   Keys,
   handleListNavigation,
@@ -85,7 +85,7 @@ function SelectRoot(options = {}) {
       dismissCleanup?.();
       dismissCleanup = null;
       trigger.focus();
-    }, createItem = function(value, label, parent) {
+    }, createItem = function(value, label) {
       const isSelectedItem = value === defaultValue;
       const item = (() => {
         const __el3 = __element("div");
@@ -116,7 +116,6 @@ function SelectRoot(options = {}) {
         triggerText.textContent = item.textContent ?? value;
       }
       items.push(item);
-      (parent ?? content).appendChild(item);
       return item;
     }, Item = function(value, label) {
       return createItem(value, label);
@@ -131,19 +130,17 @@ function SelectRoot(options = {}) {
         }
         return __el4;
       })();
-      content.appendChild(el);
       return {
         el,
-        Item: (value, itemLabel) => createItem(value, itemLabel, el)
+        Item: (value, itemLabel) => createItem(value, itemLabel)
       };
     }, Separator = function() {
-      const hr = (() => {
+      return (() => {
         const __el5 = __element("hr");
+        __el5.setAttribute("data-v-id", "SelectRoot");
         __el5.setAttribute("role", "separator");
         return __el5;
       })();
-      content.appendChild(hr);
-      return hr;
     };
     const { defaultValue = "", placeholder = "", onValueChange, positioning, ...attrs } = options;
     const ids = linkedIds("select");

package/dist/shared/chunk-8t0nm721.js

@@ -0,0 +1,152 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/card/card-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var CardContext = createContext(undefined, "@vertz/ui-primitives::CardContext");
+function CardHeader(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(ctx?.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 CardTitle(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("h3");
+      __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 CardDescription(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("p");
+      __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 CardContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __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 CardFooter(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(ctx?.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 CardAction(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(ctx?.classes?.action, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedCardRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = CardContext.Provider({ get value() {
+      return { classes: __props.classes };
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __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 ComposedCard = Object.assign(ComposedCardRoot, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Footer: CardFooter,
+  Action: CardAction
+});
+
+export { ComposedCard };

package/dist/shared/chunk-94twh4s4.js

@@ -0,0 +1,28 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/separator/separator-composed.tsx
+import { computed } from "@vertz/ui";
+import { __attr, __discardMountFrame, __element, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+function ComposedSeparatorRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const orientationClass = computed(() => (__props.orientation ?? "horizontal") === "vertical" ? __props.classes?.vertical : __props.classes?.horizontal);
+    const __mfResult0 = (() => {
+      const __el0 = __element("hr");
+      __attr(__el0, "class", () => cn(__props.classes?.base, orientationClass.value, __props.className ?? __props.class));
+      __el0.setAttribute("role", "separator");
+      __attr(__el0, "aria-orientation", () => __props.orientation ?? "horizontal");
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedSeparator = ComposedSeparatorRoot;
+
+export { ComposedSeparator };

package/dist/shared/chunk-98y1sw9y.js

@@ -0,0 +1,398 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/select/select-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, onMount, ref, useContext } from "@vertz/ui";
+var SelectContext = createContext(undefined, "@vertz/ui-primitives::SelectContext");
+function useSelectContext(componentName) {
+  const ctx = useContext(SelectContext);
+  if (!ctx) {
+    throw new Error(`<Select.${componentName}> must be used inside <Select>. ` + "Ensure it is a direct or nested child of the Select root component.");
+  }
+  return ctx;
+}
+function SelectTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSelectContext("Trigger");
+    const displayText = computed(() => __props.children ?? (ctx.selectedValue() || ctx.placeholder || ""));
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("role", "combobox");
+      __el0.setAttribute("data-select-trigger", "");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-haspopup", "listbox");
+      __el0.setAttribute("aria-expanded", "false");
+      __el0.setAttribute("data-state", "closed");
+      __attr(__el0, "class", () => cn(ctx.classes?.trigger, __props.className ?? __props.class));
+      __on(__el0, "click", () => ctx.toggle());
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.ArrowDown, Keys.ArrowUp, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          if (!ctx.isOpen())
+            ctx.open();
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("span");
+        __el1.setAttribute("data-part", "text");
+        {
+          const __v = {
+            flex: 1,
+            textAlign: "start",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          };
+          if (__v != null && __v !== false)
+            __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        __enterChildren(__el1);
+        __append(__el1, __child(() => displayText.value));
+        __exitChildren();
+        return __el1;
+      })());
+      __append(__el0, (() => {
+        const __el2 = __element("span");
+        __el2.setAttribute("data-part", "chevron");
+        __enterChildren(__el2);
+        __append(__el2, (() => {
+          const __el3 = __element("svg");
+          __el3.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+          __el3.setAttribute("width", "16");
+          __el3.setAttribute("height", "16");
+          __el3.setAttribute("viewBox", "0 0 24 24");
+          __el3.setAttribute("fill", "none");
+          __el3.setAttribute("stroke", "currentColor");
+          __el3.setAttribute("stroke-width", "2");
+          __el3.setAttribute("stroke-linecap", "round");
+          __el3.setAttribute("stroke-linejoin", "round");
+          __el3.setAttribute("aria-hidden", "true");
+          __enterChildren(__el3);
+          __append(__el3, (() => {
+            const __el4 = __element("path");
+            __el4.setAttribute("d", "m6 9 6 6 6-6");
+            return __el4;
+          })());
+          __exitChildren();
+          return __el3;
+        })());
+        __exitChildren();
+        return __el2;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SelectContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSelectContext("Content");
+    const instanceIndex = ctx._contentCount.value++;
+    if (instanceIndex > 0) {
+      console.warn("Duplicate <Select.Content> detected – only the first is used");
+    }
+    onMount(() => {
+      const el = ctx.contentRef.current;
+      if (!el || el.__selectWired)
+        return;
+      el.__selectWired = true;
+      el.addEventListener("keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          ctx.close();
+          return;
+        }
+        const items = [...el.querySelectorAll('[role="option"]')];
+        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.selectItem(val);
+          }
+          return;
+        }
+        const result = handleListNavigation(event, items, { orientation: "vertical" });
+        if (result)
+          return;
+        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();
+        }
+      });
+    });
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "listbox");
+      __el0.setAttribute("tabindex", "-1");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-select-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));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SelectItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSelectContext("Item");
+    const isSelected = computed(() => ctx.selectedValue() === __props.value);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "option");
+      __attr(__el0, "data-value", () => __props.value);
+      __el0.setAttribute("tabindex", "-1");
+      __attr(__el0, "aria-selected", () => isSelected.value ? "true" : "false");
+      __attr(__el0, "data-state", () => isSelected.value ? "active" : "inactive");
+      __attr(__el0, "class", () => cn(ctx.classes?.item, __props.className ?? __props.class));
+      __on(__el0, "click", () => ctx.selectItem(__props.value));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children ?? __props.value));
+      __append(__el0, (() => {
+        const __el1 = __element("span");
+        __el1.setAttribute("data-part", "indicator");
+        __attr(__el1, "style", () => ({ display: isSelected.value ? "" : "none" }));
+        {
+          const __v = cn(ctx.classes?.itemIndicator);
+          if (__v != null && __v !== false)
+            __el1.setAttribute("class", __v === true ? "" : __v);
+        }
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SelectGroup(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSelectContext("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, (() => {
+        const __el1 = __element("div");
+        __el1.setAttribute("data-part", "group-label");
+        __el1.setAttribute("role", "none");
+        __attr(__el1, "class", () => cn(ctx.classes?.label));
+        __enterChildren(__el1);
+        __append(__el1, __child(() => __props.label));
+        __exitChildren();
+        return __el1;
+      })());
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SelectSeparator(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useSelectContext("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 ComposedSelectRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let getContentEl = function() {
+      return contentRef.current ?? null;
+    }, getTriggerEl = function() {
+      const content = getContentEl();
+      return content?.parentElement?.querySelector("[data-select-trigger]");
+    }, syncTriggerAttrs = function(nowOpen) {
+      const trigger = getTriggerEl();
+      if (!trigger)
+        return;
+      trigger.setAttribute("aria-expanded", nowOpen ? "true" : "false");
+      trigger.setAttribute("data-state", nowOpen ? "open" : "closed");
+    }, showContent = function() {
+      const content = getContentEl();
+      if (!content)
+        return;
+      content.setAttribute("data-state", "open");
+      content.setAttribute("aria-hidden", "false");
+      content.style.display = "";
+    }, hideContent = function() {
+      const content = getContentEl();
+      if (!content)
+        return;
+      content.setAttribute("data-state", "closed");
+      setHiddenAnimated(content, true);
+    }, open = function() {
+      isOpen.value = true;
+      syncTriggerAttrs(true);
+      showContent();
+      const contentEl = getContentEl();
+      const triggerEl = getTriggerEl();
+      if (!contentEl)
+        return;
+      contentEl.style.position = "fixed";
+      if (triggerEl) {
+        const floatingOpts = { matchReferenceWidth: true, ...__props.positioning };
+        const result = createFloatingPosition(triggerEl, contentEl, floatingOpts);
+        state.floatingCleanup = result.cleanup;
+      }
+      const insideElements = [contentEl, ...triggerEl ? [triggerEl] : []];
+      state.dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements
+      });
+      const items = [...contentEl.querySelectorAll('[role="option"]')];
+      const selectedIdx = items.findIndex((el) => el.getAttribute("data-value") === selectedValue.value);
+      if (selectedIdx >= 0) {
+        items.forEach((el, i) => el.setAttribute("tabindex", i === selectedIdx ? "0" : "-1"));
+        items[selectedIdx]?.focus();
+      } else {
+        contentEl.focus();
+      }
+    }, close = function() {
+      isOpen.value = false;
+      syncTriggerAttrs(false);
+      hideContent();
+      state.floatingCleanup?.();
+      state.floatingCleanup = null;
+      state.dismissCleanup?.();
+      state.dismissCleanup = null;
+      getTriggerEl()?.focus();
+    }, toggle = function() {
+      if (isOpen.value)
+        close();
+      else
+        open();
+    }, selectItem = function(value) {
+      selectedValue.value = value;
+      __props.onValueChange?.(value);
+      close();
+    };
+    const ids = linkedIds("select");
+    const contentRef = ref();
+    const isOpen = signal(false, "isOpen");
+    const selectedValue = signal(__props.defaultValue ?? "", "selectedValue");
+    const state = { floatingCleanup: null, dismissCleanup: null };
+    const ctx = {
+      isOpen: () => isOpen.value,
+      selectedValue: () => selectedValue.value,
+      placeholder: __props.placeholder,
+      contentId: ids.contentId,
+      contentRef,
+      classes: __props.classes,
+      open,
+      close,
+      toggle,
+      selectItem,
+      _contentCount: { value: 0 }
+    };
+    const __mfResult0 = SelectContext.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-select-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedSelect = Object.assign(ComposedSelectRoot, {
+  Trigger: SelectTrigger,
+  Content: SelectContent,
+  Item: SelectItem,
+  Group: SelectGroup,
+  Separator: SelectSeparator
+});
+
+export { ComposedSelect };