@cleartrip/ct-design-bulleted-list 4.0.0-SNAPSHOT-test.0

package/README.md

@@ -0,0 +1,151 @@
+# BulletedList
+
+BulletedList renders a list of items with customizable markers (bullets or numbers) and flexible item rendering.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-bulleted-list
+# or
+pnpm add @cleartrip/ct-design-bulleted-list
+```
+
+### Peer dependencies
+
+```bash
+# Required for all targets
+npm install react
+
+# Web only
+npm install react-dom
+
+# React Native only
+npm install react-native
+```
+
+---
+
+## Usage
+
+### Basic ordered list
+
+```tsx
+import { BulletedList } from '@cleartrip/ct-design-bulleted-list';
+
+const items = [
+  { id: '1', title: 'First Item', content: 'Description here' },
+  { id: '2', title: 'Second Item', content: 'Another description' },
+  { id: '3', title: 'Third Item', content: 'More content' },
+];
+
+function Example() {
+  return (
+    <BulletedList
+      list={items}
+      listType="ol"
+      renderItem={(item, index) => (
+        <div>
+          <strong>{item.title}</strong>
+          <p>{item.content}</p>
+        </div>
+      )}
+    />
+  );
+}
+```
+
+### Bullet list (unordered)
+
+```tsx
+<BulletedList
+  list={items}
+  listType="ul"
+  renderItem={(item) => <span>{item.title}</span>}
+/>
+```
+
+### Style overrides
+
+```tsx
+<BulletedList
+  list={items}
+  listType="ol"
+  renderItem={(item) => <span>{item.title}</span>}
+  styleConfig={{
+    itemWrapper: [{ padding: 12, borderBottom: '1px solid #eee' }],
+    marker: [{ color: '#007bff', fontWeight: 'bold' }],
+  }}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `list` | `T[]` | — | Yes | Items to render in the list |
+| `renderItem` | `(item: T, index: number) => ReactNode` | — | Yes | Callback that renders each list item |
+| `listType` | `'ol' \| 'ul'` | `'ol'` | No | Type of marker to display |
+| `styleConfig` | `IBulletedListStyleConfig` | — | No | Style configuration overrides |
+
+---
+
+## List Types
+
+- `'ol'` — Numbered list (1. 2. 3.)
+- `'ul'` — Bullet list (•)
+
+---
+
+## styleConfig
+
+The `styleConfig` interface allows fine-grained style customization:
+
+```ts
+interface IBulletedListStyleConfig {
+  itemWrapper?: Styles[];
+  placeHolder?: Styles[];
+  itemContent?: Styles[];
+  marker?: Styles[];
+}
+```
+
+### Slots
+
+| Slot | Description |
+|------|-------------|
+| `itemWrapper` | Styles for the outer row container wrapping each list item |
+| `placeHolder` | Styles for the marker container (bullet/number placeholder area) |
+| `itemContent` | Styles for the content container where renderItem output is displayed |
+| `marker` | Styles for the marker row (number + dot on ordered lists) |
+
+---
+
+## Item Keys
+
+- Items with an `id` property use that as the React key
+- Items without `id` use the array index as the key
+- For optimal performance, provide unique `id` values for each item
+
+---
+
+## Accessibility
+
+- Ordered lists use semantic `<ol>` elements
+- Unordered lists use semantic `<ul>` elements
+- Each item is wrapped in `<li>` elements for proper screen reader support
+- Consider adding ARIA labels for complex list items
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { BulletedList } from 'old-package';
++ import { BulletedList } from '@cleartrip/ct-design-bulleted-list';
+```

package/dist/BulletedList.d.ts

@@ -0,0 +1,6 @@
+import type { IBulletedListProps } from './type';
+declare const BulletedList: <T extends {
+    id?: string | number;
+}>({ list, renderItem, listType, styleConfig, }: IBulletedListProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export default BulletedList;
+//# sourceMappingURL=BulletedList.d.ts.map

package/dist/BulletedList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletedList.d.ts","sourceRoot":"","sources":["../packages/components/BulletedList/src/BulletedList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAuBjD,QAAA,MAAM,YAAY,GAAI,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,8CAKvD,kBAAkB,CAAC,CAAC,CAAC,mDAiEvB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ct-design-bulleted-list.browser.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("@cleartrip/ct-design-container"),t=require("@cleartrip/ct-design-typography"),n=require("@cleartrip/ct-design-style-manager");const i=n.makeStyles(e=>({itemWrapper:{flexDirection:"row",alignItems:"flex-start",columnGap:null==e?void 0:e.spacing[1]},placeHolder:{flexShrink:0,color:null==e?void 0:e.color.text.primary,minWidth:20,alignItems:"center",justifyContent:"center"},itemContent:{flex:1},marker:{flexDirection:"row",alignItems:"center",justifyContent:"center"}}));exports.BulletedList=({list:l,renderItem:o,listType:a="ol",styleConfig:s})=>{const{itemWrapper:c=[],placeHolder:p=[],itemContent:d=[],marker:m=[]}=s||{},y=(null==l?void 0:l.length)||0,g=12*String(y).length,u=n.useStyles(()=>({root:{width:g}}),[g]);return l&&0!==l.length?e.jsx(e.Fragment,{children:l.map((n,l)=>{var s;return e.jsxs(r.Container,{styleConfig:{root:[i.itemWrapper,...c]},children:[e.jsx(r.Container,{styleConfig:{root:[i.placeHolder,...p]},children:"ol"===a?e.jsxs(r.Container,{styleConfig:{root:[i.marker,null==u?void 0:u.root,...m]},children:[e.jsx(t.Typography,{variant:"B2",color:"primary",children:l+1}),e.jsx(t.Typography,{variant:"B2",color:"primary",children:"."})]}):e.jsx(t.Typography,{variant:"B2",color:"primary",children:"•"})}),e.jsx(r.Container,{styleConfig:{root:[i.itemContent,...d]},children:o(n,l)})]},null!==(s=null==n?void 0:n.id)&&void 0!==s?s:l)})}):null};
+//# sourceMappingURL=ct-design-bulleted-list.browser.cjs.js.map

package/dist/ct-design-bulleted-list.browser.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-bulleted-list.browser.cjs.js","sources":["../packages/components/BulletedList/src/style.ts","../packages/components/BulletedList/src/BulletedList.tsx"],"sourcesContent":[null,null],"names":["staticBulletedListStyles","makeStyles","theme","itemWrapper","flexDirection","alignItems","columnGap","spacing","placeHolder","flexShrink","color","text","primary","minWidth","justifyContent","itemContent","flex","marker","list","renderItem","listType","styleConfig","customItemWrapper","customPlaceHolder","customItemContent","customMarker","maxNumber","length","numberWidth","String","dynamicNumberWidth","useStyles","root","width","_jsx","jsx","_Fragment","Fragment","children","map","item","index","_jsxs","Container","jsxs","Typography","variant","_a","id"],"mappings":"yLASA,MAAMA,EAA2BC,EAAAA,WAAYC,IAAW,CACtDC,YAAa,CACXC,cAAe,MACfC,WAAY,aACZC,UAAWJ,aAAK,EAALA,EAAOK,QAAQ,IAE5BC,YAAa,CACXC,WAAY,EACZC,MAAOR,aAAK,EAALA,EAAOQ,MAAMC,KAAKC,QACzBC,SAAU,GACVR,WAAY,SACZS,eAAgB,UAElBC,YAAa,CACXC,KAAM,GAERC,OAAQ,CACNb,cAAe,MACfC,WAAY,SACZS,eAAgB,kCCAC,EACnBI,OACAC,aACAC,WAAW,KACXC,kBAEA,MACElB,YAAamB,EAAoB,GACjCd,YAAae,EAAoB,GACjCR,YAAaS,EAAoB,GACjCP,OAAQQ,EAAe,IACrBJ,GAAe,GAEbK,GAAYR,aAAA,EAAAA,EAAMS,SAAU,EAQ5BC,EAAgC,GAHdC,OAAOH,GAAWC,OAKpCG,EAAqBC,EAAAA,UACzB,KAAO,CACLC,KAAM,CACJC,MAAOL,KAGX,CAACA,IAGH,OAAKV,GAAwB,IAAhBA,EAAKS,OAKhBO,EACGC,IAAAC,EAAAC,SAAA,CAAAC,SAAApB,EAAKqB,IAAI,CAACC,EAAMC,WAAU,OACzBC,OAACC,EAASA,UAAA,CACRtB,YAAa,CAAEW,KAAM,CAAChC,EAAyBG,eAAgBmB,IAG/DgB,SAAA,CAAAJ,EAAAC,IAACQ,EAASA,UAAA,CAACtB,YAAa,CAAEW,KAAM,CAAChC,EAAyBQ,eAAgBe,IAAoBe,SAC9E,OAAblB,EACCsB,EAACE,KAAAD,EAASA,UACR,CAAAtB,YAAa,CACXW,KAAM,CAAChC,EAAyBiB,OAAQa,aAAkB,EAAlBA,EAAoBE,QAASP,IACtEa,SAAA,CAEDJ,MAACW,EAAUA,WAAA,CAACC,QAAQ,KAAKpC,MAAM,UAAS4B,SACrCG,EAAQ,IAEXP,EAAAC,IAACU,EAAUA,WAAC,CAAAC,QAAQ,KAAKpC,MAAM,UAElB4B,SAAA,SAGfJ,EAAAC,IAACU,EAAUA,WAAC,CAAAC,QAAQ,KAAKpC,MAAM,UAC5B4B,SAAA,QAIPJ,EAAAA,IAACS,EAAAA,WAAUtB,YAAa,CAAEW,KAAM,CAAChC,EAAyBe,eAAgBS,IACvEc,SAAAnB,EAAWqB,EAAMC,eAvBfM,EAAAP,aAAI,EAAJA,EAAMQ,kBAAMP,OARhB"}

package/dist/ct-design-bulleted-list.browser.esm.js

@@ -0,0 +1,2 @@
+import{jsx as r,Fragment as e,jsxs as t}from"react/jsx-runtime";import{Container as i}from"@cleartrip/ct-design-container";import{Typography as n}from"@cleartrip/ct-design-typography";import{makeStyles as o,useStyles as l}from"@cleartrip/ct-design-style-manager";const a=o(r=>({itemWrapper:{flexDirection:"row",alignItems:"flex-start",columnGap:null==r?void 0:r.spacing[1]},placeHolder:{flexShrink:0,color:null==r?void 0:r.color.text.primary,minWidth:20,alignItems:"center",justifyContent:"center"},itemContent:{flex:1},marker:{flexDirection:"row",alignItems:"center",justifyContent:"center"}})),c=({list:o,renderItem:c,listType:m="ol",styleConfig:p})=>{const{itemWrapper:d=[],placeHolder:s=[],itemContent:g=[],marker:f=[]}=p||{},h=(null==o?void 0:o.length)||0,y=12*String(h).length,u=l(()=>({root:{width:y}}),[y]);return o&&0!==o.length?r(e,{children:o.map((e,o)=>{var l;return t(i,{styleConfig:{root:[a.itemWrapper,...d]},children:[r(i,{styleConfig:{root:[a.placeHolder,...s]},children:"ol"===m?t(i,{styleConfig:{root:[a.marker,null==u?void 0:u.root,...f]},children:[r(n,{variant:"B2",color:"primary",children:o+1}),r(n,{variant:"B2",color:"primary",children:"."})]}):r(n,{variant:"B2",color:"primary",children:"•"})}),r(i,{styleConfig:{root:[a.itemContent,...g]},children:c(e,o)})]},null!==(l=null==e?void 0:e.id)&&void 0!==l?l:o)})}):null};export{c as BulletedList};
+//# sourceMappingURL=ct-design-bulleted-list.browser.esm.js.map

package/dist/ct-design-bulleted-list.browser.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-bulleted-list.browser.esm.js","sources":["../packages/components/BulletedList/src/style.ts","../packages/components/BulletedList/src/BulletedList.tsx"],"sourcesContent":[null,null],"names":["staticBulletedListStyles","makeStyles","theme","itemWrapper","flexDirection","alignItems","columnGap","spacing","placeHolder","flexShrink","color","text","primary","minWidth","justifyContent","itemContent","flex","marker","BulletedList","list","renderItem","listType","styleConfig","customItemWrapper","customPlaceHolder","customItemContent","customMarker","maxNumber","length","numberWidth","String","dynamicNumberWidth","useStyles","root","width","_jsx","_Fragment","children","map","item","index","_jsxs","Container","Typography","variant","_a","id"],"mappings":"uQASA,MAAMA,EAA2BC,EAAYC,IAAW,CACtDC,YAAa,CACXC,cAAe,MACfC,WAAY,aACZC,UAAWJ,aAAK,EAALA,EAAOK,QAAQ,IAE5BC,YAAa,CACXC,WAAY,EACZC,MAAOR,aAAK,EAALA,EAAOQ,MAAMC,KAAKC,QACzBC,SAAU,GACVR,WAAY,SACZS,eAAgB,UAElBC,YAAa,CACXC,KAAM,GAERC,OAAQ,CACNb,cAAe,MACfC,WAAY,SACZS,eAAgB,aCAdI,EAAe,EACnBC,OACAC,aACAC,WAAW,KACXC,kBAEA,MACEnB,YAAaoB,EAAoB,GACjCf,YAAagB,EAAoB,GACjCT,YAAaU,EAAoB,GACjCR,OAAQS,EAAe,IACrBJ,GAAe,GAEbK,GAAYR,aAAA,EAAAA,EAAMS,SAAU,EAQ5BC,EAAgC,GAHdC,OAAOH,GAAWC,OAKpCG,EAAqBC,EACzB,KAAO,CACLC,KAAM,CACJC,MAAOL,KAGX,CAACA,IAGH,OAAKV,GAAwB,IAAhBA,EAAKS,OAKhBO,EACGC,EAAA,CAAAC,SAAAlB,EAAKmB,IAAI,CAACC,EAAMC,WAAU,OACzBC,EAACC,EAAS,CACRpB,YAAa,CAAEW,KAAM,CAACjC,EAAyBG,eAAgBoB,IAG/Dc,SAAA,CAAAF,EAACO,EAAS,CAACpB,YAAa,CAAEW,KAAM,CAACjC,EAAyBQ,eAAgBgB,IAAoBa,SAC9E,OAAbhB,EACCoB,EAACC,EACC,CAAApB,YAAa,CACXW,KAAM,CAACjC,EAAyBiB,OAAQc,aAAkB,EAAlBA,EAAoBE,QAASP,IACtEW,SAAA,CAEDF,EAACQ,EAAU,CAACC,QAAQ,KAAKlC,MAAM,UAAS2B,SACrCG,EAAQ,IAEXL,EAACQ,EAAW,CAAAC,QAAQ,KAAKlC,MAAM,UAElB2B,SAAA,SAGfF,EAACQ,EAAW,CAAAC,QAAQ,KAAKlC,MAAM,UAC5B2B,SAAA,QAIPF,EAACO,GAAUpB,YAAa,CAAEW,KAAM,CAACjC,EAAyBe,eAAgBU,IACvEY,SAAAjB,EAAWmB,EAAMC,eAvBfK,EAAAN,aAAI,EAAJA,EAAMO,kBAAMN,OARhB"}

package/dist/ct-design-bulleted-list.cjs.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ctDesignContainer = require('@cleartrip/ct-design-container');
+var ctDesignTypography = require('@cleartrip/ct-design-typography');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
+
+const staticBulletedListStyles = ctDesignStyleManager.makeStyles((theme) => ({
+    itemWrapper: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        columnGap: theme === null || theme === void 0 ? void 0 : theme.spacing[1],
+    },
+    placeHolder: {
+        flexShrink: 0,
+        color: theme === null || theme === void 0 ? void 0 : theme.color.text.primary,
+        minWidth: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    itemContent: {
+        flex: 1,
+    },
+    marker: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+}));
+
+const BulletedList = ({ list, renderItem, listType = 'ol', styleConfig, }) => {
+    const { itemWrapper: customItemWrapper = [], placeHolder: customPlaceHolder = [], itemContent: customItemContent = [], marker: customMarker = [], } = styleConfig || {};
+    const maxNumber = (list === null || list === void 0 ? void 0 : list.length) || 0;
+    const maxNumberDigits = String(maxNumber).length;
+    const numberWidth = maxNumberDigits * 12;
+    const dynamicNumberWidth = ctDesignStyleManager.useStyles(() => ({
+        root: {
+            width: numberWidth,
+        },
+    }), [numberWidth]);
+    if (!list || list.length === 0) {
+        return null;
+    }
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: list.map((item, index) => {
+            var _a;
+            return (jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: { root: [staticBulletedListStyles.itemWrapper, ...customItemWrapper] }, children: [jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticBulletedListStyles.placeHolder, ...customPlaceHolder] }, children: listType === 'ol' ? (jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: {
+                                root: [staticBulletedListStyles.marker, dynamicNumberWidth === null || dynamicNumberWidth === void 0 ? void 0 : dynamicNumberWidth.root, ...customMarker],
+                            }, children: [jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B2', color: 'primary', children: index + 1 }), jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B2', color: 'primary', children: "." })] })) : (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B2', color: 'primary', children: '\u2022' })) }), jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticBulletedListStyles.itemContent, ...customItemContent] }, children: renderItem(item, index) })] }, (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : index));
+        }) }));
+};
+
+exports.BulletedList = BulletedList;
+//# sourceMappingURL=ct-design-bulleted-list.cjs.js.map

package/dist/ct-design-bulleted-list.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-bulleted-list.cjs.js","sources":["../packages/components/BulletedList/src/style.ts","../packages/components/BulletedList/src/BulletedList.tsx"],"sourcesContent":[null,null],"names":["makeStyles","useStyles","_jsx","_Fragment","_jsxs","Container","Typography"],"mappings":"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"}

package/dist/ct-design-bulleted-list.esm.js

@@ -0,0 +1,51 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+
+const staticBulletedListStyles = makeStyles((theme) => ({
+    itemWrapper: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        columnGap: theme === null || theme === void 0 ? void 0 : theme.spacing[1],
+    },
+    placeHolder: {
+        flexShrink: 0,
+        color: theme === null || theme === void 0 ? void 0 : theme.color.text.primary,
+        minWidth: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    itemContent: {
+        flex: 1,
+    },
+    marker: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+}));
+
+const BulletedList = ({ list, renderItem, listType = 'ol', styleConfig, }) => {
+    const { itemWrapper: customItemWrapper = [], placeHolder: customPlaceHolder = [], itemContent: customItemContent = [], marker: customMarker = [], } = styleConfig || {};
+    const maxNumber = (list === null || list === void 0 ? void 0 : list.length) || 0;
+    const maxNumberDigits = String(maxNumber).length;
+    const numberWidth = maxNumberDigits * 12;
+    const dynamicNumberWidth = useStyles(() => ({
+        root: {
+            width: numberWidth,
+        },
+    }), [numberWidth]);
+    if (!list || list.length === 0) {
+        return null;
+    }
+    return (jsx(Fragment, { children: list.map((item, index) => {
+            var _a;
+            return (jsxs(Container, { styleConfig: { root: [staticBulletedListStyles.itemWrapper, ...customItemWrapper] }, children: [jsx(Container, { styleConfig: { root: [staticBulletedListStyles.placeHolder, ...customPlaceHolder] }, children: listType === 'ol' ? (jsxs(Container, { styleConfig: {
+                                root: [staticBulletedListStyles.marker, dynamicNumberWidth === null || dynamicNumberWidth === void 0 ? void 0 : dynamicNumberWidth.root, ...customMarker],
+                            }, children: [jsx(Typography, { variant: 'B2', color: 'primary', children: index + 1 }), jsx(Typography, { variant: 'B2', color: 'primary', children: "." })] })) : (jsx(Typography, { variant: 'B2', color: 'primary', children: '\u2022' })) }), jsx(Container, { styleConfig: { root: [staticBulletedListStyles.itemContent, ...customItemContent] }, children: renderItem(item, index) })] }, (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : index));
+        }) }));
+};
+
+export { BulletedList };
+//# sourceMappingURL=ct-design-bulleted-list.esm.js.map

package/dist/ct-design-bulleted-list.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-bulleted-list.esm.js","sources":["../packages/components/BulletedList/src/style.ts","../packages/components/BulletedList/src/BulletedList.tsx"],"sourcesContent":[null,null],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

package/dist/ct-design-bulleted-list.umd.js

@@ -0,0 +1,54 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-style-manager')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-style-manager'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemBulletedList = {}, global.jsxRuntime, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignStyleManager));
+})(this, (function (exports, jsxRuntime, ctDesignContainer, ctDesignTypography, ctDesignStyleManager) { 'use strict';
+
+    const staticBulletedListStyles = ctDesignStyleManager.makeStyles((theme) => ({
+        itemWrapper: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            columnGap: theme === null || theme === void 0 ? void 0 : theme.spacing[1],
+        },
+        placeHolder: {
+            flexShrink: 0,
+            color: theme === null || theme === void 0 ? void 0 : theme.color.text.primary,
+            minWidth: 20,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        itemContent: {
+            flex: 1,
+        },
+        marker: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    }));
+
+    const BulletedList = ({ list, renderItem, listType = 'ol', styleConfig, }) => {
+        const { itemWrapper: customItemWrapper = [], placeHolder: customPlaceHolder = [], itemContent: customItemContent = [], marker: customMarker = [], } = styleConfig || {};
+        const maxNumber = (list === null || list === void 0 ? void 0 : list.length) || 0;
+        const maxNumberDigits = String(maxNumber).length;
+        const numberWidth = maxNumberDigits * 12;
+        const dynamicNumberWidth = ctDesignStyleManager.useStyles(() => ({
+            root: {
+                width: numberWidth,
+            },
+        }), [numberWidth]);
+        if (!list || list.length === 0) {
+            return null;
+        }
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: list.map((item, index) => {
+                var _a;
+                return (jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: { root: [staticBulletedListStyles.itemWrapper, ...customItemWrapper] }, children: [jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticBulletedListStyles.placeHolder, ...customPlaceHolder] }, children: listType === 'ol' ? (jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: {
+                                    root: [staticBulletedListStyles.marker, dynamicNumberWidth === null || dynamicNumberWidth === void 0 ? void 0 : dynamicNumberWidth.root, ...customMarker],
+                                }, children: [jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B2', color: 'primary', children: index + 1 }), jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B2', color: 'primary', children: "." })] })) : (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B2', color: 'primary', children: '\u2022' })) }), jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticBulletedListStyles.itemContent, ...customItemContent] }, children: renderItem(item, index) })] }, (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : index));
+            }) }));
+    };
+
+    exports.BulletedList = BulletedList;
+
+}));
+//# sourceMappingURL=ct-design-bulleted-list.umd.js.map

package/dist/ct-design-bulleted-list.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-bulleted-list.umd.js","sources":["../packages/components/BulletedList/src/style.ts","../packages/components/BulletedList/src/BulletedList.tsx"],"sourcesContent":[null,null],"names":["makeStyles","useStyles","_jsx","_Fragment","_jsxs","Container","Typography"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BulletedList } from './BulletedList';
+export * from './type';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../packages/components/BulletedList/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,QAAQ,CAAC"}

package/dist/index.native.d.ts

@@ -0,0 +1,3 @@
+export { default as BulletedList } from './BulletedList';
+export * from './type';
+//# sourceMappingURL=index.native.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../packages/components/BulletedList/src/index.native.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,QAAQ,CAAC"}

package/dist/style.d.ts

@@ -0,0 +1,24 @@
+declare const staticBulletedListStyles: {
+    itemWrapper: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        columnGap: 4;
+    };
+    placeHolder: {
+        flexShrink: number;
+        color: string;
+        minWidth: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    itemContent: {
+        flex: number;
+    };
+    marker: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};
+export default staticBulletedListStyles;
+//# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/BulletedList/src/style.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;CAqB3B,CAAC;AAEJ,eAAe,wBAAwB,CAAC"}

package/dist/type.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { Styles } from '@cleartrip/ct-design-types';
+export type BulletedListType = 'ol' | 'ul';
+export interface IBulletedListStyleConfig {
+    itemWrapper?: Styles[];
+    placeHolder?: Styles[];
+    itemContent?: Styles[];
+    marker?: Styles[];
+}
+export interface IBulletedListProps<T extends {
+    id?: string | number;
+}> {
+    list: T[];
+    renderItem: (item: T, index: number) => ReactNode;
+    listType?: BulletedListType;
+    styleConfig?: IBulletedListStyleConfig;
+}
+//# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/BulletedList/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOzD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAK3C,MAAM,WAAW,wBAAwB;IAIvC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAKvB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAMvB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAKvB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AASD,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IAKpE,IAAI,EAAE,CAAC,EAAE,CAAC;IAMV,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAKlD,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAK5B,WAAW,CAAC,EAAE,wBAAwB,CAAC;CACxC"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@cleartrip/ct-design-bulleted-list",
+  "version": "4.0.0-SNAPSHOT-test.0",
+  "description": "BulletedList Component — ordered (ol) and unordered (ul) list renderer.",
+  "types": "dist/index.d.ts",
+  "main": "./dist/ct-design-bulleted-list.cjs.js",
+  "react-native": "src/index.native.ts",
+  "jsnext:main": "dist/ct-design-bulleted-list.esm.js",
+  "module": "dist/ct-design-bulleted-list.esm.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/ct-design-bulleted-list.d.ts",
+      "import": "./dist/ct-design-bulleted-list.esm.js",
+      "default": "./dist/ct-design-bulleted-list.cjs.js"
+    }
+  },
+  "browser": {
+    "./dist/ct-design-bulleted-list.esm.js": "./dist/ct-design-bulleted-list.browser.esm.js",
+    "./dist/ct-design-bulleted-list.cjs.js": "./dist/ct-design-bulleted-list.browser.cjs.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@cleartrip/ct-design-container": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-typography": "4.0.0-SNAPSHOT-test.0"
+  },
+  "devDependencies": {
+    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-test.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-native": ">=0.68.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Cleartrip",
+  "license": "ISC",
+  "scripts": {
+    "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",
+    "publish-package:local": "yalc publish"
+  }
+}

package/src/BulletedList.tsx

@@ -0,0 +1,101 @@
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+
+import staticBulletedListStyles from './style';
+import type { IBulletedListProps } from './type';
+
+/**
+ * BulletedList
+ *
+ * A flexible list renderer that supports ordered (`ol`) and unordered
+ * (`ul`) list markers. Each row shows a marker (number or bullet)
+ * followed by arbitrary content returned from `renderItem`.
+ *
+ * The ordered-list marker width auto-scales with the largest row
+ * number so every digit column lines up — one extra pixel of slot
+ * width per digit so a 10-item list stays aligned with a 100-item
+ * list.
+ *
+ * @example
+ * ```tsx
+ * <BulletedList
+ *   list={faqItems}
+ *   listType="ol"
+ *   renderItem={(item) => <Typography variant="P2">{item.title}</Typography>}
+ * />
+ * ```
+ */
+const BulletedList = <T extends { id?: string | number }>({
+  list,
+  renderItem,
+  listType = 'ol',
+  styleConfig,
+}: IBulletedListProps<T>) => {
+  const {
+    itemWrapper: customItemWrapper = [],
+    placeHolder: customPlaceHolder = [],
+    itemContent: customItemContent = [],
+    marker: customMarker = [],
+  } = styleConfig || {};
+
+  const maxNumber = list?.length || 0;
+
+  // Character count of the largest row number — drives the marker
+  // column width so every item's digit group lines up regardless of
+  // 1/2/3-digit transitions.
+  const maxNumberDigits = String(maxNumber).length;
+
+  // Width of the number column based on the digit count.
+  const numberWidth = maxNumberDigits * 12;
+
+  const dynamicNumberWidth = useStyles(
+    () => ({
+      root: {
+        width: numberWidth,
+      },
+    }),
+    [numberWidth],
+  );
+
+  if (!list || list.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {list.map((item, index) => (
+        <Container
+          styleConfig={{ root: [staticBulletedListStyles.itemWrapper, ...customItemWrapper] }}
+          key={item?.id ?? index}
+        >
+          <Container styleConfig={{ root: [staticBulletedListStyles.placeHolder, ...customPlaceHolder] }}>
+            {listType === 'ol' ? (
+              <Container
+                styleConfig={{
+                  root: [staticBulletedListStyles.marker, dynamicNumberWidth?.root, ...customMarker],
+                }}
+              >
+                <Typography variant='B2' color='primary'>
+                  {index + 1}
+                </Typography>
+                <Typography variant='B2' color='primary'>
+                  .
+                </Typography>
+              </Container>
+            ) : (
+              <Typography variant='B2' color='primary'>
+                {'\u2022'}
+              </Typography>
+            )}
+          </Container>
+          <Container styleConfig={{ root: [staticBulletedListStyles.itemContent, ...customItemContent] }}>
+            {renderItem(item, index)}
+          </Container>
+        </Container>
+      ))}
+    </>
+  );
+};
+
+export default BulletedList;

package/src/index.native.ts

@@ -0,0 +1,5 @@
+// Native and web share the same implementation — both rely on
+// platform-agnostic primitives (Container, Typography, useStyles,
+// makeStyles) and contain no emotion-specific code.
+export { default as BulletedList } from './BulletedList';
+export * from './type';

package/src/index.ts

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

package/src/style.ts

@@ -0,0 +1,33 @@
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+/**
+ * Static styles shared by both web and native implementations. All
+ * values are pure theme lookups and layout primitives that work
+ * identically across platforms; dynamic width (based on the maximum
+ * number of digits in the list length) is applied on top via
+ * `useStyles` inside the component.
+ */
+const staticBulletedListStyles = makeStyles((theme) => ({
+  itemWrapper: {
+    flexDirection: 'row' as const,
+    alignItems: 'flex-start' as const,
+    columnGap: theme?.spacing[1],
+  },
+  placeHolder: {
+    flexShrink: 0,
+    color: theme?.color.text.primary,
+    minWidth: 20,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+  },
+  itemContent: {
+    flex: 1,
+  },
+  marker: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+  },
+}));
+
+export default staticBulletedListStyles;

package/src/type.ts

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+
+import type { Styles } from '@cleartrip/ct-design-types';
+
+/**
+ * Type of marker displayed for each list item.
+ *   - `'ol'` — numbered list (1. 2. 3.)
+ *   - `'ul'` — bullet list (•)
+ */
+export type BulletedListType = 'ol' | 'ul';
+
+/**
+ * `styleConfig` slots for fine-grained style overrides on BulletedList.
+ */
+export interface IBulletedListStyleConfig {
+  /**
+   * Styles for the outer row container wrapping each list item.
+   */
+  itemWrapper?: Styles[];
+
+  /**
+   * Styles for the marker container (bullet/number placeholder area).
+   */
+  placeHolder?: Styles[];
+
+  /**
+   * Styles for the content container where `renderItem` output is
+   * displayed.
+   */
+  itemContent?: Styles[];
+
+  /**
+   * Styles for the marker row (number + dot on ordered lists).
+   */
+  marker?: Styles[];
+}
+
+/**
+ * Props for the BulletedList component.
+ *
+ * @typeParam T - Shape of each list item. An optional `id` property,
+ * if present, is used as the React key; otherwise the array index is
+ * used.
+ */
+export interface IBulletedListProps<T extends { id?: string | number }> {
+  /**
+   * Items to render. Keys come from `item.id` when defined, else the
+   * row index.
+   */
+  list: T[];
+
+  /**
+   * Callback that receives the current item and its index, returning
+   * the React content for that row.
+   */
+  renderItem: (item: T, index: number) => ReactNode;
+
+  /**
+   * Type of marker to display. Defaults to `'ol'`.
+   */
+  listType?: BulletedListType;
+
+  /**
+   * `styleConfig` slots for fine-grained style overrides.
+   */
+  styleConfig?: IBulletedListStyleConfig;
+}