@vertz/ui-primitives 0.2.21 → 0.2.23

package/dist/shared/{chunk-q8dm19a5.js → chunk-2db2dnp3.js}

@@ -10,7 +10,6 @@ function applyAttrs(el, attrs) {
       const existing = el.getAttribute("class");
       const classValue = String(resolvedClass);
       el.setAttribute("class", existing ? `${existing} ${classValue}` : classValue);
-      continue;
     } else if (key === "style") {
       const existing = el.getAttribute("style");
       el.setAttribute("style", existing ? `${existing}; ${String(value)}` : String(value));

package/dist/shared/chunk-3h1mxp95.js

@@ -0,0 +1,148 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  handleListNavigation
+} from "./chunk-7867pr13.js";
+import {
+  setChecked,
+  setDataState,
+  setDisabled
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/radio/radio.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function RadioGroup(items, itemValues, selectItem) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "radiogroup");
+      {
+        const __v = uniqueId("radiogroup");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __on(__el0, "keydown", (event) => {
+        const result = handleListNavigation(event, items, { orientation: "vertical" });
+        if (result) {
+          const idx = items.indexOf(result);
+          if (idx >= 0) {
+            const val = itemValues[idx];
+            if (val !== undefined)
+              selectItem(val);
+          }
+        }
+      });
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function RadioItem(value, label, isActive, disabled, selectItem) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const el = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "radio");
+      {
+        const __v = uniqueId("radio");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-checked", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "checked" : "unchecked";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el0, "click", () => {
+        if (!disabled)
+          selectItem(value);
+      });
+      __enterChildren(__el0);
+      __insert(__el0, label ?? value);
+      __exitChildren();
+      return __el0;
+    })();
+    if (disabled) {
+      setDisabled(el, true);
+      el.setAttribute("data-disabled", "");
+    }
+    const __mfResult0 = el;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function RadioRoot(options = {}) {
+  const { defaultValue = "", onValueChange, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const items = [];
+  const itemValues = [];
+  function selectItem(value) {
+    state.value.value = value;
+    for (let i = 0;i < items.length; i++) {
+      const item = items[i];
+      if (!item)
+        continue;
+      const isActive = itemValues[i] === value;
+      setChecked(item, isActive);
+      setDataState(item, isActive ? "checked" : "unchecked");
+    }
+    setRovingTabindex(items, itemValues.indexOf(value));
+    onValueChange?.(value);
+  }
+  const root = RadioGroup(items, itemValues, selectItem);
+  const cleanups = [];
+  function Item(value, label, itemOptions) {
+    const isActive = value === state.value.peek();
+    const disabled = itemOptions?.disabled ?? false;
+    const item = RadioItem(value, label, isActive, disabled, selectItem);
+    const handleClick = () => {
+      if (!disabled)
+        item.focus();
+    };
+    item.addEventListener("click", handleClick);
+    cleanups.push(() => item.removeEventListener("click", handleClick));
+    items.push(item);
+    itemValues.push(value);
+    root.appendChild(item);
+    setRovingTabindex(items, itemValues.indexOf(state.value.peek()));
+    return item;
+  }
+  function destroy() {
+    for (const cleanup of cleanups)
+      cleanup();
+    cleanups.length = 0;
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Item, destroy };
+}
+var Radio = {
+  Root: RadioRoot
+};
+
+export { Radio };

package/dist/shared/chunk-3kwh27dv.js

@@ -0,0 +1,135 @@
+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);
+      root.appendChild(item);
+      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 };

package/dist/shared/chunk-4894pmy6.js

@@ -0,0 +1,184 @@
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.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;
+      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 = { 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);
+      root.appendChild(item);
+      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-v9qddmh9.js → chunk-56reyd5r.js}

@@ -1,48 +1,39 @@
 import {
   setDataState
-} from "./chunk-vvjyx7fe.js";
+} from "./chunk-vevfhpc9.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
 import {
   applyAttrs
-} from "./chunk-q8dm19a5.js";
+} from "./chunk-2db2dnp3.js";
 
 // src/toast/toast.tsx
-import { __element, __enterChildren, __exitChildren, __insert } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
+function createRegionElement(politeness) {
+  const el = document.createElement("div");
+  el.setAttribute("role", "status");
+  el.setAttribute("aria-live", politeness);
+  el.setAttribute("aria-atomic", "false");
+  el.setAttribute("data-state", "empty");
+  return el;
+}
+function createMessageElement(id, content) {
+  const el = document.createElement("div");
+  el.setAttribute("role", "status");
+  el.setAttribute("data-toast-id", id);
+  el.setAttribute("data-state", "open");
+  el.textContent = content;
+  return el;
+}
 function ToastRoot(options = {}) {
   const { duration = 5000, politeness = "polite", ...attrs } = options;
   const state = { messages: signal([]) };
-  const region = (() => {
-    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;
-  })();
+  const region = createRegionElement(politeness);
   applyAttrs(region, attrs);
   function announce(content) {
     const id = uniqueId("toast");
-    const el = (() => {
-      const __el1 = __element("div");
-      __el1.setAttribute("role", "status");
-      {
-        const __v = id;
-        if (__v != null && __v !== false)
-          __el1.setAttribute("data-toast-id", __v === true ? "" : __v);
-      }
-      __el1.setAttribute("data-state", "open");
-      __enterChildren(__el1);
-      __insert(__el1, content);
-      __exitChildren();
-      return __el1;
-    })();
+    const el = createMessageElement(id, content);
     const msg = { id, content, el };
     state.messages.value = [...state.messages.peek(), msg];
     region.appendChild(el);

package/dist/shared/chunk-67sn29eh.js

@@ -0,0 +1,125 @@
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/collapsible/collapsible.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function CollapsibleRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (state.disabled.peek())
+        return;
+      const next = !state.open.peek();
+      state.open.value = next;
+      if (next) {
+        setHidden(content, false);
+      }
+      const height = content.scrollHeight;
+      content.style.setProperty("--collapsible-content-height", `${height}px`);
+      setExpanded(trigger, next);
+      setDataState(trigger, next ? "open" : "closed");
+      setDataState(content, next ? "open" : "closed");
+      if (!next) {
+        setHiddenAnimated(content, true);
+      }
+      onOpenChange?.(next);
+    };
+    const { defaultOpen = false, disabled = false, onOpenChange, ...attrs } = options;
+    const ids = linkedIds("collapsible");
+    const state = {
+      open: signal(defaultOpen),
+      disabled: signal(disabled)
+    };
+    const trigger = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      {
+        const __v = ids.triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        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);
+      return __el0;
+    })();
+    const content = (() => {
+      const __el1 = __element("div");
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: defaultOpen ? "" : "none" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      return __el1;
+    })();
+    const root = (() => {
+      const __el2 = __element("div");
+      __enterChildren(__el2);
+      __insert(__el2, trigger);
+      __insert(__el2, content);
+      __exitChildren();
+      return __el2;
+    })();
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, trigger, content, state };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Collapsible = {
+  Root: CollapsibleRoot
+};
+
+export { Collapsible };