@salutejs/plasma-new-hope 0.322.0-canary.1944.14660891986.0 → 0.322.0-canary.1947.14664713311.0

package/styled-components/es/components/PaginationDots/PaginationDots.template-doc.mdx

@@ -0,0 +1,95 @@
+---
+id: segment
+title: Segment
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# PaginationDots
+Элементы переключения. Oтображают возможность перемещения между небольшим количеством однородных элементов контента.
+
+## PaginationDots
+
+<Description name="PaginationDots" />
+<PropsTable name="PaginationDots"  exclude={['css']} />
+
+```tsx live
+import React from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = Array(8).fill(0);
+
+    const SegmentTemplate = () => {
+        const {selectedSegmentItems} = useSegment();
+
+        return (
+            <>
+                <div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
+                <br />
+                <SegmentGroup hasBackground pilled clip={false}>
+                    {items.map((_, i) => (
+                        <SegmentItem
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            view='default'
+                            pilled
+                        />
+                    ))}
+                </SegmentGroup>
+            </>
+        )
+    }
+
+    return (
+        <div style={{ display: "block" }} >
+            <SegmentProvider defaultSelected={['label_1']}>
+                <SegmentTemplate/>
+            </SegmentProvider>
+        </div>
+    );
+}
+```
+
+### Вертикальное отображение
+
+Для смены ориентации передаем `orientation: 'vertical'`
+
+```tsx live
+import React from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = Array(8).fill(0);
+
+    const SegmentTemplate = () => {
+        const {selectedSegmentItems} = useSegment();
+
+        return (
+            <>
+                <div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
+                <br />
+                <SegmentGroup hasBackground clip={false}>
+                    {items.map((_, i) => (
+                        <SegmentItem
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            view='secondary'
+                        />
+                    ))}
+                </SegmentGroup>
+            </>
+        )
+    }
+
+    return (
+        <div style={{ display: "block" }} >
+            <SegmentProvider defaultSelected={['label_1']}>
+                <SegmentTemplate/>
+            </SegmentProvider>
+        </div>
+    );
+}
+```

package/styled-components/es/components/PaginationDots/PaginationDots.tokens.js

@@ -0,0 +1,24 @@
+export var classes = {
+  active: 'active',
+  prevActive: 'prevActive',
+  centered: 'centered',
+  vertical: 'vertical',
+  clickable: 'clickable',
+  skipAnimation: 'skipAnimation'
+};
+export var tokens = {
+  paginationWidth: '--plasma-pagination-width',
+  dotPadding: '--plasma-pagination-dots-dot-padding',
+  verticalDotPadding: '--plasma-pagination-dots-vertical-dot-padding',
+  dotSizeM: '--plasma-pagination-dots-dot-size-m',
+  dotSizeS: '--plasma-pagination-dots-dot-size-s',
+  dotSizeXS: '--plasma-pagination-dots-dot-size-xs',
+  dotBorderRadius: '--plasma-pagination-dots-dot-border-radius',
+  lineWidth: '--plasma-pagination-dots-line-width',
+  lineHeight: '--plasma-pagination-dots-line-height',
+  lineBorderRadius: '--plasma-pagination-dots-line-border-radius',
+  verticalLineWidth: '--plasma-pagination-dots-vertical-line-width',
+  verticalLineHeight: '--plasma-pagination-dots-vertical-line-height',
+  itemBackground: '--plasma-pagination-dots-item-background',
+  activeItemBackground: '--plasma-pagination-dots-active-item-background'
+};

package/styled-components/es/components/PaginationDots/PaginationDots.types.js

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/PaginationDots/hooks/useAnimation.js

