@vertz/ui-primitives 0.2.15 → 0.2.17

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 };

package/dist/shared/chunk-j4cm8avr.js

@@ -0,0 +1,175 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setValueRange
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+
+// src/resizable-panel/resizable-panel.tsx
+import { __element, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ResizablePanelRoot(options = {}) {
+  const { orientation = "horizontal", onResize, ...attrs } = options;
+  const state = { sizes: signal([]) };
+  const panels = [];
+  const handles = [];
+  function updateSizes(newSizes) {
+    state.sizes.value = [...newSizes];
+    for (let i = 0;i < panels.length; i++) {
+      const panel = panels[i];
+      if (!panel)
+        continue;
+      const size = newSizes[i] ?? 0;
+      panel.el.style.flex = `0 0 ${size}%`;
+    }
+    for (let i = 0;i < handles.length; i++) {
+      const handle = handles[i];
+      const leftPanel = panels[i];
+      if (handle && leftPanel) {
+        const size = newSizes[i] ?? 0;
+        setValueRange(handle, Math.round(size), Math.round(leftPanel.minSize), Math.round(leftPanel.maxSize));
+      }
+    }
+    onResize?.(newSizes);
+  }
+  const root = (() => {
+    const __el0 = __element("div");
+    {
+      const __v = `display: flex; flex-direction: ${orientation === "horizontal" ? "row" : "column"};`;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("style", __v === true ? "" : __v);
+    }
+    {
+      const __v = orientation;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-orientation", __v === true ? "" : __v);
+    }
+    return __el0;
+  })();
+  function Panel(panelOptions = {}) {
+    const { defaultSize, minSize = 0, maxSize = 100 } = panelOptions;
+    const el = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("data-panel", "");
+      return __el1;
+    })();
+    panels.push({ el, minSize, maxSize });
+    const sizes = state.sizes.peek();
+    if (defaultSize != null) {
+      sizes.push(defaultSize);
+    } else {
+      const equalSize = 100 / panels.length;
+      sizes.length = 0;
+      for (let i = 0;i < panels.length; i++) {
+        sizes.push(equalSize);
+      }
+    }
+    updateSizes(sizes);
+    root.appendChild(el);
+    return el;
+  }
+  function Handle() {
+    const handleIndex = handles.length;
+    const handle = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("role", "separator");
+      __el2.setAttribute("tabindex", "0");
+      {
+        const __v = orientation;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("data-orientation", __v === true ? "" : __v);
+      }
+      __el2.setAttribute("data-state", "idle");
+      __on(__el2, "keydown", (event) => {
+        const sizes = [...state.sizes.peek()];
+        const leftIdx = handleIndex;
+        const rightIdx = handleIndex + 1;
+        const leftPanel = panels[leftIdx];
+        const rightPanel = panels[rightIdx];
+        if (!leftPanel || !rightPanel)
+          return;
+        let leftSize = sizes[leftIdx] ?? 0;
+        let rightSize = sizes[rightIdx] ?? 0;
+        const STEP = 5;
+        const growKey = orientation === "horizontal" ? Keys.ArrowRight : Keys.ArrowDown;
+        const shrinkKey = orientation === "horizontal" ? Keys.ArrowLeft : Keys.ArrowUp;
+        if (isKey(event, growKey)) {
+          event.preventDefault();
+          const delta = Math.min(STEP, rightSize - rightPanel.minSize, leftPanel.maxSize - leftSize);
+          leftSize += delta;
+          rightSize -= delta;
+        } else if (isKey(event, shrinkKey)) {
+          event.preventDefault();
+          const delta = Math.min(STEP, leftSize - leftPanel.minSize, rightPanel.maxSize - rightSize);
+          leftSize -= delta;
+          rightSize += delta;
+        } else if (isKey(event, Keys.Home)) {
+          event.preventDefault();
+          const delta = leftSize - leftPanel.minSize;
+          leftSize -= delta;
+          rightSize += delta;
+        } else if (isKey(event, Keys.End)) {
+          event.preventDefault();
+          const delta = rightSize - rightPanel.minSize;
+          leftSize += delta;
+          rightSize -= delta;
+        } else {
+          return;
+        }
+        sizes[leftIdx] = leftSize;
+        sizes[rightIdx] = rightSize;
+        updateSizes(sizes);
+      });
+      __on(__el2, "pointerdown", (event) => {
+        event.preventDefault();
+        handle.setPointerCapture(event.pointerId);
+        setDataState(handle, "dragging");
+        const startPos = orientation === "horizontal" ? event.clientX : event.clientY;
+        const rootSize = orientation === "horizontal" ? root.offsetWidth : root.offsetHeight;
+        const startSizes = [...state.sizes.peek()];
+        function onMove(e) {
+          const currentPos = orientation === "horizontal" ? e.clientX : e.clientY;
+          const delta = (currentPos - startPos) / rootSize * 100;
+          const sizes = [...startSizes];
+          const leftIdx = handleIndex;
+          const rightIdx = handleIndex + 1;
+          const leftPanel = panels[leftIdx];
+          const rightPanel = panels[rightIdx];
+          if (!leftPanel || !rightPanel)
+            return;
+          let newLeft = (startSizes[leftIdx] ?? 0) + delta;
+          let newRight = (startSizes[rightIdx] ?? 0) - delta;
+          newLeft = Math.max(leftPanel.minSize, Math.min(leftPanel.maxSize, newLeft));
+          newRight = Math.max(rightPanel.minSize, Math.min(rightPanel.maxSize, newRight));
+          sizes[leftIdx] = newLeft;
+          sizes[rightIdx] = newRight;
+          updateSizes(sizes);
+        }
+        function onUp(e) {
+          handle.releasePointerCapture(e.pointerId);
+          setDataState(handle, "idle");
+          handle.removeEventListener("pointermove", onMove);
+          handle.removeEventListener("pointerup", onUp);
+        }
+        handle.addEventListener("pointermove", onMove);
+        handle.addEventListener("pointerup", onUp);
+      });
+      return __el2;
+    })();
+    handles.push(handle);
+    root.appendChild(handle);
+    return handle;
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Panel, Handle };
+}
+var ResizablePanel = {
+  Root: ResizablePanelRoot
+};
+
+export { ResizablePanel };

