@trilogy-ds/react 0.0.16-esm-cjs → 0.0.18-esm-cjs

package/lib/chunk-JB7AXJFO.mjs

@@ -0,0 +1,405 @@
+"use client";
+import {
+  Select_default
+} from "./chunk-GIEAPQ2H.mjs";
+import {
+  option_default
+} from "./chunk-AEV6FHUQ.mjs";
+import {
+  Icon_default
+} from "./chunk-ALGX47MZ.mjs";
+import {
+  Text_default
+} from "./chunk-HHE7L3CW.mjs";
+import {
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/calendar/Calendar.tsx
+import { calendarLocale } from "@trilogy-ds/locales";
+import clsx from "clsx";
+import React from "react";
+var days = [...calendarLocale.days];
+var months = [...calendarLocale.months];
+var currentDate = /* @__PURE__ */ new Date();
+function checkIsRange(date) {
+  return !(date instanceof Date);
+}
+var Calendar = React.forwardRef(
+  ({
+    value = currentDate,
+    minDate = new Date(currentDate.getFullYear() - 10, 0, 1),
+    maxDate = new Date(currentDate.getFullYear() + 10, 12, 0),
+    disabled,
+    readOnly,
+    disabledDates,
+    onChange,
+    onMonthChange
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    const [visibleMonth, setVisibleMonth] = React.useState(
+      value instanceof Date ? value : value[0] || currentDate
+    );
+    const [activeDate, setActiveDate] = React.useState(value);
+    const [dateEndHovered, setDateEndHovered] = React.useState();
+    const refsDays = React.useRef([]);
+    const refDayFocused = React.useRef();
+    const refs = React.useRef([]);
+    const weeksId = React.useId();
+    const daysId = React.useId();
+    const calendarClasses = hashClass(styled, clsx("calendar"));
+    const calendarheaderClasses = hashClass(styled, clsx("calendar-header"));
+    const headerDropdownClasses = hashClass(styled, clsx("calendar-header-dropdown"));
+    const calendarActiveMonthClasses = hashClass(styled, clsx("calendar-active-month"));
+    const calendarDayLabelClasses = hashClass(styled, clsx("calendar-week-day-label"));
+    const calendarWeekDayClasses = hashClass(styled, clsx("calendar-week-day"));
+    const calendarActiveDateClasses = hashClass(styled, clsx("calendar-active-date"));
+    const calendarNextMonthClasses = hashClass(styled, clsx("calendar-next-month"));
+    const calendarPrevMonthClasses = hashClass(styled, clsx("calendar-prev-month"));
+    const calendarWeekDayDisabledClasses = hashClass(styled, clsx("calendar-week-day-disabled"));
+    const isDisabledClass = hashClass(styled, clsx(is("disabled")));
+    const isActiveClasses = hashClass(styled, clsx(is("active")));
+    const calendarWeekClasses = hashClass(styled, clsx("calendar-week"));
+    const dateStartClasses = hashClass(styled, clsx("calendar-date-start"));
+    const dateEndClasses = hashClass(styled, clsx("calendar-date-end"));
+    const rangeClasses = hashClass(styled, clsx("calendar-range"));
+    const dateInRangeClasses = hashClass(styled, clsx("calendar-date-in-range"));
+    const rangeInitClasses = hashClass(styled, clsx("calendar-range-init"));
+    const rondedLeftClasses = hashClass(styled, clsx("calendar-date-rounded-left"));
+    const rondedRightClasses = hashClass(styled, clsx("calendar-date-rounded-right"));
+    const isRange = checkIsRange(activeDate);
+    const isNextDisabled = React.useMemo(
+      () => disabled || (maxDate == null ? void 0 : maxDate.getMonth()) === (visibleMonth == null ? void 0 : visibleMonth.getMonth()) && (maxDate == null ? void 0 : maxDate.getFullYear()) === (visibleMonth == null ? void 0 : visibleMonth.getFullYear()),
+      [maxDate, visibleMonth, disabled]
+    );
+    const isPrevDisabled = React.useMemo(
+      () => disabled || (minDate == null ? void 0 : minDate.getMonth()) === (visibleMonth == null ? void 0 : visibleMonth.getMonth()) && (minDate == null ? void 0 : minDate.getFullYear()) === (visibleMonth == null ? void 0 : visibleMonth.getFullYear()),
+      [minDate, visibleMonth, disabled]
+    );
+    const getAllDaysInMonth = React.useCallback((year, month) => {
+      const date = new Date(year, month, 1);
+      const days2 = [];
+      const firstDayOfMonth = date.getDay();
+      const lastDayOfMonth = new Date(year, month + 1, 0).getDate();
+      const allDays = [];
+      for (let i = 0; i < firstDayOfMonth; i++) days2.push(null);
+      for (let day = 1; day <= lastDayOfMonth; day++) days2.push(new Date(year, month, day));
+      for (let i = 0; i < days2.length; i += 7) allDays.push(days2.slice(i, i + 7));
+      return allDays;
+    }, []);
+    const yearsBetween = React.useMemo(() => {
+      const minYear = minDate.getFullYear();
+      const maxYear = maxDate.getFullYear();
+      const currentYear = value instanceof Date && (value == null ? void 0 : value.getFullYear());
+      const isCurrentYearInclude = currentYear && currentYear >= minYear && currentYear <= maxYear;
+      let years = Array.from({ length: maxYear - minYear + 1 }, (_, i) => {
+        const year = minYear + i;
+        return {
+          value: year,
+          disabled: false
+        };
+      });
+      if (currentYear && !isCurrentYearInclude) {
+        years = [{ value: currentYear, disabled: true }, ...years];
+      }
+      return years;
+    }, [minDate, maxDate, value]);
+    const availableMonths = React.useMemo(() => {
+      const currentYear = visibleMonth.getFullYear();
+      const minYear = minDate.getFullYear();
+      const maxYear = maxDate.getFullYear();
+      const minMonth = minDate.getMonth();
+      const maxMonth = maxDate.getMonth();
+      return Array.from({ length: 12 }, (_, monthIndex) => {
+        if (currentYear < minYear || currentYear > maxYear) return false;
+        if (currentYear === minYear && monthIndex < minMonth) return false;
+        if (currentYear === maxYear && monthIndex > maxMonth) return false;
+        return true;
+      });
+    }, [minDate, maxDate, visibleMonth]);
+    const availableYear = React.useMemo(() => {
+      const minYear = minDate.getFullYear();
+      const maxYear = maxDate.getFullYear();
+      return Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i);
+    }, [minDate, maxDate, visibleMonth]);
+    const allDaysInMonth = React.useMemo(() => {
+      refsDays.current = [];
+      const activeYear = visibleMonth.getFullYear();
+      const activeMonth = visibleMonth.getMonth();
+      return getAllDaysInMonth(activeYear, activeMonth);
+    }, [visibleMonth]);
+    const handleClickNextPrevMonth = React.useCallback(
+      (month) => {
+        const nextMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + month, visibleMonth.getDate());
+        setVisibleMonth(nextMonth);
+        onMonthChange && onMonthChange(nextMonth);
+      },
+      [visibleMonth, onMonthChange]
+    );
+    const handleMonthSelect = React.useCallback(
+      (selectedMonth) => {
+        const newDate = new Date(visibleMonth.getFullYear(), selectedMonth, visibleMonth.getDate());
+        setVisibleMonth(newDate);
+        onMonthChange && onMonthChange(newDate);
+      },
+      [visibleMonth, onMonthChange, minDate, maxDate]
+    );
+    const handleYearSelect = React.useCallback(
+      (selectedYear) => {
+        const newDate = new Date(selectedYear, visibleMonth.getMonth(), visibleMonth.getDate());
+        if (newDate.getTime() < minDate.getTime() || newDate.getTime() > maxDate.getTime()) {
+          if (newDate.getTime() < minDate.getTime()) {
+            setVisibleMonth(new Date(selectedYear, minDate.getMonth(), visibleMonth.getDate()));
+            onMonthChange && onMonthChange(new Date(selectedYear, minDate.getMonth(), visibleMonth.getDate()));
+          } else {
+            setVisibleMonth(new Date(selectedYear, maxDate.getMonth(), visibleMonth.getDate()));
+            onMonthChange && onMonthChange(new Date(selectedYear, maxDate.getMonth(), visibleMonth.getDate()));
+          }
+          return;
+        }
+        setVisibleMonth(newDate);
+        onMonthChange && onMonthChange(newDate);
+      },
+      [visibleMonth, onMonthChange, minDate, maxDate]
+    );
+    const navigateInDaysWithKeyboard = React.useCallback(
+      (currentIndex, nextIndex) => {
+        var _a;
+        const nextRef = refsDays.current[currentIndex + nextIndex];
+        if (nextRef) {
+          refDayFocused.current = nextRef;
+          return nextRef.focus();
+        }
+        const mustNextMonth = [1, 7].includes(nextIndex);
+        const mustPrevMonth = [-1, -7].includes(nextIndex);
+        setVisibleMonth((prev) => {
+          const currentYear = prev.getFullYear();
+          const currentMonth = prev.getMonth();
+          if (mustNextMonth && !isNextDisabled) return new Date(currentYear, currentMonth + 1);
+          if (mustPrevMonth && !isPrevDisabled) return new Date(currentYear, currentMonth - 1);
+          return prev;
+        });
+        if (mustNextMonth && isNextDisabled) return;
+        if (mustPrevMonth && isPrevDisabled) return;
+        const prevDayFocused = new Date(Number((_a = refDayFocused.current) == null ? void 0 : _a.dataset.timestamp));
+        setTimeout(() => {
+          const year = prevDayFocused.getFullYear();
+          const month = prevDayFocused.getMonth();
+          const day = prevDayFocused.getDate() + nextIndex;
+          const nextDayFocused = new Date(year, month, day);
+          refsDays.current[nextDayFocused.getDate() - 1].focus();
+          refDayFocused.current = refsDays.current[nextDayFocused.getDate() - 1];
+        }, 10);
+      },
+      [refsDays.current, refDayFocused.current, isNextDisabled, isPrevDisabled]
+    );
+    const handlePressEnterInDays = React.useCallback(
+      (e) => {
+        if (readOnly) return;
+        const elm = e.target;
+        if (!elm) return;
+        refsDays.current.forEach((day) => day.tabIndex = -1);
+        elm.tabIndex = 0;
+        const newDate = new Date(Number(elm.dataset.timestamp));
+        let newActiveDate = [newDate];
+        if (!isRange) newActiveDate = newDate;
+        if (isRange && activeDate.length === 1 && newDate.getTime() > activeDate[0].getTime()) {
+          newActiveDate = [...activeDate, newDate];
+        }
+        setActiveDate(newActiveDate);
+        setDateEndHovered(void 0);
+        onChange && onChange(newActiveDate);
+      },
+      [refsDays.current, onChange, readOnly, activeDate, isRange]
+    );
+    const onKeyDownDay = React.useCallback(
+      (e, index, isDisabled) => {
+        switch (e.key) {
+          case "ArrowRight":
+            return navigateInDaysWithKeyboard(index, 1);
+          case "ArrowLeft":
+            return navigateInDaysWithKeyboard(index, -1);
+          case "ArrowUp":
+            return navigateInDaysWithKeyboard(index, -7);
+          case "ArrowDown":
+            return navigateInDaysWithKeyboard(index, 7);
+          case "Enter":
+            return !isDisabled && handlePressEnterInDays(e);
+          default:
+            return;
+        }
+      },
+      [handlePressEnterInDays, navigateInDaysWithKeyboard]
+    );
+    React.useEffect(() => {
+      var _a, _b;
+      if (refsDays.current) {
+        const activeDateIndex = refsDays.current.findIndex((day) => day.tabIndex === 0);
+        if (activeDateIndex === -1 && ((_a = refsDays == null ? void 0 : refsDays.current[0]) == null ? void 0 : _a.tabIndex)) {
+          const firstActiveDate = refsDays.current.findIndex((day) => !day.disabled);
+          if (firstActiveDate !== -1) {
+            refsDays.current[firstActiveDate].tabIndex = 0;
+            refDayFocused.current = refsDays.current[firstActiveDate];
+          }
+        }
+        if (activeDateIndex !== -1 && ((_b = refsDays == null ? void 0 : refsDays.current[0]) == null ? void 0 : _b.tabIndex)) {
+          refDayFocused.current = refsDays.current[activeDateIndex];
+        }
+      }
+    }, [refsDays.current, refDayFocused.current]);
+    React.useEffect(() => {
+      setActiveDate(value);
+      if (value instanceof Date) return setVisibleMonth(value);
+      if (!(value instanceof Date) && value[0]) return setVisibleMonth(value[0]);
+    }, [value]);
+    return /* @__PURE__ */ React.createElement(
+      "table",
+      {
+        "data-calendar-trilogy": "",
+        ref,
+        className: clsx(
+          calendarClasses,
+          isRange && rangeClasses,
+          isRange && activeDate.length === 1 && rangeInitClasses
+        )
+      },
+      /* @__PURE__ */ React.createElement("thead", { className: calendarheaderClasses }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { colSpan: 1, className: calendarPrevMonthClasses }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          "data-focusable": !isPrevDisabled,
+          onClick: () => handleClickNextPrevMonth(-1),
+          "aria-label": "Previous month",
+          type: "button",
+          disabled: isPrevDisabled,
+          ref: (el) => {
+            if (el && refs) refs.current[1] = el;
+          }
+        },
+        /* @__PURE__ */ React.createElement(Icon_default, { name: "tri-arrow-left" })
+      )), /* @__PURE__ */ React.createElement("th", { colSpan: 5, className: calendarActiveMonthClasses }, /* @__PURE__ */ React.createElement("div", { className: headerDropdownClasses }, /* @__PURE__ */ React.createElement(
+        Select_default,
+        {
+          "data-focusable": "true",
+          selected: String(visibleMonth.getMonth()),
+          onChange: (value2) => handleMonthSelect(Number(value2.selectValue)),
+          ref: (el) => {
+            if (el && refs) refs.current[2] = el;
+          }
+        },
+        months.map((monthName, monthIndex) => /* @__PURE__ */ React.createElement(option_default, { key: monthIndex, value: String(monthIndex), disabled: !availableMonths[monthIndex] }, monthName))
+      ), /* @__PURE__ */ React.createElement(
+        Select_default,
+        {
+          "data-focusable": "true",
+          selected: String(visibleMonth.getFullYear()),
+          onChange: (value2) => handleYearSelect(Number(value2.selectValue)),
+          ref: (el) => {
+            if (el && refs) refs.current[3] = el;
+          }
+        },
+        yearsBetween.map((year) => /* @__PURE__ */ React.createElement(
+          option_default,
+          {
+            key: year.value,
+            value: String(year.value),
+            disabled: !availableYear.includes(year.value)
+          },
+          String(year.value)
+        ))
+      ))), /* @__PURE__ */ React.createElement("th", { colSpan: 1, className: calendarNextMonthClasses }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          "data-focusable": !isNextDisabled,
+          onClick: () => handleClickNextPrevMonth(1),
+          "aria-label": "Next month",
+          type: "button",
+          disabled: isNextDisabled,
+          ref: (el) => {
+            if (el && refs) refs.current[4] = el;
+          }
+        },
+        /* @__PURE__ */ React.createElement(Icon_default, { name: "tri-arrow-right" })
+      ))), /* @__PURE__ */ React.createElement("tr", null, days.map((day, index) => {
+        return /* @__PURE__ */ React.createElement("td", { className: calendarDayLabelClasses, key: index }, /* @__PURE__ */ React.createElement(Text_default, null, day.slice(0, 1)));
+      }))),
+      /* @__PURE__ */ React.createElement("tbody", null, allDaysInMonth.map((week, weekIndex) => {
+        return /* @__PURE__ */ React.createElement(
+          "tr",
+          {
+            key: `${weeksId}_${weekIndex}`,
+            className: calendarWeekClasses,
+            onMouseLeave: () => setDateEndHovered(void 0)
+          },
+          week.map((day, dayIndex) => {
+            const ind = day !== null && day.getDate() - 1;
+            const isDateStart = isRange && activeDate[0] && (day == null ? void 0 : day.getTime()) === activeDate[0].getTime();
+            const isDateEnd = isRange && activeDate[1] && (day == null ? void 0 : day.getTime()) === activeDate[1].getTime();
+            const today = /* @__PURE__ */ new Date();
+            const isToday = (day == null ? void 0 : day.getFullYear()) === today.getFullYear() && (day == null ? void 0 : day.getMonth()) === today.getMonth() && (day == null ? void 0 : day.getDate()) === today.getDate();
+            const isActive = !isRange ? (day == null ? void 0 : day.getFullYear()) === activeDate.getFullYear() && (day == null ? void 0 : day.getMonth()) === activeDate.getMonth() && (day == null ? void 0 : day.getDate()) === activeDate.getDate() : activeDate == null ? void 0 : activeDate.some(
+              (date) => (date == null ? void 0 : date.getFullYear()) === (day == null ? void 0 : day.getFullYear()) && (date == null ? void 0 : date.getMonth()) === (day == null ? void 0 : day.getMonth()) && (date == null ? void 0 : date.getDate()) === (day == null ? void 0 : day.getDate())
+            );
+            const isDisabled = disabled || day && day.getTime() > (maxDate == null ? void 0 : maxDate.getTime()) || day && day.getTime() < (minDate == null ? void 0 : minDate.getTime()) || day && (disabledDates == null ? void 0 : disabledDates.some(
+              (date) => (date == null ? void 0 : date.getFullYear()) === (day == null ? void 0 : day.getFullYear()) && (date == null ? void 0 : date.getMonth()) === (day == null ? void 0 : day.getMonth()) && (date == null ? void 0 : date.getDate()) === (day == null ? void 0 : day.getDate())
+            )) || false;
+            const isInRange = isRange && activeDate[0] && dateEndHovered && day && day.getTime() >= activeDate[0].getTime() && day.getTime() < dateEndHovered.getTime() || isRange && activeDate[0] && activeDate[1] && day && day.getTime() >= activeDate[0].getTime() && day.getTime() < activeDate[1].getTime();
+            return /* @__PURE__ */ React.createElement(
+              "td",
+              {
+                key: `${daysId}_${dayIndex}_${day == null ? void 0 : day.getTime()}`,
+                className: clsx(
+                  calendarWeekDayClasses,
+                  isActive && calendarActiveDateClasses,
+                  isDisabled && calendarWeekDayDisabledClasses,
+                  isDateStart && dateStartClasses,
+                  isDateEnd && dateEndClasses,
+                  isInRange && dateInRangeClasses,
+                  dayIndex === 0 && rondedLeftClasses,
+                  dayIndex === 6 && rondedRightClasses
+                )
+              },
+              day && ind !== false && /* @__PURE__ */ React.createElement(
+                "button",
+                {
+                  disabled: isDisabled,
+                  type: "button",
+                  onKeyDown: (e) => onKeyDownDay(e, ind, isDisabled),
+                  tabIndex: isActive ? 0 : -1,
+                  "aria-selected": isActive ? "true" : "false",
+                  "data-timestamp": day == null ? void 0 : day.getTime(),
+                  ref: (el) => {
+                    if (el) refsDays.current[ind] = el;
+                  },
+                  onMouseUp: (e) => !isDisabled && handlePressEnterInDays(e),
+                  className: clsx(isDisabled && isDisabledClass, isActive && isActiveClasses),
+                  onMouseOver: () => {
+                    if (!isRange) return;
+                    if (activeDate[0] !== void 0 && activeDate.length === 1) setDateEndHovered(day);
+                  },
+                  onClick: () => {
+                    refDayFocused.current = refsDays.current[ind];
+                  },
+                  ...isToday && { "data-today": "true" },
+                  ...isActive && { "data-active-date": "true" }
+                },
+                day.getDate()
+              )
+            );
+          })
+        );
+      }))
+    );
+  }
+);
+Calendar.displayName = "Calendar" /* Calendar */;
+var Calendar_default = Calendar;
+
+export {
+  Calendar_default
+};

