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

package/README.md

@@ -0,0 +1,63 @@
+# ProgressBar
+
+A progress indicator component showing task completion status.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-progress-bar
+# or
+pnpm add @cleartrip/ct-design-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 { ProgressBar } from '@cleartrip/ct-design-progress-bar';
+
+function Example() {
+  return (
+    <ProgressBar>
+      {/* Basic usage */}
+    </ProgressBar>
+  );
+}
+```
+
+---
+
+## 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 { ProgressBar } from 'yagami/core/components';
++ import { ProgressBar } from '@cleartrip/ct-design-progress-bar';
+```

package/dist/ProgressBar.d.ts

@@ -0,0 +1,5 @@
+import { ContainerRef } from '@cleartrip/ct-design-container';
+import { IProgressBar } from './type';
+declare const ProgressBar: import("react").ForwardRefExoticComponent<IProgressBar & import("react").RefAttributes<ContainerRef>>;
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../packages/components/ProgressBar/src/ProgressBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGzE,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGtC,QAAA,MAAM,WAAW,uGAuEf,CAAC;AAIH,eAAe,WAAW,CAAC"}

package/dist/ProgressBar.native.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ContainerRef } from '@cleartrip/ct-design-container';
+import { IProgressBar } from './type';
+declare const ProgressBar: React.ForwardRefExoticComponent<IProgressBar & React.RefAttributes<ContainerRef>>;
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.native.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.native.d.ts","sourceRoot":"","sources":["../packages/components/ProgressBar/src/ProgressBar.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAa,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGzE,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGtC,QAAA,MAAM,WAAW,mFAwEf,CAAC;AAIH,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime"),e=require("react"),t=require("@cleartrip/ct-design-container"),n=require("@cleartrip/ct-design-style-manager");const s=n.makeStyles(r=>{var e,t;return{progressContainer:{backgroundColor:"transparent",display:"flex",flexGrow:1,justifyContent:"center",alignItems:"center"},progressBar:{width:"100%",overflow:"hidden"},progress:{height:"100%",backgroundColor:null===(t=null===(e=null==r?void 0:r.color)||void 0===e?void 0:e.background)||void 0===t?void 0:t.neutral,opacity:1}}}),o=e.forwardRef((o,a)=>{const{duration:i,resetProgress:l,hidden:c,completed:u,disabled:g}=o,[d,p]=e.useState(0),f=e.useRef(null),C=n.useStyles(r=>({progressContainer:{zIndex:c?0:3e3},progressBar:{height:c?r.spacing[0]:r.spacing[.5]},progress:{width:`${u?100:d}%`,transition:"width 100ms linear"}}),[c,u,d]);return e.useEffect(()=>{if(u||g)return;let r=Date.now();return l&&f.current&&(r=Date.now(),clearInterval(f.current)),f.current=setInterval(()=>{const e=(Date.now()-r)/i*100;e<=100?p(e):f.current&&clearInterval(f.current)},10),()=>{f.current&&clearInterval(f.current)}},[i,l,u,g]),r.jsx(t.Container,{ref:a,styleConfig:{root:[s.progressContainer,C.progressContainer]},children:r.jsx(t.Container,{styleConfig:{root:[s.progressBar,C.progressBar]},children:!g&&r.jsx(t.Container,{styleConfig:{root:[s.progress,C.progress]}})})})});o.displayName="ProgressBar",exports.ProgressBar=o;
+//# sourceMappingURL=ct-design-progress-bar.browser.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-progress-bar.browser.cjs.js","sources":["../packages/components/ProgressBar/src/style.ts","../packages/components/ProgressBar/src/ProgressBar.tsx"],"sourcesContent":[null,null],"names":["progressBarStaticStyles","makeStyles","theme","progressContainer","backgroundColor","display","flexGrow","justifyContent","alignItems","progressBar","width","overflow","progress","height","_b","_a","color","background","neutral","opacity","ProgressBar","forwardRef","props","ref","duration","resetProgress","hidden","completed","disabled","setProgress","useState","intervalRef","useRef","dynamicStyles","useStyles","zIndex","spacing","transition","useEffect","startTime","Date","now","current","clearInterval","setInterval","currentProgress","_jsx","Container","styleConfig","root","children","displayName"],"mappings":"+JAEO,MAAMA,EAA0BC,EAAAA,WAAYC,YAAU,MAAC,CAC5DC,kBAAmB,CACjBC,gBAAiB,cACjBC,QAAS,OACTC,SAAU,EACVC,eAAgB,SAChBC,WAAY,UAEdC,YAAa,CACXC,MAAO,OACPC,SAAU,UAKZC,SAAU,CACRC,OAAQ,OACRT,wBAAiBU,EAAc,QAAdC,EAAAb,aAAA,EAAAA,EAAOc,aAAO,IAAAD,OAAA,EAAAA,EAAAE,iCAAYC,QAC3CC,QAAS,MCZPC,EAAcC,EAAUA,WAA6B,CAACC,EAAOC,KACjE,MAAMC,SAAEA,EAAQC,cAAEA,EAAaC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAaN,GAC1DV,EAAUiB,GAAeC,EAAQA,SAAS,GAC3CC,EAAcC,SAA8C,MAE5DC,EAAgBC,YACnBhC,IAAW,CACVC,kBAAmB,CACjBgC,OAAQT,EAAS,EAAI,KAEvBjB,YAAa,CACXI,OAAQa,EAASxB,EAAMkC,QAAQ,GAAKlC,EAAMkC,QAAQ,KAEpDxB,SAAU,CACRF,MAAO,GAAGiB,EAAY,IAAMf,KAC5ByB,WAAY,wBAGhB,CAACX,EAAQC,EAAWf,IA+BtB,OA5BA0B,EAAAA,UAAU,KACR,GAAIX,GAAaC,EAAU,OAE3B,IAAIW,EAAYC,KAAKC,MAkBrB,OAjBIhB,GAAiBM,EAAYW,UAC/BH,EAAYC,KAAKC,MACjBE,cAAcZ,EAAYW,UAG5BX,EAAYW,QAAUE,YAAY,KAChC,MAEMC,GAFML,KAAKC,MACSF,GACaf,EAAY,IAE/CqB,GAAmB,IACrBhB,EAAYgB,GACHd,EAAYW,SACrBC,cAAcZ,EAAYW,UAE3B,IAEI,KACDX,EAAYW,SACdC,cAAcZ,EAAYW,WAG7B,CAAClB,EAAUC,EAAeE,EAAWC,IAGtCkB,MAACC,EAASA,UAAA,CACRxB,IAAKA,EACLyB,YAAa,CACXC,KAAM,CAACjD,EAAwBG,kBAAmB8B,EAAc9B,oBACjE+C,SAEDJ,EAAAA,IAACC,EAASA,UACR,CAAAC,YAAa,CACXC,KAAM,CAACjD,EAAwBS,YAAawB,EAAcxB,cAG3DyC,UAACtB,GACAkB,MAACC,EAASA,UAAA,CACRC,YAAa,CACXC,KAAM,CAACjD,EAAwBY,SAAUqB,EAAcrB,mBASrEQ,EAAY+B,YAAc"}

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

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useState as t,useRef as o,useEffect as n}from"react";import{Container as s}from"@cleartrip/ct-design-container";import{makeStyles as a,useStyles as i}from"@cleartrip/ct-design-style-manager";const l=a(r=>{var e,t;return{progressContainer:{backgroundColor:"transparent",display:"flex",flexGrow:1,justifyContent:"center",alignItems:"center"},progressBar:{width:"100%",overflow:"hidden"},progress:{height:"100%",backgroundColor:null===(t=null===(e=null==r?void 0:r.color)||void 0===e?void 0:e.background)||void 0===t?void 0:t.neutral,opacity:1}}}),c=e((e,a)=>{const{duration:c,resetProgress:g,hidden:d,completed:p,disabled:u}=e,[m,f]=t(0),h=o(null),v=i(r=>({progressContainer:{zIndex:d?0:3e3},progressBar:{height:d?r.spacing[0]:r.spacing[.5]},progress:{width:`${p?100:m}%`,transition:"width 100ms linear"}}),[d,p,m]);return n(()=>{if(p||u)return;let r=Date.now();return g&&h.current&&(r=Date.now(),clearInterval(h.current)),h.current=setInterval(()=>{const e=(Date.now()-r)/c*100;e<=100?f(e):h.current&&clearInterval(h.current)},10),()=>{h.current&&clearInterval(h.current)}},[c,g,p,u]),r(s,{ref:a,styleConfig:{root:[l.progressContainer,v.progressContainer]},children:r(s,{styleConfig:{root:[l.progressBar,v.progressBar]},children:!u&&r(s,{styleConfig:{root:[l.progress,v.progress]}})})})});c.displayName="ProgressBar";export{c as ProgressBar};
+//# sourceMappingURL=ct-design-progress-bar.browser.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-progress-bar.browser.esm.js","sources":["../packages/components/ProgressBar/src/style.ts","../packages/components/ProgressBar/src/ProgressBar.tsx"],"sourcesContent":[null,null],"names":["progressBarStaticStyles","makeStyles","theme","progressContainer","backgroundColor","display","flexGrow","justifyContent","alignItems","progressBar","width","overflow","progress","height","_b","_a","color","background","neutral","opacity","ProgressBar","forwardRef","props","ref","duration","resetProgress","hidden","completed","disabled","setProgress","useState","intervalRef","useRef","dynamicStyles","useStyles","zIndex","spacing","transition","useEffect","startTime","Date","now","current","clearInterval","setInterval","currentProgress","_jsx","Container","styleConfig","root","children","displayName"],"mappings":"8PAEO,MAAMA,EAA0BC,EAAYC,YAAU,MAAC,CAC5DC,kBAAmB,CACjBC,gBAAiB,cACjBC,QAAS,OACTC,SAAU,EACVC,eAAgB,SAChBC,WAAY,UAEdC,YAAa,CACXC,MAAO,OACPC,SAAU,UAKZC,SAAU,CACRC,OAAQ,OACRT,wBAAiBU,EAAc,QAAdC,EAAAb,aAAA,EAAAA,EAAOc,aAAO,IAAAD,OAAA,EAAAA,EAAAE,iCAAYC,QAC3CC,QAAS,MCZPC,EAAcC,EAAuC,CAACC,EAAOC,KACjE,MAAMC,SAAEA,EAAQC,cAAEA,EAAaC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAaN,GAC1DV,EAAUiB,GAAeC,EAAiB,GAC3CC,EAAcC,EAA8C,MAE5DC,EAAgBC,EACnBhC,IAAW,CACVC,kBAAmB,CACjBgC,OAAQT,EAAS,EAAI,KAEvBjB,YAAa,CACXI,OAAQa,EAASxB,EAAMkC,QAAQ,GAAKlC,EAAMkC,QAAQ,KAEpDxB,SAAU,CACRF,MAAO,GAAGiB,EAAY,IAAMf,KAC5ByB,WAAY,wBAGhB,CAACX,EAAQC,EAAWf,IA+BtB,OA5BA0B,EAAU,KACR,GAAIX,GAAaC,EAAU,OAE3B,IAAIW,EAAYC,KAAKC,MAkBrB,OAjBIhB,GAAiBM,EAAYW,UAC/BH,EAAYC,KAAKC,MACjBE,cAAcZ,EAAYW,UAG5BX,EAAYW,QAAUE,YAAY,KAChC,MAEMC,GAFML,KAAKC,MACSF,GACaf,EAAY,IAE/CqB,GAAmB,IACrBhB,EAAYgB,GACHd,EAAYW,SACrBC,cAAcZ,EAAYW,UAE3B,IAEI,KACDX,EAAYW,SACdC,cAAcZ,EAAYW,WAG7B,CAAClB,EAAUC,EAAeE,EAAWC,IAGtCkB,EAACC,EAAS,CACRxB,IAAKA,EACLyB,YAAa,CACXC,KAAM,CAACjD,EAAwBG,kBAAmB8B,EAAc9B,oBACjE+C,SAEDJ,EAACC,EACC,CAAAC,YAAa,CACXC,KAAM,CAACjD,EAAwBS,YAAawB,EAAcxB,cAG3DyC,UAACtB,GACAkB,EAACC,EAAS,CACRC,YAAa,CACXC,KAAM,CAACjD,EAAwBY,SAAUqB,EAAcrB,mBASrEQ,EAAY+B,YAAc"}

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

