@cleartrip/ct-design-rating-progress-bar 4.0.0-SNAPSHOT-test.0

package/README.md

@@ -0,0 +1,63 @@
+# RatingProgressBar
+
+A progress bar component with rating visualization.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-rating-progress-bar
+# or
+pnpm add @cleartrip/ct-design-rating-progress-bar
+```
+
+### 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
+
+```tsx
+import { RatingProgressBar } from '@cleartrip/ct-design-rating-progress-bar';
+
+function Example() {
+  return (
+    <RatingProgressBar>
+      {/* Basic usage */}
+    </RatingProgressBar>
+  );
+}
+```
+
+---
+
+## Accessibility
+
+- The component follows accessibility best practices
+- Ensure proper ARIA attributes are provided where needed
+- Test with screen readers to ensure usability
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { RatingProgressBar } from 'yagami/core/components';
++ import { RatingProgressBar } from '@cleartrip/ct-design-rating-progress-bar';
+```

package/dist/RatingProgressBar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RatingProgressBarProps } from './type';
+declare const RatingProgressBar: React.FC<RatingProgressBarProps>;
+export default RatingProgressBar;
+//# sourceMappingURL=RatingProgressBar.d.ts.map

package/dist/RatingProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingProgressBar.d.ts","sourceRoot":"","sources":["../packages/components/RatingProgressBar/src/RatingProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAUrD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgDvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/ct-design-rating-progress-bar.browser.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime"),e=require("react"),o=require("@cleartrip/ct-design-container"),t=require("@cleartrip/ct-design-style-manager");const s=t.makeStyles(()=>({progressContainer:{height:"100%"}}));exports.RatingProgressBar=({progress:i,radius:n=2,barColor:a,progressedBarColor:l,height:d=4,width:u=244,delay:g=200,styleConfig:c})=>{const[h,p]=e.useState(0);e.useEffect(()=>{const r=window.setTimeout(()=>{p(i)},g);return()=>window.clearTimeout(r)},[i,g]);const C=t.useStyles(r=>({root:{borderRadius:n,height:d,width:u,backgroundColor:a||(null==r?void 0:r.color.background.defaultDark),overflow:"hidden"},progress:{backgroundColor:l||(null==r?void 0:r.color.text.primary),borderRadius:n,width:`${h}%`,transition:"width 500ms ease-in-out"}}),[n,d,u,a,l,h]);return r.jsx(o.Container,{styleConfig:{root:[C.root,...(null==c?void 0:c.root)||[]]},children:r.jsx(o.Container,{styleConfig:{root:[s.progressContainer,C.progress,...(null==c?void 0:c.progress)||[]]}})})};
+//# sourceMappingURL=ct-design-rating-progress-bar.browser.cjs.js.map

