@vertz/ui-primitives 0.2.38 → 0.2.42

package/dist/shared/chunk-j9kxgrnn.js

@@ -0,0 +1,167 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createFloatingPosition,
+  resolveLayoutElement
+} from "./chunk-vef3sepw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/hover-card/hover-card-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var HoverCardContext = createContext(undefined, "@vertz/ui-primitives::HoverCardContext");
+function useHoverCardContext(componentName) {
+  const ctx = useContext(HoverCardContext);
+  if (!ctx) {
+    throw new Error(`<HoverCard.${componentName}> must be used inside <HoverCard>. ` + "Ensure it is a direct or nested child of the HoverCard root component.");
+  }
+  return ctx;
+}
+function HoverCardTrigger({ children }) {
+  const ctx = useHoverCardContext("Trigger");
+  const childNodes = Array.isArray(children) ? children : [children];
+  const childEl = childNodes.find((c) => c instanceof HTMLElement);
+  if (childEl) {
+    childEl.setAttribute("aria-haspopup", "dialog");
+    childEl.setAttribute("aria-expanded", ctx.isOpen() ? "true" : "false");
+    childEl.addEventListener("focus", () => ctx.showImmediate());
+    childEl.addEventListener("blur", () => ctx.hide());
+  }
+  return jsxDEV_7x81h0kn("span", {
+    ref: ctx.triggerRef,
+    style: { display: "contents" },
+    "data-hovercard-trigger": "",
+    onMouseenter: () => ctx.show(),
+    onMouseleave: () => ctx.hide(),
+    onFocusin: () => ctx.showImmediate(),
+    onFocusout: () => ctx.hide(),
+    children
+  }, undefined, false, undefined, this);
+}
+function HoverCardContent({ children, className: cls, class: classProp }) {
+  const ctx = useHoverCardContext("Content");
+  const isOpen = ctx.isOpen();
+  return jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    role: "dialog",
+    id: ctx.contentId,
+    "data-hovercard-content": "",
+    "aria-hidden": isOpen ? "false" : "true",
+    "data-state": isOpen ? "open" : "closed",
+    style: { display: isOpen ? "" : "none" },
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    onMouseenter: () => ctx.cancelCloseTimer(),
+    onMouseleave: () => ctx.hide(),
+    onFocusin: () => ctx.cancelCloseTimer(),
+    onFocusout: () => ctx.hide(),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedHoverCardRoot({
+  children,
+  classes,
+  openDelay = 700,
+  closeDelay = 300,
+  onOpenChange,
+  positioning
+}) {
+  const contentId = uniqueId("hovercard");
+  const triggerRef = ref();
+  const contentRef = ref();
+  let isOpen = false;
+  const timers = { open: null, close: null, floatingCleanup: null };
+  function cancelTimers() {
+    if (timers.open) {
+      clearTimeout(timers.open);
+      timers.open = null;
+    }
+    if (timers.close) {
+      clearTimeout(timers.close);
+      timers.close = null;
+    }
+  }
+  function cancelCloseTimer() {
+    if (timers.close) {
+      clearTimeout(timers.close);
+      timers.close = null;
+    }
+  }
+  function applyFloating() {
+    const triggerSpan = triggerRef.current;
+    const contentEl = contentRef.current;
+    if (!triggerSpan || !contentEl)
+      return;
+    const triggerEl = resolveLayoutElement(triggerSpan);
+    contentEl.style.position = "fixed";
+    const floatingOpts = positioning ?? { placement: "bottom", offset: 4 };
+    const result = createFloatingPosition(triggerEl, contentEl, floatingOpts);
+    timers.floatingCleanup = result.cleanup;
+  }
+  function cleanupFloating() {
+    timers.floatingCleanup?.();
+    timers.floatingCleanup = null;
+  }
+  function show() {
+    cancelTimers();
+    if (isOpen)
+      return;
+    timers.open = setTimeout(() => {
+      timers.open = null;
+      isOpen = true;
+      applyFloating();
+      onOpenChange?.(true);
+    }, openDelay);
+  }
+  function showImmediate() {
+    cancelTimers();
+    isOpen = true;
+    applyFloating();
+    onOpenChange?.(true);
+  }
+  function hide() {
+    cancelTimers();
+    if (!isOpen)
+      return;
+    timers.close = setTimeout(() => {
+      timers.close = null;
+      isOpen = false;
+      cleanupFloating();
+      onOpenChange?.(false);
+    }, closeDelay);
+  }
+  function hideImmediate() {
+    cancelTimers();
+    isOpen = false;
+    cleanupFloating();
+    onOpenChange?.(false);
+  }
+  const ctx = {
+    isOpen: () => isOpen,
+    contentId,
+    triggerRef,
+    contentRef,
+    classes,
+    show,
+    hide,
+    showImmediate,
+    hideImmediate,
+    cancelCloseTimer
+  };
+  return jsxDEV_7x81h0kn(HoverCardContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-hovercard-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedHoverCard = Object.assign(ComposedHoverCardRoot, {
+  Trigger: HoverCardTrigger,
+  Content: HoverCardContent
+});
+
+export { ComposedHoverCard };

package/dist/shared/chunk-jetwnv0w.js

@@ -0,0 +1,130 @@
+import {
+  saveFocus,
+  trapFocus
+} from "./chunk-e2v1c9ex.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+
+// src/alert-dialog/alert-dialog.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function AlertDialogTriggerEl(triggerId, contentId, defaultOpen, onClick) {
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    id: triggerId,
+    "aria-controls": contentId,
+    "aria-expanded": defaultOpen ? "true" : "false",
+    "data-state": defaultOpen ? "open" : "closed",
+    onClick
+  }, undefined, false, undefined, this);
+}
+function AlertDialogOverlayEl(defaultOpen) {
+  return jsxDEV_7x81h0kn("div", {
+    "data-alertdialog-overlay": "",
+    "aria-hidden": defaultOpen ? "false" : "true",
+    "data-state": defaultOpen ? "open" : "closed",
+    style: { display: defaultOpen ? "" : "none" }
+  }, undefined, false, undefined, this);
+}
+function AlertDialogContentEl(contentId, titleId, descriptionId, defaultOpen) {
+  return jsxDEV_7x81h0kn("div", {
+    role: "alertdialog",
+    id: contentId,
+    "aria-modal": "true",
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId,
+    "aria-hidden": defaultOpen ? "false" : "true",
+    "data-state": defaultOpen ? "open" : "closed",
+    style: { display: defaultOpen ? "" : "none" }
+  }, undefined, false, undefined, this);
+}
+function AlertDialogTitleEl(titleId) {
+  return jsxDEV_7x81h0kn("h2", {
+    id: titleId
+  }, undefined, false, undefined, this);
+}
+function AlertDialogDescriptionEl(descriptionId) {
+  return jsxDEV_7x81h0kn("p", {
+    id: descriptionId
+  }, undefined, false, undefined, this);
+}
+function AlertDialogCancelBtn(onClick) {
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    onClick
+  }, undefined, false, undefined, this);
+}
+function AlertDialogActionBtn(onClick) {
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    onClick
+  }, undefined, false, undefined, this);
+}
+function AlertDialogRoot(options = {}) {
+  const { defaultOpen = false, onOpenChange, onAction } = options;
+  const ids = linkedIds("alertdialog");
+  const titleId = `${ids.contentId}-title`;
+  const descriptionId = `${ids.contentId}-description`;
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let removeTrap = null;
+  function show() {
+    if (state.open.peek())
+      return;
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(overlay, false);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(overlay, "open");
+    setDataState(content, "open");
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => cancel.focus());
+    onOpenChange?.(true);
+  }
+  function hide() {
+    if (!state.open.peek())
+      return;
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(overlay, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(overlay, true);
+    setHiddenAnimated(content, true);
+    removeTrap?.();
+    removeTrap = null;
+    restoreFocus?.();
+    restoreFocus = null;
+    onOpenChange?.(false);
+  }
+  const trigger = AlertDialogTriggerEl(ids.triggerId, ids.contentId, defaultOpen, show);
+  const overlay = AlertDialogOverlayEl(defaultOpen);
+  const content = AlertDialogContentEl(ids.contentId, titleId, descriptionId, defaultOpen);
+  const title = AlertDialogTitleEl(titleId);
+  const description = AlertDialogDescriptionEl(descriptionId);
+  const cancel = AlertDialogCancelBtn(() => hide());
+  const action = AlertDialogActionBtn(() => {
+    onAction?.();
+    hide();
+  });
+  if (defaultOpen) {
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => cancel.focus());
+  }
+  return { trigger, overlay, content, title, description, cancel, action, state, show, hide };
+}
+var AlertDialog = {
+  Root: AlertDialogRoot
+};
+
+export { AlertDialog };