package/lib/chunk-JDLZGLZJ.mjs

@@ -0,0 +1,87 @@
+"use client";
+import {
+  Text_native_default
+} from "./chunk-MVQ252OA.mjs";
+import {
+  Icon_native_default
+} from "./chunk-UPP3GX33.mjs";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+
+// components/divider/Divider.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var Divider = React.forwardRef(({ content, unboxed, marginless, iconName, ...others }, ref) => {
+  const [textWidth, setTextWidth] = React.useState(0);
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const dividerColor = getColorStyle("NEUTRAL" /* NEUTRAL */);
+  const styles = StyleSheet.create({
+    divider: {
+      marginBottom: 16,
+      marginTop: 16,
+      borderBottomColor: dividerColor,
+      borderBottomWidth: 1,
+      width: "100%",
+      alignSelf: (unboxed || marginless) && "stretch" || "auto"
+    },
+    dividerContent: {
+      borderBottomColor: dividerColor,
+      borderBottomWidth: 1,
+      alignSelf: "center",
+      justifyContent: "center",
+      width: `${(containerWidth - (textWidth + 16)) / 2 / containerWidth * 100}%`
+    },
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      maxWidth: "100%"
+    },
+    content: {
+      justifyContent: "center",
+      backgroundColor: "transparent",
+      borderRadius: iconName ? 50 : 0,
+      padding: iconName ? 6 : 0
+    },
+    textContent: {
+      textAlign: "center",
+      color: getColorStyle("MAIN" /* MAIN */)
+    }
+  });
+  const ContentDivider = React.useMemo(() => {
+    if (content) return /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.textContent }, content);
+    if (iconName && !content) return /* @__PURE__ */ React.createElement(Icon_native_default, { name: iconName, color: "MAIN" /* MAIN */, testId: "icon-id" });
+  }, [content, iconName]);
+  if (content || iconName) {
+    return /* @__PURE__ */ React.createElement(
+      View,
+      {
+        ref,
+        style: styles.container,
+        onLayout: (event) => {
+          setContainerWidth(event.nativeEvent.layout.width);
+        }
+      },
+      /* @__PURE__ */ React.createElement(View, { style: styles.dividerContent, ...others }),
+      /* @__PURE__ */ React.createElement(
+        View,
+        {
+          style: styles.content,
+          onLayout: (event) => {
+            setTextWidth(event.nativeEvent.layout.width);
+          }
+        },
+        ContentDivider
+      ),
+      /* @__PURE__ */ React.createElement(View, { style: styles.dividerContent, ...others })
+    );
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: styles.divider, ...others });
+});
+Divider.displayName = "Divider" /* Divider */;
+var Divider_native_default = Divider;
+
+export {
+  Divider_native_default
+};

