# @cleartrip/ct-design-style-manager

> Style hooks

Latest version **5.28.0** (published 2026-10-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @cleartrip/ct-design-style-manager
pnpm add @cleartrip/ct-design-style-manager
yarn add @cleartrip/ct-design-style-manager
bun add @cleartrip/ct-design-style-manager
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.28.0 |
| Published | 2026-10-21 |
| First published | 2025-10-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 345.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rahul Chandankeri |
| Maintainers | rahulct_com, supragya.chauhan, nareshkapse_ct, saranshdawra, ct_devops, sidhantrajan, hello_world_arya, ritesh.kumarjena, mohitjaincleartrip, ashwin.ct, ashokmpatel, amansaxena1, aakrishtmalik, prateek.oraon, ashwin-ui-ct, shashi-kumar |

## Links

- npm: https://www.npmjs.com/package/@cleartrip/ct-design-style-manager
- npm.io page: https://npm.io/package/@cleartrip/ct-design-style-manager

## Dependencies (4)

- [@emotion/css](https://npm.io/package/@emotion/css.md) 11.13.4
- [@cleartrip/ct-design-theme](https://npm.io/package/@cleartrip/ct-design-theme.md) 5.28.0
- [@cleartrip/ct-design-types](https://npm.io/package/@cleartrip/ct-design-types.md) 5.28.0
- [@react-native/normalize-colors](https://npm.io/package/@react-native/normalize-colors.md) ^0.78.1

## Recent versions

- 5.28.0 (latest) — 2026-10-21
- 5.27.0-SNAPSHOT-native-main.16 (SNAPSHOT-native-main) — 2026-10-21
- 5.27.1-SNAPSHOT-holiday-packages-bottomsheet-fix.0 (SNAPSHOT-holiday-packages-bottomsheet-fix) — 2026-10-21
- 5.27.1-SNAPSHOT-inter-2.0 (SNAPSHOT-inter-2) — 2026-10-20
- 5.27.1-SNAPSHOT-impression-fix.0 (SNAPSHOT-impression-fix) — 2026-10-16
- 5.27.1-SNAPSHOT-inter-1.0 (SNAPSHOT-inter-1) — 2026-10-14
- 5.27.1-SNAPSHOT-figtree-261013-6.0 (SNAPSHOT-figtree-261013-6) — 2026-10-13
- 5.27.1-SNAPSHOT-figtree-261013-5.0 (SNAPSHOT-figtree-261013-5) — 2026-10-13
- 5.27.1-SNAPSHOT-figtree-261013-4.0 (SNAPSHOT-figtree-261013-4) — 2026-10-13
- 5.27.1-SNAPSHOT-figtree-261013-3.0 (SNAPSHOT-figtree-261013-3) — 2026-10-13
- 5.27.1-SNAPSHOT-figtree-261013-2.0 (SNAPSHOT-figtree-261013-2) — 2026-10-13
- 5.27.1-SNAPSHOT-figtree-261013-1.0 (SNAPSHOT-figtree-261013-1) — 2026-10-13
- 5.26.1-SNAPSHOT-biztrip-snapshot-13oct.0 (SNAPSHOT-biztrip-snapshot-13oct) — 2026-10-13
- 5.27.1-SNAPSHOT-icons-261003.0 (SNAPSHOT-icons-261003) — 2026-10-03
- 5.26.1-SNAPSHOT-hotels-search-260930.0 (SNAPSHOT-hotels-search-260930) — 2026-09-30
- … 379 more at https://npm.io/package/@cleartrip/ct-design-style-manager/versions

## README

# `@cleartrip/ct-design-style-manager`

A collection of styling utilities for the Cleartrip Design System. Provides hooks and factory functions that convert style definitions into [Emotion](https://emotion.sh/docs/introduction) class names for web, while keeping full compatibility with the React Native style shape.

---

## Installation

```bash
pnpm add @cleartrip/ct-design-style-manager
```

---

## API Reference

### `makeStyles`

A **non-hook** factory for React-Native-first styles.

Accepts a factory function that receives the current theme and returns a `NamedStyles` object (using `ViewStyle`, `TextStyle`, or `ImageStyle` properties). The styles are validated, preprocessed (RN → web conversions, shadow/textShadow expansion), and each key is converted to an Emotion class name string.

```ts
import { makeStyles } from '@cleartrip/ct-design-style-manager';

const styles = makeStyles((theme) => ({
  container: {
    flexDirection: 'row',
    backgroundColor: theme.color.neutral_10,
    padding: theme.spacing.s4,
  },
  title: {
    fontSize: theme.font.size.large,
    color: theme.color.neutral_90,
  },
}));

// styles.container → 'css-<hash>'
// styles.title     → 'css-<hash>'
```

**Signature**

```ts
function makeStyles<T extends NamedStyles<T>>(
  styleFactory: (theme: Theme) => T | NamedStyles<T> | NamedStyles<unknown>,
  customTheme?: Theme,
): T;
```

> Use `customTheme` to override the active theme (e.g. in tests or server-side rendering).

---

### `useStyles`

The **hook** counterpart of `makeStyles`. Uses `useTheme()` to read the active theme reactively and memoises the result via `useStableMemo` so styles are only recomputed when `deps` change.

```ts
import { useStyles } from '@cleartrip/ct-design-style-manager';

function MyComponent() {
  const styles = useStyles(
    (theme) => ({
      container: { padding: theme.spacing.s4 },
      label: { color: theme.color.neutral_90 },
    }),
    [],
  );

  return <div className={styles.container}>…</div>;
}
```

**Signature**

```ts
function useStyles<T extends NamedStyles<T>>(
  styleFactory: (theme: Theme) => T | NamedStyles<T> | NamedStyles<unknown>,
  deps: DependencyList,
): T;
```

---

### `makeWebStyles` ✨ new

A **non-hook** factory for **web-only** styles using standard React `CSSProperties`.

Unlike `makeStyles`, no React-Native preprocessing is applied — values are passed directly to Emotion. Use this when you are authoring web-only components and want to use standard CSS property names (e.g. `backgroundColor`, `fontSize`, `display`).

```ts
import { makeWebStyles } from '@cleartrip/ct-design-style-manager';

const styles = makeWebStyles((theme) => ({
  container: {
    display: 'flex',
    gap: theme.spacing.s4,
    backgroundColor: theme.color.neutral_10,
  },
  title: {
    color: theme.color.neutral_90,
    fontSize: 16,
    fontWeight: 600,
  },
}));

// styles.container → 'css-<hash>'
// styles.title     → 'css-<hash>'
```

**Signature**

```ts
function makeWebStyles<T extends NamedWebStyles<T>>(
  styleFactory: (theme: Theme) => T | NamedWebStyles<T>,
  customTheme?: Theme,
): { [P in keyof T]: string };
```

where `NamedWebStyles<T> = { [P in keyof T]: CSSProperties }`.

> Use `customTheme` to override the active theme (e.g. in tests or SSR).

---

### `useWebStyles` ✨ new

The **hook** counterpart of `makeWebStyles`. Reads the active theme via `useTheme()` and memoises via `useStableMemo`.

```ts
import { useWebStyles } from '@cleartrip/ct-design-style-manager';

function MyComponent() {
  const styles = useWebStyles(
    (theme) => ({
      wrapper: {
        display: 'flex',
        flexDirection: 'column',
        gap: theme.spacing.s4,
      },
      heading: {
        color: theme.color.neutral_90,
        fontSize: 20,
      },
    }),
    [],
  );

  return (
    <div className={styles.wrapper}>
      <h1 className={styles.heading}>Hello</h1>
    </div>
  );
}
```

**Signature**

```ts
function useWebStyles<T extends NamedWebStyles<T>>(
  styleFactory: (theme: Theme) => T | NamedWebStyles<T>,
  deps: DependencyList,
): { [P in keyof T]: string };
```

---

### `useWebMergeStyles` _(deprecated)_

Merges an array of style sources — existing Emotion class name strings or raw style objects — into a single Emotion class string. Only use in terminal/leaf components.

```ts
import { useWebMergeStyles } from '@cleartrip/ct-design-style-manager';

const className = useWebMergeStyles([styles.base, isActive && styles.active, propClassName], [isActive, propClassName]);
```

**Signature**

```ts
const useWebMergeStyles: <T extends Styles | string>(styles: T[], deps: DependencyList) => string;
```

---

### `useNativeMergeStyles` _(deprecated)_

Merges an array of React Native `StyleProp` values. Only use in terminal/leaf native components.

```ts
import { useNativeMergeStyles } from '@cleartrip/ct-design-style-manager';

const merged = useNativeMergeStyles([baseStyle, conditionalStyle], [dep]);
```

**Signature**

```ts
function useNativeMergeStyles<T extends ViewStyle | ImageStyle | TextStyle>(
  styles: StyleProp<T>[],
  deps: DependencyList,
): StyleProp<T>;
```

---

### `gs` — Global Layout Styles

Pre-built global layout utility class names generated once at module load time (no theme dependency). Import specific keys as needed.

```ts
import { gs } from '@cleartrip/ct-design-style-manager';

<div className={gs.flexRow}>…</div>
```

---

## Choosing the right API

| Scenario                                                      | Use                              |
| ------------------------------------------------------------- | -------------------------------- |
| Cross-platform component (web + RN) using RN-style properties | `makeStyles` / `useStyles`       |
| Web-only component using standard CSS properties              | `makeWebStyles` / `useWebStyles` |
| Merging multiple class names / style objects at runtime (web) | `useWebMergeStyles`              |
| Merging multiple style objects at runtime (native)            | `useNativeMergeStyles`           |
| Static layout utilities (no theme needed)                     | `gs`                             |

---

## Key differences: `makeStyles` vs `makeWebStyles`

|                     | `makeStyles`                                         | `makeWebStyles`                                      |
| ------------------- | ---------------------------------------------------- | ---------------------------------------------------- |
| Input property type | `ViewStyle` / `TextStyle` / `ImageStyle` (RN)        | `CSSProperties` (React / web)                        |
| Preprocessing       | ✅ RN → web conversions, shadow expansion            | ❌ None — passed directly to Emotion                 |
| Validation          | ✅ RN style validation                               | ❌ Not applied                                       |
| Platform            | Cross-platform                                       | Web only                                             |
| Output              | Emotion class name strings (same key shape as input) | Emotion class name strings (same key shape as input) |

---
_Source: https://npm.io/package/@cleartrip/ct-design-style-manager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._