@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-pzknpa1y.js

@@ -0,0 +1,327 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/dialog/dialog-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 DialogContext = createContext(undefined, "@vertz/ui-primitives::DialogContext");
+function useDialogContext(componentName) {
+  const ctx = useContext(DialogContext);
+  if (!ctx) {
+    throw new Error(`<Dialog.${componentName}> must be used inside <Dialog>. ` + "Ensure it is a direct or nested child of the Dialog root component.");
+  }
+  return ctx;
+}
+function DialogTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useDialogContext("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-dialog-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 DialogContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useDialogContext("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");
+      {
+        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);
+      }
+      __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", "dialog-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 DialogTitle(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useDialogContext("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 DialogDescription(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useDialogContext("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 DialogHeader(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useDialogContext("Header");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(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 DialogFooter(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useDialogContext("Footer");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(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 DialogClose(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useDialogContext("Close");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("data-slot", "dialog-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 ComposedDialogRoot(__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, 200);
+    }, 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("dialog");
+    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,
+      classes: __props.classes,
+      open,
+      close,
+      toggle
+    };
+    const __mfResult0 = DialogContext.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-dialog-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedDialog = Object.assign(ComposedDialogRoot, {
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Header: DialogHeader,
+  Footer: DialogFooter,
+  Close: DialogClose
+});
+
+export { ComposedDialog };

package/dist/shared/chunk-q1ff3xp3.js

@@ -0,0 +1,95 @@
+import {
+  setDataState
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/toast/toast.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __pushMountFrame } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function RegionElement(politeness) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "status");
+      {
+        const __v = politeness;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-live", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-atomic", "false");
+      __el0.setAttribute("data-state", "empty");
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MessageElement(id, content) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "status");
+      {
+        const __v = id;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-toast-id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-state", "open");
+      __enterChildren(__el0);
+      __insert(__el0, content);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ToastRoot(options = {}) {
+  const { duration = 5000, politeness = "polite", ...attrs } = options;
+  const state = { messages: signal([]) };
+  const region = RegionElement(politeness);
+  applyAttrs(region, attrs);
+  function announce(content) {
+    const id = uniqueId("toast");
+    const el = MessageElement(id, content);
+    const msg = { id, content, el };
+    state.messages.value = [...state.messages.peek(), msg];
+    region.appendChild(el);
+    setDataState(region, "active");
+    if (duration > 0) {
+      setTimeout(() => dismiss(id), duration);
+    }
+    return msg;
+  }
+  function dismiss(id) {
+    const messages = state.messages.peek().filter((m) => m.id !== id);
+    state.messages.value = messages;
+    const el = region.querySelector(`[data-toast-id="${id}"]`);
+    if (el) {
+      setDataState(el, "closed");
+      el.remove();
+    }
+    if (messages.length === 0) {
+      setDataState(region, "empty");
+    }
+  }
+  return { region, state, announce, dismiss };
+}
+var Toast = {
+  Root: ToastRoot
+};
+
+export { Toast };

package/dist/shared/chunk-q7xbcj9q.js

@@ -0,0 +1,7 @@
+// src/composed/cn.ts
+function cn(...args) {
+  const result = args.filter(Boolean).join(" ");
+  return result || undefined;
+}
+
+export { cn };

package/dist/shared/chunk-qhnany7w.js

@@ -0,0 +1,179 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setValueRange
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/resizable-panel/resizable-panel.tsx
+import { __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ResizablePanelRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let updateSizes = function(newSizes) {
+      state.sizes.value = [...newSizes];
+      for (let i = 0;i < panels.length; i++) {
+        const panel = panels[i];
+        if (!panel)
+          continue;
+        const size = newSizes[i] ?? 0;
+        panel.el.style.flex = `0 0 ${size}%`;
+      }
+      for (let i = 0;i < handles.length; i++) {
+        const handle = handles[i];
+        const leftPanel = panels[i];
+        if (handle && leftPanel) {
+          const size = newSizes[i] ?? 0;
+          setValueRange(handle, Math.round(size), Math.round(leftPanel.minSize), Math.round(leftPanel.maxSize));
+        }
+      }
+      onResize?.(newSizes);
+    }, Panel = function(panelOptions = {}) {
+      const { defaultSize, minSize = 0, maxSize = 100 } = panelOptions;
+      const el = (() => {
+        const __el1 = __element("div");
+        __el1.setAttribute("data-panel", "");
+        return __el1;
+      })();
+      panels.push({ el, minSize, maxSize });
+      const sizes = state.sizes.peek();
+      if (defaultSize != null) {
+        sizes.push(defaultSize);
+      } else {
+        const equalSize = 100 / panels.length;
+        sizes.length = 0;
+        for (let i = 0;i < panels.length; i++) {
+          sizes.push(equalSize);
+        }
+      }
+      updateSizes(sizes);
+      return el;
+    }, Handle = function() {
+      const handleIndex = handles.length;
+      const handle = (() => {
+        const __el2 = __element("div");
+        __el2.setAttribute("role", "separator");
+        __el2.setAttribute("tabindex", "0");
+        {
+          const __v = orientation;
+          if (__v != null && __v !== false)
+            __el2.setAttribute("data-orientation", __v === true ? "" : __v);
+        }
+        __el2.setAttribute("data-state", "idle");
+        __on(__el2, "keydown", (event) => {
+          const sizes = [...state.sizes.peek()];
+          const leftIdx = handleIndex;
+          const rightIdx = handleIndex + 1;
+          const leftPanel = panels[leftIdx];
+          const rightPanel = panels[rightIdx];
+          if (!leftPanel || !rightPanel)
+            return;
+          let leftSize = sizes[leftIdx] ?? 0;
+          let rightSize = sizes[rightIdx] ?? 0;
+          const STEP = 5;
+          const growKey = orientation === "horizontal" ? Keys.ArrowRight : Keys.ArrowDown;
+          const shrinkKey = orientation === "horizontal" ? Keys.ArrowLeft : Keys.ArrowUp;
+          if (isKey(event, growKey)) {
+            event.preventDefault();
+            const delta = Math.min(STEP, rightSize - rightPanel.minSize, leftPanel.maxSize - leftSize);
+            leftSize += delta;
+            rightSize -= delta;
+          } else if (isKey(event, shrinkKey)) {
+            event.preventDefault();
+            const delta = Math.min(STEP, leftSize - leftPanel.minSize, rightPanel.maxSize - rightSize);
+            leftSize -= delta;
+            rightSize += delta;
+          } else if (isKey(event, Keys.Home)) {
+            event.preventDefault();
+            const delta = leftSize - leftPanel.minSize;
+            leftSize -= delta;
+            rightSize += delta;
+          } else if (isKey(event, Keys.End)) {
+            event.preventDefault();
+            const delta = rightSize - rightPanel.minSize;
+            leftSize += delta;
+            rightSize -= delta;
+          } else {
+            return;
+          }
+          sizes[leftIdx] = leftSize;
+          sizes[rightIdx] = rightSize;
+          updateSizes(sizes);
+        });
+        __on(__el2, "pointerdown", (event) => {
+          event.preventDefault();
+          handle.setPointerCapture(event.pointerId);
+          setDataState(handle, "dragging");
+          const startPos = orientation === "horizontal" ? event.clientX : event.clientY;
+          const rootSize = orientation === "horizontal" ? root.offsetWidth : root.offsetHeight;
+          const startSizes = [...state.sizes.peek()];
+          function onMove(e) {
+            const currentPos = orientation === "horizontal" ? e.clientX : e.clientY;
+            const delta = (currentPos - startPos) / rootSize * 100;
+            const sizes = [...startSizes];
+            const leftIdx = handleIndex;
+            const rightIdx = handleIndex + 1;
+            const leftPanel = panels[leftIdx];
+            const rightPanel = panels[rightIdx];
+            if (!leftPanel || !rightPanel)
+              return;
+            let newLeft = (startSizes[leftIdx] ?? 0) + delta;
+            let newRight = (startSizes[rightIdx] ?? 0) - delta;
+            newLeft = Math.max(leftPanel.minSize, Math.min(leftPanel.maxSize, newLeft));
+            newRight = Math.max(rightPanel.minSize, Math.min(rightPanel.maxSize, newRight));
+            sizes[leftIdx] = newLeft;
+            sizes[rightIdx] = newRight;
+            updateSizes(sizes);
+          }
+          function onUp(e) {
+            handle.releasePointerCapture(e.pointerId);
+            setDataState(handle, "idle");
+            handle.removeEventListener("pointermove", onMove);
+            handle.removeEventListener("pointerup", onUp);
+          }
+          handle.addEventListener("pointermove", onMove);
+          handle.addEventListener("pointerup", onUp);
+        });
+        return __el2;
+      })();
+      handles.push(handle);
+      return handle;
+    };
+    const { orientation = "horizontal", onResize, ...attrs } = options;
+    const state = { sizes: signal([]) };
+    const panels = [];
+    const handles = [];
+    const root = (() => {
+      const __el0 = __element("div");
+      {
+        const __v = { display: "flex", flexDirection: orientation === "horizontal" ? "row" : "column" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      {
+        const __v = orientation;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-orientation", __v === true ? "" : __v);
+      }
+      return __el0;
+    })();
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, state, Panel, Handle };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ResizablePanel = {
+  Root: ResizablePanelRoot
+};
+
+export { ResizablePanel };