@vertz/ui-primitives 0.2.38 → 0.2.42

package/dist/shared/chunk-ennxcymj.js

@@ -0,0 +1,225 @@
+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
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/menu/menu.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function MenuRoot(options = {}) {
+  const { onSelect, onOpenChange, positioning, ...attrs } = options;
+  const ids = linkedIds("menu");
+  const state = {
+    open: signal(false),
+    activeIndex: signal(-1)
+  };
+  const items = [];
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  function handleClickOutside(event) {
+    const target = event.target;
+    if (!trigger.contains(target) && !content.contains(target)) {
+      close();
+    }
+  }
+  function open(activateFirst = false) {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(content, "open");
+    onOpenChange?.(true);
+    if (positioning) {
+      const ref = positioning.referenceElement ?? trigger;
+      const result = createFloatingPosition(ref, content, positioning);
+      floatingCleanup = result.cleanup;
+      dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements: [ref, trigger, content],
+        escapeKey: false
+      });
+    } else {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    if (activateFirst && items.length > 0) {
+      state.activeIndex.value = 0;
+      updateActiveItem(0);
+      items[0]?.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);
+    onOpenChange?.(false);
+    if (positioning) {
+      floatingCleanup?.();
+      floatingCleanup = null;
+      dismissCleanup?.();
+      dismissCleanup = null;
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    trigger.focus();
+  }
+  function updateActiveItem(index) {
+    for (let i = 0;i < items.length; i++) {
+      items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+    }
+  }
+  const trigger = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    id: ids.triggerId,
+    "aria-controls": ids.contentId,
+    "aria-haspopup": "menu",
+    "aria-expanded": "false",
+    "data-state": "closed",
+    onClick: () => {
+      if (state.open.peek()) {
+        close();
+      } else {
+        open();
+      }
+    },
+    onKeydown: (event) => {
+      if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        if (!state.open.peek())
+          open(true);
+      }
+    }
+  }, undefined, false, undefined, this);
+  const content = jsxDEV_7x81h0kn("div", {
+    role: "menu",
+    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) {
+            onSelect?.(val);
+            close();
+          }
+        }
+        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 item = jsxDEV_7x81h0kn("div", {
+      role: "menuitem",
+      "data-value": value,
+      tabindex: "-1",
+      onClick: () => {
+        onSelect?.(value);
+        close();
+      },
+      children: label ?? value
+    }, undefined, false, undefined, this);
+    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);
+  }
+  function Label(text) {
+    return jsxDEV_7x81h0kn("div", {
+      role: "none",
+      children: text
+    }, undefined, false, undefined, this);
+  }
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state, Item, Group, Separator, Label };
+}
+var Menu = {
+  Root: MenuRoot
+};
+
+export { Menu };

package/dist/shared/{chunk-1jd1n0dt.js → chunk-ey38de46.js}

@@ -19,57 +19,29 @@ import {
 } from "./chunk-2db2dnp3.js";
 
 // src/tooltip/tooltip.tsx
-import { __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
 import { signal } from "@vertz/ui";
 function TooltipTrigger(show, hide) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const __mfResult0 = (() => {
-      const __el0 = __element("span");
-      __on(__el0, "mouseenter", show);
-      __on(__el0, "mouseleave", hide);
-      __on(__el0, "focus", show);
-      __on(__el0, "blur", hide);
-      __on(__el0, "keydown", (event) => {
-        if (isKey(event, Keys.Escape)) {
-          hide();
-        }
-      });
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
+  return jsxDEV_7x81h0kn("span", {
+    onMouseenter: show,
+    onMouseleave: hide,
+    onFocus: show,
+    onBlur: hide,
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape)) {
+        hide();
+      }
+    }
+  }, undefined, false, undefined, this);
 }
 function TooltipContent(contentId) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const __mfResult0 = (() => {
-      const __el0 = __element("div");
-      __el0.setAttribute("role", "tooltip");
-      {
-        const __v = contentId;
-        if (__v != null && __v !== false)
-          __el0.setAttribute("id", __v === true ? "" : __v);
-      }
-      __el0.setAttribute("aria-hidden", "true");
-      __el0.setAttribute("data-state", "closed");
-      {
-        const __v = { display: "none" };
-        if (__v != null && __v !== false)
-          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
-      }
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
+  return jsxDEV_7x81h0kn("div", {
+    role: "tooltip",
+    id: contentId,
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" }
+  }, undefined, false, undefined, this);
 }
 function TooltipRoot(options = {}) {
   const { delay = 300, onOpenChange, positioning, ...attrs } = options;

package/dist/shared/chunk-f0v1gs5e.js

@@ -0,0 +1,52 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/skeleton/skeleton-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ComposedSkeletonRoot(props = {}) {
+  const { classes, className, class: classProp, width, height } = props;
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(classes?.root, className ?? classProp),
+    "aria-hidden": "true",
+    style: {
+      width: width || undefined,
+      height: height || undefined
+    }
+  }, undefined, false, undefined, this);
+}
+function SkeletonText(props = {}) {
+  const lineCount = props.lines ?? 3;
+  const lastWidth = props.lastLineWidth ?? "75%";
+  const lineHeight = props.height;
+  const lines = [];
+  for (let i = 0;i < lineCount; i++) {
+    lines.push(jsxDEV_7x81h0kn("div", {
+      class: cn(props.classes?.line),
+      style: {
+        width: i === lineCount - 1 ? lastWidth : undefined,
+        height: lineHeight || undefined
+      }
+    }, undefined, false, undefined, this));
+  }
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(props.classes?.root, props.className ?? props.class),
+    "aria-hidden": "true",
+    style: { gap: props.gap || undefined },
+    children: lines
+  }, undefined, false, undefined, this);
+}
+function SkeletonCircle(props = {}) {
+  const size = props.size ?? "2.5rem";
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(props.classes?.root, props.className ?? props.class),
+    "aria-hidden": "true",
+    style: { width: size, height: size }
+  }, undefined, false, undefined, this);
+}
+var ComposedSkeleton = Object.assign(ComposedSkeletonRoot, {
+  Text: SkeletonText,
+  Circle: SkeletonCircle
+});
+
+export { ComposedSkeleton };

