@vertz/ui-primitives 0.2.41 → 0.2.43

package/dist/shared/chunk-993ff51d.js

@@ -0,0 +1,155 @@
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated,
+  setSelected
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/combobox/combobox.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function ComboboxRoot(options = {}) {
+  const { defaultValue = "", onValueChange, onInputChange, ...attrs } = options;
+  const ids = linkedIds("combobox");
+  const state = {
+    open: signal(false),
+    value: signal(defaultValue),
+    inputValue: signal(defaultValue),
+    activeIndex: signal(-1)
+  };
+  const optionElements = [];
+  function open() {
+    state.open.value = true;
+    setExpanded(input, true);
+    setHidden(listbox, false);
+    setDataState(listbox, "open");
+  }
+  function close() {
+    state.open.value = false;
+    state.activeIndex.value = -1;
+    setExpanded(input, false);
+    setDataState(listbox, "closed");
+    setHiddenAnimated(listbox, true);
+    updateActiveDescendant(-1);
+  }
+  function selectOption(value) {
+    state.value.value = value;
+    state.inputValue.value = value;
+    input.value = value;
+    for (const opt of optionElements) {
+      const isActive = opt.getAttribute("data-value") === value;
+      setSelected(opt, isActive);
+      setDataState(opt, isActive ? "active" : "inactive");
+    }
+    onValueChange?.(value);
+    close();
+    input.focus();
+  }
+  function updateActiveDescendant(index) {
+    const opt = optionElements[index];
+    if (index >= 0 && opt) {
+      input.setAttribute("aria-activedescendant", opt.id);
+      for (let i = 0;i < optionElements.length; i++) {
+        const el = optionElements[i];
+        if (el)
+          setDataState(el, i === index ? "active" : "inactive");
+      }
+    } else {
+      input.removeAttribute("aria-activedescendant");
+    }
+  }
+  const input = jsxDEV_7x81h0kn("input", {
+    type: "text",
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-controls": ids.contentId,
+    "aria-haspopup": "listbox",
+    id: ids.triggerId,
+    value: defaultValue,
+    "aria-expanded": "false",
+    onInput: () => {
+      state.inputValue.value = input.value;
+      onInputChange?.(input.value);
+      if (!state.open.peek())
+        open();
+    },
+    onFocus: () => {
+      if (!state.open.peek() && input.value.length > 0)
+        open();
+    },
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isKey(event, Keys.ArrowDown)) {
+        event.preventDefault();
+        if (!state.open.peek()) {
+          open();
+        }
+        const next = Math.min(state.activeIndex.peek() + 1, optionElements.length - 1);
+        state.activeIndex.value = next;
+        updateActiveDescendant(next);
+        return;
+      }
+      if (isKey(event, Keys.ArrowUp)) {
+        event.preventDefault();
+        const prev = Math.max(state.activeIndex.peek() - 1, 0);
+        state.activeIndex.value = prev;
+        updateActiveDescendant(prev);
+        return;
+      }
+      if (isKey(event, Keys.Enter)) {
+        event.preventDefault();
+        const idx = state.activeIndex.peek();
+        if (idx >= 0 && idx < optionElements.length) {
+          const val = optionElements[idx]?.getAttribute("data-value");
+          if (val != null)
+            selectOption(val);
+        }
+        return;
+      }
+    }
+  }, undefined, false, undefined, this);
+  const listbox = jsxDEV_7x81h0kn("div", {
+    role: "listbox",
+    id: ids.contentId,
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" }
+  }, undefined, false, undefined, this);
+  function Option(value, label) {
+    const optId = `${ids.contentId}-opt-${optionElements.length}`;
+    const isSelectedOpt = value === defaultValue;
+    const opt = jsxDEV_7x81h0kn("div", {
+      role: "option",
+      id: optId,
+      "data-value": value,
+      "aria-selected": isSelectedOpt ? "true" : "false",
+      "data-state": isSelectedOpt ? "active" : "inactive",
+      onClick: () => selectOption(value),
+      children: label ?? value
+    }, undefined, false, undefined, this);
+    optionElements.push(opt);
+    return opt;
+  }
+  applyAttrs(input, attrs);
+  return { input, listbox, state, Option };
+}
+var Combobox = {
+  Root: ComboboxRoot
+};
+
+export { Combobox };

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

