@vertz/ui-primitives 0.2.16 → 0.2.18

package/dist/shared/chunk-bew4bjgf.js

@@ -0,0 +1,165 @@
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/hover-card/hover-card.tsx
+import { __element, __on } from "@vertz/ui/internals";
+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 = (() => {
+    const __el0 = __element("span");
+    __el0.setAttribute("aria-haspopup", "dialog");
+    __el0.setAttribute("aria-expanded", "false");
+    __on(__el0, "mouseenter", show);
+    __on(__el0, "mouseleave", hide);
+    __on(__el0, "focus", showImmediate);
+    __on(__el0, "blur", handleTriggerBlur);
+    __on(__el0, "keydown", handleTriggerKeydown);
+    return __el0;
+  })();
+  const content = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "dialog");
+    {
+      const __v = contentId;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("id", __v === true ? "" : __v);
+    }
+    __el1.setAttribute("aria-hidden", "true");
+    __el1.setAttribute("data-state", "closed");
+    __el1.setAttribute("style", "display: none");
+    __on(__el1, "mouseenter", cancelCloseTimer);
+    __on(__el1, "mouseleave", hide);
+    __on(__el1, "focusin", cancelCloseTimer);
+    __on(__el1, "focusout", handleContentFocusout);
+    __on(__el1, "keydown", handleContentKeydown);
+    return __el1;
+  })();
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state };
+}
+var HoverCard = {
+  Root: HoverCardRoot
+};
+
+export { HoverCard };

package/dist/shared/chunk-dpsgb1xw.js

@@ -0,0 +1,18 @@
+// src/utils/attrs.ts
+function applyAttrs(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value == null)
+      continue;
+    if (key === "class") {
+      const existing = el.getAttribute("class");
+      el.setAttribute("class", existing ? `${existing} ${String(value)}` : String(value));
+    } else if (key === "style") {
+      const existing = el.getAttribute("style");
+      el.setAttribute("style", existing ? `${existing}; ${String(value)}` : String(value));
+    } else {
+      el.setAttribute(key, String(value));
+    }
+  }
+}
+
+export { applyAttrs };

package/dist/shared/chunk-g9qvd20g.js

@@ -0,0 +1,133 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+
+// src/carousel/carousel.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function CarouselRoot(options = {}) {
+  const {
+    orientation = "horizontal",
+    loop = false,
+    defaultIndex = 0,
+    onSlideChange,
+    ...attrs
+  } = options;
+  const state = {
+    currentIndex: signal(defaultIndex),
+    slideCount: signal(0)
+  };
+  const slides = [];
+  function updateSlideVisibility() {
+    const current = state.currentIndex.peek();
+    for (let i = 0;i < slides.length; i++) {
+      const slide = slides[i];
+      if (!slide)
+        continue;
+      slide.setAttribute("aria-hidden", String(i !== current));
+      slide.setAttribute("aria-label", `Slide ${i + 1} of ${slides.length}`);
+      setDataState(slide, i === current ? "active" : "inactive");
+    }
+    if (!loop) {
+      prevButton.disabled = current <= 0;
+      nextButton.disabled = current >= slides.length - 1;
+    }
+    const translateProp = orientation === "horizontal" ? "translateX" : "translateY";
+    viewport.style.transform = `${translateProp}(-${current * 100}%)`;
+  }
+  function goTo(index) {
+    const total = slides.length;
+    if (total === 0)
+      return;
+    let next = index;
+    if (loop) {
+      next = (index % total + total) % total;
+    } else {
+      next = Math.max(0, Math.min(total - 1, index));
+    }
+    if (next === state.currentIndex.peek())
+      return;
+    state.currentIndex.value = next;
+    updateSlideVisibility();
+    onSlideChange?.(next);
+  }
+  function goNext() {
+    goTo(state.currentIndex.peek() + 1);
+  }
+  function goPrev() {
+    goTo(state.currentIndex.peek() - 1);
+  }
+  const viewport = (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("style", "overflow: hidden;");
+    return __el0;
+  })();
+  const prevButton = (() => {
+    const __el1 = __element("button");
+    __el1.setAttribute("type", "button");
+    __el1.setAttribute("aria-label", "Previous slide");
+    __on(__el1, "click", goPrev);
+    return __el1;
+  })();
+  const nextButton = (() => {
+    const __el2 = __element("button");
+    __el2.setAttribute("type", "button");
+    __el2.setAttribute("aria-label", "Next slide");
+    __on(__el2, "click", goNext);
+    return __el2;
+  })();
+  const root = (() => {
+    const __el3 = __element("div");
+    __el3.setAttribute("role", "region");
+    __el3.setAttribute("aria-roledescription", "carousel");
+    {
+      const __v = orientation;
+      if (__v != null && __v !== false)
+        __el3.setAttribute("data-orientation", __v === true ? "" : __v);
+    }
+    __on(__el3, "keydown", (event) => {
+      const prevKey = orientation === "horizontal" ? Keys.ArrowLeft : Keys.ArrowUp;
+      const nextKey = orientation === "horizontal" ? Keys.ArrowRight : Keys.ArrowDown;
+      if (isKey(event, prevKey)) {
+        event.preventDefault();
+        goPrev();
+      }
+      if (isKey(event, nextKey)) {
+        event.preventDefault();
+        goNext();
+      }
+    });
+    __enterChildren(__el3);
+    __insert(__el3, viewport);
+    __exitChildren();
+    return __el3;
+  })();
+  function Slide() {
+    const slide = (() => {
+      const __el4 = __element("div");
+      __el4.setAttribute("role", "group");
+      __el4.setAttribute("aria-roledescription", "slide");
+      return __el4;
+    })();
+    slides.push(slide);
+    state.slideCount.value = slides.length;
+    viewport.appendChild(slide);
+    updateSlideVisibility();
+    return slide;
+  }
+  updateSlideVisibility();
+  applyAttrs(root, attrs);
+  return { root, viewport, prevButton, nextButton, state, Slide, goTo, goNext, goPrev };
+}
+var Carousel = {
+  Root: CarouselRoot
+};
+
+export { Carousel };

