@vertz/ui-primitives 0.2.23 → 0.2.25

package/dist/shared/chunk-5964gmv0.js

@@ -0,0 +1,416 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/list/list-composed.tsx
+import { computed } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+import { createContext, ListAnimationContext, onMount, ref, useContext } from "@vertz/ui";
+var ListContext = createContext(undefined, "@vertz/ui-primitives::ListContext");
+function useListContext(subComponent) {
+  const ctx = useContext(ListContext);
+  if (!ctx) {
+    throw new Error(`List.${subComponent} must be used inside a <List> component`);
+  }
+  return ctx;
+}
+function ListItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useListContext("Item");
+    const __mfResult0 = (() => {
+      const __el0 = __element("li");
+      __attr(__el0, "class", () => cn(ctx.classes?.item, __props.className ?? __props.class));
+      {
+        const __v = ctx.sortable ? "" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-sortable-item", __v === true ? "" : __v);
+      }
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ListDragHandle(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useListContext("DragHandle");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-list-drag-handle", "");
+      {
+        const __v = ctx.sortable ? "" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-sortable", __v === true ? "" : __v);
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.dragHandle, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var DEFAULT_DURATION = 200;
+var DEFAULT_EASING = "ease-out";
+function resolveAnimateConfig(animate) {
+  if (typeof animate === "object") {
+    return {
+      duration: animate.duration ?? DEFAULT_DURATION,
+      easing: animate.easing ?? DEFAULT_EASING
+    };
+  }
+  return { duration: DEFAULT_DURATION, easing: DEFAULT_EASING };
+}
+function createAnimationHooks(animate) {
+  const { duration, easing } = resolveAnimateConfig(animate);
+  const itemRects = new Map;
+  const itemNodes = new Map;
+  return {
+    onBeforeReconcile() {
+      itemRects.clear();
+      for (const [key, el] of itemNodes) {
+        itemRects.set(key, el.getBoundingClientRect());
+      }
+    },
+    onAfterReconcile() {
+      if (globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches)
+        return;
+      for (const [key, el] of itemNodes) {
+        const firstRect = itemRects.get(key);
+        if (!firstRect)
+          continue;
+        const lastRect = el.getBoundingClientRect();
+        const deltaX = firstRect.left - lastRect.left;
+        const deltaY = firstRect.top - lastRect.top;
+        if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5)
+          continue;
+        el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+        el.style.transition = "none";
+        requestAnimationFrame(() => {
+          el.style.transition = `transform ${duration}ms ${easing}`;
+          el.style.transform = "";
+          el.addEventListener("transitionend", () => {
+            el.style.transition = "";
+            el.style.transform = "";
+          }, { once: true });
+        });
+      }
+    },
+    onItemEnter(node, key) {
+      if (node instanceof Element) {
+        itemNodes.set(key, node);
+        node.setAttribute("data-presence", "enter");
+        if ("offsetHeight" in node) {
+          node.offsetHeight;
+        }
+        if (typeof node.getAnimations === "function") {
+          const anims = node.getAnimations();
+          if (anims.length > 0) {
+            Promise.all(anims.map((a) => a.finished.catch(() => {}))).then(() => {
+              if (itemNodes.get(key) === node) {
+                node.removeAttribute("data-presence");
+              }
+            });
+            return;
+          }
+        }
+        node.removeAttribute("data-presence");
+      }
+    },
+    onItemExit(node, key, done) {
+      itemNodes.delete(key);
+      itemRects.delete(key);
+      if (node instanceof Element) {
+        const el = node;
+        const rect = node.getBoundingClientRect();
+        const reducedMotion = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
+        const remainingRects = new Map;
+        for (const [k, n] of itemNodes) {
+          remainingRects.set(k, n.getBoundingClientRect());
+        }
+        el.style.overflow = "hidden";
+        el.style.pointerEvents = "none";
+        el.style.borderBottomWidth = "0";
+        node.setAttribute("data-presence", "exit");
+        if (!reducedMotion) {
+          el.style.height = `${rect.height}px`;
+          el.style.transition = "none";
+          el.style.opacity = "1";
+          el.offsetHeight;
+          el.style.transition = `height ${duration}ms ${easing}, opacity ${duration}ms ${easing}, ` + `padding ${duration}ms ${easing}`;
+          el.style.height = "0";
+          el.style.paddingTop = "0";
+          el.style.paddingBottom = "0";
+          el.style.opacity = "0";
+          el.addEventListener("transitionend", () => done(), { once: true });
+          setTimeout(() => done(), duration + 50);
+        } else {
+          done();
+        }
+        return;
+      }
+      done();
+    }
+  };
+}
+function findSortableItem(target, root) {
+  if (!(target instanceof HTMLElement))
+    return null;
+  const item = target.closest("[data-sortable-item]");
+  if (item instanceof HTMLElement && root.contains(item))
+    return item;
+  return null;
+}
+function createDropIndicator() {
+  let indicator = null;
+  function getOrCreate() {
+    if (!indicator) {
+      indicator = document.createElement("div");
+      indicator.setAttribute("data-drop-indicator", "");
+      indicator.style.height = "2px";
+      indicator.style.background = "var(--color-primary, #3b82f6)";
+      indicator.style.borderRadius = "1px";
+      indicator.style.position = "absolute";
+      indicator.style.left = "0";
+      indicator.style.right = "0";
+      indicator.style.pointerEvents = "none";
+      indicator.style.zIndex = "100";
+    }
+    return indicator;
+  }
+  return {
+    show(ulEl, beforeItem) {
+      const el = getOrCreate();
+      if (!el.parentNode)
+        ulEl.appendChild(el);
+      if (beforeItem) {
+        const ulRect = ulEl.getBoundingClientRect();
+        const itemRect = beforeItem.getBoundingClientRect();
+        el.style.top = `${itemRect.top - ulRect.top - 1}px`;
+      } else {
+        const items = ulEl.querySelectorAll("[data-sortable-item]");
+        if (items.length > 0) {
+          const last = items[items.length - 1];
+          const ulRect = ulEl.getBoundingClientRect();
+          const lastRect = last.getBoundingClientRect();
+          el.style.top = `${lastRect.bottom - ulRect.top - 1}px`;
+        }
+      }
+    },
+    hide() {
+      indicator?.parentNode?.removeChild(indicator);
+    }
+  };
+}
+function applyShiftTransforms(allItems, fromIndex, targetInsertionIndex, draggedHeight, animate) {
+  const { duration, easing } = resolveAnimateConfig(animate);
+  const reducedMotion = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
+  for (let i = 0;i < allItems.length; i++) {
+    if (i === fromIndex)
+      continue;
+    let shift = 0;
+    if (targetInsertionIndex > fromIndex) {
+      if (i > fromIndex && i < targetInsertionIndex) {
+        shift = -draggedHeight;
+      }
+    } else if (targetInsertionIndex < fromIndex) {
+      if (i >= targetInsertionIndex && i < fromIndex) {
+        shift = draggedHeight;
+      }
+    }
+    const item = allItems[i];
+    const transition = reducedMotion ? "none" : `transform ${duration}ms ${easing}`;
+    if (shift !== 0) {
+      item.style.transition = transition;
+      item.style.transform = `translateY(${shift}px)`;
+    } else {
+      item.style.transition = transition;
+      item.style.transform = "";
+    }
+  }
+}
+function setupDragSort(ulEl, getSortable, getOnReorder, getAnimate) {
+  const dropIndicator = createDropIndicator();
+  ulEl.addEventListener("pointerdown", (e) => {
+    if (!getSortable())
+      return;
+    const target = e.target;
+    if (!target)
+      return;
+    const hasHandles = ulEl.querySelector("[data-list-drag-handle][data-sortable]") !== null;
+    if (hasHandles) {
+      const handle = target.closest("[data-list-drag-handle][data-sortable]");
+      if (!handle || !ulEl.contains(handle))
+        return;
+    } else {
+      const item = target.closest("[data-sortable-item]");
+      if (!item || !ulEl.contains(item))
+        return;
+    }
+    const draggedItem = findSortableItem(target, ulEl);
+    if (!draggedItem)
+      return;
+    e.preventDefault();
+    const animate = getAnimate();
+    const useAnimatedShift = !!animate;
+    const startY = e.clientY;
+    draggedItem.setAttribute("data-dragging", "");
+    const allItems = [...ulEl.querySelectorAll("[data-sortable-item]")];
+    const fromIndex = allItems.indexOf(draggedItem);
+    if (fromIndex === -1)
+      return;
+    const snapshotRects = allItems.map((item) => item.getBoundingClientRect());
+    const draggedRect = snapshotRects[fromIndex];
+    const draggedHeight = draggedRect.height;
+    const ulRect = ulEl.getBoundingClientRect();
+    let placeholder = null;
+    if (useAnimatedShift) {
+      for (const item of allItems) {
+        item.style.willChange = "transform";
+      }
+      const draggedWidth = draggedRect.width;
+      const initialTop = draggedRect.top - ulRect.top;
+      const initialLeft = draggedRect.left - ulRect.left;
+      placeholder = document.createElement("li");
+      placeholder.setAttribute("data-drag-placeholder", "");
+      placeholder.style.height = `${draggedHeight}px`;
+      placeholder.style.visibility = "hidden";
+      placeholder.style.pointerEvents = "none";
+      draggedItem.parentNode?.insertBefore(placeholder, draggedItem);
+      draggedItem.style.position = "absolute";
+      draggedItem.style.width = `${draggedWidth}px`;
+      draggedItem.style.top = `${initialTop}px`;
+      draggedItem.style.left = `${initialLeft}px`;
+      draggedItem.style.zIndex = "50";
+    }
+    function calcInsertionFromSnapshot(clientY) {
+      if (snapshotRects.length === 0)
+        return 0;
+      for (let i = 0;i < snapshotRects.length; i++) {
+        const rect = snapshotRects[i];
+        const midY = rect.top + rect.height / 2;
+        if (clientY <= midY)
+          return i;
+      }
+      return snapshotRects.length;
+    }
+    const onMove = (moveEvent) => {
+      moveEvent.preventDefault();
+      const deltaY = moveEvent.clientY - startY;
+      if (useAnimatedShift) {
+        const initialTop = draggedRect.top - ulRect.top;
+        draggedItem.style.top = `${initialTop + deltaY}px`;
+      } else {
+        draggedItem.style.transform = `translateY(${deltaY}px)`;
+        draggedItem.style.transition = "none";
+      }
+      const targetInsertionIndex = calcInsertionFromSnapshot(moveEvent.clientY);
+      if (useAnimatedShift) {
+        applyShiftTransforms(allItems, fromIndex, targetInsertionIndex, draggedHeight, animate);
+      } else {
+        const indicatorTarget = (targetInsertionIndex < allItems.length ? allItems[targetInsertionIndex] : null) ?? null;
+        if (indicatorTarget !== draggedItem) {
+          dropIndicator.show(ulEl, indicatorTarget);
+        } else {
+          dropIndicator.hide();
+        }
+      }
+    };
+    const onUp = (upEvent) => {
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+      draggedItem.removeAttribute("data-dragging");
+      draggedItem.style.transform = "";
+      draggedItem.style.transition = "";
+      if (useAnimatedShift) {
+        if (placeholder?.parentNode) {
+          placeholder.parentNode.removeChild(placeholder);
+          placeholder = null;
+        }
+        draggedItem.style.position = "";
+        draggedItem.style.width = "";
+        draggedItem.style.top = "";
+        draggedItem.style.left = "";
+        draggedItem.style.zIndex = "";
+        for (const item of allItems) {
+          item.style.transition = "none";
+          item.style.transform = "";
+          item.style.willChange = "";
+        }
+      }
+      dropIndicator.hide();
+      const insertionIndex = calcInsertionFromSnapshot(upEvent.clientY);
+      const destIndex = insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
+      if (fromIndex !== destIndex) {
+        getOnReorder()?.(fromIndex, destIndex);
+      }
+    };
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+  });
+}
+function ComposedListRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = {
+      classes: __props.classes,
+      animate: __props.animate ?? false,
+      sortable: __props.sortable ?? false,
+      onReorder: __props.onReorder
+    };
+    const animHooks = computed(() => __props.animate ?? false ? createAnimationHooks(__props.animate ?? false) : undefined);
+    const ulRef = ref();
+    if (__props.sortable ?? false) {
+      onMount(() => {
+        const ul = ulRef.current;
+        if (ul) {
+          setupDragSort(ul, () => __props.sortable ?? false, () => __props.onReorder, () => __props.animate ?? false);
+        }
+      });
+    }
+    const __mfResult0 = ListContext.Provider({ get value() {
+      return ctx;
+    }, children: () => ListAnimationContext.Provider({ get value() {
+      return animHooks.value;
+    }, children: () => (() => {
+      const __el0 = __element("ul");
+      ulRef.current = __el0;
+      __attr(__el0, "class", () => cn(__props.classes?.root, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() }) });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function reorder(arr, from, to) {
+  const result = [...arr];
+  const moved = result.splice(from, 1)[0];
+  result.splice(to, 0, moved);
+  return result;
+}
+var ComposedList = Object.assign(ComposedListRoot, {
+  Item: ListItem,
+  DragHandle: ListDragHandle,
+  reorder
+});
+
+export { ComposedList };

package/dist/shared/chunk-75pegjs7.js

@@ -0,0 +1,26 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/input/input-composed.tsx
+import { __attr, __discardMountFrame, __element, __flushMountFrame, __pushMountFrame, __spread } from "@vertz/ui/internals";
+function ComposedInputRoot(__props) {
+  const { classes: __$drop_0, className: __$drop_1, class: __$drop_2, ...props } = __props;
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("input");
+      __attr(__el0, "class", () => cn(__props.classes?.base, __props.className ?? __props.class));
+      __spread(__el0, props);
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedInput = ComposedInputRoot;
+
+export { ComposedInput };

package/dist/shared/{chunk-mr1tb0dp.js → chunk-7a2nqmeh.js}

@@ -1,6 +1,6 @@
 import {
   createFloatingPosition
-} from "./chunk-0mcr52hc.js";
+} from "./chunk-vef3sepw.js";
 import {
   Keys,
   isKey

package/dist/shared/chunk-7wem1bhb.js

@@ -0,0 +1,252 @@
+import {
+  ComposedCalendar
+} from "./chunk-3jack97k.js";
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/date-picker/date-picker-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, ref, useContext } from "@vertz/ui";
+var DatePickerContext = createContext(undefined, "@vertz/ui-primitives::DatePickerContext");
+function DatePickerTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    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 = computed(() => ctx.isOpen());
+    const hasVal = computed(() => ctx.hasValue());
+    const text = computed(() => ctx.displayText());
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      ctx.triggerRef.current = __el0;
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("data-datepicker-trigger", "");
+      __el0.setAttribute("aria-haspopup", "dialog");
+      __attr(__el0, "aria-controls", () => ctx.contentId);
+      __attr(__el0, "aria-expanded", () => isOpen.value ? "true" : "false");
+      __attr(__el0, "data-state", () => isOpen.value ? "open" : "closed");
+      __attr(__el0, "data-placeholder", () => hasVal.value ? undefined : "true");
+      __attr(__el0, "class", () => cn(ctx.classes?.trigger, __props.className ?? __props.class));
+      __on(__el0, "click", () => ctx.toggle());
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children ?? text.value));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function DatePickerContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    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 = computed(() => ctx.isOpen());
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "dialog");
+      __attr(__el0, "id", () => ctx.contentId);
+      __el0.setAttribute("data-datepicker-content", "");
+      __attr(__el0, "aria-hidden", () => isOpen.value ? "false" : "true");
+      __attr(__el0, "data-state", () => isOpen.value ? "open" : "closed");
+      __attr(__el0, "style", () => ({
+        display: isOpen.value ? "" : "none",
+        zIndex: "50"
+      }));
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+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(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let open = function() {
+      isOpen.value = 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
+        });
+      }
+      __props.onOpenChange?.(true);
+    }, close = function() {
+      isOpen.value = false;
+      state.floatingCleanup?.();
+      state.floatingCleanup = null;
+      state.dismissCleanup?.();
+      state.dismissCleanup = null;
+      __props.onOpenChange?.(false);
+    }, toggle = function() {
+      if (isOpen.value)
+        close();
+      else
+        open();
+    }, handleCalendarValueChange = function(calValue) {
+      if (calValue === null)
+        return;
+      if ((__props.mode ?? "single") === "single") {
+        const realDate = _toRealDate(calValue);
+        if (realDate) {
+          state.value = realDate;
+          hasValue.value = true;
+          displayText.value = _getDisplayText(realDate, __props.placeholder ?? "Pick a date", __props.formatDate ?? _defaultFormatDate);
+          __props.onValueChange?.(realDate);
+          close();
+        }
+      } else if ((__props.mode ?? "single") === "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.value = true;
+          displayText.value = _getDisplayText(range, __props.placeholder ?? "Pick a date", __props.formatDate ?? _defaultFormatDate);
+          __props.onValueChange?.(range);
+          if (from.getTime() !== to.getTime()) {
+            close();
+          }
+        }
+      }
+    };
+    const ids = linkedIds("datepicker");
+    const triggerRef = ref();
+    const contentRef = ref();
+    const isOpen = signal(false, "isOpen");
+    const hasValue = signal((__props.defaultValue ?? undefined) != null, "hasValue");
+    const displayText = signal(_getDisplayText(__props.defaultValue ?? undefined ?? null, __props.placeholder ?? "Pick a date", __props.formatDate ?? _defaultFormatDate), "displayText");
+    const state = {
+      value: __props.defaultValue ?? undefined ?? null,
+      dismissCleanup: null,
+      floatingCleanup: null
+    };
+    const calendarEl = computed(() => _buildCalendar({
+      mode: __props.mode ?? "single",
+      defaultValue: __props.defaultValue ?? undefined,
+      defaultMonth: __props.defaultMonth,
+      minDate: __props.minDate,
+      maxDate: __props.maxDate,
+      disabled: __props.disabled,
+      classes: __props.classes,
+      captionLayout: __props.captionLayout
+    }, handleCalendarValueChange));
+    const ctx = {
+      isOpen: () => isOpen.value,
+      hasValue: () => hasValue.value,
+      displayText: () => displayText.value,
+      contentId: ids.contentId,
+      triggerRef,
+      contentRef,
+      classes: __props.classes,
+      open,
+      close,
+      toggle
+    };
+    const __mfResult0 = DatePickerContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("span");
+      {
+        const __v = { position: "relative", display: "inline-block" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-datepicker-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children ?? (() => {
+        const __el1 = document.createDocumentFragment();
+        __append(__el1, DatePickerTrigger({}));
+        __append(__el1, DatePickerContent({ children: () => __child(() => calendarEl.value) }));
+        return __el1;
+      })()));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedDatePicker = Object.assign(ComposedDatePickerRoot, {
+  Trigger: DatePickerTrigger,
+  Content: DatePickerContent
+});
+
+export { ComposedDatePicker };