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

package/moderncssm/types.d.ts

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-page-indicator",
-    "version": "3.0.3",
+    "version": "3.0.4-alfasans",
     "description": "PageIndicator component",
     "keywords": [],
     "license": "MIT",
@@ -9,8 +9,11 @@
     ],
     "main": "index.js",
     "module": "./esm/index.js",
+    "scripts": {
+        "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
+    },
     "dependencies": {
-        "@alfalab/core-components-shared": "^2.1.1",
+        "@alfalab/core-components-shared": "2.2.0-alfasans",
         "@types/react-transition-group": "^4.4.12",
         "classnames": "^2.5.1",
         "react-transition-group": "^4.4.5",
@@ -24,6 +27,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.0.2",
-    "varsVersion": "11.0.2"
+    "themesVersion": "15.1.0-alfasans",
+    "varsVersion": "11.0.2-alfasans"
 }

package/src/components/bullet/Component.tsx

@@ -27,9 +27,10 @@ export const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({
     size = 8,
     gap = 8,
     colors = 'default',
+    className,
 }) => {
     const refs = useMemo(
-        () => Array.from({ length: count }, () => createRef<HTMLLIElement>()),
+        () => Array.from({ length: count }, () => createRef<HTMLDivElement>()),
         [count],
     );
     const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] =
@@ -39,8 +40,11 @@ export const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({
         );
 
     return (
-        <div className={cn(styles.pageIndicator, styles.bullet)} style={{ height, width }}>
-            <ol
+        <div
+            className={cn(styles.pageIndicator, styles.bullet, className)}
+            style={{ height, width }}
+        >
+            <div
                 className={styles.elementsList}
                 style={{ gap, transform: `translate(${offset}px)` }}
             >
@@ -66,7 +70,7 @@ export const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({
                             classNames={transitionClassess}
                         >
                             {(status) => (
-                                <li
+                                <div
                                     ref={ref}
                                     data-index={index}
                                     className={cn(
@@ -81,7 +85,7 @@ export const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({
                         </CSSTransition>
                     );
                 })}
-            </ol>
+            </div>
         </div>
     );
 };

package/src/components/bullet/index.module.css

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

package/src/components/dynamic/Component.tsx

@@ -39,6 +39,7 @@ export const PageIndicatorDynamic: React.FC<PageIndicatorDynamicProps> = (props)
         duration: durationFromProps = 3000,
         cycle = false,
         colors = 'default',
+        className,
     } = props;
     const [activeIndex, setActiveIndex] = useState<number | undefined>(
         indexFromProps ?? defaultIndex,
@@ -94,7 +95,7 @@ export const PageIndicatorDynamic: React.FC<PageIndicatorDynamicProps> = (props)
     }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);
 
     return (
-        <ol className={styles.pageIndicator} style={{ height, gap }}>
+        <div className={cn(styles.pageIndicator, className)} style={{ height, gap }}>
             {Array.from({ length: count }, (_, index) => {
                 const isActive = index === activeIndex;
                 const style: React.CSSProperties = {
@@ -106,7 +107,7 @@ export const PageIndicatorDynamic: React.FC<PageIndicatorDynamicProps> = (props)
                     : undefined;
 
                 return (
-                    <li
+                    <div
                         key={index}
                         style={style}
                         className={cn(styles.element, colorsStyle[colors].element, {
@@ -118,9 +119,9 @@ export const PageIndicatorDynamic: React.FC<PageIndicatorDynamicProps> = (props)
                             style={progressStyle}
                             className={cn(styles.progress, colorsStyle[colors].progress)}
                         />
-                    </li>
+                    </div>
                 );
             })}
-        </ol>
+        </div>
     );
 };

package/src/components/dynamic/index.module.css

@@ -1,8 +1,6 @@
 @import '../../vars.css';
 
 .pageIndicator {
-    margin: 0;
-    padding: 0;
     display: flex;
 }
 

package/src/components/runner/Component.tsx

@@ -21,9 +21,10 @@ export const PageIndicatorRunner: React.FC<PageIndicatorRunnerProps> = ({
     elements: count = 10,
     size = 4,
     colors = 'default',
+    className,
 }) => (
     <div
-        className={cn(styles.pageIndicator, colorsStyle[colors].pageIndicator)}
+        className={cn(styles.pageIndicator, colorsStyle[colors].pageIndicator, className)}
         style={{ height: size, borderRadius: size / 2 }}
     >
         <div

package/src/components/runner/index.module.css

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

package/src/components/step/Component.tsx

@@ -22,10 +22,11 @@ export const PageIndicatorStep: React.FC<PageIndicatorStepProps> = ({
     size = 4,
     gap = 4,
     colors = 'default',
+    className,
 }) => (
-    <ol className={styles.pageIndicator} style={{ height: size, gap }}>
+    <div className={cn(styles.pageIndicator, className)} style={{ height: size, gap }}>
         {Array.from({ length: count }, (_, index) => (
-            <li
+            <div
                 key={index}
                 style={{ height: size, borderRadius: size / 2 }}
                 className={cn(styles.element, colorsStyle[colors].element, {
@@ -33,5 +34,5 @@ export const PageIndicatorStep: React.FC<PageIndicatorStepProps> = ({
                 })}
             />
         ))}
-    </ol>
+    </div>
 );

package/src/components/step/index.module.css

@@ -1,9 +1,8 @@
 @import '../../vars.css';
 
 .pageIndicator {
-    margin: 0;
-    padding: 0;
     display: flex;
+    width: 100%;
 }
 
 .element {

package/src/types.ts

@@ -1,18 +1,25 @@
-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
@@ -54,16 +61,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
@@ -81,16 +79,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
@@ -108,16 +97,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

package/types.d.ts

@@ -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 {};