package/dist/ct-design-rating-progress-bar.browser.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-rating-progress-bar.browser.cjs.js","sources":["../packages/components/RatingProgressBar/src/RatingProgressBar.tsx"],"sourcesContent":[null],"names":["staticStyles","makeStyles","progressContainer","height","progress","radius","barColor","progressedBarColor","width","delay","styleConfig","animatedProgress","setAnimatedProgress","useState","useEffect","timeoutId","window","setTimeout","clearTimeout","dynamicStyles","useStyles","t","root","borderRadius","backgroundColor","color","background","defaultDark","overflow","text","primary","transition","_jsx","Container","children"],"mappings":"+JAOA,MAEMA,EAAeC,EAAUA,WAAC,KAAO,CACrCC,kBAAmB,CACjBC,OAAQ,qCAIgD,EAC1DC,WACAC,SAAS,EACTC,WACAC,qBACAJ,SAAS,EACTK,QAAQ,IACRC,QAAQ,IACRC,kBAEA,MAAOC,EAAkBC,GAAuBC,EAAQA,SAAC,GAEzDC,EAAAA,UAAU,KACR,MAAMC,EAAYC,OAAOC,WAAW,KAClCL,EAAoBR,IACnBK,GAEH,MAAO,IAAMO,OAAOE,aAAaH,IAChC,CAACX,EAAUK,IAEd,MAAMU,EAAgBC,YACnBC,IAAO,CACNC,KAAM,CACJC,aAAclB,EACdF,SACAK,QACAgB,gBAAiBlB,IAAYe,aAAC,EAADA,EAAGI,MAAMC,WAAWC,aACjDC,SAAU,UAEZxB,SAAU,CACRoB,gBAAiBjB,IAAsBc,aAAC,EAADA,EAAGI,MAAMI,KAAKC,SACrDP,aAAclB,EACdG,MAAO,GAAGG,KACVoB,WAAY,6BAGhB,CAAC1B,EAAQF,EAAQK,EAAOF,EAAUC,EAAoBI,IAGxD,OACEqB,MAACC,EAAAA,UAAS,CAACvB,YAAa,CAAEY,KAAM,CAACH,EAAcG,SAAUZ,aAAW,EAAXA,EAAaY,OAAQ,KAC5EY,SAAAF,EAAAA,IAACC,EAASA,UAAA,CACRvB,YAAa,CACXY,KAAM,CAACtB,EAAaE,kBAAmBiB,EAAcf,aAAcM,aAAA,EAAAA,EAAaN,WAAY"}

package/dist/ct-design-rating-progress-bar.browser.esm.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{useState as o,useEffect as t}from"react";import{Container as e}from"@cleartrip/ct-design-container";import{makeStyles as i,useStyles as n}from"@cleartrip/ct-design-style-manager";const s=i(()=>({progressContainer:{height:"100%"}})),d=({progress:i,radius:d=2,barColor:l,progressedBarColor:a,height:g=4,width:c=244,delay:u=200,styleConfig:p})=>{const[m,h]=o(0);t(()=>{const r=window.setTimeout(()=>{h(i)},u);return()=>window.clearTimeout(r)},[i,u]);const f=n(r=>({root:{borderRadius:d,height:g,width:c,backgroundColor:l||(null==r?void 0:r.color.background.defaultDark),overflow:"hidden"},progress:{backgroundColor:a||(null==r?void 0:r.color.text.primary),borderRadius:d,width:`${m}%`,transition:"width 500ms ease-in-out"}}),[d,g,c,l,a,m]);return r(e,{styleConfig:{root:[f.root,...(null==p?void 0:p.root)||[]]},children:r(e,{styleConfig:{root:[s.progressContainer,f.progress,...(null==p?void 0:p.progress)||[]]}})})};export{d as RatingProgressBar};
+//# sourceMappingURL=ct-design-rating-progress-bar.browser.esm.js.map

