@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-v11kd39k.js

@@ -0,0 +1,162 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  handleListNavigation
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/tabs/tabs-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var TabsContext = createContext(undefined, "@vertz/ui-primitives::TabsContext");
+function useTabsContext(componentName) {
+  const ctx = useContext(TabsContext);
+  if (!ctx) {
+    throw new Error(`<Tabs.${componentName}> must be used inside <Tabs>. ` + "Ensure it is a direct or nested child of the Tabs root component.");
+  }
+  return ctx;
+}
+function TabsList(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useTabsContext("List");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "tablist");
+      __el0.setAttribute("data-tabs-list", "");
+      {
+        const __v = ctx.orientation === "vertical" ? "vertical" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-orientation", __v === true ? "" : __v);
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.list, __props.className ?? __props.class));
+      __on(__el0, "keydown", (event) => {
+        const list = event.currentTarget;
+        const triggers = [...list.querySelectorAll('[role="tab"]')];
+        const result = handleListNavigation(event, triggers, { orientation: ctx.orientation });
+        if (result) {
+          const value = result.getAttribute("data-value");
+          if (value)
+            ctx.select(value);
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TabsTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useTabsContext("Trigger");
+    const isActive = computed(() => ctx.activeValue === __props.value);
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("role", "tab");
+      __attr(__el0, "id", () => ctx.getTriggerIdFor(__props.value));
+      __el0.setAttribute("data-tabs-trigger", "");
+      __attr(__el0, "data-value", () => __props.value);
+      __attr(__el0, "aria-controls", () => ctx.getPanelIdFor(__props.value));
+      __attr(__el0, "aria-selected", () => isActive.value ? "true" : "false");
+      __attr(__el0, "data-state", () => isActive.value ? "active" : "inactive");
+      __attr(__el0, "tabindex", () => isActive.value ? "0" : "-1");
+      __attr(__el0, "class", () => cn(ctx.classes?.trigger, __props.className ?? __props.class));
+      __on(__el0, "click", () => ctx.select(__props.value));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TabsContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useTabsContext("Content");
+    const isActive = computed(() => ctx.activeValue === __props.value);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "tabpanel");
+      __attr(__el0, "id", () => ctx.getPanelIdFor(__props.value));
+      __el0.setAttribute("data-tabs-panel", "");
+      __attr(__el0, "data-value", () => __props.value);
+      __attr(__el0, "aria-labelledby", () => ctx.getTriggerIdFor(__props.value));
+      __el0.setAttribute("tabindex", "0");
+      __attr(__el0, "aria-hidden", () => isActive.value ? "false" : "true");
+      __attr(__el0, "data-state", () => isActive.value ? "active" : "inactive");
+      __attr(__el0, "style", () => ({ display: isActive.value ? "" : "none" }));
+      __attr(__el0, "class", () => cn(ctx.classes?.panel, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedTabsRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let select = function(value) {
+      activeValue.value = value;
+      __props.onValueChange?.(value);
+    }, getTriggerIdFor = function(value) {
+      return `${baseId}-trigger-${value}`;
+    }, getPanelIdFor = function(value) {
+      return `${baseId}-panel-${value}`;
+    };
+    const baseId = uniqueId("tabs");
+    const activeValue = signal(__props.defaultValue ?? "", "activeValue");
+    const ctx = {
+      activeValue,
+      classes: __props.classes,
+      orientation: __props.orientation ?? "horizontal",
+      select,
+      getTriggerIdFor,
+      getPanelIdFor
+    };
+    const __mfResult0 = TabsContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-tabs-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedTabs = Object.assign(ComposedTabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent
+});
+
+export { ComposedTabs };

package/dist/shared/{chunk-0mcr52hc.js → chunk-vef3sepw.js}

@@ -55,6 +55,22 @@ function createFloatingPosition(reference, floating, options = {}) {
     }
   };
 }
+function resolveLayoutElement(el) {
+  const style = globalThis.getComputedStyle?.(el);
+  if (style?.display !== "contents")
+    return el;
+  const queue = [...el.children];
+  while (queue.length > 0) {
+    const child = queue.shift();
+    if (!(child instanceof HTMLElement))
+      continue;
+    const childStyle = getComputedStyle(child);
+    if (childStyle.display !== "contents")
+      return child;
+    queue.push(...child.children);
+  }
+  return el;
+}
 function virtualElement(x, y) {
   return {
     getBoundingClientRect() {
@@ -75,4 +91,4 @@ function virtualElement(x, y) {
   };
 }
 
-export { createFloatingPosition, virtualElement };
+export { createFloatingPosition, resolveLayoutElement, virtualElement };

package/dist/shared/chunk-vkscwzpr.js

@@ -0,0 +1,294 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/sheet/sheet-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __conditional, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, ref, useContext } from "@vertz/ui";
+var SheetContext = createContext(undefined, "@vertz/ui-primitives::SheetContext");
+function useSheetContext(componentName) {
+  const ctx = useContext(SheetContext);
+  if (!ctx) {
+    throw new Error(`<Sheet.${componentName}> must be used inside <Sheet>. ` + "Ensure it is a direct or nested child of the Sheet root component.");
+  }
+  return ctx;
+}
+function SheetTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSheetContext("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-sheet-trigger", "");
+      __el0.setAttribute("data-state", "closed");
+      __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 SheetContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSheetContext("Content");
+    const el = computed(() => (() => {
+      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", "dialog");
+      __el0.setAttribute("aria-modal", "true");
+      {
+        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);
+      }
+      {
+        const __v = ctx.side;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-side", __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();
+        ctx.close();
+      });
+      __on(__el0, "click", (e) => {
+        if (e.target === ctx.dialogRef.current)
+          ctx.close();
+      });
+      __enterChildren(__el0);
+      __append(__el0, __conditional(() => __props.showClose ?? true, () => (() => {
+        const __el1 = __element("button");
+        __el1.setAttribute("type", "button");
+        __el1.setAttribute("data-slot", "sheet-close");
+        {
+          const __v = cn(ctx.classes?.close);
+          if (__v != null && __v !== false)
+            __el1.setAttribute("class", __v === true ? "" : __v);
+        }
+        __el1.setAttribute("aria-label", "Close");
+        __on(__el1, "click", () => ctx.close());
+        __enterChildren(__el1);
+        __append(__el1, (() => {
+          const __el2 = __element("svg");
+          __el2.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+          __el2.setAttribute("aria-hidden", "true");
+          __el2.setAttribute("focusable", "false");
+          __el2.setAttribute("width", "16");
+          __el2.setAttribute("height", "16");
+          __el2.setAttribute("viewBox", "0 0 24 24");
+          __el2.setAttribute("fill", "none");
+          __el2.setAttribute("stroke", "currentColor");
+          __el2.setAttribute("stroke-width", "2");
+          __el2.setAttribute("stroke-linecap", "round");
+          __el2.setAttribute("stroke-linejoin", "round");
+          __enterChildren(__el2);
+          __append(__el2, (() => {
+            const __el3 = __element("path");
+            __el3.setAttribute("d", "M18 6 6 18");
+            return __el3;
+          })());
+          __append(__el2, (() => {
+            const __el4 = __element("path");
+            __el4.setAttribute("d", "m6 6 12 12");
+            return __el4;
+          })());
+          __exitChildren();
+          return __el2;
+        })());
+        __exitChildren();
+        return __el1;
+      })(), () => null));
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })());
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SheetTitle(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSheetContext("Title");
+    const __mfResult0 = (() => {
+      const __el0 = __element("h2");
+      {
+        const __v = ctx.titleId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __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 SheetDescription(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSheetContext("Description");
+    const __mfResult0 = (() => {
+      const __el0 = __element("p");
+      {
+        const __v = ctx.descriptionId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __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 SheetClose(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSheetContext("Close");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("data-slot", "sheet-close");
+      __attr(__el0, "class", () => cn(ctx.classes?.close, __props.className ?? __props.class));
+      __attr(__el0, "aria-label", () => __props.children ? undefined : "Close");
+      __on(__el0, "click", () => ctx.close());
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children ?? "×"));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedSheetRoot(__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, 350);
+    }, open = function() {
+      isOpen.value = true;
+      showDialog();
+      __props.onOpenChange?.(true);
+    }, close = function() {
+      hideDialog();
+      isOpen.value = false;
+      __props.onOpenChange?.(false);
+    }, toggle = function() {
+      if (isOpen.value)
+        close();
+      else
+        open();
+    };
+    const ids = linkedIds("sheet");
+    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,
+      side: __props.side ?? "right",
+      classes: __props.classes,
+      open,
+      close,
+      toggle
+    };
+    const __mfResult0 = SheetContext.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-sheet-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedSheet = Object.assign(ComposedSheetRoot, {
+  Trigger: SheetTrigger,
+  Content: SheetContent,
+  Title: SheetTitle,
+  Description: SheetDescription,
+  Close: SheetClose
+});
+
+export { ComposedSheet };

package/dist/shared/chunk-vv187snj.js

@@ -0,0 +1,112 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/empty-state/empty-state-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var EmptyStateContext = createContext(undefined, "@vertz/ui-primitives::EmptyStateContext");
+function EmptyStateIcon(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(EmptyStateContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(ctx?.classes?.icon, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function EmptyStateTitle(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(EmptyStateContext);
+    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 EmptyStateDescription(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(EmptyStateContext);
+    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 EmptyStateAction(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(EmptyStateContext);
+    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 ComposedEmptyStateRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = EmptyStateContext.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 ComposedEmptyState = Object.assign(ComposedEmptyStateRoot, {
+  Icon: EmptyStateIcon,
+  Title: EmptyStateTitle,
+  Description: EmptyStateDescription,
+  Action: EmptyStateAction
+});
+
+export { ComposedEmptyState };

package/dist/shared/chunk-vy874zxe.js

@@ -0,0 +1,68 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/toggle/toggle.tsx
+import { computed, signal } from "@vertz/ui";
+import { __attr, __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+function ToggleRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (disabled)
+        return;
+      pressed.value = !pressed.value;
+      onPressedChange?.(pressed.value);
+    };
+    const { defaultPressed = false, disabled = false, onPressedChange, ...attrs } = options;
+    const pressed = signal(defaultPressed, "pressed");
+    const el = computed(() => (() => {
+      const __el0 = __element("button");
+      __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");
+      {
+        const __v = disabled;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = disabled ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+      }
+      __on(__el0, "click", toggle);
+      __on(__el0, "keydown", (e) => {
+        if (isKey(e, Keys.Space)) {
+          e.preventDefault();
+          toggle();
+        }
+      });
+      return __el0;
+    })());
+    applyAttrs(el.value, attrs);
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Toggle = {
+  Root: ToggleRoot
+};
+
+export { Toggle };