@@ -0,0 +1,82 @@
+'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 progressBarStaticStyles = ctDesignStyleManager.makeStyles((theme) => {
+    var _a, _b;
+    return ({
+        progressContainer: {
+            backgroundColor: 'transparent',
+            display: 'flex',
+            flexGrow: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        progressBar: {
+            width: '100%',
+            overflow: 'hidden',
+        },
+        progress: {
+            height: '100%',
+            backgroundColor: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.color) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b.neutral,
+            opacity: 1,
+        },
+    });
+});
+
+const ProgressBar = react.forwardRef((props, ref) => {
+    const { duration, resetProgress, hidden, completed, disabled } = props;
+    const [progress, setProgress] = react.useState(0);
+    const intervalRef = react.useRef(null);
+    const dynamicStyles = ctDesignStyleManager.useStyles((theme) => ({
+        progressContainer: {
+            zIndex: hidden ? 0 : 3000,
+        },
+        progressBar: {
+            height: hidden ? theme.spacing[0] : theme.spacing[0.5],
+        },
+        progress: {
+            width: `${completed ? 100 : progress}%`,
+            transition: 'width 100ms linear',
+        },
+    }), [hidden, completed, progress]);
+    react.useEffect(() => {
+        if (completed || disabled)
+            return;
+        let startTime = Date.now();
+        if (resetProgress && intervalRef.current) {
+            startTime = Date.now();
+            clearInterval(intervalRef.current);
+        }
+        intervalRef.current = setInterval(() => {
+            const now = Date.now();
+            const elapsedTime = now - startTime;
+            const currentProgress = (elapsedTime / duration) * 100;
+            if (currentProgress <= 100) {
+                setProgress(currentProgress);
+            }
+            else if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        }, 10);
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [duration, resetProgress, completed, disabled]);
+    return (jsxRuntime.jsx(ctDesignContainer.Container, { ref: ref, styleConfig: {
+            root: [progressBarStaticStyles.progressContainer, dynamicStyles.progressContainer],
+        }, children: jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+                root: [progressBarStaticStyles.progressBar, dynamicStyles.progressBar],
+            }, children: !disabled && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+                    root: [progressBarStaticStyles.progress, dynamicStyles.progress],
+                } })) }) }));
+});
+ProgressBar.displayName = 'ProgressBar';
+
+exports.ProgressBar = ProgressBar;
+//# sourceMappingURL=ct-design-progress-bar.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-progress-bar.cjs.js","sources":["../packages/components/ProgressBar/src/style.ts","../packages/components/ProgressBar/src/ProgressBar.tsx"],"sourcesContent":[null,null],"names":["makeStyles","forwardRef","useState","useRef","useStyles","useEffect","_jsx","Container"],"mappings":"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"}

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