package/dist/shared/chunk-gkddsbmh.js

@@ -0,0 +1,73 @@
+import {
+  setDataState
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/toast/toast.tsx
+import { __element, __enterChildren, __exitChildren, __insert } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ToastRoot(options = {}) {
+  const { duration = 5000, politeness = "polite", ...attrs } = options;
+  const state = { messages: signal([]) };
+  const region = (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "status");
+    {
+      const __v = politeness;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-live", __v === true ? "" : __v);
+    }
+    __el0.setAttribute("aria-atomic", "false");
+    __el0.setAttribute("data-state", "empty");
+    return __el0;
+  })();
+  applyAttrs(region, attrs);
+  function announce(content) {
+    const id = uniqueId("toast");
+    const el = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "status");
+      {
+        const __v = id;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-toast-id", __v === true ? "" : __v);
+      }
+      __el1.setAttribute("data-state", "open");
+      __enterChildren(__el1);
+      __insert(__el1, content);
+      __exitChildren();
+      return __el1;
+    })();
+    const msg = { id, content, el };
+    state.messages.value = [...state.messages.peek(), msg];
+    region.appendChild(el);
+    setDataState(region, "active");
+    if (duration > 0) {
+      setTimeout(() => dismiss(id), duration);
+    }
+    return msg;
+  }
+  function dismiss(id) {
+    const messages = state.messages.peek().filter((m) => m.id !== id);
+    state.messages.value = messages;
+    const el = region.querySelector(`[data-toast-id="${id}"]`);
+    if (el) {
+      setDataState(el, "closed");
+      el.remove();
+    }
+    if (messages.length === 0) {
+      setDataState(region, "empty");
+    }
+  }
+  return { region, state, announce, dismiss };
+}
+var Toast = {
+  Root: ToastRoot
+};
+
+export { Toast };

package/dist/shared/chunk-gt0wth9h.js

@@ -0,0 +1,128 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setPressed
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+
+// src/toggle-group/toggle-group.tsx
+import { __element, __on } from "@vertz/ui/internals";
+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 = (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "group");
+    {
+      const __v = orientation;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-orientation", __v === true ? "" : __v);
+    }
+    __on(__el0, "keydown", (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);
+          }
+        }
+      }
+    });
+    return __el0;
+  })();
+  function Item(value) {
+    const isOn = state.value.peek().includes(value);
+    const item = (() => {
+      const __el1 = __element("button");
+      __el1.setAttribute("type", "button");
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      {
+        const __v = isOn ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-pressed", __v === true ? "" : __v);
+      }
+      {
+        const __v = isOn ? "on" : "off";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = state.disabled.peek();
+        if (__v != null && __v !== false)
+          __el1.setAttribute("disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = state.disabled.peek() ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-disabled", __v === true ? "" : __v);
+      }
+      __on(__el1, "click", () => toggleValue(value));
+      return __el1;
+    })();
+    items.push(item);
+    setRovingTabindex(items, 0);
+    root.appendChild(item);
+    return item;
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Item };
+}
+var ToggleGroup = {
+  Root: ToggleGroupRoot
+};
+
+export { ToggleGroup };

package/dist/shared/chunk-hr9hx58m.js

@@ -0,0 +1,71 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/checkbox/checkbox.tsx
+import { computed, signal } from "@vertz/ui";
+import { __attr, __element, __on } from "@vertz/ui/internals";
+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;
+  const checked = signal(defaultChecked, "checked");
+  function toggle() {
+    if (disabled)
+      return;
+    checked.value = checked.value === "mixed" ? true : !checked.value;
+    onCheckedChange?.(checked.value);
+  }
+  const el = computed(() => (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    __el0.setAttribute("role", "checkbox");
+    {
+      const __v = uniqueId("checkbox");
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    __attr(__el0, "aria-checked", () => ariaCheckedFor(checked.value));
+    __attr(__el0, "data-state", () => dataStateFor(checked.value));
+    {
+      const __v = disabled;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("disabled", __v === true ? "" : __v);
+    }
+    {
+      const __v = disabled ? "true" : undefined;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", toggle);
+    __on(__el0, "keydown", (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    return __el0;
+  })());
+  applyAttrs(el.value, attrs);
+  return el.value;
+}
+var Checkbox = {
+  Root: CheckboxRoot
+};
+
+export { Checkbox };