@kivid/native-components 1.0.0-alpha.21 → 1.0.0-alpha.23

package/dist/module/components/LoadingDots/index.js

@@ -14,7 +14,8 @@ export const LoadingDots = ({
   const variantsMap = {
     grape: require("./assets/loading-button-grape.json"),
     light: require("./assets/loading-button-light.json"),
-    dark: require("./assets/loading-button-dark.json")
+    dark: require("./assets/loading-button-dark.json"),
+    gray: require("./assets/loading-button-gray.json")
   };
   const purposefulOverwrittenSrc = variantsMap[variant];
   const narrowedStyle = lottieViewStyle || {};

package/dist/module/components/LoadingDots/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["LottieView","View","jsx","_jsx","LoadingDots","variant","className","style","lottieViewStyle","ref","rest","variantsMap","grape","require","light","dark","purposefulOverwrittenSrc","narrowedStyle","children","loop","autoPlay","width","height","source"],"sourceRoot":"../../../../src","sources":["components/LoadingDots/index.tsx"],"mappings":";;AAAA,OAAOA,UAAU,MAAM,qBAAqB;AAE5C,SAASC,IAAI,QAAmB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,OAAO,GAAG,OAAO;EACjBC,SAAS;EACTC,KAAK;EACLC,eAAe;EACfC,GAAG;EACH,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,WAA+C,GAAG;IACtDC,KAAK,EAAEC,OAAO,CAAC,oCAAoC,CAAC;IACpDC,KAAK,EAAED,OAAO,CAAC,oCAAoC,CAAC;IACpDE,IAAI,EAAEF,OAAO,CAAC,mCAAmC;EACnD,CAAC;EAED,MAAMG,wBAAwB,GAAGL,WAAW,CAACN,OAAO,CAAC;EAErD,MAAMY,aAAa,GAAIT,eAAe,IAAkB,CAAC,CAAC;EAE1D,oBACEL,IAAA,CAACF,IAAI;IAACK,SAAS,EAAEA,SAAU;IAACC,KAAK,EAAEA,KAAM;IAACE,GAAG,EAAEA,GAAI;IAAAS,QAAA,eACjDf,IAAA,CAACH,UAAU;MACTmB,IAAI,EAAE,IAAK;MACXC,QAAQ,EAAE,IAAK;MAAA,GACXV,IAAI;MACRH,KAAK,EAAE;QAAEc,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE,EAAE;QAAE,GAAGL;MAAc,CAAE;MACnDM,MAAM,EAAEP;IAAyB,CAClC;EAAC,CACE,CAAC;AAEX,CAAC;AAED,eAAeZ,WAAW","ignoreList":[]}
+{"version":3,"names":["LottieView","View","jsx","_jsx","LoadingDots","variant","className","style","lottieViewStyle","ref","rest","variantsMap","grape","require","light","dark","gray","purposefulOverwrittenSrc","narrowedStyle","children","loop","autoPlay","width","height","source"],"sourceRoot":"../../../../src","sources":["components/LoadingDots/index.tsx"],"mappings":";;AAAA,OAAOA,UAAU,MAAM,qBAAqB;AAE5C,SAASC,IAAI,QAAmB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,OAAO,GAAG,OAAO;EACjBC,SAAS;EACTC,KAAK;EACLC,eAAe;EACfC,GAAG;EACH,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,WAA+C,GAAG;IACtDC,KAAK,EAAEC,OAAO,CAAC,oCAAoC,CAAC;IACpDC,KAAK,EAAED,OAAO,CAAC,oCAAoC,CAAC;IACpDE,IAAI,EAAEF,OAAO,CAAC,mCAAmC,CAAC;IAClDG,IAAI,EAAEH,OAAO,CAAC,mCAAmC;EACnD,CAAC;EAED,MAAMI,wBAAwB,GAAGN,WAAW,CAACN,OAAO,CAAC;EAErD,MAAMa,aAAa,GAAIV,eAAe,IAAkB,CAAC,CAAC;EAE1D,oBACEL,IAAA,CAACF,IAAI;IAACK,SAAS,EAAEA,SAAU;IAACC,KAAK,EAAEA,KAAM;IAACE,GAAG,EAAEA,GAAI;IAAAU,QAAA,eACjDhB,IAAA,CAACH,UAAU;MACToB,IAAI,EAAE,IAAK;MACXC,QAAQ,EAAE,IAAK;MAAA,GACXX,IAAI;MACRH,KAAK,EAAE;QAAEe,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE,EAAE;QAAE,GAAGL;MAAc,CAAE;MACnDM,MAAM,EAAEP;IAAyB,CAClC;EAAC,CACE,CAAC;AAEX,CAAC;AAED,eAAeb,WAAW","ignoreList":[]}

package/dist/module/components/index.js

@@ -39,4 +39,5 @@ export * from "./PasswordInput/index.js";
 export * from "./PageIndicators/index.js";
 export * from "./ActionButton/index.js";
 export * from "./MessageInput/index.js";
+export * from "./DatePicker/index.js";
 //# sourceMappingURL=index.js.map

package/dist/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,mBAAU;AAGxB,cAAc,uBAAc;AAI5B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,iBAAc;AAE5B,cAAc,8BAAqB;AACnC,cAAc,8BAA2B;AAGzC,cAAc,0BAAiB;AAC/B,cAAc,gCAAuB;AAGrC,cAAc,qBAAY;AAC1B,cAAc,2BAAkB;AAGhC,cAAc,yBAAgB;AAG9B,cAAc,4BAAmB;AAGjC,cAAc,wBAAe;AAC7B,cAAc,wBAAqB;AAEnC,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAG5B,cAAc,kBAAS;AAGvB,cAAc,mBAAU;AACxB,cAAc,yBAAgB;AAG9B,cAAc,uBAAc;AAG5B,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAG7B,cAAc,oBAAW;AAGzB,cAAc,uBAAc;AAC5B,cAAc,6BAAoB;AAGlC,cAAc,sBAAa;AAC3B,cAAc,sBAAmB;AAGjC,cAAc,yBAAgB;AAC9B,cAAc,+BAAsB;AAGpC,cAAc,uBAAc;AAC5B,cAAc,6BAAoB;AAGlC,cAAc,uBAAc;AAC5B,cAAc,uBAAoB;AAGlC,cAAc,0BAAiB;AAG/B,cAAc,2BAAkB;AAGhC,cAAc,yBAAgB;AAG9B,cAAc,yBAAgB","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,mBAAU;AAGxB,cAAc,uBAAc;AAI5B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,iBAAc;AAE5B,cAAc,8BAAqB;AACnC,cAAc,8BAA2B;AAGzC,cAAc,0BAAiB;AAC/B,cAAc,gCAAuB;AAGrC,cAAc,qBAAY;AAC1B,cAAc,2BAAkB;AAGhC,cAAc,yBAAgB;AAG9B,cAAc,4BAAmB;AAGjC,cAAc,wBAAe;AAC7B,cAAc,wBAAqB;AAEnC,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAG5B,cAAc,kBAAS;AAGvB,cAAc,mBAAU;AACxB,cAAc,yBAAgB;AAG9B,cAAc,uBAAc;AAG5B,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAG7B,cAAc,oBAAW;AAGzB,cAAc,uBAAc;AAC5B,cAAc,6BAAoB;AAGlC,cAAc,sBAAa;AAC3B,cAAc,sBAAmB;AAGjC,cAAc,yBAAgB;AAC9B,cAAc,+BAAsB;AAGpC,cAAc,uBAAc;AAC5B,cAAc,6BAAoB;AAGlC,cAAc,uBAAc;AAC5B,cAAc,uBAAoB;AAGlC,cAAc,0BAAiB;AAG/B,cAAc,2BAAkB;AAGhC,cAAc,yBAAgB;AAG9B,cAAc,yBAAgB;AAG9B,cAAc,uBAAc","ignoreList":[]}

package/dist/typescript/components/ActionButton/types.d.ts

@@ -38,6 +38,10 @@ export interface ActionButtonProps extends VariantProps<typeof menuCardVariants>
      * Whether the card is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the card is selected (only affects outline variant)
+     */
+    selected?: boolean;
     /**
      * Additional class names for the main container
      */

package/dist/typescript/components/DatePicker/assets/theme.d.ts

@@ -0,0 +1,92 @@
+export declare const defaultTheme: {
+    backgroundColor: string;
+    calendarBackground: string;
+    textSectionTitleColor: string;
+    textSectionTitleDisabledColor: string;
+    selectedDayBackgroundColor: string;
+    selectedDayTextColor: string;
+    todayTextColor: string;
+    dayTextColor: string;
+    textDisabledColor: string;
+    dotColor: string;
+    selectedDotColor: string;
+    arrowColor: string;
+    disabledArrowColor: string;
+    monthTextColor: string;
+    indicatorColor: string;
+    textDayFontFamily: string;
+    textMonthFontFamily: string;
+    textDayHeaderFontFamily: string;
+    textDayFontWeight: "500";
+    textMonthFontWeight: "600";
+    textDayHeaderFontWeight: "700";
+    textDayFontSize: number;
+    textMonthFontSize: number;
+    textDayHeaderFontSize: number;
+    "stylesheet.calendar.header": {
+        header: {
+            flexDirection: "row";
+            justifyContent: "space-between";
+            alignItems: "center";
+            backgroundColor: string;
+            borderBottomWidth: number;
+            borderBottomColor: string;
+        };
+        monthText: {
+            fontSize: number;
+            fontWeight: "600";
+            color: string;
+        };
+        arrow: {
+            padding: number;
+        };
+        arrowImage: {
+            tintColor: string;
+        };
+        week: {
+            marginTop: number;
+            marginBottom: number;
+            flexDirection: "row";
+            justifyContent: "space-around";
+        };
+    };
+    "stylesheet.day.basic": {
+        base: {
+            width: number;
+            height: number;
+            alignItems: "center";
+            justifyContent: "center";
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingTop: number;
+            paddingBottom: number;
+        };
+        text: {
+            fontSize: number;
+            fontWeight: "500";
+            color: string;
+        };
+        selected: {
+            backgroundColor: string;
+            borderWidth: number;
+            borderColor: string;
+        };
+        today: {
+            backgroundColor: string;
+            borderWidth: number;
+            borderColor: string;
+        };
+        todayText: {
+            color: string;
+            fontWeight: "600";
+        };
+        disabled: {
+            opacity: number;
+            borderWidth: number;
+        };
+        disabledText: {
+            color: string;
+        };
+    };
+};

package/dist/typescript/components/DatePicker/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { DatePickerProps } from "./types";
+declare const NativeWindDatePicker: React.ComponentType<DatePickerProps>;
+export { NativeWindDatePicker as DatePicker };

package/dist/typescript/components/DatePicker/types.d.ts

@@ -0,0 +1,17 @@
+import { CalendarProps } from "react-native-calendars";
+import { MarkingTypes } from "react-native-calendars/src/types";
+export interface DatePickerProps extends Omit<CalendarProps, "onDayPress"> {
+    onDateSelect?: (date: string, additionalData?: string[] | {
+        start: string;
+        end: string;
+    }) => void;
+    initialDate?: string;
+    minDate?: string;
+    maxDate?: string;
+    markedDates?: CalendarProps["markedDates"];
+    theme?: CalendarProps["theme"];
+    selectionType?: MarkingTypes;
+    unavailableDates?: string[];
+    selectedDates: string[];
+    onSelectedDatesChange: (dateOrUpdater: string | ((prev: string[]) => string[])) => void;
+}

package/dist/typescript/components/LoadingDots/types.d.ts

@@ -1,6 +1,6 @@
 import type { LottieViewProps } from "lottie-react-native";
 import { StyleProp, View, ViewStyle } from "react-native";
-export type LoadingDotsVariant = "grape" | "light" | "dark";
+export type LoadingDotsVariant = "grape" | "light" | "dark" | "gray";
 export interface LoadingDotsProps extends Omit<LottieViewProps, "source"> {
     variant?: LoadingDotsVariant;
     lottieViewStyle?: StyleProp<ViewStyle>;

package/dist/typescript/components/index.d.ts

@@ -60,3 +60,5 @@ export * from "./ActionButton";
 export type * from "./ActionButton/types";
 export * from "./MessageInput";
 export type * from "./MessageInput/types";
+export * from "./DatePicker";
+export type * from "./DatePicker/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -88,8 +88,8 @@
     "react-test-renderer": "19.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "~5.8.3",
-    "@kivid/tailwind-preset": "1.0.0-alpha.21",
-    "@kivid/icons": "1.0.0-alpha.21"
+    "@kivid/tailwind-preset": "1.0.0-alpha.23",
+    "@kivid/icons": "1.0.0-alpha.23"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
@@ -99,13 +99,17 @@
     "react": "19.0.0",
     "react-native": "0.79.5",
     "react-native-svg": "^15.12.0",
-    "@kivid/tailwind-preset": "1.0.0-alpha.21",
-    "@kivid/icons": "1.0.0-alpha.21"
+    "@kivid/tailwind-preset": "1.0.0-alpha.23",
+    "@kivid/icons": "1.0.0-alpha.23"
   },
   "eslintIgnore": [
     "node_modules/",
     "dist/"
   ],
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "react-native-calendars": "^1.1313.0"
+  },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json && bob build && node postbuild.js",
     "dev": "tsc -p tsconfig.build.json --watch",

