@cleartrip/ct-design-chip 4.0.0 → 5.0.0

package/src/Chip.tsx

@@ -0,0 +1,242 @@
+import React, { forwardRef, useMemo } from 'react';
+
+import { Container, ContainerRef } from '@cleartrip/ct-design-container';
+import { Typography, TypographyStyleConfigProps } from '@cleartrip/ct-design-typography';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+import { Cross } from '@cleartrip/ct-design-icons';
+import { Styles } from '@cleartrip/ct-design-types';
+import { useTheme } from '@cleartrip/ct-design-theme';
+
+import { getChipStyles, getLabelColor } from './style';
+import { IChipProps } from './type';
+const staticChipStyles = makeStyles((theme) => {
+  return {
+    relativeContainer: {
+      position: 'relative',
+    },
+    root: {
+      display: 'flex',
+      alignSelf: 'baseline',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme?.spacing[2],
+      paddingHorizontal: theme?.spacing[2],
+    },
+    prefixIconContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    suffixIconContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    topIconContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    chipCountRoot: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme?.color.chip.selectedPrimaryLabel,
+      height: theme?.size[4],
+      minWidth: theme?.size[4],
+      borderRadius: 50,
+      borderColor: '#fff',
+      top: 1,
+      borderWidth: theme?.border.width.sm,
+      paddingHorizontal: theme?.spacing[1],
+      marginLeft: -theme?.spacing[2],
+    },
+    labelContainerStyles: {
+      paddingLeft: theme?.spacing[1],
+      paddingRight: theme?.spacing[1],
+    },
+  };
+});
+
+const ChipCounter = ({
+  count,
+  styleConfig,
+}: {
+  count: number;
+  styleConfig: {
+    root: Styles[];
+    typography: TypographyStyleConfigProps;
+  };
+}) => {
+  const { root = [], typography = {} } = styleConfig || {};
+  return (
+    <Container
+      styleConfig={{
+        root: [staticChipStyles.chipCountRoot, ...root],
+      }}
+    >
+      <Typography variant='TAG' color='neutral' styleConfig={typography}>
+        {count}
+      </Typography>
+    </Container>
+  );
+};
+
+const Chip = forwardRef(
+  (
+    {
+      id,
+      label,
+      onClick,
+      size = 'sm',
+      labelVariant = 'B2',
+      isSelected = false,
+      disabled = false,
+      prefixIcon,
+      suffixIcon,
+      topIcon,
+      styleConfig,
+      showCounter,
+      count = 0,
+      isDismissible = false,
+      onDismiss,
+    }: IChipProps,
+    ref: React.ForwardedRef<ContainerRef>,
+  ) => {
+    const theme = useTheme();
+    const {
+      relativeContainer: customRelativeContainerStyles = [],
+      root: customRootStyles = [],
+      labelContainer: customLabelContainerStyles = [],
+      prefixIconContainer: customPrefixIconContainerStyles = [],
+      suffixIconContainer: customSuffixIconContainerStyles = [],
+      topIconContainer: customTopIconContainerStyles = [],
+      counter: customChipCountRootStyles = [],
+      counterTypography: customChipCountTypographyStyles = {},
+    } = styleConfig || {};
+
+    const labelColor = useMemo(() => {
+      return getLabelColor(disabled);
+    }, [disabled]);
+
+    const isTopIcon = Boolean(topIcon);
+
+    const chipStyles = useStyles(
+      (theme) => {
+        return {
+          root: getChipStyles({
+            theme,
+            size,
+            isDisabled: disabled,
+            isSelected,
+            topIcon: isTopIcon,
+          }),
+        };
+      },
+      [size, isSelected, disabled, isTopIcon],
+    );
+
+    const chipStylesForTopIcon = useStyles(
+      (theme) => {
+        if (topIcon) {
+          return {
+            root: {
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              gap: theme?.spacing[0],
+              borderRadius: theme?.border.radius[16],
+            },
+          };
+        }
+        return {};
+      },
+      [topIcon],
+    );
+
+    return (
+      <Container
+        styleConfig={{
+          root: [staticChipStyles?.relativeContainer, ...customRelativeContainerStyles],
+        }}
+        id={id}
+      >
+        <Container
+          ref={ref}
+          onClick={onClick ? onClick : undefined}
+          styleConfig={{
+            root: [staticChipStyles?.root, chipStyles.root, chipStylesForTopIcon?.root, ...customRootStyles],
+          }}
+        >
+          {!!topIcon && (
+            <Container
+              styleConfig={{
+                root: [staticChipStyles?.topIconContainer, ...customTopIconContainerStyles],
+              }}
+            >
+              {topIcon}
+            </Container>
+          )}
+          {!!prefixIcon && (
+            <Container
+              styleConfig={{
+                root: [staticChipStyles?.prefixIconContainer, ...customPrefixIconContainerStyles],
+              }}
+            >
+              {prefixIcon}
+            </Container>
+          )}
+          {!!label && (
+            <Container
+              styleConfig={{
+                root: [staticChipStyles?.labelContainerStyles, ...customLabelContainerStyles],
+              }}
+            >
+              {typeof label === 'string' ? (
+                <Typography lineClamp={1} variant={labelVariant} color={labelColor}>
+                  {label}
+                </Typography>
+              ) : (
+                label
+              )}
+            </Container>
+          )}
+          {showCounter && !!count && (
+            <ChipCounter
+              count={count}
+              styleConfig={{ root: customChipCountRootStyles, typography: customChipCountTypographyStyles }}
+            />
+          )}
+          {!!suffixIcon && (
+            <Container
+              styleConfig={{
+                root: [staticChipStyles?.suffixIconContainer, ...customSuffixIconContainerStyles],
+              }}
+            >
+              {suffixIcon}
+            </Container>
+          )}
+          {isDismissible && (
+            <button
+              onClick={() => {
+                onDismiss?.();
+              }}
+            >
+              <Cross
+                height={16}
+                width={16}
+                crossColor={
+                  isSelected ? theme.color.chip.selectedPrimaryLabel : theme.color.chip.nonSelectedPrimaryLabel
+                }
+              />
+            </button>
+          )}
+        </Container>
+      </Container>
+    );
+  },
+);
+
+Chip.displayName = 'Chip';
+
+export default Chip;