package/dist/shared/chunk-jctqs9m4.js

@@ -0,0 +1,60 @@
+// src/utils/keyboard.ts
+var Keys = {
+  Enter: "Enter",
+  Space: " ",
+  Escape: "Escape",
+  ArrowUp: "ArrowUp",
+  ArrowDown: "ArrowDown",
+  ArrowLeft: "ArrowLeft",
+  ArrowRight: "ArrowRight",
+  Home: "Home",
+  End: "End",
+  Tab: "Tab"
+};
+function isKey(event, ...keys) {
+  return keys.includes(event.key);
+}
+function handleListNavigation(event, items, options = {}) {
+  const { orientation = "vertical", loop = true } = options;
+  if (items.length === 0)
+    return null;
+  const prevKey = orientation === "vertical" ? Keys.ArrowUp : Keys.ArrowLeft;
+  const nextKey = orientation === "vertical" ? Keys.ArrowDown : Keys.ArrowRight;
+  const currentIndex = items.indexOf(document.activeElement);
+  let nextIndex = -1;
+  if (isKey(event, prevKey)) {
+    event.preventDefault();
+    if (currentIndex <= 0) {
+      nextIndex = loop ? items.length - 1 : 0;
+    } else {
+      nextIndex = currentIndex - 1;
+    }
+  } else if (isKey(event, nextKey)) {
+    event.preventDefault();
+    if (currentIndex >= items.length - 1) {
+      nextIndex = loop ? 0 : items.length - 1;
+    } else {
+      nextIndex = currentIndex + 1;
+    }
+  } else if (isKey(event, Keys.Home)) {
+    event.preventDefault();
+    nextIndex = 0;
+  } else if (isKey(event, Keys.End)) {
+    event.preventDefault();
+    nextIndex = items.length - 1;
+  }
+  const target = items[nextIndex];
+  if (target) {
+    target.focus();
+    return target;
+  }
+  return null;
+}
+function handleActivation(event, handler) {
+  if (isKey(event, Keys.Enter, Keys.Space)) {
+    event.preventDefault();
+    handler();
+  }
+}
+
+export { Keys, isKey, handleListNavigation, handleActivation };