package/src/components/ActionButton/index.tsx

@@ -16,6 +16,7 @@ export function ActionButton(props: ActionButtonProps) {
     variant = "grape",
     corners = CornersEnum.MEDIUM,
     disabled = false,
+    selected = false,
     className,
     iconContainerClassName,
     onPress,
@@ -45,6 +46,7 @@ export function ActionButton(props: ActionButtonProps) {
       corners,
     }),
     isPressed && !disabled && pressedColorMap[variant],
+    selected && variant === "outline" && "border-grape-300 bg-grape-100",
     className
   );
 

package/src/components/ActionButton/types.ts

@@ -53,6 +53,10 @@ export interface ActionButtonProps
    * Whether the card is disabled
    */
   disabled?: boolean;
+  /**
+   * Whether the card is selected (only affects outline variant)
+   */
+  selected?: boolean;
   /**
    * Additional class names for the main container
    */

package/src/components/DatePicker/assets/theme.ts

@@ -0,0 +1,92 @@
+export const defaultTheme = {
+  backgroundColor: "#FAFCFC",
+  calendarBackground: "#FAFCFC",
+  textSectionTitleColor: "#6B7280",
+  textSectionTitleDisabledColor: "#D1D5DB",
+  selectedDayBackgroundColor: "#EAE0FF",
+  selectedDayTextColor: "#1F2937",
+  todayTextColor: "#1F2937",
+  dayTextColor: "#1F2937",
+  textDisabledColor: "#D1D5DB",
+  dotColor: "#1F2937",
+  selectedDotColor: "#1F2937",
+  arrowColor: "#1F2937",
+  disabledArrowColor: "#D1D5DB",
+  monthTextColor: "#1F2937",
+  indicatorColor: "#1F2937",
+  textDayFontFamily: "System",
+  textMonthFontFamily: "System",
+  textDayHeaderFontFamily: "System",
+  textDayFontWeight: "500" as const,
+  textMonthFontWeight: "600" as const,
+  textDayHeaderFontWeight: "700" as const,
+  textDayFontSize: 16,
+  textMonthFontSize: 18,
+  textDayHeaderFontSize: 13.5,
+  "stylesheet.calendar.header": {
+    header: {
+      flexDirection: "row" as const,
+      justifyContent: "space-between" as const,
+      alignItems: "center" as const,
+      backgroundColor: "#FAFCFC",
+      borderBottomWidth: 1,
+      borderBottomColor: "#DEE7E7",
+    },
+    monthText: {
+      fontSize: 18,
+      fontWeight: "600" as const,
+      color: "#1F2937",
+    },
+    arrow: {
+      padding: 0,
+    },
+    arrowImage: {
+      tintColor: "#1F2937",
+    },
+    week: {
+      marginTop: 16,
+      marginBottom: 8,
+      flexDirection: "row" as const,
+      justifyContent: "space-around" as const,
+    },
+  },
+  "stylesheet.day.basic": {
+    base: {
+      width: 40,
+      height: 35,
+      alignItems: "center" as const,
+      justifyContent: "center" as const,
+      borderWidth: 1,
+      borderColor: "#DEE7E7",
+      borderRadius: 8,
+      paddingTop: 6,
+      paddingBottom: 4,
+    },
+    text: {
+      fontSize: 16,
+      fontWeight: "500" as const,
+      color: "#1F2937",
+    },
+    selected: {
+      backgroundColor: "#EAE0FF",
+      borderWidth: 1,
+      borderColor: "#B9A0F2",
+    },
+    today: {
+      backgroundColor: "transparent",
+      borderWidth: 1,
+      borderColor: "#DEE7E7",
+    },
+    todayText: {
+      color: "#1F2937",
+      fontWeight: "600" as const,
+    },
+    disabled: {
+      opacity: 0.3,
+      borderWidth: 0,
+    },
+    disabledText: {
+      color: "#D1D5DB",
+    },
+  },
+};

