@vertz/ui-primitives 0.2.41 → 0.2.43

package/dist/shared/chunk-ajawpc05.js

@@ -0,0 +1,305 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+
+// src/select/select-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, onMount, ref, useContext } from "@vertz/ui";
+var SelectContext = createContext(undefined, "@vertz/ui-primitives::SelectContext");
+function useSelectContext(componentName) {
+  const ctx = useContext(SelectContext);
+  if (!ctx) {
+    throw new Error(`<Select.${componentName}> must be used inside <Select>. ` + "Ensure it is a direct or nested child of the Select root component.");
+  }
+  return ctx;
+}
+function SelectTrigger({ children, className: cls, class: classProp }) {
+  const ctx = useSelectContext("Trigger");
+  const displayText = children ?? (ctx.selectedValue() || ctx.placeholder || "");
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    role: "combobox",
+    "data-select-trigger": "",
+    "aria-controls": ctx.contentId,
+    "aria-haspopup": "listbox",
+    "aria-expanded": "false",
+    "data-state": "closed",
+    class: cn(ctx.classes?.trigger, cls ?? classProp),
+    onClick: () => ctx.toggle(),
+    onKeydown: (event) => {
+      if (isKey(event, Keys.ArrowDown, Keys.ArrowUp, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        if (!ctx.isOpen())
+          ctx.open();
+      }
+    },
+    children: [
+      jsxDEV_7x81h0kn("span", {
+        "data-part": "text",
+        style: {
+          flex: 1,
+          textAlign: "start",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: displayText
+      }, undefined, false, undefined, this),
+      jsxDEV_7x81h0kn("span", {
+        "data-part": "chevron",
+        children: jsxDEV_7x81h0kn("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true",
+          children: jsxDEV_7x81h0kn("path", {
+            d: "m6 9 6 6 6-6"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function SelectContent({ children, className: cls, class: classProp }) {
+  const ctx = useSelectContext("Content");
+  const instanceIndex = ctx._contentCount.value++;
+  if (instanceIndex > 0) {
+    console.warn("Duplicate <Select.Content> detected – only the first is used");
+  }
+  onMount(() => {
+    const el = ctx.contentRef.current;
+    if (!el || el.__selectWired)
+      return;
+    el.__selectWired = true;
+    el.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        ctx.close();
+        return;
+      }
+      const items = [...el.querySelectorAll('[role="option"]')];
+      const focusedIdx = items.indexOf(document.activeElement);
+      if (isKey(event, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        const active = items[focusedIdx];
+        if (active) {
+          const val = active.getAttribute("data-value");
+          if (val !== null)
+            ctx.selectItem(val);
+        }
+        return;
+      }
+      const result = handleListNavigation(event, items, { orientation: "vertical" });
+      if (result)
+        return;
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        const char = event.key.toLowerCase();
+        const match = items.find((item) => item.textContent?.toLowerCase().startsWith(char));
+        if (match)
+          match.focus();
+      }
+    });
+  });
+  return jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    role: "listbox",
+    tabindex: "-1",
+    id: ctx.contentId,
+    "data-select-content": "",
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" },
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function SelectItem({ value, children, className: cls, class: classProp }) {
+  const ctx = useSelectContext("Item");
+  const isSelected = ctx.selectedValue() === value;
+  return jsxDEV_7x81h0kn("div", {
+    role: "option",
+    "data-value": value,
+    tabindex: "-1",
+    "aria-selected": isSelected ? "true" : "false",
+    "data-state": isSelected ? "active" : "inactive",
+    class: cn(ctx.classes?.item, cls ?? classProp),
+    onClick: () => ctx.selectItem(value),
+    children: [
+      children ?? value,
+      jsxDEV_7x81h0kn("span", {
+        "data-part": "indicator",
+        style: { display: isSelected ? "" : "none" },
+        class: cn(ctx.classes?.itemIndicator)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function SelectGroup({ label, children, className: cls, class: classProp }) {
+  const ctx = useSelectContext("Group");
+  return jsxDEV_7x81h0kn("div", {
+    role: "group",
+    "aria-label": label,
+    class: cn(ctx.classes?.group, cls ?? classProp),
+    children: [
+      jsxDEV_7x81h0kn("div", {
+        "data-part": "group-label",
+        role: "none",
+        class: cn(ctx.classes?.label),
+        children: label
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+function SelectSeparator({ className: cls, class: classProp }) {
+  const { classes } = useSelectContext("Separator");
+  return jsxDEV_7x81h0kn("hr", {
+    role: "separator",
+    class: cn(classes?.separator, cls ?? classProp)
+  }, undefined, false, undefined, this);
+}
+function ComposedSelectRoot({
+  children,
+  classes,
+  defaultValue = "",
+  placeholder,
+  onValueChange,
+  positioning
+}) {
+  const ids = linkedIds("select");
+  const contentRef = ref();
+  let isOpen = false;
+  let selectedValue = defaultValue;
+  const state = { floatingCleanup: null, dismissCleanup: null };
+  function getContentEl() {
+    return contentRef.current ?? null;
+  }
+  function getTriggerEl() {
+    const content = getContentEl();
+    return content?.parentElement?.querySelector("[data-select-trigger]");
+  }
+  function syncTriggerAttrs(nowOpen) {
+    const trigger = getTriggerEl();
+    if (!trigger)
+      return;
+    trigger.setAttribute("aria-expanded", nowOpen ? "true" : "false");
+    trigger.setAttribute("data-state", nowOpen ? "open" : "closed");
+  }
+  function showContent() {
+    const content = getContentEl();
+    if (!content)
+      return;
+    content.setAttribute("data-state", "open");
+    content.setAttribute("aria-hidden", "false");
+    content.style.display = "";
+  }
+  function hideContent() {
+    const content = getContentEl();
+    if (!content)
+      return;
+    content.setAttribute("data-state", "closed");
+    setHiddenAnimated(content, true);
+  }
+  function open() {
+    isOpen = true;
+    syncTriggerAttrs(true);
+    showContent();
+    const contentEl = getContentEl();
+    const triggerEl = getTriggerEl();
+    if (!contentEl)
+      return;
+    contentEl.style.position = "fixed";
+    if (triggerEl) {
+      const floatingOpts = { matchReferenceWidth: true, ...positioning };
+      const result = createFloatingPosition(triggerEl, contentEl, floatingOpts);
+      state.floatingCleanup = result.cleanup;
+    }
+    const insideElements = [contentEl, ...triggerEl ? [triggerEl] : []];
+    state.dismissCleanup = createDismiss({
+      onDismiss: close,
+      insideElements
+    });
+    const items = [...contentEl.querySelectorAll('[role="option"]')];
+    const selectedIdx = items.findIndex((el) => el.getAttribute("data-value") === selectedValue);
+    if (selectedIdx >= 0) {
+      items.forEach((el, i) => el.setAttribute("tabindex", i === selectedIdx ? "0" : "-1"));
+      items[selectedIdx]?.focus();
+    } else {
+      contentEl.focus();
+    }
+  }
+  function close() {
+    isOpen = false;
+    syncTriggerAttrs(false);
+    hideContent();
+    state.floatingCleanup?.();
+    state.floatingCleanup = null;
+    state.dismissCleanup?.();
+    state.dismissCleanup = null;
+    getTriggerEl()?.focus();
+  }
+  function toggle() {
+    if (isOpen)
+      close();
+    else
+      open();
+  }
+  function selectItem(value) {
+    selectedValue = value;
+    onValueChange?.(value);
+    close();
+  }
+  const ctx = {
+    isOpen: () => isOpen,
+    selectedValue: () => selectedValue,
+    placeholder,
+    contentId: ids.contentId,
+    contentRef,
+    classes,
+    open,
+    close,
+    toggle,
+    selectItem,
+    _contentCount: { value: 0 }
+  };
+  return jsxDEV_7x81h0kn(SelectContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-select-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedSelect = Object.assign(ComposedSelectRoot, {
+  Trigger: SelectTrigger,
+  Content: SelectContent,
+  Item: SelectItem,
+  Group: SelectGroup,
+  Separator: SelectSeparator
+});
+
+export { ComposedSelect };

package/dist/shared/chunk-b7mzwqhj.js

@@ -0,0 +1,125 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setValueRange
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/slider/slider.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function SliderRoot(options = {}) {
+  const {
+    defaultValue = 0,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    onValueChange,
+    ...attrs
+  } = options;
+  const state = {
+    value: signal(defaultValue),
+    disabled: signal(disabled)
+  };
+  function clamp(val) {
+    return Math.min(max, Math.max(min, val));
+  }
+  function updatePosition(pct2) {
+    thumb.style.left = `${pct2}%`;
+    fill.style.width = `${pct2}%`;
+  }
+  function setValue(val) {
+    if (state.disabled.peek())
+      return;
+    const clamped = clamp(val);
+    state.value.value = clamped;
+    setValueRange(thumb, clamped, min, max);
+    const pct2 = (clamped - min) / (max - min) * 100;
+    updatePosition(pct2);
+    setDataState(root, "active");
+    onValueChange?.(clamped);
+  }
+  function valueFromPointer(event) {
+    const rect = track.getBoundingClientRect();
+    const pct2 = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+    const raw = min + pct2 * (max - min);
+    return Math.round(raw / step) * step;
+  }
+  const fill = jsxDEV_7x81h0kn("div", {
+    "data-part": "fill",
+    style: { position: "absolute", height: "100%", borderRadius: "inherit" }
+  }, undefined, false, undefined, this);
+  const thumb = jsxDEV_7x81h0kn("div", {
+    role: "slider",
+    tabindex: disabled ? "-1" : "0",
+    "data-part": "thumb",
+    "aria-disabled": disabled ? "true" : undefined,
+    style: { position: "absolute", transform: "translate(-50%, -50%)" },
+    onKeydown: (event) => {
+      if (state.disabled.peek())
+        return;
+      const current = state.value.peek();
+      if (isKey(event, Keys.ArrowRight, Keys.ArrowUp)) {
+        event.preventDefault();
+        setValue(current + step);
+      } else if (isKey(event, Keys.ArrowLeft, Keys.ArrowDown)) {
+        event.preventDefault();
+        setValue(current - step);
+      } else if (isKey(event, Keys.Home)) {
+        event.preventDefault();
+        setValue(min);
+      } else if (isKey(event, Keys.End)) {
+        event.preventDefault();
+        setValue(max);
+      }
+    }
+  }, undefined, false, undefined, this);
+  setValueRange(thumb, defaultValue, min, max);
+  const track = jsxDEV_7x81h0kn("div", {
+    "data-part": "track",
+    style: { position: "relative" },
+    children: [
+      fill,
+      thumb
+    ]
+  }, undefined, true, undefined, this);
+  const root = jsxDEV_7x81h0kn("div", {
+    id: uniqueId("slider"),
+    "data-state": disabled ? "disabled" : "active",
+    onPointerdown: (event) => {
+      if (state.disabled.peek())
+        return;
+      event.preventDefault();
+      setValue(valueFromPointer(event));
+      thumb.focus();
+      function onMove(e) {
+        setValue(valueFromPointer(e));
+      }
+      function onUp() {
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+      }
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    },
+    children: track
+  }, undefined, false, undefined, this);
+  const pct = (defaultValue - min) / (max - min) * 100;
+  updatePosition(pct);
+  applyAttrs(root, attrs);
+  return { root, thumb, track, state };
+}
+var Slider = {
+  Root: SliderRoot
+};
+
+export { Slider };

package/dist/shared/chunk-bb887de4.js

@@ -0,0 +1,200 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/dialog/dialog-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var DialogContext = createContext(undefined, "@vertz/ui-primitives::DialogContext");
+function useDialogContext(componentName) {
+  const ctx = useContext(DialogContext);
+  if (!ctx) {
+    throw new Error(`<Dialog.${componentName}> must be used inside <Dialog>. ` + "Ensure it is a direct or nested child of the Dialog root component.");
+  }
+  return ctx;
+}
+function DialogTrigger({ children }) {
+  const ctx = useDialogContext("Trigger");
+  return jsxDEV_7x81h0kn("span", {
+    style: { display: "contents" },
+    "data-dialog-trigger": "",
+    "data-state": "closed",
+    onClick: () => ctx.toggle(),
+    children
+  }, undefined, false, undefined, this);
+}
+function DialogContent({
+  children,
+  className: cls,
+  class: classProp,
+  showClose = true
+}) {
+  const ctx = useDialogContext("Content");
+  const el = jsxDEV_7x81h0kn("dialog", {
+    ref: ctx.dialogRef,
+    id: ctx.contentId,
+    role: "dialog",
+    "aria-labelledby": ctx.titleId,
+    "aria-describedby": ctx.descriptionId,
+    "data-state": "closed",
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    onCancel: (e) => {
+      e.preventDefault();
+      ctx.close();
+    },
+    onClick: (e) => {
+      if (e.target === ctx.dialogRef.current)
+        ctx.close();
+    },
+    children: [
+      showClose && jsxDEV_7x81h0kn("button", {
+        type: "button",
+        "data-slot": "dialog-close",
+        class: cn(ctx.classes?.close),
+        "aria-label": "Close",
+        onClick: () => ctx.close(),
+        children: jsxDEV_7x81h0kn("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          children: [
+            jsxDEV_7x81h0kn("path", {
+              d: "M18 6 6 18"
+            }, undefined, false, undefined, this),
+            jsxDEV_7x81h0kn("path", {
+              d: "m6 6 12 12"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+  return el;
+}
+function DialogTitle({ children, className: cls, class: classProp }) {
+  const ctx = useDialogContext("Title");
+  return jsxDEV_7x81h0kn("h2", {
+    id: ctx.titleId,
+    class: cn(ctx.classes?.title, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function DialogDescription({ children, className: cls, class: classProp }) {
+  const ctx = useDialogContext("Description");
+  return jsxDEV_7x81h0kn("p", {
+    id: ctx.descriptionId,
+    class: cn(ctx.classes?.description, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function DialogHeader({ children, className: cls, class: classProp }) {
+  const { classes } = useDialogContext("Header");
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(classes?.header, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function DialogFooter({ children, className: cls, class: classProp }) {
+  const { classes } = useDialogContext("Footer");
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(classes?.footer, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function DialogClose({ children, className: cls, class: classProp }) {
+  const ctx = useDialogContext("Close");
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "data-slot": "dialog-close",
+    class: cn(ctx.classes?.close, cls ?? classProp),
+    "aria-label": children ? undefined : "Close",
+    onClick: () => ctx.close(),
+    children: children ?? "×"
+  }, undefined, false, undefined, this);
+}
+function ComposedDialogRoot({ children, classes, onOpenChange }) {
+  const ids = linkedIds("dialog");
+  const titleId = `${ids.contentId}-title`;
+  const descriptionId = `${ids.contentId}-description`;
+  const dialogRef = ref();
+  let isOpen = false;
+  function showDialog() {
+    const el = dialogRef.current;
+    if (!el || el.open)
+      return;
+    el.setAttribute("data-state", "open");
+    el.showModal();
+  }
+  function hideDialog() {
+    const el = dialogRef.current;
+    if (!el || !el.open)
+      return;
+    el.setAttribute("data-state", "closed");
+    el.offsetHeight;
+    const onEnd = () => {
+      el.removeEventListener("animationend", onEnd);
+      if (el.open)
+        el.close();
+    };
+    el.addEventListener("animationend", onEnd);
+    setTimeout(onEnd, 200);
+  }
+  function open() {
+    isOpen = true;
+    showDialog();
+    onOpenChange?.(true);
+  }
+  function close() {
+    hideDialog();
+    isOpen = false;
+    onOpenChange?.(false);
+  }
+  function toggle() {
+    if (isOpen)
+      close();
+    else
+      open();
+  }
+  const ctx = {
+    isOpen,
+    titleId,
+    descriptionId,
+    contentId: ids.contentId,
+    dialogRef,
+    classes,
+    open,
+    close,
+    toggle
+  };
+  return jsxDEV_7x81h0kn(DialogContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-dialog-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedDialog = Object.assign(ComposedDialogRoot, {
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Header: DialogHeader,
+  Footer: DialogFooter,
+  Close: DialogClose
+});
+
+export { ComposedDialog };