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/modern/components/runner/index.css CHANGED Viewed

@@ -1,7 +1,10 @@
 :root {
     --page-indicator-animation-duration: 0.2s;
 }
-.page-indicator__element_qlc1d {
+.page-indicator__element_1nev8 {
     transition: transform var(--page-indicator-animation-duration) linear;
     will-change: transition;
 }
+.page-indicator__pageIndicator_1nev8 {
+    width: 100%;
+}

package/modern/components/runner/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"element":"page-indicator__element_qlc1d"};
+const styles = {"element":"page-indicator__element_1nev8","pageIndicator":"page-indicator__pageIndicator_1nev8"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/runner/index.module.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.module.css.js","sources":["../../src/components/runner/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.element {\n transition: transform var(--page-indicator-animation-duration) linear;\n will-change: transition;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,SAAS,CAAC,+BAA+B,CAAC;;;;"}
1	+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/runner/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.element {\n transition: transform var(--page-indicator-animation-duration) linear;\n will-change: transition;\n}\n\n.pageIndicator {\n width: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,SAAS,CAAC,+BAA+B,CAAC,eAAe,CAAC,qCAAqC,CAAC;;;;"}

package/modern/components/runner/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__pageIndicator_1hqt5 {
+.page-indicator__pageIndicator_7wz43 {
     background: var(--page-indicator-color-inverted);
 }
-.page-indicator__element_1hqt5 {
+.page-indicator__element_7wz43 {
     background: var(--page-indicator-active-color-inverted);
 }

package/modern/components/runner/inverted.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './inverted.css';
-const invertedColors = {"pageIndicator":"page-indicator__pageIndicator_1hqt5","element":"page-indicator__element_1hqt5"};
+const invertedColors = {"pageIndicator":"page-indicator__pageIndicator_7wz43","element":"page-indicator__element_7wz43"};
 export { invertedColors as default };
 //# sourceMappingURL=inverted.module.css.js.map

package/modern/components/runner/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__pageIndicator_43pau {
+.page-indicator__pageIndicator_3tgal {
     background: var(--page-indicator-color-static-inverted);
 }
-.page-indicator__element_43pau {
+.page-indicator__element_3tgal {
     background: var(--page-indicator-active-color-static-inverted);
 }

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

@@ -1,6 +1,6 @@
 import './static-inverted.css';
-const staticInvertedColors = {"pageIndicator":"page-indicator__pageIndicator_43pau","element":"page-indicator__element_43pau"};
+const staticInvertedColors = {"pageIndicator":"page-indicator__pageIndicator_3tgal","element":"page-indicator__element_3tgal"};
 export { staticInvertedColors as default };
 //# sourceMappingURL=static-inverted.module.css.js.map

package/modern/components/runner/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__pageIndicator_19jfy {
+.page-indicator__pageIndicator_b9y6s {
     background: var(--page-indicator-color-static);
 }
-.page-indicator__element_19jfy {
+.page-indicator__element_b9y6s {
     background: var(--page-indicator-active-color-static);
 }

package/modern/components/runner/static.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './static.css';
-const staticColors = {"pageIndicator":"page-indicator__pageIndicator_19jfy","element":"page-indicator__element_19jfy"};
+const staticColors = {"pageIndicator":"page-indicator__pageIndicator_b9y6s","element":"page-indicator__element_b9y6s"};
 export { staticColors as default };
 //# sourceMappingURL=static.module.css.js.map

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

@@ -12,7 +12,7 @@ const colorsStyle = {
     static: staticColors,
     'static-inverted': staticInvertedColors,
 };
-const PageIndicatorStep = ({ activeElement, elements: count = 10, size = 4, gap = 4, colors = 'default', }) => (React.createElement("ol", { className: styles.pageIndicator, style: { height: size, gap } }, Array.from({ length: count }, (_, index) => (React.createElement("li", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn(styles.element, colorsStyle[colors].element, {
+const PageIndicatorStep = ({ activeElement, elements: count = 10, size = 4, gap = 4, colors = 'default', className, }) => (React.createElement("div", { className: cn(styles.pageIndicator, className), style: { height: size, gap } }, Array.from({ length: count }, (_, index) => (React.createElement("div", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn(styles.element, colorsStyle[colors].element, {
         [colorsStyle[colors].active]: index === activeElement,
     }) })))));

package/modern/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":[],"mappings":";;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;MAEG,iBAAiB,GAAqC,CAAC,EAChE,aAAa,EACb,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,MAAM,GAAG,SAAS,~~GACrB~~,MACG,~~KAAI~~,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAA,~~EAC5D,~~KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,MACpC,~~KACI~~,~~CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,~~GAAG,EAAE,KAAK,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAC/C,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE;QACvD,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,KAAK,KAAK,aAAa;AACxD,KAAA,CAAC,EACJ,CAAA,CACL,CAAC,~~CACD~~;;;;"}
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":[],"mappings":";;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;MAEG,iBAAiB,GAAqC,CAAC,EAChE,aAAa,EACb,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,MAAM,GAAG,SAAS,EAClB,SAAS,GACZ,MACG,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAC5E,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,MACpC,6BACI,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAC/C,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE;QACvD,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,KAAK,KAAK,aAAa;AACxD,KAAA,CAAC,EACJ,CAAA,CACL,CAAC,CACA;;;;"}

package/modern/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/modern/components/step/default.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './default.css';
-const defaultColors = {"element":"page-indicator__element_1ea0d","active":"page-indicator__active_1ea0d"};
+const defaultColors = {"element":"page-indicator__element_nqwqn","active":"page-indicator__active_nqwqn"};
 export { defaultColors as default };
 //# sourceMappingURL=default.module.css.js.map

package/modern/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/modern/components/step/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"pageIndicator":"page-indicator__pageIndicator_1n6uh","element":"page-indicator__element_1n6uh"};
+const styles = {"pageIndicator":"page-indicator__pageIndicator_yfjk6","element":"page-indicator__element_yfjk6"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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,eAAe,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,eAAe,CAAC,eAAe,CAAC,qCAAqC,CAAC,SAAS,CAAC,+BAA+B,CAAC;;;;"}

package/modern/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/modern/components/step/inverted.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './inverted.css';
-const invertedColors = {"element":"page-indicator__element_1ebaj","active":"page-indicator__active_1ebaj"};
+const invertedColors = {"element":"page-indicator__element_7acin","active":"page-indicator__active_7acin"};
 export { invertedColors as default };
 //# sourceMappingURL=inverted.module.css.js.map

package/modern/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/modern/components/step/static-inverted.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './static-inverted.css';
-const staticInvertedColors = {"element":"page-indicator__element_16rgk","active":"page-indicator__active_16rgk"};
+const staticInvertedColors = {"element":"page-indicator__element_13iar","active":"page-indicator__active_13iar"};
 export { staticInvertedColors as default };
 //# sourceMappingURL=static-inverted.module.css.js.map

package/modern/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/modern/components/step/static.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './static.css';
-const staticColors = {"element":"page-indicator__element_1c81w","active":"page-indicator__active_1c81w"};
+const staticColors = {"element":"page-indicator__element_r31gi","active":"page-indicator__active_r31gi"};
 export { staticColors as default };
 //# sourceMappingURL=static.module.css.js.map

package/modern/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/moderncssm/components/bullet/Component.js CHANGED Viewed

@@ -15,11 +15,11 @@ const colorsStyle = {
     'static-inverted': staticInvertedColors,
 };
 const transitionClassess = {};
-const PageIndicatorBullet = ({ elements: count = 10, activeElement: activeElementIndex, size = 8, gap = 8, colors = 'default', }) => {
+const PageIndicatorBullet = ({ elements: count = 10, activeElement: activeElementIndex, size = 8, gap = 8, colors = 'default', className, }) => {
     const refs = useMemo(() => Array.from({ length: count }, () => createRef()), [count]);
     const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] = useMemo(() => calcParams(size, gap, activeElementIndex, count), [activeElementIndex, count, gap, size]);
-    return (React.createElement("div", { className: cn(styles.pageIndicator, styles.bullet), style: { height, width } },
-        React.createElement("ol", { className: styles.elementsList, style: { gap, transform: `translate(${offset}px)` } }, refs.map((ref, index) => {
+    return (React.createElement("div", { className: cn(styles.pageIndicator, styles.bullet, className), style: { height, width } },
+        React.createElement("div", { className: styles.elementsList, style: { gap, transform: `translate(${offset}px)` } }, refs.map((ref, index) => {
             const sizeOfElement = elementSize(index);
             const isActive = activeElementIndex === index;
             const isVisible = firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;
@@ -33,7 +33,7 @@ const PageIndicatorBullet = ({ elements: count = 10, activeElement: activeElemen
                 // eslint-disable-next-line react/no-array-index-key
                 key: index, nodeRef: ref, addEndListener: addListTransitionEndListener, in: isVisible,
                 // passed empty object so any classes aren't added
-                classNames: transitionClassess }, (status) => (React.createElement("li", { ref: ref, "data-index": index, className: cn(styles.element, colorsStyle[colors].element, { [colorsStyle[colors].active]: isActive }, styles[status]), style: { height: sizeOfElement, width: sizeOfElement } }))));
+                classNames: transitionClassess }, (status) => (React.createElement("div", { ref: ref, "data-index": index, className: cn(styles.element, colorsStyle[colors].element, { [colorsStyle[colors].active]: isActive }, styles[status]), style: { height: sizeOfElement, width: sizeOfElement } }))));
         }))));
 };

package/moderncssm/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,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEV,MAAM,kBAAkB,GAAG,EAAW;AAE/B,MAAM,mBAAmB,GAAiC,CAAC,EAC9D,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,aAAa,EAAE,kBAAkB,EACjC,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,MAAM,GAAG,SAAS,~~GACrB~~,KAAI;AACD,IAAA,MAAM,IAAI,GAAG,OAAO,CAChB,MAAM,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,SAAS,~~EAAiB~~,CAAC,~~EACrE~~,CAAC,KAAK,CAAC,CACV;AACD,IAAA,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,wBAAwB,EAAE,uBAAuB,CAAC,GACzF,OAAO,CACH,MAAM,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,EACtD,CAAC,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CACzC;IAEL,QACI,~~6BAAK~~,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,~~EAAE~~,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAA;~~QAC7E~~,KACI,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,CAAa,UAAA,EAAA,MAAM,CAAK,GAAA,CAAA,EAAE,EAElD,EAAA,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;AACrB,YAAA,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC;AACxC,YAAA,MAAM,QAAQ,GAAG,kBAAkB,KAAK,KAAK;YAC7C,MAAM,SAAS,GACX,wBAAwB,IAAI,KAAK,IAAI,KAAK,IAAI,uBAAuB;AACzE,YAAA,MAAM,4BAA4B,GAAG,CAAC,IAAgB,KAAI;AACtD,gBAAA,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,EAAE,aAAa;AAEhD,gBAAA,aAAa,EAAE,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,CAAC,MAAM,MACJ,KAAA,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,EACI,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,KAAK,EACjB,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,OAAO,EACd,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,EAC3B,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,QAAQ,EAAE,EAC1C,MAAM,CAAC,MAAM,CAAC,CACjB,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,CACxD,CACL,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":";;;;;;;;;;AAcA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEV,MAAM,kBAAkB,GAAG,EAAW;AAE/B,MAAM,mBAAmB,GAAiC,CAAC,EAC9D,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,aAAa,EAAE,kBAAkB,EACjC,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,MAAM,GAAG,SAAS,EAClB,SAAS,GACZ,KAAI;AACD,IAAA,MAAM,IAAI,GAAG,OAAO,CAChB,MAAM,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,SAAS,EAAkB,CAAC,EACtE,CAAC,KAAK,CAAC,CACV;AACD,IAAA,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,wBAAwB,EAAE,uBAAuB,CAAC,GACzF,OAAO,CACH,MAAM,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,EACtD,CAAC,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CACzC;IAEL,QACI,6BACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC7D,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAA;QAExB,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,CAAa,UAAA,EAAA,MAAM,CAAK,GAAA,CAAA,EAAE,EAElD,EAAA,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;AACrB,YAAA,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC;AACxC,YAAA,MAAM,QAAQ,GAAG,kBAAkB,KAAK,KAAK;YAC7C,MAAM,SAAS,GACX,wBAAwB,IAAI,KAAK,IAAI,KAAK,IAAI,uBAAuB;AACzE,YAAA,MAAM,4BAA4B,GAAG,CAAC,IAAgB,KAAI;AACtD,gBAAA,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,EAAE,aAAa;AAEhD,gBAAA,aAAa,EAAE,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,CAAC,MAAM,MACJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,KAAK,EACjB,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,OAAO,EACd,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,EAC3B,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,QAAQ,EAAE,EAC1C,MAAM,CAAC,MAAM,CAAC,CACjB,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,CACxD,CACL,CACW;AAExB,SAAC,CAAC,CACA,CACJ;AAEd;;;;"}

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

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

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

@@ -15,7 +15,7 @@ const colorsStyle = {
 };
 const FULL_PROGRESS = 100;
 const PageIndicatorDynamic = (props) => {
-    const { size: height = 8, gap = 8, activeElementWidth = height * 7, elements: count = 10, activeElement: indexFromProps, onActiveElementChange, defaultActiveElement: defaultIndex = 0, active = true, duration: durationFromProps = 3000, cycle = false, colors = 'default', } = props;
+    const { size: height = 8, gap = 8, activeElementWidth = height * 7, elements: count = 10, activeElement: indexFromProps, onActiveElementChange, defaultActiveElement: defaultIndex = 0, active = true, duration: durationFromProps = 3000, cycle = false, colors = 'default', className, } = props;
     const [activeIndex, setActiveIndex] = useState(indexFromProps ?? defaultIndex);
     const [progress, setProgress] = useState(0);
     const inProgress = progress < FULL_PROGRESS;
@@ -53,7 +53,7 @@ const PageIndicatorDynamic = (props) => {
         setActiveIndex(nextActiveIndex);
         setProgress(0);
     }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);
-    return (React.createElement("ol", { className: styles.pageIndicator, style: { height, gap } }, Array.from({ length: count }, (_, index) => {
+    return (React.createElement("div", { className: cn(styles.pageIndicator, className), style: { height, gap } }, Array.from({ length: count }, (_, index) => {
         const isActive = index === activeIndex;
         const style = {
             width: isActive ? activeElementWidth : height,
@@ -62,7 +62,7 @@ const PageIndicatorDynamic = (props) => {
         const progressStyle = isActive
             ? { transform: `translateX(${progress - FULL_PROGRESS}%)` }
             : undefined;
-        return (React.createElement("li", { key: index, style: style, className: cn(styles.element, colorsStyle[colors].element, {
+        return (React.createElement("div", { key: index, style: style, className: cn(styles.element, colorsStyle[colors].element, {
                 [styles.active]: isActive,
                 [colorsStyle[colors].active]: isActive,
             }) },

package/moderncssm/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":[],"mappings":";;;;;;;;;AAmBA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEV,MAAM,aAAa,GAAG,GAAG;AAEZ,MAAA,oBAAoB,GAAwC,CAAC,KAAK,KAAI;IAC/E,MAAM,EACF,IAAI,EAAE,MAAM,GAAG,CAAC,EAChB,GAAG,GAAG,CAAC,EACP,kBAAkB,GAAG,MAAM,GAAG,CAAC,EAC/B,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,aAAa,EAAE,cAAc,EAC7B,qBAAqB,EACrB,oBAAoB,EAAE,YAAY,GAAG,CAAC,EACtC,MAAM,GAAG,IAAI,EACb,QAAQ,EAAE,iBAAiB,GAAG,IAAI,EAClC,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,SAAS,~~GACrB~~,GAAG,KAAK;AACT,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAC1C,cAAc,IAAI,YAAY,CACjC;IACD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC3C,IAAA,MAAM,UAAU,GAAG,QAAQ,GAAG,aAAa;IAC3C,MAAM,kBAAkB,GAAG,cAAc,CAAC,KAAK,EAAE,eAAe,CAAC;AACjE,IAAA,IAAI,QAAgB;IAEpB,IAAI,MAAM,IAAI,aAAa,CAAC,WAAW,CAAC,IAAI,UAAU,EAAE;AACpD,QAAA,QAAQ,GAAG,IAAI,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;;IAGlB,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,QAAQ,KAAK,EAAE,EAAE;AACjB,YAAA,OAAO,IAAI;;AAGf,QAAA,MAAM,QAAQ,GAAG,QAAQ,GAAG,aAAa;AACzC,QAAA,MAAM,KAAK,GAAG,WAAW,CACrB,MAAM,WAAW,CAAC,CAAC,YAAY,KAAK,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,EAAE,aAAa,CAAC,CAAC,EAC9E,QAAQ,CACX;AAED,QAAA,OAAO,MAAM,aAAa,CAAC,KAAK,CAAC;AACrC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,MAAM,GAAG,WAAW,KAAK,KAAK,GAAG,CAAC;AAExC,QAAA,IAAI,UAAU,IAAI,UAAU,CAAC,WAAW,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,EAAE;YAC7D;;AAGJ,QAAA,MAAM,eAAe,GAAG,MAAM,IAAI,KAAK,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC;AAE7D,QAAA,qBAAqB,GAAG,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,QACI,~~KAAA~~,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,~~EAAI~~,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,~~EACtD~~,~~EAAA,~~KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;AACxC,QAAA,MAAM,QAAQ,GAAG,KAAK,KAAK,WAAW;AACtC,QAAA,MAAM,KAAK,GAAwB;YAC/B,KAAK,EAAE,QAAQ,GAAG,kBAAkB,GAAG,MAAM;YAC7C,YAAY,EAAE,MAAM,GAAG,CAAC;SAC3B;QACD,MAAM,aAAa,GAAoC;cACjD,EAAE,SAAS,EAAE,cAAc,QAAQ,GAAG,aAAa,CAAA,EAAA,CAAI;cACvD,SAAS;QAEf,QACI,KACI,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,EAAA,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE;AACvD,gBAAA,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ;gBACzB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,QAAQ;aACzC,CAAC,EAAA;YAEF,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,EAAE,CAAC,MAAM,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":[],"mappings":"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"}

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

@@ -5,8 +5,6 @@
 }
 .pageIndicator {
-    margin: 0;
-    padding: 0;
     display: flex;
 }

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

@@ -12,7 +12,7 @@ const colorsStyle = {
     static: staticColors,
     'static-inverted': staticInvertedColors,
 };
-const PageIndicatorRunner = ({ activeElement, elements: count = 10, size = 4, colors = 'default', }) => (React.createElement("div", { className: cn(styles.pageIndicator, colorsStyle[colors].pageIndicator), style: { height: size, borderRadius: size / 2 } },
+const PageIndicatorRunner = ({ activeElement, elements: count = 10, size = 4, colors = 'default', className, }) => (React.createElement("div", { className: cn(styles.pageIndicator, colorsStyle[colors].pageIndicator, className), style: { height: size, borderRadius: size / 2 } },
     React.createElement("div", { style: {
             transform: `translate(${activeElement * 100}%, 0)`,
             height: size,

package/moderncssm/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":[],"mappings":";;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEG,MAAA,mBAAmB,GAAuC,CAAC,EACpE,aAAa,EACb,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,IAAI,GAAG,CAAC,EACR,MAAM,GAAG,SAAS,~~GACrB~~,MACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,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,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE;AACH,YAAA,SAAS,EAAE,CAAA,UAAA,EAAa,aAAa,GAAG,GAAG,CAAO,KAAA,CAAA;AAClD,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,KAAK,EAAE,CAAA,EAAG,GAAG,GAAG,KAAK,CAAG,CAAA,CAAA;YACxB,YAAY,EAAE,IAAI,GAAG,CAAC;AACzB,SAAA,EACD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC5D,CAAA,CACA;;;;"}
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":[],"mappings":";;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEG,MAAA,mBAAmB,GAAuC,CAAC,EACpE,aAAa,EACb,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,IAAI,GAAG,CAAC,EACR,MAAM,GAAG,SAAS,EAClB,SAAS,GACZ,MACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,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,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE;AACH,YAAA,SAAS,EAAE,CAAA,UAAA,EAAa,aAAa,GAAG,GAAG,CAAO,KAAA,CAAA;AAClD,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,KAAK,EAAE,CAAA,EAAG,GAAG,GAAG,KAAK,CAAG,CAAA,CAAA;YACxB,YAAY,EAAE,IAAI,GAAG,CAAC;AACzB,SAAA,EACD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC5D,CAAA,CACA;;;;"}

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

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

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

@@ -12,7 +12,7 @@ const colorsStyle = {
     static: staticColors,
     'static-inverted': staticInvertedColors,
 };
-const PageIndicatorStep = ({ activeElement, elements: count = 10, size = 4, gap = 4, colors = 'default', }) => (React.createElement("ol", { className: styles.pageIndicator, style: { height: size, gap } }, Array.from({ length: count }, (_, index) => (React.createElement("li", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn(styles.element, colorsStyle[colors].element, {
+const PageIndicatorStep = ({ activeElement, elements: count = 10, size = 4, gap = 4, colors = 'default', className, }) => (React.createElement("div", { className: cn(styles.pageIndicator, className), style: { height: size, gap } }, Array.from({ length: count }, (_, index) => (React.createElement("div", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn(styles.element, colorsStyle[colors].element, {
         [colorsStyle[colors].active]: index === activeElement,
     }) })))));

package/moderncssm/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":[],"mappings":";;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;MAEG,iBAAiB,GAAqC,CAAC,EAChE,aAAa,EACb,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,MAAM,GAAG,SAAS,~~GACrB~~,MACG,~~KAAI~~,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAA,~~EAC5D,~~KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,MACpC,~~KACI~~,~~CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,~~GAAG,EAAE,KAAK,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAC/C,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE;QACvD,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,KAAK,KAAK,aAAa;AACxD,KAAA,CAAC,EACJ,CAAA,CACL,CAAC,~~CACD~~;;;;"}
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":[],"mappings":";;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;MAEG,iBAAiB,GAAqC,CAAC,EAChE,aAAa,EACb,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,MAAM,GAAG,SAAS,EAClB,SAAS,GACZ,MACG,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAC5E,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,MACpC,6BACI,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAC/C,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE;QACvD,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,KAAK,KAAK,aAAa;AACxD,KAAA,CAAC,EACJ,CAAA,CACL,CAAC,CACA;;;;"}

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

@@ -6,9 +6,8 @@
 }
 .pageIndicator {
-    margin: 0;
-    padding: 0;
     display: flex;
+    width: 100%;
 }
 .element {