@vertz/ui-primitives 0.2.38 → 0.2.42

package/dist/shared/chunk-k9k8tbr5.js

@@ -0,0 +1,119 @@
+import {
+  focusFirst,
+  saveFocus,
+  trapFocus
+} from "./chunk-e2v1c9ex.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+
+// src/sheet/sheet.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function SheetRoot(options = {}) {
+  const { side = "right", defaultOpen = false, onOpenChange } = options;
+  const ids = linkedIds("sheet");
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let removeTrap = null;
+  function show() {
+    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(() => focusFirst(content));
+    onOpenChange?.(true);
+  }
+  function hide() {
+    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 SWIPE_THRESHOLD = 50;
+  let startX = 0;
+  let startY = 0;
+  function handlePointerDown(e) {
+    startX = e.clientX;
+    startY = e.clientY;
+  }
+  function handlePointerUp(e) {
+    if (!state.open.peek())
+      return;
+    const deltaX = e.clientX - startX;
+    const deltaY = e.clientY - startY;
+    const shouldDismiss = side === "right" && deltaX >= SWIPE_THRESHOLD || side === "left" && deltaX <= -SWIPE_THRESHOLD || side === "bottom" && deltaY >= SWIPE_THRESHOLD || side === "top" && deltaY <= -SWIPE_THRESHOLD;
+    if (shouldDismiss) {
+      hide();
+    }
+  }
+  const trigger = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    id: ids.triggerId,
+    "aria-controls": ids.contentId,
+    "aria-expanded": defaultOpen ? "true" : "false",
+    "data-state": defaultOpen ? "open" : "closed",
+    onClick: () => {
+      state.open.peek() ? hide() : show();
+    }
+  }, undefined, false, undefined, this);
+  const overlay = jsxDEV_7x81h0kn("div", {
+    "data-sheet-overlay": "",
+    "aria-hidden": defaultOpen ? "false" : "true",
+    "data-state": defaultOpen ? "open" : "closed",
+    style: { display: defaultOpen ? "" : "none" },
+    onClick: () => hide()
+  }, undefined, false, undefined, this);
+  const content = jsxDEV_7x81h0kn("div", {
+    role: "dialog",
+    "aria-modal": "true",
+    id: ids.contentId,
+    "data-side": side,
+    "aria-hidden": defaultOpen ? "false" : "true",
+    "data-state": defaultOpen ? "open" : "closed",
+    style: { display: defaultOpen ? "" : "none" },
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        hide();
+      }
+    },
+    onPointerdown: handlePointerDown,
+    onPointerup: handlePointerUp
+  }, undefined, false, undefined, this);
+  const close = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "aria-label": "Close",
+    onClick: () => hide()
+  }, undefined, false, undefined, this);
+  return { trigger, overlay, content, close, state, show, hide };
+}
+var Sheet = {
+  Root: SheetRoot
+};
+
+export { Sheet };

package/dist/shared/chunk-meaj7br1.js

