@trilogy-ds/react 0.0.20-esm-cjs → 0.0.21-esm-cjs

package/lib/components/datepicker/DatePicker.native.js

@@ -34,8 +34,1331 @@ __export(DatePicker_native_exports, {
   default: () => DatePicker_native_default
 });
 module.exports = __toCommonJS(DatePicker_native_exports);
-var import_react = __toESM(require("react"));
-var DatePicker = () => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+
+// context/providerStates/index.tsx
+var import_react = require("react");
+var StatesContext = (0, import_react.createContext)({
+  inverted: false,
+  active: false,
+  flat: false
+});
+
+// objects/facets/Color/index.native.tsx
+var import_react2 = require("react");
+var colors = {
+  ["WHITE" /* BACKGROUND */]: ["#fff", "white", "main"],
+  ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
+  ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
+  ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["ACCENT_FADE" /* ACCENT_FADE */]: ["#faebe3", "accent-fade", "white"],
+  ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
+  ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
+  ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
+  ["SUCCESS_FADE" /* SUCCESS_FADE */]: ["#cae8ca", "success-fade", "white"],
+  ["INFO" /* INFO */]: ["#1A688A", "info", "white"],
+  ["INFO_FADE" /* INFO_FADE */]: ["#c8dbec", "info-fade", "white"],
+  ["WARNING" /* WARNING */]: ["#FFBB33", "warning", "white"],
+  ["WARNING_FADE" /* WARNING_FADE */]: ["#ecdbc6", "warning-fade", "white"],
+  ["ERROR" /* ERROR */]: ["#D42D02", "error", "white"],
+  ["ERROR_FADE" /* ERROR_FADE */]: ["#eecccc", "error-fade", "white"],
+  ["DISABLED" /* DISABLED */]: ["#646464", "disabled", "white"],
+  ["DISABLED_FADE" /* DISABLED_FADE */]: ["#D1D1D1", "disabled-fade", "white"],
+  ["NEUTRAL" /* NEUTRAL */]: ["#707070", "grey", "white"],
+  ["NEUTRAL_FADE" /* NEUTRAL_FADE */]: ["#F4F4F4", "grey-fade", "white"],
+  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"]
+};
+var getColorStyle = (trilogyColor) => {
+  if (typeof navigator !== "undefined" && navigator.userAgent === void 0) {
+    const { theme } = (0, import_react2.useContext)(TrilogyThemeContext);
+    const colorsStyle = (theme == null ? void 0 : theme.colors) || colors;
+    const colorArray = colorsStyle[trilogyColor] || colorsStyle.default;
+    if (trilogyColor === "transparent") return "transparent";
+    if (!trilogyColor || !colors[trilogyColor]) {
+      return colorsStyle.default;
+    }
+    return colorArray[0];
+  } else {
+    if (trilogyColor === "transparent") return "transparent";
+    return colors[trilogyColor][0] || colors["MAIN" /* MAIN */][0];
+  }
+};
+
+// context/providerTheme/index.native.tsx
+var import_react3 = __toESM(require("react"));
+var defaultIcons = {};
+var defaultTheme = {
+  icons: defaultIcons,
+  colors,
+  fontFamily: { regular: "poppins-regular", medium: "poppins-medium", bold: "poppins-semibold" }
+};
+var defaultContextValue = {
+  theme: defaultTheme,
+  setTheme: () => void 0
+};
+var TrilogyThemeContext = import_react3.default.createContext(defaultContextValue);
+
+// helpers/device/index.native.ts
+var import_react_native = require("react-native");
+var Device = /* @__PURE__ */ ((Device2) => {
+  Device2["Browser"] = "browser";
+  Device2["Server"] = "server";
+  Device2["Native"] = "native";
+  return Device2;
+})(Device || {});
+var { Browser, Server, Native } = Device;
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+var canUseNative = typeof navigator != "undefined" && navigator.product == "ReactNative";
+var device = canUseNative ? Native : canUseDOM ? Browser : Server;
+var SSRObjectDefined = {
+  isBrowser: device === Browser,
+  isServer: device === Server,
+  isNative: device === Native,
+  device,
+  canUseWorkers: typeof Worker !== "undefined",
+  canUseEventListeners: device === Browser && !!window.addEventListener,
+  canUseViewport: device === Browser && !!window.screen
+};
+var assign = (...args) => Object.assign({}, ...args);
+var values = (obj) => Object.values(obj);
+var toArrayObject = () => assign((values(SSRObjectDefined), SSRObjectDefined));
+var SSRObject = toArrayObject();
+var isAndroid = import_react_native.Platform.OS === "android";
+var isIOS = import_react_native.Platform.OS === "ios";
+
+// objects/facets/Alignable/index.ts
+var getAlignStyle = (alignType) => {
+  switch (alignType) {
+    case "ALIGNED_CENTER":
+      return "center";
+    case "ALIGNED_START":
+      return "flex-start";
+    case "ALIGNED_END":
+      return "flex-end";
+    default:
+      return "flex-start";
+  }
+};
+
+// components/icon/Icon.native.tsx
+var import_react5 = __toESM(require("react"));
+var import_react_native3 = require("react-native");
+
+// components/skeleton/Skeleton.native.tsx
+var import_react4 = __toESM(require("react"));
+var import_react_native2 = require("react-native");
+var Skeleton = ({
+  style,
+  width = "100%",
+  height = 20,
+  backgroundColor = "#E1E9EE",
+  shimmerColor = "#F7F8F8",
+  duration = 1200,
+  borderRadius = 4,
+  children,
+  testID
+}) => {
+  const shimmerValue = (0, import_react4.useRef)(new import_react_native2.Animated.Value(0)).current;
+  const [containerWidth, setContainerWidth] = import_react4.default.useState(200);
+  (0, import_react4.useEffect)(() => {
+    const shimmerAnimation = import_react_native2.Animated.loop(
+      import_react_native2.Animated.timing(shimmerValue, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true
+      }),
+      { iterations: -1 }
+    );
+    shimmerAnimation.start();
+    return () => shimmerAnimation.stop();
+  }, [shimmerValue, duration]);
+  const translateX = shimmerValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-containerWidth, containerWidth]
+  });
+  const opacity = shimmerValue.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0.3, 0.8, 0.3]
+  });
+  const containerStyle = {
+    width: children ? void 0 : width,
+    height: children ? void 0 : height,
+    backgroundColor,
+    borderRadius,
+    overflow: "hidden",
+    alignSelf: children ? "flex-start" : void 0,
+    ...style
+  };
+  const handleLayout = (event) => {
+    const { width: layoutWidth } = event.nativeEvent.layout;
+    setContainerWidth(layoutWidth);
+  };
+  if (children) {
+    return /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { style: containerStyle, testID, onLayout: handleLayout }, /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { style: { opacity: 0 } }, children), /* @__PURE__ */ import_react4.default.createElement(
+      import_react_native2.Animated.View,
+      {
+        style: [
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: containerWidth * 0.7,
+            height: "100%",
+            backgroundColor: shimmerColor,
+            opacity,
+            transform: [{ translateX }]
+          }
+        ]
+      }
+    ));
+  }
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { style: containerStyle, testID, onLayout: handleLayout }, /* @__PURE__ */ import_react4.default.createElement(
+    import_react_native2.Animated.View,
+    {
+      style: [
+        {
+          width: containerWidth * 0.7,
+          height: "100%",
+          backgroundColor: shimmerColor,
+          opacity,
+          transform: [{ translateX }]
+        }
+      ]
+    }
+  ));
 };
