@vertz/ui-primitives 0.2.38 → 0.2.42

package/dist/shared/chunk-bfsmbrxc.js

@@ -0,0 +1,111 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/dialog/dialog-stack-parts.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { DialogHandleContext, DialogIdContext, useContext } from "@vertz/ui";
+function useDialogId() {
+  const id = useContext(DialogIdContext);
+  if (!id) {
+    throw new Error("Dialog sub-component must be used inside a dialog opened via DialogStack");
+  }
+  return id;
+}
+function useDialogHandle() {
+  const handle = useContext(DialogHandleContext);
+  if (!handle) {
+    throw new Error("Dialog sub-component must be used inside a dialog opened via DialogStack");
+  }
+  return handle;
+}
+function StackDialogTitle({
+  children,
+  className: cls,
+  class: classProp
+}) {
+  const dialogId = useDialogId();
+  return jsxDEV_7x81h0kn("h2", {
+    id: `${dialogId}-title`,
+    "data-part": "title",
+    class: cn(cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function StackDialogDescription({
+  children,
+  className: cls,
+  class: classProp
+}) {
+  const dialogId = useDialogId();
+  return jsxDEV_7x81h0kn("p", {
+    id: `${dialogId}-desc`,
+    "data-part": "description",
+    class: cn(cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function StackDialogHeader({
+  children,
+  className: cls,
+  class: classProp
+}) {
+  return jsxDEV_7x81h0kn("div", {
+    "data-part": "header",
+    class: cn(cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function StackDialogFooter({
+  children,
+  className: cls,
+  class: classProp
+}) {
+  return jsxDEV_7x81h0kn("div", {
+    "data-part": "footer",
+    class: cn(cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function StackDialogBody({
+  children,
+  className: cls,
+  class: classProp
+}) {
+  return jsxDEV_7x81h0kn("div", {
+    "data-part": "body",
+    class: cn(cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function StackDialogCancel({
+  children,
+  className: cls,
+  class: classProp
+}) {
+  const handle = useDialogHandle();
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "data-part": "cancel",
+    class: cn(cls ?? classProp),
+    onClick: () => handle.close(),
+    children
+  }, undefined, false, undefined, this);
+}
+function StackDialogClose({
+  children,
+  className: cls,
+  class: classProp
+}) {
+  const handle = useDialogHandle();
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "data-part": "close",
+    "aria-label": children ? undefined : "Close",
+    class: cn(cls ?? classProp),
+    onClick: () => handle.close(),
+    children: children ?? "×"
+  }, undefined, false, undefined, this);
+}
+
+export { StackDialogTitle, StackDialogDescription, StackDialogHeader, StackDialogFooter, StackDialogBody, StackDialogCancel, StackDialogClose };

package/dist/shared/chunk-c2f63m5n.js

@@ -0,0 +1,56 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/checkbox/checkbox.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function dataStateFor(checked) {
+  if (checked === "mixed")
+    return "indeterminate";
+  return checked ? "checked" : "unchecked";
+}
+function ariaCheckedFor(checked) {
+  if (checked === "mixed")
+    return "mixed";
+  return String(checked);
+}
+function CheckboxRoot(options = {}) {
+  const { defaultChecked = false, disabled = false, onCheckedChange, ...attrs } = options;
+  let checked = defaultChecked;
+  function toggle() {
+    if (disabled)
+      return;
+    checked = checked === "mixed" ? true : !checked;
+    onCheckedChange?.(checked);
+  }
+  const el = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    role: "checkbox",
+    id: uniqueId("checkbox"),
+    "aria-checked": ariaCheckedFor(checked),
+    "data-state": dataStateFor(checked),
+    disabled,
+    "aria-disabled": disabled ? "true" : undefined,
+    onClick: toggle,
+    onKeydown: (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
+        toggle();
+      }
+    }
+  }, undefined, false, undefined, this);
+  applyAttrs(el, attrs);
+  return el;
+}
+var Checkbox = {
+  Root: CheckboxRoot
+};
+
+export { Checkbox };

package/dist/shared/chunk-c5r3s5km.js

@@ -0,0 +1,263 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+
+// src/command/command-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var CommandContext = createContext(undefined, "@vertz/ui-primitives::CommandContext");
+function useCommandContext(componentName) {
+  const ctx = useContext(CommandContext);
+  if (!ctx) {
+    throw new Error(`<Command.${componentName}> must be used inside <Command>. ` + "Ensure it is a direct or nested child of the Command root component.");
+  }
+  return ctx;
+}
+function CommandInput({ className: cls, class: classProp }) {
+  const ctx = useCommandContext("Input");
+  return jsxDEV_7x81h0kn("input", {
+    type: "text",
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-expanded": "true",
+    "aria-controls": ctx.listId,
+    "data-command-input": "",
+    placeholder: ctx.placeholder,
+    class: cn(ctx.classes?.input, cls ?? classProp),
+    onInput: (e) => {
+      ctx.handleInput(e.target);
+    },
+    onKeydown: (e) => {
+      ctx.handleKeydown(e, e.target);
+    }
+  }, undefined, false, undefined, this);
+}
+function CommandList({ children, className: cls, class: classProp }) {
+  const ctx = useCommandContext("List");
+  return jsxDEV_7x81h0kn("div", {
+    role: "listbox",
+    id: ctx.listId,
+    class: cn(ctx.classes?.list, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function CommandEmpty({ children, className: cls, class: classProp }) {
+  const ctx = useCommandContext("Empty");
+  return jsxDEV_7x81h0kn("div", {
+    "data-part": "command-empty",
+    "data-command-empty": "",
+    "aria-hidden": "true",
+    style: "display: none",
+    class: cn(ctx.classes?.empty, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function CommandItem({
+  value,
+  children,
+  keywords,
+  className: cls,
+  class: classProp
+}) {
+  const ctx = useCommandContext("Item");
+  const isInitialActive = ctx.claimInitialActive();
+  return jsxDEV_7x81h0kn("div", {
+    role: "option",
+    "data-value": value,
+    "aria-selected": isInitialActive ? "true" : "false",
+    "data-keywords": keywords && keywords.length > 0 ? keywords.join(" ") : undefined,
+    class: cn(ctx.classes?.item, cls ?? classProp),
+    onClick: () => {
+      ctx.getOnSelect()?.(value);
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function CommandGroup({ label, children, className: cls, class: classProp }) {
+  const ctx = useCommandContext("Group");
+  const headingId = uniqueId("command-group");
+  return jsxDEV_7x81h0kn("div", {
+    role: "group",
+    "aria-labelledby": headingId,
+    "data-command-group": "",
+    class: cn(ctx.classes?.group, cls ?? classProp),
+    children: [
+      jsxDEV_7x81h0kn("div", {
+        id: headingId,
+        "data-command-group-heading": "",
+        class: cn(ctx.classes?.groupHeading),
+        children: label
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+function CommandSeparator({ className: cls, class: classProp }) {
+  const ctx = useCommandContext("Separator");
+  return jsxDEV_7x81h0kn("hr", {
+    role: "separator",
+    class: cn(ctx.classes?.separator, cls ?? classProp)
+  }, undefined, false, undefined, this);
+}
+function ComposedCommandRoot({
+  children,
+  classes,
+  filter: customFilter,
+  onSelect,
+  onInputChange,
+  placeholder
+}) {
+  const rootId = uniqueId("command");
+  const listId = uniqueId("command-list");
+  const defaultFilter = (value, search) => value.toLowerCase().includes(search.toLowerCase());
+  const filterFn = customFilter ?? defaultFilter;
+  const state = {
+    activeIndex: 0,
+    initialClaimed: false
+  };
+  function claimInitialActive() {
+    if (state.initialClaimed)
+      return false;
+    state.initialClaimed = true;
+    return true;
+  }
+  function findRoot(el) {
+    let current = el;
+    while (current) {
+      if (current.id === rootId)
+        return current;
+      current = current.parentElement;
+    }
+    return null;
+  }
+  function getItemsFrom(root) {
+    return [...root.querySelectorAll('[role="option"]')];
+  }
+  function getVisibleItemsFrom(root) {
+    return getItemsFrom(root).filter((item) => item.getAttribute("aria-hidden") !== "true");
+  }
+  function updateActiveItemIn(root) {
+    const allItems = getItemsFrom(root);
+    const visible = getVisibleItemsFrom(root);
+    for (const item of allItems) {
+      item.setAttribute("aria-selected", "false");
+    }
+    if (visible.length > 0 && state.activeIndex >= 0 && state.activeIndex < visible.length) {
+      visible[state.activeIndex]?.setAttribute("aria-selected", "true");
+    }
+  }
+  function runFilterFrom(inputEl, root) {
+    const search = inputEl.value ?? "";
+    const allItems = getItemsFrom(root);
+    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);
+      item.setAttribute("aria-hidden", String(!matches));
+      item.style.display = matches ? "" : "none";
+      if (matches)
+        visibleCount++;
+    }
+    const groups = root.querySelectorAll("[data-command-group]");
+    for (const group of groups) {
+      const groupItems = group.querySelectorAll('[role="option"]');
+      const hasVisible = [...groupItems].some((item) => item.getAttribute("aria-hidden") !== "true");
+      const heading = group.querySelector("[data-command-group-heading]");
+      if (heading) {
+        heading.setAttribute("aria-hidden", String(!hasVisible));
+        heading.style.display = hasVisible ? "" : "none";
+      }
+      group.style.display = hasVisible ? "" : "none";
+    }
+    const emptyEl = root.querySelector("[data-command-empty]");
+    if (emptyEl) {
+      const hide = visibleCount > 0;
+      emptyEl.setAttribute("aria-hidden", String(hide));
+      emptyEl.style.display = hide ? "none" : "";
+    }
+    state.activeIndex = 0;
+    updateActiveItemIn(root);
+  }
+  function handleInput(inputEl) {
+    const root = findRoot(inputEl);
+    if (!root)
+      return;
+    onInputChange?.(inputEl.value);
+    runFilterFrom(inputEl, root);
+  }
+  function handleKeydown(event, inputEl) {
+    const root = findRoot(inputEl);
+    if (!root)
+      return;
+    const visible = getVisibleItemsFrom(root);
+    if (isKey(event, Keys.ArrowDown)) {
+      event.preventDefault();
+      const next = Math.min(state.activeIndex + 1, visible.length - 1);
+      state.activeIndex = next;
+      updateActiveItemIn(root);
+      return;
+    }
+    if (isKey(event, Keys.ArrowUp)) {
+      event.preventDefault();
+      const prev = Math.max(state.activeIndex - 1, 0);
+      state.activeIndex = prev;
+      updateActiveItemIn(root);
+      return;
+    }
+    if (isKey(event, Keys.Enter)) {
+      event.preventDefault();
+      const active = visible[state.activeIndex];
+      if (active) {
+        const val = active.getAttribute("data-value");
+        if (val !== null) {
+          onSelect?.(val);
+        }
+      }
+      return;
+    }
+    if (isKey(event, Keys.Escape)) {
+      event.preventDefault();
+      inputEl.value = "";
+      onInputChange?.("");
+      runFilterFrom(inputEl, root);
+    }
+  }
+  const ctx = {
+    rootId,
+    listId,
+    classes,
+    getOnSelect: () => onSelect,
+    placeholder,
+    handleInput,
+    handleKeydown,
+    claimInitialActive
+  };
+  return jsxDEV_7x81h0kn(CommandContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("div", {
+      id: rootId,
+      class: cn(classes?.root),
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedCommand = Object.assign(ComposedCommandRoot, {
+  Input: CommandInput,
+  List: CommandList,
+  Empty: CommandEmpty,
+  Item: CommandItem,
+  Group: CommandGroup,
+  Separator: CommandSeparator
+});
+
+export { ComposedCommand };