package/src/Shimmer.tsx

@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+const ChipShimmer = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg width='50' height='50' viewBox='0 0 69 98' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <g opacity='1' filter='url(#filter0_f_13505_53133)'>
+        <rect x='43' y='16.6328' width='10.541' height='66' transform='rotate(24 43 16.6328)' fill='white'></rect>
+      </g>
+      <defs>
+        <filter
+          id='filter0_f_13505_53133'
+          x='0.15625'
+          y='0.632812'
+          width='68.4727'
+          height='96.5813'
+          filterUnits='userSpaceOnUse'
+          colorInterpolationFilters='sRGB'
+        >
+          <feFlood floodOpacity='0' result='BackgroundImageFix'></feFlood>
+          <feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'></feBlend>
+          <feGaussianBlur stdDeviation='8' result='effect1_foregroundBlur_13505_53133'></feGaussianBlur>
+        </filter>
+      </defs>
+    </svg>
+  );
+};
+
+export default ChipShimmer;

package/src/constants.ts

@@ -0,0 +1,10 @@
+export enum ChipVariant {
+  DEFAULT = 'default',
+  DISABLED = 'disabled',
+  GRADIENT = 'gradient',
+}
+
+export enum ChipSizeType {
+  SMALL = 'sm',
+  MEDIUM = 'md',
+}

package/src/index.ts

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

package/src/style.ts

@@ -0,0 +1,80 @@
+import { Theme } from '@cleartrip/ct-design-theme';
+import { TypographyColor } from '@cleartrip/ct-design-typography';
+
+import { ChipSize } from './type';
+interface ChipStyleProps {
+  theme: Theme;
+  size: ChipSize;
+  isSelected: boolean;
+  isDisabled: boolean;
+  topIcon?: boolean;
+}
+
+const getDefaultChipStyles = (theme: Theme, size: ChipSize, topIcon = false) => {
+  const baseStyles = {
+    borderRadius: 50,
+    borderStyle: theme.border.style.solid,
+  };
+
+  if (topIcon) {
+    return {
+      ...baseStyles,
+      paddingVertical: theme.spacing[2],
+    };
+  }
+
+  return {
+    ...baseStyles,
+    height: theme.size[8],
+  };
+};
+
+const getBorderStyles = (theme: Theme, isSelected: boolean, isDisabled: boolean) => {
+  if (isDisabled) {
+    return {
+      borderWidth: theme.border.width.none,
+    };
+  }
+
+  if (isSelected) {
+    return {
+      borderColor: theme.color.border.primary,
+      borderWidth: theme.border.width.md,
+    };
+  }
+
+  return {
+    borderColor: theme.color.border.disabledDark,
+    borderWidth: theme.border.width.sm,
+  };
+};
+
+const getBackgroundColorStyles = (theme: Theme, isSelected: boolean, isDisabled: boolean) => {
+  if (isDisabled) {
+    return {
+      backgroundColor: theme.color.background.disabled,
+    };
+  }
+
+  if (isSelected) {
+    return {
+      backgroundColor: theme.color.chip.selectedPrimaryBg,
+    };
+  }
+
+  return {
+    backgroundColor: theme.color.background.neutral,
+  };
+};
+
+const getLabelColor = (isDisabled: boolean): TypographyColor => {
+  return isDisabled ? TypographyColor.DISABLED : TypographyColor.PRIMARY;
+};
+
+export const getChipStyles = ({ theme, size, isDisabled, isSelected, topIcon = false }: ChipStyleProps) => ({
+  ...getDefaultChipStyles(theme, size, topIcon),
+  ...getBorderStyles(theme, isSelected, isDisabled),
+  ...getBackgroundColorStyles(theme, isSelected, isDisabled),
+});
+
+export { getLabelColor };

