@vertz/ui-primitives 0.2.23 → 0.2.24

package/dist/shared/chunk-hxmxvp56.js

@@ -0,0 +1,67 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/switch/switch-composed.tsx
+import { signal } from "@vertz/ui";
+import { __append, __attr, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+function ComposedSwitchRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (__props.disabled ?? false)
+        return;
+      checked.value = !checked.value;
+      __props.onCheckedChange?.(checked.value);
+    };
+    const checked = signal(__props.defaultChecked ?? false, "checked");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("data-v-id", "ComposedSwitchRoot");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("role", "switch");
+      {
+        const __v = uniqueId("switch");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "aria-checked", () => checked.value ? "true" : "false");
+      __attr(__el0, "data-state", () => checked.value ? "checked" : "unchecked");
+      __attr(__el0, "disabled", () => __props.disabled ?? false);
+      __attr(__el0, "aria-disabled", () => __props.disabled ?? false ? "true" : undefined);
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __on(__el0, "click", toggle);
+      __on(__el0, "keydown", (e) => {
+        if (isKey(e, Keys.Space)) {
+          e.preventDefault();
+          toggle();
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("span");
+        __el1.setAttribute("data-part", "thumb");
+        __attr(__el1, "data-state", () => checked.value ? "checked" : "unchecked");
+        __attr(__el1, "class", () => cn(__props.classes?.thumb));
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedSwitch = ComposedSwitchRoot;
+
+export { ComposedSwitch };

package/dist/shared/chunk-j9m2f0rd.js

@@ -0,0 +1,162 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/radio/radio-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, useContext } from "@vertz/ui";
+var RadioGroupContext = createContext(undefined, "@vertz/ui-primitives::RadioGroupContext");
+function RadioGroupItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(RadioGroupContext);
+    if (!ctx) {
+      throw new Error("<RadioGroup.Item> must be used inside <RadioGroup>. " + "Ensure it is a direct or nested child of the RadioGroup root component.");
+    }
+    const isDisabled = computed(() => __props.disabled ?? false);
+    const isChecked = computed(() => ctx.isSelected(__props.value));
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      {
+        const __v = { display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-radiogroup-item", "");
+      __on(__el0, "click", () => {
+        if (!isDisabled.value)
+          ctx.select(__props.value);
+      });
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        __el1.setAttribute("role", "radio");
+        __attr(__el1, "data-value", () => __props.value);
+        __attr(__el1, "aria-checked", () => isChecked.value ? "true" : "false");
+        __attr(__el1, "data-state", () => isChecked.value ? "checked" : "unchecked");
+        __attr(__el1, "tabindex", () => isChecked.value ? "0" : "-1");
+        __attr(__el1, "aria-disabled", () => isDisabled.value ? "true" : undefined);
+        __attr(__el1, "class", () => cn(ctx.classes?.item));
+        __attr(__el1, "style", () => ({ pointerEvents: isDisabled.value ? "none" : undefined, position: "relative" }));
+        __enterChildren(__el1);
+        __append(__el1, (() => {
+          const __el2 = __element("span");
+          __el2.setAttribute("data-part", "indicator");
+          __attr(__el2, "data-state", () => isChecked.value ? "checked" : "unchecked");
+          __attr(__el2, "class", () => cn(ctx.classes?.indicator));
+          __enterChildren(__el2);
+          __append(__el2, (() => {
+            const __el3 = __element("span");
+            __el3.setAttribute("data-part", "indicator-icon");
+            __attr(__el3, "class", () => cn(ctx.classes?.indicatorIcon));
+            return __el3;
+          })());
+          __exitChildren();
+          return __el2;
+        })());
+        __exitChildren();
+        return __el1;
+      })());
+      __append(__el0, __conditional(() => __props.children, () => (() => {
+        const __el4 = __element("span");
+        __enterChildren(__el4);
+        __append(__el4, __child(() => __props.children));
+        __exitChildren();
+        return __el4;
+      })(), () => null));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedRadioGroupRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let select = function(value) {
+      selectedValue.value = value;
+      __props.onValueChange?.(value);
+    };
+    const selectedValue = signal(__props.defaultValue ?? "", "selectedValue");
+    const ctx = {
+      isSelected: (value) => selectedValue.value === value,
+      classes: __props.classes,
+      select
+    };
+    const __mfResult0 = RadioGroupContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "radiogroup");
+      {
+        const __v = uniqueId("radiogroup");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __el0.setAttribute("data-radiogroup-root", "");
+      __on(__el0, "keydown", (event) => {
+        const root = event.currentTarget;
+        const items = [...root.querySelectorAll('[role="radio"]')];
+        const currentIdx = items.indexOf(document.activeElement);
+        if (currentIdx < 0)
+          return;
+        const len = items.length;
+        let nextIdx = -1;
+        if (isKey(event, Keys.ArrowDown, Keys.ArrowRight)) {
+          event.preventDefault();
+          nextIdx = (currentIdx + 1) % len;
+        } else if (isKey(event, Keys.ArrowUp, Keys.ArrowLeft)) {
+          event.preventDefault();
+          nextIdx = (currentIdx - 1 + len) % len;
+        } else if (isKey(event, Keys.Home)) {
+          event.preventDefault();
+          nextIdx = 0;
+        } else if (isKey(event, Keys.End)) {
+          event.preventDefault();
+          nextIdx = len - 1;
+        }
+        if (nextIdx < 0)
+          return;
+        const direction = isKey(event, Keys.End, Keys.ArrowUp, Keys.ArrowLeft) ? -1 : 1;
+        const startIdx = nextIdx;
+        while (items[nextIdx]?.getAttribute("aria-disabled") === "true") {
+          nextIdx = (nextIdx + direction + len) % len;
+          if (nextIdx === startIdx)
+            return;
+        }
+        const nextValue = items[nextIdx]?.getAttribute("data-value");
+        if (nextValue != null) {
+          select(nextValue);
+          items[nextIdx]?.focus();
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedRadioGroup = Object.assign(ComposedRadioGroupRoot, {
+  Item: RadioGroupItem
+});
+
+export { ComposedRadioGroup };

package/dist/shared/chunk-jpyjk616.js

@@ -0,0 +1,52 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/form-group/form-group-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var FormGroupContext = createContext(undefined, "@vertz/ui-primitives::FormGroupContext");
+function FormError(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(FormGroupContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("span");
+      __attr(__el0, "class", () => cn(ctx?.classes?.error, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedFormGroupRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = FormGroupContext.Provider({ get value() {
+      return { classes: __props.classes };
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(__props.classes?.base, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedFormGroup = Object.assign(ComposedFormGroupRoot, {
+  FormError
+});
+
+export { ComposedFormGroup };

package/dist/shared/{chunk-ttb2tt03.js → chunk-jsa3byag.js}

@@ -1,6 +1,6 @@
 import {
   createFloatingPosition
-} from "./chunk-0mcr52hc.js";
+} from "./chunk-vef3sepw.js";
 import {
   Keys,
   isKey

package/dist/shared/{chunk-9gfp3ffv.js → chunk-jzy1bkdk.js}

@@ -91,7 +91,6 @@ function ComboboxRoot(options = {}) {
         return __el2;
       })();
       optionElements.push(opt);
-      listbox.appendChild(opt);
       return opt;
     };
     const { defaultValue = "", onValueChange, onInputChange, ...attrs } = options;

package/dist/shared/{chunk-f2vx4tpw.js → chunk-knzg86am.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2db2dnp3.js";
 
 // src/scroll-area/scroll-area.tsx
-import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { __append, __conditional, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function ScrollAreaRoot(options = {}) {
   const __mfDepth = __pushMountFrame();
@@ -122,6 +122,8 @@ function ScrollAreaRoot(options = {}) {
       const __el4 = __element("div");
       return __el4;
     })();
+    const showY = orientation === "vertical" || orientation === "both";
+    const showX = orientation === "horizontal" || orientation === "both";
     const viewport = (() => {
       const __el5 = __element("div");
       {
@@ -145,13 +147,11 @@ function ScrollAreaRoot(options = {}) {
       }
       __enterChildren(__el6);
       __insert(__el6, viewport);
+      __append(__el6, __conditional(() => showY, () => scrollbarY, () => null));
+      __append(__el6, __conditional(() => showX, () => scrollbarX, () => null));
       __exitChildren();
       return __el6;
     })();
-    if (orientation === "vertical" || orientation === "both")
-      root.appendChild(scrollbarY);
-    if (orientation === "horizontal" || orientation === "both")
-      root.appendChild(scrollbarX);
     applyAttrs(root, attrs);
     const __mfResult0 = { root, viewport, content, scrollbarY, thumbY, scrollbarX, thumbX, state, update };
     __flushMountFrame();

package/dist/shared/chunk-kskxxc2q.js

@@ -0,0 +1,228 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/accordion/accordion-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, ref, useContext } from "@vertz/ui";
+var AccordionContext = createContext(undefined, "@vertz/ui-primitives::AccordionContext");
+var AccordionItemContext = createContext(undefined, "@vertz/ui-primitives::AccordionItemContext");
+function useAccordionContext(componentName) {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error(`<Accordion.${componentName}> must be used inside <Accordion>. ` + "Ensure it is a direct or nested child of the Accordion root component.");
+  }
+  return ctx;
+}
+function AccordionItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useAccordionContext("Item");
+    const baseId = uniqueId("accordion");
+    const triggerId = `${baseId}-trigger`;
+    const contentId = `${baseId}-content`;
+    const contentRef = ref();
+    const triggerRef = ref();
+    const itemCtx = {
+      value: __props.value,
+      triggerId,
+      contentId,
+      contentRef,
+      triggerRef,
+      classes: ctx.classes,
+      isOpen: () => ctx.isOpen(__props.value),
+      toggle: () => {
+        const prevHeight = contentRef.current?.scrollHeight ?? 0;
+        ctx.toggle(__props.value);
+        const nowOpen = ctx.isOpen(__props.value);
+        const contentEl = contentRef.current;
+        if (contentEl) {
+          if (nowOpen) {
+            setHidden(contentEl, false);
+            const height = contentEl.scrollHeight;
+            contentEl.style.setProperty("--accordion-content-height", `${height}px`);
+            setDataState(contentEl, "open");
+          } else {
+            contentEl.style.display = "";
+            contentEl.setAttribute("aria-hidden", "false");
+            contentEl.setAttribute("data-state", "open");
+            contentEl.style.setProperty("--accordion-content-height", `${prevHeight}px`);
+            contentEl.offsetHeight;
+            setDataState(contentEl, "closed");
+            setHiddenAnimated(contentEl, true);
+          }
+        }
+        const triggerEl = triggerRef.current;
+        if (triggerEl) {
+          setExpanded(triggerEl, nowOpen);
+          setDataState(triggerEl, nowOpen ? "open" : "closed");
+        }
+      }
+    };
+    const __mfResult0 = AccordionItemContext.Provider({ get value() {
+      return itemCtx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-accordion-item", "");
+      __attr(__el0, "data-value", () => __props.value);
+      {
+        const __v = cn(ctx.classes?.item);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("class", __v === true ? "" : __v);
+      }
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AccordionTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(AccordionItemContext);
+    if (!ctx) {
+      throw new Error("<Accordion.Trigger> must be used inside <Accordion.Item>. " + "Ensure it is a direct or nested child of an Accordion Item component.");
+    }
+    const initiallyOpen = computed(() => ctx.isOpen());
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      ctx.triggerRef.current = __el0;
+      __el0.setAttribute("type", "button");
+      __attr(__el0, "id", () => ctx.triggerId);
+      __el0.setAttribute("data-accordion-trigger", "");
+      __attr(__el0, "aria-controls", () => ctx.contentId);
+      __attr(__el0, "data-value", () => ctx.value);
+      __attr(__el0, "aria-expanded", () => initiallyOpen.value ? "true" : "false");
+      __attr(__el0, "data-state", () => initiallyOpen.value ? "open" : "closed");
+      __attr(__el0, "class", () => cn(ctx.classes?.trigger, __props.className ?? __props.class));
+      __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 AccordionContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(AccordionItemContext);
+    if (!ctx) {
+      throw new Error("<Accordion.Content> must be used inside <Accordion.Item>. " + "Ensure it is a direct or nested child of an Accordion Item component.");
+    }
+    const el = computed(() => (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "region");
+      __attr(__el0, "id", () => ctx.contentId);
+      __el0.setAttribute("data-accordion-content", "");
+      __attr(__el0, "aria-labelledby", () => ctx.triggerId);
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        __el1.setAttribute("data-part", "content-inner");
+        __enterChildren(__el1);
+        __append(__el1, __child(() => __props.children));
+        __exitChildren();
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })());
+    const isOpen = computed(() => ctx.isOpen());
+    el.value.setAttribute("aria-hidden", isOpen.value ? "false" : "true");
+    el.value.setAttribute("data-state", isOpen.value ? "open" : "closed");
+    if (!isOpen.value)
+      el.value.style.display = "none";
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedAccordionRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const multiple = computed(() => __props.type === "multiple");
+    const openValues = signal([...__props.defaultValue ?? []], "openValues");
+    const ctx = {
+      classes: __props.classes,
+      isOpen: (value) => openValues.value.includes(value),
+      toggle: (value) => {
+        const current = [...openValues.value];
+        const idx = current.indexOf(value);
+        if (idx >= 0) {
+          current.splice(idx, 1);
+        } else {
+          if (multiple.value) {
+            current.push(value);
+          } else {
+            current.length = 0;
+            current.push(value);
+          }
+        }
+        openValues.value = current;
+        __props.onValueChange?.(current);
+      }
+    };
+    const __mfResult0 = AccordionContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-orientation", "vertical");
+      __el0.setAttribute("data-accordion-root", "");
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
+          const root = event.currentTarget;
+          const triggers = [...root.querySelectorAll("[data-accordion-trigger]")];
+          handleListNavigation(event, triggers, { orientation: "vertical" });
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedAccordion = Object.assign(ComposedAccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+
+export { ComposedAccordion };

package/dist/shared/chunk-metxdt5x.js

@@ -0,0 +1,28 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/label/label-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+function ComposedLabelRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("label");
+      __attr(__el0, "class", () => cn(__props.classes?.base, __props.className ?? __props.class));
+      __attr(__el0, "for", () => __props.for);
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedLabel = ComposedLabelRoot;
+
+export { ComposedLabel };