npm - @alfalab/core-components-page-indicator - Versions diffs - 3.0.3 → 3.0.4-alfasans - Mend

@alfalab/core-components-page-indicator 3.0.3 → 3.0.4-alfasans

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 (195) hide show

package/components/step/Component.js CHANGED Viewed

@@ -22,10 +22,10 @@ var colorsStyle = {
     'static-inverted': staticInverted_module,
 };
 var PageIndicatorStep = function (_a) {
-    var activeElement = _a.activeElement, _b = _a.elements, count = _b === void 0 ? 10 : _b, _c = _a.size, size = _c === void 0 ? 4 : _c, _d = _a.gap, gap = _d === void 0 ? 4 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e;
-    return (React__default.default.createElement("ol", { className: index_module.pageIndicator, style: { height: size, gap: gap } }, Array.from({ length: count }, function (_, index) {
+    var activeElement = _a.activeElement, _b = _a.elements, count = _b === void 0 ? 10 : _b, _c = _a.size, size = _c === void 0 ? 4 : _c, _d = _a.gap, gap = _d === void 0 ? 4 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, className = _a.className;
+    return (React__default.default.createElement("div", { className: cn__default.default(index_module.pageIndicator, className), style: { height: size, gap: gap } }, Array.from({ length: count }, function (_, index) {
         var _a;
-        return (React__default.default.createElement("li", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn__default.default(index_module.element, colorsStyle[colors].element, (_a = {},
+        return (React__default.default.createElement("div", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn__default.default(index_module.element, colorsStyle[colors].element, (_a = {},
                 _a[colorsStyle[colors].active] = index === activeElement,
                 _a)) }));
     })));

package/components/step/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../src/components/step/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { type PageIndicatorStepProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nexport const PageIndicatorStep: React.FC<PageIndicatorStepProps> = ({\n activeElement,\n elements: count = 10,\n size = 4,\n gap = 4,\n colors = 'default',\n}) => (\n <ol className={styles.pageIndicator} style={{ height: size, gap }}>\n {Array.from({ length: count }, (_, index) => (\n <li\n key={index}\n style={{ height: size, borderRadius: size / 2 }}\n className={cn(styles.element, colorsStyle[colors].element, {\n [colorsStyle[colors].active]: index === activeElement,\n })}\n />\n ))}\n </ol>\n);\n"],"names":["invertedColors","defaultColors","staticColors","staticInvertedColors","React","~~styles~~","cn"],"mappings":";;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,eAAc;AACxB,IAAA,OAAO,EAAEC,cAAa;AACtB,IAAA,MAAM,EAAEC,aAAY;AACpB,IAAA,iBAAiB,EAAEC,qBAAoB;CACjC;AAEH,IAAM,iBAAiB,GAAqC,UAAC,~~EAMnE~~,EAAA;~~AALG~~,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,EAAoB,GAAA,EAAA,CAAA,QAAA,EAAV,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACpB,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,~~GAAG~~,~~EAAA,KAAA,MAAA,GAAA,~~CAAC,GAAA,EAAA,EACR,~~EAAO~~,GAAA,EAAA,CAAA,~~GAAA~~,EAAP,GAAG,~~GAAA~~,EAAA,KAAA,MAAA,~~GAAG~~,CAAC,~~GAAA~~,~~EAAA,~~EACP,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA;~~AAChB~~,IAAA,QACFC,~~sBAAA~~,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,~~EAAI~~,SAAS,EAAEC,YAAM,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAA,GAAA,EAAE,~~EAC5D~~,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAC,CAAC,EAAE,KAAK,EAAA;;AAAK,QAAA,~~QACzCD~~,sBAAA,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,EACI,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAC/C,SAAS,~~EAAEE~~,mBAAE,~~CAACD~~,YAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;gBACrD,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA,GAAG,KAAK,KAAK,aAAa;AACvD,gBAAA,EAAA,EAAA,EAAA,CACJ;KACL,CAAC,~~CACD~~;~~AAXH~~;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../../src/components/step/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { type PageIndicatorStepProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nexport const PageIndicatorStep: React.FC<PageIndicatorStepProps> = ({\n activeElement,\n elements: count = 10,\n size = 4,\n gap = 4,\n colors = 'default',\n className,\n}) => (\n <div className={cn(styles.pageIndicator, className)} style={{ height: size, gap }}>\n {Array.from({ length: count }, (_, index) => (\n <div\n key={index}\n style={{ height: size, borderRadius: size / 2 }}\n className={cn(styles.element, colorsStyle[colors].element, {\n [colorsStyle[colors].active]: index === activeElement,\n })}\n />\n ))}\n </div>\n);\n"],"names":["invertedColors","defaultColors","staticColors","staticInvertedColors","React","cn","styles"],"mappings":";;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,eAAc;AACxB,IAAA,OAAO,EAAEC,cAAa;AACtB,IAAA,MAAM,EAAEC,aAAY;AACpB,IAAA,iBAAiB,EAAEC,qBAAoB;CACjC;AAEH,IAAM,iBAAiB,GAAqC,UAAC,EAOnE,EAAA;AANG,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,EAAoB,GAAA,EAAA,CAAA,QAAA,EAAV,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACpB,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,mBAAG,CAAC,GAAA,EAAA,EACR,EAAA,GAAA,EAAA,CAAA,GAAO,EAAP,GAAG,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,KAAA,EACP,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA,EAClB,SAAS,GAAA,EAAA,CAAA,SAAA;AACP,IAAA,QACFC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAA,GAAA,EAAE,EAC5E,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAC,CAAC,EAAE,KAAK,EAAA;;AAAK,QAAA,QACzCF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAC/C,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;gBACrD,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA,GAAG,KAAK,KAAK,aAAa;AACvD,gBAAA,EAAA,EAAA,EAAA,CACJ;KACL,CAAC,CACA;AAXJ;;;;"}

package/components/step/default.css CHANGED Viewed

@@ -6,9 +6,9 @@
     --page-indicator-color: var(--color-light-neutral-translucent-300);
     --page-indicator-active-color: var(--color-light-neutral-translucent-1300);
 }
-.page-indicator__element_1ea0d {
+.page-indicator__element_nqwqn {
     background: var(--page-indicator-color);
 }
-.page-indicator__element_1ea0d.page-indicator__active_1ea0d {
+.page-indicator__element_nqwqn.page-indicator__active_nqwqn {
         background: var(--page-indicator-active-color);
     }

package/components/step/default.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./default.css');
-var defaultColors = {"element":"page-indicator__element_1ea0d","active":"page-indicator__active_1ea0d"};
+var defaultColors = {"element":"page-indicator__element_nqwqn","active":"page-indicator__active_nqwqn"};
 module.exports = defaultColors;
 //# sourceMappingURL=default.module.css.js.map

package/components/step/index.css CHANGED Viewed

@@ -2,12 +2,11 @@
     --page-indicator-animation-duration: 0.2s;
     --page-indicator-animation-timing-function: ease-in-out;
 }
-.page-indicator__pageIndicator_1n6uh {
-    margin: 0;
-    padding: 0;
+.page-indicator__pageIndicator_yfjk6 {
     display: flex;
+    width: 100%;
 }
-.page-indicator__element_1n6uh {
+.page-indicator__element_yfjk6 {
     list-style-type: none;
     flex-grow: 1;
     transition: backgroud var(--page-indicator-animation-duration)

package/components/step/index.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./index.css');
-var styles = {"pageIndicator":"page-indicator__pageIndicator_1n6uh","element":"page-indicator__element_1n6uh"};
+var styles = {"pageIndicator":"page-indicator__pageIndicator_yfjk6","element":"page-indicator__element_yfjk6"};
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/step/index.module.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.pageIndicator {\n ~~margin~~: 0;\n ~~padding~~: ~~0;\~~n ~~display: flex;\n~~}\n\n.element {\n list-style-type: none;\n flex-grow: 1;\n transition: backgroud var(--page-indicator-animation-duration)\n var(--page-indicator-animation-timing-function);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,eAAe,CAAC,qCAAqC,CAAC,SAAS,CAAC,+BAA+B,CAAC;;;;"}
1	+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.pageIndicator {\n display: flex;\n width: 100%;\n}\n\n.element {\n list-style-type: none;\n flex-grow: 1;\n transition: backgroud var(--page-indicator-animation-duration)\n var(--page-indicator-animation-timing-function);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,eAAe,CAAC,qCAAqC,CAAC,SAAS,CAAC,+BAA+B,CAAC;;;;"}

package/components/step/inverted.css CHANGED Viewed

@@ -6,9 +6,9 @@
     --page-indicator-color-inverted: var(--color-light-neutral-translucent-300-inverted);
     --page-indicator-active-color-inverted: var(--color-light-neutral-translucent-1300-inverted);
 }
-.page-indicator__element_1ebaj {
+.page-indicator__element_7acin {
     background: var(--page-indicator-color-inverted);
 }
-.page-indicator__element_1ebaj.page-indicator__active_1ebaj {
+.page-indicator__element_7acin.page-indicator__active_7acin {
         background: var(--page-indicator-active-color-inverted);
     }

package/components/step/inverted.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./inverted.css');
-var invertedColors = {"element":"page-indicator__element_1ebaj","active":"page-indicator__active_1ebaj"};
+var invertedColors = {"element":"page-indicator__element_7acin","active":"page-indicator__active_7acin"};
 module.exports = invertedColors;
 //# sourceMappingURL=inverted.module.css.js.map

package/components/step/static-inverted.css CHANGED Viewed

@@ -6,9 +6,9 @@
     --page-indicator-color-static-inverted: var(--color-static-neutral-translucent-300-inverted);
     --page-indicator-active-color-static-inverted: var(--color-static-neutral-1300-inverted);
 }
-.page-indicator__element_16rgk {
+.page-indicator__element_13iar {
     background: var(--page-indicator-color-static-inverted);
 }
-.page-indicator__element_16rgk.page-indicator__active_16rgk {
+.page-indicator__element_13iar.page-indicator__active_13iar {
         background: var(--page-indicator-active-color-static-inverted);
     }

package/components/step/static-inverted.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./static-inverted.css');
-var staticInvertedColors = {"element":"page-indicator__element_16rgk","active":"page-indicator__active_16rgk"};
+var staticInvertedColors = {"element":"page-indicator__element_13iar","active":"page-indicator__active_13iar"};
 module.exports = staticInvertedColors;
 //# sourceMappingURL=static-inverted.module.css.js.map

package/components/step/static.css CHANGED Viewed

@@ -6,9 +6,9 @@
     --page-indicator-color-static: var(--color-static-neutral-translucent-300);
     --page-indicator-active-color-static: var(--color-static-neutral-1300);
 }
-.page-indicator__element_1c81w {
+.page-indicator__element_r31gi {
     background: var(--page-indicator-color-static);
 }
-.page-indicator__element_1c81w.page-indicator__active_1c81w {
+.page-indicator__element_r31gi.page-indicator__active_r31gi {
         background: var(--page-indicator-active-color-static);
     }

package/components/step/static.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./static.css');
-var staticColors = {"element":"page-indicator__element_1c81w","active":"page-indicator__active_1c81w"};
+var staticColors = {"element":"page-indicator__element_r31gi","active":"page-indicator__active_r31gi"};
 module.exports = staticColors;
 //# sourceMappingURL=static.module.css.js.map

package/cssm/components/bullet/Component.js CHANGED Viewed

@@ -30,11 +30,11 @@ var colorsStyle = {
 };
 var transitionClassess = {};
 var PageIndicatorBullet = function (_a) {
-    var _b = _a.elements, count = _b === void 0 ? 10 : _b, activeElementIndex = _a.activeElement, _c = _a.size, size = _c === void 0 ? 8 : _c, _d = _a.gap, gap = _d === void 0 ? 8 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e;
+    var _b = _a.elements, count = _b === void 0 ? 10 : _b, activeElementIndex = _a.activeElement, _c = _a.size, size = _c === void 0 ? 8 : _c, _d = _a.gap, gap = _d === void 0 ? 8 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, className = _a.className;
     var refs = React.useMemo(function () { return Array.from({ length: count }, function () { return React.createRef(); }); }, [count]);
     var _f = React.useMemo(function () { return utils.calcParams(size, gap, activeElementIndex, count); }, [activeElementIndex, count, gap, size]), height = _f[0], width = _f[1], offset = _f[2], elementSize = _f[3], firstVisibleElementIndex = _f[4], lastVisibleElementIndex = _f[5];
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.pageIndicator, styles__default.default.bullet), style: { height: height, width: width } },
-        React__default.default.createElement("ol", { className: styles__default.default.elementsList, style: { gap: gap, transform: "translate(".concat(offset, "px)") } }, refs.map(function (ref, index) {
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.pageIndicator, styles__default.default.bullet, className), style: { height: height, width: width } },
+        React__default.default.createElement("div", { className: styles__default.default.elementsList, style: { gap: gap, transform: "translate(".concat(offset, "px)") } }, refs.map(function (ref, index) {
             var sizeOfElement = elementSize(index);
             var isActive = activeElementIndex === index;
             var isVisible = firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;
@@ -51,7 +51,7 @@ var PageIndicatorBullet = function (_a) {
                 // passed empty object so any classes aren't added
                 classNames: transitionClassess }, function (status) {
                 var _a;
-                return (React__default.default.createElement("li", { ref: ref, "data-index": index, className: cn__default.default(styles__default.default.element, colorsStyle[colors].element, (_a = {}, _a[colorsStyle[colors].active] = isActive, _a), styles__default.default[status]), style: { height: sizeOfElement, width: sizeOfElement } }));
+                return (React__default.default.createElement("div", { ref: ref, "data-index": index, className: cn__default.default(styles__default.default.element, colorsStyle[colors].element, (_a = {}, _a[colorsStyle[colors].active] = isActive, _a), styles__default.default[status]), style: { height: sizeOfElement, width: sizeOfElement } }));
             }));
         }))));
 };

package/cssm/components/bullet/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../../src/components/bullet/Component.tsx"],"sourcesContent":["import React, { createRef, type FC, useMemo } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { type PageIndicatorBulletProps } from '../../types';\n\nimport { calcParams } from './utils';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nconst transitionClassess = {} as const;\n\nexport const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({\n elements: count = 10,\n activeElement: activeElementIndex,\n size = 8,\n gap = 8,\n colors = 'default',\n}) => {\n const refs = useMemo(\n () => Array.from({ length: count }, () => createRef<~~HTMLLIElement~~>()),\n [count],\n );\n const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] =\n useMemo(\n () => calcParams(size, gap, activeElementIndex, count),\n [activeElementIndex, count, gap, size],\n );\n\n return (\n <div className={cn(styles.pageIndicator, styles.bullet)} style={{ height, width }}>\n <ol\n className={styles.elementsList}\n style={{ gap, transform: `translate(${offset}px)` }}\n >\n {refs.map((ref, index) => {\n const sizeOfElement = elementSize(index);\n const isActive = activeElementIndex === index;\n const isVisible =\n firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;\n const addListTransitionEndListener = (done: () => void) => {\n const parentElement = ref.current?.parentElement;\n\n parentElement?.addEventListener('transitionend', done, { once: true });\n };\n\n return (\n <CSSTransition\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n nodeRef={ref}\n addEndListener={addListTransitionEndListener}\n in={isVisible}\n // passed empty object so any classes aren't added\n classNames={transitionClassess}\n >\n {(status) => (\n <li\n ref={ref}\n data-index={index}\n className={cn(\n styles.element,\n colorsStyle[colors].element,\n { [colorsStyle[colors].active]: isActive },\n styles[status],\n )}\n style={{ height: sizeOfElement, width: sizeOfElement }}\n />\n )}\n </CSSTransition>\n );\n })}\n </ol>\n </div>\n );\n};\n"],"names":["invertedColors","defaultColors","staticColors","staticInvertedColors","useMemo","createRef","calcParams","React","cn","styles","CSSTransition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,+BAAc;AACxB,IAAA,OAAO,EAAEC,8BAAa;AACtB,IAAA,MAAM,EAAEC,6BAAY;AACpB,IAAA,iBAAiB,EAAEC,qCAAoB;CACjC;AAEV,IAAM,kBAAkB,GAAG,EAAW;AAE/B,IAAM,mBAAmB,GAAiC,UAAC,~~EAMjE~~,EAAA;~~AALG~~,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,QAAoB,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACL,kBAAkB,GAAA,EAAA,CAAA,aAAA,EACjC,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,~~GAAG~~,~~EAAA,KAAA,MAAA,GAAA,~~CAAC,GAAA,EAAA,EACR,~~EAAO~~,GAAA,EAAA,CAAA,~~GAAA~~,EAAP,GAAG,~~GAAA~~,EAAA,KAAA,MAAA,~~GAAG~~,CAAC,~~GAAA~~,~~EAAA,~~EACP,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA;~~AAElB~~,IAAA,IAAM,IAAI,GAAGC,aAAO,CAChB,YAAM,EAAA,OAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,YAAA,EAAM,OAAAC,eAAS,~~EAAiB~~,CAAA,EAAA,CAAC,~~CAA/D~~,~~EAA+D~~,~~EACrE~~,CAAC,KAAK,CAAC,CACV;IACK,IAAA,EAAA,GACFD,aAAO,CACH,YAAA,EAAM,OAAAE,gBAAU,CAAC,IAAI,EAAE,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAA,EAAA,EACtD,CAAC,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CACzC,EAJE,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,wBAAwB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAIvF;IAEL,QACIC,~~8CAAK~~,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,aAAa,EAAEA,uBAAM,CAAC,MAAM,CAAC,~~EAAE~~,KAAK,EAAE,EAAE,MAAM,EAAA,MAAA,EAAE,KAAK,EAAA,KAAA,EAAE,EAAA;~~QAC7EF~~,sBACI,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,EAAA,SAAS,EAAEE,uBAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,EAAE,GAAG,EAAA,GAAA,EAAE,SAAS,EAAE,YAAa,CAAA,MAAA,CAAA,MAAM,EAAK,KAAA,CAAA,EAAE,EAElD,EAAA,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,KAAK,EAAA;AACjB,YAAA,IAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC;AACxC,YAAA,IAAM,QAAQ,GAAG,kBAAkB,KAAK,KAAK;YAC7C,IAAM,SAAS,GACX,wBAAwB,IAAI,KAAK,IAAI,KAAK,IAAI,uBAAuB;YACzE,IAAM,4BAA4B,GAAG,UAAC,IAAgB,EAAA;;gBAClD,IAAM,aAAa,GAAG,CAAA,EAAA,GAAA,GAAG,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa;AAEhD,gBAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,eAAe,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAC1E,aAAC;YAED,QACIF,qCAACG;;;;AAEG,gBAAA,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EACZ,cAAc,EAAE,4BAA4B,EAC5C,EAAE,EAAE,SAAS;;AAEb,gBAAA,UAAU,EAAE,kBAAkB,EAE7B,EAAA,UAAC,MAAM,EAAA;;gBAAK,QACTH,~~6CACI~~,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,KAAK,EACjB,SAAS,EAAEC,mBAAE,CACTC,uBAAM,CAAC,OAAO,EACd,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA,EACzB,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAG,GAAA,QAAQ,OACxCA,uBAAM,CAAC,MAAM,CAAC,CACjB,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,CACxD;aACL,CACW;AAExB,SAAC,CAAC,~~CACD~~,~~CACH~~;AAEd;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../../../src/components/bullet/Component.tsx"],"sourcesContent":["import React, { createRef, type FC, useMemo } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { type PageIndicatorBulletProps } from '../../types';\n\nimport { calcParams } from './utils';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nconst transitionClassess = {} as const;\n\nexport const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({\n elements: count = 10,\n activeElement: activeElementIndex,\n size = 8,\n gap = 8,\n colors = 'default',\n className,\n}) => {\n const refs = useMemo(\n () => Array.from({ length: count }, () => createRef<HTMLDivElement>()),\n [count],\n );\n const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] =\n useMemo(\n () => calcParams(size, gap, activeElementIndex, count),\n [activeElementIndex, count, gap, size],\n );\n\n return (\n <div\n className={cn(styles.pageIndicator, styles.bullet, className)}\n style={{ height, width }}\n >\n <div\n className={styles.elementsList}\n style={{ gap, transform: `translate(${offset}px)` }}\n >\n {refs.map((ref, index) => {\n const sizeOfElement = elementSize(index);\n const isActive = activeElementIndex === index;\n const isVisible =\n firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;\n const addListTransitionEndListener = (done: () => void) => {\n const parentElement = ref.current?.parentElement;\n\n parentElement?.addEventListener('transitionend', done, { once: true });\n };\n\n return (\n <CSSTransition\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n nodeRef={ref}\n addEndListener={addListTransitionEndListener}\n in={isVisible}\n // passed empty object so any classes aren't added\n classNames={transitionClassess}\n >\n {(status) => (\n <div\n ref={ref}\n data-index={index}\n className={cn(\n styles.element,\n colorsStyle[colors].element,\n { [colorsStyle[colors].active]: isActive },\n styles[status],\n )}\n style={{ height: sizeOfElement, width: sizeOfElement }}\n />\n )}\n </CSSTransition>\n );\n })}\n </div>\n </div>\n );\n};\n"],"names":["invertedColors","defaultColors","staticColors","staticInvertedColors","useMemo","createRef","calcParams","React","cn","styles","CSSTransition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,+BAAc;AACxB,IAAA,OAAO,EAAEC,8BAAa;AACtB,IAAA,MAAM,EAAEC,6BAAY;AACpB,IAAA,iBAAiB,EAAEC,qCAAoB;CACjC;AAEV,IAAM,kBAAkB,GAAG,EAAW;AAE/B,IAAM,mBAAmB,GAAiC,UAAC,EAOjE,EAAA;AANG,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,QAAoB,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACL,kBAAkB,GAAA,EAAA,CAAA,aAAA,EACjC,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,mBAAG,CAAC,GAAA,EAAA,EACR,EAAA,GAAA,EAAA,CAAA,GAAO,EAAP,GAAG,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,KAAA,EACP,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA,EAClB,SAAS,GAAA,EAAA,CAAA,SAAA;AAET,IAAA,IAAM,IAAI,GAAGC,aAAO,CAChB,YAAM,EAAA,OAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,YAAA,EAAM,OAAAC,eAAS,EAAkB,CAAA,EAAA,CAAC,CAAhE,EAAgE,EACtE,CAAC,KAAK,CAAC,CACV;IACK,IAAA,EAAA,GACFD,aAAO,CACH,YAAA,EAAM,OAAAE,gBAAU,CAAC,IAAI,EAAE,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAA,EAAA,EACtD,CAAC,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CACzC,EAJE,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,wBAAwB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAIvF;IAEL,QACIC,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,aAAa,EAAEA,uBAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC7D,KAAK,EAAE,EAAE,MAAM,EAAA,MAAA,EAAE,KAAK,EAAA,KAAA,EAAE,EAAA;QAExBF,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEE,uBAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,EAAE,GAAG,EAAA,GAAA,EAAE,SAAS,EAAE,YAAa,CAAA,MAAA,CAAA,MAAM,EAAK,KAAA,CAAA,EAAE,EAElD,EAAA,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,KAAK,EAAA;AACjB,YAAA,IAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC;AACxC,YAAA,IAAM,QAAQ,GAAG,kBAAkB,KAAK,KAAK;YAC7C,IAAM,SAAS,GACX,wBAAwB,IAAI,KAAK,IAAI,KAAK,IAAI,uBAAuB;YACzE,IAAM,4BAA4B,GAAG,UAAC,IAAgB,EAAA;;gBAClD,IAAM,aAAa,GAAG,CAAA,EAAA,GAAA,GAAG,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa;AAEhD,gBAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,eAAe,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAC1E,aAAC;YAED,QACIF,qCAACG;;;;AAEG,gBAAA,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EACZ,cAAc,EAAE,4BAA4B,EAC5C,EAAE,EAAE,SAAS;;AAEb,gBAAA,UAAU,EAAE,kBAAkB,EAE7B,EAAA,UAAC,MAAM,EAAA;;gBAAK,QACTH,8CACI,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,KAAK,EACjB,SAAS,EAAEC,mBAAE,CACTC,uBAAM,CAAC,OAAO,EACd,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA,EACzB,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAG,GAAA,QAAQ,OACxCA,uBAAM,CAAC,MAAM,CAAC,CACjB,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,CACxD;aACL,CACW;AAExB,SAAC,CAAC,CACA,CACJ;AAEd;;;;"}

package/cssm/components/bullet/index.module.css CHANGED Viewed

@@ -9,8 +9,6 @@
         overflow: hidden;
     }
 .elementsList {
-    margin: 0;
-    padding: 0;
     display: flex;
     align-items: center;
     will-change: transform;

package/cssm/components/dynamic/Component.js CHANGED Viewed

@@ -29,7 +29,7 @@ var colorsStyle = {
 };
 var FULL_PROGRESS = 100;
 var PageIndicatorDynamic = function (props) {
-    var _a = props.size, height = _a === void 0 ? 8 : _a, _b = props.gap, gap = _b === void 0 ? 8 : _b, _c = props.activeElementWidth, activeElementWidth = _c === void 0 ? height * 7 : _c, _d = props.elements, count = _d === void 0 ? 10 : _d, indexFromProps = props.activeElement, onActiveElementChange = props.onActiveElementChange, _e = props.defaultActiveElement, defaultIndex = _e === void 0 ? 0 : _e, _f = props.active, active = _f === void 0 ? true : _f, _g = props.duration, durationFromProps = _g === void 0 ? 3000 : _g, _h = props.cycle, cycle = _h === void 0 ? false : _h, _j = props.colors, colors = _j === void 0 ? 'default' : _j;
+    var _a = props.size, height = _a === void 0 ? 8 : _a, _b = props.gap, gap = _b === void 0 ? 8 : _b, _c = props.activeElementWidth, activeElementWidth = _c === void 0 ? height * 7 : _c, _d = props.elements, count = _d === void 0 ? 10 : _d, indexFromProps = props.activeElement, onActiveElementChange = props.onActiveElementChange, _e = props.defaultActiveElement, defaultIndex = _e === void 0 ? 0 : _e, _f = props.active, active = _f === void 0 ? true : _f, _g = props.duration, durationFromProps = _g === void 0 ? 3000 : _g, _h = props.cycle, cycle = _h === void 0 ? false : _h, _j = props.colors, colors = _j === void 0 ? 'default' : _j, className = props.className;
     var _k = React.useState(indexFromProps !== null && indexFromProps !== void 0 ? indexFromProps : defaultIndex), activeIndex = _k[0], setActiveIndex = _k[1];
     var _l = React.useState(0), progress = _l[0], setProgress = _l[1];
     var inProgress = progress < FULL_PROGRESS;
@@ -67,7 +67,7 @@ var PageIndicatorDynamic = function (props) {
         setActiveIndex(nextActiveIndex);
         setProgress(0);
     }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);
-    return (React__default.default.createElement("ol", { className: styles__default.default.pageIndicator, style: { height: height, gap: gap } }, Array.from({ length: count }, function (_, index) {
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.pageIndicator, className), style: { height: height, gap: gap } }, Array.from({ length: count }, function (_, index) {
         var _a;
         var isActive = index === activeIndex;
         var style = {
@@ -77,7 +77,7 @@ var PageIndicatorDynamic = function (props) {
         var progressStyle = isActive
             ? { transform: "translateX(".concat(progress - FULL_PROGRESS, "%)") }
             : undefined;
-        return (React__default.default.createElement("li", { key: index, style: style, className: cn__default.default(styles__default.default.element, colorsStyle[colors].element, (_a = {},
+        return (React__default.default.createElement("div", { key: index, style: style, className: cn__default.default(styles__default.default.element, colorsStyle[colors].element, (_a = {},
                 _a[styles__default.default.active] = isActive,
                 _a[colorsStyle[colors].active] = isActive,
                 _a)) },

package/cssm/components/dynamic/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../../src/components/dynamic/Component.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n hasOwnProperty,\n isFn,\n isNonNullable,\n isNullable,\n noop,\n} from '@alfalab/core-components-shared';\n\nimport { type PageIndicatorDynamicProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nconst FULL_PROGRESS = 100;\n\nexport const PageIndicatorDynamic: React.FC<PageIndicatorDynamicProps> = (props) => {\n const {\n size: height = 8,\n gap = 8,\n activeElementWidth = height * 7,\n elements: count = 10,\n activeElement: indexFromProps,\n onActiveElementChange,\n defaultActiveElement: defaultIndex = 0,\n active = true,\n duration: durationFromProps = 3000,\n cycle = false,\n colors = 'default',\n } = props;\n const [activeIndex, setActiveIndex] = useState<number \| undefined>(\n indexFromProps ?? defaultIndex,\n );\n const [progress, setProgress] = useState(0);\n const inProgress = progress < FULL_PROGRESS;\n const activeIndexInProps = hasOwnProperty(props, 'activeElement');\n let duration: number;\n\n if (active && isNonNullable(activeIndex) && inProgress) {\n duration = isFn(durationFromProps) ? durationFromProps(activeIndex) : durationFromProps;\n } else {\n duration = -1;\n }\n\n // getDerivedStateFromProps\n if (activeIndexInProps && !(activeIndex === indexFromProps)) {\n setActiveIndex(indexFromProps);\n setProgress(0);\n }\n\n useEffect(() => {\n if (duration === -1) {\n return noop;\n }\n\n const interval = duration / FULL_PROGRESS;\n const timer = setInterval(\n () => setProgress((prevProgress) => Math.min(prevProgress + 1, FULL_PROGRESS)),\n interval,\n );\n\n return () => clearInterval(timer);\n }, [duration]);\n\n useEffect(() => {\n const isLast = activeIndex === count - 1;\n\n if (inProgress \|\| isNullable(activeIndex) \|\| (isLast && !cycle)) {\n return;\n }\n\n const nextActiveIndex = isLast && cycle ? 0 : activeIndex + 1;\n\n onActiveElementChange?.(nextActiveIndex);\n\n if (activeIndexInProps) {\n return;\n }\n\n setActiveIndex(nextActiveIndex);\n setProgress(0);\n }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);\n\n return (\n <ol className={styles.pageIndicator} style={{ height, gap }}>\n {Array.from({ length: count }, (_, index) => {\n const isActive = index === activeIndex;\n const style: React.CSSProperties = {\n width: isActive ? activeElementWidth : height,\n borderRadius: height / 2,\n };\n const progressStyle: React.CSSProperties \| undefined = isActive\n ? { transform: `translateX(${progress - FULL_PROGRESS}%)` }\n : undefined;\n\n return (\n <li\n key={index}\n style={style}\n className={cn(styles.element, colorsStyle[colors].element, {\n [styles.active]: isActive,\n [colorsStyle[colors].active]: isActive,\n })}\n >\n <div\n style={progressStyle}\n className={cn(styles.progress, colorsStyle[colors].progress)}\n />\n </li>\n );\n })}\n </ol>\n );\n};\n"],"names":["invertedColors","defaultColors","staticColors","staticInvertedColors","useState","hasOwnProperty","isNonNullable","isFn","useEffect","noop","isNullable","React","~~styles~~","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,+BAAc;AACxB,IAAA,OAAO,EAAEC,8BAAa;AACtB,IAAA,MAAM,EAAEC,6BAAY;AACpB,IAAA,iBAAiB,EAAEC,qCAAoB;CACjC;AAEV,IAAM,aAAa,GAAG,GAAG;AAElB,IAAM,oBAAoB,GAAwC,UAAC,KAAK,EAAA;IAEvE,IAAA,EAAA,~~GAWA~~,KAAK,~~CAXW~~,IAAA,EAAV,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,KAAA,EAChB,EAAA,~~GAUA~~,KAAK,~~CAVE~~,GAAA,EAAP,GAAG,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,KAAA,EACP,EAAA,~~GASA~~,KAAK,~~CAT0B~~,~~kBAAA~~,EAA/B,kBAAkB,~~GAAG~~,~~EAAA,KAAA,MAAA,GAAA,~~MAAM,GAAG,CAAC,GAAA,EAAA,EAC/B,~~EAQA~~,~~GAAA,~~KAAK,~~SARe~~,EAAV,KAAK,~~mBAAG~~,EAAE,GAAA,EAAA,EACL,cAAc,~~GAO7B~~,KAAK,~~CAPwB~~,~~aAAA,~~EAC7B,qBAAqB,~~GAMrB~~,KAAK,~~sBANgB~~,EACrB,~~EAAA~~,~~GAKA,~~KAAK,~~CALiC~~,~~oBAAA~~,EAAhB,YAAY,~~GAAG~~,EAAA,KAAA,MAAA,~~GAAA~~,CAAC,~~KAAA~~,EACtC,~~EAAA~~,~~GAIA,~~KAAK,~~CAJQ~~,~~MAAA~~,EAAb,MAAM,~~GAAG~~,EAAA,KAAA,MAAA,~~GAAA~~,IAAI,~~KAAA~~,EACb,~~EAAA~~,~~GAGA,~~KAAK,~~CAH6B~~,~~QAAA~~,EAAxB,iBAAiB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,KAAA,EAClC,EAAA,~~GAEA~~,KAAK,~~CAFQ~~,KAAA,EAAb,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,~~KAAA~~,EACb,~~EAAA~~,~~GACA~~,KAAK,~~CADa~~,~~MAAA,~~EAAlB,MAAM,~~GAAG~~,~~EAAA~~,~~KAAA~~,~~MAAA~~,~~GAAA~~,SAAS,~~KAAA~~;~~AAEhB~~,IAAA,IAAA,KAAgCC,cAAQ,CAC1C,cAAc,KAAA,IAAA,IAAd,cAAc,KAAd,MAAA,GAAA,cAAc,GAAI,YAAY,CACjC,EAFM,WAAW,QAAA,EAAE,cAAc,QAEjC;IACK,IAAA,EAAA,GAA0BA,cAAQ,CAAC,CAAC,CAAC,EAApC,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAe;AAC3C,IAAA,IAAM,UAAU,GAAG,QAAQ,GAAG,aAAa;IAC3C,IAAM,kBAAkB,GAAGC,mBAAc,CAAC,KAAK,EAAE,eAAe,CAAC;AACjE,IAAA,IAAI,QAAgB;IAEpB,IAAI,MAAM,IAAIC,kBAAa,CAAC,WAAW,CAAC,IAAI,UAAU,EAAE;AACpD,QAAA,QAAQ,GAAGC,SAAI,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,WAAW,CAAC,GAAG,iBAAiB;;SACpF;QACH,QAAQ,GAAG,EAAE;;;IAIjB,IAAI,kBAAkB,IAAI,EAAE,WAAW,KAAK,cAAc,CAAC,EAAE;QACzD,cAAc,CAAC,cAAc,CAAC;QAC9B,WAAW,CAAC,CAAC,CAAC;;AAGlB,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAI,QAAQ,KAAK,EAAE,EAAE;AACjB,YAAA,OAAOC,SAAI;;AAGf,QAAA,IAAM,QAAQ,GAAG,QAAQ,GAAG,aAAa;AACzC,QAAA,IAAM,KAAK,GAAG,WAAW,CACrB,YAAM,EAAA,OAAA,WAAW,CAAC,UAAC,YAAY,EAAK,EAAA,OAAA,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,EAAE,aAAa,CAAC,CAAA,EAAA,CAAC,CAAxE,EAAwE,EAC9E,QAAQ,CACX;QAED,OAAO,YAAA,EAAM,OAAA,aAAa,CAAC,KAAK,CAAC,CAAA,EAAA;AACrC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAAD,eAAS,CAAC,YAAA;AACN,QAAA,IAAM,MAAM,GAAG,WAAW,KAAK,KAAK,GAAG,CAAC;AAExC,QAAA,IAAI,UAAU,IAAIE,eAAU,CAAC,WAAW,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,EAAE;YAC7D;;AAGJ,QAAA,IAAM,eAAe,GAAG,MAAM,IAAI,KAAK,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC;AAE7D,QAAA,qBAAqB,aAArB,qBAAqB,KAAA,MAAA,GAAA,MAAA,GAArB,qBAAqB,CAAG,eAAe,CAAC;QAExC,IAAI,kBAAkB,EAAE;YACpB;;QAGJ,cAAc,CAAC,eAAe,CAAC;QAC/B,WAAW,CAAC,CAAC,CAAC;AAClB,KAAC,EAAE,CAAC,WAAW,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,qBAAqB,CAAC,CAAC;AAEtF,IAAA,QACIC,~~sBAAA~~,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,~~EAAI~~,SAAS,EAAEC,uBAAM,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,MAAM,~~QAAA~~,EAAE,GAAG,~~EAAA~~,~~GAAA,~~EAAE,~~EACtD,~~EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAC,CAAC,EAAE,KAAK,EAAA;;AACpC,QAAA,IAAM,QAAQ,GAAG,KAAK,KAAK,WAAW;AACtC,QAAA,IAAM,KAAK,GAAwB;YAC/B,KAAK,EAAE,QAAQ,GAAG,kBAAkB,GAAG,MAAM;YAC7C,YAAY,EAAE,MAAM,GAAG,CAAC;SAC3B;QACD,IAAM,aAAa,GAAoC;cACjD,EAAE,SAAS,EAAE,qBAAc,QAAQ,GAAG,aAAa,EAAA,IAAA,CAAI;cACvD,SAAS;QAEf,~~QACID~~,~~6CACI~~,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,~~EAAEE~~,mBAAE,~~CAACD~~,uBAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;AACrD,gBAAA,EAAA,CAACA,uBAAM,CAAC,MAAM,CAAA,GAAG,QAAQ;AACzB,gBAAA,EAAA,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,IAAG,QAAQ;AACxC,gBAAA,EAAA,EAAA,EAAA;~~YAEFD~~,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,aAAa,EACpB,SAAS,~~EAAEE~~,mBAAE,~~CAACD~~,uBAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAA,CAC9D,~~CACD~~;~~KAEZ~~,CAAC,~~CACD~~;~~AAEb~~;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../../../src/components/dynamic/Component.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n hasOwnProperty,\n isFn,\n isNonNullable,\n isNullable,\n noop,\n} from '@alfalab/core-components-shared';\n\nimport { type PageIndicatorDynamicProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nconst FULL_PROGRESS = 100;\n\nexport const PageIndicatorDynamic: React.FC<PageIndicatorDynamicProps> = (props) => {\n const {\n size: height = 8,\n gap = 8,\n activeElementWidth = height * 7,\n elements: count = 10,\n activeElement: indexFromProps,\n onActiveElementChange,\n defaultActiveElement: defaultIndex = 0,\n active = true,\n duration: durationFromProps = 3000,\n cycle = false,\n colors = 'default',\n className,\n } = props;\n const [activeIndex, setActiveIndex] = useState<number \| undefined>(\n indexFromProps ?? defaultIndex,\n );\n const [progress, setProgress] = useState(0);\n const inProgress = progress < FULL_PROGRESS;\n const activeIndexInProps = hasOwnProperty(props, 'activeElement');\n let duration: number;\n\n if (active && isNonNullable(activeIndex) && inProgress) {\n duration = isFn(durationFromProps) ? durationFromProps(activeIndex) : durationFromProps;\n } else {\n duration = -1;\n }\n\n // getDerivedStateFromProps\n if (activeIndexInProps && !(activeIndex === indexFromProps)) {\n setActiveIndex(indexFromProps);\n setProgress(0);\n }\n\n useEffect(() => {\n if (duration === -1) {\n return noop;\n }\n\n const interval = duration / FULL_PROGRESS;\n const timer = setInterval(\n () => setProgress((prevProgress) => Math.min(prevProgress + 1, FULL_PROGRESS)),\n interval,\n );\n\n return () => clearInterval(timer);\n }, [duration]);\n\n useEffect(() => {\n const isLast = activeIndex === count - 1;\n\n if (inProgress \|\| isNullable(activeIndex) \|\| (isLast && !cycle)) {\n return;\n }\n\n const nextActiveIndex = isLast && cycle ? 0 : activeIndex + 1;\n\n onActiveElementChange?.(nextActiveIndex);\n\n if (activeIndexInProps) {\n return;\n }\n\n setActiveIndex(nextActiveIndex);\n setProgress(0);\n }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);\n\n return (\n <div className={cn(styles.pageIndicator, className)} style={{ height, gap }}>\n {Array.from({ length: count }, (_, index) => {\n const isActive = index === activeIndex;\n const style: React.CSSProperties = {\n width: isActive ? activeElementWidth : height,\n borderRadius: height / 2,\n };\n const progressStyle: React.CSSProperties \| undefined = isActive\n ? { transform: `translateX(${progress - FULL_PROGRESS}%)` }\n : undefined;\n\n return (\n <div\n key={index}\n style={style}\n className={cn(styles.element, colorsStyle[colors].element, {\n [styles.active]: isActive,\n [colorsStyle[colors].active]: isActive,\n })}\n >\n <div\n style={progressStyle}\n className={cn(styles.progress, colorsStyle[colors].progress)}\n />\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["invertedColors","defaultColors","staticColors","staticInvertedColors","useState","hasOwnProperty","isNonNullable","isFn","useEffect","noop","isNullable","React","cn","styles"],"mappings":"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"}

package/cssm/components/dynamic/index.module.css CHANGED Viewed

@@ -2,8 +2,6 @@
     --page-indicator-animation-duration: 0.2s;
 }
 .pageIndicator {
-    margin: 0;
-    padding: 0;
     display: flex;
 }
 .element {

package/cssm/components/runner/Component.js CHANGED Viewed

@@ -27,8 +27,8 @@ var colorsStyle = {
     'static-inverted': staticInvertedColors__default.default,
 };
 var PageIndicatorRunner = function (_a) {
-    var activeElement = _a.activeElement, _b = _a.elements, count = _b === void 0 ? 10 : _b, _c = _a.size, size = _c === void 0 ? 4 : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d;
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.pageIndicator, colorsStyle[colors].pageIndicator), style: { height: size, borderRadius: size / 2 } },
+    var activeElement = _a.activeElement, _b = _a.elements, count = _b === void 0 ? 10 : _b, _c = _a.size, size = _c === void 0 ? 4 : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, className = _a.className;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.pageIndicator, colorsStyle[colors].pageIndicator, className), style: { height: size, borderRadius: size / 2 } },
         React__default.default.createElement("div", { style: {
                 transform: "translate(".concat(activeElement * 100, "%, 0)"),
                 height: size,

package/cssm/components/runner/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../../src/components/runner/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { type PageIndicatorRunnerProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nexport const PageIndicatorRunner: React.FC<PageIndicatorRunnerProps> = ({\n activeElement,\n elements: count = 10,\n size = 4,\n colors = 'default',\n}) => (\n <div\n className={cn(styles.pageIndicator, colorsStyle[colors].pageIndicator)}\n style={{ height: size, borderRadius: size / 2 }}\n >\n <div\n style={{\n transform: `translate(${activeElement * 100}%, 0)`,\n height: size,\n width: `${100 / count}%`,\n borderRadius: size / 2,\n }}\n className={cn(styles.element, colorsStyle[colors].element)}\n />\n </div>\n);\n"],"names":["invertedColors","defaultColors","staticColors","staticInvertedColors","React","cn","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,+BAAc;AACxB,IAAA,OAAO,EAAEC,8BAAa;AACtB,IAAA,MAAM,EAAEC,6BAAY;AACpB,IAAA,iBAAiB,EAAEC,qCAAoB;CACjC;AAEH,IAAM,mBAAmB,GAAuC,UAAC,~~EAKvE~~,EAAA;~~QAJG~~,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,~~EAAoB~~,GAAA,EAAA,CAAA,~~QAAA~~,EAAV,KAAK,~~GAAG~~,~~EAAA~~,~~KAAA,MAAA,~~GAAA,~~EAAE~~,~~KAAA,~~EACpB,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,GAAA,EAAA,~~KAAA~~,~~MAAA~~,~~GAAG,CAAC,~~GAAA,EAAA,~~EACR~~,~~cAAkB~~,EAAlB,MAAM,~~GAAG~~,~~EAAA~~,~~KAAA~~,~~MAAA~~,~~GAAA~~,SAAS,GAAA,EAAA;~~AAChB~~,IAAA,QACFC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,~~EACtE~~,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAAA;AAE/C,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE;AACH,gBAAA,SAAS,EAAE,YAAA,CAAA,MAAA,CAAa,aAAa,GAAG,GAAG,EAAO,OAAA,CAAA;AAClD,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,KAAK,EAAE,EAAA,CAAA,MAAA,CAAG,GAAG,GAAG,KAAK,EAAG,GAAA,CAAA;gBACxB,YAAY,EAAE,IAAI,GAAG,CAAC;AACzB,aAAA,EACD,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAA,CAC5D,CACA;AAdJ;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../../../src/components/runner/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { type PageIndicatorRunnerProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nexport const PageIndicatorRunner: React.FC<PageIndicatorRunnerProps> = ({\n activeElement,\n elements: count = 10,\n size = 4,\n colors = 'default',\n className,\n}) => (\n <div\n className={cn(styles.pageIndicator, colorsStyle[colors].pageIndicator, className)}\n style={{ height: size, borderRadius: size / 2 }}\n >\n <div\n style={{\n transform: `translate(${activeElement * 100}%, 0)`,\n height: size,\n width: `${100 / count}%`,\n borderRadius: size / 2,\n }}\n className={cn(styles.element, colorsStyle[colors].element)}\n />\n </div>\n);\n"],"names":["invertedColors","defaultColors","staticColors","staticInvertedColors","React","cn","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,+BAAc;AACxB,IAAA,OAAO,EAAEC,8BAAa;AACtB,IAAA,MAAM,EAAEC,6BAAY;AACpB,IAAA,iBAAiB,EAAEC,qCAAoB;CACjC;AAEH,IAAM,mBAAmB,GAAuC,UAAC,EAMvE,EAAA;QALG,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,EAAA,GAAA,EAAA,CAAA,QAAoB,EAAV,KAAK,mBAAG,EAAE,GAAA,EAAA,EACpB,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,mBAAG,CAAC,GAAA,EAAA,EACR,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,mBAAG,SAAS,GAAA,EAAA,EAClB,SAAS,GAAA,EAAA,CAAA,SAAA;AACP,IAAA,QACFC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,aAAa,EAAE,SAAS,CAAC,EACjF,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAAA;AAE/C,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE;AACH,gBAAA,SAAS,EAAE,YAAA,CAAA,MAAA,CAAa,aAAa,GAAG,GAAG,EAAO,OAAA,CAAA;AAClD,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,KAAK,EAAE,EAAA,CAAA,MAAA,CAAG,GAAG,GAAG,KAAK,EAAG,GAAA,CAAA;gBACxB,YAAY,EAAE,IAAI,GAAG,CAAC;AACzB,aAAA,EACD,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAA,CAC5D,CACA;AAdJ;;;;"}

package/cssm/components/runner/index.module.css CHANGED Viewed

@@ -5,3 +5,6 @@
     transition: transform var(--page-indicator-animation-duration) linear;
     will-change: transition;
 }
+.pageIndicator {
+    width: 100%;
+}

package/cssm/components/step/Component.js CHANGED Viewed

@@ -27,10 +27,10 @@ var colorsStyle = {
     'static-inverted': staticInvertedColors__default.default,
 };
 var PageIndicatorStep = function (_a) {
-    var activeElement = _a.activeElement, _b = _a.elements, count = _b === void 0 ? 10 : _b, _c = _a.size, size = _c === void 0 ? 4 : _c, _d = _a.gap, gap = _d === void 0 ? 4 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e;
-    return (React__default.default.createElement("ol", { className: styles__default.default.pageIndicator, style: { height: size, gap: gap } }, Array.from({ length: count }, function (_, index) {
+    var activeElement = _a.activeElement, _b = _a.elements, count = _b === void 0 ? 10 : _b, _c = _a.size, size = _c === void 0 ? 4 : _c, _d = _a.gap, gap = _d === void 0 ? 4 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, className = _a.className;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.pageIndicator, className), style: { height: size, gap: gap } }, Array.from({ length: count }, function (_, index) {
         var _a;
-        return (React__default.default.createElement("li", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn__default.default(styles__default.default.element, colorsStyle[colors].element, (_a = {},
+        return (React__default.default.createElement("div", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn__default.default(styles__default.default.element, colorsStyle[colors].element, (_a = {},
                 _a[colorsStyle[colors].active] = index === activeElement,
                 _a)) }));
     })));

package/cssm/components/step/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { type PageIndicatorStepProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nexport const PageIndicatorStep: React.FC<PageIndicatorStepProps> = ({\n activeElement,\n elements: count = 10,\n size = 4,\n gap = 4,\n colors = 'default',\n}) => (\n <ol className={styles.pageIndicator} style={{ height: size, gap }}>\n {Array.from({ length: count }, (_, index) => (\n <li\n key={index}\n style={{ height: size, borderRadius: size / 2 }}\n className={cn(styles.element, colorsStyle[colors].element, {\n [colorsStyle[colors].active]: index === activeElement,\n })}\n />\n ))}\n </ol>\n);\n"],"names":["invertedColors","defaultColors","staticColors","staticInvertedColors","React","~~styles~~","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,+BAAc;AACxB,IAAA,OAAO,EAAEC,8BAAa;AACtB,IAAA,MAAM,EAAEC,6BAAY;AACpB,IAAA,iBAAiB,EAAEC,qCAAoB;CACjC;AAEH,IAAM,iBAAiB,GAAqC,UAAC,~~EAMnE~~,EAAA;~~AALG~~,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,EAAoB,GAAA,EAAA,CAAA,QAAA,EAAV,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACpB,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,~~GAAG~~,~~EAAA,KAAA,MAAA,GAAA,~~CAAC,GAAA,EAAA,EACR,~~EAAO~~,GAAA,EAAA,CAAA,~~GAAA~~,EAAP,GAAG,~~GAAA~~,EAAA,KAAA,MAAA,~~GAAG~~,CAAC,~~GAAA~~,~~EAAA,~~EACP,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA;~~AAChB~~,IAAA,QACFC,~~sBAAA~~,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,~~EAAI~~,SAAS,EAAEC,uBAAM,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAA,GAAA,EAAE,~~EAC5D~~,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAC,CAAC,EAAE,KAAK,EAAA;;AAAK,QAAA,~~QACzCD~~,sBAAA,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,EACI,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAC/C,SAAS,~~EAAEE~~,mBAAE,~~CAACD~~,uBAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;gBACrD,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA,GAAG,KAAK,KAAK,aAAa;AACvD,gBAAA,EAAA,EAAA,EAAA,CACJ;KACL,CAAC,~~CACD~~;~~AAXH~~;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { type PageIndicatorStepProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nexport const PageIndicatorStep: React.FC<PageIndicatorStepProps> = ({\n activeElement,\n elements: count = 10,\n size = 4,\n gap = 4,\n colors = 'default',\n className,\n}) => (\n <div className={cn(styles.pageIndicator, className)} style={{ height: size, gap }}>\n {Array.from({ length: count }, (_, index) => (\n <div\n key={index}\n style={{ height: size, borderRadius: size / 2 }}\n className={cn(styles.element, colorsStyle[colors].element, {\n [colorsStyle[colors].active]: index === activeElement,\n })}\n />\n ))}\n </div>\n);\n"],"names":["invertedColors","defaultColors","staticColors","staticInvertedColors","React","cn","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,+BAAc;AACxB,IAAA,OAAO,EAAEC,8BAAa;AACtB,IAAA,MAAM,EAAEC,6BAAY;AACpB,IAAA,iBAAiB,EAAEC,qCAAoB;CACjC;AAEH,IAAM,iBAAiB,GAAqC,UAAC,EAOnE,EAAA;AANG,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,EAAoB,GAAA,EAAA,CAAA,QAAA,EAAV,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACpB,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,mBAAG,CAAC,GAAA,EAAA,EACR,EAAA,GAAA,EAAA,CAAA,GAAO,EAAP,GAAG,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,KAAA,EACP,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA,EAClB,SAAS,GAAA,EAAA,CAAA,SAAA;AACP,IAAA,QACFC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAA,GAAA,EAAE,EAC5E,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAC,CAAC,EAAE,KAAK,EAAA;;AAAK,QAAA,QACzCF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAC/C,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;gBACrD,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA,GAAG,KAAK,KAAK,aAAa;AACvD,gBAAA,EAAA,EAAA,EAAA,CACJ;KACL,CAAC,CACA;AAXJ;;;;"}

package/cssm/components/step/index.module.css CHANGED Viewed

@@ -3,9 +3,8 @@
     --page-indicator-animation-timing-function: ease-in-out;
 }
 .pageIndicator {
-    margin: 0;
-    padding: 0;
     display: flex;
+    width: 100%;
 }
 .element {
     list-style-type: none;

package/cssm/types.d.ts CHANGED Viewed

@@ -1,18 +1,24 @@
-export interface PageIndicatorDynamicProps {
+interface BasePageIndicatorProps {
     /**
-     * Индекс выбранного элемента по-умолчанию
-     * @default 0
+     * Имя класса
      */
-    defaultActiveElement?: number;
+    className?: string;
     /**
      * Индекс выбранного элемента
      */
-    activeElement?: number;
+    activeElement: number;
     /**
      * Количество элементов (минимум 2)
      * @default 10
      */
     elements?: number;
+}
+export interface PageIndicatorDynamicProps extends BasePageIndicatorProps {
+    /**
+     * Индекс выбранного элемента по-умолчанию
+     * @default 0
+     */
+    defaultActiveElement?: number;
     /**
      * Высота компонента
      * @default 8
@@ -53,16 +59,7 @@ export interface PageIndicatorDynamicProps {
      */
     colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
 }
-export interface PageIndicatorBulletProps {
-    /**
-     * Индекс выбранного элемента
-     */
-    activeElement: number;
-    /**
-     * Количество элементов (минимум 2)
-     * @default 10
-     */
-    elements?: number;
+export interface PageIndicatorBulletProps extends BasePageIndicatorProps {
     /**
      * Высота компонента
      * @default 8
@@ -79,16 +76,7 @@ export interface PageIndicatorBulletProps {
      */
     colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
 }
-export interface PageIndicatorStepProps {
-    /**
-     * Индекс выбранного элемента
-     */
-    activeElement: number;
-    /**
-     * Количество элементов (минимум 2)
-     * @default 10
-     */
-    elements?: number;
+export interface PageIndicatorStepProps extends BasePageIndicatorProps {
     /**
      * Высота компонента
      * @default 4
@@ -105,16 +93,7 @@ export interface PageIndicatorStepProps {
      */
     colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
 }
-export interface PageIndicatorRunnerProps {
-    /**
-     * Индекс выбранного элемента
-     */
-    activeElement: number;
-    /**
-     * Количество элементов (минимум 2)
-     * @default 10
-     */
-    elements?: number;
+export interface PageIndicatorRunnerProps extends BasePageIndicatorProps {
     /**
      * Высота компонента
      * @default 4
@@ -126,3 +105,4 @@ export interface PageIndicatorRunnerProps {
      */
     colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
 }
+export {};

package/esm/components/bullet/Component.js CHANGED Viewed

@@ -16,11 +16,11 @@ var colorsStyle = {
 };
 var transitionClassess = {};
 var PageIndicatorBullet = function (_a) {
-    var _b = _a.elements, count = _b === void 0 ? 10 : _b, activeElementIndex = _a.activeElement, _c = _a.size, size = _c === void 0 ? 8 : _c, _d = _a.gap, gap = _d === void 0 ? 8 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e;
+    var _b = _a.elements, count = _b === void 0 ? 10 : _b, activeElementIndex = _a.activeElement, _c = _a.size, size = _c === void 0 ? 8 : _c, _d = _a.gap, gap = _d === void 0 ? 8 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, className = _a.className;
     var refs = useMemo(function () { return Array.from({ length: count }, function () { return createRef(); }); }, [count]);
     var _f = useMemo(function () { return calcParams(size, gap, activeElementIndex, count); }, [activeElementIndex, count, gap, size]), height = _f[0], width = _f[1], offset = _f[2], elementSize = _f[3], firstVisibleElementIndex = _f[4], lastVisibleElementIndex = _f[5];
-    return (React.createElement("div", { className: cn(styles.pageIndicator, styles.bullet), style: { height: height, width: width } },
-        React.createElement("ol", { className: styles.elementsList, style: { gap: gap, transform: "translate(".concat(offset, "px)") } }, refs.map(function (ref, index) {
+    return (React.createElement("div", { className: cn(styles.pageIndicator, styles.bullet, className), style: { height: height, width: width } },
+        React.createElement("div", { className: styles.elementsList, style: { gap: gap, transform: "translate(".concat(offset, "px)") } }, refs.map(function (ref, index) {
             var sizeOfElement = elementSize(index);
             var isActive = activeElementIndex === index;
             var isVisible = firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;
@@ -37,7 +37,7 @@ var PageIndicatorBullet = function (_a) {
                 // passed empty object so any classes aren't added
                 classNames: transitionClassess }, function (status) {
                 var _a;
-                return (React.createElement("li", { ref: ref, "data-index": index, className: cn(styles.element, colorsStyle[colors].element, (_a = {}, _a[colorsStyle[colors].active] = isActive, _a), styles[status]), style: { height: sizeOfElement, width: sizeOfElement } }));
+                return (React.createElement("div", { ref: ref, "data-index": index, className: cn(styles.element, colorsStyle[colors].element, (_a = {}, _a[colorsStyle[colors].active] = isActive, _a), styles[status]), style: { height: sizeOfElement, width: sizeOfElement } }));
             }));
         }))));
 };

package/esm/components/bullet/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../../src/components/bullet/Component.tsx"],"sourcesContent":["import React, { createRef, type FC, useMemo } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { type PageIndicatorBulletProps } from '../../types';\n\nimport { calcParams } from './utils';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nconst transitionClassess = {} as const;\n\nexport const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({\n elements: count = 10,\n activeElement: activeElementIndex,\n size = 8,\n gap = 8,\n colors = 'default',\n}) => {\n const refs = useMemo(\n () => Array.from({ length: count }, () => createRef<~~HTMLLIElement~~>()),\n [count],\n );\n const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] =\n useMemo(\n () => calcParams(size, gap, activeElementIndex, count),\n [activeElementIndex, count, gap, size],\n );\n\n return (\n <div className={cn(styles.pageIndicator, styles.bullet)} style={{ height, width }}>\n <ol\n className={styles.elementsList}\n style={{ gap, transform: `translate(${offset}px)` }}\n >\n {refs.map((ref, index) => {\n const sizeOfElement = elementSize(index);\n const isActive = activeElementIndex === index;\n const isVisible =\n firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;\n const addListTransitionEndListener = (done: () => void) => {\n const parentElement = ref.current?.parentElement;\n\n parentElement?.addEventListener('transitionend', done, { once: true });\n };\n\n return (\n <CSSTransition\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n nodeRef={ref}\n addEndListener={addListTransitionEndListener}\n in={isVisible}\n // passed empty object so any classes aren't added\n classNames={transitionClassess}\n >\n {(status) => (\n <li\n ref={ref}\n data-index={index}\n className={cn(\n styles.element,\n colorsStyle[colors].element,\n { [colorsStyle[colors].active]: isActive },\n styles[status],\n )}\n style={{ height: sizeOfElement, width: sizeOfElement }}\n />\n )}\n </CSSTransition>\n );\n })}\n </ol>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAcA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEV,IAAM,kBAAkB,GAAG,EAAW;AAE/B,IAAM,mBAAmB,GAAiC,UAAC,~~EAMjE~~,EAAA;~~AALG~~,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,QAAoB,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACL,kBAAkB,GAAA,EAAA,CAAA,aAAA,EACjC,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,~~GAAG~~,~~EAAA,KAAA,MAAA,GAAA,~~CAAC,GAAA,EAAA,EACR,~~EAAO~~,GAAA,EAAA,CAAA,~~GAAA~~,EAAP,GAAG,~~GAAA~~,EAAA,KAAA,MAAA,~~GAAG~~,CAAC,~~GAAA~~,~~EAAA,~~EACP,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA;~~AAElB~~,IAAA,IAAM,IAAI,GAAG,OAAO,CAChB,YAAM,EAAA,OAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,YAAA,EAAM,OAAA,SAAS,~~EAAiB~~,CAAA,EAAA,CAAC,~~CAA/D~~,~~EAA+D~~,~~EACrE~~,CAAC,KAAK,CAAC,CACV;IACK,IAAA,EAAA,GACF,OAAO,CACH,YAAA,EAAM,OAAA,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAA,EAAA,EACtD,CAAC,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CACzC,EAJE,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,wBAAwB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAIvF;IAEL,QACI,~~6BAAK~~,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,~~EAAE~~,KAAK,EAAE,EAAE,MAAM,EAAA,MAAA,EAAE,KAAK,EAAA,KAAA,EAAE,EAAA;~~QAC7E~~,KACI,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,EAAE,GAAG,EAAA,GAAA,EAAE,SAAS,EAAE,YAAa,CAAA,MAAA,CAAA,MAAM,EAAK,KAAA,CAAA,EAAE,EAElD,EAAA,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,KAAK,EAAA;AACjB,YAAA,IAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC;AACxC,YAAA,IAAM,QAAQ,GAAG,kBAAkB,KAAK,KAAK;YAC7C,IAAM,SAAS,GACX,wBAAwB,IAAI,KAAK,IAAI,KAAK,IAAI,uBAAuB;YACzE,IAAM,4BAA4B,GAAG,UAAC,IAAgB,EAAA;;gBAClD,IAAM,aAAa,GAAG,CAAA,EAAA,GAAA,GAAG,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa;AAEhD,gBAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,eAAe,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAC1E,aAAC;YAED,QACI,oBAAC;;;;AAEG,gBAAA,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EACZ,cAAc,EAAE,4BAA4B,EAC5C,EAAE,EAAE,SAAS;;AAEb,gBAAA,UAAU,EAAE,kBAAkB,EAE7B,EAAA,UAAC,MAAM,EAAA;;gBAAK,QACT,~~4BACI~~,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,KAAK,EACjB,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,OAAO,EACd,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA,EACzB,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAG,GAAA,QAAQ,OACxC,MAAM,CAAC,MAAM,CAAC,CACjB,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,CACxD;aACL,CACW;AAExB,SAAC,CAAC,~~CACD~~,~~CACH~~;AAEd;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../../../src/components/bullet/Component.tsx"],"sourcesContent":["import React, { createRef, type FC, useMemo } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { type PageIndicatorBulletProps } from '../../types';\n\nimport { calcParams } from './utils';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n inverted: invertedColors,\n default: defaultColors,\n static: staticColors,\n 'static-inverted': staticInvertedColors,\n} as const;\n\nconst transitionClassess = {} as const;\n\nexport const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({\n elements: count = 10,\n activeElement: activeElementIndex,\n size = 8,\n gap = 8,\n colors = 'default',\n className,\n}) => {\n const refs = useMemo(\n () => Array.from({ length: count }, () => createRef<HTMLDivElement>()),\n [count],\n );\n const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] =\n useMemo(\n () => calcParams(size, gap, activeElementIndex, count),\n [activeElementIndex, count, gap, size],\n );\n\n return (\n <div\n className={cn(styles.pageIndicator, styles.bullet, className)}\n style={{ height, width }}\n >\n <div\n className={styles.elementsList}\n style={{ gap, transform: `translate(${offset}px)` }}\n >\n {refs.map((ref, index) => {\n const sizeOfElement = elementSize(index);\n const isActive = activeElementIndex === index;\n const isVisible =\n firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;\n const addListTransitionEndListener = (done: () => void) => {\n const parentElement = ref.current?.parentElement;\n\n parentElement?.addEventListener('transitionend', done, { once: true });\n };\n\n return (\n <CSSTransition\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n nodeRef={ref}\n addEndListener={addListTransitionEndListener}\n in={isVisible}\n // passed empty object so any classes aren't added\n classNames={transitionClassess}\n >\n {(status) => (\n <div\n ref={ref}\n data-index={index}\n className={cn(\n styles.element,\n colorsStyle[colors].element,\n { [colorsStyle[colors].active]: isActive },\n styles[status],\n )}\n style={{ height: sizeOfElement, width: sizeOfElement }}\n />\n )}\n </CSSTransition>\n );\n })}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}

package/esm/components/bullet/default.css CHANGED Viewed

@@ -6,9 +6,9 @@
     --page-indicator-color: var(--color-light-neutral-translucent-300);
     --page-indicator-active-color: var(--color-light-neutral-translucent-1300);
 }
-.page-indicator__element_e3ryn {
+.page-indicator__element_p30ls {
     background: var(--page-indicator-color);
 }
-.page-indicator__element_e3ryn.page-indicator__active_e3ryn {
+.page-indicator__element_p30ls.page-indicator__active_p30ls {
         background: var(--page-indicator-active-color);
     }

package/esm/components/bullet/default.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './default.css';
-var defaultColors = {"element":"page-indicator__element_e3ryn","active":"page-indicator__active_e3ryn"};
+var defaultColors = {"element":"page-indicator__element_p30ls","active":"page-indicator__active_p30ls"};
 export { defaultColors as default };
 //# sourceMappingURL=default.module.css.js.map