@vertz/ui-primitives 0.2.21 → 0.2.23

package/dist/shared/chunk-7cb3z0s8.js

@@ -0,0 +1,287 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated,
+  setSelected
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/select/select.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function SelectRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let updateActiveItem = function(index) {
+      for (let i = 0;i < items.length; i++) {
+        items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+      }
+    }, selectItem = function(value) {
+      state.value.value = value;
+      for (const item of items) {
+        const isActive = item.getAttribute("data-value") === value;
+        setSelected(item, isActive);
+        setDataState(item, isActive ? "active" : "inactive");
+        if (isActive) {
+          triggerText.textContent = item.textContent ?? value;
+        }
+      }
+      onValueChange?.(value);
+      close();
+    }, open = function() {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(content, false);
+      setDataState(trigger, "open");
+      setDataState(content, "open");
+      if (positioning) {
+        const result = createFloatingPosition(trigger, content, positioning);
+        floatingCleanup = result.cleanup;
+        dismissCleanup = createDismiss({
+          onDismiss: close,
+          insideElements: [trigger, content],
+          escapeKey: false
+        });
+      } else {
+        const rect = trigger.getBoundingClientRect();
+        const side = window.innerHeight - rect.bottom >= rect.top ? "bottom" : "top";
+        content.setAttribute("data-side", side);
+      }
+      const selectedIdx = items.findIndex((item) => item.getAttribute("data-value") === state.value.peek());
+      if (selectedIdx >= 0) {
+        state.activeIndex.value = selectedIdx;
+        updateActiveItem(selectedIdx);
+        items[selectedIdx]?.focus();
+      } else {
+        state.activeIndex.value = -1;
+        updateActiveItem(-1);
+        content.focus();
+      }
+    }, close = function() {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setDataState(trigger, "closed");
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      floatingCleanup?.();
+      floatingCleanup = null;
+      dismissCleanup?.();
+      dismissCleanup = null;
+      trigger.focus();
+    }, createItem = function(value, label, parent) {
+      const isSelectedItem = value === defaultValue;
+      const item = (() => {
+        const __el3 = __element("div");
+        __el3.setAttribute("role", "option");
+        {
+          const __v = value;
+          if (__v != null && __v !== false)
+            __el3.setAttribute("data-value", __v === true ? "" : __v);
+        }
+        __el3.setAttribute("tabindex", "-1");
+        {
+          const __v = isSelectedItem ? "true" : "false";
+          if (__v != null && __v !== false)
+            __el3.setAttribute("aria-selected", __v === true ? "" : __v);
+        }
+        {
+          const __v = isSelectedItem ? "active" : "inactive";
+          if (__v != null && __v !== false)
+            __el3.setAttribute("data-state", __v === true ? "" : __v);
+        }
+        __on(__el3, "click", () => selectItem(value));
+        __enterChildren(__el3);
+        __insert(__el3, label ?? value);
+        __exitChildren();
+        return __el3;
+      })();
+      if (isSelectedItem) {
+        triggerText.textContent = item.textContent ?? value;
+      }
+      items.push(item);
+      (parent ?? content).appendChild(item);
+      return item;
+    }, Item = function(value, label) {
+      return createItem(value, label);
+    }, Group = function(label) {
+      const el = (() => {
+        const __el4 = __element("div");
+        __el4.setAttribute("role", "group");
+        {
+          const __v = label;
+          if (__v != null && __v !== false)
+            __el4.setAttribute("aria-label", __v === true ? "" : __v);
+        }
+        return __el4;
+      })();
+      content.appendChild(el);
+      return {
+        el,
+        Item: (value, itemLabel) => createItem(value, itemLabel, el)
+      };
+    }, Separator = function() {
+      const hr = (() => {
+        const __el5 = __element("hr");
+        __el5.setAttribute("role", "separator");
+        return __el5;
+      })();
+      content.appendChild(hr);
+      return hr;
+    };
+    const { defaultValue = "", placeholder = "", onValueChange, positioning, ...attrs } = options;
+    const ids = linkedIds("select");
+    const state = {
+      open: signal(false),
+      value: signal(defaultValue),
+      activeIndex: signal(-1)
+    };
+    const items = [];
+    let floatingCleanup = null;
+    let dismissCleanup = null;
+    const triggerText = (() => {
+      const __el0 = __element("span");
+      __el0.setAttribute("data-part", "value");
+      __enterChildren(__el0);
+      __insert(__el0, defaultValue || placeholder);
+      __exitChildren();
+      return __el0;
+    })();
+    const trigger = (() => {
+      const __el1 = __element("button");
+      __el1.setAttribute("type", "button");
+      __el1.setAttribute("role", "combobox");
+      {
+        const __v = ids.triggerId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el1.setAttribute("aria-haspopup", "listbox");
+      __el1.setAttribute("aria-expanded", "false");
+      __el1.setAttribute("data-state", "closed");
+      __on(__el1, "click", () => {
+        if (state.open.peek()) {
+          close();
+        } else {
+          open();
+        }
+      });
+      __on(__el1, "keydown", (event) => {
+        if (isKey(event, Keys.ArrowDown, Keys.ArrowUp, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          if (!state.open.peek()) {
+            open();
+          }
+        }
+      });
+      __enterChildren(__el1);
+      __insert(__el1, triggerText);
+      __exitChildren();
+      return __el1;
+    })();
+    const content = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("role", "listbox");
+      __el2.setAttribute("tabindex", "-1");
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el2.setAttribute("aria-hidden", "true");
+      __el2.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el2.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __on(__el2, "keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          close();
+          return;
+        }
+        if (isKey(event, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          const active = items[state.activeIndex.peek()];
+          if (active) {
+            const val = active.getAttribute("data-value");
+            if (val !== null)
+              selectItem(val);
+          }
+          return;
+        }
+        if (state.activeIndex.peek() === -1) {
+          if (isKey(event, Keys.ArrowDown)) {
+            event.preventDefault();
+            state.activeIndex.value = 0;
+            updateActiveItem(0);
+            items[0]?.focus();
+            return;
+          }
+          if (isKey(event, Keys.ArrowUp)) {
+            event.preventDefault();
+            const last = items.length - 1;
+            state.activeIndex.value = last;
+            updateActiveItem(last);
+            items[last]?.focus();
+            return;
+          }
+        }
+        const result = handleListNavigation(event, items, { orientation: "vertical" });
+        if (result) {
+          const idx = items.indexOf(result);
+          if (idx >= 0) {
+            state.activeIndex.value = idx;
+            updateActiveItem(idx);
+          }
+          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) {
+            const idx = items.indexOf(match);
+            state.activeIndex.value = idx;
+            updateActiveItem(idx);
+            match.focus();
+          }
+        }
+      });
+      return __el2;
+    })();
+    applyAttrs(trigger, attrs);
+    const __mfResult0 = { trigger, content, state, Item, Group, Separator };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Select = {
+  Root: SelectRoot
+};
+
+export { Select };

