@cleartrip/ct-design-radio 4.0.0 → 5.0.0

package/dist/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Radio/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEnD,eAAO,MAAM,sBAAsB,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;CAepE,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,KAAK;;;;CAMjD,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,KAAK;;;;;CAOjD,CAAC;AAEF,eAAO,MAAM,cAAc;WAA2C,KAAK;aAAW,OAAO;cAAY,OAAO;;;;;;;;;;CAU/G,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Radio/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAmB,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAEvF,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,EAAE,YAAY,OAAO,EAAE,YAAY,OAAO,KAAG,gBAqCxF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,YAAY,OAAO,KAAG,mBAKnD,CAAC"}

package/dist/type.d.ts

@@ -1,26 +1,20 @@
-import { ChangeEvent, ReactNode } from 'react';
-import { BaseStyleConfigProps, TypographyStyleConfigProps } from '@cleartrip/ct-design-types';
-export interface RadioProps {
-    children?: ReactNode;
-    id?: string;
-    name?: string;
-    value?: string;
-    label?: string;
-    labelCTA?: ReactNode;
+import { ReactNode } from 'react';
+import type { Styles } from '@cleartrip/ct-design-types';
+import type { TypographyVariantType } from '@cleartrip/ct-design-typography';
+export interface IRadio {
+    id: string;
     checked?: boolean;
     disabled?: boolean;
-    gap?: string;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    labelVariant?: string;
+    onChange?: () => void;
+    label: ReactNode | string;
+    labelVariant?: TypographyVariantType;
+    labelCTA?: ReactNode;
     styleConfig?: {
-        root?: BaseStyleConfigProps;
-        baseLabel?: BaseStyleConfigProps;
-        radioRootContainer?: BaseStyleConfigProps;
-        radioContainer?: BaseStyleConfigProps;
-        radio?: BaseStyleConfigProps;
-        radioWrapper?: BaseStyleConfigProps;
-        labelContainer?: BaseStyleConfigProps;
-        labelTypography?: TypographyStyleConfigProps;
+        root?: Styles[];
+        radioBtn?: Styles[];
+        labelContainer?: Styles[];
     };
+    rootProps?: Record<string, unknown>;
 }
+export type RadioProps = IRadio;
 //# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Radio/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAE9F,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE;QACZ,IAAI,CAAC,EAAE,oBAAoB,CAAC;QAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;QACjC,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;QAC1C,cAAc,CAAC,EAAE,oBAAoB,CAAC;QACtC,KAAK,CAAC,EAAE,oBAAoB,CAAC;QAC7B,YAAY,CAAC,EAAE,oBAAoB,CAAC;QACpC,cAAc,CAAC,EAAE,oBAAoB,CAAC;QACtC,eAAe,CAAC,EAAE,0BAA0B,CAAC;KAC9C,CAAC;CACH"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Radio/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAK7E,MAAM,WAAW,MAAM;IAErB,EAAE,EAAE,MAAM,CAAC;IAGX,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAGtB,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAG1B,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAGrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAGrB,WAAW,CAAC,EAAE;QAEZ,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAGhB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QAGpB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;KAC3B,CAAC;IAGF,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAKD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC"}

package/package.json

@@ -1,31 +1,39 @@
 {
   "name": "@cleartrip/ct-design-radio",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Radio Component",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-radio.cjs.js",
+  "main": "./dist/ct-design-radio.cjs.js",
   "jsnext:main": "dist/ct-design-radio.esm.js",
   "module": "dist/ct-design-radio.esm.js",
+  "react-native": "src/index.native.ts",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ct-design-radio.esm.js",
+      "default": "./dist/ct-design-radio.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-radio.esm.js": "./dist/ct-design-radio.browser.esm.js",
     "./dist/ct-design-radio.cjs.js": "./dist/ct-design-radio.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-theme": "4.0.0",
-    "@cleartrip/ct-design-container": "4.0.0",
-    "@cleartrip/ct-design-typography": "4.0.0"
-  },
-  "devDependencies": {
-    "@cleartrip/ct-design-types": "4.0.0"
+    "@emotion/css": "11.13.4",
+    "@cleartrip/ct-design-theme": "5.0.0",
+    "@cleartrip/ct-design-container": "5.0.0",
+    "@cleartrip/ct-design-types": "5.0.0",
+    "@cleartrip/ct-design-typography": "5.0.0",
+    "@cleartrip/ct-design-style-manager": "5.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-dom": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -36,6 +44,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/Radio.native.tsx

@@ -0,0 +1,91 @@
+import { forwardRef } from 'react';
+
+import { Pressable, View } from 'react-native';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography, TypographyVariant } from '@cleartrip/ct-design-typography';
+import { makeStyles, useNativeMergeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { useTheme } from '@cleartrip/ct-design-theme';
+
+import { getBorderStyles, getLabelColor } from './style';
+import { IRadio } from './type';
+
+const staticRadioStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme?.spacing[2],
+  },
+  radioBtn: {
+    width: theme?.spacing[5],
+    height: theme?.spacing[5],
+    borderRadius: theme?.border.radius[32],
+    borderStyle: theme?.border.style.solid,
+  },
+}));
+
+const Radio = forwardRef<View, IRadio>(
+  (
+    { id, label, labelCTA, labelVariant, onChange, disabled = false, checked = false, styleConfig, rootProps = {} },
+    ref,
+  ) => {
+    const theme = useTheme();
+
+    const radioBtnStyles = useStyles(
+      (themeArg) => ({
+        root: getBorderStyles(themeArg, checked, disabled),
+      }),
+      [disabled, checked],
+    );
+
+    const {
+      root: customRootStyles = [],
+      radioBtn: customRadioBtnStyles = [],
+      labelContainer: customLabelContainerStyles = [],
+    } = styleConfig || {};
+
+    const mergedRootStyles = useNativeMergeStyles([staticRadioStyles?.root, ...customRootStyles], [customRootStyles]);
+
+    const handleOnRadioClick = () => {
+      if (disabled) return;
+      onChange?.();
+    };
+
+    return (
+      <Pressable
+        hitSlop={{ top: theme?.spacing[3], bottom: theme?.spacing[3] }}
+        ref={ref}
+        id={id}
+        style={mergedRootStyles}
+        disabled={disabled}
+        onPress={handleOnRadioClick}
+        {...rootProps}
+      >
+        <Container
+          styleConfig={{ root: [staticRadioStyles?.radioBtn, radioBtnStyles.root, ...customRadioBtnStyles] }}
+          onClick={handleOnRadioClick}
+        />
+        <Container styleConfig={{ root: [...customLabelContainerStyles] }} onClick={handleOnRadioClick}>
+          {typeof label === 'string' ? (
+            <Typography variant={TypographyVariant.B2} color={getLabelColor(disabled)}>
+              {label}
+            </Typography>
+          ) : (
+            label
+          )}
+          {typeof labelCTA === 'string' ? (
+            <Typography variant={labelVariant || TypographyVariant.B2} color={getLabelColor(disabled)}>
+              {labelCTA}
+            </Typography>
+          ) : (
+            labelCTA
+          )}
+        </Container>
+      </Pressable>
+    );
+  },
+);
+
+Radio.displayName = 'Radio';
+
+export default Radio;

