@vertz/ui-primitives 0.2.38 → 0.2.42

package/dist/shared/chunk-3jack97k.js

@@ -1,509 +0,0 @@
-import {
-  cn
-} from "./chunk-q7xbcj9q.js";
-
-// src/calendar/calendar-composed.tsx
-import { computed, signal } from "@vertz/ui";
-import { __append, __attr, __child, __conditional, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __list, __on, __prop, __pushMountFrame } from "@vertz/ui/internals";
-var MONTH_NAMES = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-var DAY_NAMES = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-var MONTH_OPTIONS = MONTH_NAMES.map((name, index) => ({ name, index }));
-function getDaysInMonth(year, month) {
-  return new Date(year, month + 1, 0).getDate();
-}
-function isSameDay(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function addDays(date, days) {
-  const result = new Date(date);
-  result.setDate(result.getDate() + days);
-  return result;
-}
-function addMonths(date, months) {
-  const result = new Date(date);
-  result.setMonth(result.getMonth() + months);
-  return result;
-}
-function formatDate(date) {
-  const y = date.getFullYear();
-  const m = String(date.getMonth() + 1).padStart(2, "0");
-  const d = String(date.getDate()).padStart(2, "0");
-  return `${y}-${m}-${d}`;
-}
-function isSelectedDate(date, val) {
-  if (val === null)
-    return false;
-  if (val instanceof Date)
-    return isSameDay(val, date);
-  if (Array.isArray(val))
-    return val.some((d) => isSameDay(d, date));
-  if ("from" in val && "to" in val) {
-    return isSameDay(val.from, date) || isSameDay(val.to, date);
-  }
-  return false;
-}
-function isInRangeDate(date, val) {
-  if (val === null || !("from" in val))
-    return false;
-  const range = val;
-  return date > range.from && date < range.to;
-}
-function isDateDisabledCheck(date, minDate, maxDate, disabled) {
-  if (disabled?.(date))
-    return true;
-  if (minDate && date < minDate && !isSameDay(date, minDate))
-    return true;
-  if (maxDate && date > maxDate && !isSameDay(date, maxDate))
-    return true;
-  return false;
-}
-function computeYearRange(now, minDate, maxDate) {
-  const minYear = minDate ? minDate.getFullYear() : now.getFullYear() - 100;
-  const maxYear = maxDate ? maxDate.getFullYear() : now.getFullYear() + 10;
-  const years = [];
-  for (let y = minYear;y <= maxYear; y++) {
-    years.push(y);
-  }
-  return years;
-}
-function isMonthDisabled(month, year, minDate, maxDate) {
-  if (minDate && year === minDate.getFullYear() && month < minDate.getMonth())
-    return true;
-  if (maxDate && year === maxDate.getFullYear() && month > maxDate.getMonth())
-    return true;
-  return false;
-}
-function computeGridRows(display, weekStartsOn) {
-  const year = display.getFullYear();
-  const month = display.getMonth();
-  const daysInMonth = getDaysInMonth(year, month);
-  const firstDay = new Date(year, month, 1);
-  const firstDayOfWeek = firstDay.getDay();
-  const offset = (firstDayOfWeek - weekStartsOn + 7) % 7;
-  const startDate = addDays(firstDay, -offset);
-  const totalCells = offset + daysInMonth;
-  const totalRows = Math.ceil(totalCells / 7);
-  const rows = [];
-  let current = startDate;
-  for (let row = 0;row < totalRows; row++) {
-    const rowDates = [];
-    for (let col = 0;col < 7; col++) {
-      rowDates.push(new Date(current));
-      current = addDays(current, 1);
-    }
-    rows.push(rowDates);
-  }
-  return rows;
-}
-function DayCell(__props) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const dateStr = computed(() => formatDate(__props.cellDate));
-    const isOutside = computed(() => __props.cellDate.getMonth() !== __props.displayMonth.getMonth());
-    const isToday = computed(() => isSameDay(__props.cellDate, __props.now));
-    const isDisabled = computed(() => isDateDisabledCheck(__props.cellDate, __props.minDate, __props.maxDate, __props.disabled));
-    const selected = computed(() => isSelectedDate(__props.cellDate, __props.value));
-    const rangeVal = computed(() => __props.value);
-    const isRangeStart = computed(() => __props.mode === "range" && rangeVal.value && ("from" in rangeVal.value) && isSameDay(__props.cellDate, rangeVal.value.from));
-    const isRangeEnd = computed(() => __props.mode === "range" && rangeVal.value && ("to" in rangeVal.value) && isSameDay(__props.cellDate, rangeVal.value.to));
-    const inRange = computed(() => __props.mode === "range" && isInRangeDate(__props.cellDate, __props.value));
-    const __mfResult0 = (() => {
-      const __el0 = __element("button");
-      __el0.setAttribute("type", "button");
-      __attr(__el0, "class", () => cn(__props.classes?.dayButton));
-      __attr(__el0, "data-date", () => dateStr.value);
-      __attr(__el0, "data-outside-month", () => isOutside.value ? "true" : undefined);
-      __attr(__el0, "data-today", () => isToday.value ? "true" : undefined);
-      __attr(__el0, "aria-disabled", () => isDisabled.value ? "true" : undefined);
-      __attr(__el0, "aria-selected", () => selected.value ? "true" : undefined);
-      __attr(__el0, "data-range-start", () => isRangeStart.value ? "true" : undefined);
-      __attr(__el0, "data-range-end", () => isRangeEnd.value ? "true" : undefined);
-      __attr(__el0, "data-in-range", () => inRange.value ? "true" : undefined);
-      __on(__el0, "click", () => __props.onSelect(__props.cellDate));
-      __enterChildren(__el0);
-      __append(__el0, __child(() => __props.cellDate.getDate()));
-      __exitChildren();
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
-}
-function ComposedCalendarRoot(__props) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    let selectDate = function(date) {
-      if (isDateDisabledCheck(date, __props.minDate, __props.maxDate, __props.disabled))
-        return;
-      if (mode.value === "single") {
-        value.value = date;
-      } else if (mode.value === "multiple") {
-        const current = value.value ?? [];
-        const existing = current.findIndex((d) => isSameDay(d, date));
-        if (existing >= 0) {
-          const next = [...current];
-          next.splice(existing, 1);
-          value.value = next;
-        } else {
-          value.value = [...current, date];
-        }
-      } else if (mode.value === "range") {
-        const current = value.value;
-        if (!current || "to" in current && current.to) {
-          value.value = { from: date, to: date };
-        } else {
-          if (date < current.from) {
-            value.value = { from: date, to: current.from };
-          } else {
-            value.value = { from: current.from, to: date };
-          }
-        }
-      }
-      __props.onValueChange?.(value.value);
-    }, navigateMonth = function(delta) {
-      displayMonth.value = addMonths(displayMonth.value, delta);
-      __props.onMonthChange?.(displayMonth.value);
-    }, handleGridKeydown = function(event) {
-      const gridEl = event.currentTarget;
-      const active = document.activeElement;
-      if (!active || active.tagName !== "BUTTON")
-        return;
-      const dateStr = active.getAttribute("data-date");
-      if (!dateStr)
-        return;
-      const focused = new Date(`${dateStr}T00:00:00`);
-      let next = null;
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        next = addDays(focused, -1);
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        next = addDays(focused, 1);
-      } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        next = addDays(focused, -7);
-      } else if (event.key === "ArrowDown") {
-        event.preventDefault();
-        next = addDays(focused, 7);
-      } else if (event.key === "Home") {
-        event.preventDefault();
-        const dayOfWeek = (focused.getDay() - (__props.weekStartsOn ?? 0) + 7) % 7;
-        next = addDays(focused, -dayOfWeek);
-      } else if (event.key === "End") {
-        event.preventDefault();
-        const dayOfWeek = (focused.getDay() - (__props.weekStartsOn ?? 0) + 7) % 7;
-        next = addDays(focused, 6 - dayOfWeek);
-      } else if (event.key === "PageUp") {
-        event.preventDefault();
-        next = event.shiftKey ? addMonths(focused, -12) : addMonths(focused, -1);
-      } else if (event.key === "PageDown") {
-        event.preventDefault();
-        next = event.shiftKey ? addMonths(focused, 12) : addMonths(focused, 1);
-      } else if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        selectDate(focused);
-        return;
-      }
-      if (next) {
-        if (showDropdowns.value) {
-          const minYear = yearRange.value[0] ?? now.getFullYear();
-          const maxYear = yearRange.value[yearRange.value.length - 1] ?? now.getFullYear();
-          const minMo = __props.minDate && next.getFullYear() === __props.minDate.getFullYear() ? __props.minDate.getMonth() : 0;
-          const maxMo = __props.maxDate && next.getFullYear() === __props.maxDate.getFullYear() ? __props.maxDate.getMonth() : 11;
-          if (next.getFullYear() < minYear || next.getFullYear() > maxYear || next.getFullYear() === minYear && next.getMonth() < minMo || next.getFullYear() === maxYear && next.getMonth() > maxMo) {
-            return;
-          }
-        }
-        const needsMonthChange = next.getMonth() !== displayMonth.value.getMonth() || next.getFullYear() !== displayMonth.value.getFullYear();
-        if (needsMonthChange) {
-          displayMonth.value = new Date(next.getFullYear(), next.getMonth(), 1);
-          __props.onMonthChange?.(displayMonth.value);
-        }
-        const dateKey = formatDate(next);
-        const focusBtn = () => {
-          const btn = gridEl.querySelector(`button[data-date="${dateKey}"]`);
-          btn?.focus();
-        };
-        if (needsMonthChange) {
-          queueMicrotask(focusBtn);
-        } else {
-          focusBtn();
-        }
-      }
-    }, handleMonthSelect = function(event) {
-      const target = event.target;
-      const newMonth = Number(target.value);
-      if (isMonthDisabled(newMonth, displayMonth.value.getFullYear(), __props.minDate, __props.maxDate))
-        return;
-      displayMonth.value = new Date(displayMonth.value.getFullYear(), newMonth, 1);
-      __props.onMonthChange?.(displayMonth.value);
-    }, handleYearSelect = function(event) {
-      const target = event.target;
-      const newYear = Number(target.value);
-      let month = displayMonth.value.getMonth();
-      if (isMonthDisabled(month, newYear, __props.minDate, __props.maxDate)) {
-        if (__props.minDate && newYear === __props.minDate.getFullYear())
-          month = __props.minDate.getMonth();
-        else if (__props.maxDate && newYear === __props.maxDate.getFullYear())
-          month = __props.maxDate.getMonth();
-      }
-      displayMonth.value = new Date(newYear, month, 1);
-      __props.onMonthChange?.(displayMonth.value);
-    };
-    const now = new Date;
-    const mode = computed(() => __props.mode ?? "single");
-    const displayMonth = signal(__props.defaultMonth ?? now, "displayMonth");
-    const value = signal(__props.defaultValue ?? null, "value");
-    const dayHeaders = computed(() => Array.from({ length: 7 }, (_, i) => DAY_NAMES[((__props.weekStartsOn ?? 0) + i) % 7] ?? ""));
-    const titleText = computed(() => `${MONTH_NAMES[displayMonth.value.getMonth()]} ${displayMonth.value.getFullYear()}`);
-    const showDropdowns = computed(() => (__props.captionLayout ?? "buttons") === "dropdown" || (__props.captionLayout ?? "buttons") === "dropdown-buttons");
-    const showButtons = computed(() => (__props.captionLayout ?? "buttons") === "buttons" || (__props.captionLayout ?? "buttons") === "dropdown-buttons");
-    const yearRange = computed(() => showDropdowns.value ? computeYearRange(now, __props.minDate, __props.maxDate) : []);
-    const effectiveMinYear = computed(() => showDropdowns.value ? yearRange.value[0] ?? now.getFullYear() : 0);
-    const effectiveMaxYear = computed(() => showDropdowns.value ? yearRange.value[yearRange.value.length - 1] ?? now.getFullYear() : 9999);
-    const effectiveMinMonth = computed(() => __props.minDate && effectiveMinYear.value === __props.minDate.getFullYear() ? __props.minDate.getMonth() : 0);
-    const effectiveMaxMonth = computed(() => __props.maxDate && effectiveMaxYear.value === __props.maxDate.getFullYear() ? __props.maxDate.getMonth() : 11);
-    const isAtMinBoundary = computed(() => showDropdowns.value && displayMonth.value.getFullYear() === effectiveMinYear.value && displayMonth.value.getMonth() === effectiveMinMonth.value);
-    const isAtMaxBoundary = computed(() => showDropdowns.value && displayMonth.value.getFullYear() === effectiveMaxYear.value && displayMonth.value.getMonth() === effectiveMaxMonth.value);
-    const rows = computed(() => computeGridRows(displayMonth.value, __props.weekStartsOn ?? 0));
-    const prevChevron = (() => {
-      const __el0 = __element("svg");
-      __el0.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-      __el0.setAttribute("width", "16");
-      __el0.setAttribute("height", "16");
-      __el0.setAttribute("viewBox", "0 0 24 24");
-      __el0.setAttribute("fill", "none");
-      __el0.setAttribute("stroke", "currentColor");
-      __el0.setAttribute("stroke-width", "2");
-      __el0.setAttribute("stroke-linecap", "round");
-      __el0.setAttribute("stroke-linejoin", "round");
-      __el0.setAttribute("aria-hidden", "true");
-      __enterChildren(__el0);
-      __append(__el0, (() => {
-        const __el1 = __element("path");
-        __el1.setAttribute("d", "m15 18-6-6 6-6");
-        return __el1;
-      })());
-      __exitChildren();
-      return __el0;
-    })();
-    const nextChevron = (() => {
-      const __el2 = __element("svg");
-      __el2.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-      __el2.setAttribute("width", "16");
-      __el2.setAttribute("height", "16");
-      __el2.setAttribute("viewBox", "0 0 24 24");
-      __el2.setAttribute("fill", "none");
-      __el2.setAttribute("stroke", "currentColor");
-      __el2.setAttribute("stroke-width", "2");
-      __el2.setAttribute("stroke-linecap", "round");
-      __el2.setAttribute("stroke-linejoin", "round");
-      __el2.setAttribute("aria-hidden", "true");
-      __enterChildren(__el2);
-      __append(__el2, (() => {
-        const __el3 = __element("path");
-        __el3.setAttribute("d", "m9 18 6-6-6-6");
-        return __el3;
-      })());
-      __exitChildren();
-      return __el2;
-    })();
-    const __mfResult0 = (() => {
-      const __el4 = __element("div");
-      __el4.setAttribute("data-v-id", "ComposedCalendarRoot");
-      __attr(__el4, "class", () => cn(__props.classes?.root));
-      __enterChildren(__el4);
-      __append(__el4, (() => {
-        const __el5 = __element("div");
-        __attr(__el5, "class", () => cn(__props.classes?.header));
-        __attr(__el5, "data-caption-layout", () => __props.captionLayout ?? "buttons");
-        __enterChildren(__el5);
-        __append(__el5, __conditional(() => showButtons.value, () => (() => {
-          const __el6 = __element("button");
-          __el6.setAttribute("type", "button");
-          __attr(__el6, "class", () => cn(__props.classes?.navButton));
-          __el6.setAttribute("aria-label", "Previous month");
-          __attr(__el6, "aria-disabled", () => isAtMinBoundary.value ? "true" : undefined);
-          __on(__el6, "click", () => {
-            if (!isAtMinBoundary.value)
-              navigateMonth(-1);
-          });
-          __enterChildren(__el6);
-          __insert(__el6, prevChevron);
-          __exitChildren();
-          return __el6;
-        })(), () => null));
-        __append(__el5, __conditional(() => showDropdowns.value, () => (() => {
-          const __el7 = document.createDocumentFragment();
-          __append(__el7, (() => {
-            const __el8 = __element("select");
-            __el8.setAttribute("aria-label", "Select month");
-            __attr(__el8, "class", () => cn(__props.classes?.monthSelect));
-            __on(__el8, "change", handleMonthSelect);
-            __enterChildren(__el8);
-            __list(__el8, () => MONTH_OPTIONS, null, (mo) => (() => {
-              const __el9 = __element("option");
-              {
-                const __v = String(mo.index);
-                if (__v != null && __v !== false)
-                  __el9.setAttribute("value", __v === true ? "" : __v);
-              }
-              __attr(__el9, "disabled", () => isMonthDisabled(mo.index, displayMonth.value.getFullYear(), __props.minDate, __props.maxDate));
-              __enterChildren(__el9);
-              __insert(__el9, mo.name);
-              __exitChildren();
-              return __el9;
-            })());
-            __exitChildren();
-            __prop(__el8, "value", () => String(displayMonth.value.getMonth()));
-            return __el8;
-          })());
-          __append(__el7, (() => {
-            const __el10 = __element("select");
-            __el10.setAttribute("aria-label", "Select year");
-            __attr(__el10, "class", () => cn(__props.classes?.yearSelect));
-            __on(__el10, "change", handleYearSelect);
-            __enterChildren(__el10);
-            __list(__el10, () => yearRange.value, null, (yr) => (() => {
-              const __el11 = __element("option");
-              {
-                const __v = String(yr);
-                if (__v != null && __v !== false)
-                  __el11.setAttribute("value", __v === true ? "" : __v);
-              }
-              __enterChildren(__el11);
-              __insert(__el11, yr);
-              __exitChildren();
-              return __el11;
-            })());
-            __exitChildren();
-            __prop(__el10, "value", () => String(displayMonth.value.getFullYear()));
-            return __el10;
-          })());
-          return __el7;
-        })(), () => (() => {
-          const __el12 = __element("div");
-          __attr(__el12, "class", () => cn(__props.classes?.title));
-          __enterChildren(__el12);
-          __append(__el12, __child(() => titleText.value));
-          __exitChildren();
-          return __el12;
-        })()));
-        __append(__el5, __conditional(() => showButtons.value, () => (() => {
-          const __el13 = __element("button");
-          __el13.setAttribute("type", "button");
-          __attr(__el13, "class", () => cn(__props.classes?.navButton));
-          __el13.setAttribute("aria-label", "Next month");
-          __attr(__el13, "aria-disabled", () => isAtMaxBoundary.value ? "true" : undefined);
-          __on(__el13, "click", () => {
-            if (!isAtMaxBoundary.value)
-              navigateMonth(1);
-          });
-          __enterChildren(__el13);
-          __insert(__el13, nextChevron);
-          __exitChildren();
-          return __el13;
-        })(), () => null));
-        __exitChildren();
-        return __el5;
-      })());
-      __append(__el4, (() => {
-        const __el14 = __element("table");
-        __el14.setAttribute("role", "grid");
-        __attr(__el14, "class", () => cn(__props.classes?.grid));
-        __on(__el14, "keydown", handleGridKeydown);
-        __enterChildren(__el14);
-        __append(__el14, (() => {
-          const __el15 = __element("thead");
-          __enterChildren(__el15);
-          __append(__el15, (() => {
-            const __el16 = __element("tr");
-            __enterChildren(__el16);
-            __list(__el16, () => dayHeaders.value, null, (day) => (() => {
-              const __el17 = __element("th");
-              __el17.setAttribute("scope", "col");
-              __attr(__el17, "class", () => cn(__props.classes?.headCell));
-              __enterChildren(__el17);
-              __insert(__el17, day);
-              __exitChildren();
-              return __el17;
-            })());
-            __exitChildren();
-            return __el16;
-          })());
-          __exitChildren();
-          return __el15;
-        })());
-        __append(__el14, (() => {
-          const __el18 = __element("tbody");
-          __enterChildren(__el18);
-          __list(__el18, () => rows.value, null, (rowDates) => (() => {
-            const __el19 = __element("tr");
-            __enterChildren(__el19);
-            __list(__el19, () => rowDates, null, (cellDate) => (() => {
-              const __el20 = __element("td");
-              __el20.setAttribute("role", "gridcell");
-              __attr(__el20, "class", () => cn(__props.classes?.cell));
-              __enterChildren(__el20);
-              __append(__el20, DayCell({ get cellDate() {
-                return cellDate;
-              }, get displayMonth() {
-                return displayMonth.value;
-              }, get now() {
-                return now;
-              }, get mode() {
-                return mode.value;
-              }, get value() {
-                return value.value;
-              }, get minDate() {
-                return __props.minDate;
-              }, get maxDate() {
-                return __props.maxDate;
-              }, get disabled() {
-                return __props.disabled;
-              }, get classes() {
-                return __props.classes;
-              }, get onSelect() {
-                return selectDate;
-              } }));
-              __exitChildren();
-              return __el20;
-            })());
-            __exitChildren();
-            return __el19;
-          })());
-          __exitChildren();
-          return __el18;
-        })());
-        __exitChildren();
-        return __el14;
-      })());
-      __exitChildren();
-      return __el4;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
-}
-var ComposedCalendar = ComposedCalendarRoot;
-
-export { ComposedCalendar };

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

@@ -1,26 +0,0 @@
-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 };