@vertz/ui-primitives 0.2.38 → 0.2.42

package/dist/shared/chunk-pzknpa1y.js

@@ -1,327 +0,0 @@
-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-q77y3rg4.js

@@ -1,189 +0,0 @@
-import {
-  uniqueId
-} from "./chunk-8y1jf6xr.js";
-import {
-  Keys,
-  handleListNavigation,
-  isKey
-} from "./chunk-7867pr13.js";
-import {
-  setDataState,
-  setExpanded,
-  setHidden,
-  setHiddenAnimated
-} from "./chunk-vevfhpc9.js";
-import {
-  applyAttrs
-} from "./chunk-2db2dnp3.js";
-
-// src/accordion/accordion.tsx
-import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
-import { signal } from "@vertz/ui";
-function AccordionRoot(options = {}) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    let updateItemState = function(val, open) {
-      const entry = itemMap.get(val);
-      if (!entry)
-        return;
-      const { trigger: t, content: c } = entry;
-      c.removeAttribute("data-initial");
-      if (open) {
-        setHidden(c, false);
-      }
-      const height = c.scrollHeight;
-      c.style.setProperty("--accordion-content-height", `${height}px`);
-      setExpanded(t, open);
-      setDataState(t, open ? "open" : "closed");
-      setDataState(c, open ? "open" : "closed");
-      if (!open) {
-        setHiddenAnimated(c, true);
-      }
-    }, toggleItem = function(value) {
-      const prev = [...state.value.peek()];
-      const current = [...prev];
-      const idx = current.indexOf(value);
-      if (idx >= 0) {
-        current.splice(idx, 1);
-      } else {
-        if (multiple) {
-          current.push(value);
-        } else {
-          current.length = 0;
-          current.push(value);
-        }
-      }
-      state.value.value = current;
-      onValueChange?.(current);
-      for (const v of prev) {
-        if (!current.includes(v)) {
-          updateItemState(v, false);
-        }
-      }
-      for (const v of current) {
-        if (!prev.includes(v)) {
-          updateItemState(v, true);
-        }
-      }
-    }, Item = function(value) {
-      const baseId = uniqueId("accordion");
-      const triggerId = `${baseId}-trigger`;
-      const contentId = `${baseId}-content`;
-      const isOpen = state.value.peek().includes(value);
-      const trigger = (() => {
-        const __el1 = __element("button");
-        __el1.setAttribute("type", "button");
-        {
-          const __v = triggerId;
-          if (__v != null && __v !== false)
-            __el1.setAttribute("id", __v === true ? "" : __v);
-        }
-        {
-          const __v = contentId;
-          if (__v != null && __v !== false)
-            __el1.setAttribute("aria-controls", __v === true ? "" : __v);
-        }
-        {
-          const __v = value;
-          if (__v != null && __v !== false)
-            __el1.setAttribute("data-value", __v === true ? "" : __v);
-        }
-        {
-          const __v = isOpen ? "true" : "false";
-          if (__v != null && __v !== false)
-            __el1.setAttribute("aria-expanded", __v === true ? "" : __v);
-        }
-        {
-          const __v = isOpen ? "open" : "closed";
-          if (__v != null && __v !== false)
-            __el1.setAttribute("data-state", __v === true ? "" : __v);
-        }
-        __on(__el1, "click", () => toggleItem(value));
-        return __el1;
-      })();
-      const content = (() => {
-        const __el2 = __element("div");
-        __el2.setAttribute("role", "region");
-        {
-          const __v = contentId;
-          if (__v != null && __v !== false)
-            __el2.setAttribute("id", __v === true ? "" : __v);
-        }
-        {
-          const __v = triggerId;
-          if (__v != null && __v !== false)
-            __el2.setAttribute("aria-labelledby", __v === true ? "" : __v);
-        }
-        {
-          const __v = isOpen ? "false" : "true";
-          if (__v != null && __v !== false)
-            __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
-        }
-        {
-          const __v = isOpen ? "open" : "closed";
-          if (__v != null && __v !== false)
-            __el2.setAttribute("data-state", __v === true ? "" : __v);
-        }
-        {
-          const __v = isOpen ? "" : undefined;
-          if (__v != null && __v !== false)
-            __el2.setAttribute("data-initial", __v === true ? "" : __v);
-        }
-        {
-          const __v = { display: isOpen ? "" : "none" };
-          if (__v != null && __v !== false)
-            __el2.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
-        }
-        return __el2;
-      })();
-      const item = (() => {
-        const __el3 = __element("div");
-        {
-          const __v = value;
-          if (__v != null && __v !== false)
-            __el3.setAttribute("data-value", __v === true ? "" : __v);
-        }
-        __enterChildren(__el3);
-        __insert(__el3, trigger);
-        __insert(__el3, content);
-        __exitChildren();
-        return __el3;
-      })();
-      itemMap.set(value, { trigger, content });
-      triggers.push(trigger);
-      if (isOpen) {
-        requestAnimationFrame(() => {
-          const height = content.scrollHeight;
-          content.style.setProperty("--accordion-content-height", `${height}px`);
-        });
-      }
-      return { item, trigger, content };
-    };
-    const { multiple = false, defaultValue = [], onValueChange, ...attrs } = options;
-    const state = { value: signal([...defaultValue]) };
-    const triggers = [];
-    const itemMap = new Map;
-    const root = (() => {
-      const __el0 = __element("div");
-      __el0.setAttribute("data-orientation", "vertical");
-      __on(__el0, "keydown", (event) => {
-        if (isKey(event, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
-          handleListNavigation(event, triggers, { orientation: "vertical" });
-        }
-      });
-      return __el0;
-    })();
-    applyAttrs(root, attrs);
-    const __mfResult0 = { root, state, Item };
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
-}
-var Accordion = {
-  Root: AccordionRoot
-};
-
-export { Accordion };

package/dist/shared/chunk-qhnany7w.js

@@ -1,179 +0,0 @@
-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 };