package/dist/shared/chunk-f86rsf84.js

@@ -0,0 +1,231 @@
+import {
+  ComposedCalendar
+} from "./chunk-caba5bhd.js";
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/date-picker/date-picker-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn, Fragment as Fragment_8vg9x3sq } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var DatePickerContext = createContext(undefined, "@vertz/ui-primitives::DatePickerContext");
+function DatePickerTrigger({ children, className: cls, class: classProp }) {
+  const ctx = useContext(DatePickerContext);
+  if (!ctx) {
+    throw new Error("<DatePicker.Trigger> must be used inside <DatePicker>. " + "Ensure it is a direct or nested child of the DatePicker root component.");
+  }
+  const isOpen = ctx.isOpen();
+  const hasVal = ctx.hasValue();
+  const text = ctx.displayText();
+  return jsxDEV_7x81h0kn("button", {
+    ref: ctx.triggerRef,
+    type: "button",
+    "data-datepicker-trigger": "",
+    "aria-haspopup": "dialog",
+    "aria-controls": ctx.contentId,
+    "aria-expanded": isOpen ? "true" : "false",
+    "data-state": isOpen ? "open" : "closed",
+    "data-placeholder": hasVal ? undefined : "true",
+    class: cn(ctx.classes?.trigger, cls ?? classProp),
+    onClick: () => ctx.toggle(),
+    children: children ?? text
+  }, undefined, false, undefined, this);
+}
+function DatePickerContent({ children, className: cls, class: classProp }) {
+  const ctx = useContext(DatePickerContext);
+  if (!ctx) {
+    throw new Error("<DatePicker.Content> must be used inside <DatePicker>. " + "Ensure it is a direct or nested child of the DatePicker root component.");
+  }
+  const isOpen = ctx.isOpen();
+  return jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    role: "dialog",
+    id: ctx.contentId,
+    "data-datepicker-content": "",
+    "aria-hidden": isOpen ? "false" : "true",
+    "data-state": isOpen ? "open" : "closed",
+    style: {
+      display: isOpen ? "" : "none",
+      zIndex: "50"
+    },
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function _toRealDate(val) {
+  if (val instanceof Date)
+    return val;
+  if (val && typeof val === "object" && typeof val.getTime === "function") {
+    return new Date(val.getTime());
+  }
+  return null;
+}
+function _defaultFormatDate(date) {
+  return date.toLocaleDateString();
+}
+function _getDisplayText(value, placeholder, formatDate) {
+  if (value === null)
+    return placeholder;
+  if (value instanceof Date)
+    return formatDate(value);
+  if ("from" in value)
+    return `${formatDate(value.from)} – ${formatDate(value.to)}`;
+  return placeholder;
+}
+function _buildCalendar(props, onCalendarValueChange) {
+  const initValue = props.defaultValue ?? null;
+  const calendarMode = (props.mode ?? "single") === "range" ? "range" : "single";
+  const calendarDefaultValue = initValue instanceof Date ? initValue : initValue && ("from" in initValue) ? initValue : undefined;
+  const defaultMonth = props.defaultMonth ?? (initValue instanceof Date ? initValue : initValue && ("from" in initValue) ? initValue.from : new Date);
+  return ComposedCalendar({
+    classes: props.classes?.calendar,
+    mode: calendarMode,
+    defaultValue: calendarDefaultValue,
+    defaultMonth,
+    minDate: props.minDate,
+    maxDate: props.maxDate,
+    disabled: props.disabled,
+    captionLayout: props.captionLayout,
+    onValueChange: onCalendarValueChange
+  });
+}
+function ComposedDatePickerRoot({
+  children,
+  classes,
+  mode = "single",
+  defaultValue = undefined,
+  defaultMonth: defaultMonthProp,
+  minDate,
+  maxDate,
+  disabled,
+  formatDate = _defaultFormatDate,
+  placeholder = "Pick a date",
+  onValueChange,
+  onOpenChange,
+  captionLayout
+}) {
+  const ids = linkedIds("datepicker");
+  const triggerRef = ref();
+  const contentRef = ref();
+  let isOpen = false;
+  let hasValue = defaultValue != null;
+  let displayText = _getDisplayText(defaultValue ?? null, placeholder, formatDate);
+  const state = {
+    value: defaultValue ?? null,
+    dismissCleanup: null,
+    floatingCleanup: null
+  };
+  function open() {
+    isOpen = true;
+    const triggerEl = triggerRef.current;
+    const contentEl = contentRef.current;
+    if (triggerEl && contentEl) {
+      contentEl.style.position = "fixed";
+      const result = createFloatingPosition(triggerEl, contentEl, {
+        placement: "bottom-start",
+        offset: 4
+      });
+      state.floatingCleanup = result.cleanup;
+      state.dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements: [triggerEl, contentEl],
+        escapeKey: true
+      });
+    }
+    onOpenChange?.(true);
+  }
+  function close() {
+    isOpen = false;
+    state.floatingCleanup?.();
+    state.floatingCleanup = null;
+    state.dismissCleanup?.();
+    state.dismissCleanup = null;
+    onOpenChange?.(false);
+  }
+  function toggle() {
+    if (isOpen)
+      close();
+    else
+      open();
+  }
+  function handleCalendarValueChange(calValue) {
+    if (calValue === null)
+      return;
+    if (mode === "single") {
+      const realDate = _toRealDate(calValue);
+      if (realDate) {
+        state.value = realDate;
+        hasValue = true;
+        displayText = _getDisplayText(realDate, placeholder, formatDate);
+        onValueChange?.(realDate);
+        close();
+      }
+    } else if (mode === "range" && calValue && "from" in calValue) {
+      const raw = calValue;
+      const from = _toRealDate(raw.from);
+      const to = _toRealDate(raw.to);
+      if (from && to) {
+        const range = { from, to };
+        state.value = range;
+        hasValue = true;
+        displayText = _getDisplayText(range, placeholder, formatDate);
+        onValueChange?.(range);
+        if (from.getTime() !== to.getTime()) {
+          close();
+        }
+      }
+    }
+  }
+  const calendarEl = _buildCalendar({
+    mode,
+    defaultValue,
+    defaultMonth: defaultMonthProp,
+    minDate,
+    maxDate,
+    disabled,
+    classes,
+    captionLayout
+  }, handleCalendarValueChange);
+  const ctx = {
+    isOpen: () => isOpen,
+    hasValue: () => hasValue,
+    displayText: () => displayText,
+    contentId: ids.contentId,
+    triggerRef,
+    contentRef,
+    classes,
+    open,
+    close,
+    toggle
+  };
+  return jsxDEV_7x81h0kn(DatePickerContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { position: "relative", display: "inline-block" },
+      "data-datepicker-root": "",
+      children: children ?? jsxDEV_7x81h0kn(Fragment_8vg9x3sq, {
+        children: [
+          jsxDEV_7x81h0kn(DatePickerTrigger, {}, undefined, false, undefined, this),
+          jsxDEV_7x81h0kn(DatePickerContent, {
+            children: calendarEl
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedDatePicker = Object.assign(ComposedDatePickerRoot, {
+  Trigger: DatePickerTrigger,
+  Content: DatePickerContent
+});
+
+export { ComposedDatePicker };

package/dist/shared/chunk-fdse46x5.js

@@ -0,0 +1,21 @@
+// src/composed/with-styles.ts
+function withStyles(component, classes) {
+  if (!component) {
+    throw new Error("withStyles() received an undefined component. " + "This usually means a composed primitive failed to load in the client bundle. " + "Check that @vertz/ui-primitives is installed and its exports resolve correctly.");
+  }
+  const styled = (props) => {
+    const merged = Object.create(null);
+    Object.defineProperties(merged, Object.getOwnPropertyDescriptors(props));
+    merged.classes = classes;
+    return component(merged);
+  };
+  const subComponents = {};
+  for (const key of Object.getOwnPropertyNames(component)) {
+    if (key !== "length" && key !== "name" && key !== "prototype" && key !== "__classKeys" && key !== "__elementType") {
+      subComponents[key] = component[key];
+    }
+  }
+  return Object.assign(styled, subComponents);
+}
+
+export { withStyles };