package/dist/ct-design-rating-progress-bar.browser.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-rating-progress-bar.browser.esm.js","sources":["../packages/components/RatingProgressBar/src/RatingProgressBar.tsx"],"sourcesContent":[null],"names":["staticStyles","makeStyles","progressContainer","height","RatingProgressBar","progress","radius","barColor","progressedBarColor","width","delay","styleConfig","animatedProgress","setAnimatedProgress","useState","useEffect","timeoutId","window","setTimeout","clearTimeout","dynamicStyles","useStyles","t","root","borderRadius","backgroundColor","color","background","defaultDark","overflow","text","primary","transition","_jsx","Container","children"],"mappings":"kOAOA,MAEMA,EAAeC,EAAW,KAAO,CACrCC,kBAAmB,CACjBC,OAAQ,WAINC,EAAsD,EAC1DC,WACAC,SAAS,EACTC,WACAC,qBACAL,SAAS,EACTM,QAAQ,IACRC,QAAQ,IACRC,kBAEA,MAAOC,EAAkBC,GAAuBC,EAAS,GAEzDC,EAAU,KACR,MAAMC,EAAYC,OAAOC,WAAW,KAClCL,EAAoBR,IACnBK,GAEH,MAAO,IAAMO,OAAOE,aAAaH,IAChC,CAACX,EAAUK,IAEd,MAAMU,EAAgBC,EACnBC,IAAO,CACNC,KAAM,CACJC,aAAclB,EACdH,SACAM,QACAgB,gBAAiBlB,IAAYe,aAAC,EAADA,EAAGI,MAAMC,WAAWC,aACjDC,SAAU,UAEZxB,SAAU,CACRoB,gBAAiBjB,IAAsBc,aAAC,EAADA,EAAGI,MAAMI,KAAKC,SACrDP,aAAclB,EACdG,MAAO,GAAGG,KACVoB,WAAY,6BAGhB,CAAC1B,EAAQH,EAAQM,EAAOF,EAAUC,EAAoBI,IAGxD,OACEqB,EAACC,EAAS,CAACvB,YAAa,CAAEY,KAAM,CAACH,EAAcG,SAAUZ,aAAW,EAAXA,EAAaY,OAAQ,KAC5EY,SAAAF,EAACC,EAAS,CACRvB,YAAa,CACXY,KAAM,CAACvB,EAAaE,kBAAmBkB,EAAcf,aAAcM,aAAA,EAAAA,EAAaN,WAAY"}

package/dist/ct-design-rating-progress-bar.cjs.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ctDesignContainer = require('@cleartrip/ct-design-container');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
+
+const ANIMATION_DURATION_MS = 500;
+const staticStyles = ctDesignStyleManager.makeStyles(() => ({
+    progressContainer: {
+        height: '100%',
+    },
+}));
+const RatingProgressBar = ({ progress, radius = 2, barColor, progressedBarColor, height = 4, width = 244, delay = 200, styleConfig, }) => {
+    const [animatedProgress, setAnimatedProgress] = react.useState(0);
+    react.useEffect(() => {
+        const timeoutId = window.setTimeout(() => {
+            setAnimatedProgress(progress);
+        }, delay);
+        return () => window.clearTimeout(timeoutId);
+    }, [progress, delay]);
+    const dynamicStyles = ctDesignStyleManager.useStyles((t) => ({
+        root: {
+            borderRadius: radius,
+            height,
+            width,
+            backgroundColor: barColor || (t === null || t === void 0 ? void 0 : t.color.background.defaultDark),
+            overflow: 'hidden',
+        },
+        progress: {
+            backgroundColor: progressedBarColor || (t === null || t === void 0 ? void 0 : t.color.text.primary),
+            borderRadius: radius,
+            width: `${animatedProgress}%`,
+            transition: `width ${ANIMATION_DURATION_MS}ms ease-in-out`,
+        },
+    }), [radius, height, width, barColor, progressedBarColor, animatedProgress]);
+    return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [dynamicStyles.root, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) || [])] }, children: jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+                root: [staticStyles.progressContainer, dynamicStyles.progress, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.progress) || [])],
+            } }) }));
+};
+
+exports.RatingProgressBar = RatingProgressBar;
+//# sourceMappingURL=ct-design-rating-progress-bar.cjs.js.map