package/src/components/DatePicker/index.tsx

@@ -0,0 +1,250 @@
+import React, { useState, useMemo, useCallback } from "react";
+import { View } from "react-native";
+import { Calendar, DateData, LocaleConfig } from "react-native-calendars";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import type { DatePickerProps } from "./types";
+
+import { defaultTheme } from "./assets/theme";
+import Typography from "../Typography";
+import { ArrowLeftStroke, ArrowRightStroke } from "@kivid/icons/native";
+import { cssInterop } from "nativewind";
+
+LocaleConfig.locales["pt-br"] = {
+  monthNames: [
+    "Janeiro",
+    "Fevereiro",
+    "Março",
+    "Abril",
+    "Maio",
+    "Junho",
+    "Julho",
+    "Agosto",
+    "Setembro",
+    "Outubro",
+    "Novembro",
+    "Dezembro",
+  ],
+  monthNamesShort: [
+    "Jan",
+    "Fev",
+    "Mar",
+    "Abr",
+    "Mai",
+    "Jun",
+    "Jul",
+    "Ago",
+    "Set",
+    "Out",
+    "Nov",
+    "Dez",
+  ],
+  dayNames: [
+    "Domingo",
+    "Segunda",
+    "Terça",
+    "Quarta",
+    "Quinta",
+    "Sexta",
+    "Sábado",
+  ],
+  dayNamesShort: ["D", "S", "T", "Q", "Q", "S", "S"],
+  today: "Hoje",
+};
+LocaleConfig.defaultLocale = "pt-br";
+
+function DatePicker(props: DatePickerProps) {
+  const {
+    selectedDates,
+    onSelectedDatesChange,
+    initialDate,
+    minDate,
+    maxDate,
+    markedDates: externalMarkedDates,
+    unavailableDates,
+    theme: customTheme,
+    selectionType,
+    ...rest
+  } = props;
+
+  const [currentMonth, setCurrentMonth] = useState<string>(
+    initialDate || format(new Date(), "yyyy-MM-dd")
+  );
+
+  const onDayPress = useCallback(
+    (day: DateData) => {
+      const dateString = day.dateString;
+
+      if (unavailableDates?.includes(dateString)) {
+        return;
+      }
+
+      if (externalMarkedDates?.[dateString]) {
+        return;
+      }
+
+      if (!selectionType) {
+        onSelectedDatesChange(dateString);
+
+        return;
+      }
+
+      if (selectionType === "multi-dot") {
+        onSelectedDatesChange((prev) => {
+          const isSelected = prev.includes(dateString);
+          const newDates = isSelected
+            ? prev.filter((d) => d !== dateString)
+            : [...prev, dateString];
+          return newDates;
+        });
+        return;
+      }
+    },
+    [
+      onSelectedDatesChange,
+      selectionType,
+      externalMarkedDates,
+      unavailableDates,
+    ]
+  );
+
+  const markedDates = useMemo(() => {
+    const filteredExternalMarkedDates = externalMarkedDates
+      ? Object.keys(externalMarkedDates).reduce(
+          (acc, date) => {
+            if (!unavailableDates?.includes(date)) {
+              acc[date] = externalMarkedDates[date];
+            }
+            return acc;
+          },
+          {} as typeof externalMarkedDates
+        )
+      : {};
+
+    const marked = { ...filteredExternalMarkedDates };
+
+    if (unavailableDates) {
+      unavailableDates.forEach((date) => {
+        marked[date] = {
+          disabled: true,
+          disableTouchEvent: true,
+          textColor: "#D1D5DB",
+          dotColor: "#D1D5DB",
+        };
+      });
+    }
+
+    if (filteredExternalMarkedDates) {
+      Object.keys(filteredExternalMarkedDates).forEach((date) => {
+        marked[date] = {
+          ...marked[date],
+          disableTouchEvent: true,
+          selected: true,
+          selectedColor: "#EAE0FF",
+          selectedTextColor: "#1F2937",
+        };
+      });
+    }
+
+    if (!selectionType && selectedDates && selectedDates.length > 0) {
+      const firstDate = selectedDates[0];
+      if (!unavailableDates?.includes(firstDate)) {
+        marked[firstDate] = {
+          ...marked[firstDate],
+          selected: true,
+          selectedColor: "#EAE0FF",
+          selectedTextColor: "#1F2937",
+        };
+      }
+      return marked;
+    }
+
+    if (selectionType === "multi-dot") {
+      selectedDates.forEach((date) => {
+        if (!unavailableDates?.includes(date)) {
+          marked[date] = {
+            ...marked[date],
+            selected: true,
+            selectedColor: "#EAE0FF",
+            selectedTextColor: "#1F2937",
+          };
+        }
+      });
+      return marked;
+    }
+
+    return marked;
+  }, [selectedDates, externalMarkedDates, selectionType, unavailableDates]);
+
+  const mergedTheme = {
+    ...defaultTheme,
+    ...customTheme,
+  };
+
+  const handlePressArrowLeft = useCallback((subtractMonth: () => void) => {
+    subtractMonth();
+  }, []);
+
+  const handlePressArrowRight = useCallback((addMonth: () => void) => {
+    addMonth();
+  }, []);
+
+  const handleMonthChange = useCallback((date: DateData) => {
+    setCurrentMonth(date.dateString);
+  }, []);
+
+  return (
+    <View>
+      <Calendar
+        current={currentMonth}
+        onDayPress={onDayPress}
+        onMonthChange={handleMonthChange}
+        onPressArrowLeft={handlePressArrowLeft}
+        onPressArrowRight={handlePressArrowRight}
+        markedDates={markedDates}
+        minDate={minDate}
+        maxDate={maxDate}
+        theme={mergedTheme}
+        enableSwipeMonths
+        hideExtraDays={false}
+        markingType={selectionType}
+        firstDay={0}
+        renderArrow={(direction) => (
+          <View className="items-center border p-400 mb-600 rounded-500 border-chia-400 bg-chia-100">
+            {direction === "left" ? (
+              <ArrowLeftStroke size={24} className="text-gray-900" />
+            ) : (
+              <ArrowRightStroke size={24} className="text-gray-900" />
+            )}
+          </View>
+        )}
+        renderHeader={(date) => {
+          const formattedDate = format(new Date(date), "MMMM yy", {
+            locale: ptBR,
+          });
+          const capitalizedDate =
+            formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);
+
+          return (
+            <View className="items-center translate-y-[-8px]">
+              <Typography variant="label_large" weight="700">
+                {capitalizedDate}
+              </Typography>
+            </View>
+          );
+        }}
+        {...rest}
+      />
+    </View>
+  );
+}
+
+const NativeWindDatePicker = cssInterop?.(DatePicker, {
+  className: {
+    target: "style",
+  },
+}) as React.ComponentType<DatePickerProps>;
+
+NativeWindDatePicker.displayName = "DatePicker";
+
+export { NativeWindDatePicker as DatePicker };

package/src/components/DatePicker/types.ts

@@ -0,0 +1,20 @@
+import { CalendarProps } from "react-native-calendars";
+import { MarkingTypes } from "react-native-calendars/src/types";
+
+export interface DatePickerProps extends Omit<CalendarProps, "onDayPress"> {
+  onDateSelect?: (
+    date: string,
+    additionalData?: string[] | { start: string; end: string }
+  ) => void;
+  initialDate?: string;
+  minDate?: string;
+  maxDate?: string;
+  markedDates?: CalendarProps["markedDates"];
+  theme?: CalendarProps["theme"];
+  selectionType?: MarkingTypes;
+  unavailableDates?: string[];
+  selectedDates: string[];
+  onSelectedDatesChange: (
+    dateOrUpdater: string | ((prev: string[]) => string[])
+  ) => void;
+}