@vertz/ui-primitives 0.2.16 → 0.2.17

package/dist/shared/chunk-ttsyf6ma.js

@@ -0,0 +1,239 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setHidden
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/command/command.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function CommandRoot(options = {}) {
+  const { filter: customFilter, onSelect, onInputChange, placeholder, ...attrs } = options;
+  const listId = uniqueId("command-list");
+  const state = {
+    inputValue: signal(""),
+    activeIndex: signal(0)
+  };
+  const allItems = [];
+  const groups = new Map;
+  const defaultFilter = (value, search) => {
+    return value.toLowerCase().includes(search.toLowerCase());
+  };
+  const filterFn = customFilter ?? defaultFilter;
+  function getVisibleItems() {
+    return allItems.filter((item) => item.getAttribute("aria-hidden") !== "true");
+  }
+  function updateActiveItem() {
+    const visible = getVisibleItems();
+    const activeIdx = state.activeIndex.peek();
+    for (const item of allItems) {
+      item.setAttribute("aria-selected", "false");
+    }
+    if (visible.length > 0 && activeIdx >= 0 && activeIdx < visible.length) {
+      visible[activeIdx]?.setAttribute("aria-selected", "true");
+    }
+  }
+  function runFilter() {
+    const search = state.inputValue.peek();
+    let visibleCount = 0;
+    for (const item of allItems) {
+      const value = item.getAttribute("data-value") ?? "";
+      const text = item.textContent ?? "";
+      const keywords = item.getAttribute("data-keywords") ?? "";
+      const searchable = `${value} ${text} ${keywords}`;
+      const matches = search === "" || filterFn(searchable, search);
+      setHidden(item, !matches);
+      if (matches)
+        visibleCount++;
+    }
+    for (const [groupEl, group] of groups) {
+      const hasVisible = group.items.some((item) => item.getAttribute("aria-hidden") !== "true");
+      setHidden(group.heading, !hasVisible);
+      if (!hasVisible) {
+        groupEl.style.display = "none";
+      } else {
+        groupEl.style.display = "";
+      }
+    }
+    setHidden(empty, visibleCount > 0);
+    state.activeIndex.value = 0;
+    updateActiveItem();
+  }
+  const input = (() => {
+    const __el0 = __element("input");
+    __el0.setAttribute("type", "text");
+    __el0.setAttribute("role", "combobox");
+    __el0.setAttribute("aria-autocomplete", "list");
+    __el0.setAttribute("aria-expanded", "true");
+    {
+      const __v = listId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+    }
+    {
+      const __v = placeholder;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("placeholder", __v === true ? "" : __v);
+    }
+    __on(__el0, "input", () => {
+      state.inputValue.value = input.value;
+      onInputChange?.(input.value);
+      runFilter();
+    });
+    __on(__el0, "keydown", (event) => {
+      const visible = getVisibleItems();
+      if (isKey(event, Keys.ArrowDown)) {
+        event.preventDefault();
+        const next = Math.min(state.activeIndex.peek() + 1, visible.length - 1);
+        state.activeIndex.value = next;
+        updateActiveItem();
+        return;
+      }
+      if (isKey(event, Keys.ArrowUp)) {
+        event.preventDefault();
+        const prev = Math.max(state.activeIndex.peek() - 1, 0);
+        state.activeIndex.value = prev;
+        updateActiveItem();
+        return;
+      }
+      if (isKey(event, Keys.Enter)) {
+        event.preventDefault();
+        const active = visible[state.activeIndex.peek()];
+        if (active) {
+          const val = active.getAttribute("data-value");
+          if (val !== null) {
+            onSelect?.(val);
+          }
+        }
+        return;
+      }
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        input.value = "";
+        state.inputValue.value = "";
+        onInputChange?.("");
+        runFilter();
+      }
+    });
+    return __el0;
+  })();
+  const list = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "listbox");
+    {
+      const __v = listId;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("id", __v === true ? "" : __v);
+    }
+    return __el1;
+  })();
+  const empty = (() => {
+    const __el2 = __element("div");
+    __el2.setAttribute("aria-hidden", "true");
+    __el2.setAttribute("style", "display: none");
+    return __el2;
+  })();
+  const root = (() => {
+    const __el3 = __element("div");
+    __enterChildren(__el3);
+    __insert(__el3, input);
+    __insert(__el3, list);
+    __insert(__el3, empty);
+    __exitChildren();
+    return __el3;
+  })();
+  applyAttrs(root, attrs);
+  function createItem(value, label, keywords, parent) {
+    const item = (() => {
+      const __el4 = __element("div");
+      __el4.setAttribute("role", "option");
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el4.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      __el4.setAttribute("aria-selected", "false");
+      {
+        const __v = keywords && keywords.length > 0 ? keywords.join(" ") : undefined;
+        if (__v != null && __v !== false)
+          __el4.setAttribute("data-keywords", __v === true ? "" : __v);
+      }
+      __on(__el4, "click", () => {
+        onSelect?.(value);
+      });
+      __enterChildren(__el4);
+      __insert(__el4, label ?? value);
+      __exitChildren();
+      return __el4;
+    })();
+    allItems.push(item);
+    (parent ?? list).appendChild(item);
+    updateActiveItem();
+    return item;
+  }
+  function Item(value, label, keywords) {
+    return createItem(value, label, keywords);
+  }
+  function Group(label) {
+    const headingId = uniqueId("command-group");
+    const heading = (() => {
+      const __el5 = __element("div");
+      {
+        const __v = headingId;
+        if (__v != null && __v !== false)
+          __el5.setAttribute("id", __v === true ? "" : __v);
+      }
+      __enterChildren(__el5);
+      __insert(__el5, label);
+      __exitChildren();
+      return __el5;
+    })();
+    const el = (() => {
+      const __el6 = __element("div");
+      __el6.setAttribute("role", "group");
+      {
+        const __v = headingId;
+        if (__v != null && __v !== false)
+          __el6.setAttribute("aria-labelledby", __v === true ? "" : __v);
+      }
+      __enterChildren(__el6);
+      __insert(__el6, heading);
+      __exitChildren();
+      return __el6;
+    })();
+    const groupItems = [];
+    groups.set(el, { heading, items: groupItems });
+    list.appendChild(el);
+    return {
+      el,
+      Item: (value, itemLabel, keywords) => {
+        const item = createItem(value, itemLabel, keywords, el);
+        groupItems.push(item);
+        return item;
+      }
+    };
+  }
+  function Separator() {
+    const hr = (() => {
+      const __el7 = __element("hr");
+      __el7.setAttribute("role", "separator");
+      return __el7;
+    })();
+    list.appendChild(hr);
+    return hr;
+  }
+  return { root, input, list, empty, state, Item, Group, Separator };
+}
+var Command = {
+  Root: CommandRoot
+};
+
+export { Command };