package/dist/shared/chunk-jjdg26c1.js

@@ -0,0 +1,155 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/popover/popover-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var PopoverContext = createContext(undefined, "@vertz/ui-primitives::PopoverContext");
+function usePopoverContext(componentName) {
+  const ctx = useContext(PopoverContext);
+  if (!ctx) {
+    throw new Error(`<Popover.${componentName}> must be used inside <Popover>. ` + "Ensure it is a direct or nested child of the Popover root component.");
+  }
+  return ctx;
+}
+function PopoverTrigger({ children }) {
+  const ctx = usePopoverContext("Trigger");
+  return jsxDEV_7x81h0kn("span", {
+    style: { display: "contents" },
+    "data-popover-trigger": "",
+    "aria-haspopup": "dialog",
+    "aria-controls": ctx.contentId,
+    "aria-expanded": "false",
+    "data-state": "closed",
+    onClick: () => {
+      ctx.toggle();
+      const nowOpen = ctx.isOpen();
+      const el = document.querySelector(`[data-popover-trigger][aria-controls="${ctx.contentId}"]`);
+      if (el) {
+        el.setAttribute("aria-expanded", nowOpen ? "true" : "false");
+        el.setAttribute("data-state", nowOpen ? "open" : "closed");
+      }
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function PopoverContent({ children, className: cls, class: classProp }) {
+  const ctx = usePopoverContext("Content");
+  const instanceIndex = ctx._contentCount.value++;
+  if (instanceIndex > 0) {
+    console.warn("Duplicate <Popover.Content> detected – only the first is used");
+  }
+  return jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    role: "dialog",
+    id: ctx.contentId,
+    "data-popover-content": "",
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" },
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedPopoverRoot({
+  children,
+  classes,
+  onOpenChange,
+  positioning
+}) {
+  const ids = linkedIds("popover");
+  const contentRef = ref();
+  let isOpen = false;
+  const cleanup = {
+    floating: null,
+    dismiss: null
+  };
+  function getElements() {
+    const content = contentRef.current ?? null;
+    let trigger = content ? content.parentElement?.querySelector("[data-popover-trigger]") : null;
+    while (trigger && getComputedStyle(trigger).display === "contents") {
+      trigger = trigger.firstElementChild;
+    }
+    return { trigger, content };
+  }
+  function syncContentAttrs(nowOpen) {
+    const content = contentRef.current;
+    if (!content)
+      return;
+    content.setAttribute("data-state", nowOpen ? "open" : "closed");
+    content.setAttribute("aria-hidden", nowOpen ? "false" : "true");
+    content.style.display = nowOpen ? "" : "none";
+  }
+  function open() {
+    isOpen = true;
+    syncContentAttrs(true);
+    const { trigger, content } = getElements();
+    if (trigger && content) {
+      content.style.position = "fixed";
+      const floatingOpts = positioning ?? {};
+      const result = createFloatingPosition(trigger, content, floatingOpts);
+      cleanup.floating = result.cleanup;
+      cleanup.dismiss = createDismiss({
+        onDismiss: close,
+        insideElements: [trigger, content],
+        escapeKey: true
+      });
+    }
+    onOpenChange?.(true);
+  }
+  function close() {
+    isOpen = false;
+    syncContentAttrs(false);
+    const content = contentRef.current;
+    if (content) {
+      content.style.position = "";
+      content.style.left = "";
+      content.style.top = "";
+    }
+    cleanup.floating?.();
+    cleanup.floating = null;
+    cleanup.dismiss?.();
+    cleanup.dismiss = null;
+    onOpenChange?.(false);
+  }
+  function toggle() {
+    if (isOpen)
+      close();
+    else
+      open();
+  }
+  const ctx = {
+    isOpen: () => isOpen,
+    contentId: ids.contentId,
+    contentRef,
+    classes,
+    open,
+    close,
+    toggle,
+    _contentCount: { value: 0 }
+  };
+  return jsxDEV_7x81h0kn(PopoverContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-popover-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedPopover = Object.assign(ComposedPopoverRoot, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent
+});
+
+export { ComposedPopover };

package/dist/shared/chunk-k0m4yh86.js

@@ -0,0 +1,123 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+
+// src/radio/radio-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var RadioGroupContext = createContext(undefined, "@vertz/ui-primitives::RadioGroupContext");
+function RadioGroupItem({ value, disabled, children }) {
+  const ctx = useContext(RadioGroupContext);
+  if (!ctx) {
+    throw new Error("<RadioGroup.Item> must be used inside <RadioGroup>. " + "Ensure it is a direct or nested child of the RadioGroup root component.");
+  }
+  const isDisabled = disabled ?? false;
+  const isChecked = ctx.isSelected(value);
+  return jsxDEV_7x81h0kn("div", {
+    style: { display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" },
+    "data-radiogroup-item": "",
+    onClick: () => {
+      if (!isDisabled)
+        ctx.select(value);
+    },
+    children: [
+      jsxDEV_7x81h0kn("div", {
+        role: "radio",
+        "data-value": value,
+        "aria-checked": isChecked ? "true" : "false",
+        "data-state": isChecked ? "checked" : "unchecked",
+        tabindex: isChecked ? "0" : "-1",
+        "aria-disabled": isDisabled ? "true" : undefined,
+        class: cn(ctx.classes?.item),
+        style: { pointerEvents: isDisabled ? "none" : undefined, position: "relative" },
+        children: jsxDEV_7x81h0kn("span", {
+          "data-part": "indicator",
+          "data-state": isChecked ? "checked" : "unchecked",
+          class: cn(ctx.classes?.indicator),
+          children: jsxDEV_7x81h0kn("span", {
+            "data-part": "indicator-icon",
+            class: cn(ctx.classes?.indicatorIcon)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      children && jsxDEV_7x81h0kn("span", {
+        children
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ComposedRadioGroupRoot({
+  children,
+  classes,
+  defaultValue = "",
+  onValueChange
+}) {
+  let selectedValue = defaultValue;
+  function select(value) {
+    selectedValue = value;
+    onValueChange?.(value);
+  }
+  const ctx = {
+    isSelected: (value) => selectedValue === value,
+    classes,
+    select
+  };
+  return jsxDEV_7x81h0kn(RadioGroupContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("div", {
+      role: "radiogroup",
+      id: uniqueId("radiogroup"),
+      class: cn(classes?.root),
+      "data-radiogroup-root": "",
+      onKeydown: (event) => {
+        const root = event.currentTarget;
+        const items = [...root.querySelectorAll('[role="radio"]')];
+        const currentIdx = items.indexOf(document.activeElement);
+        if (currentIdx < 0)
+          return;
+        const len = items.length;
+        let nextIdx = -1;
+        if (isKey(event, Keys.ArrowDown, Keys.ArrowRight)) {
+          event.preventDefault();
+          nextIdx = (currentIdx + 1) % len;
+        } else if (isKey(event, Keys.ArrowUp, Keys.ArrowLeft)) {
+          event.preventDefault();
+          nextIdx = (currentIdx - 1 + len) % len;
+        } else if (isKey(event, Keys.Home)) {
+          event.preventDefault();
+          nextIdx = 0;
+        } else if (isKey(event, Keys.End)) {
+          event.preventDefault();
+          nextIdx = len - 1;
+        }
+        if (nextIdx < 0)
+          return;
+        const direction = isKey(event, Keys.End, Keys.ArrowUp, Keys.ArrowLeft) ? -1 : 1;
+        const startIdx = nextIdx;
+        while (items[nextIdx]?.getAttribute("aria-disabled") === "true") {
+          nextIdx = (nextIdx + direction + len) % len;
+          if (nextIdx === startIdx)
+            return;
+        }
+        const nextValue = items[nextIdx]?.getAttribute("data-value");
+        if (nextValue != null) {
+          select(nextValue);
+          items[nextIdx]?.focus();
+        }
+      },
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedRadioGroup = Object.assign(ComposedRadioGroupRoot, {
+  Item: RadioGroupItem
+});
+
+export { ComposedRadioGroup };

package/dist/shared/chunk-k43q9cjr.js

@@ -0,0 +1,82 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/table/table-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var TableContext = createContext(undefined, "@vertz/ui-primitives::TableContext");
+function TableHeader({ children, className, class: classProp }) {
+  const ctx = useContext(TableContext);
+  return jsxDEV_7x81h0kn("thead", {
+    class: cn(ctx?.classes?.header, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function TableBody({ children, className, class: classProp }) {
+  const ctx = useContext(TableContext);
+  return jsxDEV_7x81h0kn("tbody", {
+    class: cn(ctx?.classes?.body, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function TableRow({ children, className, class: classProp }) {
+  const ctx = useContext(TableContext);
+  return jsxDEV_7x81h0kn("tr", {
+    class: cn(ctx?.classes?.row, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function TableHead({ children, className, class: classProp }) {
+  const ctx = useContext(TableContext);
+  return jsxDEV_7x81h0kn("th", {
+    scope: "col",
+    class: cn(ctx?.classes?.head, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function TableCell({ children, className, class: classProp }) {
+  const ctx = useContext(TableContext);
+  return jsxDEV_7x81h0kn("td", {
+    class: cn(ctx?.classes?.cell, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function TableCaption({ children, className, class: classProp }) {
+  const ctx = useContext(TableContext);
+  return jsxDEV_7x81h0kn("caption", {
+    class: cn(ctx?.classes?.caption, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function TableFooter({ children, className, class: classProp }) {
+  const ctx = useContext(TableContext);
+  return jsxDEV_7x81h0kn("tfoot", {
+    class: cn(ctx?.classes?.footer, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedTableRoot({ children, classes, className, class: classProp }) {
+  return jsxDEV_7x81h0kn(TableContext.Provider, {
+    value: { classes },
+    children: jsxDEV_7x81h0kn("div", {
+      style: { position: "relative", width: "100%", overflowX: "auto" },
+      children: jsxDEV_7x81h0kn("table", {
+        style: { borderCollapse: "collapse" },
+        class: cn(classes?.root, className ?? classProp),
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedTable = Object.assign(ComposedTableRoot, {
+  Header: TableHeader,
+  Body: TableBody,
+  Row: TableRow,
+  Head: TableHead,
+  Cell: TableCell,
+  Caption: TableCaption,
+  Footer: TableFooter
+});
+
+export { ComposedTable };