package/src/Radio.tsx

@@ -0,0 +1,121 @@
+import { forwardRef } from 'react';
+
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography, TypographyVariant } from '@cleartrip/ct-design-typography';
+import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { css } from '@emotion/css';
+
+import { getBorderStyles, getLabelColor } from './style';
+import { IRadio } from './type';
+
+const webStaticStyles = {
+  disabledRoot: css({
+    cursor: 'not-allowed',
+  }),
+  hiddenInput: css({
+    position: 'absolute',
+    opacity: 0,
+    width: 0,
+    height: 0,
+    margin: 0,
+    padding: 0,
+    border: 'none',
+    pointerEvents: 'none',
+  }),
+};
+
+const staticRadioStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme?.spacing[2],
+    cursor: 'pointer',
+    userSelect: 'none',
+  },
+  radioBtn: {
+    width: theme?.spacing[5],
+    height: theme?.spacing[5],
+    borderRadius: theme?.border.radius[32],
+    borderStyle: theme?.border.style.solid,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));
+
+const Radio = forwardRef<HTMLInputElement, IRadio>(
+  (
+    { id, label, labelCTA, labelVariant, onChange, disabled = false, checked = false, styleConfig, rootProps = {} },
+    ref,
+  ) => {
+    const dynamicStyles = useStyles(
+      (theme) => ({
+        radioBtn: getBorderStyles(theme, checked, disabled),
+        label: {
+          color: getLabelColor(disabled),
+        },
+      }),
+      [checked, disabled],
+    );
+
+    const {
+      root: customRootStyles = [],
+      radioBtn: customRadioBtnStyles = [],
+      labelContainer: customLabelContainerStyles = [],
+    } = styleConfig || {};
+
+    const handleRadioChange = () => {
+      if (disabled) return;
+      onChange?.();
+    };
+
+    const mergedRootClassName = useWebMergeStyles(
+      [staticRadioStyles.root, ...(disabled ? [webStaticStyles.disabledRoot] : []), ...customRootStyles],
+      [disabled, customRootStyles],
+    );
+
+    const mergedInputClassName = useWebMergeStyles([webStaticStyles.hiddenInput], []);
+
+    const mergedRadioBtnClassName = useWebMergeStyles(
+      [staticRadioStyles.radioBtn, dynamicStyles.radioBtn, ...customRadioBtnStyles],
+      [dynamicStyles.radioBtn, customRadioBtnStyles],
+    );
+
+    return (
+      <div id={`${id}-root`} className={mergedRootClassName} onClick={handleRadioChange} {...rootProps}>
+        <input
+          ref={ref}
+          id={id}
+          type='radio'
+          checked={checked}
+          disabled={disabled}
+          onChange={handleRadioChange}
+          className={mergedInputClassName}
+          aria-labelledby={`${id}-label`}
+        />
+        <span className={mergedRadioBtnClassName} />
+        <Container styleConfig={{ root: customLabelContainerStyles }}>
+          {typeof label === 'string' ? (
+            <Typography variant={TypographyVariant.B2} styleConfig={{ root: [dynamicStyles.label] }}>
+              {label}
+            </Typography>
+          ) : (
+            label
+          )}
+          {typeof labelCTA === 'string' ? (
+            <Typography variant={labelVariant || TypographyVariant.B2} styleConfig={{ root: [dynamicStyles.label] }}>
+              {labelCTA}
+            </Typography>
+          ) : (
+            labelCTA
+          )}
+        </Container>
+      </div>
+    );
+  },
+);
+
+Radio.displayName = 'Radio';
+
+export default Radio;