package/dist/ct-design-rating-progress-bar.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-rating-progress-bar.cjs.js","sources":["../packages/components/RatingProgressBar/src/RatingProgressBar.tsx"],"sourcesContent":[null],"names":["makeStyles","useState","useEffect","useStyles","_jsx","Container"],"mappings":";;;;;;;AAOA,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAElC,MAAM,YAAY,GAAGA,+BAAU,CAAC,OAAO;AACrC,IAAA,iBAAiB,EAAE;AACjB,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACF,CAAA,CAAC,CAAC,CAAC;AAEJ,MAAM,iBAAiB,GAAqC,CAAC,EAC3D,QAAQ,EACR,MAAM,GAAG,CAAC,EACV,QAAQ,EACR,kBAAkB,EAClB,MAAM,GAAG,CAAC,EACV,KAAK,GAAG,GAAG,EACX,KAAK,GAAG,GAAG,EACX,WAAW,GACZ,KAAI;IACH,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGC,cAAQ,CAAC,CAAC,CAAC,CAAC;IAE5DC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;YACvC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;SAC/B,EAAE,KAAK,CAAC,CAAC;QAEV,OAAO,MAAM,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;AAC9C,KAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,MAAM,aAAa,GAAGC,8BAAS,CAC7B,CAAC,CAAC,MAAM;AACN,QAAA,IAAI,EAAE;AACJ,YAAA,YAAY,EAAE,MAAM;YACpB,MAAM;YACN,KAAK;AACL,YAAA,eAAe,EAAE,QAAQ,KAAI,CAAC,aAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAA;AAC5D,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,eAAe,EAAE,kBAAkB,KAAI,CAAC,aAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAA;AAC5D,YAAA,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,CAAG,EAAA,gBAAgB,CAAG,CAAA,CAAA;YAC7B,UAAU,EAAE,CAAS,MAAA,EAAA,qBAAqB,CAAgB,cAAA,CAAA;AAC3D,SAAA;AACF,KAAA,CAAC,EACF,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,gBAAgB,CAAC,CACxE,CAAC;AAEF,IAAA,QACEC,cAAA,CAACC,2BAAS,EAAA,EAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAA,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAX,WAAW,CAAE,IAAI,KAAI,EAAE,CAAC,CAAC,EAAE,EAClF,QAAA,EAAAD,cAAA,CAACC,2BAAS,EAAA,EACR,WAAW,EAAE;gBACX,IAAI,EAAE,CAAC,YAAY,CAAC,iBAAiB,EAAE,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC;aACjG,EACD,CAAA,EAAA,CACQ,EACZ;AACJ;;;;"}

package/dist/ct-design-rating-progress-bar.esm.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+
+const ANIMATION_DURATION_MS = 500;
+const staticStyles = makeStyles(() => ({
+    progressContainer: {
+        height: '100%',
+    },
+}));
+const RatingProgressBar = ({ progress, radius = 2, barColor, progressedBarColor, height = 4, width = 244, delay = 200, styleConfig, }) => {
+    const [animatedProgress, setAnimatedProgress] = useState(0);
+    useEffect(() => {
+        const timeoutId = window.setTimeout(() => {
+            setAnimatedProgress(progress);
+        }, delay);
+        return () => window.clearTimeout(timeoutId);
+    }, [progress, delay]);
+    const dynamicStyles = useStyles((t) => ({
+        root: {
+            borderRadius: radius,
+            height,
+            width,
+            backgroundColor: barColor || (t === null || t === void 0 ? void 0 : t.color.background.defaultDark),
+            overflow: 'hidden',
+        },
+        progress: {
+            backgroundColor: progressedBarColor || (t === null || t === void 0 ? void 0 : t.color.text.primary),
+            borderRadius: radius,
+            width: `${animatedProgress}%`,
+            transition: `width ${ANIMATION_DURATION_MS}ms ease-in-out`,
+        },
+    }), [radius, height, width, barColor, progressedBarColor, animatedProgress]);
+    return (jsx(Container, { styleConfig: { root: [dynamicStyles.root, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) || [])] }, children: jsx(Container, { styleConfig: {
+                root: [staticStyles.progressContainer, dynamicStyles.progress, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.progress) || [])],
+            } }) }));
+};
+
+export { RatingProgressBar };
+//# sourceMappingURL=ct-design-rating-progress-bar.esm.js.map

