@cleartrip/ct-design-components 4.0.0-TEST.3 → 4.1.0-SNAPSHOT-native-main.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +211 -0
- package/dist/3DCarousel.d.ts +2 -0
- package/dist/3DCarousel.d.ts.map +1 -0
- package/dist/Accordion.d.ts +2 -0
- package/dist/Accordion.d.ts.map +1 -0
- package/dist/AccordionGroup.d.ts +2 -0
- package/dist/AccordionGroup.d.ts.map +1 -0
- package/dist/ActivityIndicator.d.ts +2 -0
- package/dist/ActivityIndicator.d.ts.map +1 -0
- package/dist/AlertCallout.d.ts +2 -0
- package/dist/AlertCallout.d.ts.map +1 -0
- package/dist/Animated.d.ts +2 -0
- package/dist/Animated.d.ts.map +1 -0
- package/dist/Badge.d.ts +2 -0
- package/dist/Badge.d.ts.map +1 -0
- package/dist/Bottomsheet.d.ts +2 -0
- package/dist/Bottomsheet.d.ts.map +1 -0
- package/dist/Box.d.ts +2 -0
- package/dist/Box.d.ts.map +1 -0
- package/dist/BulletedList.d.ts +2 -0
- package/dist/BulletedList.d.ts.map +1 -0
- package/dist/Button.d.ts +2 -0
- package/dist/Button.d.ts.map +1 -0
- package/dist/Calendar.d.ts +2 -0
- package/dist/Calendar.d.ts.map +1 -0
- package/dist/Card.d.ts +2 -0
- package/dist/Card.d.ts.map +1 -0
- package/dist/Carousel.d.ts +2 -0
- package/dist/Carousel.d.ts.map +1 -0
- package/dist/Checkbox.d.ts +2 -0
- package/dist/Checkbox.d.ts.map +1 -0
- package/dist/CheckboxGroup.d.ts +2 -0
- package/dist/CheckboxGroup.d.ts.map +1 -0
- package/dist/Chip.d.ts +2 -0
- package/dist/Chip.d.ts.map +1 -0
- package/dist/ChipDropdown.d.ts +2 -0
- package/dist/ChipDropdown.d.ts.map +1 -0
- package/dist/ConditionalWrap.d.ts +2 -0
- package/dist/ConditionalWrap.d.ts.map +1 -0
- package/dist/Container.d.ts +2 -0
- package/dist/Container.d.ts.map +1 -0
- package/dist/Counter.d.ts +2 -0
- package/dist/Counter.d.ts.map +1 -0
- package/dist/Dialog.d.ts +2 -0
- package/dist/Dialog.d.ts.map +1 -0
- package/dist/Divider.d.ts +2 -0
- package/dist/Divider.d.ts.map +1 -0
- package/dist/DottedLoader.d.ts +2 -0
- package/dist/DottedLoader.d.ts.map +1 -0
- package/dist/Dropdown.d.ts +2 -0
- package/dist/Dropdown.d.ts.map +1 -0
- package/dist/Field.d.ts +2 -0
- package/dist/Field.d.ts.map +1 -0
- package/dist/HorizontalScroll.d.ts +2 -0
- package/dist/HorizontalScroll.d.ts.map +1 -0
- package/dist/IconButton.d.ts +2 -0
- package/dist/IconButton.d.ts.map +1 -0
- package/dist/IdContainer.d.ts +2 -0
- package/dist/IdContainer.d.ts.map +1 -0
- package/dist/Image.d.ts +2 -0
- package/dist/Image.d.ts.map +1 -0
- package/dist/IntersectionObserver.d.ts +2 -0
- package/dist/IntersectionObserver.d.ts.map +1 -0
- package/dist/LinearGradient.d.ts +2 -0
- package/dist/LinearGradient.d.ts.map +1 -0
- package/dist/List.d.ts +2 -0
- package/dist/List.d.ts.map +1 -0
- package/dist/LottiePlayer.d.ts +2 -0
- package/dist/LottiePlayer.d.ts.map +1 -0
- package/dist/Modal.d.ts +2 -0
- package/dist/Modal.d.ts.map +1 -0
- package/dist/NavTabs.d.ts +2 -0
- package/dist/NavTabs.d.ts.map +1 -0
- package/dist/OutsideClickHandler.d.ts +2 -0
- package/dist/OutsideClickHandler.d.ts.map +1 -0
- package/dist/Overlay.d.ts +2 -0
- package/dist/Overlay.d.ts.map +1 -0
- package/dist/Portal.d.ts +2 -0
- package/dist/Portal.d.ts.map +1 -0
- package/dist/ProgressBar.d.ts +2 -0
- package/dist/ProgressBar.d.ts.map +1 -0
- package/dist/Radio.d.ts +2 -0
- package/dist/Radio.d.ts.map +1 -0
- package/dist/RadioGroup.d.ts +2 -0
- package/dist/RadioGroup.d.ts.map +1 -0
- package/dist/RangeSlider.d.ts +2 -0
- package/dist/RangeSlider.d.ts.map +1 -0
- package/dist/Rating.d.ts +2 -0
- package/dist/Rating.d.ts.map +1 -0
- package/dist/RatingProgressBar.d.ts +2 -0
- package/dist/RatingProgressBar.d.ts.map +1 -0
- package/dist/SafeAreaContainer.d.ts +2 -0
- package/dist/SafeAreaContainer.d.ts.map +1 -0
- package/dist/ScrollContainer.d.ts +2 -0
- package/dist/ScrollContainer.d.ts.map +1 -0
- package/dist/Segment.d.ts +2 -0
- package/dist/Segment.d.ts.map +1 -0
- package/dist/Shimmer.d.ts +2 -0
- package/dist/Shimmer.d.ts.map +1 -0
- package/dist/SingleSelectChip.d.ts +2 -0
- package/dist/SingleSelectChip.d.ts.map +1 -0
- package/dist/Spacer.d.ts +2 -0
- package/dist/Spacer.d.ts.map +1 -0
- package/dist/Spinner.d.ts +2 -0
- package/dist/Spinner.d.ts.map +1 -0
- package/dist/StickyContainer.d.ts +2 -0
- package/dist/StickyContainer.d.ts.map +1 -0
- package/dist/Toast.d.ts +2 -0
- package/dist/Toast.d.ts.map +1 -0
- package/dist/ToggleSwitch.d.ts +2 -0
- package/dist/ToggleSwitch.d.ts.map +1 -0
- package/dist/Tooltip.d.ts +2 -0
- package/dist/Tooltip.d.ts.map +1 -0
- package/dist/Truncate.d.ts +2 -0
- package/dist/Truncate.d.ts.map +1 -0
- package/dist/Typography.d.ts +2 -0
- package/dist/Typography.d.ts.map +1 -0
- package/dist/VerticalTicker.d.ts +2 -0
- package/dist/VerticalTicker.d.ts.map +1 -0
- package/dist/ct-design-components.cjs.js +102 -256
- package/dist/ct-design-components.cjs.js.map +1 -1
- package/dist/ct-design-components.umd.js +1 -494
- package/dist/ct-design-components.umd.js.map +1 -1
- package/dist/esm/3DCarousel.d.ts +2 -0
- package/dist/esm/3DCarousel.d.ts.map +1 -0
- package/dist/esm/Accordion.d.ts +2 -0
- package/dist/esm/Accordion.d.ts.map +1 -0
- package/dist/esm/AccordionGroup.d.ts +2 -0
- package/dist/esm/AccordionGroup.d.ts.map +1 -0
- package/dist/esm/ActivityIndicator.d.ts +2 -0
- package/dist/esm/ActivityIndicator.d.ts.map +1 -0
- package/dist/esm/AlertCallout.d.ts +2 -0
- package/dist/esm/AlertCallout.d.ts.map +1 -0
- package/dist/esm/Animated.d.ts +2 -0
- package/dist/esm/Animated.d.ts.map +1 -0
- package/dist/esm/Badge.d.ts +2 -0
- package/dist/esm/Badge.d.ts.map +1 -0
- package/dist/esm/Bottomsheet.d.ts +2 -0
- package/dist/esm/Bottomsheet.d.ts.map +1 -0
- package/dist/esm/Box.d.ts +2 -0
- package/dist/esm/Box.d.ts.map +1 -0
- package/dist/esm/BulletedList.d.ts +2 -0
- package/dist/esm/BulletedList.d.ts.map +1 -0
- package/dist/esm/Button.d.ts +2 -0
- package/dist/esm/Button.d.ts.map +1 -0
- package/dist/esm/Calendar.d.ts +2 -0
- package/dist/esm/Calendar.d.ts.map +1 -0
- package/dist/esm/Card.d.ts +2 -0
- package/dist/esm/Card.d.ts.map +1 -0
- package/dist/esm/Carousel.d.ts +2 -0
- package/dist/esm/Carousel.d.ts.map +1 -0
- package/dist/esm/Checkbox.d.ts +2 -0
- package/dist/esm/Checkbox.d.ts.map +1 -0
- package/dist/esm/CheckboxGroup.d.ts +2 -0
- package/dist/esm/CheckboxGroup.d.ts.map +1 -0
- package/dist/esm/Chip.d.ts +2 -0
- package/dist/esm/Chip.d.ts.map +1 -0
- package/dist/esm/ChipDropdown.d.ts +2 -0
- package/dist/esm/ChipDropdown.d.ts.map +1 -0
- package/dist/esm/ConditionalWrap.d.ts +2 -0
- package/dist/esm/ConditionalWrap.d.ts.map +1 -0
- package/dist/esm/Container.d.ts +2 -0
- package/dist/esm/Container.d.ts.map +1 -0
- package/dist/esm/Counter.d.ts +2 -0
- package/dist/esm/Counter.d.ts.map +1 -0
- package/dist/esm/Dialog.d.ts +2 -0
- package/dist/esm/Dialog.d.ts.map +1 -0
- package/dist/esm/Divider.d.ts +2 -0
- package/dist/esm/Divider.d.ts.map +1 -0
- package/dist/esm/DottedLoader.d.ts +2 -0
- package/dist/esm/DottedLoader.d.ts.map +1 -0
- package/dist/esm/Dropdown.d.ts +2 -0
- package/dist/esm/Dropdown.d.ts.map +1 -0
- package/dist/esm/Field.d.ts +2 -0
- package/dist/esm/Field.d.ts.map +1 -0
- package/dist/esm/HorizontalScroll.d.ts +2 -0
- package/dist/esm/HorizontalScroll.d.ts.map +1 -0
- package/dist/esm/IconButton.d.ts +2 -0
- package/dist/esm/IconButton.d.ts.map +1 -0
- package/dist/esm/IdContainer.d.ts +2 -0
- package/dist/esm/IdContainer.d.ts.map +1 -0
- package/dist/esm/Image.d.ts +2 -0
- package/dist/esm/Image.d.ts.map +1 -0
- package/dist/esm/IntersectionObserver.d.ts +2 -0
- package/dist/esm/IntersectionObserver.d.ts.map +1 -0
- package/dist/esm/LinearGradient.d.ts +2 -0
- package/dist/esm/LinearGradient.d.ts.map +1 -0
- package/dist/esm/List.d.ts +2 -0
- package/dist/esm/List.d.ts.map +1 -0
- package/dist/esm/LottiePlayer.d.ts +2 -0
- package/dist/esm/LottiePlayer.d.ts.map +1 -0
- package/dist/esm/Modal.d.ts +2 -0
- package/dist/esm/Modal.d.ts.map +1 -0
- package/dist/esm/NavTabs.d.ts +2 -0
- package/dist/esm/NavTabs.d.ts.map +1 -0
- package/dist/esm/OutsideClickHandler.d.ts +2 -0
- package/dist/esm/OutsideClickHandler.d.ts.map +1 -0
- package/dist/esm/Overlay.d.ts +2 -0
- package/dist/esm/Overlay.d.ts.map +1 -0
- package/dist/esm/Portal.d.ts +2 -0
- package/dist/esm/Portal.d.ts.map +1 -0
- package/dist/esm/ProgressBar.d.ts +2 -0
- package/dist/esm/ProgressBar.d.ts.map +1 -0
- package/dist/esm/Radio.d.ts +2 -0
- package/dist/esm/Radio.d.ts.map +1 -0
- package/dist/esm/RadioGroup.d.ts +2 -0
- package/dist/esm/RadioGroup.d.ts.map +1 -0
- package/dist/esm/RangeSlider.d.ts +2 -0
- package/dist/esm/RangeSlider.d.ts.map +1 -0
- package/dist/esm/Rating.d.ts +2 -0
- package/dist/esm/Rating.d.ts.map +1 -0
- package/dist/esm/RatingProgressBar.d.ts +2 -0
- package/dist/esm/RatingProgressBar.d.ts.map +1 -0
- package/dist/esm/SafeAreaContainer.d.ts +2 -0
- package/dist/esm/SafeAreaContainer.d.ts.map +1 -0
- package/dist/esm/ScrollContainer.d.ts +2 -0
- package/dist/esm/ScrollContainer.d.ts.map +1 -0
- package/dist/esm/Segment.d.ts +2 -0
- package/dist/esm/Segment.d.ts.map +1 -0
- package/dist/esm/Shimmer.d.ts +2 -0
- package/dist/esm/Shimmer.d.ts.map +1 -0
- package/dist/esm/SingleSelectChip.d.ts +2 -0
- package/dist/esm/SingleSelectChip.d.ts.map +1 -0
- package/dist/esm/Spacer.d.ts +2 -0
- package/dist/esm/Spacer.d.ts.map +1 -0
- package/dist/esm/Spinner.d.ts +2 -0
- package/dist/esm/Spinner.d.ts.map +1 -0
- package/dist/esm/StickyContainer.d.ts +2 -0
- package/dist/esm/StickyContainer.d.ts.map +1 -0
- package/dist/esm/Toast.d.ts +2 -0
- package/dist/esm/Toast.d.ts.map +1 -0
- package/dist/esm/ToggleSwitch.d.ts +2 -0
- package/dist/esm/ToggleSwitch.d.ts.map +1 -0
- package/dist/esm/Tooltip.d.ts +2 -0
- package/dist/esm/Tooltip.d.ts.map +1 -0
- package/dist/esm/Truncate.d.ts +2 -0
- package/dist/esm/Truncate.d.ts.map +1 -0
- package/dist/esm/Typography.d.ts +2 -0
- package/dist/esm/Typography.d.ts.map +1 -0
- package/dist/esm/VerticalTicker.d.ts +2 -0
- package/dist/esm/VerticalTicker.d.ts.map +1 -0
- package/dist/esm/index.d.ts +60 -0
- package/dist/esm/index.d.ts.map +1 -0
- package/dist/esm/index.js +60 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.ts +24 -56
- package/dist/index.d.ts.map +1 -1
- package/package.json +379 -101
- package/src/3DCarousel.ts +1 -0
- package/src/Accordion.ts +1 -0
- package/src/AccordionGroup.ts +1 -0
- package/src/ActivityIndicator.ts +1 -0
- package/src/AlertCallout.ts +1 -0
- package/src/Animated.ts +1 -0
- package/src/Badge.ts +1 -0
- package/src/Bottomsheet.ts +1 -0
- package/src/Box.ts +1 -0
- package/src/BulletedList.ts +1 -0
- package/src/Button.ts +1 -0
- package/src/Calendar.ts +1 -0
- package/src/Card.ts +1 -0
- package/src/Carousel.ts +1 -0
- package/src/Checkbox.ts +1 -0
- package/src/CheckboxGroup.ts +1 -0
- package/src/Chip.ts +1 -0
- package/src/ChipDropdown.ts +1 -0
- package/src/ConditionalWrap.ts +1 -0
- package/src/Container.ts +1 -0
- package/src/Counter.ts +1 -0
- package/src/Dialog.ts +1 -0
- package/src/Divider.ts +1 -0
- package/src/DottedLoader.ts +1 -0
- package/src/Dropdown.ts +1 -0
- package/src/Field.ts +1 -0
- package/src/HorizontalScroll.ts +1 -0
- package/src/IconButton.ts +1 -0
- package/src/IdContainer.ts +1 -0
- package/src/Image.ts +1 -0
- package/src/IntersectionObserver.ts +1 -0
- package/src/LinearGradient.ts +1 -0
- package/src/List.ts +1 -0
- package/src/LottiePlayer.ts +1 -0
- package/src/Modal.ts +1 -0
- package/src/NavTabs.ts +1 -0
- package/src/OutsideClickHandler.ts +1 -0
- package/src/Overlay.ts +1 -0
- package/src/Portal.ts +1 -0
- package/src/ProgressBar.ts +1 -0
- package/src/Radio.ts +1 -0
- package/src/RadioGroup.ts +1 -0
- package/src/RangeSlider.ts +1 -0
- package/src/Rating.ts +1 -0
- package/src/RatingProgressBar.ts +1 -0
- package/src/SafeAreaContainer.ts +1 -0
- package/src/ScrollContainer.ts +1 -0
- package/src/Segment.ts +1 -0
- package/src/Shimmer.ts +1 -0
- package/src/SingleSelectChip.ts +1 -0
- package/src/Spacer.ts +1 -0
- package/src/Spinner.ts +1 -0
- package/src/StickyContainer.ts +1 -0
- package/src/Toast.ts +1 -0
- package/src/ToggleSwitch.ts +1 -0
- package/src/Tooltip.ts +1 -0
- package/src/Truncate.ts +1 -0
- package/src/Typography.ts +1 -0
- package/src/VerticalTicker.ts +1 -0
- package/src/index.ts +59 -0
- package/dist/ct-design-components.browser.cjs.js +0 -2
- package/dist/ct-design-components.browser.cjs.js.map +0 -1
- package/dist/ct-design-components.browser.esm.js +0 -2
- package/dist/ct-design-components.browser.esm.js.map +0 -1
- package/dist/ct-design-components.esm.js +0 -82
- package/dist/ct-design-components.esm.js.map +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
# @cleartrip/ct-design-components
|
|
2
|
+
|
|
3
|
+
> Core components collection for Cleartrip Design System
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@cleartrip/ct-design-components)
|
|
6
|
+
[](https://opensource.org/licenses/ISC)
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
`@cleartrip/ct-design-components` is a foundational package in the Cleartrip Design System that provides essential UI components with cross-platform support for React and React Native applications. This package focuses on core layout and container components with advanced features like haptic feedback support.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
# npm
|
|
16
|
+
npm install @cleartrip/ct-design-components
|
|
17
|
+
|
|
18
|
+
# yarn
|
|
19
|
+
yarn add @cleartrip/ct-design-components
|
|
20
|
+
|
|
21
|
+
# pnpm
|
|
22
|
+
pnpm add @cleartrip/ct-design-components
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Components
|
|
26
|
+
|
|
27
|
+
### Container
|
|
28
|
+
|
|
29
|
+
A versatile container component that serves as a foundational layout element with support for haptic feedback, event handling, and flexible styling.
|
|
30
|
+
|
|
31
|
+
#### Features
|
|
32
|
+
|
|
33
|
+
- **Cross-platform**: Works seamlessly on React and React Native
|
|
34
|
+
- **Haptic Feedback**: Built-in haptic feedback support with customizable intensity
|
|
35
|
+
- **Flexible Rendering**: Supports multiple HTML semantic elements (`main`, `section`, `article`, `div`, `p`)
|
|
36
|
+
- **Event Handling**: Mouse events, click handlers, and layout change callbacks
|
|
37
|
+
- **Accessibility**: Focus management and measurement capabilities
|
|
38
|
+
- **Styling**: Custom style configuration with design system integration
|
|
39
|
+
|
|
40
|
+
#### Basic Usage
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { Container } from '@cleartrip/ct-design-components';
|
|
44
|
+
|
|
45
|
+
function App() {
|
|
46
|
+
return (
|
|
47
|
+
<Container
|
|
48
|
+
as="main"
|
|
49
|
+
onClick={(event) => console.log('Container clicked')}
|
|
50
|
+
styleConfig={{
|
|
51
|
+
root: [{ padding: '16px', backgroundColor: '#f5f5f5' }]
|
|
52
|
+
}}
|
|
53
|
+
>
|
|
54
|
+
<h1>Welcome to Cleartrip</h1>
|
|
55
|
+
<p>Your content goes here...</p>
|
|
56
|
+
</Container>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
#### Haptic Feedback
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
<Container
|
|
65
|
+
hapticEnabled={true}
|
|
66
|
+
hapticVariant="subtle"
|
|
67
|
+
hapticRepeat={false}
|
|
68
|
+
onClick={() => console.log('Haptic feedback triggered')}
|
|
69
|
+
>
|
|
70
|
+
Interactive content with haptic feedback
|
|
71
|
+
</Container>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
#### Advanced Usage with Ref
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import { Container, ContainerRef } from '@cleartrip/ct-design-components';
|
|
78
|
+
import { useRef } from 'react';
|
|
79
|
+
|
|
80
|
+
function MyComponent() {
|
|
81
|
+
const containerRef = useRef<ContainerRef>(null);
|
|
82
|
+
|
|
83
|
+
const handleFocus = () => {
|
|
84
|
+
containerRef.current?.focus();
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
const measureContainer = () => {
|
|
88
|
+
containerRef.current?.measure((x, y, width, height, pageX, pageY) => {
|
|
89
|
+
console.log('Container dimensions:', { x, y, width, height, pageX, pageY });
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
return (
|
|
94
|
+
<Container
|
|
95
|
+
ref={containerRef}
|
|
96
|
+
onLayout={(event) => console.log('Layout changed:', event.layout)}
|
|
97
|
+
onMouseEnter={() => console.log('Mouse entered')}
|
|
98
|
+
onMouseLeave={() => console.log('Mouse left')}
|
|
99
|
+
>
|
|
100
|
+
Content with measurement and event handling
|
|
101
|
+
</Container>
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## API Reference
|
|
107
|
+
|
|
108
|
+
### Container Props
|
|
109
|
+
|
|
110
|
+
| Prop | Type | Default | Description |
|
|
111
|
+
|------|------|---------|-------------|
|
|
112
|
+
| `id` | `string` | - | HTML id attribute |
|
|
113
|
+
| `children` | `React.ReactNode` | - | Child elements to render |
|
|
114
|
+
| `as` | `'main' \| 'section' \| 'article' \| 'div' \| 'p'` | `'div'` | HTML element type to render |
|
|
115
|
+
| `showScrollIndicator` | `boolean` | - | Show scroll indicator (React Native) |
|
|
116
|
+
| `onClick` | `(event: unknown) => void` | - | Click event handler |
|
|
117
|
+
| `onLayout` | `(event: LayoutEvent) => void` | - | Layout change handler (React Native) |
|
|
118
|
+
| `onMouseEnter` | `MouseEventHandler<HTMLElement>` | - | Mouse enter handler |
|
|
119
|
+
| `onMouseLeave` | `MouseEventHandler<HTMLElement>` | - | Mouse leave handler |
|
|
120
|
+
| `onTransitionEnd` | `() => void` | - | Transition end handler |
|
|
121
|
+
| `styleConfig` | `{ root?: Styles[] }` | - | Custom style configuration |
|
|
122
|
+
| `hapticEnabled` | `boolean` | `false` | Enable haptic feedback |
|
|
123
|
+
| `hapticVariant` | `'subtle' \| 'loud'` | `'subtle'` | Haptic feedback intensity |
|
|
124
|
+
| `hapticRepeat` | `boolean` | `false` | Repeat haptic feedback |
|
|
125
|
+
|
|
126
|
+
### Container Ref Methods
|
|
127
|
+
|
|
128
|
+
| Method | Description |
|
|
129
|
+
|--------|-------------|
|
|
130
|
+
| `focus()` | Focus the container element |
|
|
131
|
+
| `getBoundingRectWithCallback(callback?)` | Get bounding rectangle with callback |
|
|
132
|
+
| `measure(callback)` | Measure container dimensions and position |
|
|
133
|
+
| `getElementRef()` | Get the underlying element reference |
|
|
134
|
+
|
|
135
|
+
## Related Packages
|
|
136
|
+
|
|
137
|
+
The Cleartrip Design System includes 60+ specialized component packages:
|
|
138
|
+
|
|
139
|
+
### Core Components
|
|
140
|
+
- `@cleartrip/ct-design-button` - Button components
|
|
141
|
+
- `@cleartrip/ct-design-typography` - Text and typography
|
|
142
|
+
- `@cleartrip/ct-design-card` - Card layouts
|
|
143
|
+
- `@cleartrip/ct-design-box` - Layout containers
|
|
144
|
+
|
|
145
|
+
### Form Components
|
|
146
|
+
- `@cleartrip/ct-design-field` - Form fields
|
|
147
|
+
- `@cleartrip/ct-design-checkbox` - Checkboxes
|
|
148
|
+
- `@cleartrip/ct-design-radio` - Radio buttons
|
|
149
|
+
- `@cleartrip/ct-design-dropdown` - Dropdown menus
|
|
150
|
+
|
|
151
|
+
### Navigation
|
|
152
|
+
- `@cleartrip/ct-design-nav-tabs` - Navigation tabs
|
|
153
|
+
- `@cleartrip/ct-design-breadcrumb` - Breadcrumb navigation
|
|
154
|
+
|
|
155
|
+
### Feedback
|
|
156
|
+
- `@cleartrip/ct-design-toast` - Toast notifications
|
|
157
|
+
- `@cleartrip/ct-design-modal` - Modal dialogs
|
|
158
|
+
- `@cleartrip/ct-design-tooltip` - Tooltips
|
|
159
|
+
- `@cleartrip/ct-design-spinner` - Loading indicators
|
|
160
|
+
|
|
161
|
+
### Data Display
|
|
162
|
+
- `@cleartrip/ct-design-accordion` - Collapsible content
|
|
163
|
+
- `@cleartrip/ct-design-carousel` - Content carousels
|
|
164
|
+
- `@cleartrip/ct-design-rating` - Star ratings
|
|
165
|
+
- `@cleartrip/ct-design-badge` - Status badges
|
|
166
|
+
|
|
167
|
+
[See complete component list](https://design.cleartrip.com/components)
|
|
168
|
+
|
|
169
|
+
## Browser Support
|
|
170
|
+
|
|
171
|
+
- **React**: 16.8.0 or higher
|
|
172
|
+
- **React DOM**: 16.8.0 or higher
|
|
173
|
+
- **React Native**: 0.68.0 or higher (optional peer dependency)
|
|
174
|
+
|
|
175
|
+
## Module Formats
|
|
176
|
+
|
|
177
|
+
This package supports multiple module formats:
|
|
178
|
+
|
|
179
|
+
- **ES Modules**: `dist/ct-design-components.esm.js`
|
|
180
|
+
- **CommonJS**: `dist/ct-design-components.cjs.js`
|
|
181
|
+
- **Browser**: Optimized browser builds available
|
|
182
|
+
- **TypeScript**: Full TypeScript definitions included
|
|
183
|
+
|
|
184
|
+
## Development
|
|
185
|
+
|
|
186
|
+
```bash
|
|
187
|
+
# Build the package
|
|
188
|
+
pnpm build-package
|
|
189
|
+
|
|
190
|
+
# Watch for changes during development
|
|
191
|
+
pnpm watch-package
|
|
192
|
+
|
|
193
|
+
# Clean build
|
|
194
|
+
pnpm build-package:clean
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
## Contributing
|
|
198
|
+
|
|
199
|
+
This package is part of the Cleartrip Design System. For contribution guidelines, please refer to the main repository documentation.
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
ISC
|
|
204
|
+
|
|
205
|
+
## Changelog
|
|
206
|
+
|
|
207
|
+
See [CHANGELOG.md](./CHANGELOG.md) for version history and updates.
|
|
208
|
+
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
**Cleartrip Design System** | [Documentation](https://design.cleartrip.com) | [Component Library](https://design.cleartrip.com/components) | [GitHub](https://github.com/cleartrip/ct-design-system)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"3DCarousel.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/3DCarousel.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Accordion.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionGroup.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/AccordionGroup.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActivityIndicator.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/ActivityIndicator.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AlertCallout.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/AlertCallout.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Animated.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Animated.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
|
package/dist/Badge.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Badge.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Bottomsheet.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Bottomsheet.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
|
package/dist/Box.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Box.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BulletedList.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/BulletedList.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC"}
|
package/dist/Button.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Button.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Calendar.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
|
package/dist/Card.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Card.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Carousel.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Checkbox.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/CheckboxGroup.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC"}
|
package/dist/Chip.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Chip.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChipDropdown.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/ChipDropdown.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConditionalWrap.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/ConditionalWrap.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Container.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Counter.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
|
package/dist/Dialog.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Dialog.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Divider.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DottedLoader.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/DottedLoader.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Dropdown.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
|
package/dist/Field.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Field.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/HorizontalScroll.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/IconButton.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IdContainer.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/IdContainer.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}
|
package/dist/Image.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Image.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IntersectionObserver.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/IntersectionObserver.ts"],"names":[],"mappings":"AAAA,cAAc,4CAA4C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/LinearGradient.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC"}
|
package/dist/List.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/List.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LottiePlayer.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/LottiePlayer.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC"}
|
package/dist/Modal.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Modal.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavTabs.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/NavTabs.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OutsideClickHandler.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/OutsideClickHandler.ts"],"names":[],"mappings":"AAAA,cAAc,4CAA4C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Overlay.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
|
package/dist/Portal.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Portal.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/ProgressBar.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}
|
package/dist/Radio.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Radio.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/RadioGroup.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/RangeSlider.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}
|
package/dist/Rating.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Rating.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RatingProgressBar.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/RatingProgressBar.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SafeAreaContainer.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/SafeAreaContainer.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollContainer.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/ScrollContainer.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Segment.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/Shimmer.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SingleSelectChip.d.ts","sourceRoot":"","sources":["../packages/components/Components/src/SingleSelectChip.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAC"}
|