@vertz/ui-primitives 0.2.41 → 0.2.42

package/dist/shared/chunk-hgnkd4he.js

@@ -0,0 +1,256 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+
+// src/combobox/combobox-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var ComboboxContext = createContext(undefined, "@vertz/ui-primitives::ComboboxContext");
+function useComboboxContext(componentName) {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) {
+    throw new Error(`<Combobox.${componentName}> must be used inside <ComposedCombobox>. ` + "Ensure it is a direct or nested child of the ComposedCombobox root component.");
+  }
+  return ctx;
+}
+function ComboboxInput({ className: cls, class: classProp }) {
+  const ctx = useComboboxContext("Input");
+  return jsxDEV_7x81h0kn("input", {
+    ref: ctx.inputRef,
+    type: "text",
+    role: "combobox",
+    "data-combobox-input": "",
+    "aria-autocomplete": "list",
+    "aria-controls": ctx.contentId,
+    "aria-haspopup": "listbox",
+    "aria-expanded": "false",
+    value: ctx.selectedValue(),
+    class: cn(ctx.classes?.input, cls ?? classProp),
+    onInput: () => {
+      const inputEl = ctx.inputRef.current;
+      if (!inputEl)
+        return;
+      if (!ctx.isOpen())
+        ctx.open();
+    },
+    onFocus: () => {
+      const inputEl = ctx.inputRef.current;
+      if (!inputEl)
+        return;
+      if (!ctx.isOpen() && inputEl.value.length > 0)
+        ctx.open();
+    },
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        ctx.close();
+        return;
+      }
+      if (isKey(event, Keys.ArrowDown)) {
+        event.preventDefault();
+        if (!ctx.isOpen()) {
+          ctx.open();
+        }
+        const contentEl = ctx.contentRef.current;
+        if (!contentEl)
+          return;
+        const options = [...contentEl.querySelectorAll('[role="option"]')];
+        const next = Math.min(ctx.activeIndex() + 1, options.length - 1);
+        ctx.setActiveIndex(next);
+        ctx.updateActiveDescendant(next);
+        return;
+      }
+      if (isKey(event, Keys.ArrowUp)) {
+        event.preventDefault();
+        const prev = Math.max(ctx.activeIndex() - 1, 0);
+        ctx.setActiveIndex(prev);
+        ctx.updateActiveDescendant(prev);
+        return;
+      }
+      if (isKey(event, Keys.Enter)) {
+        event.preventDefault();
+        const idx = ctx.activeIndex();
+        const contentEl = ctx.contentRef.current;
+        if (!contentEl)
+          return;
+        const options = [...contentEl.querySelectorAll('[role="option"]')];
+        if (idx >= 0 && idx < options.length) {
+          const val = options[idx]?.getAttribute("data-value");
+          if (val != null)
+            ctx.selectOption(val);
+        }
+        return;
+      }
+    }
+  }, undefined, false, undefined, this);
+}
+function ComboboxContent({ children, className: cls, class: classProp }) {
+  const ctx = useComboboxContext("Content");
+  const instanceIndex = ctx._contentCount.value++;
+  if (instanceIndex > 0) {
+    console.warn("Duplicate <Combobox.Content> detected – only the first is used");
+  }
+  return jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    role: "listbox",
+    id: ctx.contentId,
+    "data-combobox-content": "",
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" },
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComboboxOption({ value, children, className: cls, class: classProp }) {
+  const ctx = useComboboxContext("Option");
+  const isSelected = ctx.selectedValue() === value;
+  const optId = `${ctx.contentId}-opt-${value}`;
+  return jsxDEV_7x81h0kn("div", {
+    role: "option",
+    id: optId,
+    "data-combobox-option": "",
+    "data-value": value,
+    "aria-selected": isSelected ? "true" : "false",
+    "data-state": isSelected ? "active" : "inactive",
+    class: cn(ctx.classes?.option, cls ?? classProp),
+    onClick: () => ctx.selectOption(value),
+    children: children ?? value
+  }, undefined, false, undefined, this);
+}
+function ComposedComboboxRoot({
+  children,
+  classes,
+  defaultValue = "",
+  onValueChange,
+  onInputChange
+}) {
+  const ids = linkedIds("combobox");
+  const inputRef = ref();
+  const contentRef = ref();
+  const state = {
+    isOpen: false,
+    selectedValue: defaultValue,
+    activeIndex: -1
+  };
+  function getInputEl() {
+    return inputRef.current ?? null;
+  }
+  function getContentEl() {
+    return contentRef.current ?? null;
+  }
+  function open() {
+    state.isOpen = true;
+    const inputEl = getInputEl();
+    const contentEl = getContentEl();
+    if (inputEl) {
+      inputEl.setAttribute("aria-expanded", "true");
+    }
+    if (contentEl) {
+      contentEl.setAttribute("data-state", "open");
+      contentEl.setAttribute("aria-hidden", "false");
+      contentEl.style.display = "";
+    }
+  }
+  function close() {
+    state.isOpen = false;
+    state.activeIndex = -1;
+    const inputEl = getInputEl();
+    const contentEl = getContentEl();
+    if (inputEl) {
+      inputEl.setAttribute("aria-expanded", "false");
+      inputEl.removeAttribute("aria-activedescendant");
+    }
+    if (contentEl) {
+      contentEl.setAttribute("data-state", "closed");
+      setHiddenAnimated(contentEl, true);
+    }
+  }
+  function selectOption(value) {
+    state.selectedValue = value;
+    const inputEl = getInputEl();
+    if (inputEl) {
+      inputEl.value = value;
+    }
+    const contentEl = getContentEl();
+    if (contentEl) {
+      const options = contentEl.querySelectorAll('[role="option"]');
+      for (const opt of options) {
+        const isActive = opt.getAttribute("data-value") === value;
+        opt.setAttribute("aria-selected", isActive ? "true" : "false");
+        opt.setAttribute("data-state", isActive ? "active" : "inactive");
+      }
+    }
+    onValueChange?.(value);
+    close();
+    inputEl?.focus();
+  }
+  function updateActiveDescendant(index) {
+    const inputEl = getInputEl();
+    const contentEl = getContentEl();
+    if (!inputEl || !contentEl)
+      return;
+    const options = [...contentEl.querySelectorAll('[role="option"]')];
+    const opt = options[index];
+    if (index >= 0 && opt) {
+      inputEl.setAttribute("aria-activedescendant", opt.id);
+      for (let i = 0;i < options.length; i++) {
+        const el = options[i];
+        if (el)
+          el.setAttribute("data-state", i === index ? "active" : "inactive");
+      }
+    } else {
+      inputEl.removeAttribute("aria-activedescendant");
+    }
+  }
+  const ctx = {
+    isOpen: () => state.isOpen,
+    selectedValue: () => state.selectedValue,
+    contentId: ids.contentId,
+    inputRef,
+    contentRef,
+    classes,
+    open,
+    close,
+    selectOption,
+    activeIndex: () => state.activeIndex,
+    setActiveIndex: (index) => {
+      state.activeIndex = index;
+    },
+    updateActiveDescendant,
+    _contentCount: { value: 0 }
+  };
+  const origOpen = ctx.open;
+  ctx.open = () => {
+    origOpen();
+    const inputEl = getInputEl();
+    if (inputEl && onInputChange) {
+      onInputChange(inputEl.value);
+    }
+  };
+  return jsxDEV_7x81h0kn(ComboboxContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-combobox-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedCombobox = Object.assign(ComposedComboboxRoot, {
+  Input: ComboboxInput,
+  Content: ComboboxContent,
+  Option: ComboboxOption
+});
+
+export { ComposedCombobox };

package/dist/shared/chunk-hpcyffm7.js

@@ -0,0 +1,185 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setHidden
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/command/command.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+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 = jsxDEV_7x81h0kn("input", {
+    type: "text",
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-expanded": "true",
+    "aria-controls": listId,
+    placeholder,
+    onInput: () => {
+      state.inputValue.value = input.value;
+      onInputChange?.(input.value);
+      runFilter();
+    },
+    onKeydown: (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();
+      }
+    }
+  }, undefined, false, undefined, this);
+  const list = jsxDEV_7x81h0kn("div", {
+    role: "listbox",
+    id: listId
+  }, undefined, false, undefined, this);
+  const empty = jsxDEV_7x81h0kn("div", {
+    "aria-hidden": "true",
+    style: { display: "none" }
+  }, undefined, false, undefined, this);
+  const root = jsxDEV_7x81h0kn("div", {
+    children: [
+      input,
+      list,
+      empty
+    ]
+  }, undefined, true, undefined, this);
+  applyAttrs(root, attrs);
+  function createItem(value, label, keywords) {
+    const item = jsxDEV_7x81h0kn("div", {
+      role: "option",
+      "data-value": value,
+      "aria-selected": "false",
+      "data-keywords": keywords && keywords.length > 0 ? keywords.join(" ") : undefined,
+      onClick: () => {
+        onSelect?.(value);
+      },
+      children: label ?? value
+    }, undefined, false, undefined, this);
+    allItems.push(item);
+    updateActiveItem();
+    return item;
+  }
+  function Item(value, label, keywords) {
+    return createItem(value, label, keywords);
+  }
+  function Group(label) {
+    const headingId = uniqueId("command-group");
+    const heading = jsxDEV_7x81h0kn("div", {
+      id: headingId,
+      children: label
+    }, undefined, false, undefined, this);
+    const el = jsxDEV_7x81h0kn("div", {
+      role: "group",
+      "aria-labelledby": headingId,
+      children: heading
+    }, undefined, false, undefined, this);
+    const groupItems = [];
+    groups.set(el, { heading, items: groupItems });
+    return {
+      el,
+      Item: (value, itemLabel, keywords) => {
+        const item = createItem(value, itemLabel, keywords);
+        groupItems.push(item);
+        return item;
+      }
+    };
+  }
+  function Separator() {
+    return jsxDEV_7x81h0kn("hr", {
+      role: "separator"
+    }, undefined, false, undefined, this);
+  }
+  return { root, input, list, empty, state, Item, Group, Separator };
+}
+var Command = {
+  Root: CommandRoot
+};
+
+export { Command };

package/dist/shared/chunk-hpmvwx0h.js

@@ -0,0 +1,99 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setPressed
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/toggle-group/toggle-group.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function ToggleGroupRoot(options = {}) {
+  const {
+    type = "single",
+    defaultValue = [],
+    orientation = "horizontal",
+    disabled = false,
+    onValueChange,
+    ...attrs
+  } = options;
+  const state = {
+    value: signal([...defaultValue]),
+    disabled: signal(disabled)
+  };
+  const items = [];
+  function toggleValue(itemValue) {
+    if (state.disabled.peek())
+      return;
+    const current = [...state.value.peek()];
+    const idx = current.indexOf(itemValue);
+    if (type === "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);
+      }
+    }
+    state.value.value = current;
+    onValueChange?.(current);
+    for (const item of items) {
+      const val = item.getAttribute("data-value") ?? "";
+      const isOn = current.includes(val);
+      setPressed(item, isOn);
+      setDataState(item, isOn ? "on" : "off");
+    }
+  }
+  const root = jsxDEV_7x81h0kn("div", {
+    role: "group",
+    "data-orientation": orientation,
+    onKeydown: (event) => {
+      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
+        const result = handleListNavigation(event, items, { orientation });
+        if (result) {
+          const idx = items.indexOf(result);
+          if (idx >= 0) {
+            setRovingTabindex(items, idx);
+          }
+        }
+      }
+    }
+  }, undefined, false, undefined, this);
+  function Item(value) {
+    const isOn = state.value.peek().includes(value);
+    const item = jsxDEV_7x81h0kn("button", {
+      type: "button",
+      "data-value": value,
+      "aria-pressed": isOn ? "true" : "false",
+      "data-state": isOn ? "on" : "off",
+      disabled: state.disabled.peek(),
+      "aria-disabled": state.disabled.peek() ? "true" : undefined,
+      onClick: () => toggleValue(value)
+    }, undefined, false, undefined, this);
+    items.push(item);
+    setRovingTabindex(items, 0);
+    return item;
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Item };
+}
+var ToggleGroup = {
+  Root: ToggleGroupRoot
+};
+
+export { ToggleGroup };