@@ -0,0 +1,232 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated,
+  setSelected
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/select/select.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function SelectRoot(options = {}) {
+  const { defaultValue = "", placeholder = "", onValueChange, positioning, ...attrs } = options;
+  const ids = linkedIds("select");
+  const state = {
+    open: signal(false),
+    value: signal(defaultValue),
+    activeIndex: signal(-1)
+  };
+  const items = [];
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  function updateActiveItem(index) {
+    for (let i = 0;i < items.length; i++) {
+      items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+    }
+  }
+  function selectItem(value) {
+    state.value.value = value;
+    for (const item of items) {
+      const isActive = item.getAttribute("data-value") === value;
+      setSelected(item, isActive);
+      setDataState(item, isActive ? "active" : "inactive");
+      if (isActive) {
+        triggerText.textContent = item.textContent ?? value;
+      }
+    }
+    onValueChange?.(value);
+    close();
+  }
+  function open() {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(content, "open");
+    if (positioning) {
+      const result = createFloatingPosition(trigger, content, positioning);
+      floatingCleanup = result.cleanup;
+      dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements: [trigger, content],
+        escapeKey: false
+      });
+    } else {
+      const rect = trigger.getBoundingClientRect();
+      const side = window.innerHeight - rect.bottom >= rect.top ? "bottom" : "top";
+      content.setAttribute("data-side", side);
+    }
+    const selectedIdx = items.findIndex((item) => item.getAttribute("data-value") === state.value.peek());
+    if (selectedIdx >= 0) {
+      state.activeIndex.value = selectedIdx;
+      updateActiveItem(selectedIdx);
+      items[selectedIdx]?.focus();
+    } else {
+      state.activeIndex.value = -1;
+      updateActiveItem(-1);
+      content.focus();
+    }
+  }
+  function close() {
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(content, true);
+    floatingCleanup?.();
+    floatingCleanup = null;
+    dismissCleanup?.();
+    dismissCleanup = null;
+    trigger.focus();
+  }
+  const triggerText = jsxDEV_7x81h0kn("span", {
+    "data-part": "value",
+    children: defaultValue || placeholder
+  }, undefined, false, undefined, this);
+  const trigger = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    role: "combobox",
+    id: ids.triggerId,
+    "aria-controls": ids.contentId,
+    "aria-haspopup": "listbox",
+    "aria-expanded": "false",
+    "data-state": "closed",
+    onClick: () => {
+      if (state.open.peek()) {
+        close();
+      } else {
+        open();
+      }
+    },
+    onKeydown: (event) => {
+      if (isKey(event, Keys.ArrowDown, Keys.ArrowUp, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        if (!state.open.peek()) {
+          open();
+        }
+      }
+    },
+    children: triggerText
+  }, undefined, false, undefined, this);
+  const content = jsxDEV_7x81h0kn("div", {
+    role: "listbox",
+    tabindex: "-1",
+    id: ids.contentId,
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" },
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isKey(event, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        const active = items[state.activeIndex.peek()];
+        if (active) {
+          const val = active.getAttribute("data-value");
+          if (val !== null)
+            selectItem(val);
+        }
+        return;
+      }
+      if (state.activeIndex.peek() === -1) {
+        if (isKey(event, Keys.ArrowDown)) {
+          event.preventDefault();
+          state.activeIndex.value = 0;
+          updateActiveItem(0);
+          items[0]?.focus();
+          return;
+        }
+        if (isKey(event, Keys.ArrowUp)) {
+          event.preventDefault();
+          const last = items.length - 1;
+          state.activeIndex.value = last;
+          updateActiveItem(last);
+          items[last]?.focus();
+          return;
+        }
+      }
+      const result = handleListNavigation(event, items, { orientation: "vertical" });
+      if (result) {
+        const idx = items.indexOf(result);
+        if (idx >= 0) {
+          state.activeIndex.value = idx;
+          updateActiveItem(idx);
+        }
+        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) {
+          const idx = items.indexOf(match);
+          state.activeIndex.value = idx;
+          updateActiveItem(idx);
+          match.focus();
+        }
+      }
+    }
+  }, undefined, false, undefined, this);
+  function createItem(value, label) {
+    const isSelectedItem = value === defaultValue;
+    const item = jsxDEV_7x81h0kn("div", {
+      role: "option",
+      "data-value": value,
+      tabindex: "-1",
+      "aria-selected": isSelectedItem ? "true" : "false",
+      "data-state": isSelectedItem ? "active" : "inactive",
+      onClick: () => selectItem(value),
+      children: label ?? value
+    }, undefined, false, undefined, this);
+    if (isSelectedItem) {
+      triggerText.textContent = item.textContent ?? value;
+    }
+    items.push(item);
+    return item;
+  }
+  function Item(value, label) {
+    return createItem(value, label);
+  }
+  function Group(label) {
+    const el = jsxDEV_7x81h0kn("div", {
+      role: "group",
+      "aria-label": label
+    }, undefined, false, undefined, this);
+    return {
+      el,
+      Item: (value, itemLabel) => createItem(value, itemLabel)
+    };
+  }
+  function Separator() {
+    return jsxDEV_7x81h0kn("hr", {
+      role: "separator"
+    }, undefined, false, undefined, this);
+  }
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state, Item, Group, Separator };
+}
+var Select = {
+  Root: SelectRoot
+};
+
+export { Select };