@@ -0,0 +1,80 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+
+const progressBarStaticStyles = makeStyles((theme) => {
+    var _a, _b;
+    return ({
+        progressContainer: {
+            backgroundColor: 'transparent',
+            display: 'flex',
+            flexGrow: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        progressBar: {
+            width: '100%',
+            overflow: 'hidden',
+        },
+        progress: {
+            height: '100%',
+            backgroundColor: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.color) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b.neutral,
+            opacity: 1,
+        },
+    });
+});
+
+const ProgressBar = forwardRef((props, ref) => {
+    const { duration, resetProgress, hidden, completed, disabled } = props;
+    const [progress, setProgress] = useState(0);
+    const intervalRef = useRef(null);
+    const dynamicStyles = useStyles((theme) => ({
+        progressContainer: {
+            zIndex: hidden ? 0 : 3000,
+        },
+        progressBar: {
+            height: hidden ? theme.spacing[0] : theme.spacing[0.5],
+        },
+        progress: {
+            width: `${completed ? 100 : progress}%`,
+            transition: 'width 100ms linear',
+        },
+    }), [hidden, completed, progress]);
+    useEffect(() => {
+        if (completed || disabled)
+            return;
+        let startTime = Date.now();
+        if (resetProgress && intervalRef.current) {
+            startTime = Date.now();
+            clearInterval(intervalRef.current);
+        }
+        intervalRef.current = setInterval(() => {
+            const now = Date.now();
+            const elapsedTime = now - startTime;
+            const currentProgress = (elapsedTime / duration) * 100;
+            if (currentProgress <= 100) {
+                setProgress(currentProgress);
+            }
+            else if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        }, 10);
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [duration, resetProgress, completed, disabled]);
+    return (jsx(Container, { ref: ref, styleConfig: {
+            root: [progressBarStaticStyles.progressContainer, dynamicStyles.progressContainer],
+        }, children: jsx(Container, { styleConfig: {
+                root: [progressBarStaticStyles.progressBar, dynamicStyles.progressBar],
+            }, children: !disabled && (jsx(Container, { styleConfig: {
+                    root: [progressBarStaticStyles.progress, dynamicStyles.progress],
+                } })) }) }));
+});
+ProgressBar.displayName = 'ProgressBar';
+
+export { ProgressBar };
+//# sourceMappingURL=ct-design-progress-bar.esm.js.map

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

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

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

@@ -0,0 +1,83 @@
+(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.CTDesignSystemProgressBar = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.ctDesignStyleManager));
+})(this, (function (exports, jsxRuntime, react, ctDesignContainer, ctDesignStyleManager) { 'use strict';
+
+    const progressBarStaticStyles = ctDesignStyleManager.makeStyles((theme) => {
+        var _a, _b;
+        return ({
+            progressContainer: {
+                backgroundColor: 'transparent',
+                display: 'flex',
+                flexGrow: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+            },
+            progressBar: {
+                width: '100%',
+                overflow: 'hidden',
+            },
+            progress: {
+                height: '100%',
+                backgroundColor: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.color) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b.neutral,
+                opacity: 1,
+            },
+        });
+    });
+
+    const ProgressBar = react.forwardRef((props, ref) => {
+        const { duration, resetProgress, hidden, completed, disabled } = props;
+        const [progress, setProgress] = react.useState(0);
+        const intervalRef = react.useRef(null);
+        const dynamicStyles = ctDesignStyleManager.useStyles((theme) => ({
+            progressContainer: {
+                zIndex: hidden ? 0 : 3000,
+            },
+            progressBar: {
+                height: hidden ? theme.spacing[0] : theme.spacing[0.5],
+            },
+            progress: {
+                width: `${completed ? 100 : progress}%`,
+                transition: 'width 100ms linear',
+            },
+        }), [hidden, completed, progress]);
+        react.useEffect(() => {
+            if (completed || disabled)
+                return;
+            let startTime = Date.now();
+            if (resetProgress && intervalRef.current) {
+                startTime = Date.now();
+                clearInterval(intervalRef.current);
+            }
+            intervalRef.current = setInterval(() => {
+                const now = Date.now();
+                const elapsedTime = now - startTime;
+                const currentProgress = (elapsedTime / duration) * 100;
+                if (currentProgress <= 100) {
+                    setProgress(currentProgress);
+                }
+                else if (intervalRef.current) {
+                    clearInterval(intervalRef.current);
+                }
+            }, 10);
+            return () => {
+                if (intervalRef.current) {
+                    clearInterval(intervalRef.current);
+                }
+            };
+        }, [duration, resetProgress, completed, disabled]);
+        return (jsxRuntime.jsx(ctDesignContainer.Container, { ref: ref, styleConfig: {
+                root: [progressBarStaticStyles.progressContainer, dynamicStyles.progressContainer],
+            }, children: jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+                    root: [progressBarStaticStyles.progressBar, dynamicStyles.progressBar],
+                }, children: !disabled && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+                        root: [progressBarStaticStyles.progress, dynamicStyles.progress],
+                    } })) }) }));
+    });
+    ProgressBar.displayName = 'ProgressBar';
+
+    exports.ProgressBar = ProgressBar;
+
+}));
+//# sourceMappingURL=ct-design-progress-bar.umd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-progress-bar.umd.js","sources":["../packages/components/ProgressBar/src/style.ts","../packages/components/ProgressBar/src/ProgressBar.tsx"],"sourcesContent":[null,null],"names":["makeStyles","forwardRef","useState","useRef","useStyles","useEffect","_jsx","Container"],"mappings":"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"}

