@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-brk0drrk.js

@@ -0,0 +1,202 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/popover/popover-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 PopoverContext = createContext(undefined, "@vertz/ui-primitives::PopoverContext");
+function usePopoverContext(componentName) {
+  const ctx = useContext(PopoverContext);
+  if (!ctx) {
+    throw new Error(`<Popover.${componentName}> must be used inside <Popover>. ` + "Ensure it is a direct or nested child of the Popover root component.");
+  }
+  return ctx;
+}
+function PopoverTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = usePopoverContext("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-popover-trigger", "");
+      __el0.setAttribute("aria-haspopup", "dialog");
+      {
+        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();
+        const nowOpen = ctx.isOpen();
+        const el = document.querySelector(`[data-popover-trigger][aria-controls="${ctx.contentId}"]`);
+        if (el) {
+          el.setAttribute("aria-expanded", nowOpen ? "true" : "false");
+          el.setAttribute("data-state", nowOpen ? "open" : "closed");
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function PopoverContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = usePopoverContext("Content");
+    const instanceIndex = ctx._contentCount.value++;
+    if (instanceIndex > 0) {
+      console.warn("Duplicate <Popover.Content> detected – only the first is used");
+    }
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "dialog");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-popover-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 ComposedPopoverRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let getElements = function() {
+      const content = contentRef.current ?? null;
+      let trigger = content ? content.parentElement?.querySelector("[data-popover-trigger]") : null;
+      while (trigger && getComputedStyle(trigger).display === "contents") {
+        trigger = trigger.firstElementChild;
+      }
+      return { trigger, content };
+    }, syncContentAttrs = function(nowOpen) {
+      const content = contentRef.current;
+      if (!content)
+        return;
+      content.setAttribute("data-state", nowOpen ? "open" : "closed");
+      content.setAttribute("aria-hidden", nowOpen ? "false" : "true");
+      content.style.display = nowOpen ? "" : "none";
+    }, open = function() {
+      isOpen.value = true;
+      syncContentAttrs(true);
+      const { trigger, content } = getElements();
+      if (trigger && content) {
+        content.style.position = "fixed";
+        const floatingOpts = __props.positioning ?? {};
+        const result = createFloatingPosition(trigger, content, floatingOpts);
+        cleanup.floating = result.cleanup;
+        cleanup.dismiss = createDismiss({
+          onDismiss: close,
+          insideElements: [trigger, content],
+          escapeKey: true
+        });
+      }
+      __props.onOpenChange?.(true);
+    }, close = function() {
+      isOpen.value = false;
+      syncContentAttrs(false);
+      const content = contentRef.current;
+      if (content) {
+        content.style.position = "";
+        content.style.left = "";
+        content.style.top = "";
+      }
+      cleanup.floating?.();
+      cleanup.floating = null;
+      cleanup.dismiss?.();
+      cleanup.dismiss = null;
+      __props.onOpenChange?.(false);
+    }, toggle = function() {
+      if (isOpen.value)
+        close();
+      else
+        open();
+    };
+    const ids = linkedIds("popover");
+    const contentRef = ref();
+    const isOpen = signal(false, "isOpen");
+    const cleanup = {
+      floating: null,
+      dismiss: null
+    };
+    const ctx = {
+      isOpen: () => isOpen.value,
+      contentId: ids.contentId,
+      contentRef,
+      classes: __props.classes,
+      open,
+      close,
+      toggle,
+      _contentCount: { value: 0 }
+    };
+    const __mfResult0 = PopoverContext.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-popover-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedPopover = Object.assign(ComposedPopoverRoot, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent
+});
+
+export { ComposedPopover };

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-de18ashk.js

@@ -0,0 +1,134 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setPressed
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/toggle-group/toggle-group.tsx
+import { __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ToggleGroupRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggleValue = function(itemValue) {
+      if (state.disabled.peek())
+        return;
+      const current = [...state.value.peek()];
+      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);
+        }
+      }
+      state.value.value = current;
+      onValueChange?.(current);
+      for (const item of items) {
+        const val = item.getAttribute("data-value") ?? "";
+        const isOn = current.includes(val);
+        setPressed(item, isOn);
+        setDataState(item, isOn ? "on" : "off");
+      }
+    }, Item = function(value) {
+      const isOn = state.value.peek().includes(value);
+      const item = (() => {
+        const __el1 = __element("button");
+        __el1.setAttribute("type", "button");
+        {
+          const __v = value;
+          if (__v != null && __v !== false)
+            __el1.setAttribute("data-value", __v === true ? "" : __v);
+        }
+        {
+          const __v = isOn ? "true" : "false";
+          if (__v != null && __v !== false)
+            __el1.setAttribute("aria-pressed", __v === true ? "" : __v);
+        }
+        {
+          const __v = isOn ? "on" : "off";
+          if (__v != null && __v !== false)
+            __el1.setAttribute("data-state", __v === true ? "" : __v);
+        }
+        {
+          const __v = state.disabled.peek();
+          if (__v != null && __v !== false)
+            __el1.setAttribute("disabled", __v === true ? "" : __v);
+        }
+        {
+          const __v = state.disabled.peek() ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el1.setAttribute("aria-disabled", __v === true ? "" : __v);
+        }
+        __on(__el1, "click", () => toggleValue(value));
+        return __el1;
+      })();
+      items.push(item);
+      setRovingTabindex(items, 0);
+      return item;
+    };
+    const {
+      type = "single",
+      defaultValue = [],
+      orientation = "horizontal",
+      disabled = false,
+      onValueChange,
+      ...attrs
+    } = options;
+    const state = {
+      value: signal([...defaultValue]),
+      disabled: signal(disabled)
+    };
+    const items = [];
+    const root = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "group");
+      {
+        const __v = orientation;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-orientation", __v === true ? "" : __v);
+      }
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
+          const result = handleListNavigation(event, items, { orientation });
+          if (result) {
+            const idx = items.indexOf(result);
+            if (idx >= 0) {
+              setRovingTabindex(items, idx);
+            }
+          }
+        }
+      });
+      return __el0;
+    })();
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, state, Item };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ToggleGroup = {
+  Root: ToggleGroupRoot
+};
+
+export { ToggleGroup };