@vertz/ui-primitives 0.2.23 → 0.2.24

package/dist/shared/chunk-czv0kqj4.js

@@ -0,0 +1,107 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/skeleton/skeleton-composed.tsx
+import { computed } from "@vertz/ui";
+import { __attr, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+function ComposedSkeletonRoot(props = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const classes = computed(() => props.classes);
+    const className = computed(() => props.className);
+    const classProp = computed(() => props.class);
+    const width = computed(() => props.width);
+    const height = computed(() => props.height);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(classes.value?.root, className.value ?? classProp.value));
+      __el0.setAttribute("aria-hidden", "true");
+      __attr(__el0, "style", () => ({
+        width: width.value || undefined,
+        height: height.value || undefined
+      }));
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SkeletonText(props = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const lineCount = computed(() => props.lines ?? 3);
+    const lastWidth = computed(() => props.lastLineWidth ?? "75%");
+    const lineHeight = computed(() => props.height);
+    const lines = [];
+    for (let i = 0;i < lineCount.value; i++) {
+      lines.push((() => {
+        const __el0 = __element("div");
+        {
+          const __v = cn(props.classes?.line);
+          if (__v != null && __v !== false)
+            __el0.setAttribute("class", __v === true ? "" : __v);
+        }
+        __attr(__el0, "style", () => ({
+          width: i === lineCount.value - 1 ? lastWidth.value : undefined,
+          height: lineHeight.value || undefined
+        }));
+        return __el0;
+      })());
+    }
+    const __mfResult0 = (() => {
+      const __el1 = __element("div");
+      {
+        const __v = cn(props.classes?.root, props.className ?? props.class);
+        if (__v != null && __v !== false)
+          __el1.setAttribute("class", __v === true ? "" : __v);
+      }
+      __el1.setAttribute("aria-hidden", "true");
+      {
+        const __v = { gap: props.gap || undefined };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __enterChildren(__el1);
+      __insert(__el1, lines);
+      __exitChildren();
+      return __el1;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SkeletonCircle(props = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const size = computed(() => props.size ?? "2.5rem");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      {
+        const __v = cn(props.classes?.root, props.className ?? props.class);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("class", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-hidden", "true");
+      __attr(__el0, "style", () => ({ width: size.value, height: size.value }));
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedSkeleton = Object.assign(ComposedSkeletonRoot, {
+  Text: SkeletonText,
+  Circle: SkeletonCircle
+});
+
+export { ComposedSkeleton };

package/dist/shared/chunk-d83ag07h.js

@@ -0,0 +1,189 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/table/table-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var TableContext = createContext(undefined, "@vertz/ui-primitives::TableContext");
+function TableHeader(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(TableContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("thead");
+      __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 TableBody(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(TableContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("tbody");
+      __attr(__el0, "class", () => cn(ctx?.classes?.body, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TableRow(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(TableContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("tr");
+      __attr(__el0, "class", () => cn(ctx?.classes?.row, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TableHead(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(TableContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("th");
+      __el0.setAttribute("scope", "col");
+      __attr(__el0, "class", () => cn(ctx?.classes?.head, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TableCell(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(TableContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("td");
+      __attr(__el0, "class", () => cn(ctx?.classes?.cell, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TableCaption(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(TableContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("caption");
+      __attr(__el0, "class", () => cn(ctx?.classes?.caption, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TableFooter(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(TableContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("tfoot");
+      __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 ComposedTableRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = TableContext.Provider({ get value() {
+      return { classes: __props.classes };
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      {
+        const __v = { position: "relative", width: "100%", overflowX: "auto" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("table");
+        {
+          const __v = { borderCollapse: "collapse" };
+          if (__v != null && __v !== false)
+            __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        __attr(__el1, "class", () => cn(__props.classes?.root, __props.className ?? __props.class));
+        __enterChildren(__el1);
+        __append(__el1, __child(() => __props.children));
+        __exitChildren();
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedTable = Object.assign(ComposedTableRoot, {
+  Header: TableHeader,
+  Body: TableBody,
+  Row: TableRow,
+  Head: TableHead,
+  Cell: TableCell,
+  Caption: TableCaption,
+  Footer: TableFooter
+});
+
+export { ComposedTable };

package/dist/shared/{chunk-3kwh27dv.js → chunk-de18ashk.js}

@@ -82,7 +82,6 @@ function ToggleGroupRoot(options = {}) {
       })();
       items.push(item);
       setRovingTabindex(items, 0);
-      root.appendChild(item);
       return item;
     };
     const {

package/dist/shared/{chunk-cgb2j94g.js → chunk-dvk4h36t.js}

@@ -59,7 +59,6 @@ function CarouselRoot(options = {}) {
       })();
       slides.push(slide);
       state.slideCount.value = slides.length;
-      viewport.appendChild(slide);
       updateSlideVisibility();
       return slide;
     };

package/dist/shared/chunk-e6660g7e.js

@@ -0,0 +1,179 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/collapsible/collapsible-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, ref, useContext } from "@vertz/ui";
+var CollapsibleContext = createContext(undefined, "@vertz/ui-primitives::CollapsibleContext");
+function useCollapsibleContext(componentName) {
+  const ctx = useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error(`<Collapsible.${componentName}> must be used inside <Collapsible>. ` + "Ensure it is a direct or nested child of the Collapsible root component.");
+  }
+  return ctx;
+}
+function CollapsibleTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useCollapsibleContext("Trigger");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      ctx.triggerRef.current = __el0;
+      __el0.setAttribute("type", "button");
+      {
+        const __v = ctx.ids.triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.defaultOpen ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.disabled;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.disabled ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.trigger, __props.className ?? __props.class));
+      __on(__el0, "click", ctx.toggle);
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CollapsibleContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useCollapsibleContext("Content");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      {
+        const __v = ctx.ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-part", "collapsible-content");
+      {
+        const __v = ctx.defaultOpen ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: ctx.defaultOpen ? "" : "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 ComposedCollapsibleRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (__props.disabled ?? false)
+        return;
+      const contentEl = contentRef.current;
+      const triggerEl = triggerRef.current;
+      if (!contentEl || !triggerEl)
+        return;
+      isOpen = !isOpen;
+      if (isOpen) {
+        setHidden(contentEl, false);
+      }
+      const height = contentEl.scrollHeight;
+      contentEl.style.setProperty("--collapsible-content-height", `${height}px`);
+      setExpanded(triggerEl, isOpen);
+      setDataState(triggerEl, isOpen ? "open" : "closed");
+      setDataState(contentEl, isOpen ? "open" : "closed");
+      if (!isOpen) {
+        setHiddenAnimated(contentEl, true);
+      }
+      __props.onOpenChange?.(isOpen);
+    };
+    const ids = linkedIds("collapsible");
+    const triggerRef = ref();
+    const contentRef = ref();
+    let isOpen = __props.defaultOpen ?? false;
+    const ctx = {
+      ids,
+      triggerRef,
+      contentRef,
+      classes: __props.classes,
+      disabled: __props.disabled ?? false,
+      defaultOpen: __props.defaultOpen ?? false,
+      toggle
+    };
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-v-id", "ComposedCollapsibleRoot");
+      __el0.setAttribute("data-part", "collapsible");
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __enterChildren(__el0);
+      __append(__el0, CollapsibleContext.Provider({ get value() {
+        return ctx;
+      }, children: () => __child(() => __props.children) }));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedCollapsible = Object.assign(ComposedCollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
+
+export { ComposedCollapsible };

package/dist/shared/{chunk-3h1mxp95.js → chunk-eq4d9b0w.js}

@@ -129,7 +129,6 @@ function RadioRoot(options = {}) {
     cleanups.push(() => item.removeEventListener("click", handleClick));
     items.push(item);
     itemValues.push(value);
-    root.appendChild(item);
     setRovingTabindex(items, itemValues.indexOf(state.value.peek()));
     return item;
   }

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-4894pmy6.js → chunk-f0wy7k56.js}

@@ -145,7 +145,6 @@ function AccordionRoot(options = {}) {
       })();
       itemMap.set(value, { trigger, content });
       triggers.push(trigger);
-      root.appendChild(item);
       if (isOpen) {
         requestAnimationFrame(() => {
           const height = content.scrollHeight;