@veeyaainnovatives/progress-bar 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +134 -0
  2. package/dist/index.esm.js +157 -0
  3. package/dist/index.esm.js.map +1 -0
  4. package/dist/index.js +159 -0
  5. package/dist/index.js.map +1 -0
  6. package/package.json +55 -0
package/README.md ADDED
@@ -0,0 +1,134 @@
1
+ # @veeyaainnovatives/progress-bar
2
+
3
+ A reusable Progress bar component for React applications.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @veeyaainnovatives/progress-bar --save
9
+ ```
10
+
11
+ ## Peer Dependencies
12
+
13
+ This package requires the following peer dependencies:
14
+
15
+ - `react` (^16.8.0 || ^17.0.0 || ^18.0.0)
16
+ - `react-dom` (^16.8.0 || ^17.0.0 || ^18.0.0)
17
+ - `react-bootstrap` (^2.0.0)
18
+
19
+ ## Usage
20
+
21
+ ```jsx
22
+ import { ProgressBar } from '@veeyaainnovatives/progress-bar';
23
+
24
+ function App() {
25
+ return (
26
+ <ProgressBar
27
+ progress={75}
28
+ title="Total Progress"
29
+ description="75% project completed"
30
+ />
31
+ );
32
+ }
33
+ ```
34
+
35
+ ## Props
36
+
37
+ | Prop | Type | Default | Description |
38
+ |------|------|---------|-------------|
39
+ | `progress` | `number` | `0` | Progress value (0-100) |
40
+ | `title` | `string` | `"Total Progress"` | Title text displayed above the progress bar |
41
+ | `description` | `string` | `undefined` | Description text displayed below the progress bar |
42
+ | `showPercentage` | `boolean` | `true` | Whether to show the percentage value |
43
+ | `showDescription` | `boolean` | `true` | Whether to show the description text |
44
+ | `cardStyle` | `object` | `{}` | Custom styles for the Card component |
45
+ | `cardBodyStyle` | `object` | `{ padding: '24px' }` | Custom styles for the Card.Body |
46
+ | `titleStyle` | `object` | `{ fontWeight: 'bold', fontSize: '18px', color: '#677a58' }` | Custom styles for the title |
47
+ | `percentageStyle` | `object` | `{ fontSize: '24px', fontWeight: 'bold', color: '#677a58' }` | Custom styles for the percentage |
48
+ | `barContainerStyle` | `object` | `{ width: '100%', height: '12px', backgroundColor: '#e9ecef', borderRadius: '10px', overflow: 'hidden' }` | Custom styles for the progress bar container |
49
+ | `barFillStyle` | `object` | `{ height: '100%', backgroundColor: '#677a58', transition: 'width 0.3s ease', borderRadius: '10px' }` | Custom styles for the progress bar fill |
50
+ | `descriptionStyle` | `object` | `{ fontSize: '14px', color: '#6c757d' }` | Custom styles for the description |
51
+ | `cardClassName` | `string` | `""` | Additional CSS classes for the Card |
52
+ | `cardBodyClassName` | `string` | `""` | Additional CSS classes for the Card.Body |
53
+ | `titleClassName` | `string` | `""` | Additional CSS classes for the title |
54
+ | `percentageClassName` | `string` | `""` | Additional CSS classes for the percentage |
55
+ | `descriptionClassName` | `string` | `""` | Additional CSS classes for the description |
56
+ | `barColor` | `string` | `undefined` | Custom color for the progress bar fill (overrides barFillStyle.backgroundColor) |
57
+ | `backgroundColor` | `string` | `undefined` | Custom color for the progress bar background (overrides barContainerStyle.backgroundColor) |
58
+ | `titleColor` | `string` | `undefined` | Custom color for the title (overrides titleStyle.color) |
59
+ | `percentageColor` | `string` | `undefined` | Custom color for the percentage (overrides percentageStyle.color) |
60
+ | `descriptionColor` | `string` | `undefined` | Custom color for the description (overrides descriptionStyle.color) |
61
+
62
+ ## Examples
63
+
64
+ ### Basic Usage
65
+
66
+ ```jsx
67
+ <ProgressBar progress={50} />
68
+ ```
69
+
70
+ ### With Custom Description
71
+
72
+ ```jsx
73
+ <ProgressBar
74
+ progress={75}
75
+ title="Project Completion"
76
+ description="75% project completed"
77
+ />
78
+ ```
79
+
80
+ ### Custom Colors
81
+
82
+ ```jsx
83
+ <ProgressBar
84
+ progress={60}
85
+ barColor="#3B82F6"
86
+ backgroundColor="#E5E7EB"
87
+ titleColor="#1F2937"
88
+ percentageColor="#3B82F6"
89
+ />
90
+ ```
91
+
92
+ ### Without Percentage
93
+
94
+ ```jsx
95
+ <ProgressBar
96
+ progress={80}
97
+ showPercentage={false}
98
+ description="80% completed"
99
+ />
100
+ ```
101
+
102
+ ### Without Description
103
+
104
+ ```jsx
105
+ <ProgressBar
106
+ progress={90}
107
+ showDescription={false}
108
+ />
109
+ ```
110
+
111
+ ### Custom Styles
112
+
113
+ ```jsx
114
+ <ProgressBar
115
+ progress={65}
116
+ cardStyle={{
117
+ borderRadius: '8px',
118
+ boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
119
+ }}
120
+ barContainerStyle={{
121
+ height: '16px',
122
+ backgroundColor: '#F3F4F6'
123
+ }}
124
+ barFillStyle={{
125
+ backgroundColor: '#10B981',
126
+ transition: 'width 0.5s ease'
127
+ }}
128
+ />
129
+ ```
130
+
131
+ ## License
132
+
133
+ MIT
134
+
package/dist/index.esm.js ADDED
@@ -0,0 +1,157 @@
1
+ import { Card } from 'react-bootstrap';
2
+ import { jsx, jsxs } from 'react/jsx-runtime';
3
+
4
+ function _defineProperty(e, r, t) {
5
+ return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
6
+ value: t,
7
+ enumerable: true,
8
+ configurable: true,
9
+ writable: true
10
+ }) : e[r] = t, e;
11
+ }
12
+ function ownKeys(e, r) {
13
+ var t = Object.keys(e);
14
+ if (Object.getOwnPropertySymbols) {
15
+ var o = Object.getOwnPropertySymbols(e);
16
+ r && (o = o.filter(function (r) {
17
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
18
+ })), t.push.apply(t, o);
19
+ }
20
+ return t;
21
+ }
22
+ function _objectSpread2(e) {
23
+ for (var r = 1; r < arguments.length; r++) {
24
+ var t = null != arguments[r] ? arguments[r] : {};
25
+ r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
26
+ _defineProperty(e, r, t[r]);
27
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
28
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
29
+ });
30
+ }
31
+ return e;
32
+ }
33
+ function _toPrimitive(t, r) {
34
+ if ("object" != typeof t || !t) return t;
35
+ var e = t[Symbol.toPrimitive];
36
+ if (void 0 !== e) {
37
+ var i = e.call(t, r);
38
+ if ("object" != typeof i) return i;
39
+ throw new TypeError("@@toPrimitive must return a primitive value.");
40
+ }
41
+ return ("string" === r ? String : Number)(t);
42
+ }
43
+ function _toPropertyKey(t) {
44
+ var i = _toPrimitive(t, "string");
45
+ return "symbol" == typeof i ? i : i + "";
46
+ }
47
+
48
+ const ProgressBar = _ref => {
49
+ let {
50
+ progress = 0,
51
+ title = "Total Progress",
52
+ description,
53
+ showPercentage = true,
54
+ showDescription = true,
55
+ cardStyle = {},
56
+ cardBodyStyle = {
57
+ padding: '24px'
58
+ },
59
+ titleStyle = {
60
+ fontWeight: 'bold',
61
+ fontSize: '18px',
62
+ color: '#677a58'
63
+ },
64
+ percentageStyle = {
65
+ fontSize: '24px',
66
+ fontWeight: 'bold',
67
+ color: '#677a58'
68
+ },
69
+ barContainerStyle = {
70
+ width: '100%',
71
+ height: '12px',
72
+ backgroundColor: '#e9ecef',
73
+ borderRadius: '10px',
74
+ overflow: 'hidden'
75
+ },
76
+ barFillStyle = {
77
+ height: '100%',
78
+ backgroundColor: '#677a58',
79
+ transition: 'width 0.3s ease',
80
+ borderRadius: '10px'
81
+ },
82
+ descriptionStyle = {
83
+ fontSize: '14px',
84
+ color: '#6c757d'
85
+ },
86
+ cardClassName = "",
87
+ cardBodyClassName = "",
88
+ titleClassName = "",
89
+ percentageClassName = "",
90
+ descriptionClassName = "",
91
+ // Custom colors
92
+ barColor,
93
+ backgroundColor,
94
+ titleColor,
95
+ percentageColor,
96
+ descriptionColor
97
+ } = _ref;
98
+ // Ensure progress is between 0 and 100
99
+ const normalizedProgress = Math.min(Math.max(0, Number(progress) || 0), 100);
100
+
101
+ // Build styles with custom colors if provided
102
+ const finalTitleStyle = _objectSpread2(_objectSpread2({}, titleStyle), titleColor && {
103
+ color: titleColor
104
+ });
105
+ const finalPercentageStyle = _objectSpread2(_objectSpread2({}, percentageStyle), percentageColor && {
106
+ color: percentageColor
107
+ });
108
+ const finalBarContainerStyle = _objectSpread2(_objectSpread2({}, barContainerStyle), backgroundColor && {
109
+ backgroundColor
110
+ });
111
+ const finalBarFillStyle = _objectSpread2(_objectSpread2({}, barFillStyle), {}, {
112
+ width: "".concat(normalizedProgress, "%")
113
+ }, barColor && {
114
+ backgroundColor: barColor
115
+ });
116
+ const finalDescriptionStyle = _objectSpread2(_objectSpread2({}, descriptionStyle), descriptionColor && {
117
+ color: descriptionColor
118
+ });
119
+ const defaultCardStyle = _objectSpread2({
120
+ borderRadius: '16px',
121
+ border: 'none',
122
+ backgroundColor: '#fff',
123
+ boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
124
+ }, cardStyle);
125
+ return /*#__PURE__*/jsx(Card, {
126
+ style: defaultCardStyle,
127
+ className: cardClassName,
128
+ children: /*#__PURE__*/jsxs(Card.Body, {
129
+ style: cardBodyStyle,
130
+ className: cardBodyClassName,
131
+ children: [/*#__PURE__*/jsxs("div", {
132
+ className: "d-flex justify-content-between align-items-center mb-3",
133
+ children: [/*#__PURE__*/jsx("h5", {
134
+ className: "mb-0 ".concat(titleClassName),
135
+ style: finalTitleStyle,
136
+ children: title
137
+ }), showPercentage && /*#__PURE__*/jsxs("span", {
138
+ className: percentageClassName,
139
+ style: finalPercentageStyle,
140
+ children: [normalizedProgress, "%"]
141
+ })]
142
+ }), /*#__PURE__*/jsx("div", {
143
+ style: finalBarContainerStyle,
144
+ children: /*#__PURE__*/jsx("div", {
145
+ style: finalBarFillStyle
146
+ })
147
+ }), showDescription && description && /*#__PURE__*/jsx("p", {
148
+ className: "mt-2 mb-0 ".concat(descriptionClassName),
149
+ style: finalDescriptionStyle,
150
+ children: description
151
+ })]
152
+ })
153
+ });
154
+ };
155
+
156
+ export { ProgressBar };
157
+ //# sourceMappingURL=index.esm.js.map
package/dist/index.esm.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.esm.js","sources":["../src/ProgressBar.jsx"],"sourcesContent":["import { Card } from 'react-bootstrap';\r\n\r\nconst ProgressBar = ({\r\n progress = 0,\r\n title = \"Total Progress\",\r\n description,\r\n showPercentage = true,\r\n showDescription = true,\r\n cardStyle = {},\r\n cardBodyStyle = { padding: '24px' },\r\n titleStyle = {\r\n fontWeight: 'bold',\r\n fontSize: '18px',\r\n color: '#677a58'\r\n },\r\n percentageStyle = {\r\n fontSize: '24px',\r\n fontWeight: 'bold',\r\n color: '#677a58'\r\n },\r\n barContainerStyle = {\r\n width: '100%',\r\n height: '12px',\r\n backgroundColor: '#e9ecef',\r\n borderRadius: '10px',\r\n overflow: 'hidden'\r\n },\r\n barFillStyle = {\r\n height: '100%',\r\n backgroundColor: '#677a58',\r\n transition: 'width 0.3s ease',\r\n borderRadius: '10px'\r\n },\r\n descriptionStyle = {\r\n fontSize: '14px',\r\n color: '#6c757d'\r\n },\r\n cardClassName = \"\",\r\n cardBodyClassName = \"\",\r\n titleClassName = \"\",\r\n percentageClassName = \"\",\r\n descriptionClassName = \"\",\r\n // Custom colors\r\n barColor,\r\n backgroundColor,\r\n titleColor,\r\n percentageColor,\r\n descriptionColor\r\n}) => {\r\n // Ensure progress is between 0 and 100\r\n const normalizedProgress = Math.min(Math.max(0, Number(progress) || 0), 100);\r\n\r\n // Build styles with custom colors if provided\r\n const finalTitleStyle = {\r\n ...titleStyle,\r\n ...(titleColor && { color: titleColor })\r\n };\r\n\r\n const finalPercentageStyle = {\r\n ...percentageStyle,\r\n ...(percentageColor && { color: percentageColor })\r\n };\r\n\r\n const finalBarContainerStyle = {\r\n ...barContainerStyle,\r\n ...(backgroundColor && { backgroundColor })\r\n };\r\n\r\n const finalBarFillStyle = {\r\n ...barFillStyle,\r\n width: `${normalizedProgress}%`,\r\n ...(barColor && { backgroundColor: barColor })\r\n };\r\n\r\n const finalDescriptionStyle = {\r\n ...descriptionStyle,\r\n ...(descriptionColor && { color: descriptionColor })\r\n };\r\n\r\n const defaultCardStyle = {\r\n borderRadius: '16px',\r\n border: 'none',\r\n backgroundColor: '#fff',\r\n boxShadow: '0 2px 8px rgba(0,0,0,0.08)',\r\n ...cardStyle\r\n };\r\n\r\n return (\r\n <Card style={defaultCardStyle} className={cardClassName}>\r\n <Card.Body style={cardBodyStyle} className={cardBodyClassName}>\r\n <div className=\"d-flex justify-content-between align-items-center mb-3\">\r\n <h5 className={`mb-0 ${titleClassName}`} style={finalTitleStyle}>\r\n {title}\r\n </h5>\r\n {showPercentage && (\r\n <span className={percentageClassName} style={finalPercentageStyle}>\r\n {normalizedProgress}%\r\n </span>\r\n )}\r\n </div>\r\n <div style={finalBarContainerStyle}>\r\n <div style={finalBarFillStyle}></div>\r\n </div>\r\n {showDescription && description && (\r\n <p className={`mt-2 mb-0 ${descriptionClassName}`} style={finalDescriptionStyle}>\r\n {description}\r\n </p>\r\n )}\r\n </Card.Body>\r\n </Card>\r\n );\r\n};\r\n\r\nexport default ProgressBar;\r\n\r\n"],"names":["ProgressBar","_ref","progress","title","description","showPercentage","showDescription","cardStyle","cardBodyStyle","padding","titleStyle","fontWeight","fontSize","color","percentageStyle","barContainerStyle","width","height","backgroundColor","borderRadius","overflow","barFillStyle","transition","descriptionStyle","cardClassName","cardBodyClassName","titleClassName","percentageClassName","descriptionClassName","barColor","titleColor","percentageColor","descriptionColor","normalizedProgress","Math","min","max","Number","finalTitleStyle","_objectSpread","finalPercentageStyle","finalBarContainerStyle","finalBarFillStyle","concat","finalDescriptionStyle","defaultCardStyle","border","boxShadow","_jsx","Card","style","className","children","_jsxs","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAAMA,WAAW,GAAGC,IAAA,IA8Cd;EAAA,IA9Ce;AACnBC,IAAAA,QAAQ,GAAG,CAAC;AACZC,IAAAA,KAAK,GAAG,gBAAgB;IACxBC,WAAW;AACXC,IAAAA,cAAc,GAAG,IAAI;AACrBC,IAAAA,eAAe,GAAG,IAAI;IACtBC,SAAS,GAAG,EAAE;AACdC,IAAAA,aAAa,GAAG;AAAEC,MAAAA,OAAO,EAAE;KAAQ;AACnCC,IAAAA,UAAU,GAAG;AACXC,MAAAA,UAAU,EAAE,MAAM;AAClBC,MAAAA,QAAQ,EAAE,MAAM;AAChBC,MAAAA,KAAK,EAAE;KACR;AACDC,IAAAA,eAAe,GAAG;AAChBF,MAAAA,QAAQ,EAAE,MAAM;AAChBD,MAAAA,UAAU,EAAE,MAAM;AAClBE,MAAAA,KAAK,EAAE;KACR;AACDE,IAAAA,iBAAiB,GAAG;AAClBC,MAAAA,KAAK,EAAE,MAAM;AACbC,MAAAA,MAAM,EAAE,MAAM;AACdC,MAAAA,eAAe,EAAE,SAAS;AAC1BC,MAAAA,YAAY,EAAE,MAAM;AACpBC,MAAAA,QAAQ,EAAE;KACX;AACDC,IAAAA,YAAY,GAAG;AACbJ,MAAAA,MAAM,EAAE,MAAM;AACdC,MAAAA,eAAe,EAAE,SAAS;AAC1BI,MAAAA,UAAU,EAAE,iBAAiB;AAC7BH,MAAAA,YAAY,EAAE;KACf;AACDI,IAAAA,gBAAgB,GAAG;AACjBX,MAAAA,QAAQ,EAAE,MAAM;AAChBC,MAAAA,KAAK,EAAE;KACR;AACDW,IAAAA,aAAa,GAAG,EAAE;AAClBC,IAAAA,iBAAiB,GAAG,EAAE;AACtBC,IAAAA,cAAc,GAAG,EAAE;AACnBC,IAAAA,mBAAmB,GAAG,EAAE;AACxBC,IAAAA,oBAAoB,GAAG,EAAE;AACzB;IACAC,QAAQ;IACRX,eAAe;IACfY,UAAU;IACVC,eAAe;AACfC,IAAAA;AACF,GAAC,GAAA/B,IAAA;AACC;EACA,MAAMgC,kBAAkB,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEC,MAAM,CAACnC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC;;AAE5E;EACA,MAAMoC,eAAe,GAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EAChB7B,UAAU,CAAA,EACToB,UAAU,IAAI;AAAEjB,IAAAA,KAAK,EAAEiB;AAAW,GAAC,CACxC;EAED,MAAMU,oBAAoB,GAAAD,cAAA,CAAAA,cAAA,CAAA,EAAA,EACrBzB,eAAe,CAAA,EACdiB,eAAe,IAAI;AAAElB,IAAAA,KAAK,EAAEkB;AAAgB,GAAC,CAClD;EAED,MAAMU,sBAAsB,GAAAF,cAAA,CAAAA,cAAA,CAAA,EAAA,EACvBxB,iBAAiB,CAAA,EAChBG,eAAe,IAAI;AAAEA,IAAAA;AAAgB,GAAC,CAC3C;AAED,EAAA,MAAMwB,iBAAiB,GAAAH,cAAA,CAAAA,cAAA,KAClBlB,YAAY,CAAA,EAAA,EAAA,EAAA;IACfL,KAAK,EAAA,EAAA,CAAA2B,MAAA,CAAKV,kBAAkB,EAAA,GAAA;AAAG,GAAA,EAC3BJ,QAAQ,IAAI;AAAEX,IAAAA,eAAe,EAAEW;AAAS,GAAC,CAC9C;EAED,MAAMe,qBAAqB,GAAAL,cAAA,CAAAA,cAAA,CAAA,EAAA,EACtBhB,gBAAgB,CAAA,EACfS,gBAAgB,IAAI;AAAEnB,IAAAA,KAAK,EAAEmB;AAAiB,GAAC,CACpD;EAED,MAAMa,gBAAgB,GAAAN,cAAA,CAAA;AACpBpB,IAAAA,YAAY,EAAE,MAAM;AACpB2B,IAAAA,MAAM,EAAE,MAAM;AACd5B,IAAAA,eAAe,EAAE,MAAM;AACvB6B,IAAAA,SAAS,EAAE;AAA4B,GAAA,EACpCxC,SAAS,CACb;EAED,oBACEyC,GAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,KAAK,EAAEL,gBAAiB;AAACM,IAAAA,SAAS,EAAE3B,aAAc;AAAA4B,IAAAA,QAAA,eACtDC,IAAA,CAACJ,IAAI,CAACK,IAAI,EAAA;AAACJ,MAAAA,KAAK,EAAE1C,aAAc;AAAC2C,MAAAA,SAAS,EAAE1B,iBAAkB;AAAA2B,MAAAA,QAAA,gBAC5DC,IAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,wDAAwD;AAAAC,QAAAA,QAAA,gBACrEJ,GAAA,CAAA,IAAA,EAAA;AAAIG,UAAAA,SAAS,EAAA,OAAA,CAAAR,MAAA,CAAUjB,cAAc,CAAG;AAACwB,UAAAA,KAAK,EAAEZ,eAAgB;AAAAc,UAAAA,QAAA,EAC7DjD;AAAK,SACJ,CAAC,EACJE,cAAc,iBACbgD,IAAA,CAAA,MAAA,EAAA;AAAMF,UAAAA,SAAS,EAAExB,mBAAoB;AAACuB,UAAAA,KAAK,EAAEV,oBAAqB;UAAAY,QAAA,EAAA,CAC/DnB,kBAAkB,EAAC,GACtB;AAAA,SAAM,CACP;OACE,CAAC,eACNe,GAAA,CAAA,KAAA,EAAA;AAAKE,QAAAA,KAAK,EAAET,sBAAuB;AAAAW,QAAAA,QAAA,eACjCJ,GAAA,CAAA,KAAA,EAAA;AAAKE,UAAAA,KAAK,EAAER;SAAwB;AAAC,OAClC,CAAC,EACLpC,eAAe,IAAIF,WAAW,iBAC7B4C,GAAA,CAAA,GAAA,EAAA;AAAGG,QAAAA,SAAS,EAAA,YAAA,CAAAR,MAAA,CAAef,oBAAoB,CAAG;AAACsB,QAAAA,KAAK,EAAEN,qBAAsB;AAAAQ,QAAAA,QAAA,EAC7EhD;AAAW,OACX,CACJ;KACQ;AAAC,GACR,CAAC;AAEX;;;;"}
package/dist/index.js ADDED
@@ -0,0 +1,159 @@
1
+ 'use strict';
2
+
3
+ var reactBootstrap = require('react-bootstrap');
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+
6
+ function _defineProperty(e, r, t) {
7
+ return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
8
+ value: t,
9
+ enumerable: true,
10
+ configurable: true,
11
+ writable: true
12
+ }) : e[r] = t, e;
13
+ }
14
+ function ownKeys(e, r) {
15
+ var t = Object.keys(e);
16
+ if (Object.getOwnPropertySymbols) {
17
+ var o = Object.getOwnPropertySymbols(e);
18
+ r && (o = o.filter(function (r) {
19
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
20
+ })), t.push.apply(t, o);
21
+ }
22
+ return t;
23
+ }
24
+ function _objectSpread2(e) {
25
+ for (var r = 1; r < arguments.length; r++) {
26
+ var t = null != arguments[r] ? arguments[r] : {};
27
+ r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
28
+ _defineProperty(e, r, t[r]);
29
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
30
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
31
+ });
32
+ }
33
+ return e;
34
+ }
35
+ function _toPrimitive(t, r) {
36
+ if ("object" != typeof t || !t) return t;
37
+ var e = t[Symbol.toPrimitive];
38
+ if (void 0 !== e) {
39
+ var i = e.call(t, r);
40
+ if ("object" != typeof i) return i;
41
+ throw new TypeError("@@toPrimitive must return a primitive value.");
42
+ }
43
+ return ("string" === r ? String : Number)(t);
44
+ }
45
+ function _toPropertyKey(t) {
46
+ var i = _toPrimitive(t, "string");
47
+ return "symbol" == typeof i ? i : i + "";
48
+ }
49
+
50
+ const ProgressBar = _ref => {
51
+ let {
52
+ progress = 0,
53
+ title = "Total Progress",
54
+ description,
55
+ showPercentage = true,
56
+ showDescription = true,
57
+ cardStyle = {},
58
+ cardBodyStyle = {
59
+ padding: '24px'
60
+ },
61
+ titleStyle = {
62
+ fontWeight: 'bold',
63
+ fontSize: '18px',
64
+ color: '#677a58'
65
+ },
66
+ percentageStyle = {
67
+ fontSize: '24px',
68
+ fontWeight: 'bold',
69
+ color: '#677a58'
70
+ },
71
+ barContainerStyle = {
72
+ width: '100%',
73
+ height: '12px',
74
+ backgroundColor: '#e9ecef',
75
+ borderRadius: '10px',
76
+ overflow: 'hidden'
77
+ },
78
+ barFillStyle = {
79
+ height: '100%',
80
+ backgroundColor: '#677a58',
81
+ transition: 'width 0.3s ease',
82
+ borderRadius: '10px'
83
+ },
84
+ descriptionStyle = {
85
+ fontSize: '14px',
86
+ color: '#6c757d'
87
+ },
88
+ cardClassName = "",
89
+ cardBodyClassName = "",
90
+ titleClassName = "",
91
+ percentageClassName = "",
92
+ descriptionClassName = "",
93
+ // Custom colors
94
+ barColor,
95
+ backgroundColor,
96
+ titleColor,
97
+ percentageColor,
98
+ descriptionColor
99
+ } = _ref;
100
+ // Ensure progress is between 0 and 100
101
+ const normalizedProgress = Math.min(Math.max(0, Number(progress) || 0), 100);
102
+
103
+ // Build styles with custom colors if provided
104
+ const finalTitleStyle = _objectSpread2(_objectSpread2({}, titleStyle), titleColor && {
105
+ color: titleColor
106
+ });
107
+ const finalPercentageStyle = _objectSpread2(_objectSpread2({}, percentageStyle), percentageColor && {
108
+ color: percentageColor
109
+ });
110
+ const finalBarContainerStyle = _objectSpread2(_objectSpread2({}, barContainerStyle), backgroundColor && {
111
+ backgroundColor
112
+ });
113
+ const finalBarFillStyle = _objectSpread2(_objectSpread2({}, barFillStyle), {}, {
114
+ width: "".concat(normalizedProgress, "%")
115
+ }, barColor && {
116
+ backgroundColor: barColor
117
+ });
118
+ const finalDescriptionStyle = _objectSpread2(_objectSpread2({}, descriptionStyle), descriptionColor && {
119
+ color: descriptionColor
120
+ });
121
+ const defaultCardStyle = _objectSpread2({
122
+ borderRadius: '16px',
123
+ border: 'none',
124
+ backgroundColor: '#fff',
125
+ boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
126
+ }, cardStyle);
127
+ return /*#__PURE__*/jsxRuntime.jsx(reactBootstrap.Card, {
128
+ style: defaultCardStyle,
129
+ className: cardClassName,
130
+ children: /*#__PURE__*/jsxRuntime.jsxs(reactBootstrap.Card.Body, {
131
+ style: cardBodyStyle,
132
+ className: cardBodyClassName,
133
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
134
+ className: "d-flex justify-content-between align-items-center mb-3",
135
+ children: [/*#__PURE__*/jsxRuntime.jsx("h5", {
136
+ className: "mb-0 ".concat(titleClassName),
137
+ style: finalTitleStyle,
138
+ children: title
139
+ }), showPercentage && /*#__PURE__*/jsxRuntime.jsxs("span", {
140
+ className: percentageClassName,
141
+ style: finalPercentageStyle,
142
+ children: [normalizedProgress, "%"]
143
+ })]
144
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
145
+ style: finalBarContainerStyle,
146
+ children: /*#__PURE__*/jsxRuntime.jsx("div", {
147
+ style: finalBarFillStyle
148
+ })
149
+ }), showDescription && description && /*#__PURE__*/jsxRuntime.jsx("p", {
150
+ className: "mt-2 mb-0 ".concat(descriptionClassName),
151
+ style: finalDescriptionStyle,
152
+ children: description
153
+ })]
154
+ })
155
+ });
156
+ };
157
+
158
+ exports.ProgressBar = ProgressBar;
159
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/ProgressBar.jsx"],"sourcesContent":["import { Card } from 'react-bootstrap';\r\n\r\nconst ProgressBar = ({\r\n progress = 0,\r\n title = \"Total Progress\",\r\n description,\r\n showPercentage = true,\r\n showDescription = true,\r\n cardStyle = {},\r\n cardBodyStyle = { padding: '24px' },\r\n titleStyle = {\r\n fontWeight: 'bold',\r\n fontSize: '18px',\r\n color: '#677a58'\r\n },\r\n percentageStyle = {\r\n fontSize: '24px',\r\n fontWeight: 'bold',\r\n color: '#677a58'\r\n },\r\n barContainerStyle = {\r\n width: '100%',\r\n height: '12px',\r\n backgroundColor: '#e9ecef',\r\n borderRadius: '10px',\r\n overflow: 'hidden'\r\n },\r\n barFillStyle = {\r\n height: '100%',\r\n backgroundColor: '#677a58',\r\n transition: 'width 0.3s ease',\r\n borderRadius: '10px'\r\n },\r\n descriptionStyle = {\r\n fontSize: '14px',\r\n color: '#6c757d'\r\n },\r\n cardClassName = \"\",\r\n cardBodyClassName = \"\",\r\n titleClassName = \"\",\r\n percentageClassName = \"\",\r\n descriptionClassName = \"\",\r\n // Custom colors\r\n barColor,\r\n backgroundColor,\r\n titleColor,\r\n percentageColor,\r\n descriptionColor\r\n}) => {\r\n // Ensure progress is between 0 and 100\r\n const normalizedProgress = Math.min(Math.max(0, Number(progress) || 0), 100);\r\n\r\n // Build styles with custom colors if provided\r\n const finalTitleStyle = {\r\n ...titleStyle,\r\n ...(titleColor && { color: titleColor })\r\n };\r\n\r\n const finalPercentageStyle = {\r\n ...percentageStyle,\r\n ...(percentageColor && { color: percentageColor })\r\n };\r\n\r\n const finalBarContainerStyle = {\r\n ...barContainerStyle,\r\n ...(backgroundColor && { backgroundColor })\r\n };\r\n\r\n const finalBarFillStyle = {\r\n ...barFillStyle,\r\n width: `${normalizedProgress}%`,\r\n ...(barColor && { backgroundColor: barColor })\r\n };\r\n\r\n const finalDescriptionStyle = {\r\n ...descriptionStyle,\r\n ...(descriptionColor && { color: descriptionColor })\r\n };\r\n\r\n const defaultCardStyle = {\r\n borderRadius: '16px',\r\n border: 'none',\r\n backgroundColor: '#fff',\r\n boxShadow: '0 2px 8px rgba(0,0,0,0.08)',\r\n ...cardStyle\r\n };\r\n\r\n return (\r\n <Card style={defaultCardStyle} className={cardClassName}>\r\n <Card.Body style={cardBodyStyle} className={cardBodyClassName}>\r\n <div className=\"d-flex justify-content-between align-items-center mb-3\">\r\n <h5 className={`mb-0 ${titleClassName}`} style={finalTitleStyle}>\r\n {title}\r\n </h5>\r\n {showPercentage && (\r\n <span className={percentageClassName} style={finalPercentageStyle}>\r\n {normalizedProgress}%\r\n </span>\r\n )}\r\n </div>\r\n <div style={finalBarContainerStyle}>\r\n <div style={finalBarFillStyle}></div>\r\n </div>\r\n {showDescription && description && (\r\n <p className={`mt-2 mb-0 ${descriptionClassName}`} style={finalDescriptionStyle}>\r\n {description}\r\n </p>\r\n )}\r\n </Card.Body>\r\n </Card>\r\n );\r\n};\r\n\r\nexport default ProgressBar;\r\n\r\n"],"names":["ProgressBar","_ref","progress","title","description","showPercentage","showDescription","cardStyle","cardBodyStyle","padding","titleStyle","fontWeight","fontSize","color","percentageStyle","barContainerStyle","width","height","backgroundColor","borderRadius","overflow","barFillStyle","transition","descriptionStyle","cardClassName","cardBodyClassName","titleClassName","percentageClassName","descriptionClassName","barColor","titleColor","percentageColor","descriptionColor","normalizedProgress","Math","min","max","Number","finalTitleStyle","_objectSpread","finalPercentageStyle","finalBarContainerStyle","finalBarFillStyle","concat","finalDescriptionStyle","defaultCardStyle","border","boxShadow","_jsx","Card","style","className","children","_jsxs","Body"],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "name": "@veeyaainnovatives/progress-bar",
3
+ "version": "1.0.0",
4
+ "description": "A reusable Progress bar component for React applications",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.esm.js",
7
+ "exports": {
8
+ ".": {
9
+ "import": "./dist/index.esm.js",
10
+ "require": "./dist/index.js"
11
+ }
12
+ },
13
+ "files": [
14
+ "dist",
15
+ "README.md"
16
+ ],
17
+ "scripts": {
18
+ "build": "rollup -c",
19
+ "dev": "rollup -c -w",
20
+ "prepare": "npm run build"
21
+ },
22
+ "keywords": [
23
+ "react",
24
+ "progress",
25
+ "bar",
26
+ "component",
27
+ "veeyaainnovatives"
28
+ ],
29
+ "author": "Veeyaa Innovatives",
30
+ "license": "MIT",
31
+ "peerDependencies": {
32
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
33
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
34
+ "react-bootstrap": "^2.0.0"
35
+ },
36
+ "devDependencies": {
37
+ "@babel/core": "^7.23.5",
38
+ "@babel/preset-env": "^7.23.5",
39
+ "@babel/preset-react": "^7.23.3",
40
+ "@rollup/plugin-babel": "^6.0.4",
41
+ "@rollup/plugin-commonjs": "^25.0.7",
42
+ "@rollup/plugin-node-resolve": "^15.2.3",
43
+ "rollup": "^4.6.1",
44
+ "rollup-plugin-peer-deps-external": "^2.2.4"
45
+ },
46
+ "repository": {
47
+ "type": "git",
48
+ "url": "https://github.com/npmveeyaa/progress-bar.git"
49
+ },
50
+ "homepage": "https://github.com/npmveeyaa/progress-bar#readme",
51
+ "bugs": {
52
+ "url": "https://github.com/npmveeyaa/progress-bar/issues"
53
+ }
54
+ }
55
+