package/dist/shared/chunk-mgj0n08k.js

@@ -0,0 +1,34 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/form-group/form-group-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var FormGroupContext = createContext(undefined, "@vertz/ui-primitives::FormGroupContext");
+function FormError({ children, className, class: classProp }) {
+  const ctx = useContext(FormGroupContext);
+  return jsxDEV_7x81h0kn("span", {
+    class: cn(ctx?.classes?.error, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedFormGroupRoot({
+  children,
+  classes,
+  className,
+  class: classProp
+}) {
+  return jsxDEV_7x81h0kn(FormGroupContext.Provider, {
+    value: { classes },
+    children: jsxDEV_7x81h0kn("div", {
+      class: cn(classes?.base, className ?? classProp),
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedFormGroup = Object.assign(ComposedFormGroupRoot, {
+  FormError
+});
+
+export { ComposedFormGroup };

package/dist/shared/chunk-mjz4rp6c.js

@@ -0,0 +1,46 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/switch/switch.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function SwitchRoot(options = {}) {
+  const { defaultChecked = false, disabled = false, onCheckedChange, ...attrs } = options;
+  let checked = defaultChecked;
+  function toggle() {
+    if (disabled)
+      return;
+    checked = !checked;
+    onCheckedChange?.(checked);
+  }
+  const el = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    role: "switch",
+    id: uniqueId("switch"),
+    "aria-checked": checked ? "true" : "false",
+    "data-state": checked ? "checked" : "unchecked",
+    disabled,
+    "aria-disabled": disabled ? "true" : undefined,
+    onClick: toggle,
+    onKeydown: (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
+        toggle();
+      }
+    }
+  }, undefined, false, undefined, this);
+  applyAttrs(el, attrs);
+  return el;
+}
+var Switch = {
+  Root: SwitchRoot
+};
+
+export { Switch };

package/dist/shared/chunk-n4rr5gme.js

@@ -0,0 +1,239 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/resizable-panel/resizable-panel-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var _groupCounter = { value: 0 };
+var ResizablePanelContext = createContext(undefined, "@vertz/ui-primitives::ResizablePanelContext");
+function ResizablePanelPanel({
+  children,
+  className: cls,
+  class: classProp,
+  defaultSize,
+  minSize,
+  maxSize
+}) {
+  const ctx = useContext(ResizablePanelContext);
+  if (!ctx) {
+    throw new Error("<ResizablePanel.Panel> must be used inside <ResizablePanel>. " + "Ensure it is a direct or nested child of the ResizablePanel root component.");
+  }
+  const index = ctx.registerPanel({ defaultSize, minSize, maxSize });
+  return jsxDEV_7x81h0kn("div", {
+    "data-part": "panel",
+    "data-group": ctx.groupId,
+    style: { flex: `${ctx.getSizeForPanel(index)} 1 0`, minWidth: 0, minHeight: 0 },
+    class: cn(ctx.classes?.panel, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ResizablePanelHandle({ className: cls, class: classProp }) {
+  const ctx = useContext(ResizablePanelContext);
+  if (!ctx) {
+    throw new Error("<ResizablePanel.Handle> must be used inside <ResizablePanel>. " + "Ensure it is a direct or nested child of the ResizablePanel root component.");
+  }
+  const handleIndex = ctx.registerHandle();
+  return jsxDEV_7x81h0kn("div", {
+    role: "separator",
+    tabindex: "0",
+    style: { flexShrink: 0 },
+    "data-group": ctx.groupId,
+    "data-handle-index": String(handleIndex),
+    "data-orientation": ctx.orientation,
+    "data-state": "idle",
+    "aria-valuenow": String(ctx.getAriaForHandle(handleIndex).valuenow),
+    "aria-valuemin": String(ctx.getAriaForHandle(handleIndex).valuemin),
+    "aria-valuemax": String(ctx.getAriaForHandle(handleIndex).valuemax),
+    class: cn(ctx.classes?.handle, cls ?? classProp)
+  }, undefined, false, undefined, this);
+}
+function ComposedResizablePanelRoot({
+  children,
+  classes,
+  orientation = "horizontal",
+  onResize
+}) {
+  const groupId = String(_groupCounter.value++);
+  const _reg = {
+    nextPanelIdx: 0,
+    nextHandleIdx: 0,
+    panelConfigs: []
+  };
+  let sizes = [];
+  function recomputeSizes() {
+    const configs = _reg.panelConfigs;
+    const panelCount = configs.length;
+    if (panelCount === 0)
+      return;
+    const newSizes = new Array(panelCount).fill(0);
+    const explicitIndices = new Set;
+    for (let i = 0;i < panelCount; i++) {
+      const config = configs[i];
+      if (config && config.defaultSize != null) {
+        newSizes[i] = config.defaultSize;
+        explicitIndices.add(i);
+      }
+    }
+    if (explicitIndices.size === 0) {
+      const equal = 100 / panelCount;
+      for (let i = 0;i < panelCount; i++)
+        newSizes[i] = equal;
+    } else {
+      const used = [...explicitIndices].reduce((sum, i) => sum + (newSizes[i] ?? 0), 0);
+      const unsetCount = panelCount - explicitIndices.size;
+      const each = unsetCount > 0 ? (100 - used) / unsetCount : 0;
+      for (let i = 0;i < newSizes.length; i++) {
+        if (!explicitIndices.has(i))
+          newSizes[i] = each;
+      }
+    }
+    sizes = newSizes;
+  }
+  function registerPanel(opts) {
+    const idx = _reg.nextPanelIdx++;
+    _reg.panelConfigs.push({
+      defaultSize: opts.defaultSize,
+      minSize: opts.minSize ?? 0,
+      maxSize: opts.maxSize ?? 100
+    });
+    recomputeSizes();
+    return idx;
+  }
+  function registerHandle() {
+    return _reg.nextHandleIdx++;
+  }
+  function getSizeForPanel(index) {
+    return sizes[index] ?? 0;
+  }
+  function getAriaForHandle(handleIndex) {
+    const config = _reg.panelConfigs[handleIndex];
+    return {
+      valuenow: Math.round(sizes[handleIndex] ?? 0),
+      valuemin: Math.round(config?.minSize ?? 0),
+      valuemax: Math.round(config?.maxSize ?? 100)
+    };
+  }
+  function updateSizes(newSizes) {
+    sizes = [...newSizes];
+    onResize?.(newSizes);
+  }
+  function handleKeydown(e) {
+    const ke = e;
+    const target = ke.target;
+    if (target.getAttribute("role") !== "separator")
+      return;
+    if (target.dataset.group !== groupId)
+      return;
+    const handleIndex = Number(target.dataset.handleIndex ?? -1);
+    if (handleIndex < 0)
+      return;
+    const leftIdx = handleIndex;
+    const rightIdx = handleIndex + 1;
+    const leftConfig = _reg.panelConfigs[leftIdx];
+    const rightConfig = _reg.panelConfigs[rightIdx];
+    if (!leftConfig || !rightConfig)
+      return;
+    const leftStart = sizes[leftIdx] ?? 0;
+    const rightStart = sizes[rightIdx] ?? 0;
+    const STEP = 5;
+    const growKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+    const shrinkKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    let newLeft = leftStart;
+    let newRight = rightStart;
+    if (ke.key === growKey) {
+      ke.preventDefault();
+      const delta = Math.min(STEP, rightStart - rightConfig.minSize, leftConfig.maxSize - leftStart);
+      newLeft += delta;
+      newRight -= delta;
+    } else if (ke.key === shrinkKey) {
+      ke.preventDefault();
+      const delta = Math.min(STEP, leftStart - leftConfig.minSize, rightConfig.maxSize - rightStart);
+      newLeft -= delta;
+      newRight += delta;
+    } else if (ke.key === "Home") {
+      ke.preventDefault();
+      const delta = leftStart - leftConfig.minSize;
+      newLeft -= delta;
+      newRight += delta;
+    } else if (ke.key === "End") {
+      ke.preventDefault();
+      const delta = rightStart - rightConfig.minSize;
+      newLeft += delta;
+      newRight -= delta;
+    } else {
+      return;
+    }
+    const newSizes = sizes.slice();
+    newSizes[leftIdx] = newLeft;
+    newSizes[rightIdx] = newRight;
+    updateSizes(newSizes);
+  }
+  function handlePointerdown(e) {
+    const pe = e;
+    const target = pe.target;
+    if (target.getAttribute("role") !== "separator")
+      return;
+    if (target.dataset.group !== groupId)
+      return;
+    pe.preventDefault();
+    target.setPointerCapture(pe.pointerId);
+    target.setAttribute("data-state", "dragging");
+    const handleIndex = Number(target.dataset.handleIndex ?? -1);
+    const rootEl = pe.currentTarget;
+    const startPos = orientation === "horizontal" ? pe.clientX : pe.clientY;
+    const rootSize = orientation === "horizontal" ? rootEl.offsetWidth : rootEl.offsetHeight;
+    const startSizes = sizes.slice();
+    function onMove(ev) {
+      const currentPos = orientation === "horizontal" ? ev.clientX : ev.clientY;
+      const delta = (currentPos - startPos) / rootSize * 100;
+      const moveSizes = startSizes.slice();
+      const leftIdx = handleIndex;
+      const rightIdx = handleIndex + 1;
+      const leftConfig = _reg.panelConfigs[leftIdx];
+      const rightConfig = _reg.panelConfigs[rightIdx];
+      if (!leftConfig || !rightConfig)
+        return;
+      const rawLeft = Math.max(leftConfig.minSize, Math.min(leftConfig.maxSize, (startSizes[leftIdx] ?? 0) + delta));
+      const rawRight = Math.max(rightConfig.minSize, Math.min(rightConfig.maxSize, (startSizes[rightIdx] ?? 0) - delta));
+      moveSizes[leftIdx] = rawLeft;
+      moveSizes[rightIdx] = rawRight;
+      updateSizes(moveSizes);
+    }
+    function onUp(ev) {
+      target.releasePointerCapture(ev.pointerId);
+      target.setAttribute("data-state", "idle");
+      target.removeEventListener("pointermove", onMove);
+      target.removeEventListener("pointerup", onUp);
+    }
+    target.addEventListener("pointermove", onMove);
+    target.addEventListener("pointerup", onUp);
+  }
+  const ctx = {
+    groupId,
+    orientation,
+    classes,
+    registerPanel,
+    registerHandle,
+    getSizeForPanel,
+    getAriaForHandle
+  };
+  return jsxDEV_7x81h0kn(ResizablePanelContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("div", {
+      style: { display: "flex", flexDirection: orientation === "horizontal" ? "row" : "column" },
+      "data-orientation": orientation,
+      "data-panel-count": sizes.length,
+      class: classes?.root,
+      onKeydown: handleKeydown,
+      onPointerdown: handlePointerdown,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedResizablePanel = Object.assign(ComposedResizablePanelRoot, {
+  Panel: ResizablePanelPanel,
+  Handle: ResizablePanelHandle
+});
+
+export { ComposedResizablePanel };