package/lib/{chunk-YLNTACMP.mjs → chunk-JIGVLQZM.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   TimelineMarker_default
-} from "./chunk-6NWZNU3P.mjs";
+} from "./chunk-5UAX67EN.mjs";
 
 // components/timeline/marker/index.ts
 var marker_default = TimelineMarker_default;

package/lib/{chunk-YIOEE4WJ.mjs → chunk-JPWTOBGP.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-SGAZRZIK.mjs";
+} from "./chunk-ALGX47MZ.mjs";
 import {
   getColorClassName
-} from "./chunk-JOSZ4COK.mjs";
+} from "./chunk-7VSJ3RTI.mjs";
 import {
   is
 } from "./chunk-SWVRRUW7.mjs";
@@ -31,10 +31,7 @@ var Tag = React.forwardRef(
         className
       )
     );
-    const tagIconClassNames = hashClass(
-      styled,
-      clsx(variant && is(getColorClassName(variant)))
-    );
+    const tagIconClassNames = clsx(variant && is(getColorClassName(variant)));
     return /* @__PURE__ */ React.createElement("span", { ref, id, className: tagClassNames, ...others }, iconName && /* @__PURE__ */ React.createElement(Icon_default, { className: tagIconClassNames, name: iconName }), label);
   }
 );