package/dist/ct-design-rating-progress-bar.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-rating-progress-bar.esm.js","sources":["../packages/components/RatingProgressBar/src/RatingProgressBar.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAOA,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAElC,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO;AACrC,IAAA,iBAAiB,EAAE;AACjB,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACF,CAAA,CAAC,CAAC,CAAC;AAEJ,MAAM,iBAAiB,GAAqC,CAAC,EAC3D,QAAQ,EACR,MAAM,GAAG,CAAC,EACV,QAAQ,EACR,kBAAkB,EAClB,MAAM,GAAG,CAAC,EACV,KAAK,GAAG,GAAG,EACX,KAAK,GAAG,GAAG,EACX,WAAW,GACZ,KAAI;IACH,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;YACvC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;SAC/B,EAAE,KAAK,CAAC,CAAC;QAEV,OAAO,MAAM,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;AAC9C,KAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,MAAM,aAAa,GAAG,SAAS,CAC7B,CAAC,CAAC,MAAM;AACN,QAAA,IAAI,EAAE;AACJ,YAAA,YAAY,EAAE,MAAM;YACpB,MAAM;YACN,KAAK;AACL,YAAA,eAAe,EAAE,QAAQ,KAAI,CAAC,aAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAA;AAC5D,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,eAAe,EAAE,kBAAkB,KAAI,CAAC,aAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAA;AAC5D,YAAA,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,CAAG,EAAA,gBAAgB,CAAG,CAAA,CAAA;YAC7B,UAAU,EAAE,CAAS,MAAA,EAAA,qBAAqB,CAAgB,cAAA,CAAA;AAC3D,SAAA;AACF,KAAA,CAAC,EACF,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,gBAAgB,CAAC,CACxE,CAAC;AAEF,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAA,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAX,WAAW,CAAE,IAAI,KAAI,EAAE,CAAC,CAAC,EAAE,EAClF,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAA,EACR,WAAW,EAAE;gBACX,IAAI,EAAE,CAAC,YAAY,CAAC,iBAAiB,EAAE,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC;aACjG,EACD,CAAA,EAAA,CACQ,EACZ;AACJ;;;;"}

package/dist/ct-design-rating-progress-bar.umd.js

@@ -0,0 +1,44 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-style-manager')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', '@cleartrip/ct-design-style-manager'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemRatingProgressBar = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.ctDesignStyleManager));
+})(this, (function (exports, jsxRuntime, react, ctDesignContainer, ctDesignStyleManager) { 'use strict';
+
+    const ANIMATION_DURATION_MS = 500;
+    const staticStyles = ctDesignStyleManager.makeStyles(() => ({
+        progressContainer: {
+            height: '100%',
+        },
+    }));
+    const RatingProgressBar = ({ progress, radius = 2, barColor, progressedBarColor, height = 4, width = 244, delay = 200, styleConfig, }) => {
+        const [animatedProgress, setAnimatedProgress] = react.useState(0);
+        react.useEffect(() => {
+            const timeoutId = window.setTimeout(() => {
+                setAnimatedProgress(progress);
+            }, delay);
+            return () => window.clearTimeout(timeoutId);
+        }, [progress, delay]);
+        const dynamicStyles = ctDesignStyleManager.useStyles((t) => ({
+            root: {
+                borderRadius: radius,
+                height,
+                width,
+                backgroundColor: barColor || (t === null || t === void 0 ? void 0 : t.color.background.defaultDark),
+                overflow: 'hidden',
+            },
+            progress: {
+                backgroundColor: progressedBarColor || (t === null || t === void 0 ? void 0 : t.color.text.primary),
+                borderRadius: radius,
+                width: `${animatedProgress}%`,
+                transition: `width ${ANIMATION_DURATION_MS}ms ease-in-out`,
+            },
+        }), [radius, height, width, barColor, progressedBarColor, animatedProgress]);
+        return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [dynamicStyles.root, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) || [])] }, children: jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+                    root: [staticStyles.progressContainer, dynamicStyles.progress, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.progress) || [])],
+                } }) }));
+    };
+
+    exports.RatingProgressBar = RatingProgressBar;
+
+}));
+//# sourceMappingURL=ct-design-rating-progress-bar.umd.js.map