package/src/index.native.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from './Radio.native';
+export type * from './type';

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from './Radio';
+export type * from './type';

package/src/style.ts

@@ -0,0 +1,54 @@
+import type { Theme } from '@cleartrip/ct-design-theme';
+import { TypographyColor, TypographyColorType } from '@cleartrip/ct-design-typography';
+
+type RadioBorderStyle = {
+  borderWidth: number;
+  borderColor?: string;
+  backgroundColor?: string;
+};
+
+export const getBorderStyles = (theme: Theme, isSelected: boolean, isDisabled: boolean): RadioBorderStyle => {
+  switch (true) {
+    case isDisabled: {
+      if (isSelected) {
+        return {
+          borderWidth: theme.border.width.xl,
+          borderColor: theme.color.border.disabled,
+          // @ts-ignore web only property
+          cursor: 'not-allowed',
+        };
+      }
+      return {
+        borderWidth: theme.border.width.sm,
+        borderColor: theme.color.border.disabled,
+        backgroundColor: theme.color.background.neutral,
+        // @ts-ignore web only property
+        cursor: 'not-allowed',
+      };
+    }
+    case isSelected: {
+      return {
+        borderWidth: theme.border.width.xl,
+        borderColor: theme.color.border.primary,
+        // @ts-ignore web only property
+        cursor: 'pointer',
+      };
+    }
+    default: {
+      return {
+        borderWidth: theme.border.width.sm,
+        borderColor: theme.color.border.defaultDark,
+        backgroundColor: theme.color.background.neutral,
+        // @ts-ignore web only property
+        cursor: 'pointer',
+      };
+    }
+  }
+};
+
+export const getLabelColor = (isDisabled: boolean): TypographyColorType => {
+  if (isDisabled) {
+    return TypographyColor.DISABLED;
+  }
+  return TypographyColor.PRIMARY;
+};