package/lib/chunk-K5D3QU3U.mjs

@@ -0,0 +1,137 @@
+"use client";
+import {
+  Text_native_default
+} from "./chunk-MVQ252OA.mjs";
+import {
+  Icon_native_default
+} from "./chunk-UPP3GX33.mjs";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+
+// components/pagination/Pagination.native.tsx
+import React, { useEffect, useRef, useState } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+var Pagination = React.forwardRef(({ length, defaultPage = 1, onClick, ...others }, ref) => {
+  const [currentPage, setCurrentPage] = useState(defaultPage);
+  const [arrayPage] = useState(Array.from(Array(length + 1).keys()));
+  const prevCurrentPage = useRef(currentPage);
+  const [pager, setPager] = useState({
+    currentPage,
+    length,
+    endPage: length + 1,
+    pages: arrayPage
+  });
+  useEffect(() => {
+    let startPage = 1;
+    let endPage = 5;
+    if (length <= 5) {
+      startPage = 1;
+      endPage = length;
+    } else {
+      if (currentPage <= 3) {
+        startPage = 1;
+        endPage = 5;
+      } else if (currentPage + 3 >= length) {
+        startPage = length - 4;
+        endPage = length;
+      } else {
+        startPage = currentPage - 2;
+        endPage = currentPage + 2;
+      }
+    }
+    const pages = [...Array(endPage + 1 - startPage).keys()].map((i) => startPage + i);
+    setPager({
+      currentPage,
+      length,
+      endPage,
+      pages
+    });
+  }, [currentPage, length]);
+  useEffect(() => {
+    if (onClick && prevCurrentPage.current !== currentPage) {
+      onClick(pager);
+    }
+  }, [currentPage]);
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-around"
+    },
+    text: {
+      color: getColorStyle("FONT" /* FONT */),
+      alignSelf: "center",
+      lineHeight: 0
+    },
+    textCurrent: {
+      color: getColorStyle("WHITE" /* BACKGROUND */),
+      alignSelf: "center",
+      lineHeight: 0
+    },
+    rounded: {
+      backgroundColor: getColorStyle("MAIN" /* MAIN */),
+      width: 26,
+      height: 26,
+      borderRadius: 26,
+      justifyContent: "center"
+    },
+    textContainer: {
+      backgroundColor: getColorStyle("WHITE" /* BACKGROUND */),
+      width: 26,
+      height: 26,
+      borderRadius: 26,
+      justifyContent: "center"
+    },
+    currentPage: {
+      color: getColorStyle("MAIN" /* MAIN */)
+    },
+    dotsLeft: {
+      color: getColorStyle("WHITE" /* BACKGROUND */),
+      marginRight: 12
+    },
+    dotsRight: {
+      color: getColorStyle("WHITE" /* BACKGROUND */),
+      marginRight: -12
+    }
+  });
+  return /* @__PURE__ */ React.createElement(View, { ref, style: styles.container, ...others }, /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress: () => {
+        if (currentPage !== 1) {
+          setCurrentPage(currentPage - 1);
+          prevCurrentPage.current = currentPage - 1;
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-arrow-left" /* ARROW_LEFT */, size: "small" /* SMALL */, color: "MAIN" /* MAIN */ })
+  ), /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", alignItems: "center" } }, !pager.pages.includes(1) && /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.dotsLeft }, "\u2026")), pager.pages.map((pageNumber) => /* @__PURE__ */ React.createElement(View, { key: pageNumber }, /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: currentPage === pageNumber ? styles.rounded : styles.textContainer,
+      onPress: () => {
+        setCurrentPage(pageNumber);
+        prevCurrentPage.current = pageNumber;
+      }
+    },
+    /* @__PURE__ */ React.createElement(Text_native_default, { style: currentPage === pageNumber ? styles.textCurrent : styles.text }, pageNumber)
+  ))), !pager.pages.includes(length) && /* @__PURE__ */ React.createElement(View, { style: { marginRight: 15 } }, /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.dotsRight }, "\u2026"))), /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress: () => {
+        if (currentPage !== Math.max(length)) {
+          setCurrentPage(currentPage + 1);
+          prevCurrentPage.current = currentPage + 1;
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-arrow-right" /* ARROW_RIGHT */, size: "small" /* SMALL */, color: "MAIN" /* MAIN */ })
+  ));
+});
+Pagination.displayName = "Pagination" /* Pagination */;
+var Pagination_native_default = Pagination;
+
+export {
+  Pagination_native_default
+};

package/lib/{chunk-4NONUZBG.mjs → chunk-K6DW4JHP.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-JLQUIKZX.mjs";
 import {
   getColorStyle
-} from "./chunk-VI2KFLCZ.mjs";
+} from "./chunk-E4YRRUI3.mjs";
 import {
   isIOS
 } from "./chunk-R6PFY5VS.mjs";