package/dist/shared/chunk-8c01c8mb.js

@@ -0,0 +1,217 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  handleListNavigation
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setHidden,
+  setSelected
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/tabs/tabs.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function TabList(orientation, triggers, tabValues, selectTab) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "tablist");
+      {
+        const __v = orientation === "vertical" ? "vertical" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-orientation", __v === true ? "" : __v);
+      }
+      __on(__el0, "keydown", (event) => {
+        const result = handleListNavigation(event, triggers, {
+          orientation
+        });
+        if (result) {
+          const idx = triggers.indexOf(result);
+          if (idx >= 0) {
+            const val = tabValues[idx];
+            if (val !== undefined)
+              selectTab(val);
+          }
+        }
+      });
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TabTrigger(triggerId, panelId, value, label, isActive, selectTab) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("role", "tab");
+      {
+        const __v = triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = panelId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __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-selected", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "active" : "inactive";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el0, "click", () => {
+        selectTab(value);
+      });
+      __enterChildren(__el0);
+      __insert(__el0, label ?? value);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TabsContainer(list) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __enterChildren(__el0);
+      __insert(__el0, list);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TabPanel(panelId, triggerId, isActive) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "tabpanel");
+      {
+        const __v = panelId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-labelledby", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("tabindex", "0");
+      {
+        const __v = isActive ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "active" : "inactive";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: isActive ? "" : "none" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TabsRoot(options = {}) {
+  const { defaultValue = "", orientation = "horizontal", onValueChange, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const triggers = [];
+  const panels = [];
+  const tabValues = [];
+  function selectTab(value) {
+    state.value.value = value;
+    for (let i = 0;i < tabValues.length; i++) {
+      const isActive = tabValues[i] === value;
+      const trig = triggers[i];
+      const panel = panels[i];
+      if (!trig || !panel)
+        continue;
+      setSelected(trig, isActive);
+      setDataState(trig, isActive ? "active" : "inactive");
+      trig.setAttribute("tabindex", isActive ? "0" : "-1");
+      setHidden(panel, !isActive);
+      setDataState(panel, isActive ? "active" : "inactive");
+    }
+    onValueChange?.(value);
+  }
+  const list = TabList(orientation, triggers, tabValues, selectTab);
+  const root = TabsContainer(list);
+  const cleanups = [];
+  function Tab(value, label) {
+    const baseId = uniqueId("tab");
+    const triggerId = `${baseId}-trigger`;
+    const panelId = `${baseId}-panel`;
+    const isActive = value === state.value.peek();
+    const trig = TabTrigger(triggerId, panelId, value, label, isActive, selectTab);
+    const handleClick = () => {
+      trig.focus();
+    };
+    trig.addEventListener("click", handleClick);
+    cleanups.push(() => trig.removeEventListener("click", handleClick));
+    const panel = TabPanel(panelId, triggerId, isActive);
+    triggers.push(trig);
+    panels.push(panel);
+    tabValues.push(value);
+    list.appendChild(trig);
+    root.appendChild(panel);
+    setRovingTabindex(triggers, triggers.findIndex((t) => tabValues[triggers.indexOf(t)] === state.value.peek()));
+    return { trigger: trig, panel };
+  }
+  function destroy() {
+    for (const cleanup of cleanups)
+      cleanup();
+    cleanups.length = 0;
+  }
+  applyAttrs(root, attrs);
+  return { root, list, state, Tab, destroy };
+}
+var Tabs = {
+  Root: TabsRoot
+};
+
+export { Tabs };

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 };