@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-67sn29eh.js

@@ -0,0 +1,125 @@
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/collapsible/collapsible.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function CollapsibleRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (state.disabled.peek())
+        return;
+      const next = !state.open.peek();
+      state.open.value = next;
+      if (next) {
+        setHidden(content, false);
+      }
+      const height = content.scrollHeight;
+      content.style.setProperty("--collapsible-content-height", `${height}px`);
+      setExpanded(trigger, next);
+      setDataState(trigger, next ? "open" : "closed");
+      setDataState(content, next ? "open" : "closed");
+      if (!next) {
+        setHiddenAnimated(content, true);
+      }
+      onOpenChange?.(next);
+    };
+    const { defaultOpen = false, disabled = false, onOpenChange, ...attrs } = options;
+    const ids = linkedIds("collapsible");
+    const state = {
+      open: signal(defaultOpen),
+      disabled: signal(disabled)
+    };
+    const trigger = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      {
+        const __v = ids.triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = disabled;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = disabled ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+      }
+      __on(__el0, "click", toggle);
+      return __el0;
+    })();
+    const content = (() => {
+      const __el1 = __element("div");
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: defaultOpen ? "" : "none" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      return __el1;
+    })();
+    const root = (() => {
+      const __el2 = __element("div");
+      __enterChildren(__el2);
+      __insert(__el2, trigger);
+      __insert(__el2, content);
+      __exitChildren();
+      return __el2;
+    })();
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, trigger, content, state };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Collapsible = {
+  Root: CollapsibleRoot
+};
+
+export { Collapsible };

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-7a2nqmeh.js

@@ -0,0 +1,167 @@
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/hover-card/hover-card.tsx
+import { __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function HoverCardRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let cancelTimers = function() {
+      if (openTimeout) {
+        clearTimeout(openTimeout);
+        openTimeout = null;
+      }
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+        closeTimeout = null;
+      }
+    }, cancelCloseTimer = function() {
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+        closeTimeout = null;
+      }
+    }, positionContent = function() {
+      if (positioning) {
+        floatingCleanup?.();
+        const effectivePlacement = positioning.placement ?? "bottom";
+        const result = createFloatingPosition(trigger, content, {
+          ...positioning,
+          placement: effectivePlacement
+        });
+        floatingCleanup = result.cleanup;
+      }
+    }, show = function() {
+      cancelTimers();
+      if (state.open.peek())
+        return;
+      openTimeout = setTimeout(() => {
+        state.open.value = true;
+        setExpanded(trigger, true);
+        setHidden(content, false);
+        setDataState(content, "open");
+        positionContent();
+        onOpenChange?.(true);
+        openTimeout = null;
+      }, openDelay);
+    }, showImmediate = function() {
+      cancelTimers();
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(content, false);
+      setDataState(content, "open");
+      positionContent();
+      onOpenChange?.(true);
+    }, hide = function() {
+      cancelTimers();
+      if (!state.open.peek())
+        return;
+      closeTimeout = setTimeout(() => {
+        state.open.value = false;
+        setExpanded(trigger, false);
+        setDataState(content, "closed");
+        setHiddenAnimated(content, true);
+        floatingCleanup?.();
+        floatingCleanup = null;
+        onOpenChange?.(false);
+        closeTimeout = null;
+      }, closeDelay);
+    }, hideImmediate = function() {
+      cancelTimers();
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      floatingCleanup?.();
+      floatingCleanup = null;
+      onOpenChange?.(false);
+    }, handleTriggerBlur = function(event) {
+      const related = event.relatedTarget;
+      if (related && (trigger.contains(related) || content.contains(related)))
+        return;
+      hide();
+    }, handleTriggerKeydown = function(event) {
+      if (isKey(event, Keys.Escape) && state.open.peek()) {
+        hideImmediate();
+      }
+    }, handleContentFocusout = function(event) {
+      const related = event.relatedTarget;
+      if (related && (trigger.contains(related) || content.contains(related)))
+        return;
+      hide();
+    }, handleContentKeydown = function(event) {
+      if (isKey(event, Keys.Escape)) {
+        hideImmediate();
+        trigger.focus();
+      }
+    };
+    const { openDelay = 700, closeDelay = 300, onOpenChange, positioning, ...attrs } = options;
+    const contentId = uniqueId("hovercard");
+    const state = { open: signal(false) };
+    let openTimeout = null;
+    let closeTimeout = null;
+    let floatingCleanup = null;
+    const trigger = (() => {
+      const __el0 = __element("span");
+      __el0.setAttribute("aria-haspopup", "dialog");
+      __el0.setAttribute("aria-expanded", "false");
+      __on(__el0, "mouseenter", show);
+      __on(__el0, "mouseleave", hide);
+      __on(__el0, "focus", showImmediate);
+      __on(__el0, "blur", handleTriggerBlur);
+      __on(__el0, "keydown", handleTriggerKeydown);
+      return __el0;
+    })();
+    const content = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "dialog");
+      {
+        const __v = contentId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el1.setAttribute("aria-hidden", "true");
+      __el1.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __on(__el1, "mouseenter", cancelCloseTimer);
+      __on(__el1, "mouseleave", hide);
+      __on(__el1, "focusin", cancelCloseTimer);
+      __on(__el1, "focusout", handleContentFocusout);
+      __on(__el1, "keydown", handleContentKeydown);
+      return __el1;
+    })();
+    applyAttrs(trigger, attrs);
+    const __mfResult0 = { trigger, content, state };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var HoverCard = {
+  Root: HoverCardRoot
+};
+
+export { HoverCard };

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