react-restyle-components 0.2.47 → 0.2.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.2.46",
3
+ "version": "0.2.47",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {
@@ -1 +1 @@
1
- {"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/stepper/stepper.component.tsx"],"names":[],"mappings":"AAIA,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,CAAC,WAAW,KAAA,EAAE,KAAK,KAAA,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,OAAO,oDAKjB,YAAY,4CA0Hd,CAAC"}
1
+ {"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/stepper/stepper.component.tsx"],"names":[],"mappings":"AAIA,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,CAAC,WAAW,KAAA,EAAE,KAAK,KAAA,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,OAAO,oDAKjB,YAAY,4CA+Hd,CAAC"}
@@ -7,22 +7,20 @@ export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, }
7
7
  const Steps = steps?.map((step, index) => {
8
8
  let stepClass = cn(s['inline-block'], s['transform'], s['-translate-x-1/2'], s['pt-1'], s['w-8'], s['h-8'], s['rounded-full'], s['text-center']);
9
9
  if (index < currentStep)
10
- stepClass = cn(stepClass, s['font-medium'], s['border'], s['border-orange'], s['bg-background-secondary'], s['text-gray']);
10
+ stepClass = cn(stepClass, s['font-medium'], s['border'], s['border-orange'], s['bg-background-secondary'], s['text-gray'], s['bg-white']);
11
11
  else if (index > currentStep)
12
- stepClass = cn(stepClass, s['font-medium'], s['border'], s['border-gray-dark-secondary'], s['text-gray'], s['bg-background-secondary']);
12
+ stepClass = cn(stepClass, s['font-medium'], s['border'], s['border-gray-dark-secondary'], s['text-gray'], s['bg-background-secondary'], s['bg-white']);
13
13
  else if (currentStep === index)
14
- stepClass = cn(stepClass, s['font-medium'], s['bg-orange'], s['text-white']);
14
+ stepClass = cn(stepClass, s['font-medium'], s['bg-orange'], s['text-white'], s['border']);
15
15
  if (typeof onStepClick === 'function')
16
16
  stepClass = cn(stepClass, s['cursor-pointer']);
17
- return (_jsx("div", { style: { left: `${(index / (steps.length - 1)) * 100}%` }, className: cn(s['absolute']), children: _jsx("span", { className: cn(stepClass, s['font-arimaRegular'], s['text-4xs'], s['text-center']), onClick: () => {
17
+ return (_jsx("div", { style: { left: `${(index / (steps.length - 1)) * 100}%` }, className: cn(s['absolute']), children: _jsx("span", { className: cn(stepClass, s['font-arimaRegular'], s['text-4xs'], s['text-center'], s['z-2']), onClick: () => {
18
18
  if (typeof onStepClick === 'function')
19
19
  onStepClick(index + 1, step);
20
20
  }, children: step }) }, step));
21
21
  });
22
- return (_jsxs("div", { className: finalClass, children: [_jsxs("div", { className: cn(s['w-full'], s['relative']), children: [_jsx("div", { className: progressClass, style: {
23
- width: `${(currentStep / (steps.length - 1)) * 100}%`,
24
- }, children: _jsx("div", { className: cn(s['w-3'], s['h-3'], s['bg-orange'], s['rounded-full'], s['absolute'], s['right-0'], s['top-1/2'], s['transform'], s['translate-x-1/2'], s['-translate-y-1/2']) }) }), _jsx("div", { className: cn(s['absolute'], s['h-0.5'], s['my-4'], s['top-1/2'], s['left-0'], s['transform'], s['-translate-y-1/2'], s['bg-gray-dark-secondary'], s['transition-width'], s['ease-in-out'], s['duration-500']), style: {
25
- marginLeft: `${(currentStep / (steps.length - 1)) * 100}%`,
26
- width: `${100 - (currentStep / (steps.length - 1)) * 100}%`,
27
- } })] }), _jsx("div", { className: cn(s['relative'], s['sm:block']), children: Steps })] }));
22
+ return (_jsxs("div", { className: finalClass, children: [_jsx("div", { className: cn(s['w-full'], s['relative'], s['z-0']), children: _jsx("div", { className: progressClass, style: {
23
+ // width: `${(currentStep / (steps.length - 1)) * 100}%`,
24
+ width: `100%`,
25
+ }, children: _jsx("div", { className: cn(s['w-3'], s['h-3'], s['bg-orange'], s['rounded-full'], s['absolute'], s['right-0'], s['top-1/2'], s['transform'], s['translate-x-1/2'], s['-translate-y-1/2']) }) }) }), _jsx("div", { className: cn(s['relative'], s['sm:block']), children: Steps })] }));
28
26
  };
@@ -10,6 +10,7 @@
10
10
  } .top-1\/2 { top: 50%;
11
11
  } .top-3 { top: 0.75rem;
12
12
  } .-z-1 { z-index: -1;
13
+ } .z-0 { z-index: 0;
13
14
  } .z-10 { z-index: 10;
14
15
  } .z-20 { z-index: 20;
15
16
  } .z-40 { z-index: 40;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.2.47",
3
+ "version": "0.2.48",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {