@kivid/native-components 1.0.0-alpha.24 → 1.0.0-alpha.26

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

@@ -0,0 +1,100 @@
+"use strict";
+
+import { View, TextInput as RNTextInput, Pressable } from 'react-native';
+import { Tooltip } from "../Tooltip/index.js";
+import { TooltipVariantEnum } from "../Tooltip/enum/index.js";
+import Typography from "../Typography/index.js";
+import { TextAreaInputCornersEnum } from "./enums.js";
+import { labelVariant, textInputContainerVariants, textInputFieldVariants } from "./assets/class-variants.js";
+import { merge } from '@kivid/tailwind-preset';
+import { useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TextAreaInput(props) {
+  const {
+    value,
+    onChangeText,
+    onBlur,
+    placeholder,
+    label,
+    error,
+    maxLength = 200,
+    disabled = false,
+    corners = TextAreaInputCornersEnum.MEDIUM,
+    insideLabel = false,
+    className,
+    inputClassName,
+    labelClassName,
+    tooltipClassName,
+    tooltipPointerClassName,
+    tooltipContainerClassName,
+    showMaxLength = true,
+    containerTestID,
+    ...rest
+  } = props;
+  const currentLength = value?.length || 0;
+  const hasLabel = !!label;
+  const hasError = !!error;
+  const inputRef = useRef(null);
+  const handleChangeText = text => {
+    if (text.length <= maxLength) {
+      onChangeText?.(text);
+    }
+  };
+  const formattedCurrentLength = currentLength.toString().padStart(3, '0');
+  return /*#__PURE__*/_jsxs(Tooltip, {
+    isOpenedByVariantError: hasError,
+    message: error,
+    variant: TooltipVariantEnum.ERROR,
+    className: tooltipClassName,
+    pointerClassName: tooltipPointerClassName,
+    containerClassName: tooltipContainerClassName,
+    children: [/*#__PURE__*/_jsxs(View, {
+      className: labelVariant({
+        insideLabel,
+        corners
+      }),
+      children: [label && /*#__PURE__*/_jsx(Typography, {
+        variant: "label_small",
+        weight: "600",
+        className: merge("text-chia-900", labelClassName),
+        children: label
+      }), showMaxLength && /*#__PURE__*/_jsxs(Typography, {
+        variant: "label_small",
+        weight: "500",
+        className: "text-chia-600",
+        children: [formattedCurrentLength, "/", maxLength]
+      })]
+    }), /*#__PURE__*/_jsx(Pressable, {
+      testID: containerTestID,
+      className: merge(textInputContainerVariants({
+        corners,
+        error: !!error,
+        disabled,
+        insideLabel
+      }), className),
+      onPress: () => {
+        if (!disabled) {
+          inputRef.current?.focus();
+        }
+      },
+      disabled: disabled,
+      children: /*#__PURE__*/_jsx(RNTextInput, {
+        value: value,
+        onChangeText: handleChangeText,
+        onBlur: onBlur,
+        placeholder: placeholder,
+        multiline: true,
+        maxLength: maxLength,
+        placeholderTextColor: "#9CA3AF",
+        textAlignVertical: "top",
+        className: merge(textInputFieldVariants({
+          disabled,
+          error: hasError,
+          showLabel: hasLabel
+        }), inputClassName),
+        ...rest
+      })
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","TextInput","RNTextInput","Pressable","Tooltip","TooltipVariantEnum","Typography","TextAreaInputCornersEnum","labelVariant","textInputContainerVariants","textInputFieldVariants","merge","useRef","jsx","_jsx","jsxs","_jsxs","TextAreaInput","props","value","onChangeText","onBlur","placeholder","label","error","maxLength","disabled","corners","MEDIUM","insideLabel","className","inputClassName","labelClassName","tooltipClassName","tooltipPointerClassName","tooltipContainerClassName","showMaxLength","containerTestID","rest","currentLength","length","hasLabel","hasError","inputRef","handleChangeText","text","formattedCurrentLength","toString","padStart","isOpenedByVariantError","message","variant","ERROR","pointerClassName","containerClassName","children","weight","testID","onPress","current","focus","multiline","placeholderTextColor","textAlignVertical","showLabel"],"sourceRoot":"../../../../src","sources":["components/TextAreaInput/index.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/components/TextAreaInput/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/components/TextAreaInput/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/TextAreaInput/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/components/Title/components/marker/index.js

@@ -6,7 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function Marker(props) {
   const {
     size = SizeEnum.MEDIUM,
-    color = "chia"
+    color = "chia",
+    customMarkerComponent
   } = props;
   const mappedSize = {
     [SizeEnum.SMALL]: "w-700 h-300",
@@ -23,8 +24,14 @@ export function Marker(props) {
     chia: "bg-chia-600",
     ghost: "bg-chia-200"
   }[color];
-  return /*#__PURE__*/_jsx(View, {
-    className: `${mappedColor} ${mappedSize} rounded-500`
-  });
+  function renderMarker() {
+    if (customMarkerComponent) {
+      return customMarkerComponent;
+    }
+    return /*#__PURE__*/_jsx(View, {
+      className: `${mappedColor} ${mappedSize} rounded-500`
+    });
+  }
+  return renderMarker();
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["View","SizeEnum","jsx","_jsx","Marker","props","size","MEDIUM","color","mappedSize","SMALL","mappedColor","pear","java","grape","pitaya","tangerine","mango","blackberry","chia","ghost","className"],"sourceRoot":"../../../../../../src","sources":["components/Title/components/marker/index.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,QAAQ,QAAQ,4BAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,OAAO,SAASC,MAAMA,CAACC,KAAkB,EAAE;EACzC,MAAM;IAAEC,IAAI,GAAGL,QAAQ,CAACM,MAAM;IAAEC,KAAK,GAAG;EAAO,CAAC,GAAGH,KAAK;EAExD,MAAMI,UAAU,GAAG;IACjB,CAACR,QAAQ,CAACS,KAAK,GAAG,aAAa;IAC/B,CAACT,QAAQ,CAACM,MAAM,GAAG;EACrB,CAAC,CAACD,IAAI,CAAC;EAEP,MAAMK,WAAW,GAAG;IAClBC,IAAI,EAAE,aAAa;IACnBC,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAE,cAAc;IACrBC,MAAM,EAAE,eAAe;IACvBC,SAAS,EAAE,kBAAkB;IAC7BC,KAAK,EAAE,cAAc;IACrBC,UAAU,EAAE,mBAAmB;IAC/BC,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAE;EACT,CAAC,CAACZ,KAAK,CAAC;EAER,oBAAOL,IAAA,CAACH,IAAI;IAACqB,SAAS,EAAE,GAAGV,WAAW,IAAIF,UAAU;EAAe,CAAE,CAAC;AACxE","ignoreList":[]}
+{"version":3,"names":["View","SizeEnum","jsx","_jsx","Marker","props","size","MEDIUM","color","customMarkerComponent","mappedSize","SMALL","mappedColor","pear","java","grape","pitaya","tangerine","mango","blackberry","chia","ghost","renderMarker","className"],"sourceRoot":"../../../../../../src","sources":["components/Title/components/marker/index.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,QAAQ,QAAQ,4BAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,OAAO,SAASC,MAAMA,CAACC,KAAkB,EAAE;EACzC,MAAM;IAAEC,IAAI,GAAGL,QAAQ,CAACM,MAAM;IAAEC,KAAK,GAAG,MAAM;IAAEC;EAAsB,CAAC,GAAGJ,KAAK;EAE/E,MAAMK,UAAU,GAAG;IACjB,CAACT,QAAQ,CAACU,KAAK,GAAG,aAAa;IAC/B,CAACV,QAAQ,CAACM,MAAM,GAAG;EACrB,CAAC,CAACD,IAAI,CAAC;EAEP,MAAMM,WAAW,GAAG;IAClBC,IAAI,EAAE,aAAa;IACnBC,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAE,cAAc;IACrBC,MAAM,EAAE,eAAe;IACvBC,SAAS,EAAE,kBAAkB;IAC7BC,KAAK,EAAE,cAAc;IACrBC,UAAU,EAAE,mBAAmB;IAC/BC,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAE;EACT,CAAC,CAACb,KAAK,CAAC;EAER,SAASc,YAAYA,CAAA,EAAG;IACtB,IAAIb,qBAAqB,EAAE;MACzB,OAAOA,qBAAqB;IAC9B;IAEA,oBAAON,IAAA,CAACH,IAAI;MAACuB,SAAS,EAAE,GAAGX,WAAW,IAAIF,UAAU;IAAe,CAAE,CAAC;EACxE;EAEA,OAAOY,YAAY,CAAC,CAAC;AACvB","ignoreList":[]}

package/dist/module/components/index.js

@@ -25,6 +25,7 @@ export * from "./Typography/index.js";
 export * from "./Toast/index.js";
 export * from "./Toast/enums/index.js";
 export * from "./Tooltip/index.js";
+export * from "./Tooltip/enum/index.js";
 export * from "./ListButton/index.js";
 export * from "./ListButton/enums/index.js";
 export * from "./TextInput/index.js";
@@ -40,4 +41,8 @@ export * from "./PageIndicators/index.js";
 export * from "./ActionButton/index.js";
 export * from "./MessageInput/index.js";
 export * from "./DatePicker/index.js";
+export * from "./Tab/index.js";
+export * from "./Dropdown/index.js";
+export * from "./TextAreaInput/index.js";
+export * from "./TextAreaInput/enums.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;AAG9B,cAAc,uBAAc","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;AACzB,cAAc,yBAAgB;AAG9B,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;AAG5B,cAAc,gBAAO;AAGrB,cAAc,qBAAY;AAG1B,cAAc,0BAAiB;AAC/B,cAAc,0BAAuB","ignoreList":[]}

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

@@ -89,4 +89,64 @@ export declare const defaultTheme: {
             color: string;
         };
     };
+    "stylesheet.day.period": {
+        container: {
+            alignSelf: "stretch";
+            alignItems: "center";
+        };
+        base: {
+            width: number;
+            height: number;
+            alignItems: "center";
+            justifyContent: "center";
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+        };
+        text: {
+            fontSize: number;
+            fontWeight: "500";
+            color: string;
+        };
+        leftFiller: {
+            backgroundColor: string;
+        };
+        rightFiller: {
+            backgroundColor: string;
+        };
+        fillers: {
+            backgroundColor: string;
+        };
+        selected: {
+            backgroundColor: string;
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+        };
+        today: {
+            backgroundColor: string;
+            borderWidth: number;
+            borderColor: string;
+        };
+        todayText: {
+            color: string;
+            fontWeight: "600";
+        };
+        disabled: {
+            opacity: number;
+            borderWidth: number;
+            borderRadius: number;
+        };
+        disabledText: {
+            color: string;
+        };
+        dot: {
+            width: number;
+            height: number;
+            marginTop: number;
+            borderRadius: number;
+            opacity: number;
+            position: string;
+        };
+    };
 };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DropdownProps } from "./types";
+export declare function Dropdown(props: DropdownProps): React.JSX.Element;

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

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { IconButtonProps } from "../IconButton/types";
+import { SizeEnum } from "../../enums";
+export interface DropdownProps {
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    contentBoxClassName?: string;
+    leftButtonText?: string;
+    hidePlaceholder?: boolean;
+    children: ReactNode;
+    iconButtonTrigger?: IconButtonProps;
+    iconButtonAlign?: "left" | "right" | "center";
+    size?: SizeEnum.SMALL | SizeEnum.MEDIUM;
+    corner?: SizeEnum.SMALL | SizeEnum.MEDIUM;
+    isActive: boolean;
+    onActiveChange: (isActive: boolean) => void;
+}

package/dist/typescript/components/ListButton/enums/variant.d.ts

@@ -5,5 +5,6 @@ export declare enum ListButtonVariantEnum {
     TANGERINE = "tangerine",
     BLACKBERRY = "blackberry",
     CHIA = "chia",
-    OUTLINE = "outline"
+    OUTLINE = "outline",
+    GHOST = "ghost"
 }

package/dist/typescript/components/Tab/assets/class-variants.d.ts

@@ -0,0 +1,18 @@
+import { SizeEnum } from "../../../enums";
+declare const tabContainerVariants: (props?: ({
+    size?: SizeEnum.SMALL | SizeEnum.MEDIUM | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const dividerVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    size?: SizeEnum.SMALL | SizeEnum.MEDIUM | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tabLabelVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tabCountVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tabCountTextVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export { tabContainerVariants, dividerVariants, tabLabelVariants, tabCountVariants, tabCountTextVariants, };

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

@@ -0,0 +1,2 @@
+import type { TabProps } from "./types";
+export declare function Tab(props: TabProps): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { SizeEnum } from "../../enums";
+export type TabSize = SizeEnum.SMALL | SizeEnum.MEDIUM;
+export interface TabItem {
+    label: string;
+    count?: number;
+}
+export interface TabProps {
+    items: TabItem[];
+    onTabChange: (index: number) => void;
+    size?: TabSize;
+    className?: string;
+    customDividerColor?: string;
+    customDividerComponent?: ReactNode;
+    selectedTab: number;
+    selected?: boolean;
+}

package/dist/typescript/components/TextAreaInput/assets/class-variants.d.ts

@@ -0,0 +1,17 @@
+export declare const textInputContainerVariants: (props?: ({
+    corners?: "small" | "medium" | null | undefined;
+    error?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    insideLabel?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const labelVariant: (props?: ({
+    insideLabel?: boolean | null | undefined;
+    corners?: "small" | "medium" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const textInputFieldVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    isValid?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    showLabel?: boolean | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/typescript/components/TextAreaInput/enums.d.ts

@@ -0,0 +1,4 @@
+export declare enum TextAreaInputCornersEnum {
+    SMALL = "small",
+    MEDIUM = "medium"
+}

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

@@ -0,0 +1,2 @@
+import { TextAreaInputProps } from './types';
+export declare function TextAreaInput(props: TextAreaInputProps): import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { TextInputProps as RNTextInputProps, TextInput as RNTextInput } from "react-native";
+import { TextAreaInputCornersEnum } from "./enums";
+export type TextAreaInputCorners = TextAreaInputCornersEnum;
+export interface TextAreaInputProps extends Omit<RNTextInputProps, "value" | "onChangeText"> {
+    corners?: TextAreaInputCorners;
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    containerTestID?: string;
+    tooltipClassName?: string;
+    tooltipPointerClassName?: string;
+    tooltipContainerClassName?: string;
+    maxLength?: number;
+    showMaxLength?: boolean;
+    insideLabel?: boolean;
+    onChangeText?: (text: string) => void;
+    ref?: React.RefObject<RNTextInput | null>;
+}

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

@@ -1,2 +1,2 @@
 import type { MarkerProps } from "./types";
-export declare function Marker(props: MarkerProps): import("react").JSX.Element;
+export declare function Marker(props: MarkerProps): string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element;

package/dist/typescript/components/Title/components/marker/types.d.ts

@@ -1,6 +1,7 @@
 import { SizeEnum } from "../../../../enums";
 export type MarkerSize = SizeEnum.SMALL | SizeEnum.MEDIUM;
 export interface MarkerProps {
+    customMarkerComponent?: React.ReactNode;
     size?: MarkerSize;
     color?: "pear" | "java" | "grape" | "pitaya" | "tangerine" | "mango" | "blackberry" | "chia" | "ghost";
 }

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

@@ -36,6 +36,7 @@ export * from "./Toast";
 export * from "./Toast/enums";
 export type * from "./Toast/types";
 export * from "./Tooltip";
+export * from "./Tooltip/enum";
 export type * from "./Tooltip/types";
 export * from "./ListButton";
 export * from "./ListButton/enums";
@@ -62,3 +63,10 @@ export * from "./MessageInput";
 export type * from "./MessageInput/types";
 export * from "./DatePicker";
 export type * from "./DatePicker/types";
+export * from "./Tab";
+export type * from "./Tab/types";
+export * from "./Dropdown";
+export type * from "./Dropdown/types";
+export * from "./TextAreaInput";
+export * from "./TextAreaInput/enums";
+export type * from "./TextAreaInput/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.24",
+  "version": "1.0.0-alpha.26",
   "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.24",
-    "@kivid/icons": "1.0.0-alpha.24"
+    "@kivid/tailwind-preset": "1.0.0-alpha.26",
+    "@kivid/icons": "1.0.0-alpha.26"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
@@ -99,8 +99,8 @@
     "react": "19.0.0",
     "react-native": "0.79.5",
     "react-native-svg": "^15.12.0",
-    "@kivid/tailwind-preset": "1.0.0-alpha.24",
-    "@kivid/icons": "1.0.0-alpha.24"
+    "@kivid/tailwind-preset": "1.0.0-alpha.26",
+    "@kivid/icons": "1.0.0-alpha.26"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -115,6 +115,7 @@
     "dev": "tsc -p tsconfig.build.json --watch",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "check-types": "tsc --noEmit",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage"

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

@@ -89,4 +89,64 @@ export const defaultTheme = {
       color: "#D1D5DB",
     },
   },
+  "stylesheet.day.period": {
+    container: {
+      alignSelf: "stretch" as const,
+      alignItems: "center" as const,
+    },
+    base: {
+      width: 40,
+      height: 35,
+      alignItems: "center" as const,
+      justifyContent: "center" as const,
+      borderWidth: 1,
+      borderColor: "#DEE7E7",
+      borderRadius: 8,
+    },
+    text: {
+      fontSize: 16,
+      fontWeight: "500" as const,
+      color: "#1F2937",
+    },
+    leftFiller: {
+      backgroundColor: "#FAFCFC",
+    },
+    rightFiller: {
+      backgroundColor: "#FAFCFC",
+    },
+    fillers: {
+      backgroundColor: "#FAFCFC",
+    },
+    selected: {
+      backgroundColor: "#EAE0FF",
+      borderWidth: 1,
+      borderColor: "#B9A0F2",
+      borderRadius: 8,
+    },
+    today: {
+      backgroundColor: "transparent",
+      borderWidth: 1,
+      borderColor: "#DEE7E7",
+    },
+    todayText: {
+      color: "#1F2937",
+      fontWeight: "600" as const,
+    },
+    disabled: {
+      opacity: 0.3,
+      borderWidth: 0,
+      borderRadius: 8,
+    },
+    disabledText: {
+      color: "#D1D5DB",
+    },
+    dot: {
+      width: 0,
+      height: 0,
+      marginTop: 0,
+      borderRadius: 0,
+      opacity: 0,
+      position: "absolute",
+    },
+  },
 };

package/src/components/DatePicker/index.tsx

@@ -1,7 +1,13 @@
 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 {
+  format,
+  eachDayOfInterval,
+  parseISO,
+  isAfter,
+  isValid,
+} from "date-fns";
 import { ptBR } from "date-fns/locale";
 import type { DatePickerProps } from "./types";
 
@@ -53,6 +59,26 @@ LocaleConfig.locales["pt-br"] = {
 };
 LocaleConfig.defaultLocale = "pt-br";
 
+function generateDateRange(startDate: string, endDate: string): string[] {
+  try {
+    const start = parseISO(startDate);
+    const end = parseISO(endDate);
+
+    if (!isValid(start) || !isValid(end)) {
+      return [];
+    }
+
+    if (isAfter(start, end)) {
+      return [];
+    }
+
+    const days = eachDayOfInterval({ start, end });
+    return days.map((d) => format(d, "yyyy-MM-dd"));
+  } catch {
+    return [];
+  }
+}
+
 function DatePicker(props: DatePickerProps) {
   const {
     selectedDates,
@@ -68,7 +94,7 @@ function DatePicker(props: DatePickerProps) {
   } = props;
 
   const [currentMonth, setCurrentMonth] = useState<string>(
-    initialDate || format(new Date(), "yyyy-MM-dd")
+    initialDate || format(new Date(), "yyyy-MM-dd"),
   );
 
   const onDayPress = useCallback(
@@ -99,13 +125,39 @@ function DatePicker(props: DatePickerProps) {
         });
         return;
       }
+
+      if (selectionType === "period") {
+        onSelectedDatesChange((prev) => {
+          if (prev.length === 0) {
+            return [dateString];
+          }
+
+          if (prev.length === 1) {
+            const startDate = prev[0];
+
+            if (startDate === dateString) {
+              return [];
+            }
+
+            const range = generateDateRange(
+              startDate < dateString ? startDate : dateString,
+              startDate < dateString ? dateString : startDate,
+            );
+
+            return range;
+          }
+
+          return [dateString];
+        });
+        return;
+      }
     },
     [
       onSelectedDatesChange,
       selectionType,
       externalMarkedDates,
       unavailableDates,
-    ]
+    ],
   );
 
   const markedDates = useMemo(() => {
@@ -117,7 +169,7 @@ function DatePicker(props: DatePickerProps) {
             }
             return acc;
           },
-          {} as typeof externalMarkedDates
+          {} as typeof externalMarkedDates,
         )
       : {};
 
@@ -173,6 +225,56 @@ function DatePicker(props: DatePickerProps) {
       return marked;
     }
 
+    if (selectionType === "period") {
+      if (selectedDates.length === 1) {
+        const singleDate = selectedDates[0];
+        if (!unavailableDates?.includes(singleDate)) {
+          marked[singleDate] = {
+            ...marked[singleDate],
+            selected: true,
+            selectedColor: "#EAE0FF",
+            selectedTextColor: "#1F2937",
+            customContainerStyle: {
+              backgroundColor: "#EAE0FF",
+              borderWidth: 1,
+              borderColor: "#B9A0F2",
+              borderRadius: 8,
+            },
+          };
+        }
+      } else if (selectedDates.length > 1) {
+        selectedDates.forEach((date, index) => {
+          const isStart = index === 0;
+          const isEnd = index === selectedDates.length - 1;
+          const isUnavailable = unavailableDates?.includes(date);
+
+          if (isUnavailable) {
+            marked[date] = {
+              ...marked[date],
+              startingDay: isStart,
+              endingDay: isEnd,
+            };
+          } else {
+            marked[date] = {
+              ...marked[date],
+              selected: true,
+              color: "#EAE0FF",
+              textColor: "#1F2937",
+              startingDay: isStart,
+              endingDay: isEnd,
+              customContainerStyle: {
+                backgroundColor: "#EAE0FF",
+                borderWidth: 1,
+                borderColor: "#B9A0F2",
+                borderRadius: 8,
+              },
+            };
+          }
+        });
+      }
+      return marked;
+    }
+
     return marked;
   }, [selectedDates, externalMarkedDates, selectionType, unavailableDates]);