package/src/type.ts

@@ -0,0 +1,119 @@
+import type { ReactNode, SVGProps } from 'react';
+import type { IconPosition, Styles } from '@cleartrip/ct-design-types';
+import type { TypographyStyleConfigProps, TypographyVariantType } from '@cleartrip/ct-design-typography';
+
+import { ChipVariant, ChipSizeType } from './constants';
+
+export type ChipVariantType = `${ChipVariant}`;
+
+export type ChipSize = `${ChipSizeType}`;
+
+export type ChipBorderWidth = 'none' | 'sm' | 'md' | 'lg';
+
+/**
+ * Style configuration for the Chip's composable slots.
+ */
+export interface IChipStyleConfig {
+  /** Styles for the absolute-positioning relative container wrapping the chip. */
+  relativeContainer?: Styles[];
+  /** Styles for the root chip container. */
+  root?: Styles[];
+  /** Styles for the inner flex row container holding icon + label. */
+  chipContainer?: Styles[];
+  /** Styles for the prefix icon container (yagami-style API). */
+  prefixIconContainer?: Styles[];
+  /** Styles for the suffix icon container (yagami-style API). */
+  suffixIconContainer?: Styles[];
+  /** Styles for the top icon container. */
+  topIconContainer?: Styles[];
+  /** Styles for the label text wrapper. */
+  labelContainer?: Styles[];
+  /** Styles for the label Typography. */
+  labelTypography?: TypographyStyleConfigProps;
+  /** Styles for the cross (dismiss) icon wrapper. */
+  crossContainer?: Styles[];
+  /** Styles for the absolute counter container. */
+  counterContainer?: Styles[];
+  /** Styles for the counter bubble. */
+  counter?: Styles[];
+  /** Styles for the counter Typography. */
+  counterTypography?: TypographyStyleConfigProps;
+}
+
+export interface IChipProps {
+  /** Unique identifier for the chip. */
+  id?: string;
+  /** Props spread onto the cross icon SVG. */
+  crossIconProps?: SVGProps<SVGSVGElement>;
+
+  /** The label content of the chip. */
+  label?: ReactNode | string;
+
+  /** Typography variant for string labels. Defaults to 'B2'. */
+  labelVariant?: TypographyVariantType;
+
+  /** If true, shows the `Icon` at the specified `iconPosition`. */
+  showIcon?: boolean;
+
+  /** Position of the icon within the chip. */
+  iconPosition?: `${IconPosition}`;
+
+  /** The ReactNode representing the icon within the chip. */
+  Icon?: ReactNode;
+
+  /** Icon rendered before the label (takes precedence over `Icon` + iconPosition='left'). */
+  prefixIcon?: ReactNode;
+
+  /** Icon rendered after the label (takes precedence over `Icon` + iconPosition='right'). */
+  suffixIcon?: ReactNode;
+
+  /** Icon rendered above the label (takes precedence over `Icon` + iconPosition='top'). */
+  topIcon?: ReactNode;
+
+  /** If true, shows a counter within the chip. */
+  showCounter?: boolean;
+
+  /** The count value displayed in the counter. */
+  count?: number;
+
+  /** If true, the chip can be dismissed. */
+  isDismissible?: boolean;
+
+  /** If true, the chip is selected. */
+  isSelected?: boolean;
+
+  /** If true, the chip is disabled. */
+  isDisabled?: boolean;
+
+  /** Alias for `isDisabled` — kept for yagami parity. */
+  disabled?: boolean;
+
+  /** Callback function triggered on chip click. */
+  onClick?: () => void;
+
+  /** Callback function triggered on chip dismissal. */
+  onDismiss?: () => void;
+
+  /** The border width of the chip. */
+  borderWidth?: ChipBorderWidth;
+
+  /** Visual variant for the chip. */
+  variant?: ChipVariantType;
+
+  /** Size preset (sm | md). */
+  size?: ChipSize;
+
+  /** Style configuration for different parts of the chip. */
+  styleConfig?: IChipStyleConfig;
+
+  /** Show shimmer animation (web only). */
+  showShimmerAnimation?: boolean;
+}
+
+/**
+ * @deprecated Use `IChipProps`. Kept as an alias for legacy consumers that
+ * imported `ChipProps` from `@cleartrip/ct-design-chip`. The `styleConfig`
+ * slots have been migrated from `{ css, className }` objects to `Styles[]`
+ * arrays; legacy call sites will need to migrate.
+ */
+export type ChipProps = IChipProps;

