@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-axpbdpgx.js

@@ -0,0 +1,177 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/carousel/carousel-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var CarouselContext = createContext(undefined, "@vertz/ui-primitives::CarouselContext");
+function CarouselSlide(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CarouselContext);
+    if (!ctx) {
+      throw new Error("<Carousel.Slide> must be used inside <Carousel>. " + "Ensure it is a direct or nested child of the Carousel root component.");
+    }
+    const index = computed(() => ctx.registerSlide());
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "group");
+      __el0.setAttribute("aria-roledescription", "slide");
+      __el0.setAttribute("data-carousel-slide", "");
+      __attr(__el0, "aria-hidden", () => String(index.value !== ctx.currentIndex));
+      __attr(__el0, "aria-label", () => `Slide ${index.value + 1} of ${ctx.getSlideCount()}`);
+      __attr(__el0, "data-state", () => index.value === ctx.currentIndex ? "active" : "inactive");
+      __attr(__el0, "class", () => cn(ctx.classes?.slide, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CarouselPrevious(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CarouselContext);
+    if (!ctx) {
+      throw new Error("<Carousel.Previous> must be used inside <Carousel>. " + "Ensure it is a direct or nested child of the Carousel root component.");
+    }
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("aria-label", "Previous slide");
+      __el0.setAttribute("data-carousel-prev", "");
+      __attr(__el0, "disabled", () => !ctx.loop && ctx.currentIndex <= 0);
+      __attr(__el0, "class", () => cn(ctx.classes?.prevButton));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children ?? "‹"));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CarouselNext(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(CarouselContext);
+    if (!ctx) {
+      throw new Error("<Carousel.Next> must be used inside <Carousel>. " + "Ensure it is a direct or nested child of the Carousel root component.");
+    }
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("aria-label", "Next slide");
+      __el0.setAttribute("data-carousel-next", "");
+      __attr(__el0, "disabled", () => !ctx.loop && ctx.currentIndex >= ctx.getSlideCount() - 1);
+      __attr(__el0, "class", () => cn(ctx.classes?.nextButton));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children ?? "›"));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedCarouselRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let registerSlide = function() {
+      const idx = _reg.nextIdx++;
+      slideCount.value = _reg.nextIdx;
+      return idx;
+    }, goTo = function(index) {
+      const count = _reg.nextIdx;
+      if (count === 0)
+        return;
+      let next = index;
+      if (__props.loop ?? false) {
+        next = (index % count + count) % count;
+      } else {
+        next = Math.max(0, Math.min(count - 1, index));
+      }
+      if (next === currentIndex.value)
+        return;
+      currentIndex.value = next;
+      __props.onSlideChange?.(next);
+    }, handleClick = function(e) {
+      const target = e.target;
+      if (target.closest("[data-carousel-prev]"))
+        goTo(currentIndex.value - 1);
+      if (target.closest("[data-carousel-next]"))
+        goTo(currentIndex.value + 1);
+    }, handleKeydown = function(e) {
+      const prevKey = (__props.orientation ?? "horizontal") === "horizontal" ? "ArrowLeft" : "ArrowUp";
+      const nextKey = (__props.orientation ?? "horizontal") === "horizontal" ? "ArrowRight" : "ArrowDown";
+      if (e.key === prevKey) {
+        e.preventDefault();
+        goTo(currentIndex.value - 1);
+      }
+      if (e.key === nextKey) {
+        e.preventDefault();
+        goTo(currentIndex.value + 1);
+      }
+    };
+    const currentIndex = signal(__props.defaultIndex ?? 0, "currentIndex");
+    const _reg = { nextIdx: 0 };
+    const slideCount = signal(0, "slideCount");
+    const ctx = {
+      registerSlide,
+      currentIndex,
+      getSlideCount: () => slideCount.value,
+      loop: __props.loop ?? false,
+      classes: __props.classes
+    };
+    const __mfResult0 = CarouselContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "region");
+      __el0.setAttribute("aria-roledescription", "carousel");
+      __el0.setAttribute("data-carousel-root", "");
+      __attr(__el0, "data-orientation", () => __props.orientation ?? "horizontal");
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __on(__el0, "click", handleClick);
+      __on(__el0, "keydown", handleKeydown);
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        __el1.setAttribute("data-carousel-viewport", "");
+        __attr(__el1, "class", () => cn(__props.classes?.viewport));
+        __enterChildren(__el1);
+        __append(__el1, __child(() => __props.children));
+        __exitChildren();
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedCarousel = Object.assign(ComposedCarouselRoot, {
+  Slide: CarouselSlide,
+  Previous: CarouselPrevious,
+  Next: CarouselNext
+});
+
+export { ComposedCarousel };