package/dist/shared/chunk-x0we8gcy.js

@@ -0,0 +1,219 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition,
+  virtualElement
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/context-menu/context-menu.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ContextMenuRoot(options = {}) {
+  const { onSelect, positioning, ...attrs } = options;
+  const state = {
+    open: signal(false),
+    activeIndex: signal(-1)
+  };
+  const items = [];
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  function handleClickOutside(event) {
+    const target = event.target;
+    if (!trigger.contains(target) && !content.contains(target)) {
+      close();
+    }
+  }
+  function updateActiveItem(index) {
+    for (let i = 0;i < items.length; i++) {
+      items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+    }
+  }
+  function openMenu(x, y) {
+    state.open.value = true;
+    setHidden(content, false);
+    setDataState(content, "open");
+    if (positioning) {
+      const result = createFloatingPosition(virtualElement(x, y), content, {
+        strategy: "fixed",
+        ...positioning
+      });
+      floatingCleanup = result.cleanup;
+      dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements: [trigger, content],
+        escapeKey: false
+      });
+    } else {
+      content.style.left = `${x}px`;
+      content.style.top = `${y}px`;
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    state.activeIndex.value = 0;
+    updateActiveItem(0);
+    items[0]?.focus();
+  }
+  function close() {
+    state.open.value = false;
+    setDataState(content, "closed");
+    setHiddenAnimated(content, true);
+    if (positioning) {
+      floatingCleanup?.();
+      floatingCleanup = null;
+      dismissCleanup?.();
+      dismissCleanup = null;
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }
+  const trigger = (() => {
+    const __el0 = __element("div");
+    __on(__el0, "contextmenu", (event) => {
+      event.preventDefault();
+      if (state.open.peek()) {
+        close();
+      }
+      openMenu(event.clientX, event.clientY);
+    });
+    return __el0;
+  })();
+  const contentId = uniqueId("ctx-menu");
+  const content = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "menu");
+    {
+      const __v = contentId;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("id", __v === true ? "" : __v);
+    }
+    __el1.setAttribute("style", "position: fixed; display: none;");
+    __el1.setAttribute("aria-hidden", "true");
+    __el1.setAttribute("data-state", "closed");
+    __on(__el1, "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) {
+            onSelect?.(val);
+            close();
+          }
+        }
+        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 __el1;
+  })();
+  function createItem(value, label, parent) {
+    const item = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("role", "menuitem");
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      __el2.setAttribute("tabindex", "-1");
+      __on(__el2, "click", () => {
+        onSelect?.(value);
+        close();
+      });
+      __enterChildren(__el2);
+      __insert(__el2, label ?? value);
+      __exitChildren();
+      return __el2;
+    })();
+    items.push(item);
+    (parent ?? content).appendChild(item);
+    return item;
+  }
+  function Item(value, label) {
+    return createItem(value, label);
+  }
+  function Group(label) {
+    const el = (() => {
+      const __el3 = __element("div");
+      __el3.setAttribute("role", "group");
+      {
+        const __v = label;
+        if (__v != null && __v !== false)
+          __el3.setAttribute("aria-label", __v === true ? "" : __v);
+      }
+      return __el3;
+    })();
+    content.appendChild(el);
+    return {
+      el,
+      Item: (value, itemLabel) => createItem(value, itemLabel, el)
+    };
+  }
+  function Separator() {
+    const hr = (() => {
+      const __el4 = __element("hr");
+      __el4.setAttribute("role", "separator");
+      return __el4;
+    })();
+    content.appendChild(hr);
+    return hr;
+  }
+  function Label(text) {
+    const el = (() => {
+      const __el5 = __element("div");
+      __el5.setAttribute("role", "none");
+      __enterChildren(__el5);
+      __insert(__el5, text);
+      __exitChildren();
+      return __el5;
+    })();
+    content.appendChild(el);
+    return el;
+  }
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state, Item, Group, Separator, Label };
+}
+var ContextMenu = {
+  Root: ContextMenuRoot
+};
+
+export { ContextMenu };