package/dist/ct-design-rating-progress-bar.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-rating-progress-bar.umd.js","sources":["../packages/components/RatingProgressBar/src/RatingProgressBar.tsx"],"sourcesContent":[null],"names":["makeStyles","useState","useEffect","useStyles","_jsx","Container"],"mappings":";;;;;;IAOA,MAAM,qBAAqB,GAAG,GAAG,CAAC;IAElC,MAAM,YAAY,GAAGA,+BAAU,CAAC,OAAO;IACrC,IAAA,iBAAiB,EAAE;IACjB,QAAA,MAAM,EAAE,MAAM;IACf,KAAA;IACF,CAAA,CAAC,CAAC,CAAC;AAEJ,UAAM,iBAAiB,GAAqC,CAAC,EAC3D,QAAQ,EACR,MAAM,GAAG,CAAC,EACV,QAAQ,EACR,kBAAkB,EAClB,MAAM,GAAG,CAAC,EACV,KAAK,GAAG,GAAG,EACX,KAAK,GAAG,GAAG,EACX,WAAW,GACZ,KAAI;QACH,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGC,cAAQ,CAAC,CAAC,CAAC,CAAC;QAE5DC,eAAS,CAAC,MAAK;IACb,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;gBACvC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;aAC/B,EAAE,KAAK,CAAC,CAAC;YAEV,OAAO,MAAM,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC9C,KAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;QAEtB,MAAM,aAAa,GAAGC,8BAAS,CAC7B,CAAC,CAAC,MAAM;IACN,QAAA,IAAI,EAAE;IACJ,YAAA,YAAY,EAAE,MAAM;gBACpB,MAAM;gBACN,KAAK;IACL,YAAA,eAAe,EAAE,QAAQ,KAAI,CAAC,aAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAA;IAC5D,YAAA,QAAQ,EAAE,QAAQ;IACnB,SAAA;IACD,QAAA,QAAQ,EAAE;IACR,YAAA,eAAe,EAAE,kBAAkB,KAAI,CAAC,aAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAA;IAC5D,YAAA,YAAY,EAAE,MAAM;gBACpB,KAAK,EAAE,CAAG,EAAA,gBAAgB,CAAG,CAAA,CAAA;gBAC7B,UAAU,EAAE,CAAS,MAAA,EAAA,qBAAqB,CAAgB,cAAA,CAAA;IAC3D,SAAA;IACF,KAAA,CAAC,EACF,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,gBAAgB,CAAC,CACxE,CAAC;IAEF,IAAA,QACEC,cAAA,CAACC,2BAAS,EAAA,EAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAA,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAX,WAAW,CAAE,IAAI,KAAI,EAAE,CAAC,CAAC,EAAE,EAClF,QAAA,EAAAD,cAAA,CAACC,2BAAS,EAAA,EACR,WAAW,EAAE;oBACX,IAAI,EAAE,CAAC,YAAY,CAAC,iBAAiB,EAAE,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC;iBACjG,EACD,CAAA,EAAA,CACQ,EACZ;IACJ;;;;;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RatingProgressBar } from './RatingProgressBar';
+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/RatingProgressBar/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,cAAc,QAAQ,CAAC"}

package/dist/type.d.ts

