@cleartrip/ct-design-button 4.0.0-TEST.1 → 4.1.0-SNAPSHOT-native-main.1

package/dist/style.d.ts

@@ -21,8 +21,8 @@ export declare const getButtonVariantStyles: (theme: Theme, variant: ButtonVaria
     borderWidth: 1;
     borderStyle: "solid";
 };
-export declare const getContainedButtonColorStyles: (theme: Theme, color: ButtonColorType, disabled: boolean, isHover: boolean) => {
-    backgroundColor: any;
+export declare const getContainedButtonColorStyles: (theme: Theme, color: ButtonColorType, disabled: boolean) => {
+    backgroundColor: string;
 };
 export declare const getOutlinedButtonColorStyles: (theme: Theme, color: ButtonColorType, disabled: boolean) => {
     backgroundColor: string;
@@ -31,75 +31,66 @@ export declare const getOutlinedButtonColorStyles: (theme: Theme, color: ButtonC
     backgroundColor: string;
     borderColor: string;
 };
-export declare const getButtonVariantColorStyles: (theme: Theme, color: ButtonColorType, variant: ButtonVariantType, disabled: boolean, isHover: boolean) => {
-    backgroundColor: any;
+export declare const getButtonVariantColorStyles: (theme: Theme, color: ButtonColorType, variant: ButtonVariantType, disabled: boolean, _isHover: boolean) => {
+    backgroundColor: string;
 };
 export declare const getContainedButtonLabelColor: (color: ButtonColorType, disabled: boolean, theme: Theme) => string;
 export declare const getOutlinedButtonLabelColor: (color: ButtonColorType, disabled: boolean, theme: Theme) => string;
 export declare const getButtonVariantLabelColor: (variant: ButtonVariantType, color: ButtonColorType, disabled: boolean, theme: Theme, loading: boolean) => string;
 export declare const getTypographyVariant: (size: ButtonSizeType) => TypographyVariant.HM3 | TypographyVariant.HM4;
-export declare const getDefaultButtonStyles: (disabled: boolean) => {
-    cursor: string;
-};
-export declare const getButtonStyles: ({ theme, size, variant, color, disabled, minWidth, isFullWidth, loading, isHover, }: {
+export declare const getDefaultButtonStyles: (disabled: boolean) => {};
+export declare const getButtonStyles: ({ theme, size, variant, color, disabled, isFullWidth, loading, isHover, }: {
     theme: Theme;
     size: ButtonSizeType;
     variant: ButtonVariantType;
     color: ButtonColorType;
     disabled: boolean;
-    minWidth: string;
     isFullWidth: boolean;
     loading: boolean;
     isHover: boolean;
 }) => {
-    minWidth: string;
-    cursor: string;
-    backgroundColor: any;
+    minWidth: number;
+    backgroundColor: string;
     borderWidth: 0;
     borderStyle?: undefined;
     height: 32;
     paddingTop: 4;
     paddingBottom: 4;
 } | {
-    minWidth: string;
-    cursor: string;
-    backgroundColor: any;
+    minWidth: number;
+    backgroundColor: string;
     borderWidth: 1;
     borderStyle: "solid";
     height: 32;
     paddingTop: 4;
     paddingBottom: 4;
 } | {
-    minWidth: string;
-    cursor: string;
-    backgroundColor: any;
+    minWidth: number;
+    backgroundColor: string;
     borderWidth: 0;
     borderStyle?: undefined;
     height: 40;
     paddingTop: 8;
     paddingBottom: 8;
 } | {
-    minWidth: string;
-    cursor: string;
-    backgroundColor: any;
+    minWidth: number;
+    backgroundColor: string;
     borderWidth: 1;
     borderStyle: "solid";
     height: 40;
     paddingTop: 8;
     paddingBottom: 8;
 } | {
-    minWidth: string;
-    cursor: string;
-    backgroundColor: any;
+    minWidth: number;
+    backgroundColor: string;
     borderWidth: 0;
     borderStyle?: undefined;
     height: 48;
     paddingTop: 12;
     paddingBottom: 12;
 } | {
-    minWidth: string;
-    cursor: string;
-    backgroundColor: any;
+    minWidth: number;
+    backgroundColor: string;
     borderWidth: 1;
     borderStyle: "solid";
     height: 48;

package/dist/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Button/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAe,eAAe,EAAc,cAAc,EAAiB,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEpH,eAAO,MAAM,mBAAmB,UAAW,KAAK,QAAQ,cAAc;;;;;;;;;;;;CA+BrE,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAAW,KAAK,WAAW,iBAAiB,YAAY,OAAO;;;;;;CAyBjG,CAAC;AAEF,eAAO,MAAM,6BAA6B,UACjC,KAAK,SACL,eAAe,YACZ,OAAO,WACR,OAAO;;CAsCjB,CAAC;AAEF,eAAO,MAAM,4BAA4B,UAAW,KAAK,SAAS,eAAe,YAAY,OAAO;;;;;;CAuCnG,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAC/B,KAAK,SACL,eAAe,WACb,iBAAiB,YAChB,OAAO,WACR,OAAO;;CAcjB,CAAC;AAEF,eAAO,MAAM,4BAA4B,UAAW,eAAe,YAAY,OAAO,SAAS,KAAK,WAmBnG,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAAW,eAAe,YAAY,OAAO,SAAS,KAAK,WAsBlG,CAAC;AAEF,eAAO,MAAM,0BAA0B,YAC5B,iBAAiB,SACnB,eAAe,YACZ,OAAO,SACV,KAAK,WACH,OAAO,WAgBjB,CAAC;AAEF,eAAO,MAAM,oBAAoB,SAAU,cAAc,kDAexD,CAAC;AAEF,eAAO,MAAM,sBAAsB,aAAc,OAAO;;CAUvD,CAAC;AAEF,eAAO,MAAM,eAAe;WAWnB,KAAK;UACN,cAAc;aACX,iBAAiB;WACnB,eAAe;cACZ,OAAO;cACP,MAAM;iBACH,OAAO;aACX,OAAO;aACP,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASjB,CAAC;AAEF,eAAO,MAAM,oBAAoB,SAAU,cAAc,SAAS,KAAK,iBAStE,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Button/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG5E,eAAO,MAAM,mBAAmB,GAAI,OAAO,KAAK,EAAE,MAAM,cAAc;;;;;;;;;;;;CA+BrE,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,KAAK,EAAE,SAAS,iBAAiB,EAAE,UAAU,OAAO;;;;;;CAyBjG,CAAC;AAEF,eAAO,MAAM,6BAA6B,GAAI,OAAO,KAAK,EAAE,OAAO,eAAe,EAAE,UAAU,OAAO;;CA6BpG,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,OAAO,KAAK,EAAE,OAAO,eAAe,EAAE,UAAU,OAAO;;;;;;CAuCnG,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,OAAO,KAAK,EACZ,OAAO,eAAe,EACtB,SAAS,iBAAiB,EAC1B,UAAU,OAAO,EACjB,UAAU,OAAO;;CAclB,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,OAAO,eAAe,EAAE,UAAU,OAAO,EAAE,OAAO,KAAK,WAmBnG,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,OAAO,eAAe,EAAE,UAAU,OAAO,EAAE,OAAO,KAAK,WAsBlG,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,SAAS,iBAAiB,EAC1B,OAAO,eAAe,EACtB,UAAU,OAAO,EACjB,OAAO,KAAK,EACZ,SAAS,OAAO,WAgBjB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,cAAc,kDAexD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,UAAU,OAAO,OAUvD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,2EAS7B;IACD,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;cAM2D,MAAM;;;;;;;;cAAN,MAAM;;;;;;;;cAAN,MAAM;;;;;;;;cAAN,MAAM;;;;;;;;cAAN,MAAM;;;;;;;;cAAN,MAAM;;;;;;;CAEjE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,cAAc,EAAE,OAAO,KAAK,iBAStE,CAAC"}

package/dist/type.d.ts

@@ -1,55 +1,29 @@
-import { ReactNode } from 'react';
-import { HtmlCompositeAttributes, Styles } from '@cleartrip/ct-design-types';
+import type { Styles } from '@cleartrip/ct-design-types';
 import { TypographyStyleConfigProps } from '@cleartrip/ct-design-typography';
-export declare enum ButtonSize {
-    SMALL = "small",
-    MEDIUM = "medium",
-    LARGE = "large"
-}
-export declare enum IconPosition {
-    LEFT = "left",
-    RIGHT = "right"
-}
-export declare enum ButtonVariant {
-    OUTLINE = "outline",
-    CONTAINED = "contained",
-    BARE = "bare"
-}
-export declare enum ButtonColor {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    TERTIARY = "tertiary",
-    NEUTRAL = "neutral"
-}
+import { INativeUIEvent } from '@cleartrip/ct-design-types';
+import { ButtonSize, ButtonVariant, ButtonColor } from './constants';
 export type ButtonSizeType = `${ButtonSize}`;
-export type IconPositionType = `${IconPosition}`;
 export type ButtonVariantType = `${ButtonVariant}`;
 export type ButtonColorType = `${ButtonColor}`;
-export type OwnButtonProps = Partial<{
-    type: 'submit' | 'reset' | 'button';
+export type IClickEvent = INativeUIEvent;
+export type IButtonProps = Partial<{
+    children: React.ReactNode;
     size: 'small' | 'medium' | 'large';
     variant: 'bare' | 'contained' | 'outline';
-    color: 'primary' | 'secondary' | 'tertiary' | 'neutral';
+    color: 'primary' | 'secondary' | 'tertiary';
     isFullWidth: boolean;
     loading: boolean;
     disabled: boolean;
-    minWidth: string;
-    showLeftIcon: boolean;
-    showRightIcon: boolean;
-    LeftIcon: ReactNode;
-    RightIcon: ReactNode;
-    prefixIcon?: ReactNode;
-    suffixIcon?: ReactNode;
+    prefixIcon: React.ReactNode;
+    suffixIcon: React.ReactNode;
+    onClick: (event: IClickEvent) => void;
     styleConfig?: {
         root?: Styles[];
         container?: Styles[];
         typography?: TypographyStyleConfigProps;
-        iconContainer?: Styles[];
         prefixIconContainer?: Styles[];
         suffixIconContainer?: Styles[];
     };
     noHover?: boolean;
 }>;
-export interface ButtonProps extends HtmlCompositeAttributes<OwnButtonProps, 'Button'>, OwnButtonProps {
-}
 //# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Button/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAE7E,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,OAAO,YAAY;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,GAAG,UAAU,EAAE,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,GAAG,YAAY,EAAE,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,GAAG,aAAa,EAAE,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,GAAG,WAAW,EAAE,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;IAKnC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAKpC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAKnC,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IAK1C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IAIxD,WAAW,EAAE,OAAO,CAAC;IAIrB,OAAO,EAAE,OAAO,CAAC;IAIjB,QAAQ,EAAE,OAAO,CAAC;IAIlB,QAAQ,EAAE,MAAM,CAAC;IAMjB,YAAY,EAAE,OAAO,CAAC;IAItB,aAAa,EAAE,OAAO,CAAC;IAIvB,QAAQ,EAAE,SAAS,CAAC;IAIpB,SAAS,EAAE,SAAS,CAAC;IAIrB,UAAU,CAAC,EAAE,SAAS,CAAC;IAIvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE;QAIZ,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAKhB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QAKrB,UAAU,CAAC,EAAE,0BAA0B,CAAC;QAKxC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;QAKzB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;QAK/B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;KAChC,CAAC;IAIF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,uBAAuB,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE,cAAc;CAAG"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Button/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,GAAG,UAAU,EAAE,CAAC;AAE7C,MAAM,MAAM,iBAAiB,GAAG,GAAG,aAAa,EAAE,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,GAAG,WAAW,EAAE,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAK1B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAKnC,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IAK1C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAI5C,WAAW,EAAE,OAAO,CAAC;IAIrB,OAAO,EAAE,OAAO,CAAC;IAIjB,QAAQ,EAAE,OAAO,CAAC;IAIlB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAI5B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAI5B,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAItC,WAAW,CAAC,EAAE;QAIZ,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAIhB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QAIrB,UAAU,CAAC,EAAE,0BAA0B,CAAC;QAKxC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;QAI/B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;KAChC,CAAC;IAIF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC"}

package/package.json

@@ -1,28 +1,39 @@
 {
   "name": "@cleartrip/ct-design-button",
-  "version": "4.0.0-TEST.1",
+  "version": "4.1.0-SNAPSHOT-native-main.1",
   "description": "",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-button.cjs.js",
+  "react-native": "src/index.ts",
+  "main": "./dist/ct-design-button.cjs.js",
   "jsnext:main": "dist/ct-design-button.esm.js",
   "module": "dist/ct-design-button.esm.js",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ct-design-button.esm.js",
+      "default": "./dist/ct-design-button.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-button.esm.js": "./dist/ct-design-button.browser.esm.js",
     "./dist/ct-design-button.cjs.js": "./dist/ct-design-button.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@cleartrip/ct-design-types": "4.0.0-TEST.1",
-    "@cleartrip/ct-design-theme": "4.0.0-TEST.1",
-    "@cleartrip/ct-design-typography": "4.0.0-TEST.1",
-    "@cleartrip/ct-design-container": "4.0.0-TEST.1",
-    "@cleartrip/ct-design-dotted-loader": "4.0.0-TEST.1",
-    "@cleartrip/ct-design-style-manager": "4.0.0-TEST.1"
+    "@cleartrip/ct-design-typography": "4.0.0-SNAPSHOT-native-main.12",
+    "@cleartrip/ct-design-container": "4.1.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-conditional-wrap": "4.1.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-native-main.12",
+    "@cleartrip/ct-design-dotted-loader": "4.1.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-native-main.12",
+    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-native-main.12",
+    "@cleartrip/ct-design-event-propagation": "4.0.0-SNAPSHOT-native-main.12"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.12.0"
@@ -40,6 +51,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }

package/src/Button.native.tsx

@@ -0,0 +1,126 @@
+import React, { forwardRef, useMemo } from 'react';
+
+import { Pressable, View } from 'react-native';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+import { useNativeMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { Container } from '@cleartrip/ct-design-container';
+import EventCollectorProvider, { useMergeEvents } from '@cleartrip/ct-design-event-propagation';
+import { DottedLoader } from '@cleartrip/ct-design-dotted-loader';
+import Conditional from '@cleartrip/ct-design-conditional-wrap';
+import { getButtonStyles, getButtonVariantLabelColor, getTypographyVariant } from './style';
+import { IButtonProps } from './type';
+import { ButtonColor, ButtonSize, ButtonVariant } from './constants';
+
+const staticButtonStyles = makeStyles((theme) => {
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      paddingHorizontal: theme?.spacing[3],
+      borderRadius: theme?.border.radius[8],
+    },
+    prefixIcon: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingRight: theme?.spacing[1],
+    },
+    suffixIcon: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingLeft: theme?.spacing[1],
+    },
+  };
+});
+
+const Button = forwardRef(
+  (
+    {
+      children,
+      color = ButtonColor.PRIMARY,
+      disabled = false,
+      isFullWidth = false,
+      loading = false,
+      prefixIcon,
+      suffixIcon,
+      size = ButtonSize.MEDIUM,
+      variant = ButtonVariant.CONTAINED,
+      onClick,
+      styleConfig,
+    }: IButtonProps,
+    ref: React.ForwardedRef<View>,
+  ) => {
+    const globalTheme = useTheme();
+
+    const {
+      root: customRootStyles = [],
+      prefixIconContainer: customPrefixIconContainerStyles = [],
+      suffixIconContainer: customSuffixIconContainerStyles = [],
+      typography: customTypograpyStyles = {},
+    } = styleConfig || {};
+
+    const buttonStyles = useStyles(
+      (theme) => {
+        return {
+          root: getButtonStyles({ theme: theme, color, disabled, isFullWidth, loading, size, variant, isHover: false }),
+        };
+      },
+      [color, disabled, isFullWidth, loading, size, variant],
+    );
+
+    const buttonLabelColor = useMemo(() => {
+      return getButtonVariantLabelColor(variant, color, disabled, globalTheme, loading);
+    }, [variant, color, disabled, globalTheme, loading]);
+
+    const mergedRootStyles = useNativeMergeStyles(
+      [staticButtonStyles?.root, buttonStyles?.root, ...customRootStyles],
+      [customRootStyles, buttonStyles?.root],
+    );
+
+    const mergedEvents = useMergeEvents({ onClick: [onClick] });
+
+    return (
+      <Conditional
+        condition={!!onClick}
+        wrap={(children) => <EventCollectorProvider value={mergedEvents}>{children}</EventCollectorProvider>}
+      >
+        <Pressable ref={ref} disabled={disabled || loading} style={mergedRootStyles} onPress={onClick}>
+          {loading ? (
+            <DottedLoader />
+          ) : (
+            <>
+              {prefixIcon && (
+                <Container styleConfig={{ root: [staticButtonStyles?.prefixIcon, ...customPrefixIconContainerStyles] }}>
+                  {prefixIcon}
+                </Container>
+              )}
+              <Typography
+                variant={getTypographyVariant(size)}
+                colorCode={buttonLabelColor}
+                styleConfig={customTypograpyStyles}
+              >
+                {children}
+              </Typography>
+              {suffixIcon && (
+                <Container styleConfig={{ root: [staticButtonStyles?.suffixIcon, ...customSuffixIconContainerStyles] }}>
+                  {suffixIcon}
+                </Container>
+              )}
+            </>
+          )}
+        </Pressable>
+      </Conditional>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export default Button;

package/src/Button.tsx

@@ -0,0 +1,146 @@
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { Container } from '@cleartrip/ct-design-container';
+
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { getButtonStyles, getButtonVariantLabelColor, getTypographyVariant } from './style';
+import { IButtonProps } from './type';
+import { ButtonColor, ButtonSize, ButtonVariant } from './constants';
+import { DottedLoader } from '@cleartrip/ct-design-dotted-loader';
+
+const staticButtonStyles = makeStyles((theme) => {
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      paddingHorizontal: theme.spacing[3],
+      // borderRadius: theme.border.radius[8],
+    },
+    prefixIcon: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingRight: theme.spacing[1],
+    },
+    suffixIcon: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingLeft: theme.spacing[1],
+    },
+  };
+});
+
+const Button = forwardRef<HTMLButtonElement, IButtonProps>(
+  (
+    {
+      size = ButtonSize.MEDIUM,
+      variant = ButtonVariant.CONTAINED,
+      color = ButtonColor.PRIMARY,
+      isFullWidth = false,
+      disabled = false,
+      onClick = () => {
+        // no-op
+      },
+      prefixIcon,
+      suffixIcon,
+      children,
+      loading = false,
+      styleConfig = {},
+      noHover = false,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const theme = useTheme();
+    const [isHover, setHover] = useState(false);
+
+    const buttonStyles = useStyles(
+      (theme) => {
+        return {
+          root: getButtonStyles({
+            theme: theme,
+            size,
+            variant,
+            color,
+            disabled,
+            isFullWidth,
+            loading,
+            isHover: noHover ? false : isHover,
+          }),
+        };
+      },
+      [size, variant, color, disabled, isFullWidth, loading, isHover, noHover, theme],
+    );
+
+    const {
+      root: customRootStyles = [],
+      container: customContainerStyles = [],
+      typography: customTypographyStyles = {},
+      prefixIconContainer: customPrefixIconContainerStyles = [],
+      suffixIconContainer: customSuffixIconContainerStyles = [],
+    } = styleConfig || {};
+
+    const buttonLabelColor = useMemo(() => {
+      return getButtonVariantLabelColor(variant, color, disabled, theme, loading);
+    }, [variant, color, disabled, theme, loading]);
+
+    const mergedRootStyles = useWebMergeStyles(
+      [staticButtonStyles.root, buttonStyles.root, ...customRootStyles],
+      [staticButtonStyles.root, buttonStyles.root, customRootStyles],
+    );
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (!disabled && onClick && !loading)
+          onClick({ stopPropagation: () => event.stopPropagation(), preventDefault: () => event.preventDefault() });
+        if (disabled || loading) event.preventDefault();
+      },
+      [disabled, onClick, loading],
+    );
+
+    return (
+      <button
+        ref={forwardedRef}
+        onClick={handleClick}
+        className={mergedRootStyles}
+        {...rest}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+      >
+        {loading ? (
+          <DottedLoader />
+        ) : (
+          <>
+            {prefixIcon && (
+              <Container styleConfig={{ root: [staticButtonStyles.prefixIcon, ...customPrefixIconContainerStyles] }}>
+                {prefixIcon}
+              </Container>
+            )}
+            <Container styleConfig={{ root: customContainerStyles }}>
+              <Typography
+                variant={getTypographyVariant(size)}
+                colorCode={buttonLabelColor}
+                styleConfig={customTypographyStyles}
+              >
+                {children}
+              </Typography>
+            </Container>
+            {suffixIcon && (
+              <Container styleConfig={{ root: [staticButtonStyles.suffixIcon, ...customSuffixIconContainerStyles] }}>
+                {suffixIcon}
+              </Container>
+            )}
+          </>
+        )}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+export default Button;

package/src/constants.ts

@@ -0,0 +1,18 @@
+export enum ButtonSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+
+export enum ButtonVariant {
+  OUTLINE = 'outline',
+  CONTAINED = 'contained',
+  BARE = 'bare',
+}
+
+export enum ButtonColor {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+  NEUTRAL = 'neutral',
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+
+export type * from './type';
+export * from './constants';