@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-98y1sw9y.js

@@ -0,0 +1,398 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/select/select-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, onMount, ref, useContext } from "@vertz/ui";
+var SelectContext = createContext(undefined, "@vertz/ui-primitives::SelectContext");
+function useSelectContext(componentName) {
+  const ctx = useContext(SelectContext);
+  if (!ctx) {
+    throw new Error(`<Select.${componentName}> must be used inside <Select>. ` + "Ensure it is a direct or nested child of the Select root component.");
+  }
+  return ctx;
+}
+function SelectTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSelectContext("Trigger");
+    const displayText = computed(() => __props.children ?? (ctx.selectedValue() || ctx.placeholder || ""));
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("role", "combobox");
+      __el0.setAttribute("data-select-trigger", "");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-haspopup", "listbox");
+      __el0.setAttribute("aria-expanded", "false");
+      __el0.setAttribute("data-state", "closed");
+      __attr(__el0, "class", () => cn(ctx.classes?.trigger, __props.className ?? __props.class));
+      __on(__el0, "click", () => ctx.toggle());
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.ArrowDown, Keys.ArrowUp, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          if (!ctx.isOpen())
+            ctx.open();
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("span");
+        __el1.setAttribute("data-part", "text");
+        {
+          const __v = {
+            flex: 1,
+            textAlign: "start",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          };
+          if (__v != null && __v !== false)
+            __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        __enterChildren(__el1);
+        __append(__el1, __child(() => displayText.value));
+        __exitChildren();
+        return __el1;
+      })());
+      __append(__el0, (() => {
+        const __el2 = __element("span");
+        __el2.setAttribute("data-part", "chevron");
+        __enterChildren(__el2);
+        __append(__el2, (() => {
+          const __el3 = __element("svg");
+          __el3.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+          __el3.setAttribute("width", "16");
+          __el3.setAttribute("height", "16");
+          __el3.setAttribute("viewBox", "0 0 24 24");
+          __el3.setAttribute("fill", "none");
+          __el3.setAttribute("stroke", "currentColor");
+          __el3.setAttribute("stroke-width", "2");
+          __el3.setAttribute("stroke-linecap", "round");
+          __el3.setAttribute("stroke-linejoin", "round");
+          __el3.setAttribute("aria-hidden", "true");
+          __enterChildren(__el3);
+          __append(__el3, (() => {
+            const __el4 = __element("path");
+            __el4.setAttribute("d", "m6 9 6 6 6-6");
+            return __el4;
+          })());
+          __exitChildren();
+          return __el3;
+        })());
+        __exitChildren();
+        return __el2;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SelectContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSelectContext("Content");
+    const instanceIndex = ctx._contentCount.value++;
+    if (instanceIndex > 0) {
+      console.warn("Duplicate <Select.Content> detected – only the first is used");
+    }
+    onMount(() => {
+      const el = ctx.contentRef.current;
+      if (!el || el.__selectWired)
+        return;
+      el.__selectWired = true;
+      el.addEventListener("keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          ctx.close();
+          return;
+        }
+        const items = [...el.querySelectorAll('[role="option"]')];
+        const focusedIdx = items.indexOf(document.activeElement);
+        if (isKey(event, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          const active = items[focusedIdx];
+          if (active) {
+            const val = active.getAttribute("data-value");
+            if (val !== null)
+              ctx.selectItem(val);
+          }
+          return;
+        }
+        const result = handleListNavigation(event, items, { orientation: "vertical" });
+        if (result)
+          return;
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+          const char = event.key.toLowerCase();
+          const match = items.find((item) => item.textContent?.toLowerCase().startsWith(char));
+          if (match)
+            match.focus();
+        }
+      });
+    });
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "listbox");
+      __el0.setAttribute("tabindex", "-1");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-select-content", "");
+      __el0.setAttribute("aria-hidden", "true");
+      __el0.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SelectItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSelectContext("Item");
+    const isSelected = computed(() => ctx.selectedValue() === __props.value);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "option");
+      __attr(__el0, "data-value", () => __props.value);
+      __el0.setAttribute("tabindex", "-1");
+      __attr(__el0, "aria-selected", () => isSelected.value ? "true" : "false");
+      __attr(__el0, "data-state", () => isSelected.value ? "active" : "inactive");
+      __attr(__el0, "class", () => cn(ctx.classes?.item, __props.className ?? __props.class));
+      __on(__el0, "click", () => ctx.selectItem(__props.value));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children ?? __props.value));
+      __append(__el0, (() => {
+        const __el1 = __element("span");
+        __el1.setAttribute("data-part", "indicator");
+        __attr(__el1, "style", () => ({ display: isSelected.value ? "" : "none" }));
+        {
+          const __v = cn(ctx.classes?.itemIndicator);
+          if (__v != null && __v !== false)
+            __el1.setAttribute("class", __v === true ? "" : __v);
+        }
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SelectGroup(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useSelectContext("Group");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "group");
+      __attr(__el0, "aria-label", () => __props.label);
+      __attr(__el0, "class", () => cn(ctx.classes?.group, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        __el1.setAttribute("data-part", "group-label");
+        __el1.setAttribute("role", "none");
+        __attr(__el1, "class", () => cn(ctx.classes?.label));
+        __enterChildren(__el1);
+        __append(__el1, __child(() => __props.label));
+        __exitChildren();
+        return __el1;
+      })());
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function SelectSeparator(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useSelectContext("Separator");
+    const __mfResult0 = (() => {
+      const __el0 = __element("hr");
+      __el0.setAttribute("role", "separator");
+      __attr(__el0, "class", () => cn(classes?.separator, __props.className ?? __props.class));
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedSelectRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let getContentEl = function() {
+      return contentRef.current ?? null;
+    }, getTriggerEl = function() {
+      const content = getContentEl();
+      return content?.parentElement?.querySelector("[data-select-trigger]");
+    }, syncTriggerAttrs = function(nowOpen) {
+      const trigger = getTriggerEl();
+      if (!trigger)
+        return;
+      trigger.setAttribute("aria-expanded", nowOpen ? "true" : "false");
+      trigger.setAttribute("data-state", nowOpen ? "open" : "closed");
+    }, showContent = function() {
+      const content = getContentEl();
+      if (!content)
+        return;
+      content.setAttribute("data-state", "open");
+      content.setAttribute("aria-hidden", "false");
+      content.style.display = "";
+    }, hideContent = function() {
+      const content = getContentEl();
+      if (!content)
+        return;
+      content.setAttribute("data-state", "closed");
+      setHiddenAnimated(content, true);
+    }, open = function() {
+      isOpen.value = true;
+      syncTriggerAttrs(true);
+      showContent();
+      const contentEl = getContentEl();
+      const triggerEl = getTriggerEl();
+      if (!contentEl)
+        return;
+      contentEl.style.position = "fixed";
+      if (triggerEl) {
+        const floatingOpts = { matchReferenceWidth: true, ...__props.positioning };
+        const result = createFloatingPosition(triggerEl, contentEl, floatingOpts);
+        state.floatingCleanup = result.cleanup;
+      }
+      const insideElements = [contentEl, ...triggerEl ? [triggerEl] : []];
+      state.dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements
+      });
+      const items = [...contentEl.querySelectorAll('[role="option"]')];
+      const selectedIdx = items.findIndex((el) => el.getAttribute("data-value") === selectedValue.value);
+      if (selectedIdx >= 0) {
+        items.forEach((el, i) => el.setAttribute("tabindex", i === selectedIdx ? "0" : "-1"));
+        items[selectedIdx]?.focus();
+      } else {
+        contentEl.focus();
+      }
+    }, close = function() {
+      isOpen.value = false;
+      syncTriggerAttrs(false);
+      hideContent();
+      state.floatingCleanup?.();
+      state.floatingCleanup = null;
+      state.dismissCleanup?.();
+      state.dismissCleanup = null;
+      getTriggerEl()?.focus();
+    }, toggle = function() {
+      if (isOpen.value)
+        close();
+      else
+        open();
+    }, selectItem = function(value) {
+      selectedValue.value = value;
+      __props.onValueChange?.(value);
+      close();
+    };
+    const ids = linkedIds("select");
+    const contentRef = ref();
+    const isOpen = signal(false, "isOpen");
+    const selectedValue = signal(__props.defaultValue ?? "", "selectedValue");
+    const state = { floatingCleanup: null, dismissCleanup: null };
+    const ctx = {
+      isOpen: () => isOpen.value,
+      selectedValue: () => selectedValue.value,
+      placeholder: __props.placeholder,
+      contentId: ids.contentId,
+      contentRef,
+      classes: __props.classes,
+      open,
+      close,
+      toggle,
+      selectItem,
+      _contentCount: { value: 0 }
+    };
+    const __mfResult0 = SelectContext.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-select-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedSelect = Object.assign(ComposedSelectRoot, {
+  Trigger: SelectTrigger,
+  Content: SelectContent,
+  Item: SelectItem,
+  Group: SelectGroup,
+  Separator: SelectSeparator
+});
+
+export { ComposedSelect };

package/dist/shared/chunk-99tk72t3.js

@@ -0,0 +1,69 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/switch/switch.tsx
+import { computed, signal } from "@vertz/ui";
+import { __attr, __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+function SwitchRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (disabled)
+        return;
+      checked.value = !checked.value;
+      onCheckedChange?.(checked.value);
+    };
+    const { defaultChecked = false, disabled = false, onCheckedChange, ...attrs } = options;
+    const checked = signal(defaultChecked, "checked");
+    const el = computed(() => (() => {
+      const __el0 = __element("button");
+      __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");
+      {
+        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 Switch = {
+  Root: SwitchRoot
+};
+
+export { Switch };

package/dist/shared/chunk-9eedsnnk.js

@@ -0,0 +1,164 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/toggle-group/toggle-group-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 ToggleGroupContext = createContext(undefined, "@vertz/ui-primitives::ToggleGroupContext");
+function useToggleGroupContext(componentName) {
+  const ctx = useContext(ToggleGroupContext);
+  if (!ctx) {
+    throw new Error(`<ToggleGroup.${componentName}> must be used inside <ToggleGroup>. ` + "Ensure it is a direct or nested child of the ToggleGroup root component.");
+  }
+  return ctx;
+}
+function ToggleGroupItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useToggleGroupContext("Item");
+    const isOn = computed(() => ctx.selectedValues.includes(__props.value));
+    const isFirst = ctx.claimFirstItem();
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("data-togglegroup-item", "");
+      __attr(__el0, "data-value", () => __props.value);
+      __attr(__el0, "aria-pressed", () => isOn.value ? "true" : "false");
+      __attr(__el0, "data-state", () => isOn.value ? "on" : "off");
+      {
+        const __v = ctx.disabled;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = ctx.disabled ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = isFirst ? "0" : "-1";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("tabindex", __v === true ? "" : __v);
+      }
+      {
+        const __v = cn(ctx.classes?.item);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("class", __v === true ? "" : __v);
+      }
+      __on(__el0, "click", () => ctx.toggle(__props.value));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedToggleGroupRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function(itemValue) {
+      if (__props.disabled ?? false)
+        return;
+      const current = [...selectedValues.value];
+      const idx = current.indexOf(itemValue);
+      if ((__props.type ?? "single") === "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);
+        }
+      }
+      selectedValues.value = current;
+      __props.onValueChange?.(current);
+    };
+    const selectedValues = signal([...__props.defaultValue ?? []], "selectedValues");
+    const _state = { firstItemClaimed: false };
+    const ctx = {
+      selectedValues,
+      classes: __props.classes,
+      disabled: __props.disabled ?? false,
+      toggle,
+      claimFirstItem: () => {
+        if (_state.firstItemClaimed)
+          return false;
+        _state.firstItemClaimed = true;
+        return true;
+      }
+    };
+    const __mfResult0 = ToggleGroupContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "group");
+      {
+        const __v = uniqueId("toggle-group");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "data-orientation", () => __props.orientation ?? "horizontal");
+      __el0.setAttribute("data-togglegroup-root", "");
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __on(__el0, "keydown", (event) => {
+        if (!isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
+          return;
+        }
+        event.preventDefault();
+        const root = event.currentTarget;
+        const items = [...root.querySelectorAll("[data-togglegroup-item]")];
+        const currentIdx = items.indexOf(document.activeElement);
+        if (currentIdx < 0)
+          return;
+        const len = items.length;
+        let nextIdx;
+        if (isKey(event, Keys.ArrowRight, Keys.ArrowDown)) {
+          nextIdx = (currentIdx + 1) % len;
+        } else if (isKey(event, Keys.ArrowLeft, Keys.ArrowUp)) {
+          nextIdx = (currentIdx - 1 + len) % len;
+        } else if (isKey(event, Keys.Home)) {
+          nextIdx = 0;
+        } else if (isKey(event, Keys.End)) {
+          nextIdx = len - 1;
+        } else {
+          return;
+        }
+        items.forEach((el, j) => el.setAttribute("tabindex", j === nextIdx ? "0" : "-1"));
+        items[nextIdx]?.focus();
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedToggleGroup = Object.assign(ComposedToggleGroupRoot, {
+  Item: ToggleGroupItem
+});
+
+export { ComposedToggleGroup };