package/src/type.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+
+import type { Styles } from '@cleartrip/ct-design-types';
+import type { TypographyVariantType } from '@cleartrip/ct-design-typography';
+
+/**
+ * Interface for Radio component props
+ */
+export interface IRadio {
+  /** Unique identifier for the radio button */
+  id: string;
+
+  /** Determines if the radio button is checked */
+  checked?: boolean;
+
+  /** Disables the radio button when true */
+  disabled?: boolean;
+
+  /** Callback function triggered on selection change */
+  onChange?: () => void;
+
+  /** Label content, can be a string or React node */
+  label: ReactNode | string;
+
+  /** Typography variant for the label */
+  labelVariant?: TypographyVariantType;
+
+  /** Call-to-action content within the label */
+  labelCTA?: ReactNode;
+
+  /** Custom styles for different parts of the radio button */
+  styleConfig?: {
+    /** Root container styles */
+    root?: Styles[];
+
+    /** Radio button styles */
+    radioBtn?: Styles[];
+
+    /** Label container styles */
+    labelContainer?: Styles[];
+  };
+
+  /** Additional props forwarded to the root element */
+  rootProps?: Record<string, unknown>;
+}
+
+/**
+ * @deprecated Use `IRadio` instead — kept as an alias for backward type compatibility.
+ */
+export type RadioProps = IRadio;

package/dist/BaseRadio/BaseRadio.d.ts

@@ -1,10 +0,0 @@
-import { CSSProperties } from 'styled-components';
-import { BaseRadioProps, StyledRadioProps } from './type';
-export declare const BaseRadio: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
-    type: "radio";
-    css: {};
-} & BaseRadioProps, "type" | "css">;
-export declare const StyledRadio: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRadioProps & {
-    css?: CSSProperties | undefined;
-}, never>;
-//# sourceMappingURL=BaseRadio.d.ts.map

package/dist/BaseRadio/BaseRadio.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseRadio.d.ts","sourceRoot":"","sources":["../../packages/components/Radio/src/BaseRadio/BaseRadio.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAa,aAAa,EAAC,MAAO,mBAAmB,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,SAAS;;;mCAkBrB,CAAC;AAGF,eAAO,MAAM,WAAW;;SAMrB,CAAC"}

package/dist/BaseRadio/index.d.ts

@@ -1,2 +0,0 @@
-export { BaseRadio, StyledRadio } from './BaseRadio';
-//# sourceMappingURL=index.d.ts.map

package/dist/BaseRadio/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/Radio/src/BaseRadio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/dist/BaseRadio/style.d.ts

@@ -1,6 +0,0 @@
-import { Theme } from '@cleartrip/ct-design-theme';
-import { StyledRadioProps } from './type';
-export declare const getStyledRadioStyles: ({ backgroundColor, cursor, borderWidth, borderColor, theme, }: StyledRadioProps & {
-    theme: Theme;
-}) => import("styled-components").FlattenSimpleInterpolation;
-//# sourceMappingURL=style.d.ts.map

package/dist/BaseRadio/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../packages/components/Radio/src/BaseRadio/style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE1C,eAAO,MAAM,oBAAoB;WAMF,KAAK;4DAyBnC,CAAC"}

package/dist/BaseRadio/type.d.ts

@@ -1,12 +0,0 @@
-import { CSSObject, CSSProperties } from 'styled-components';
-export interface BaseRadioProps {
-    cursor?: CSSObject['cursor'];
-    css?: CSSProperties;
-}
-export interface StyledRadioProps {
-    cursor: CSSObject['cursor'];
-    backgroundColor: string;
-    borderWidth?: string;
-    borderColor?: string;
-}
-//# sourceMappingURL=type.d.ts.map

package/dist/BaseRadio/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../packages/components/Radio/src/BaseRadio/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,cAAc;IAC9B,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,aAAa,CAAA;CACnB;AACD,MAAM,WAAW,gBAAgB;IAChC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB"}