@vertz/ui-primitives 0.2.38 → 0.2.42

package/dist/shared/chunk-2h4m9c71.js

@@ -0,0 +1,38 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/alert/alert-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var AlertContext = createContext(undefined, "@vertz/ui-primitives::AlertContext");
+function AlertTitle({ children, className, class: classProp }) {
+  const ctx = useContext(AlertContext);
+  return jsxDEV_7x81h0kn("h5", {
+    class: cn(ctx?.classes?.title, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function AlertDescription({ children, className, class: classProp }) {
+  const ctx = useContext(AlertContext);
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(ctx?.classes?.description, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedAlertRoot({ children, classes, className, class: classProp }) {
+  return jsxDEV_7x81h0kn(AlertContext.Provider, {
+    value: { classes },
+    children: jsxDEV_7x81h0kn("div", {
+      role: "alert",
+      class: cn(classes?.root, className ?? classProp),
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedAlert = Object.assign(ComposedAlertRoot, {
+  Title: AlertTitle,
+  Description: AlertDescription
+});
+
+export { ComposedAlert };

package/dist/shared/chunk-2sbx20hv.js

@@ -0,0 +1,128 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createFloatingPosition,
+  resolveLayoutElement
+} from "./chunk-vef3sepw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/tooltip/tooltip-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var TooltipContext = createContext(undefined, "@vertz/ui-primitives::TooltipContext");
+function useTooltipContext(componentName) {
+  const ctx = useContext(TooltipContext);
+  if (!ctx) {
+    throw new Error(`<Tooltip.${componentName}> must be used inside <Tooltip>. ` + "Ensure it is a direct or nested child of the Tooltip root component.");
+  }
+  return ctx;
+}
+function TooltipTrigger({ children }) {
+  const ctx = useTooltipContext("Trigger");
+  const idx = ctx._triggerCount.value++;
+  if (idx > 0)
+    console.warn("Duplicate <Tooltip.Trigger> detected – only the first is used");
+  const childNodes = Array.isArray(children) ? children : [children];
+  const childEl = childNodes.find((c) => c instanceof HTMLElement);
+  if (childEl) {
+    childEl.setAttribute("aria-describedby", ctx.contentId);
+  }
+  return jsxDEV_7x81h0kn("span", {
+    style: { display: "contents" },
+    "data-tooltip-trigger": "",
+    "aria-describedby": ctx.contentId,
+    onMouseenter: () => ctx.show(),
+    onMouseleave: () => ctx.hide(),
+    onFocus: () => ctx.show(),
+    onBlur: () => ctx.hide(),
+    children
+  }, undefined, false, undefined, this);
+}
+function TooltipContent({ children, className: cls, class: classProp }) {
+  const ctx = useTooltipContext("Content");
+  const idx = ctx._contentCount.value++;
+  if (idx > 0)
+    console.warn("Duplicate <Tooltip.Content> detected – only the first is used");
+  const isOpen = ctx.isOpen();
+  return jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    role: "tooltip",
+    id: ctx.contentId,
+    "data-tooltip-content": "",
+    "aria-hidden": isOpen ? "false" : "true",
+    "data-state": isOpen ? "open" : "closed",
+    style: { display: isOpen ? "" : "none" },
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedTooltipRoot({
+  children,
+  classes,
+  delay = 300,
+  positioning
+}) {
+  const contentId = uniqueId("tooltip");
+  const contentRef = ref();
+  let isOpen = false;
+  const state = {
+    showTimeout: null,
+    floatingCleanup: null
+  };
+  function applyPositioning() {
+    const content = contentRef.current;
+    const triggerSpan = content?.parentElement?.querySelector("[data-tooltip-trigger]");
+    if (!triggerSpan || !content)
+      return;
+    const trigger = resolveLayoutElement(triggerSpan);
+    content.style.position = "fixed";
+    const floatingOpts = positioning ?? { placement: "top", offset: 4 };
+    const result = createFloatingPosition(trigger, content, floatingOpts);
+    state.floatingCleanup = result.cleanup;
+  }
+  function show() {
+    if (state.showTimeout !== null)
+      return;
+    state.showTimeout = setTimeout(() => {
+      state.showTimeout = null;
+      isOpen = true;
+      applyPositioning();
+    }, delay);
+  }
+  function hide() {
+    if (state.showTimeout !== null) {
+      clearTimeout(state.showTimeout);
+      state.showTimeout = null;
+    }
+    isOpen = false;
+    state.floatingCleanup?.();
+    state.floatingCleanup = null;
+  }
+  const ctx = {
+    isOpen: () => isOpen,
+    contentId,
+    contentRef,
+    classes,
+    show,
+    hide,
+    _triggerCount: { value: 0 },
+    _contentCount: { value: 0 }
+  };
+  return jsxDEV_7x81h0kn(TooltipContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-tooltip-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedTooltip = Object.assign(ComposedTooltipRoot, {
+  Trigger: TooltipTrigger,
+  Content: TooltipContent
+});
+
+export { ComposedTooltip };

package/dist/shared/chunk-2ye674gr.js

@@ -0,0 +1,70 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/breadcrumb/breadcrumb-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, Link, useContext } from "@vertz/ui";
+var BreadcrumbContext = createContext(undefined, "@vertz/ui-primitives::BreadcrumbContext");
+function BreadcrumbItem({
+  children,
+  href,
+  current,
+  className,
+  class: classProp
+}) {
+  const ctx = useContext(BreadcrumbContext);
+  const separatorText = ctx?.separator ?? "/";
+  if (href && current) {
+    console.warn('Breadcrumb.Item: both "href" and "current" are set. "current" takes precedence — the link will not render.');
+  }
+  const content = current ? jsxDEV_7x81h0kn("span", {
+    "aria-current": "page",
+    class: cn(ctx?.classes?.page, className ?? classProp),
+    children
+  }, undefined, false, undefined, this) : href ? jsxDEV_7x81h0kn(Link, {
+    href,
+    className: cn(ctx?.classes?.link, className ?? classProp),
+    children: children ?? ""
+  }, undefined, false, undefined, this) : jsxDEV_7x81h0kn("span", {
+    class: cn(ctx?.classes?.link, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+  return jsxDEV_7x81h0kn("li", {
+    class: cn(ctx?.classes?.item),
+    children: [
+      jsxDEV_7x81h0kn("span", {
+        role: "presentation",
+        "aria-hidden": "true",
+        class: cn(ctx?.classes?.separator),
+        children: separatorText
+      }, undefined, false, undefined, this),
+      content
+    ]
+  }, undefined, true, undefined, this);
+}
+function ComposedBreadcrumbRoot({
+  children,
+  separator = "/",
+  classes,
+  className,
+  class: classProp
+}) {
+  return jsxDEV_7x81h0kn(BreadcrumbContext.Provider, {
+    value: { classes, separator },
+    children: jsxDEV_7x81h0kn("nav", {
+      "aria-label": "Breadcrumb",
+      class: cn(classes?.nav, className ?? classProp),
+      children: jsxDEV_7x81h0kn("ol", {
+        class: cn(classes?.list),
+        style: { listStyle: "none", margin: "0", padding: "0" },
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedBreadcrumb = Object.assign(ComposedBreadcrumbRoot, {
+  Item: BreadcrumbItem
+});
+
+export { ComposedBreadcrumb };

package/dist/shared/chunk-34d8385y.js

@@ -0,0 +1,15 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/input/input-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ComposedInputRoot({ classes, className, class: classProp, ...props }) {
+  return jsxDEV_7x81h0kn("input", {
+    class: cn(classes?.base, className ?? classProp),
+    ...props
+  }, undefined, false, undefined, this);
+}
+var ComposedInput = ComposedInputRoot;
+
+export { ComposedInput };

package/dist/shared/chunk-4d7bm8h0.js

@@ -0,0 +1,113 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/pagination/pagination-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function generatePaginationRange(current, total, siblings) {
+  const range = [];
+  const left = Math.max(2, current - siblings);
+  const right = Math.min(total - 1, current + siblings);
+  range.push(1);
+  if (left > 2) {
+    range.push("...");
+  }
+  for (let idx = left;idx <= right; idx++) {
+    if (idx !== 1 && idx !== total) {
+      range.push(idx);
+    }
+  }
+  if (right < total - 1) {
+    range.push("...");
+  }
+  if (total > 1) {
+    range.push(total);
+  }
+  return range;
+}
+function PageButton({ page, currentPage, onPageChange, classes }) {
+  if (page === currentPage) {
+    return jsxDEV_7x81h0kn("button", {
+      type: "button",
+      class: cn(classes?.linkActive),
+      "aria-current": "page",
+      children: String(page)
+    }, undefined, false, undefined, this);
+  }
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    class: cn(classes?.link),
+    onClick: () => onPageChange(page),
+    children: String(page)
+  }, undefined, false, undefined, this);
+}
+function buildPageItems(range, classes, currentPage, onPageChange, ellipsisContent) {
+  return range.map((page) => page === "..." ? jsxDEV_7x81h0kn("li", {
+    class: cn(classes?.item),
+    children: jsxDEV_7x81h0kn("span", {
+      "aria-hidden": "true",
+      class: cn(classes?.ellipsis),
+      children: ellipsisContent
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this) : jsxDEV_7x81h0kn("li", {
+    class: cn(classes?.item),
+    children: jsxDEV_7x81h0kn(PageButton, {
+      page,
+      currentPage,
+      onPageChange,
+      classes
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this));
+}
+function ComposedPaginationRoot({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  classes,
+  className,
+  class: classProp,
+  prevContent = "Previous",
+  nextContent = "Next",
+  ellipsisContent = "..."
+}) {
+  const range = generatePaginationRange(currentPage, totalPages, siblingCount);
+  const pageItems = () => buildPageItems(range, classes, currentPage, onPageChange, ellipsisContent);
+  return jsxDEV_7x81h0kn("nav", {
+    "aria-label": "Pagination",
+    class: cn(classes?.nav, className ?? classProp),
+    children: jsxDEV_7x81h0kn("ul", {
+      class: cn(classes?.list),
+      children: [
+        jsxDEV_7x81h0kn("li", {
+          class: cn(classes?.item),
+          children: jsxDEV_7x81h0kn("button", {
+            type: "button",
+            class: cn(classes?.navButton),
+            style: { paddingLeft: "0.375rem", paddingRight: "0.625rem" },
+            "aria-label": "Previous page",
+            disabled: currentPage <= 1,
+            onClick: () => onPageChange(currentPage - 1),
+            children: prevContent
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        pageItems,
+        jsxDEV_7x81h0kn("li", {
+          class: cn(classes?.item),
+          children: jsxDEV_7x81h0kn("button", {
+            type: "button",
+            class: cn(classes?.navButton),
+            style: { paddingLeft: "0.625rem", paddingRight: "0.375rem" },
+            "aria-label": "Next page",
+            disabled: currentPage >= totalPages,
+            onClick: () => onPageChange(currentPage + 1),
+            children: nextContent
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedPagination = ComposedPaginationRoot;
+
+export { ComposedPagination };

package/dist/shared/chunk-4zjgxr7x.js

@@ -0,0 +1,157 @@
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  uniqueId
+} 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/hover-card/hover-card.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function HoverCardRoot(options = {}) {
+  const { openDelay = 700, closeDelay = 300, onOpenChange, positioning, ...attrs } = options;
+  const contentId = uniqueId("hovercard");
+  const state = { open: signal(false) };
+  let openTimeout = null;
+  let closeTimeout = null;
+  let floatingCleanup = null;
+  function cancelTimers() {
+    if (openTimeout) {
+      clearTimeout(openTimeout);
+      openTimeout = null;
+    }
+    if (closeTimeout) {
+      clearTimeout(closeTimeout);
+      closeTimeout = null;
+    }
+  }
+  function cancelCloseTimer() {
+    if (closeTimeout) {
+      clearTimeout(closeTimeout);
+      closeTimeout = null;
+    }
+  }
+  function positionContent() {
+    if (positioning) {
+      floatingCleanup?.();
+      const effectivePlacement = positioning.placement ?? "bottom";
+      const result = createFloatingPosition(trigger, content, {
+        ...positioning,
+        placement: effectivePlacement
+      });
+      floatingCleanup = result.cleanup;
+    }
+  }
+  function show() {
+    cancelTimers();
+    if (state.open.peek())
+      return;
+    openTimeout = setTimeout(() => {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(content, false);
+      setDataState(content, "open");
+      positionContent();
+      onOpenChange?.(true);
+      openTimeout = null;
+    }, openDelay);
+  }
+  function showImmediate() {
+    cancelTimers();
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(content, false);
+    setDataState(content, "open");
+    positionContent();
+    onOpenChange?.(true);
+  }
+  function hide() {
+    cancelTimers();
+    if (!state.open.peek())
+      return;
+    closeTimeout = setTimeout(() => {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      floatingCleanup?.();
+      floatingCleanup = null;
+      onOpenChange?.(false);
+      closeTimeout = null;
+    }, closeDelay);
+  }
+  function hideImmediate() {
+    cancelTimers();
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(content, "closed");
+    setHiddenAnimated(content, true);
+    floatingCleanup?.();
+    floatingCleanup = null;
+    onOpenChange?.(false);
+  }
+  function handleTriggerBlur(event) {
+    const related = event.relatedTarget;
+    if (related && (trigger.contains(related) || content.contains(related)))
+      return;
+    hide();
+  }
+  function handleTriggerKeydown(event) {
+    if (isKey(event, Keys.Escape) && state.open.peek()) {
+      hideImmediate();
+    }
+  }
+  function handleContentFocusout(event) {
+    const related = event.relatedTarget;
+    if (related && (trigger.contains(related) || content.contains(related)))
+      return;
+    hide();
+  }
+  function handleContentKeydown(event) {
+    if (isKey(event, Keys.Escape)) {
+      hideImmediate();
+      trigger.focus();
+    }
+  }
+  const trigger = jsxDEV_7x81h0kn("span", {
+    "aria-haspopup": "dialog",
+    "aria-expanded": "false",
+    onMouseenter: show,
+    onMouseleave: hide,
+    onFocus: showImmediate,
+    onBlur: handleTriggerBlur,
+    onKeydown: handleTriggerKeydown
+  }, undefined, false, undefined, this);
+  const content = jsxDEV_7x81h0kn("div", {
+    role: "dialog",
+    id: contentId,
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" },
+    onMouseenter: cancelCloseTimer,
+    onMouseleave: hide,
+    onFocusin: cancelCloseTimer,
+    onFocusout: handleContentFocusout,
+    onKeydown: handleContentKeydown
+  }, undefined, false, undefined, this);
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state };
+}
+var HoverCard = {
+  Root: HoverCardRoot
+};
+
+export { HoverCard };

package/dist/shared/chunk-5c150wvr.js

@@ -0,0 +1,140 @@
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/scroll-area/scroll-area.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function ScrollAreaRoot(options = {}) {
+  const { orientation = "vertical", type: _type, ...attrs } = options;
+  const state = {
+    scrollTop: signal(0),
+    scrollLeft: signal(0)
+  };
+  let isDraggingY = false;
+  let startY = 0;
+  let startScrollTop = 0;
+  let isDraggingX = false;
+  let startX = 0;
+  let startScrollLeft = 0;
+  function syncThumbY() {
+    const { scrollTop, scrollHeight, clientHeight } = viewport;
+    if (scrollHeight <= clientHeight) {
+      thumbY.style.height = "0";
+      return;
+    }
+    const ratio = clientHeight / scrollHeight;
+    thumbY.style.height = `${ratio * 100}%`;
+    const scrollRatio = scrollTop / (scrollHeight - clientHeight);
+    thumbY.style.transform = `translateY(${scrollRatio * (1 / ratio - 1) * 100}%)`;
+    state.scrollTop.value = scrollTop;
+  }
+  function syncThumbX() {
+    const { scrollLeft, scrollWidth, clientWidth } = viewport;
+    if (scrollWidth <= clientWidth) {
+      thumbX.style.width = "0";
+      return;
+    }
+    const ratio = clientWidth / scrollWidth;
+    thumbX.style.width = `${ratio * 100}%`;
+    const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
+    thumbX.style.transform = `translateX(${scrollRatio * (1 / ratio - 1) * 100}%)`;
+    state.scrollLeft.value = scrollLeft;
+  }
+  function update() {
+    syncThumbY();
+    syncThumbX();
+  }
+  function handleViewportScroll() {
+    if (orientation === "vertical" || orientation === "both")
+      syncThumbY();
+    if (orientation === "horizontal" || orientation === "both")
+      syncThumbX();
+  }
+  function handleThumbYDown(e) {
+    isDraggingY = true;
+    startY = e.clientY;
+    startScrollTop = viewport.scrollTop;
+    thumbY.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }
+  function handleThumbYMove(e) {
+    if (!isDraggingY)
+      return;
+    const delta = e.clientY - startY;
+    const scrollbarHeight = scrollbarY.clientHeight;
+    const scrollRange = viewport.scrollHeight - viewport.clientHeight;
+    if (scrollbarHeight > 0) {
+      viewport.scrollTop = startScrollTop + delta / scrollbarHeight * scrollRange;
+    }
+  }
+  function handleThumbYUp(e) {
+    isDraggingY = false;
+    thumbY.releasePointerCapture(e.pointerId);
+  }
+  function handleThumbXDown(e) {
+    isDraggingX = true;
+    startX = e.clientX;
+    startScrollLeft = viewport.scrollLeft;
+    thumbX.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }
+  function handleThumbXMove(e) {
+    if (!isDraggingX)
+      return;
+    const delta = e.clientX - startX;
+    const scrollbarWidth = scrollbarX.clientWidth;
+    const scrollRange = viewport.scrollWidth - viewport.clientWidth;
+    if (scrollbarWidth > 0) {
+      viewport.scrollLeft = startScrollLeft + delta / scrollbarWidth * scrollRange;
+    }
+  }
+  function handleThumbXUp(e) {
+    isDraggingX = false;
+    thumbX.releasePointerCapture(e.pointerId);
+  }
+  const thumbY = jsxDEV_7x81h0kn("div", {
+    onPointerdown: handleThumbYDown,
+    onPointermove: handleThumbYMove,
+    onPointerup: handleThumbYUp
+  }, undefined, false, undefined, this);
+  const scrollbarY = jsxDEV_7x81h0kn("div", {
+    "aria-hidden": "true",
+    "data-orientation": "vertical",
+    children: thumbY
+  }, undefined, false, undefined, this);
+  const thumbX = jsxDEV_7x81h0kn("div", {
+    onPointerdown: handleThumbXDown,
+    onPointermove: handleThumbXMove,
+    onPointerup: handleThumbXUp
+  }, undefined, false, undefined, this);
+  const scrollbarX = jsxDEV_7x81h0kn("div", {
+    "aria-hidden": "true",
+    "data-orientation": "horizontal",
+    children: thumbX
+  }, undefined, false, undefined, this);
+  const content = jsxDEV_7x81h0kn("div", {}, undefined, false, undefined, this);
+  const showY = orientation === "vertical" || orientation === "both";
+  const showX = orientation === "horizontal" || orientation === "both";
+  const viewport = jsxDEV_7x81h0kn("div", {
+    style: { overflow: "scroll" },
+    onScroll: handleViewportScroll,
+    children: content
+  }, undefined, false, undefined, this);
+  viewport.style.scrollbarWidth = "none";
+  const root = jsxDEV_7x81h0kn("div", {
+    style: { position: "relative", overflow: "hidden" },
+    children: [
+      viewport,
+      showY && scrollbarY,
+      showX && scrollbarX
+    ]
+  }, undefined, true, undefined, this);
+  applyAttrs(root, attrs);
+  return { root, viewport, content, scrollbarY, thumbY, scrollbarX, thumbX, state, update };
+}
+var ScrollArea = {
+  Root: ScrollAreaRoot
+};
+
+export { ScrollArea };