package/dist/StyledChip/StyledChip.d.ts

@@ -1,7 +0,0 @@
-import { CSSProperties } from 'styled-components';
-import { StyledChipProps } from './type';
-declare const StyledChip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledChipProps & {
-    css?: CSSProperties | undefined;
-}, never>;
-export default StyledChip;
-//# sourceMappingURL=StyledChip.d.ts.map

package/dist/StyledChip/StyledChip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledChip.d.ts","sourceRoot":"","sources":["../../packages/components/Chip/src/StyledChip/StyledChip.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEzC,QAAA,MAAM,UAAU;;SAgCf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/StyledChip/index.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/Chip/src/StyledChip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/StyledChip/style.d.ts

@@ -1,7 +0,0 @@
-import { CSSObject } from 'styled-components';
-import { Theme } from '@cleartrip/ct-design-theme';
-import { StyledChipProps } from './type';
-export declare const getStyledChipStyles: ({ theme, backgroundColor, borderColor, borderRadius, borderWidth, cursor, paddingTop, paddingBottom, paddingLeft, paddingRight, boxShadow, webkitBoxShadow, }: StyledChipProps & {
-    theme: Theme;
-}) => CSSObject;
-//# sourceMappingURL=style.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../packages/components/Chip/src/StyledChip/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEzC,eAAO,MAAM,mBAAmB;WAaF,KAAK;MAAK,SAiBvC,CAAC"}

package/dist/StyledChip/type.d.ts

@@ -1,15 +0,0 @@
-import { CSSObject } from 'styled-components';
-export interface StyledChipProps {
-    borderColor?: string;
-    borderRadius?: string;
-    borderWidth?: string;
-    backgroundColor?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    cursor?: CSSObject['cursor'];
-    boxShadow?: string;
-    webkitBoxShadow?: string;
-}
-//# sourceMappingURL=type.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../packages/components/Chip/src/StyledChip/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B"}

package/dist/StyledCounter/StyledCounter.d.ts

@@ -1,7 +0,0 @@
-import { CSSProperties } from 'styled-components';
-import { StyledCounterProps } from './type';
-declare const StyledCounter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledCounterProps & {
-    css?: CSSProperties | undefined;
-}, never>;
-export default StyledCounter;
-//# sourceMappingURL=StyledCounter.d.ts.map

package/dist/StyledCounter/StyledCounter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledCounter.d.ts","sourceRoot":"","sources":["../../packages/components/Chip/src/StyledCounter/StyledCounter.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAE5C,QAAA,MAAM,aAAa;;SAElB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/StyledCounter/index.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/Chip/src/StyledCounter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/StyledCounter/style.d.ts

@@ -1,7 +0,0 @@
-import { CSSObject } from 'styled-components';
-import { Theme } from '@cleartrip/ct-design-theme';
-import { StyledCounterProps } from './type';
-export declare const getStyledCounterStyles: ({ backgroundColor, theme, }: StyledCounterProps & {
-    theme: Theme;
-}) => CSSObject;
-//# sourceMappingURL=style.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../packages/components/Chip/src/StyledCounter/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAE5C,eAAO,MAAM,sBAAsB;WAGF,KAAK;MAAK,SAU1C,CAAC"}

package/dist/StyledCounter/type.d.ts

@@ -1,4 +0,0 @@
-export interface StyledCounterProps {
-    backgroundColor?: string;
-}
-//# sourceMappingURL=type.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../packages/components/Chip/src/StyledCounter/type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B"}