@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.90

package/dist/chunk-BLDMKFIG.js

@@ -0,0 +1,866 @@
+import {
+  addMonths,
+  firstDayOfWeekFor,
+  isSameDay,
+  isSameMonth,
+  isWithinBounds,
+  monthGrid,
+  monthLabel,
+  monthNames,
+  startOfDay,
+  weekdayNames
+} from "./chunk-SHFUQVLX.js";
+import {
+  useMergedRef
+} from "./chunk-NCTOTTVW.js";
+import {
+  useControllableState
+} from "./chunk-F6W3JQ7K.js";
+import {
+  PressableFeedback
+} from "./chunk-XZ42OWKC.js";
+import {
+  usePressState
+} from "./chunk-423RQBOX.js";
+import {
+  ChevronDownIcon,
+  Icon,
+  IconContext
+} from "./chunk-JN6IRT2M.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-DKVXTMIJ.js";
+import {
+  Slot,
+  createSlotContext
+} from "./chunk-TTZOIXKE.js";
+import {
+  useXAUITheme
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/calendar/calendar-day.tsx
+import { forwardRef, useCallback, useMemo } from "react";
+import { Text, View } from "react-native";
+
+// src/components/calendar/calendar.context.ts
+var [CalendarProvider, useCalendar] = createSlotContext("Calendar");
+
+// src/components/calendar/calendar-day.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CalendarDay = forwardRef(function CalendarDay2({
+  date,
+  children,
+  isDisabled,
+  accessibilityRole,
+  accessibilityState,
+  accessibilityLabel,
+  style,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const {
+    dayStyle,
+    daySelectedStyle,
+    dayLabelStyle,
+    dayLabelSelectedStyle,
+    dayLabelMutedStyle,
+    dotStyle,
+    dotSelectedStyle,
+    month,
+    value,
+    locale,
+    isDayEnabled,
+    select
+  } = useCalendar();
+  const [styleProps, rest] = useStyleProps(props);
+  const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+  const isSelected = value !== void 0 && isSameDay(date, value);
+  const isOutside = !isSameMonth(date, month);
+  const isToday = isSameDay(date, /* @__PURE__ */ new Date());
+  const disabled = isDisabled ?? !isDayEnabled(date);
+  const handlePress = useCallback(
+    (event) => {
+      select(date);
+      onPress?.(event);
+    },
+    [date, onPress, select]
+  );
+  const label = useMemo(() => fullDate(date, locale), [date, locale]);
+  const content = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          dayLabelStyle,
+          // Order is the reading order: muted for a day that is not this month's or is
+          // out of bounds, then the chosen colour, which outranks both — a chosen day
+          // outside the month is still the chosen day.
+          (isOutside || disabled) && dayLabelMutedStyle,
+          isSelected && dayLabelSelectedStyle
+        ],
+        children: date.getDate()
+      }
+    ),
+    isToday ? /* @__PURE__ */ jsx(View, { style: isSelected ? dotSelectedStyle : dotStyle }) : null
+  ] });
+  return /* @__PURE__ */ jsx(
+    PressableFeedback,
+    {
+      ref,
+      isPressed,
+      isDisabled: disabled,
+      accessibilityRole: accessibilityRole ?? "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: {
+        disabled,
+        selected: isSelected,
+        ...accessibilityState
+      },
+      ...rest,
+      style: [
+        dayStyle,
+        isSelected && daySelectedStyle,
+        styleProps,
+        // R9 — `style` may be `Pressable`'s function form. This slot owns the press state,
+        // so it resolves the function here rather than forwarding it and losing the rest.
+        typeof style === "function" ? style({ pressed: isPressed }) : style
+      ],
+      onPress: handlePress,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: content
+    }
+  );
+});
+CalendarDay.displayName = "XAUI.Calendar.Day";
+function fullDate(date, locale) {
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    }).format(date);
+  } catch {
+    return `${date.getDate()} ${monthLabel(date, locale)}`;
+  }
+}
+
+// src/components/calendar/calendar-grid.tsx
+import { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CalendarGrid = forwardRef2(
+  function CalendarGrid2({ children, style, ...props }, ref) {
+    const { gridStyle, month, firstDayOfWeek } = useCalendar();
+    const [styleProps, rest] = useStyleProps(props);
+    const days = useMemo2(
+      () => monthGrid(month, firstDayOfWeek),
+      [month, firstDayOfWeek]
+    );
+    return /* @__PURE__ */ jsx2(View2, { ref, ...rest, style: [gridStyle, styleProps, style], children: days.map((date) => /* @__PURE__ */ jsx2(View2, { style: CELL, children: typeof children === "function" ? children(date) : /* @__PURE__ */ jsx2(CalendarDay, { date }) }, date.getTime())) });
+  }
+);
+CalendarGrid.displayName = "XAUI.Calendar.Grid";
+var CELL = { width: "14.2857%", alignItems: "center" };
+
+// src/components/calendar/calendar-header.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { View as View3 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CalendarHeader = forwardRef3(
+  function CalendarHeader2({ children, style, ...props }, ref) {
+    const { headerStyle, glyph } = useCalendar();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx3(IconContext.Provider, { value: glyph, children: /* @__PURE__ */ jsx3(View3, { ref, ...rest, style: [headerStyle, styleProps, style], children }) });
+  }
+);
+CalendarHeader.displayName = "XAUI.Calendar.Header";
+
+// src/components/calendar/calendar-month-picker.tsx
+import { forwardRef as forwardRef4, useMemo as useMemo3 } from "react";
+import { Text as Text2, View as View4 } from "react-native";
+import Animated, { FadeInDown } from "react-native-reanimated";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AnimatedView = Animated.createAnimatedComponent(View4);
+var OPEN_MS = 200;
+var CalendarMonthPicker = forwardRef4(
+  function CalendarMonthPicker2({ format = "long", style, ...props }, ref) {
+    const {
+      monthPickerStyle,
+      monthStyle,
+      monthSelectedStyle,
+      monthLabelStyle,
+      monthLabelSelectedStyle,
+      month,
+      locale,
+      canGoToMonth,
+      goToMonthInYear,
+      setView
+    } = useCalendar();
+    const [styleProps, rest] = useStyleProps(props);
+    const names = useMemo3(() => monthNames(locale, format), [locale, format]);
+    const shownMonth = month.getMonth();
+    return /* @__PURE__ */ jsx4(
+      AnimatedView,
+      {
+        ref,
+        ...rest,
+        style: [monthPickerStyle, styleProps, style],
+        entering: FadeInDown.duration(OPEN_MS),
+        children: names.map((name, index) => {
+          const disabled = !canGoToMonth(index - shownMonth);
+          const isSelected = index === shownMonth;
+          return /* @__PURE__ */ jsx4(
+            PressableFeedback,
+            {
+              isDisabled: disabled,
+              accessibilityRole: "button",
+              accessibilityLabel: name,
+              accessibilityState: { selected: isSelected, disabled },
+              style: [monthStyle, isSelected && monthSelectedStyle],
+              onPress: () => {
+                goToMonthInYear(index);
+                setView("grid");
+              },
+              children: /* @__PURE__ */ jsx4(
+                Text2,
+                {
+                  numberOfLines: 1,
+                  style: [
+                    monthLabelStyle,
+                    isSelected && monthLabelSelectedStyle
+                  ],
+                  children: name
+                }
+              )
+            },
+            name
+          );
+        })
+      }
+    );
+  }
+);
+CalendarMonthPicker.displayName = "XAUI.Calendar.MonthPicker";
+
+// src/components/calendar/calendar-nav-button.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { StyleSheet, View as View5 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var sheet = StyleSheet.create({
+  back: { transform: [{ rotate: "90deg" }] },
+  forward: { transform: [{ rotate: "-90deg" }] }
+});
+function navButton(step, name, rotation) {
+  const Component = forwardRef5(function NavButton({
+    children,
+    step: overrideStep,
+    accessibilityRole,
+    accessibilityState,
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const { navStyle, goToMonth, canGoToMonth, isDisabled } = useCalendar();
+    const [styleProps, rest] = useStyleProps(props);
+    const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+    const months = overrideStep ?? step;
+    const disabled = isDisabled || !canGoToMonth(months);
+    return /* @__PURE__ */ jsx5(
+      PressableFeedback,
+      {
+        ref,
+        isPressed,
+        isDisabled: disabled,
+        accessibilityRole: accessibilityRole ?? "button",
+        accessibilityState: { disabled, ...accessibilityState },
+        ...rest,
+        style: [navStyle, styleProps, style],
+        onPress: (event) => {
+          onPress?.(event);
+          goToMonth(months);
+        },
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children: children ?? /* @__PURE__ */ jsx5(View5, { style: rotation, children: /* @__PURE__ */ jsx5(Icon, { as: ChevronDownIcon }) })
+      }
+    );
+  });
+  Component.displayName = name;
+  return Component;
+}
+var CalendarPreviousButton = navButton(
+  -1,
+  "XAUI.Calendar.PreviousButton",
+  sheet.back
+);
+var CalendarNextButton = navButton(
+  1,
+  "XAUI.Calendar.NextButton",
+  sheet.forward
+);
+
+// src/components/calendar/calendar.tsx
+import { forwardRef as forwardRef6, useCallback as useCallback2, useMemo as useMemo4, useState } from "react";
+import { StyleSheet as StyleSheet2, View as View6 } from "react-native";
+
+// src/components/calendar/calendar.recipe.ts
+var SLOTS = [
+  "root",
+  "header",
+  "title",
+  "nav",
+  "weekdays",
+  "weekday",
+  "grid",
+  "day",
+  "daySelected",
+  "dayLabel",
+  "dayLabelSelected",
+  "dayLabelMuted",
+  "dot",
+  "dotSelected",
+  "yearPicker",
+  "year",
+  "yearSelected",
+  "yearLabel",
+  "yearLabelSelected",
+  "monthPicker",
+  "month",
+  "monthSelected",
+  "monthLabel",
+  "monthLabelSelected"
+];
+var VARIANT_TOKENS = {
+  primary: { bgSelected: "accent", fgSelected: "accentForeground" },
+  secondary: { bgSelected: "accentSoft", fgSelected: "accentSoftForeground" },
+  tertiary: { bgSelected: "default", fgSelected: "defaultForeground" },
+  ghost: { bgSelected: "foreground", fgSelected: "background" }
+};
+var SIZES = {
+  sm: { cell: 36, label: "sm", title: "md", weekday: "xs" },
+  md: { cell: 40, label: "md", title: "lg", weekday: "sm" },
+  lg: { cell: 44, label: "lg", title: "xl", weekday: "md" }
+};
+var DOT_RATIO = 3.5 / 40;
+function sizeAxis(step) {
+  const { cell, label, title, weekday } = step;
+  return (theme) => {
+    const dot = Math.round(cell * DOT_RATIO);
+    return {
+      // A day is a circle by default, and `radius` overrides it — the one shape decision
+      // this component makes, and the same one the `Radio` makes.
+      day: { width: cell, height: cell, borderRadius: cell / 2 },
+      daySelected: { borderRadius: cell / 2 },
+      dayLabel: { fontSize: theme.fontSizes[label] },
+      title: {
+        fontSize: theme.fontSizes[title],
+        lineHeight: theme.lineHeights[title]
+      },
+      weekday: {
+        height: theme.spacing(6),
+        lineHeight: theme.spacing(6),
+        fontSize: theme.fontSizes[weekday]
+      },
+      nav: { width: cell, height: cell, borderRadius: cell / 2 },
+      dot: { width: dot, height: dot, borderRadius: dot / 2 },
+      // Six rows on screen and everything else out of sight, like the grid it replaces:
+      // a year list as tall as a page of months reads as a different control. The picker
+      // is a scroll, and its own content travels.
+      yearPicker: { height: cell * 6 + theme.spacing(2) * 5 },
+      year: { height: cell, borderRadius: cell / 2 },
+      yearLabel: { fontSize: theme.fontSizes[label] },
+      // The same cell as a year, and no fixed picker height: twelve months are four rows,
+      // which fit where six weeks did without a scroll of their own.
+      month: { height: cell, borderRadius: cell / 2 },
+      monthLabel: { fontSize: theme.fontSizes[label] }
+    };
+  };
+}
+var calendarRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    root: { width: "100%", gap: theme.spacing(2) },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: theme.spacing(2)
+    },
+    title: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold,
+      color: theme.colors.foreground
+    },
+    nav: { alignItems: "center", justifyContent: "center" },
+    // Seven columns, and the cells inside them are centred rather than stretched: a cell
+    // is a circle, and a circle stretched to a seventh of a phone is an ellipse.
+    weekdays: { flexDirection: "row" },
+    weekday: {
+      flex: 1,
+      fontFamily: theme.fontFamilies.body,
+      textAlign: "center",
+      color: theme.colors.muted
+    },
+    grid: { flexDirection: "row", flexWrap: "wrap" },
+    day: {
+      // A seventh of the row, and the box inside it centred. `width` on the cell is what
+      // makes the circle a circle; this is what makes seven of them fill the line.
+      alignItems: "center",
+      justifyContent: "center",
+      alignSelf: "center"
+    },
+    // Under the number rather than over it, and laid out by the day so the number does not
+    // move when it appears: absolute, tucked just below the digit rather than down on the
+    // cell's edge.
+    dot: { position: "absolute", bottom: 5 },
+    dayLabel: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.foreground,
+      textAlign: "center"
+    },
+    // A day outside the month, or outside the bounds. It is a slot rather than an axis
+    // because forty-two cells share one resolution and only some of them are muted.
+    dayLabelMuted: { color: theme.colors.muted },
+    // Three columns of a third'd and a bit: a year takes the width its calendar's parent
+    // gives, and three of them fill a phone's width wherever four fixed cells would have
+    // to be measured. The row direction, the wrap and the gap between rows are the
+    // scroll's `contentContainerStyle` — a `ScrollView` refuses child layout on its own
+    // style, RN throws by invariant.
+    yearPicker: { width: "100%" },
+    year: { width: "31%", alignItems: "center", justifyContent: "center" },
+    yearLabel: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      textAlign: "center",
+      color: theme.colors.foreground
+    },
+    // The month grid is a plain `View`, so its own layout lives here rather than on a
+    // content container: three columns like the years, wrapping to four rows, centred so
+    // a short final row does not hang off the left.
+    monthPicker: {
+      width: "100%",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "center",
+      gap: theme.spacing(2)
+    },
+    month: { width: "31%", alignItems: "center", justifyContent: "center" },
+    monthLabel: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      textAlign: "center",
+      color: theme.colors.foreground
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (theme, colors) => ({
+    daySelected: { backgroundColor: colors.bgSelected },
+    dayLabelSelected: { color: colors.fgSelected },
+    // The mark on an unchosen today is the soft accent — enough colour to read as "today"
+    // without competing with the chosen day's full disc. On the chosen day it has to read
+    // against that disc instead, which is what `fgSelected` is for.
+    dot: { backgroundColor: theme.colors.accentSoftForeground },
+    dotSelected: { backgroundColor: colors.fgSelected },
+    // The year on screen wears the same pair as the chosen day: one resolution, and the
+    // colour of the disc the header's redrawn years sit on.
+    yearSelected: { backgroundColor: colors.bgSelected },
+    yearLabelSelected: { color: colors.fgSelected },
+    // The month on screen, the same again — the grid the year picker drills into.
+    monthSelected: { backgroundColor: colors.bgSelected },
+    monthLabelSelected: { color: colors.fgSelected }
+  }),
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    /** Both the disc and the cell it sits in, or a squared-off day holds a round disc. */
+    radius: radiusAxis(
+      "day",
+      "daySelected",
+      "year",
+      "yearSelected",
+      "month",
+      "monthSelected"
+    )
+  },
+  states: {
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "primary", size: "md" }
+});
+
+// src/components/calendar/calendar.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DEFAULT_YEAR_SPAN = 50;
+var CalendarRoot = forwardRef6(function Calendar({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  month: controlledMonth,
+  defaultMonth,
+  onMonthChange,
+  view: controlledView,
+  defaultView,
+  onViewChange,
+  minValue,
+  maxValue,
+  firstDayOfWeek,
+  locale,
+  isDisabled = false,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [fallbackMonth] = useState(() => firstOfMonth(defaultValue ?? /* @__PURE__ */ new Date()));
+  const [month, setMonth] = useControllableState({
+    value: controlledMonth,
+    defaultValue: defaultMonth ? firstOfMonth(defaultMonth) : fallbackMonth,
+    onChange: onMonthChange
+  });
+  const [view, setView] = useControllableState({
+    value: controlledView,
+    defaultValue: defaultView ?? "grid",
+    onChange: onViewChange
+  });
+  const resolvedLocale = locale ?? deviceLocale();
+  const weekStart = firstDayOfWeek ?? firstDayOfWeekFor(resolvedLocale);
+  const selection = { variant, size, radius };
+  const styles = calendarRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled }
+  });
+  const tint = color ? calendarRecipe.tint({ theme, color, selection }) : void 0;
+  const bounds = useMemo4(
+    () => ({ min: minValue, max: maxValue }),
+    [minValue, maxValue]
+  );
+  const isDayEnabled = useCallback2(
+    (date) => !isDisabled && isWithinBounds(date, bounds),
+    [bounds, isDisabled]
+  );
+  const select = useCallback2(
+    (date) => {
+      if (!isWithinBounds(date, bounds)) return;
+      setValue(startOfDay(date));
+    },
+    [bounds, setValue]
+  );
+  const goToMonth = useCallback2(
+    (step) => {
+      if (step === 0) return;
+      setMonth((current) => firstOfMonth(addMonths(current, step)));
+    },
+    [setMonth]
+  );
+  const canGoToMonth = useCallback2(
+    (step) => {
+      const target = firstOfMonth(addMonths(month, step));
+      const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0);
+      return isWithinBounds(target, { max: bounds.max }) && isWithinBounds(lastDay, { min: bounds.min });
+    },
+    [bounds, month]
+  );
+  const currentYear = month.getFullYear();
+  const goToYear = useCallback2(
+    (year) => {
+      goToMonth((year - currentYear) * 12);
+    },
+    [goToMonth, currentYear]
+  );
+  const currentMonthIndex = month.getMonth();
+  const goToMonthInYear = useCallback2(
+    (monthIndex) => {
+      goToMonth(monthIndex - currentMonthIndex);
+    },
+    [goToMonth, currentMonthIndex]
+  );
+  const yearRange = useMemo4(() => {
+    const now = (/* @__PURE__ */ new Date()).getFullYear();
+    return {
+      first: bounds.min?.getFullYear() ?? now - DEFAULT_YEAR_SPAN,
+      last: bounds.max?.getFullYear() ?? now + DEFAULT_YEAR_SPAN
+    };
+  }, [bounds.min, bounds.max]);
+  const context = useMemo4(() => {
+    const title = StyleSheet2.flatten([styles.title]);
+    return {
+      headerStyle: styles.header,
+      titleStyle: styles.title,
+      navStyle: styles.nav,
+      weekdaysStyle: styles.weekdays,
+      weekdayStyle: styles.weekday,
+      gridStyle: styles.grid,
+      dayStyle: styles.day,
+      daySelectedStyle: tint ? [styles.daySelected, tint.daySelected] : styles.daySelected,
+      dayLabelStyle: styles.dayLabel,
+      dayLabelSelectedStyle: tint ? [styles.dayLabelSelected, tint.dayLabelSelected] : styles.dayLabelSelected,
+      dayLabelMutedStyle: styles.dayLabelMuted,
+      dotStyle: styles.dot,
+      // `dot` first in both branches, and that is not tidiness: the size axis puts the
+      // mark's width, height and corner on `dot` alone, so a `dotSelected` handed over on
+      // its own is a coloured node with no size — which renders nothing at all.
+      dotSelectedStyle: [styles.dot, tint ? tint.dotSelected : styles.dotSelected],
+      yearPickerStyle: styles.yearPicker,
+      yearStyle: styles.year,
+      yearSelectedStyle: tint ? [styles.yearSelected, tint.yearSelected] : styles.yearSelected,
+      yearLabelStyle: styles.yearLabel,
+      yearLabelSelectedStyle: tint ? [styles.yearLabelSelected, tint.yearLabelSelected] : styles.yearLabelSelected,
+      monthPickerStyle: styles.monthPicker,
+      monthStyle: styles.month,
+      monthSelectedStyle: tint ? [styles.monthSelected, tint.monthSelected] : styles.monthSelected,
+      monthLabelStyle: styles.monthLabel,
+      monthLabelSelectedStyle: tint ? [styles.monthLabelSelected, tint.monthLabelSelected] : styles.monthLabelSelected,
+      glyph: {
+        size: title.fontSize,
+        color: typeof title.color === "string" ? title.color : void 0
+      },
+      month,
+      value,
+      locale: resolvedLocale,
+      firstDayOfWeek: weekStart,
+      isDisabled,
+      view,
+      setView,
+      isDayEnabled,
+      select,
+      goToMonth,
+      canGoToMonth,
+      goToYear,
+      goToMonthInYear,
+      yearRange
+    };
+  }, [
+    styles,
+    tint,
+    month,
+    value,
+    resolvedLocale,
+    weekStart,
+    isDisabled,
+    view,
+    setView,
+    isDayEnabled,
+    select,
+    goToMonth,
+    canGoToMonth,
+    goToYear,
+    goToMonthInYear,
+    yearRange
+  ]);
+  const rootStyle = [styles.root, styleProps, style];
+  return /* @__PURE__ */ jsx6(CalendarProvider, { value: context, children: asChild ? /* @__PURE__ */ jsx6(Slot, { ref, ...rest, style: rootStyle, children }) : /* @__PURE__ */ jsx6(View6, { ref, ...rest, style: rootStyle, children }) });
+});
+CalendarRoot.displayName = "XAUI.Calendar.Root";
+function firstOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function deviceLocale() {
+  try {
+    return new Intl.DateTimeFormat().resolvedOptions().locale;
+  } catch {
+    return "en";
+  }
+}
+
+// src/components/calendar/calendar-title.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { Text as Text3 } from "react-native";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CalendarTitle = forwardRef7(
+  function CalendarTitle2({ children, accessibilityRole, style, ...props }, ref) {
+    const { titleStyle, month, locale } = useCalendar();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx7(
+      Text3,
+      {
+        ref,
+        accessibilityRole: accessibilityRole ?? "header",
+        style: [titleStyle, styleProps, style],
+        ...rest,
+        children: children ?? monthLabel(month, locale)
+      }
+    );
+  }
+);
+CalendarTitle.displayName = "XAUI.Calendar.Title";
+
+// src/components/calendar/calendar-weekdays.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { Text as Text4, View as View7 } from "react-native";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CalendarWeekdays = forwardRef8(
+  function CalendarWeekdays2({ children, style, ...props }, ref) {
+    const { weekdaysStyle, weekdayStyle, locale, firstDayOfWeek } = useCalendar();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx8(
+      View7,
+      {
+        ref,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        ...rest,
+        style: [weekdaysStyle, styleProps, style],
+        children: children ?? weekdayNames(locale, firstDayOfWeek).map((name) => /* @__PURE__ */ jsx8(Text4, { style: weekdayStyle, children: name }, name))
+      }
+    );
+  }
+);
+CalendarWeekdays.displayName = "XAUI.Calendar.Weekdays";
+
+// src/components/calendar/calendar-year-picker.tsx
+import { forwardRef as forwardRef9, useEffect, useMemo as useMemo5, useRef, useState as useState2 } from "react";
+import { ScrollView, StyleSheet as StyleSheet3, Text as Text5 } from "react-native";
+import Animated2, { FadeInDown as FadeInDown2 } from "react-native-reanimated";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var AnimatedScrollView = Animated2.createAnimatedComponent(ScrollView);
+var COLUMNS = 3;
+var OPEN_MS2 = 200;
+var CalendarYearPicker = forwardRef9(function CalendarYearPicker2({ firstYear, lastYear, style, onLayout, contentContainerStyle, ...props }, ref) {
+  const {
+    yearPickerStyle,
+    yearStyle,
+    yearSelectedStyle,
+    yearLabelStyle,
+    yearLabelSelectedStyle,
+    month,
+    yearRange: defaultRange,
+    goToYear,
+    canGoToMonth,
+    setView
+  } = useCalendar();
+  const [styleProps, rest] = useStyleProps(props);
+  const theme = useXAUITheme();
+  const first = firstYear ?? defaultRange.first;
+  const last = lastYear ?? defaultRange.last;
+  const shownYear = month.getFullYear();
+  const years = useMemo5(
+    () => Array.from({ length: last - first + 1 }, (_, index) => first + index),
+    [first, last]
+  );
+  const initialRow = Math.floor((shownYear - first) / COLUMNS);
+  const gap = theme.spacing(2);
+  const cell = StyleSheet3.flatten([yearStyle])?.height ?? 0;
+  const rowHeight = (typeof cell === "number" ? cell : 0) + gap;
+  const scroller = useRef(null);
+  const refs = useMergedRef(scroller, ref);
+  const [isPlaced, setIsPlaced] = useState2(false);
+  const scrollToRow = (animated) => {
+    if (initialRow === 0 || isPlaced) return;
+    scroller.current?.scrollTo({ y: initialRow * rowHeight, animated });
+  };
+  const place = (event) => {
+    onLayout?.(event);
+    if (isPlaced) return;
+    scrollToRow(false);
+    setIsPlaced(true);
+  };
+  useEffect(() => {
+    scrollToRow(false);
+  });
+  return /* @__PURE__ */ jsx9(
+    AnimatedScrollView,
+    {
+      ref: refs,
+      ...rest,
+      style: [yearPickerStyle, styleProps, style],
+      contentContainerStyle: [
+        {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          justifyContent: "center",
+          gap
+        },
+        contentContainerStyle
+      ],
+      onLayout: place,
+      entering: FadeInDown2.duration(OPEN_MS2),
+      showsVerticalScrollIndicator: false,
+      children: years.map((year) => {
+        const disabled = !canGoToMonth((year - shownYear) * 12);
+        const isSelected = year === shownYear;
+        return /* @__PURE__ */ jsx9(
+          PressableFeedback,
+          {
+            isDisabled: disabled,
+            accessibilityRole: "button",
+            accessibilityLabel: `${year}`,
+            accessibilityState: { selected: isSelected, disabled },
+            style: [yearStyle, isSelected && yearSelectedStyle],
+            onPress: () => {
+              goToYear(year);
+              setView("month");
+            },
+            children: /* @__PURE__ */ jsx9(
+              Text5,
+              {
+                style: [
+                  yearLabelStyle,
+                  isSelected && yearLabelSelectedStyle
+                ],
+                children: year
+              }
+            )
+          },
+          year
+        );
+      })
+    }
+  );
+});
+CalendarYearPicker.displayName = "XAUI.Calendar.YearPicker";
+
+// src/components/calendar/index.ts
+var Calendar2 = Object.assign(CalendarRoot, {
+  Header: CalendarHeader,
+  Title: CalendarTitle,
+  PreviousButton: CalendarPreviousButton,
+  NextButton: CalendarNextButton,
+  Weekdays: CalendarWeekdays,
+  Grid: CalendarGrid,
+  Day: CalendarDay,
+  YearPicker: CalendarYearPicker,
+  MonthPicker: CalendarMonthPicker
+});
+
+export {
+  useCalendar,
+  CalendarDay,
+  CalendarGrid,
+  CalendarHeader,
+  CalendarMonthPicker,
+  CalendarPreviousButton,
+  CalendarNextButton,
+  SIZES,
+  calendarRecipe,
+  CalendarRoot,
+  CalendarTitle,
+  CalendarWeekdays,
+  CalendarYearPicker,
+  Calendar2 as Calendar
+};