+var Skeleton_native_default = Skeleton;
+
+// components/icon/Icon.native.tsx
+var import_css = require("react-native-svg/css");
+var Icon = import_react5.default.forwardRef(
+  ({ size, name, circled, stretched, color, backgroundColor, onClick, align, skeleton, testId, ...others }, ref) => {
+    const {
+      theme: { icons }
+    } = (0, import_react5.useContext)(TrilogyThemeContext);
+    const statesContext = (0, import_react5.useContext)(StatesContext);
+    const style = {};
+    const defaultSize = size === "huge" /* HUGE */ && 66 || size === "large" /* LARGE */ && 44 || size === "medium" /* MEDIUM */ && 30 || size === "small" /* SMALL */ && 20 || size === "smaller" /* SMALLER */ && 16 || 20;
+    const iconColor = color && getColorStyle(color) || statesContext.inverted && getColorStyle("WHITE" /* BACKGROUND */) || getColorStyle("MAIN" /* MAIN */);
+    const background = backgroundColor && getColorStyle(backgroundColor) || circled && getColorStyle("MAIN" /* MAIN */) || "";
+    const iconSkeletonRadius = size === "huge" /* HUGE */ && 50 || size === "large" /* LARGE */ && 35 || size === "medium" /* MEDIUM */ && 25 || size === "small" /* SMALL */ && 15 || size === "smaller" /* SMALLER */ && 10 || 15;
+    const circledWidth = size === "huge" /* HUGE */ && 99 || size === "large" /* LARGE */ && 66 || size === "medium" /* MEDIUM */ && 48 || size === "small" /* SMALL */ && 32 || size === "smaller" /* SMALLER */ && 38 || 32;
+    const styles = import_react_native3.StyleSheet.create({
+      rootView: {
+        alignSelf: getAlignStyle(align)
+      },
+      iconCircled: {
+        alignSelf: "center",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      icon: {
+        transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
+      },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
+      stretched: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: circledWidth + 15,
+        height: circledWidth,
+        backgroundColor: iconColor,
+        borderTopRightRadius: 10,
+        transform: isIOS ? stretched && [{ skewX: "-20deg" }] || [{ skewX: "0deg" }] : []
+      },
+      skeleton: {
+        width: circledWidth,
+        height: circledWidth,
+        borderRadius: iconSkeletonRadius,
+        backgroundColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
+        overflow: "hidden"
+      },
+      circled: {
+        width: circledWidth,
+        height: circledWidth,
+        borderRadius: circledWidth,
+        backgroundColor: background,
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    });
+    const IconSkeleton = () => /* @__PURE__ */ import_react5.default.createElement(
+      Skeleton_native_default,
+      {
+        style: styles.skeleton,
+        width: circledWidth,
+        height: circledWidth,
+        borderRadius: iconSkeletonRadius,
+        testID: "skeleton-id"
+      }
+    );
+    if (skeleton) {
+      return /* @__PURE__ */ import_react5.default.createElement(IconSkeleton, null);
+    }
+    let iconView = /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, null);
+    if (name && icons) {
+      if (stretched && !circled) {
+        iconView = /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.stretched, testID: `${testId}-stretched` }, /* @__PURE__ */ import_react5.default.createElement(
+          import_css.WithLocalSvg,
+          {
+            style: [styles.iconCircled, styles.icon],
+            asset: icons[name.toString().replace("tri-picto-", "").replace("tri-", "")],
+            width: defaultSize,
+            height: defaultSize,
+            color: getColorStyle("WHITE" /* BACKGROUND */)
+          }
+        ));
+      } else if (circled) {
+        iconView = /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.circled, testID: `${testId}-circled` }, /* @__PURE__ */ import_react5.default.createElement(
+          import_css.WithLocalSvg,
+          {
+            style: [styles.iconCircled, styles.icon],
+            asset: icons[name.toString().replace("tri-picto-", "").replace("tri-", "")],
+            width: defaultSize,
+            height: defaultSize,
+            color: iconColor
+          }
+        ));
+      } else {
+        iconView = /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react5.default.createElement(
+          import_css.WithLocalSvg,
+          {
+            style: [styles.icon, style],
+            asset: icons[name.toString().replace("tri-picto-", "").replace("tri-", "")],
+            width: defaultSize,
+            height: defaultSize,
+            color: iconColor
+          }
+        ));
+      }
+    }
+    return onClick ? /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.rootView, testID: testId, ref }, /* @__PURE__ */ import_react5.default.createElement(
+      import_react_native3.TouchableOpacity,
+      {
+        style: { width: "100%" },
+        onPress: onClick,
+        activeOpacity: 0.85,
+        testID: `${testId}-pressable`
+      },
+      iconView
+    )) : /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.rootView, testID: testId, ref }, iconView);
+  }
+);
+Icon.displayName = "Icon" /* Icon */;
+var Icon_native_default = Icon;
+
+// objects/Typography/TypographyAlign/index.ts
+var setTypographyAlign = (typo = "left") => {
+  return typo && !Array.isArray(typo) && typo === "has-text-centered" /* TEXT_CENTERED */ && "center" || typo && Array.isArray(typo) && typo.includes("has-text-centered" /* TEXT_CENTERED */) && "center" || typo && !Array.isArray(typo) && typo === "has-text-left" /* TEXT_LEFT */ && "left" || typo && Array.isArray(typo) && typo.includes("has-text-left" /* TEXT_LEFT */) && "left" || typo && !Array.isArray(typo) && typo === "has-text-right" /* TEXT_RIGHT */ && "right" || typo && Array.isArray(typo) && typo.includes("has-text-right" /* TEXT_RIGHT */) && "right" || typo && !Array.isArray(typo) && typo === "has-text-justified" /* TEXT_JUSTIFIED */ && "justify" || typo && Array.isArray(typo) && typo.includes("has-text-justified" /* TEXT_JUSTIFIED */) && "justify" || "left";
+};
+
+// objects/Typography/TypographyBold/index.native.tsx
+var import_react6 = require("react");
+var getTypographyBoldStyle = (typo) => {
+  var _a, _b, _c, _d;
+  const { theme } = (0, import_react6.useContext)(TrilogyThemeContext);
+  const currentTypo = Array.isArray(typo) ? typo : [typo];
+  switch (true) {
+    case (typo && currentTypo.includes("has-text-weight-medium" /* TEXT_WEIGHT_MEDIUM */)):
+      return ((_a = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _a.medium) || "poppins-medium";
+    case (typo && currentTypo.includes("has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */)):
+      return ((_b = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _b.bold) || "poppins-semibold";
+    case (typo && currentTypo.includes("has-text-weight-bold" /* TEXT_WEIGHT_BOLD */)):
+      return ((_c = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _c.speak) || "poppins-semibold";
+    default:
+      return ((_d = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _d.regular) || "poppins-regular";
+  }
+};
+
+// objects/Typography/TypographyColor/index.native.ts
+var setTypographyColor = (typo = "", inverted = false, loading = false) => {
+  return loading ? "transparent" : (Array.isArray(typo) && typo.includes("has-text-disabled" /* TEXT_DISABLED */) ? getColorStyle("DISABLED" /* DISABLED */) : typo === "has-text-disabled" /* TEXT_DISABLED */ && getColorStyle("DISABLED" /* DISABLED */)) || (Array.isArray(typo) && typo.includes("has-text-accent" /* TEXT_ACCENT */) ? getColorStyle("ACCENT" /* ACCENT */) : typo === "has-text-accent" /* TEXT_ACCENT */ && getColorStyle("ACCENT" /* ACCENT */)) || (Array.isArray(typo) && typo.includes("has-text-main" /* TEXT_MAIN */) ? getColorStyle("MAIN" /* MAIN */) : typo === "has-text-main" /* TEXT_MAIN */ && getColorStyle("MAIN" /* MAIN */)) || (Array.isArray(typo) && typo.includes("has-text-info" /* TEXT_INFO */) ? getColorStyle("INFO" /* INFO */) : typo === "has-text-info" /* TEXT_INFO */ && getColorStyle("INFO" /* INFO */)) || (Array.isArray(typo) && typo.includes("has-text-success" /* TEXT_SUCCESS */) ? getColorStyle("SUCCESS" /* SUCCESS */) : typo === "has-text-success" /* TEXT_SUCCESS */ && getColorStyle("SUCCESS" /* SUCCESS */)) || (Array.isArray(typo) && typo.includes("has-text-warning" /* TEXT_WARNING */) ? getColorStyle("WARNING" /* WARNING */) : typo === "has-text-warning" /* TEXT_WARNING */ && getColorStyle("WARNING" /* WARNING */)) || (Array.isArray(typo) && typo.includes("has-text-error" /* TEXT_ERROR */) ? getColorStyle("ERROR" /* ERROR */) : typo === "has-text-error" /* TEXT_ERROR */ && getColorStyle("ERROR" /* ERROR */)) || (Array.isArray(typo) && typo.includes("has-text-grey" /* TEXT_NEUTRAL */) ? getColorStyle("NEUTRAL" /* NEUTRAL */) : typo === "has-text-grey" /* TEXT_NEUTRAL */ && getColorStyle("NEUTRAL" /* NEUTRAL */)) || (Array.isArray(typo) && typo.includes("has-text-white" /* TEXT_WHITE */) ? getColorStyle("WHITE" /* BACKGROUND */) : typo === "has-text-white" /* TEXT_WHITE */ && getColorStyle("WHITE" /* BACKGROUND */)) || inverted && getColorStyle("WHITE" /* BACKGROUND */) || getColorStyle("MAIN" /* MAIN */);
+};
+
+// components/text/Text.native.tsx
+var import_react7 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+var Text = import_react7.default.forwardRef(
+  ({ children, level, style, inverted, typo, skeleton, accessibilityLabel, numberOfLines = 0, ...others }, ref) => {
+    const statesContext = (0, import_react7.useContext)(StatesContext);
+    const textLevels = (level2) => {
+      return level2 && level2 == 1 /* ONE */ && 16 || level2 && level2 == 2 /* TWO */ && 14 || level2 && level2 == 3 /* THREE */ && 12 || level2 && level2 == 4 /* FOUR */ && 10 || 14;
+    };
+    const styles = import_react_native4.StyleSheet.create({
+      text: {
+        fontFamily: getTypographyBoldStyle(typo),
+        fontSize: textLevels(level),
+        color: setTypographyColor(typo, inverted || statesContext.inverted, skeleton),
+        textAlign: setTypographyAlign(typo),
+        lineHeight: textLevels(level) * 1.2,
+        textDecorationLine: "none",
+        alignSelf: setTypographyAlign(typo) === "left" && "flex-start" || setTypographyAlign(typo) === "center" && "center" || setTypographyAlign(typo) === "right" && "flex-end" || "flex-start"
+      },
+      skeleton: {
+        minWidth: 10,
+        alignSelf: setTypographyAlign(typo) === "left" && "flex-start" || setTypographyAlign(typo) === "center" && "center" || setTypographyAlign(typo) === "right" && "flex-end" || "flex-start",
+        borderRadius: level && level == 1 /* ONE */ && 7 || level && level == 2 /* TWO */ && 7 || level && level == 3 /* THREE */ && 5 || 3,
+        borderWidth: 0.1,
+        borderColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
+        overflow: "hidden",
+        height: textLevels(level)
+      }
+    });
+    const textAccessibilityLabel = accessibilityLabel ? accessibilityLabel : typeof children === "string" ? children : void 0;
+    let textView = /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native4.Text,
+      {
+        ref,
+        numberOfLines,
+        ellipsizeMode: "tail",
+        maxFontSizeMultiplier: 1.3,
+        accessible: !!textAccessibilityLabel,
+        accessibilityLabel: textAccessibilityLabel,
+        style: [styles.text, style],
+        ...others
+      },
+      children
+    );
+    if (skeleton) {
+      textView = /* @__PURE__ */ import_react7.default.createElement(
+        Skeleton_native_default,
+        {
+          style: styles.skeleton,
+          height: textLevels(level),
+          borderRadius: level && level == 1 /* ONE */ && 7 || level && level == 2 /* TWO */ && 7 || level && level == 3 /* THREE */ && 5 || 3
+        },
+        textView
+      );
+    }
+    return textView;
+  }
+);
+Text.displayName = "Text" /* Text */;
+var Text_native_default = Text;
+
+// components/calendar/Calendar.native.tsx
+var import_calendar = __toESM(require("@trilogy-ds/locales/lib/calendar"));
+var import_react8 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
+var days = [
+  import_calendar.default.days[1],
+  import_calendar.default.days[2],
+  import_calendar.default.days[3],
+  import_calendar.default.days[4],
+  import_calendar.default.days[5],
+  import_calendar.default.days[6],
+  import_calendar.default.days[0]
+];
+var months = [...import_calendar.default.months];
+var currentDate = /* @__PURE__ */ new Date();
+var checkIsRange = (date) => {
+  return !(date instanceof Date);
+};
+var Calendar = import_react8.default.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 [visibleMonth, setVisibleMonth] = import_react8.default.useState(
+      value instanceof Date ? value : value[0] || currentDate
+    );
+    const [activeDate, setActiveDate] = import_react8.default.useState(value);
+    const [dateEndHovered, setDateEndHovered] = import_react8.default.useState();
+    const [showMonthPicker, setShowMonthPicker] = import_react8.default.useState(false);
+    const [showYearPicker, setShowYearPicker] = import_react8.default.useState(false);
+    const backgroundColor = getColorStyle("WHITE" /* BACKGROUND */);
+    const shadowColor = getColorStyle("DISABLED" /* DISABLED */);
+    const disabledFadeColor = getColorStyle("DISABLED_FADE" /* DISABLED_FADE */);
+    const mainColor = getColorStyle("MAIN" /* MAIN */);
+    const mainFadeColor = getColorStyle("MAIN_FADE" /* MAIN_FADE */);
+    const disabledColor = getColorStyle("DISABLED" /* DISABLED */);
+    const styles = import_react8.default.useMemo(
+      () => import_react_native5.StyleSheet.create({
+        calendar: {
+          backgroundColor,
+          borderRadius: 8,
+          padding: 24,
+          shadowColor,
+          shadowOffset: {
+            width: 0,
+            height: 2
+          },
+          shadowOpacity: 0.2,
+          shadowRadius: 8,
+          elevation: 4,
+          width: "85%",
+          alignSelf: "center"
+        },
+        header: {
+          alignContent: "center",
+          marginBottom: 16
+        },
+        headerRow: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 16,
+          paddingBottom: 16
+        },
+        navButton: {
+          width: 36,
+          height: 36,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 4,
+          backgroundColor: "transparent"
+        },
+        iconWrapper: {
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        disabledButton: {
+          opacity: 0.5
+        },
+        monthYearContainer: {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        dropdownContainer: {
+          flexDirection: "row",
+          gap: 12,
+          justifyContent: "center"
+        },
+        monthSelector: {
+          paddingHorizontal: 8,
+          paddingVertical: 4,
+          backgroundColor,
+          borderRadius: 4,
+          borderWidth: 1,
+          borderColor: disabledFadeColor,
+          width: 80,
+          alignItems: "center",
+          height: 30,
+          justifyContent: "center"
+        },
+        yearSelector: {
+          paddingHorizontal: 8,
+          paddingVertical: 4,
+          backgroundColor,
+          borderRadius: 4,
+          borderWidth: 1,
+          borderColor: disabledFadeColor,
+          width: 80,
+          alignItems: "center",
+          height: 30,
+          justifyContent: "center"
+        },
+        selectorContent: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%"
+        },
+        selectorText: {
+          fontSize: 14,
+          fontWeight: "500",
+          color: "#495057",
+          flex: 1,
+          width: "100%"
+        },
+        dropdownIcon: {
+          marginLeft: 4,
+          width: 12,
+          height: 12,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        daysLabelRow: {
+          flexDirection: "row",
+          marginBottom: 8,
+          justifyContent: "space-between"
+        },
+        dayLabel: {
+          flex: 1,
+          alignItems: "center",
+          paddingVertical: import_react_native5.Platform.OS === "android" ? 6 : 4,
+          height: import_react_native5.Platform.OS === "android" ? 42 : 36,
+          justifyContent: "center",
+          maxWidth: import_react_native5.Platform.OS === "android" ? 42 : 36,
+          minWidth: import_react_native5.Platform.OS === "android" ? 42 : 36
+        },
+        dayLabelText: {
+          fontSize: 12,
+          fontWeight: "600",
+          color: "#6c757d",
+          textTransform: "uppercase",
+          width: "100%"
+        },
+        body: {
+          gap: 8
+        },
+        weekRow: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginBottom: 0
+        },
+        emptyDay: {
+          flex: 1,
+          height: import_react_native5.Platform.OS === "android" ? 42 : 36,
+          alignItems: "center",
+          justifyContent: "center",
+          maxWidth: import_react_native5.Platform.OS === "android" ? 42 : 36,
+          minWidth: import_react_native5.Platform.OS === "android" ? 42 : 36
+        },
+        dayButton: {
+          flex: 1,
+          height: import_react_native5.Platform.OS === "android" ? 42 : 36,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 4,
+          backgroundColor: "transparent",
+          maxWidth: import_react_native5.Platform.OS === "android" ? 42 : 36,
+          minWidth: import_react_native5.Platform.OS === "android" ? 42 : 36
+        },
+        dayText: {
+          fontSize: 14,
+          fontWeight: "400",
+          color: "#212529",
+          width: "100%"
+        },
+        activeDay: {
+          backgroundColor: mainColor
+        },
+        activeDayText: {
+          color: backgroundColor,
+          fontWeight: "600",
+          width: "100%"
+        },
+        disabledDay: {
+          backgroundColor: disabledFadeColor,
+          opacity: 0.6
+        },
+        disabledDayText: {
+          color: disabledColor,
+          width: "100%"
+        },
+        dateStart: {
+          backgroundColor: mainColor,
+          borderTopLeftRadius: 8,
+          borderBottomLeftRadius: 8,
+          borderTopRightRadius: 4,
+          borderBottomRightRadius: 4
+        },
+        dateEnd: {
+          backgroundColor: mainColor,
+          borderTopRightRadius: 8,
+          borderBottomRightRadius: 8,
+          borderTopLeftRadius: 4,
+          borderBottomLeftRadius: 4
+        },
+        dateInRange: {
+          backgroundColor: mainFadeColor,
+          borderRadius: 0
+        },
+        roundedLeft: {
+          borderTopLeftRadius: 8,
+          borderBottomLeftRadius: 8
+        },
+        roundedRight: {
+          borderTopRightRadius: 8,
+          borderBottomRightRadius: 8
+        },
+        todayButton: {
+          borderWidth: 0,
+          backgroundColor: "transparent"
+        },
+        todayText: {
+          fontWeight: "600",
+          color: mainColor
+        },
+        modalOverlay: {
+          flex: 1,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        pickerContainer: {
+          backgroundColor,
+          borderRadius: 8,
+          maxHeight: 300,
+          width: 200,
+          shadowColor: "#000",
+          shadowOffset: {
+            width: 0,
+            height: 2
+          },
+          shadowOpacity: 0.25,
+          shadowRadius: 8,
+          elevation: 5
+        },
+        pickerScrollView: {
+          maxHeight: 300
+        },
+        pickerItem: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingHorizontal: 16,
+          paddingVertical: 12,
+          borderBottomWidth: 1,
+          borderBottomColor: backgroundColor
+        },
+        pickerItemSelected: {
+          backgroundColor: mainColor
+        },
+        pickerItemDisabled: {
+          opacity: 0.5
+        },
+        pickerItemText: {
+          fontSize: 16,
+          color: "#212529",
+          flex: 1,
+          lineHeight: 20
+        },
+        pickerItemTextSelected: {
+          color: "#ffffff",
+          fontWeight: "600"
+        },
+        pickerItemTextDisabled: {
+          color: "#6c757d"
+        }
+      }),
+      [backgroundColor, shadowColor, disabledFadeColor, mainColor, mainFadeColor, disabledColor]
+    );
+    const isRange = checkIsRange(activeDate);
+    const isNextDisabled = import_react8.default.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 = import_react8.default.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 = import_react8.default.useCallback((year, month) => {
+      const date = new Date(year, month, 1);
+      const days2 = [];
+      const firstDayOfMonth = (date.getDay() + 6) % 7;
+      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));
+      while (days2.length % 7 !== 0) {
+        days2.push(null);
+      }
+      for (let i = 0; i < days2.length; i += 7) allDays.push(days2.slice(i, i + 7));
+      return allDays;
+    }, []);
+    const yearsBetween = import_react8.default.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 = import_react8.default.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 = import_react8.default.useMemo(() => {
+      const minYear = minDate.getFullYear();
+      const maxYear = maxDate.getFullYear();
+      return Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i);
+    }, [minDate, maxDate, visibleMonth]);
+    const allDaysInMonth = import_react8.default.useMemo(() => {
+      const activeYear = visibleMonth.getFullYear();
+      const activeMonth = visibleMonth.getMonth();
+      return getAllDaysInMonth(activeYear, activeMonth);
+    }, [visibleMonth]);
+    const handleClickNextPrevMonth = import_react8.default.useCallback(
+      (month) => {
+        const nextMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + month, visibleMonth.getDate());
+        setVisibleMonth(nextMonth);
+        onMonthChange && onMonthChange(nextMonth);
+      },
+      [visibleMonth, onMonthChange]
+    );
+    const handleMonthSelect = import_react8.default.useCallback(
+      (selectedMonth) => {
+        const newDate = new Date(visibleMonth.getFullYear(), selectedMonth, visibleMonth.getDate());
+        setVisibleMonth(newDate);
+        onMonthChange && onMonthChange(newDate);
+      },
+      [visibleMonth, onMonthChange, minDate, maxDate]
+    );
+    const handleYearSelect = import_react8.default.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 handlePressDay = import_react8.default.useCallback(
+      (day) => {
+        if (readOnly) return;
+        const newDate = day;
+        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);
+      },
+      [onChange, readOnly, activeDate, isRange]
+    );
+    import_react8.default.useEffect(() => {
+      setActiveDate(value);
+      if (value instanceof Date) return setVisibleMonth(value);
+      if (!(value instanceof Date) && value[0]) {
+        if (value[1]) {
+          return setVisibleMonth(value[1]);
+        }
+        return setVisibleMonth(value[0]);
+      }
+    }, [value]);
+    const renderDayButton = (day, dayIndex) => {
+      if (!day) {
+        return /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { key: dayIndex, style: styles.emptyDay });
+      }
+      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__ */ import_react8.default.createElement(
+        import_react_native5.TouchableOpacity,
+        {
+          key: dayIndex,
+          disabled: isDisabled,
+          onPress: () => !isDisabled && handlePressDay(day),
+          onPressIn: () => {
+            if (!isRange) return;
+            if (activeDate[0] !== void 0 && activeDate.length === 1) {
+              setDateEndHovered(day);
+            }
+          },
+          onPressOut: () => {
+            if (isRange && activeDate.length === 1) {
+              setDateEndHovered(void 0);
+            }
+          },
+          accessible: true,
+          accessibilityRole: "button",
+          accessibilityState: {
+            selected: isActive,
+            disabled: isDisabled
+          },
+          style: [
+            styles.dayButton,
+            isToday && styles.todayButton,
+            isActive && styles.activeDay,
+            isDisabled && styles.disabledDay,
+            isInRange && styles.dateInRange,
+            isDateStart && styles.dateStart,
+            isDateEnd && styles.dateEnd,
+            dayIndex === 0 && styles.roundedLeft,
+            dayIndex === 6 && styles.roundedRight
+          ]
+        },
+        /* @__PURE__ */ import_react8.default.createElement(
+          Text_native_default,
+          {
+            typo: "has-text-centered" /* TEXT_CENTERED */,
+            style: [
+              styles.dayText,
+              isToday && styles.todayText,
+              isActive && styles.activeDayText,
+              isDisabled && styles.disabledDayText
+            ]
+          },
+          day.getDate()
+        )
+      );
+    };
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { ref, style: styles.calendar }, /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.header }, /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.headerRow }, /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native5.TouchableOpacity,
+      {
+        onPress: () => handleClickNextPrevMonth(-1),
+        disabled: isPrevDisabled,
+        accessible: true,
+        accessibilityRole: "button",
+        accessibilityState: { disabled: isPrevDisabled },
+        style: [styles.navButton, isPrevDisabled && styles.disabledButton]
+      },
+      /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.iconWrapper }, /* @__PURE__ */ import_react8.default.createElement(Icon_native_default, { name: "tri-arrow-left" }))
+    ), /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.monthYearContainer }, /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.dropdownContainer }, /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native5.TouchableOpacity,
+      {
+        style: styles.monthSelector,
+        accessible: true,
+        accessibilityRole: "button",
+        onPress: () => setShowMonthPicker(true)
+      },
+      /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.selectorContent }, /* @__PURE__ */ import_react8.default.createElement(Text_native_default, { typo: "has-text-centered" /* TEXT_CENTERED */, style: styles.selectorText }, months[visibleMonth.getMonth()]), /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.dropdownIcon }, /* @__PURE__ */ import_react8.default.createElement(Icon_native_default, { name: "tri-arrow-down" })))
+    ), /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native5.TouchableOpacity,
+      {
+        style: styles.yearSelector,
+        accessible: true,
+        accessibilityRole: "button",
+        onPress: () => setShowYearPicker(true)
+      },
+      /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.selectorContent }, /* @__PURE__ */ import_react8.default.createElement(Text_native_default, { typo: "has-text-centered" /* TEXT_CENTERED */, style: styles.selectorText }, visibleMonth.getFullYear()), /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.dropdownIcon }, /* @__PURE__ */ import_react8.default.createElement(Icon_native_default, { name: "tri-arrow-down" })))
+    ))), /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native5.TouchableOpacity,
+      {
+        onPress: () => handleClickNextPrevMonth(1),
+        disabled: isNextDisabled,
+        accessible: true,
+        accessibilityRole: "button",
+        accessibilityState: { disabled: isNextDisabled },
+        style: [styles.navButton, isNextDisabled && styles.disabledButton]
+      },
+      /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.iconWrapper }, /* @__PURE__ */ import_react8.default.createElement(Icon_native_default, { name: "tri-arrow-right" }))
+    )), /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.daysLabelRow }, days.map((day, index) => /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { key: index, style: styles.dayLabel }, /* @__PURE__ */ import_react8.default.createElement(Text_native_default, { typo: "has-text-centered" /* TEXT_CENTERED */, style: styles.dayLabelText }, day.slice(0, 1)))))), /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.body }, allDaysInMonth.map((week, weekIndex) => /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { key: weekIndex, style: styles.weekRow }, week.map((day, dayIndex) => renderDayButton(day, dayIndex))))), /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native5.Modal,
+      {
+        visible: showMonthPicker,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: () => setShowMonthPicker(false)
+      },
+      /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.modalOverlay }, /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native5.TouchableOpacity,
+        {
+          style: import_react_native5.StyleSheet.absoluteFillObject,
+          activeOpacity: 1,
+          onPress: () => setShowMonthPicker(false)
+        }
+      ), /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.pickerContainer }, /* @__PURE__ */ import_react8.default.createElement(import_react_native5.ScrollView, { style: styles.pickerScrollView }, months.map((monthName, monthIndex) => /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native5.TouchableOpacity,
+        {
+          key: monthIndex,
+          style: [
+            styles.pickerItem,
+            visibleMonth.getMonth() === monthIndex && styles.pickerItemSelected,
+            !availableMonths[monthIndex] && styles.pickerItemDisabled
+          ],
+          disabled: !availableMonths[monthIndex],
+          onPress: () => {
+            if (availableMonths[monthIndex]) {
+              handleMonthSelect(monthIndex);
+              setShowMonthPicker(false);
+            }
+          }
+        },
+        /* @__PURE__ */ import_react8.default.createElement(
+          Text_native_default,
+          {
+            typo: "has-text-left" /* TEXT_LEFT */,
+            style: [
+              styles.pickerItemText,
+              visibleMonth.getMonth() === monthIndex && styles.pickerItemTextSelected,
+              !availableMonths[monthIndex] && styles.pickerItemTextDisabled
+            ]
+          },
+          monthName
+        ),
+        visibleMonth.getMonth() === monthIndex && /* @__PURE__ */ import_react8.default.createElement(Icon_native_default, { name: "tri-check" })
+      )))))
+    ), /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native5.Modal,
+      {
+        visible: showYearPicker,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: () => setShowYearPicker(false)
+      },
+      /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.modalOverlay }, /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native5.TouchableOpacity,
+        {
+          style: import_react_native5.StyleSheet.absoluteFillObject,
+          activeOpacity: 1,
+          onPress: () => setShowYearPicker(false)
+        }
+      ), /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.pickerContainer }, /* @__PURE__ */ import_react8.default.createElement(import_react_native5.ScrollView, { style: styles.pickerScrollView }, yearsBetween.map((year) => /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native5.TouchableOpacity,
+        {
+          key: year.value,
+          style: [
+            styles.pickerItem,
+            visibleMonth.getFullYear() === year.value && styles.pickerItemSelected,
+            !availableYear.includes(year.value) && styles.pickerItemDisabled
+          ],
+          disabled: !availableYear.includes(year.value),
+          onPress: () => {
+            if (availableYear.includes(year.value)) {
+              handleYearSelect(year.value);
+              setShowYearPicker(false);
+            }
+          }
+        },
+        /* @__PURE__ */ import_react8.default.createElement(
+          Text_native_default,
+          {
+            typo: "has-text-left" /* TEXT_LEFT */,
+            style: [
+              styles.pickerItemText,
+              visibleMonth.getFullYear() === year.value && styles.pickerItemTextSelected,
+              !availableYear.includes(year.value) && styles.pickerItemTextDisabled
+            ]
+          },
+          String(year.value)
+        ),
+        visibleMonth.getFullYear() === year.value && /* @__PURE__ */ import_react8.default.createElement(Icon_native_default, { name: "tri-check" })
+      )))))
+    ));
+  }
+);
+Calendar.displayName = "Calendar" /* Calendar */;
+var Calendar_native_default = Calendar;
+
+// components/datepicker/DatePicker.native.tsx
+var import_react9 = __toESM(require("react"));
+var import_react_native6 = require("react-native");
+var DatePicker = (0, import_react9.forwardRef)(
+  ({
+    onChange,
+    value,
+    minDate,
+    maxDate,
+    label,
+    sample,
+    required,
+    help,
+    status,
+    disabled,
+    disabledDates,
+    testId,
+    name,
+    ...others
+  }, ref) => {
+    const [inputText, setInputText] = (0, import_react9.useState)("");
+    const [isCalendarVisible, setIsCalendarVisible] = (0, import_react9.useState)(false);
+    const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
+    const previousTextRef = (0, import_react9.useRef)("");
+    const calendarValue = value ? new Date(value) : void 0;
+    const formatDateForDisplay = (0, import_react9.useCallback)((dateString) => {
+      if (!dateString) return "";
+      try {
+        const date = new Date(dateString);
+        if (isNaN(date.getTime())) return "";
+        const day = date.getDate().toString().padStart(2, "0");
+        const month = (date.getMonth() + 1).toString().padStart(2, "0");
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+      } catch {
+        return "";
+      }
+    }, []);
+    const parseManualInput = (0, import_react9.useCallback)(
+      (input) => {
+        const cleaned = input.replace(/[^\d/]/g, "");
+        const dateRegex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
+        const match = cleaned.match(dateRegex);
+        if (!match) return null;
+        const [, day, month, year] = match;
+        const dayNum = parseInt(day, 10);
+        const monthNum = parseInt(month, 10);
+        const yearNum = parseInt(year, 10);
+        if (dayNum < 1 || dayNum > 31 || monthNum < 1 || monthNum > 12) {
+          return null;
+        }
+        const date = new Date(yearNum, monthNum - 1, dayNum);
+        if (date.getDate() !== dayNum || date.getMonth() !== monthNum - 1 || date.getFullYear() !== yearNum) {
+          return null;
+        }
+        if (minDate && date < new Date(minDate)) return null;
+        if (maxDate && date > new Date(maxDate)) return null;
+        const formattedMonth = monthNum.toString().padStart(2, "0");
+        const formattedDay = dayNum.toString().padStart(2, "0");
+        return `${yearNum}-${formattedMonth}-${formattedDay}`;
+      },
+      [minDate, maxDate]
+    );
+    const isDateInRange = (0, import_react9.useCallback)(
+      (date) => {
+        if (minDate && date < new Date(minDate)) return false;
+        if (maxDate && date > new Date(maxDate)) return false;
+        return true;
+      },
+      [minDate, maxDate]
+    );
+    const handleCalendarChange = (0, import_react9.useCallback)(
+      (selectedDate) => {
+        const date = selectedDate;
+        if (!isDateInRange(date)) return;
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, "0");
+        const day = date.getDate().toString().padStart(2, "0");
+        const formattedDate = `${year}-${month}-${day}`;
+        setIsCalendarVisible(false);
+        setIsFocused(false);
+        if (onChange) {
+          onChange(formattedDate);
+        }
+      },
+      [onChange, isDateInRange, formatDateForDisplay]
+    );
+    const handleManualInput = (0, import_react9.useCallback)(
+      (text) => {
+        const previousText = previousTextRef.current;
+        const isDeleting = text.length < previousText.length;
+        if (isDeleting) {
+          const cleaned2 = text.replace(/[^\d/]/g, "");
+          let formatted2 = cleaned2;
+          if (formatted2.endsWith("/")) {
+            formatted2 = formatted2.slice(0, -1);
+          }
+          previousTextRef.current = formatted2;
+          setInputText(formatted2);
+          return;
+        }
+        const cleaned = text.replace(/[^\d/]/g, "");
+        const limited = cleaned.slice(0, 10);
+        const numbersOnly = limited.replace(/\//g, "");
+        let formatted = "";
+        if (numbersOnly.length === 1) {
+          const firstDigit = parseInt(numbersOnly[0]);
+          if (firstDigit > 3) {
+            formatted = "0" + numbersOnly[0] + "/";
+          } else {
+            formatted = numbersOnly;
+          }
+        } else if (numbersOnly.length === 2) {
+          const firstTwoDigits = parseInt(numbersOnly.slice(0, 2));
+          if (firstTwoDigits > 31) {
+            formatted = "0" + numbersOnly[0] + "/0" + numbersOnly[1];
+          } else {
+            formatted = numbersOnly.slice(0, 2) + "/";
+          }
+        } else if (numbersOnly.length === 3) {
+          const dayPart = numbersOnly.slice(0, 2);
+          const monthDigit = parseInt(numbersOnly[2]);
+          if (monthDigit > 1) {
+            formatted = dayPart + "/0" + numbersOnly[2] + "/";
+          } else {
+            formatted = dayPart + "/" + numbersOnly[2];
+          }
+        } else if (numbersOnly.length >= 4) {
+          const dayPart = numbersOnly.slice(0, 2);
+          const monthPart = numbersOnly.slice(2, 4);
+          const monthValue = parseInt(monthPart);
+          if (monthValue > 12) {
+            formatted = dayPart + "/0" + numbersOnly[2] + "/" + numbersOnly[3];
+          } else {
+            formatted = dayPart + "/" + monthPart;
+            if (numbersOnly.length > 4) {
+              formatted += "/" + numbersOnly.slice(4);
+            }
+          }
+        }
+        previousTextRef.current = formatted;
+        setInputText(formatted);
+        if (numbersOnly.length >= 5 && onChange) {
+          const dayPart = numbersOnly.slice(0, 2);
+          const monthPart = numbersOnly.slice(2, 4);
+          const yearPart = numbersOnly.slice(4);
+          const currentYear = (/* @__PURE__ */ new Date()).getFullYear().toString();
+          let yearToTest = yearPart;
+          if (yearPart.length < 4) {
+            if (yearPart.length === 1) {
+              yearToTest = currentYear.slice(0, 3) + yearPart;
+            } else if (yearPart.length === 2) {
+              yearToTest = currentYear.slice(0, 2) + yearPart;
+            } else if (yearPart.length === 3) {
+              yearToTest = yearPart + currentYear.slice(3);
+            }
+          }
+          const dayNum = parseInt(dayPart, 10);
+          const monthNum = parseInt(monthPart, 10);
+          const yearNum = parseInt(yearToTest, 10);
+          if (dayNum >= 1 && dayNum <= 31 && monthNum >= 1 && monthNum <= 12 && yearNum >= 1e3) {
+            const formattedDate = `${yearNum}-${monthNum.toString().padStart(2, "0")}-${dayNum.toString().padStart(2, "0")}`;
+            onChange(formattedDate);
+          }
+        }
+      },
+      [parseManualInput, onChange]
+    );
+    const handleInputBlur = (0, import_react9.useCallback)(() => {
+      setIsFocused(false);
+      if (inputText.trim() === "") {
+        if (onChange) {
+          onChange(null);
+        }
+        return;
+      }
+      const parsedDate = parseManualInput(inputText);
+      if (parsedDate && onChange) {
+        onChange(parsedDate);
+      } else {
+        const previousFormatted = formatDateForDisplay(value || null);
+        setInputText(previousFormatted);
+      }
+    }, [inputText, parseManualInput, onChange, value, formatDateForDisplay]);
+    const handleOpenCalendar = (0, import_react9.useCallback)(() => {
+      if (disabled) return;
+      setIsCalendarVisible(true);
+    }, [disabled]);
+    const handleCloseCalendar = (0, import_react9.useCallback)(() => {
+      setIsCalendarVisible(false);
+    }, []);
+    const handleInputFocus = (0, import_react9.useCallback)(() => {
+      if (disabled) return;
+      setIsFocused(true);
+    }, [disabled]);
+    (0, import_react9.useEffect)(() => {
+      const formatted = formatDateForDisplay(value || null);
+      if (!isFocused) {
+        setInputText(formatted);
+        previousTextRef.current = formatted;
+      }
+    }, [value, formatDateForDisplay, isFocused]);
+    const styles = import_react_native6.StyleSheet.create({
+      container: {
+        width: "100%"
+      },
+      label: {
+        fontSize: 14,
+        fontWeight: "500",
+        color: getColorStyle("MAIN" /* MAIN */),
+        marginBottom: 4
+      },
+      sample: {
+        fontSize: 12,
+        color: getColorStyle("NEUTRAL" /* NEUTRAL */),
+        marginBottom: 8
+      },
+      inputContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: disabled ? getColorStyle("DISABLED_FADE" /* DISABLED_FADE */) : getColorStyle("WHITE" /* BACKGROUND */),
+        borderWidth: isFocused ? 2 : 1,
+        borderColor: status === "success" && getColorStyle("SUCCESS" /* SUCCESS */) || status === "warning" && getColorStyle("WARNING" /* WARNING */) || status === "error" && getColorStyle("ERROR" /* ERROR */) || isFocused && getColorStyle("MAIN" /* MAIN */) || getColorStyle("NEUTRAL" /* NEUTRAL */),
+        borderRadius: 3,
+        height: 46,
+        paddingHorizontal: 10
+      },
+      input: {
+        flex: 1,
+        fontSize: 16,
+        color: disabled ? getColorStyle("DISABLED" /* DISABLED */) : getColorStyle("MAIN" /* MAIN */),
+        paddingVertical: import_react_native6.Platform.OS === "ios" ? 12 : 8
+      },
+      iconContainer: {
+        width: 32,
+        height: 32,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      help: {
+        fontSize: 12,
+        marginTop: 4,
+        paddingLeft: 4,
+        color: status === "success" && getColorStyle("SUCCESS" /* SUCCESS */) || status === "warning" && getColorStyle("WARNING" /* WARNING */) || status === "error" && getColorStyle("ERROR" /* ERROR */) || getColorStyle("NEUTRAL" /* NEUTRAL */)
+      },
+      modalOverlay: {
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      modalContent: {
+        paddingBottom: 16,
+        width: "90%",
+        shadowColor: "#000",
+        shadowOffset: {
+          width: 0,
+          height: 2
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 8,
+        elevation: 5
+      }
+    });
+    return /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { ref, style: styles.container, testID: testId, ...others }, label && /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: { flexDirection: "row", alignItems: "center" } }, /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { style: styles.label }, label), required && /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { style: { color: getColorStyle("ERROR" /* ERROR */), marginLeft: 4 } }, "*")), sample && /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { level: 3 /* THREE */, style: styles.sample }, sample), /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.inputContainer }, /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.TextInput,
+      {
+        style: styles.input,
+        value: inputText,
+        placeholder: "jj/mm/aaaa",
+        placeholderTextColor: getColorStyle("NEUTRAL" /* NEUTRAL */),
+        editable: !disabled,
+        keyboardType: "numeric",
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        onChangeText: handleManualInput,
+        maxLength: 10
+      }
+    ), /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.TouchableOpacity,
+      {
+        style: styles.iconContainer,
+        onPress: handleOpenCalendar,
+        disabled,
+        activeOpacity: 0.7
+      },
+      /* @__PURE__ */ import_react9.default.createElement(Icon_native_default, { name: "tri-calendar", size: "small" /* SMALL */, color: "MAIN" /* MAIN */ })
+    )), help && /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { style: styles.help }, help), /* @__PURE__ */ import_react9.default.createElement(import_react_native6.Modal, { visible: isCalendarVisible, transparent: true, animationType: "fade", onRequestClose: handleCloseCalendar }, /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.modalOverlay }, /* @__PURE__ */ import_react9.default.createElement(import_react_native6.TouchableOpacity, { style: import_react_native6.StyleSheet.absoluteFillObject, activeOpacity: 1, onPress: handleCloseCalendar }), /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.modalContent }, /* @__PURE__ */ import_react9.default.createElement(
+      Calendar_native_default,
+      {
+        value: calendarValue,
+        minDate: minDate ? new Date(minDate) : void 0,
+        maxDate: maxDate ? new Date(maxDate) : void 0,
+        disabledDates,
+        onChange: handleCalendarChange,
+        disabled
+      }
+    )))));
+  }
+);
+DatePicker.displayName = "DatePicker" /* DatePicker */;
 var DatePicker_native_default = DatePicker;