package/dist/index.d.ts

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

package/dist/index.native.d.ts

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

package/dist/style.d.ts

@@ -0,0 +1,19 @@
+export declare const progressBarStaticStyles: {
+    progressContainer: {
+        backgroundColor: string;
+        display: "flex";
+        flexGrow: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    progressBar: {
+        width: "100%";
+        overflow: "hidden";
+    };
+    progress: {
+        height: "100%";
+        backgroundColor: string;
+        opacity: number;
+    };
+};
+//# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/ProgressBar/src/style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;CAoBjC,CAAC"}

package/dist/type.d.ts

@@ -0,0 +1,9 @@
+export interface IProgressBar {
+    duration: number;
+    resetProgress: boolean;
+    hidden: boolean;
+    completed: boolean;
+    disabled: boolean;
+}
+export type ProgressBarProps = IProgressBar;
+//# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/ProgressBar/src/type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAE3B,QAAQ,EAAE,MAAM,CAAC;IAEjB,aAAa,EAAE,OAAO,CAAC;IAEvB,MAAM,EAAE,OAAO,CAAC;IAEhB,SAAS,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAKD,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@cleartrip/ct-design-progress-bar",
+  "version": "4.0.0-SNAPSHOT-test.0",
+  "description": "ProgressBar migrated to ct-design-style-manager",
+  "types": "dist/index.d.ts",
+  "main": "./dist/ct-design-progress-bar.cjs.js",
+  "jsnext:main": "dist/ct-design-progress-bar.esm.js",
+  "module": "dist/ct-design-progress-bar.esm.js",
+  "react-native": "src/index.native.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/ct-design-progress-bar.d.ts",
+      "import": "./dist/ct-design-progress-bar.esm.js",
+      "default": "./dist/ct-design-progress-bar.cjs.js"
+    }
+  },
+  "browser": {
+    "./dist/ct-design-progress-bar.esm.js": "./dist/ct-design-progress-bar.browser.esm.js",
+    "./dist/ct-design-progress-bar.cjs.js": "./dist/ct-design-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-style-manager": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-test.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-native-reanimated": ">=2.0.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/ProgressBar.native.tsx

@@ -0,0 +1,86 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { Container, ContainerRef } from '@cleartrip/ct-design-container';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+
+import { IProgressBar } from './type';
+import { progressBarStaticStyles } from './style';
+
+const ProgressBar = forwardRef<ContainerRef, IProgressBar>((props, ref) => {
+  const { duration, resetProgress, hidden, completed, disabled } = props;
+  const [progress, setProgress] = useState<number>(0);
+
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const dynamicStyles = useStyles(
+    (theme) => ({
+      progressContainer: {
+        zIndex: hidden ? 0 : 3000,
+      },
+      progressBar: {
+        height: hidden ? theme.spacing[0] : theme.spacing[0.5],
+      },
+    }),
+    [hidden],
+  );
+
+  useEffect(() => {
+    if (completed || disabled) return;
+
+    let startTime = Date.now();
+    if (resetProgress && intervalRef.current) {
+      startTime = Date.now();
+      clearInterval(intervalRef.current);
+    }
+
+    intervalRef.current = setInterval(() => {
+      const now = Date.now();
+      const elapsedTime = now - startTime;
+      const currentProgress = (elapsedTime / duration) * 100;
+
+      if (currentProgress <= 100) {
+        setProgress(currentProgress);
+      } else if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    }, 10);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [duration, resetProgress, completed, disabled]);
+
+  const progressWidth = useSharedValue(0);
+
+  useEffect(() => {
+    progressWidth.value = completed ? 100 : progress;
+  }, [completed, progress, progressWidth]);
+
+  const animatedProgressStyle = useAnimatedStyle(() => ({
+    width: `${progressWidth.value}%`,
+  }));
+
+  return (
+    <Container
+      ref={ref}
+      styleConfig={{
+        root: [progressBarStaticStyles.progressContainer, dynamicStyles.progressContainer],
+      }}
+    >
+      <Container
+        styleConfig={{
+          root: [progressBarStaticStyles.progressBar, dynamicStyles.progressBar],
+        }}
+      >
+        {!disabled && <Animated.View style={[progressBarStaticStyles.progress, animatedProgressStyle]} />}
+      </Container>
+    </Container>
+  );
+});
+
+ProgressBar.displayName = 'ProgressBar';
+
+export default ProgressBar;

package/src/ProgressBar.tsx

@@ -0,0 +1,84 @@
+import { forwardRef, useEffect, useRef, useState } from 'react';
+
+import { Container, ContainerRef } from '@cleartrip/ct-design-container';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+
+import { IProgressBar } from './type';
+import { progressBarStaticStyles } from './style';
+
+const ProgressBar = forwardRef<ContainerRef, IProgressBar>((props, ref) => {
+  const { duration, resetProgress, hidden, completed, disabled } = props;
+  const [progress, setProgress] = useState<number>(0);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const dynamicStyles = useStyles(
+    (theme) => ({
+      progressContainer: {
+        zIndex: hidden ? 0 : 3000,
+      },
+      progressBar: {
+        height: hidden ? theme.spacing[0] : theme.spacing[0.5],
+      },
+      progress: {
+        width: `${completed ? 100 : progress}%`,
+        transition: 'width 100ms linear',
+      },
+    }),
+    [hidden, completed, progress],
+  );
+
+  useEffect(() => {
+    if (completed || disabled) return;
+
+    let startTime = Date.now();
+    if (resetProgress && intervalRef.current) {
+      startTime = Date.now();
+      clearInterval(intervalRef.current);
+    }
+
+    intervalRef.current = setInterval(() => {
+      const now = Date.now();
+      const elapsedTime = now - startTime;
+      const currentProgress = (elapsedTime / duration) * 100;
+
+      if (currentProgress <= 100) {
+        setProgress(currentProgress);
+      } else if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    }, 10);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [duration, resetProgress, completed, disabled]);
+
+  return (
+    <Container
+      ref={ref}
+      styleConfig={{
+        root: [progressBarStaticStyles.progressContainer, dynamicStyles.progressContainer],
+      }}
+    >
+      <Container
+        styleConfig={{
+          root: [progressBarStaticStyles.progressBar, dynamicStyles.progressBar],
+        }}
+      >
+        {!disabled && (
+          <Container
+            styleConfig={{
+              root: [progressBarStaticStyles.progress, dynamicStyles.progress],
+            }}
+          />
+        )}
+      </Container>
+    </Container>
+  );
+});
+
+ProgressBar.displayName = 'ProgressBar';
+
+export default ProgressBar;

package/src/index.native.ts

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

package/src/index.ts

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

package/src/style.ts

@@ -0,0 +1,23 @@
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+export const progressBarStaticStyles = makeStyles((theme) => ({
+  progressContainer: {
+    backgroundColor: 'transparent',
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  progressBar: {
+    width: '100%',
+    overflow: 'hidden',
+    // todo fix this
+    // @ts-ignore
+    // backgroundColor: theme?.color?.background?.gray500,
+  },
+  progress: {
+    height: '100%',
+    backgroundColor: theme?.color?.background?.neutral,
+    opacity: 1,
+  },
+}));

package/src/type.ts

@@ -0,0 +1,17 @@
+export interface IProgressBar {
+  /** Duration in milliseconds for the progress bar to complete */
+  duration: number;
+  /** Flag to reset the progress bar */
+  resetProgress: boolean;
+  /** Whether the progress bar is hidden */
+  hidden: boolean;
+  /** Whether the progress bar is completed */
+  completed: boolean;
+  /** Whether the progress bar is disabled */
+  disabled: boolean;
+}
+
+/**
+ * @deprecated Use `IProgressBar`.
+ */
+export type ProgressBarProps = IProgressBar;