package/dist/shared/chunk-b4zzg457.js

@@ -0,0 +1,410 @@
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/calendar/calendar.tsx
+import { __append, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __list, __on, __pushMountFrame } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+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"];
+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 CalendarTitleEl() {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CalendarNavButton(onClick) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __on(__el0, "click", onClick);
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CalendarHeaderEl(prevButton, title, nextButton) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __enterChildren(__el0);
+      __insert(__el0, prevButton);
+      __insert(__el0, title);
+      __insert(__el0, nextButton);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CalendarGridEl(onKeydown) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("table");
+      __el0.setAttribute("role", "grid");
+      __on(__el0, "keydown", onKeydown);
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CalendarRootEl(header, grid) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __enterChildren(__el0);
+      __insert(__el0, header);
+      __insert(__el0, grid);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CalendarRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let updateTitle = function() {
+      const month = state.displayMonth.peek();
+      title.textContent = `${MONTH_NAMES[month.getMonth()]} ${month.getFullYear()}`;
+    }, isDateDisabled = function(date) {
+      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;
+    }, isSelected = function(date) {
+      const val = state.value.peek();
+      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;
+    }, isInRange = function(date) {
+      const val = state.value.peek();
+      if (val === null || !("from" in val))
+        return false;
+      const range = val;
+      return date > range.from && date < range.to;
+    }, selectDate = function(date) {
+      if (isDateDisabled(date))
+        return;
+      if (mode === "single") {
+        state.value.value = date;
+      } else if (mode === "multiple") {
+        const current = state.value.peek() ?? [];
+        const existing = current.findIndex((d) => isSameDay(d, date));
+        if (existing >= 0) {
+          const next = [...current];
+          next.splice(existing, 1);
+          state.value.value = next;
+        } else {
+          state.value.value = [...current, date];
+        }
+      } else if (mode === "range") {
+        const current = state.value.peek();
+        if (!current || "to" in current && current.to) {
+          state.value.value = { from: date, to: date };
+        } else {
+          if (date < current.from) {
+            state.value.value = { from: date, to: current.from };
+          } else {
+            state.value.value = { from: current.from, to: date };
+          }
+        }
+      }
+      onValueChange?.(state.value.peek());
+    }, computeGridRows = function(year, month) {
+      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;
+    }, buildDayButton = function(cellDate, month) {
+      const dateStr = cellDate.toISOString().split("T")[0] ?? "";
+      const isOutside = cellDate.getMonth() !== month;
+      const rangeVal = mode === "range" ? state.value.peek() : null;
+      return (() => {
+        const __el0 = __element("button");
+        __el0.setAttribute("type", "button");
+        {
+          const __v = dateStr;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-date", __v === true ? "" : __v);
+        }
+        {
+          const __v = isOutside ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-outside-month", __v === true ? "" : __v);
+        }
+        {
+          const __v = isSameDay(cellDate, now) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-today", __v === true ? "" : __v);
+        }
+        {
+          const __v = isDateDisabled(cellDate) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+        }
+        {
+          const __v = isSelected(cellDate) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("aria-selected", __v === true ? "" : __v);
+        }
+        {
+          const __v = rangeVal && "from" in rangeVal && isSameDay(cellDate, rangeVal.from) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-range-start", __v === true ? "" : __v);
+        }
+        {
+          const __v = rangeVal && "to" in rangeVal && isSameDay(cellDate, rangeVal.to) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-range-end", __v === true ? "" : __v);
+        }
+        {
+          const __v = rangeVal && isInRange(cellDate) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-in-range", __v === true ? "" : __v);
+        }
+        __on(__el0, "click", () => {
+          selectDate(cellDate);
+          rebuildGrid();
+        });
+        __enterChildren(__el0);
+        __insert(__el0, cellDate.getDate());
+        __exitChildren();
+        return __el0;
+      })();
+    }, buildGrid = function() {
+      const display = state.displayMonth.peek();
+      const year = display.getFullYear();
+      const month = display.getMonth();
+      const rows = computeGridRows(year, month);
+      const thead = (() => {
+        const __el1 = __element("thead");
+        __enterChildren(__el1);
+        __append(__el1, (() => {
+          const __el2 = __element("tr");
+          __enterChildren(__el2);
+          __insert(__el2, Array.from({ length: 7 }, (_, i) => {
+            const dayIndex = (weekStartsOn + i) % 7;
+            return (() => {
+              const __el3 = __element("th");
+              __el3.setAttribute("scope", "col");
+              __enterChildren(__el3);
+              __insert(__el3, DAY_NAMES[dayIndex] ?? "");
+              __exitChildren();
+              return __el3;
+            })();
+          }));
+          __exitChildren();
+          return __el2;
+        })());
+        __exitChildren();
+        return __el1;
+      })();
+      const tbody = (() => {
+        const __el4 = __element("tbody");
+        __enterChildren(__el4);
+        __list(__el4, () => rows, null, (rowDates) => (() => {
+          const __el5 = __element("tr");
+          __enterChildren(__el5);
+          __list(__el5, () => rowDates, null, (cellDate) => (() => {
+            const __el6 = __element("td");
+            __el6.setAttribute("role", "gridcell");
+            __enterChildren(__el6);
+            __insert(__el6, buildDayButton(cellDate, month));
+            __exitChildren();
+            return __el6;
+          })());
+          __exitChildren();
+          return __el5;
+        })());
+        __exitChildren();
+        return __el4;
+      })();
+      grid.replaceChildren(thead, tbody);
+    }, rebuildGrid = function() {
+      updateTitle();
+      buildGrid();
+    }, navigateMonth = function(delta) {
+      state.displayMonth.value = addMonths(state.displayMonth.peek(), delta);
+      onMonthChange?.(state.displayMonth.peek());
+      rebuildGrid();
+    }, destroy = function() {};
+    const {
+      mode: modeOpt,
+      defaultValue,
+      defaultMonth: defaultMonthOpt,
+      minDate,
+      maxDate,
+      disabled,
+      weekStartsOn: weekStartsOnOpt,
+      onValueChange,
+      onMonthChange,
+      ...attrs
+    } = options;
+    const now = new Date;
+    const defaultMonth = defaultMonthOpt ?? now;
+    const weekStartsOn = weekStartsOnOpt ?? 0;
+    const mode = modeOpt ?? "single";
+    const state = {
+      value: signal(defaultValue ?? null),
+      focusedDate: signal(defaultMonth),
+      displayMonth: signal(defaultMonth)
+    };
+    const title = CalendarTitleEl();
+    const prevButton = CalendarNavButton(() => navigateMonth(-1));
+    const nextButton = CalendarNavButton(() => navigateMonth(1));
+    const header = CalendarHeaderEl(prevButton, title, nextButton);
+    const grid = CalendarGridEl((event) => {
+      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() - weekStartsOn + 7) % 7;
+        next = addDays(focused, -dayOfWeek);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        const dayOfWeek = (focused.getDay() - weekStartsOn + 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);
+        rebuildGrid();
+        return;
+      }
+      if (next) {
+        state.focusedDate.value = next;
+        if (next.getMonth() !== state.displayMonth.peek().getMonth() || next.getFullYear() !== state.displayMonth.peek().getFullYear()) {
+          state.displayMonth.value = new Date(next.getFullYear(), next.getMonth(), 1);
+          onMonthChange?.(state.displayMonth.peek());
+          rebuildGrid();
+        }
+        const dateKey = next.toISOString().split("T")[0];
+        const btn = grid.querySelector(`button[data-date="${dateKey}"]`);
+        btn?.focus();
+      }
+    });
+    updateTitle();
+    buildGrid();
+    const root = CalendarRootEl(header, grid);
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, header, title, prevButton, nextButton, grid, state, destroy };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Calendar = {
+  Root: CalendarRoot
+};
+
+export { Calendar };