package/dist/shared/chunk-hz0e504p.js

@@ -0,0 +1,69 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/card/card-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var CardContext = createContext(undefined, "@vertz/ui-primitives::CardContext");
+function CardHeader({ children, className, class: classProp }) {
+  const ctx = useContext(CardContext);
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(ctx?.classes?.header, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function CardTitle({ children, className, class: classProp }) {
+  const ctx = useContext(CardContext);
+  return jsxDEV_7x81h0kn("h3", {
+    class: cn(ctx?.classes?.title, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function CardDescription({ children, className, class: classProp }) {
+  const ctx = useContext(CardContext);
+  return jsxDEV_7x81h0kn("p", {
+    class: cn(ctx?.classes?.description, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function CardContent({ children, className, class: classProp }) {
+  const ctx = useContext(CardContext);
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(ctx?.classes?.content, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function CardFooter({ children, className, class: classProp }) {
+  const ctx = useContext(CardContext);
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(ctx?.classes?.footer, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function CardAction({ children, className, class: classProp }) {
+  const ctx = useContext(CardContext);
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(ctx?.classes?.action, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedCardRoot({ children, classes, className, class: classProp }) {
+  return jsxDEV_7x81h0kn(CardContext.Provider, {
+    value: { classes },
+    children: jsxDEV_7x81h0kn("div", {
+      class: cn(classes?.root, className ?? classProp),
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedCard = Object.assign(ComposedCardRoot, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Footer: CardFooter,
+  Action: CardAction
+});
+
+export { ComposedCard };

package/dist/shared/chunk-hzk4wfq9.js

@@ -0,0 +1,43 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/avatar/avatar-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var AvatarContext = createContext(undefined, "@vertz/ui-primitives::AvatarContext");
+function AvatarImage({ src, alt, className, class: classProp }) {
+  const ctx = useContext(AvatarContext);
+  return jsxDEV_7x81h0kn("img", {
+    src,
+    alt,
+    class: cn(ctx?.classes?.image, className ?? classProp)
+  }, undefined, false, undefined, this);
+}
+function AvatarFallback({ children, className, class: classProp }) {
+  const ctx = useContext(AvatarContext);
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(ctx?.classes?.fallback, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedAvatarRoot({
+  children,
+  classes,
+  className,
+  class: classProp
+}) {
+  return jsxDEV_7x81h0kn(AvatarContext.Provider, {
+    value: { classes },
+    children: jsxDEV_7x81h0kn("div", {
+      class: cn(classes?.root, className ?? classProp),
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedAvatar = Object.assign(ComposedAvatarRoot, {
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
+
+export { ComposedAvatar };

package/dist/shared/chunk-j7znzkpa.js

@@ -0,0 +1,48 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+
+// src/toggle/toggle-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ComposedToggleRoot({
+  children,
+  classes,
+  defaultPressed = false,
+  disabled = false,
+  onPressedChange
+}) {
+  let pressed = defaultPressed;
+  function toggle() {
+    if (disabled)
+      return;
+    pressed = !pressed;
+    onPressedChange?.(pressed);
+  }
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    id: uniqueId("toggle"),
+    "aria-pressed": pressed ? "true" : "false",
+    "data-state": pressed ? "on" : "off",
+    disabled,
+    "aria-disabled": disabled ? "true" : undefined,
+    class: cn(classes?.root),
+    onClick: toggle,
+    onKeydown: (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
+        toggle();
+      }
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+var ComposedToggle = ComposedToggleRoot;
+
+export { ComposedToggle };