@@ -0,0 +1,102 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useLayoutEffect, useRef, useState } from 'react';
+import { getVisualOffsets } from "../PaginationDots";
+export var useAnimation = function useAnimation(_ref) {
+  var isVertical = _ref.isVertical,
+    onAnimationEnd = _ref.onAnimationEnd,
+    activeElementRef = _ref.activeElementRef,
+    animatedDotsWrapperRef = _ref.animatedDotsWrapperRef,
+    canScrollForward = _ref.canScrollForward,
+    canScrollBackward = _ref.canScrollBackward,
+    dots = _ref.dots,
+    prevDots = _ref.prevDots,
+    innerViewIndex = _ref.innerViewIndex;
+  var isAnimationRunningRef = useRef(false);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    skipAnimation = _useState2[0],
+    setSkipAnimation = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasForwardAnimation = _useState4[0],
+    setHasForwardAnimation = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasBackwardAnimation = _useState6[0],
+    setHasBackwardAnimation = _useState6[1];
+  var hasAnimation = hasForwardAnimation || hasBackwardAnimation;
+  var handleAnimationEnd = function handleAnimationEnd() {
+    if (isAnimationRunningRef.current) {
+      isAnimationRunningRef.current = false;
+      onAnimationEnd();
+    }
+    setHasForwardAnimation(false);
+    setHasBackwardAnimation(false);
+  };
+  useLayoutEffect(function () {
+    var _activeElementRef$cur, _activeElementRef$cur2;
+    var animatedEl = animatedDotsWrapperRef.current;
+    if (!animatedEl || !hasForwardAnimation && !hasBackwardAnimation) {
+      return;
+    }
+    var before = getVisualOffsets(prevDots, innerViewIndex);
+    var after = getVisualOffsets(dots, innerViewIndex);
+    var diff = before - after;
+    var _ref2 = activeElementRef.current,
+      activeWidth = _ref2.offsetWidth,
+      activeHeight = _ref2.offsetHeight;
+    var _ref3 = (hasBackwardAnimation ? (_activeElementRef$cur = activeElementRef.current) === null || _activeElementRef$cur === void 0 ? void 0 : _activeElementRef$cur.previousSibling : (_activeElementRef$cur2 = activeElementRef.current) === null || _activeElementRef$cur2 === void 0 ? void 0 : _activeElementRef$cur2.nextSibling) || {},
+      width = _ref3.offsetWidth,
+      height = _ref3.offsetHeight;
+    animatedEl.style.transition = 'none';
+    if (hasForwardAnimation) {
+      if (canScrollForward) {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(height, "px)") : "translateX(".concat(width, "px)");
+      } else {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(height - activeHeight, "px)") : "translateX(".concat(width - activeWidth, "px)");
+      }
+      requestAnimationFrame(function () {
+        animatedEl.style.transition = 'transform 0.3s linear';
+        if (canScrollForward) {
+          animatedEl.style.transform = isVertical ? "translateY(".concat(-diff, "px)") : "translateX(".concat(-diff, "px)");
+        } else {
+          animatedEl.style.transform = isVertical ? "translateY(-".concat(activeHeight, "px)") : "translateX(-".concat(activeWidth, "px)");
+        }
+        isAnimationRunningRef.current = true;
+      });
+    }
+    if (hasBackwardAnimation) {
+      if (canScrollBackward) {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(-height, "px)") : "translateX(".concat(-width, "px)");
+      } else {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(-height + activeHeight, "px)") : "translateX(".concat(-width + activeWidth, "px)");
+      }
+      requestAnimationFrame(function () {
+        if (animatedEl) {
+          animatedEl.style.transition = 'transform 0.3s linear';
+          if (canScrollBackward) {
+            animatedEl.style.transform = isVertical ? "translateY(".concat(-diff, "px)") : "translateX(".concat(-diff, "px)");
+          } else {
+            animatedEl.style.transform = isVertical ? "translateY(".concat(activeHeight, "px)") : "translateX(".concat(activeWidth, "px)");
+          }
+          isAnimationRunningRef.current = true;
+        }
+      });
+    }
+  }, [isVertical, innerViewIndex, hasForwardAnimation, hasBackwardAnimation]);
+  return {
+    skipAnimation: skipAnimation,
+    hasAnimation: hasAnimation,
+    hasBackwardAnimation: hasBackwardAnimation,
+    hasForwardAnimation: hasForwardAnimation,
+    setSkipAnimation: setSkipAnimation,
+    setHasForwardAnimation: setHasForwardAnimation,
+    setHasBackwardAnimation: setHasBackwardAnimation,
+    handleAnimationEnd: handleAnimationEnd
+  };
+};