package/dist/shared/{chunk-6pnjrst7.js → chunk-x2hz98qn.js}

@@ -1,9 +1,9 @@
 import {
   Calendar
-} from "./chunk-48v8j0vh.js";
+} from "./chunk-18y8gfk0.js";
 import {
   Popover
-} from "./chunk-dkhst4wv.js";
+} from "./chunk-m1ptgp1s.js";
 
 // src/date-picker/date-picker.ts
 import { signal } from "@vertz/ui";

package/dist/shared/chunk-yr9yzpvq.js

@@ -0,0 +1,107 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  handleListNavigation
+} from "./chunk-jctqs9m4.js";
+import {
+  setChecked,
+  setDataState
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/radio/radio.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+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 = (() => {
+    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;
+  })();
+  function Item(value, label) {
+    const isActive = value === state.value.peek();
+    const item = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "radio");
+      {
+        const __v = uniqueId("radio");
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-checked", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "checked" : "unchecked";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el1, "click", () => {
+        selectItem(value);
+        item.focus();
+      });
+      __enterChildren(__el1);
+      __insert(__el1, label ?? value);
+      __exitChildren();
+      return __el1;
+    })();
+    items.push(item);
+    itemValues.push(value);
+    root.appendChild(item);
+    setRovingTabindex(items, itemValues.indexOf(state.value.peek()));
+    return item;
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Item };
+}
+var Radio = {
+  Root: RadioRoot
+};
+
+export { Radio };