@@ -0,0 +1,15 @@
+import type { Styles } from '@cleartrip/ct-design-types';
+export interface RatingProgressBarProps {
+    progress: number;
+    barColor?: string;
+    progressedBarColor?: string;
+    height?: number;
+    width?: Styles['width'];
+    delay?: number;
+    radius?: number;
+    styleConfig?: {
+        root?: Styles[];
+        progress?: Styles[];
+    };
+}
+//# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/RatingProgressBar/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOzD,MAAM,WAAW,sBAAsB;IAErC,QAAQ,EAAE,MAAM,CAAC;IAGjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAG5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAGxB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,WAAW,CAAC,EAAE;QAEZ,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAEhB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;CACH"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@cleartrip/ct-design-rating-progress-bar",
+  "version": "4.0.0-SNAPSHOT-test.0",
+  "description": "RatingProgressBar Component",
+  "types": "dist/index.d.ts",
+  "main": "./dist/ct-design-rating-progress-bar.cjs.js",
+  "jsnext:main": "dist/ct-design-rating-progress-bar.esm.js",
+  "module": "dist/ct-design-rating-progress-bar.esm.js",
+  "react-native": "src/index.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/ct-design-rating-progress-bar.d.ts",
+      "import": "./dist/ct-design-rating-progress-bar.esm.js",
+      "default": "./dist/ct-design-rating-progress-bar.cjs.js"
+    }
+  },
+  "browser": {
+    "./dist/ct-design-rating-progress-bar.esm.js": "./dist/ct-design-rating-progress-bar.browser.esm.js",
+    "./dist/ct-design-rating-progress-bar.cjs.js": "./dist/ct-design-rating-progress-bar.browser.cjs.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@cleartrip/ct-design-container": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-test.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "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/RatingProgressBar.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+
+import type { RatingProgressBarProps } from './type';
+
+const ANIMATION_DURATION_MS = 500;
+
+const staticStyles = makeStyles(() => ({
+  progressContainer: {
+    height: '100%',
+  },
+}));
+
+const RatingProgressBar: React.FC<RatingProgressBarProps> = ({
+  progress,
+  radius = 2,
+  barColor,
+  progressedBarColor,
+  height = 4,
+  width = 244,
+  delay = 200,
+  styleConfig,
+}) => {
+  const [animatedProgress, setAnimatedProgress] = useState(0);
+
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setAnimatedProgress(progress);
+    }, delay);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [progress, delay]);
+
+  const dynamicStyles = useStyles(
+    (t) => ({
+      root: {
+        borderRadius: radius,
+        height,
+        width,
+        backgroundColor: barColor || t?.color.background.defaultDark,
+        overflow: 'hidden',
+      },
+      progress: {
+        backgroundColor: progressedBarColor || t?.color.text.primary,
+        borderRadius: radius,
+        width: `${animatedProgress}%`,
+        transition: `width ${ANIMATION_DURATION_MS}ms ease-in-out`,
+      },
+    }),
+    [radius, height, width, barColor, progressedBarColor, animatedProgress],
+  );
+
+  return (
+    <Container styleConfig={{ root: [dynamicStyles.root, ...(styleConfig?.root || [])] }}>
+      <Container
+        styleConfig={{
+          root: [staticStyles.progressContainer, dynamicStyles.progress, ...(styleConfig?.progress || [])],
+        }}
+      />
+    </Container>
+  );
+};
+
+export default RatingProgressBar;

package/src/index.ts

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

package/src/type.ts

@@ -0,0 +1,37 @@
+import type { Styles } from '@cleartrip/ct-design-types';
+
+/**
+ * Props for the RatingProgressBar component. A thin horizontal bar that
+ * animates its filled portion from 0 to `progress` (a percentage, 0–100)
+ * after an optional `delay`.
+ */
+export interface RatingProgressBarProps {
+  /** Progress value as a percentage (0–100). */
+  progress: number;
+
+  /** Background color of the track. Defaults to the theme's neutral background. */
+  barColor?: string;
+
+  /** Color of the filled portion. Defaults to the theme's primary text color. */
+  progressedBarColor?: string;
+
+  /** Height of the bar in pixels. */
+  height?: number;
+
+  /** Width of the bar in pixels. */
+  width?: Styles['width'];
+
+  /** Delay before the fill animation starts, in milliseconds. */
+  delay?: number;
+
+  /** Border radius in pixels. */
+  radius?: number;
+
+  /** Custom style overrides. */
+  styleConfig?: {
+    /** Styles applied to the track container. */
+    root?: Styles[];
+    /** Styles applied to the filled progress indicator. */
+    progress?: Styles[];
+  };
+}