package/styled-components/es/components/PaginationDots/index.js

@@ -0,0 +1,2 @@
+export { paginationDotsRoot, paginationDotsConfig } from "./PaginationDots";
+export { tokens as paginationDotsTokens, classes as paginationDotsClasses } from "./PaginationDots.tokens";

package/styled-components/es/components/PaginationDots/utils/getDotSize.js

@@ -0,0 +1,40 @@
+export var getDotSize = function getDotSize(size, index, offset, count, visibleCount) {
+  var innerViewValue = index - offset;
+  var toEnd = count - (visibleCount + offset);
+  var canScrollBackward = Boolean(offset);
+  var canScrollForward = Boolean(toEnd);
+  var isFirst = innerViewValue === 0;
+  var isSecond = innerViewValue === 1;
+  var isSecondLast = innerViewValue === visibleCount - 2;
+  var isLast = innerViewValue === visibleCount - 1;
+  if (size === 's') {
+    if (isFirst && canScrollBackward || isLast && canScrollForward) {
+      return 'xs';
+    }
+    return 's';
+  }
+  if (canScrollBackward) {
+    // (m) m m s xs
+    // m (m) m s xs
+    // m m (m) s xs
+    // s m (m) s xs
+    // xs s m (m) s
+    // xs s m (m) s
+    // xs s m m (m)
+    if (isFirst) {
+      return offset === 1 ? 's' : 'xs';
+    }
+    if (isSecond && offset > 1) {
+      return 's';
+    }
+  }
+  if (canScrollForward) {
+    if (isLast) {
+      return toEnd === 1 ? 's' : 'xs';
+    }
+    if (isSecondLast && toEnd > 1) {
+      return 's';
+    }
+  }
+  return 'm';
+};

package/styled-components/es/components/PaginationDots/variations/_size/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/PaginationDots/variations/_size/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/es/components/PaginationDots/variations/_view/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/PaginationDots/variations/_view/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/es/examples/plasma_b2c/components/PaginationDots/PaginationDots.config.js

@@ -0,0 +1,17 @@
+import { css } from 'styled-components';
+import { paginationDotsTokens as tokens } from "../../../../components/PaginationDots";
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":#0808081f;", ":#080808;"], tokens.itemBackground, tokens.activeItemBackground)
+    },
+    size: {
+      s: /*#__PURE__*/css(["", ":0 0.375rem;", ":0.375rem 0;", ":0.75rem;", ":0.5rem;", ":0.375rem;", ":50%;", ":2rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":2rem;"], tokens.dotPadding, tokens.verticalDotPadding, tokens.dotSizeM, tokens.dotSizeS, tokens.dotSizeXS, tokens.dotBorderRadius, tokens.lineWidth, tokens.lineHeight, tokens.lineBorderRadius, tokens.verticalLineWidth, tokens.verticalLineHeight),
+      m: /*#__PURE__*/css(["", ":0 0.375rem;", ":0.375rem 0;", ":50%;", ":0.75rem;", ":0.5rem;", ":0.375rem;", ":3rem;", ":0.75rem;", ":0.375rem;", ":0.75rem;", ":3rem;"], tokens.dotPadding, tokens.verticalDotPadding, tokens.dotBorderRadius, tokens.dotSizeM, tokens.dotSizeS, tokens.dotSizeXS, tokens.lineWidth, tokens.lineHeight, tokens.lineBorderRadius, tokens.verticalLineWidth, tokens.verticalLineHeight)
+    }
+  }
+};