package/dist/src/accordion/accordion.d.ts

@@ -1,5 +1,17 @@
 import { Signal } from "@vertz/ui";
-interface AccordionOptions {
+interface ElementAttrs {
+	class?: string;
+	id?: string;
+	style?: string;
+	title?: string;
+	role?: string;
+	tabindex?: number | string;
+	hidden?: boolean | string;
+	autofocus?: boolean;
+	[key: `data-${string}`]: string | undefined;
+	[key: `aria-${string}`]: string | undefined;
+}
+interface AccordionOptions extends ElementAttrs {
 	multiple?: boolean;
 	defaultValue?: string[];
 	onValueChange?: (value: string[]) => void;
@@ -11,7 +23,7 @@ interface AccordionElements {
 	root: HTMLDivElement;
 }
 declare const Accordion: {
-	Root(options?: AccordionOptions): AccordionElements & {
+	Root: (options?: AccordionOptions) => AccordionElements & {
 		state: AccordionState;
 		Item: (value: string) => {
 			item: HTMLDivElement;

package/dist/src/accordion/accordion.js

@@ -1,8 +1,9 @@
 import {
   Accordion
-} from "../../shared/chunk-e3aj5yw4.js";
+} from "../../shared/chunk-avxcmmk6.js";
 import"../../shared/chunk-jctqs9m4.js";
 import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-dpsgb1xw.js";
 import"../../shared/chunk-8y1jf6xr.js";
 export {
   Accordion

package/dist/src/badge/badge.d.ts

@@ -1,4 +1,16 @@
-interface BadgeOptions {
+interface ElementAttrs {
+	class?: string;
+	id?: string;
+	style?: string;
+	title?: string;
+	role?: string;
+	tabindex?: number | string;
+	hidden?: boolean | string;
+	autofocus?: boolean;
+	[key: `data-${string}`]: string | undefined;
+	[key: `aria-${string}`]: string | undefined;
+}
+interface BadgeOptions extends ElementAttrs {
 	variant?: "default" | "secondary" | "outline" | "destructive";
 }
 interface BadgeElements {

package/dist/src/badge/badge.js

@@ -1,6 +1,7 @@
 import {
   Badge
-} from "../../shared/chunk-vq9tfzh8.js";
+} from "../../shared/chunk-rnjm61t0.js";
+import"../../shared/chunk-dpsgb1xw.js";
 import"../../shared/chunk-8y1jf6xr.js";
 export {
   Badge

package/dist/src/button/button.d.ts

@@ -1,18 +1,20 @@
-import { Signal } from "@vertz/ui";
-interface ButtonOptions {
-	disabled?: boolean;
-	onPress?: () => void;
-}
-interface ButtonElements {
-	root: HTMLButtonElement;
+interface ElementAttrs {
+	class?: string;
+	id?: string;
+	style?: string;
+	title?: string;
+	role?: string;
+	tabindex?: number | string;
+	hidden?: boolean | string;
+	autofocus?: boolean;
+	[key: `data-${string}`]: string | undefined;
+	[key: `aria-${string}`]: string | undefined;
 }
-interface ButtonState {
-	disabled: Signal<boolean>;
-	pressed: Signal<boolean>;
+interface ButtonOptions extends ElementAttrs {
+	disabled?: boolean;
+	onClick?: () => void;
 }
 declare const Button: {
-	Root(options?: ButtonOptions): ButtonElements & {
-		state: ButtonState;
-	};
+	Root: (options?: ButtonOptions) => HTMLButtonElement;
 };
-export { ButtonState, ButtonOptions, ButtonElements, Button };
+export { ButtonOptions, Button };

package/dist/src/button/button.js

@@ -1,8 +1,8 @@
 import {
   Button
-} from "../../shared/chunk-ve006hmy.js";
+} from "../../shared/chunk-4da5zksy.js";
 import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-dpsgb1xw.js";
 export {
   Button
 };