@cleartrip/ct-design-checkbox 4.0.0 → 5.0.0

package/src/Checkbox.tsx

@@ -0,0 +1,127 @@
+import { forwardRef, MouseEvent } from 'react';
+
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography, TypographyVariant } from '@cleartrip/ct-design-typography';
+import { CheckboxTick } from '@cleartrip/ct-design-icons';
+import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+
+import { getBorderStyles, getLabelColor } from './style';
+import { ICheckbox } from './type';
+import { css } from '@emotion/css';
+
+const webStaticStyles = {
+  disabledRoot: css({
+    cursor: 'not-allowed',
+  }),
+};
+const staticCheckboxStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme?.spacing[2],
+    cursor: 'pointer',
+    userSelect: 'none',
+  },
+  hiddenInput: {
+    position: 'absolute',
+    opacity: 0,
+    width: 0,
+    height: 0,
+    margin: 0,
+    padding: 0,
+    border: 'none',
+    pointerEvents: 'none',
+  },
+  checkboxIconContainer: {
+    width: theme?.spacing[5],
+    height: theme?.spacing[5],
+    borderRadius: theme?.border.radius[4],
+    borderStyle: theme?.border.style.solid,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));
+
+const Checkbox = forwardRef<HTMLInputElement, ICheckbox>(
+  (
+    { id, label, disabled = false, onChange, checked = false, styleConfig, isFullClickEnabled = true, rootProps = {} },
+    ref,
+  ) => {
+    const dynamicStyles = useStyles(
+      (theme) => ({
+        checkboxIconContainer: getBorderStyles(theme, checked, disabled),
+        label: {
+          color: getLabelColor(disabled),
+        },
+      }),
+      [checked, disabled],
+    );
+
+    const {
+      root: customRootStyles = [],
+      checkboxIconContainer: customCheckboxIconStyles = [],
+      labelContainer: customLabelContainerStyles = [],
+    } = styleConfig || {};
+
+    const handleCheckboxChange = () => {
+      if (disabled) return;
+      onChange?.({ id, label, disabled, checked: !checked });
+    };
+
+    const handleRootClick = () => {
+      if (disabled || !isFullClickEnabled) return;
+      handleCheckboxChange();
+    };
+
+    const handleIconClick = (event: MouseEvent<HTMLSpanElement>) => {
+      if (isFullClickEnabled) return;
+      event.stopPropagation();
+      handleCheckboxChange();
+    };
+
+    const mergedRootClassName = useWebMergeStyles(
+      [staticCheckboxStyles.root, ...(disabled ? [webStaticStyles.disabledRoot] : []), ...customRootStyles],
+      [disabled, customRootStyles],
+    );
+
+    const mergedInputClassName = useWebMergeStyles([staticCheckboxStyles.hiddenInput], []);
+
+    const mergedCheckboxIconClassName = useWebMergeStyles(
+      [staticCheckboxStyles.checkboxIconContainer, dynamicStyles.checkboxIconContainer, ...customCheckboxIconStyles],
+      [dynamicStyles.checkboxIconContainer, customCheckboxIconStyles],
+    );
+
+    return (
+      <div id={`${id}-root`} className={mergedRootClassName} onClick={handleRootClick} {...rootProps}>
+        <input
+          ref={ref}
+          id={id}
+          type='checkbox'
+          checked={checked}
+          disabled={disabled}
+          onChange={handleCheckboxChange}
+          className={mergedInputClassName}
+          aria-labelledby={`${id}-label`}
+        />
+        <span className={mergedCheckboxIconClassName} onClick={handleIconClick}>
+          {checked && <CheckboxTick />}
+        </span>
+        <Container styleConfig={{ root: customLabelContainerStyles }}>
+          {typeof label === 'string' ? (
+            <Typography variant={TypographyVariant.P2} styleConfig={{ root: [dynamicStyles.label] }}>
+              {label}
+            </Typography>
+          ) : (
+            label
+          )}
+        </Container>
+      </div>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;

package/src/index.native.ts

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

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox';
+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 CheckboxStyle = {
+  borderWidth: number;
+  borderColor?: string;
+  backgroundColor: string;
+};
+
+export const getBorderStyles = (theme: Theme, isSelected: boolean, isDisabled: boolean): CheckboxStyle => {
+  switch (true) {
+    case isDisabled: {
+      if (isSelected) {
+        return {
+          borderWidth: theme.border.width.none,
+          backgroundColor: theme.color.background.disabledSecondary,
+          // @ts-ignore web only property
+          cursor: 'not-allowed',
+        };
+      }
+      return {
+        borderWidth: theme.border.width.sm,
+        borderColor: theme.color.border.disabled,
+        // @ts-ignore web only property
+        cursor: 'not-allowed',
+        backgroundColor: theme.color.background.disabled,
+      };
+    }
+    case isSelected: {
+      return {
+        borderWidth: theme.border.width.none,
+        backgroundColor: theme.color.background.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,58 @@
+import { ReactNode } from 'react';
+
+import type { Styles } from '@cleartrip/ct-design-types';
+
+/**
+ * Represents a single option consumable by Checkbox / CheckboxGroup.
+ */
+export interface ICheckboxOption {
+  /** Unique identifier for the checkbox option */
+  id: string;
+  /** Whether the checkbox is disabled */
+  disabled?: boolean;
+  /** Whether the checkbox is checked/selected */
+  checked?: boolean;
+  /** Label content to display next to the checkbox (can be string or React node) */
+  label?: ReactNode | string;
+}
+
+/**
+ * Interface for Checkbox component props
+ */
+export interface ICheckbox {
+  /** Unique identifier for the checkbox */
+  id: string;
+
+  /** Whether the checkbox is disabled */
+  disabled?: boolean;
+
+  /** Label content to display next to the checkbox */
+  label?: ReactNode | string;
+
+  /** Current checked state of the checkbox */
+  checked: boolean;
+
+  /** Callback function when checkbox state changes */
+  onChange?: (checkboxOption: ICheckboxOption) => void;
+
+  /** Optional styling configuration for different parts of the checkbox */
+  styleConfig?: {
+    /** Styles for the root container */
+    root?: Styles[];
+    /** Styles for the checkbox icon container */
+    checkboxIconContainer?: Styles[];
+    /** Styles for the label container */
+    labelContainer?: Styles[];
+  };
+
+  /** Whether the entire checkbox area is clickable */
+  isFullClickEnabled?: boolean;
+
+  /** Additional props forwarded to the root element */
+  rootProps?: Record<string, unknown>;
+}
+
+/**
+ * @deprecated Use `ICheckbox` instead — kept as an alias for backward type compatibility.
+ */
+export type CheckboxProps = ICheckbox;