package/styled-components/es/examples/plasma_b2c/components/PaginationDots/PaginationDots.js

@@ -0,0 +1,5 @@
+import { paginationDotsConfig } from "../../../../components/PaginationDots";
+import { component, mergeConfig } from "../../../../engines";
+import { config } from "./PaginationDots.config";
+var mergedConfig = /*#__PURE__*/mergeConfig(paginationDotsConfig, config);
+export var PaginationDots = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_b2c/components/PaginationDots/PaginationDots.stories.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { PaginationDots } from './PaginationDots';
+import { config } from './PaginationDots.config';
+
+const { views, sizes } = getConfigVariations(config);
+const orientations: Array<string> = ['vertical', 'horizontal'];
+
+const meta: Meta<typeof PaginationDots> = {
+    title: 'b2c/Data Entry/PaginationDots',
+    decorators: [WithTheme],
+    component: PaginationDots,
+    args: {
+        view: 'default',
+        size: 'm',
+    },
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        dotType: {
+            options: ['dot', 'line'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        count: {
+            control: {
+                type: 'number',
+            },
+        },
+        visibleCount: {
+            control: {
+                type: 'number',
+            },
+        },
+        ...disableProps(['value', 'focused', 'pin']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof PaginationDots> & {
+    currentDot: string;
+};
+
+const StoryDefault = ({ dotType, ...rest }: StoryPropsDefault) => {
+    const [value, setValue] = useState(0);
+
+    return (
+        <div style={{ width: '400px', height: '400px' }}>
+            <PaginationDots value={value} activeElementView={dotType} onChange={setValue} {...rest} />
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        size: 'm',
+        dotType: 'dot',
+        orientation: 'horizontal',
+        centered: false,
+        count: 9,
+        visibleCount: 9,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

package/styled-components/es/examples/plasma_web/components/PaginationDots/PaginationDots.config.js

@@ -0,0 +1,18 @@
+import { css } from 'styled-components';
+import { paginationDotsTokens as tokens } from "../../../../components/PaginationDots";
+export var config = {
+  defaults: {
+    view: 'default',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":'#0808081f',", ":'#080808',"], tokens.itemBackground, tokens.activeItemBackground)
+    },
+    size: {
+      s: /*#__PURE__*/css(["", ":'0 0.375rem',", ":'0.375rem 0',", ":'0.375rem',", ":'0.5rem',", ":'0.75rem',", ":'50%',", ":'2rem',", ":'0.5rem',", ":'0.375rem',", ":'0.5rem',", ":'2rem',"], tokens.dotPadding, tokens.verticalDotPadding, tokens.dotSizeM, tokens.dotSizeS, tokens.dotSizeXS, tokens.dotBorderRadius, tokens.lineWidth, tokens.lineHeight, tokens.lineBorderRadius, tokens.verticalLineWidth, tokens.verticalLineHeight),
+      m: /*#__PURE__*/css(["", ":'0 0.375rem',", ":'0.375rem 0',", ":'50%',", ":'0.375rem',", ":'0.5rem',", ":'0.75rem',", ":'3rem',", ":'0.75rem',", ":'0.375rem',", ":'0.75rem',", ":'3rem',"], tokens.dotPadding, tokens.verticalDotPadding, tokens.dotBorderRadius, tokens.dotSizeM, tokens.dotSizeS, tokens.dotSizeXS, tokens.lineWidth, tokens.lineHeight, tokens.lineBorderRadius, tokens.verticalLineWidth, tokens.verticalLineHeight)
+    }
+  }
+};

package/styled-components/es/examples/plasma_web/components/PaginationDots/PaginationDots.js

@@ -0,0 +1,5 @@
+import { paginationDotsConfig } from "../../../../components/PaginationDots";
+import { component, mergeConfig } from "../../../../engines";
+import { config } from "./PaginationDots.config";
+var mergedConfig = /*#__PURE__*/mergeConfig(paginationDotsConfig, config);
+export var PaginationDots = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_web/components/PaginationDots/PaginationDots.stories.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { PaginationDots } from './PaginationDots';
+import { config } from './PaginationDots.config';
+
+const { views, sizes } = getConfigVariations(config);
+const orientations: Array<string> = ['vertical', 'horizontal'];
+
+const meta: Meta<typeof PaginationDots> = {
+    title: 'web/Data Entry/PaginationDots',
+    decorators: [WithTheme],
+    component: PaginationDots,
+    args: {
+        view: 'default',
+        size: 'm',
+    },
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inner-radio',
+            },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        activeDotCentered: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        ...disableProps(['value', 'focused', 'pin']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof PaginationDots> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+
+const StoryDefault = ({ size, ...rest }: StoryPropsDefault) => {
+    return <PaginationDots size={size} value={0} count={9} {...rest} />;
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        orientation: 'horizontal',
+        stretched: true,
+        currentDot: 'first',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

package/types/components/PaginationDots/PaginationDots.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { RootProps } from '../../engines';
+import { PaginationDotsProps } from './PaginationDots.types';
+declare const sizesMap: {
+    readonly xs: 18;
+    readonly s: 20;
+    readonly m: 24;
+};
+export declare type DotSize = keyof typeof sizesMap;
+export declare const getVisualOffsets: (dots: DotSize[], innerViewValue: number) => number;
+export declare const paginationDotsRoot: (Root: RootProps<HTMLDivElement, PaginationDotsProps>) => React.ForwardRefExoticComponent<PaginationDotsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const paginationDotsConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, PaginationDotsProps>) => React.ForwardRefExoticComponent<PaginationDotsProps & React.RefAttributes<HTMLDivElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+        size: string;
+    };
+};
+export {};
+//# sourceMappingURL=PaginationDots.d.ts.map

package/types/components/PaginationDots/PaginationDots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDots.d.ts","sourceRoot":"","sources":["../../../src/components/PaginationDots/PaginationDots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAK1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAM7D,QAAA,MAAM,QAAQ;;;;CAIJ,CAAC;AAEX,oBAAY,OAAO,GAAG,MAAM,OAAO,QAAQ,CAAC;AAgB5C,eAAO,MAAM,gBAAgB,SAAU,OAAO,EAAE,kBAAkB,MAAM,WAKvE,CAAC;AA2BF,eAAO,MAAM,kBAAkB,SAAU,UAAU,cAAc,EAAE,mBAAmB,CAAC,+FA+RlF,CAAC;AAEN,eAAO,MAAM,oBAAoB;;;mBAjSQ,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;;;;;;;;;;;CAkTtF,CAAC"}

package/types/components/PaginationDots/PaginationDots.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AnimatedDotsWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Dot: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Line: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const base: import("@linaria/core").LinariaClassName;
+//# sourceMappingURL=PaginationDots.styles.d.ts.map

package/types/components/PaginationDots/PaginationDots.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDots.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PaginationDots/PaginationDots.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,OAAO,qKAKnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,qKAI/B,CAAC;AAEF,eAAO,MAAM,GAAG,qKAuLf,CAAC;AAEF,eAAO,MAAM,IAAI;;EAkFhB,CAAC;AAEF,eAAO,MAAM,IAAI,0CA8BhB,CAAC"}

package/types/components/PaginationDots/PaginationDots.tokens.d.ts

@@ -0,0 +1,25 @@
+export declare const classes: {
+    active: string;
+    prevActive: string;
+    centered: string;
+    vertical: string;
+    clickable: string;
+    skipAnimation: string;
+};
+export declare const tokens: {
+    paginationWidth: string;
+    dotPadding: string;
+    verticalDotPadding: string;
+    dotSizeM: string;
+    dotSizeS: string;
+    dotSizeXS: string;
+    dotBorderRadius: string;
+    lineWidth: string;
+    lineHeight: string;
+    lineBorderRadius: string;
+    verticalLineWidth: string;
+    verticalLineHeight: string;
+    itemBackground: string;
+    activeItemBackground: string;
+};
+//# sourceMappingURL=PaginationDots.tokens.d.ts.map

package/types/components/PaginationDots/PaginationDots.tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDots.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/PaginationDots/PaginationDots.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAoBlB,CAAC"}

package/types/components/PaginationDots/PaginationDots.types.d.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributesWithoutOnChange } from '../../engines/types';
+interface CustomPaginationDots {
+    /**
+     * Размер контрола.
+     */
+    size?: string;
+    /**
+     * Вид контрола.
+     * @default default
+     */
+    view?: string;
+    /**
+     * Отображение активного элемента
+     * @default 'dot'
+     */
+    activeElementView?: 'dot' | 'line';
+    /**
+     * Ориентация элементов
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Центрирует элемент по горизонтали на всю ширину контейнера
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Выбранная страница
+     */
+    value?: number;
+    /**
+     * Количество страниц
+     */
+    count?: number;
+    /**
+     * Максимальное количество видимых точек, для условий count > visibleCount
+     */
+    visibleCount?: number;
+    /**
+     * Обработчик клика по точке
+     */
+    onChange?: (index: number) => void;
+}
+export interface PaginationDotsProps extends HTMLAttributesWithoutOnChange<HTMLDivElement>, CustomPaginationDots {
+}
+export {};
+//# sourceMappingURL=PaginationDots.types.d.ts.map

package/types/components/PaginationDots/PaginationDots.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDots.types.d.ts","sourceRoot":"","sources":["../../../src/components/PaginationDots/PaginationDots.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,qBAAqB,CAAC;AAEzE,UAAU,oBAAoB;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAoB,SAAQ,6BAA6B,CAAC,cAAc,CAAC,EAAE,oBAAoB;CAAG"}

package/types/components/PaginationDots/hooks/useAnimation.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { DotSize } from '../PaginationDots';
+export declare const useAnimation: ({ isVertical, onAnimationEnd, activeElementRef, animatedDotsWrapperRef, canScrollForward, canScrollBackward, dots, prevDots, innerViewIndex, }: {
+    dots: DotSize[];
+    prevDots: DotSize[];
+    innerViewIndex: number;
+    canScrollForward: boolean;
+    canScrollBackward: boolean;
+    isVertical: boolean;
+    onAnimationEnd: () => void;
+    activeElementRef: React.RefObject<HTMLDivElement>;
+    animatedDotsWrapperRef: React.RefObject<HTMLDivElement>;
+}) => {
+    skipAnimation: boolean;
+    hasAnimation: boolean;
+    hasBackwardAnimation: boolean;
+    hasForwardAnimation: boolean;
+    setSkipAnimation: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setHasForwardAnimation: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setHasBackwardAnimation: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleAnimationEnd: () => void;
+};
+//# sourceMappingURL=useAnimation.d.ts.map

package/types/components/PaginationDots/hooks/useAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimation.d.ts","sourceRoot":"","sources":["../../../../src/components/PaginationDots/hooks/useAnimation.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAoB,MAAM,mBAAmB,CAAC;AAE9D,eAAO,MAAM,YAAY;UAWf,OAAO,EAAE;cACL,OAAO,EAAE;oBACH,MAAM;sBACJ,OAAO;uBACN,OAAO;gBACd,OAAO;oBACH,MAAM,IAAI;sBACR,MAAM,SAAS,CAAC,cAAc,CAAC;4BACzB,MAAM,SAAS,CAAC,cAAc,CAAC;;;;;;;;;;CA+F1D,CAAC"}