@vertz/ui-primitives 0.2.23 → 0.2.24

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

package/dist/shared/{chunk-7cb3z0s8.js → chunk-8evj43jn.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-a6wp8c32.js";
 import {
   createFloatingPosition
-} from "./chunk-0mcr52hc.js";
+} from "./chunk-vef3sepw.js";
 import {
   Keys,
   handleListNavigation,
@@ -85,7 +85,7 @@ function SelectRoot(options = {}) {
       dismissCleanup?.();
       dismissCleanup = null;
       trigger.focus();
-    }, createItem = function(value, label, parent) {
+    }, createItem = function(value, label) {
       const isSelectedItem = value === defaultValue;
       const item = (() => {
         const __el3 = __element("div");
@@ -116,7 +116,6 @@ function SelectRoot(options = {}) {
         triggerText.textContent = item.textContent ?? value;
       }
       items.push(item);
-      (parent ?? content).appendChild(item);
       return item;
     }, Item = function(value, label) {
       return createItem(value, label);
@@ -131,19 +130,17 @@ function SelectRoot(options = {}) {
         }
         return __el4;
       })();
-      content.appendChild(el);
       return {
         el,
-        Item: (value, itemLabel) => createItem(value, itemLabel, el)
+        Item: (value, itemLabel) => createItem(value, itemLabel)
       };
     }, Separator = function() {
-      const hr = (() => {
+      return (() => {
         const __el5 = __element("hr");
+        __el5.setAttribute("data-v-id", "SelectRoot");
         __el5.setAttribute("role", "separator");
         return __el5;
       })();
-      content.appendChild(hr);
-      return hr;
     };
     const { defaultValue = "", placeholder = "", onValueChange, positioning, ...attrs } = options;
     const ids = linkedIds("select");

package/dist/shared/chunk-8t0nm721.js

@@ -0,0 +1,152 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/card/card-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var CardContext = createContext(undefined, "@vertz/ui-primitives::CardContext");
+function CardHeader(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(ctx?.classes?.header, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CardTitle(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("h3");
+      __attr(__el0, "class", () => cn(ctx?.classes?.title, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CardDescription(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("p");
+      __attr(__el0, "class", () => cn(ctx?.classes?.description, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CardContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __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 CardFooter(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(ctx?.classes?.footer, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CardAction(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CardContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(ctx?.classes?.action, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedCardRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = CardContext.Provider({ get value() {
+      return { classes: __props.classes };
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __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;
+  }
+}
+var ComposedCard = Object.assign(ComposedCardRoot, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Footer: CardFooter,
+  Action: CardAction
+});
+
+export { ComposedCard };

package/dist/shared/chunk-94twh4s4.js

@@ -0,0 +1,28 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/separator/separator-composed.tsx
+import { computed } from "@vertz/ui";
+import { __attr, __discardMountFrame, __element, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+function ComposedSeparatorRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const orientationClass = computed(() => (__props.orientation ?? "horizontal") === "vertical" ? __props.classes?.vertical : __props.classes?.horizontal);
+    const __mfResult0 = (() => {
+      const __el0 = __element("hr");
+      __attr(__el0, "class", () => cn(__props.classes?.base, orientationClass.value, __props.className ?? __props.class));
+      __el0.setAttribute("role", "separator");
+      __attr(__el0, "aria-orientation", () => __props.orientation ?? "horizontal");
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedSeparator = ComposedSeparatorRoot;
+
+export { ComposedSeparator };