@@ -0,0 +1,24 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/badge/badge.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function BadgeRoot(options = {}) {
+  const { variant = "default", ...attrs } = options;
+  const badge = jsxDEV_7x81h0kn("span", {
+    id: uniqueId("badge"),
+    "data-slot": "badge",
+    "data-variant": variant
+  }, undefined, false, undefined, this);
+  applyAttrs(badge, attrs);
+  return { badge };
+}
+var Badge = {
+  Root: BadgeRoot
+};
+
+export { Badge };

package/dist/shared/chunk-a71m4xkv.js

@@ -0,0 +1,106 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  focusFirst,
+  saveFocus
+} from "./chunk-e2v1c9ex.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/popover/popover.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function PopoverRoot(options = {}) {
+  const { defaultOpen = false, onOpenChange, positioning, ...attrs } = options;
+  const ids = linkedIds("popover");
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  function open() {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(content, "open");
+    restoreFocus = saveFocus();
+    queueMicrotask(() => focusFirst(content));
+    if (positioning) {
+      const result = createFloatingPosition(trigger, content, positioning);
+      floatingCleanup = result.cleanup;
+      dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements: [trigger, content],
+        escapeKey: false
+      });
+    }
+    onOpenChange?.(true);
+  }
+  function close() {
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(content, true);
+    floatingCleanup?.();
+    floatingCleanup = null;
+    dismissCleanup?.();
+    dismissCleanup = null;
+    restoreFocus?.();
+    restoreFocus = null;
+    onOpenChange?.(false);
+  }
+  const trigger = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    id: ids.triggerId,
+    "aria-controls": ids.contentId,
+    "aria-haspopup": "dialog",
+    "aria-expanded": defaultOpen ? "true" : "false",
+    "data-state": defaultOpen ? "open" : "closed",
+    onClick: () => {
+      if (state.open.peek()) {
+        close();
+      } else {
+        open();
+      }
+    }
+  }, undefined, false, undefined, this);
+  const content = jsxDEV_7x81h0kn("div", {
+    role: "dialog",
+    id: ids.contentId,
+    "aria-hidden": defaultOpen ? "false" : "true",
+    "data-state": defaultOpen ? "open" : "closed",
+    style: { display: defaultOpen ? "" : "none" },
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+      }
+    }
+  }, undefined, false, undefined, this);
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state };
+}
+var Popover = {
+  Root: PopoverRoot
+};
+
+export { Popover };

package/dist/shared/chunk-aj8m39pk.js

@@ -0,0 +1,127 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  handleListNavigation
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setHidden,
+  setSelected
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/tabs/tabs.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function TabList(orientation, triggers, tabValues, selectTab) {
+  return jsxDEV_7x81h0kn("div", {
+    role: "tablist",
+    "aria-orientation": orientation === "vertical" ? "vertical" : undefined,
+    onKeydown: (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);
+        }
+      }
+    }
+  }, undefined, false, undefined, this);
+}
+function TabTrigger(triggerId, panelId, value, label, isActive, selectTab) {
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    role: "tab",
+    id: triggerId,
+    "aria-controls": panelId,
+    "data-value": value,
+    "aria-selected": isActive ? "true" : "false",
+    "data-state": isActive ? "active" : "inactive",
+    onClick: () => {
+      selectTab(value);
+    },
+    children: label ?? value
+  }, undefined, false, undefined, this);
+}
+function TabsContainer(list) {
+  return jsxDEV_7x81h0kn("div", {
+    children: list
+  }, undefined, false, undefined, this);
+}
+function TabPanel(panelId, triggerId, isActive) {
+  return jsxDEV_7x81h0kn("div", {
+    role: "tabpanel",
+    id: panelId,
+    "aria-labelledby": triggerId,
+    tabindex: "0",
+    "aria-hidden": isActive ? "false" : "true",
+    "data-state": isActive ? "active" : "inactive",
+    style: { display: isActive ? "" : "none" }
+  }, undefined, false, undefined, this);
+}
+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);
+    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 };