@salutejs/plasma-new-hope 0.321.1-canary.1943.14662029036.0 → 0.321.1-canary.1945.14661970912.0

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 (157) hide show
  1. package/cjs/components/Carousel/Carousel.css +4 -0
  2. package/cjs/components/Carousel/Carousel.js +80 -0
  3. package/cjs/components/Carousel/Carousel.js.map +1 -0
  4. package/cjs/components/Carousel/Carousel.styles.js +67 -0
  5. package/cjs/components/Carousel/Carousel.styles.js.map +1 -0
  6. package/cjs/components/Carousel/Carousel.styles_1lyqijv.css +4 -0
  7. package/cjs/components/Carousel/CarouselItem.js +53 -0
  8. package/cjs/components/Carousel/CarouselItem.js.map +1 -0
  9. package/cjs/components/Carousel/CarouselItem_cqjszm.css +1 -0
  10. package/cjs/components/Carousel/useCarousel.js +487 -0
  11. package/cjs/components/Carousel/useCarousel.js.map +1 -0
  12. package/cjs/components/Carousel/useDragScroll.js +62 -0
  13. package/cjs/components/Carousel/useDragScroll.js.map +1 -0
  14. package/cjs/components/Tabs/tokens.js +0 -1
  15. package/cjs/components/Tabs/tokens.js.map +1 -1
  16. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.css +5 -5
  17. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
  18. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js.map +1 -1
  19. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/{HorizontalTabItem.styles_1rvmyae.css → HorizontalTabItem.styles_1yi1gll.css} +1 -1
  20. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +5 -5
  21. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
  22. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map +1 -1
  23. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/{VerticalTabItem.styles_y2x2qv.css → VerticalTabItem.styles_17vv6lq.css} +1 -1
  24. package/cjs/index.css +17 -10
  25. package/cjs/index.js +7 -0
  26. package/cjs/index.js.map +1 -1
  27. package/emotion/cjs/components/Carousel/Carousel.js +77 -0
  28. package/emotion/cjs/components/Carousel/Carousel.styles.js +49 -0
  29. package/emotion/cjs/components/Carousel/Carousel.types.js +5 -0
  30. package/emotion/cjs/components/Carousel/CarouselItem.js +38 -0
  31. package/emotion/cjs/components/Carousel/index.js +32 -0
  32. package/emotion/cjs/components/Carousel/useCarousel.js +478 -0
  33. package/emotion/cjs/components/Carousel/useDragScroll.js +65 -0
  34. package/emotion/cjs/components/Tabs/tokens.js +0 -1
  35. package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +6 -6
  36. package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +6 -6
  37. package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +10 -0
  38. package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.js +18 -0
  39. package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +80 -0
  40. package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +16 -16
  41. package/emotion/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +7 -7
  42. package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +10 -0
  43. package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.js +18 -0
  44. package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +80 -0
  45. package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +16 -16
  46. package/emotion/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +7 -7
  47. package/emotion/cjs/index.js +11 -0
  48. package/emotion/es/components/Carousel/Carousel.js +69 -0
  49. package/emotion/es/components/Carousel/Carousel.styles.js +42 -0
  50. package/emotion/es/components/Carousel/Carousel.types.js +1 -0
  51. package/emotion/es/components/Carousel/CarouselItem.js +31 -0
  52. package/emotion/es/components/Carousel/index.js +3 -0
  53. package/emotion/es/components/Carousel/useCarousel.js +468 -0
  54. package/emotion/es/components/Carousel/useDragScroll.js +59 -0
  55. package/emotion/es/components/Tabs/tokens.js +0 -1
  56. package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +6 -6
  57. package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +6 -6
  58. package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +4 -0
  59. package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.js +6 -0
  60. package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +80 -0
  61. package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +16 -16
  62. package/emotion/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +7 -7
  63. package/emotion/es/examples/plasma_web/components/Carousel/Carousel.config.js +4 -0
  64. package/emotion/es/examples/plasma_web/components/Carousel/Carousel.js +6 -0
  65. package/emotion/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +80 -0
  66. package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +16 -16
  67. package/emotion/es/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +7 -7
  68. package/emotion/es/index.js +2 -1
  69. package/es/components/Carousel/Carousel.css +4 -0
  70. package/es/components/Carousel/Carousel.js +71 -0
  71. package/es/components/Carousel/Carousel.js.map +1 -0
  72. package/es/components/Carousel/Carousel.styles.js +60 -0
  73. package/es/components/Carousel/Carousel.styles.js.map +1 -0
  74. package/es/components/Carousel/Carousel.styles_1lyqijv.css +4 -0
  75. package/es/components/Carousel/CarouselItem.js +45 -0
  76. package/es/components/Carousel/CarouselItem.js.map +1 -0
  77. package/es/components/Carousel/CarouselItem_cqjszm.css +1 -0
  78. package/es/components/Carousel/useCarousel.js +472 -0
  79. package/es/components/Carousel/useCarousel.js.map +1 -0
  80. package/es/components/Carousel/useDragScroll.js +58 -0
  81. package/es/components/Carousel/useDragScroll.js.map +1 -0
  82. package/es/components/Tabs/tokens.js +0 -1
  83. package/es/components/Tabs/tokens.js.map +1 -1
  84. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.css +5 -5
  85. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
  86. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js.map +1 -1
  87. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/{HorizontalTabItem.styles_1rvmyae.css → HorizontalTabItem.styles_1yi1gll.css} +1 -1
  88. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +5 -5
  89. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
  90. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map +1 -1
  91. package/es/components/Tabs/ui/vertical/VerticalTabItem/{VerticalTabItem.styles_y2x2qv.css → VerticalTabItem.styles_17vv6lq.css} +1 -1
  92. package/es/index.css +17 -10
  93. package/es/index.js +3 -0
  94. package/es/index.js.map +1 -1
  95. package/package.json +4 -4
  96. package/styled-components/cjs/components/Carousel/Carousel.js +77 -0
  97. package/styled-components/cjs/components/Carousel/Carousel.styles.js +38 -0
  98. package/styled-components/cjs/components/Carousel/Carousel.types.js +5 -0
  99. package/styled-components/cjs/components/Carousel/CarouselItem.js +37 -0
  100. package/styled-components/cjs/components/Carousel/index.js +32 -0
  101. package/styled-components/cjs/components/Carousel/useCarousel.js +478 -0
  102. package/styled-components/cjs/components/Carousel/useDragScroll.js +65 -0
  103. package/styled-components/cjs/components/Tabs/tokens.js +0 -1
  104. package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
  105. package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
  106. package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +10 -0
  107. package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.js +18 -0
  108. package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +80 -0
  109. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
  110. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
  111. package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +10 -0
  112. package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.js +18 -0
  113. package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +80 -0
  114. package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
  115. package/styled-components/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
  116. package/styled-components/cjs/index.js +11 -0
  117. package/styled-components/es/components/Carousel/Carousel.js +69 -0
  118. package/styled-components/es/components/Carousel/Carousel.styles.js +30 -0
  119. package/styled-components/es/components/Carousel/Carousel.types.js +1 -0
  120. package/styled-components/es/components/Carousel/CarouselItem.js +30 -0
  121. package/styled-components/es/components/Carousel/index.js +3 -0
  122. package/styled-components/es/components/Carousel/useCarousel.js +468 -0
  123. package/styled-components/es/components/Carousel/useDragScroll.js +59 -0
  124. package/styled-components/es/components/Tabs/tokens.js +0 -1
  125. package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
  126. package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
  127. package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +4 -0
  128. package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.js +6 -0
  129. package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +80 -0
  130. package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
  131. package/styled-components/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
  132. package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.config.js +4 -0
  133. package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.js +6 -0
  134. package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +80 -0
  135. package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
  136. package/styled-components/es/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
  137. package/styled-components/es/index.js +2 -1
  138. package/types/components/Carousel/Carousel.d.ts +22 -0
  139. package/types/components/Carousel/Carousel.d.ts.map +1 -0
  140. package/types/components/Carousel/Carousel.styles.d.ts +16 -0
  141. package/types/components/Carousel/Carousel.styles.d.ts.map +1 -0
  142. package/types/components/Carousel/Carousel.types.d.ts +111 -0
  143. package/types/components/Carousel/Carousel.types.d.ts.map +1 -0
  144. package/types/components/Carousel/CarouselItem.d.ts +4 -0
  145. package/types/components/Carousel/CarouselItem.d.ts.map +1 -0
  146. package/types/components/Carousel/index.d.ts +5 -0
  147. package/types/components/Carousel/index.d.ts.map +1 -0
  148. package/types/components/Carousel/useCarousel.d.ts +63 -0
  149. package/types/components/Carousel/useCarousel.d.ts.map +1 -0
  150. package/types/components/Carousel/useDragScroll.d.ts +3 -0
  151. package/types/components/Carousel/useDragScroll.d.ts.map +1 -0
  152. package/types/components/Tabs/tokens.d.ts +0 -1
  153. package/types/components/Tabs/tokens.d.ts.map +1 -1
  154. package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.d.ts.map +1 -1
  155. package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.d.ts.map +1 -1
  156. package/types/index.d.ts +1 -0
  157. package/types/index.d.ts.map +1 -1
@@ -0,0 +1,80 @@
1
+ import * as React from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+ import styled from 'styled-components';
5
+
6
+ import { WithTheme } from '../../../_helpers';
7
+
8
+ import { Carousel, CarouselItem } from './Carousel';
9
+
10
+ type StoryCarouselProps = ComponentProps<typeof Carousel>;
11
+
12
+ const meta: Meta<StoryCarouselProps> = {
13
+ title: 'b2c/Data Display/Carousel',
14
+ component: Carousel,
15
+ decorators: [WithTheme],
16
+ argTypes: {
17
+ align: {
18
+ options: ['center', 'start', 'end'],
19
+ control: {
20
+ type: 'inline-radio',
21
+ },
22
+ },
23
+ isDragScrollDisabled: {
24
+ control: 'boolean',
25
+ },
26
+ },
27
+ args: {
28
+ align: 'center',
29
+ isDragScrollDisabled: false,
30
+ },
31
+ parameters: {
32
+ controls: {
33
+ include: ['align', 'isDragScrollDisabled'],
34
+ },
35
+ },
36
+ };
37
+
38
+ export default meta;
39
+
40
+ const items = Array(25)
41
+ .fill({
42
+ title: 'Заголовок',
43
+ })
44
+ .map(({ title }, i) => ({
45
+ id: i,
46
+ title: `${title} ${i}`,
47
+ }));
48
+
49
+ const StyledCard = styled.div`
50
+ position: relative;
51
+ border-radius: 8px;
52
+ width: 350px;
53
+ height: 50px;
54
+ padding: 8px;
55
+ background-color: #add8e6;
56
+ `;
57
+
58
+ const StoryDefault = ({ align, isDragScrollDisabled }: StoryCarouselProps) => {
59
+ const [index, setIndex] = React.useState(0);
60
+
61
+ return (
62
+ <Carousel
63
+ index={index}
64
+ detectActive
65
+ onIndexChange={setIndex}
66
+ scrollAlign={align}
67
+ isDragScrollDisabled={isDragScrollDisabled}
68
+ >
69
+ {items.map((item, i) => (
70
+ <CarouselItem key={i} style={{ padding: '0 0.5rem' }} scrollSnapAlign={align}>
71
+ <StyledCard>{item.title}</StyledCard>
72
+ </CarouselItem>
73
+ ))}
74
+ </Carousel>
75
+ );
76
+ };
77
+
78
+ export const Default: StoryObj<StoryCarouselProps> = {
79
+ render: (args) => <StoryDefault {...args} />,
80
+ };
@@ -13,10 +13,10 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  view: {
16
- clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);", ":pointer;"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
17
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);", ":pointer;"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
18
- divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);", ":pointer;"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
19
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);", ":pointer;"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor)
16
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover),
17
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover),
18
+ divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover),
19
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover)
20
20
  },
21
21
  size: {
22
22
  xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":2rem;", ":0 0.5rem;", ":0 0.375rem;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
@@ -13,7 +13,7 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  view: {
16
- divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);", ":pointer;"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerWidth, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor)
16
+ divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerWidth, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover)
17
17
  },
18
18
  size: {
19
19
  xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":2rem;", ":0 0.5rem;", ":0 0.375rem;", ":0.5rem 0.625rem;", ":0.625rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemPaddingOrientationVertical, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.config = void 0;
7
+ var config = exports.config = {
8
+ defaults: {},
9
+ variations: {}
10
+ };
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Carousel = void 0;
7
+ Object.defineProperty(exports, "CarouselItem", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _Carousel.CarouselItem;
11
+ }
12
+ });
13
+ exports.mergedConfig = void 0;
14
+ var _Carousel = /*#__PURE__*/require("../../../../components/Carousel");
15
+ var _engines = /*#__PURE__*/require("../../../../engines");
16
+ var _Carousel2 = /*#__PURE__*/require("./Carousel.config");
17
+ var mergedConfig = exports.mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Carousel.carouselConfig, _Carousel2.config);
18
+ var Carousel = exports.Carousel = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -0,0 +1,80 @@
1
+ import * as React from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+ import styled from 'styled-components';
5
+
6
+ import { WithTheme } from '../../../_helpers';
7
+
8
+ import { Carousel, CarouselItem } from './Carousel';
9
+
10
+ type StoryCarouselProps = ComponentProps<typeof Carousel>;
11
+
12
+ const meta: Meta<StoryCarouselProps> = {
13
+ title: 'web/Data Display/Carousel',
14
+ component: Carousel,
15
+ decorators: [WithTheme],
16
+ argTypes: {
17
+ align: {
18
+ options: ['center', 'start', 'end'],
19
+ control: {
20
+ type: 'inline-radio',
21
+ },
22
+ },
23
+ isDragScrollDisabled: {
24
+ control: 'boolean',
25
+ },
26
+ },
27
+ args: {
28
+ align: 'center',
29
+ isDragScrollDisabled: false,
30
+ },
31
+ parameters: {
32
+ controls: {
33
+ include: ['align', 'isDragScrollDisabled'],
34
+ },
35
+ },
36
+ };
37
+
38
+ export default meta;
39
+
40
+ const items = Array(25)
41
+ .fill({
42
+ title: 'Заголовок',
43
+ })
44
+ .map(({ title }, i) => ({
45
+ id: i,
46
+ title: `${title} ${i}`,
47
+ }));
48
+
49
+ const StyledCard = styled.div`
50
+ position: relative;
51
+ border-radius: 8px;
52
+ width: 350px;
53
+ height: 50px;
54
+ padding: 8px;
55
+ background-color: #add8e6;
56
+ `;
57
+
58
+ const StoryDefault = ({ align, isDragScrollDisabled }: StoryCarouselProps) => {
59
+ const [index, setIndex] = React.useState(0);
60
+
61
+ return (
62
+ <Carousel
63
+ index={index}
64
+ detectActive
65
+ onIndexChange={setIndex}
66
+ scrollAlign={align}
67
+ isDragScrollDisabled={isDragScrollDisabled}
68
+ >
69
+ {items.map((item, i) => (
70
+ <CarouselItem key={i} style={{ padding: '0 0.5rem' }} scrollSnapAlign={align}>
71
+ <StyledCard>{item.title}</StyledCard>
72
+ </CarouselItem>
73
+ ))}
74
+ </Carousel>
75
+ );
76
+ };
77
+
78
+ export const Default: StoryObj<StoryCarouselProps> = {
79
+ render: (args) => <StoryDefault {...args} />,
80
+ };
@@ -13,10 +13,10 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  view: {
16
- clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);", ":pointer;"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
17
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);", ":pointer;"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
18
- divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);", ":pointer;"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
19
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);", ":pointer;"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor)
16
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover),
17
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover),
18
+ divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover),
19
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover)
20
20
  },
21
21
  size: {
22
22
  xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":2rem;", ":0 0.5rem;", ":0 0.375rem;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
@@ -13,7 +13,7 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  view: {
16
- divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);", ":pointer;"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerWidth, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor)
16
+ divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerWidth, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover)
17
17
  },
18
18
  size: {
19
19
  xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":2rem;", ":0 0.5rem;", ":0 0.375rem;", ":0.5rem 0.625rem;", ":0.625rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemPaddingOrientationVertical, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
@@ -816,4 +816,15 @@ Object.keys(_ToastNew).forEach(function (key) {
816
816
  return _ToastNew[key];
817
817
  }
818
818
  });
819
+ });
820
+ var _Carousel = /*#__PURE__*/require("./components/Carousel");
821
+ Object.keys(_Carousel).forEach(function (key) {
822
+ if (key === "default" || key === "__esModule") return;
823
+ if (key in exports && exports[key] === _Carousel[key]) return;
824
+ Object.defineProperty(exports, key, {
825
+ enumerable: true,
826
+ get: function get() {
827
+ return _Carousel[key];
828
+ }
829
+ });
819
830
  });
@@ -0,0 +1,69 @@
1
+ var _excluded = ["index", "scrollSnapType", "scrollAlign", "detectActive", "detectThreshold", "scaleCallback", "scaleResetCallback", "onIndexChange", "paddingStart", "paddingEnd", "children", "ariaLive", "isDragScrollDisabled"];
2
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
4
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
5
+ import React, { forwardRef } from 'react';
6
+ import { useForkRef } from '@salutejs/plasma-core';
7
+ import { base, CarouselWrapper, CarouselTrack } from "./Carousel.styles";
8
+ import { useCarousel } from "./useCarousel";
9
+ import { useDragScroll } from "./useDragScroll";
10
+
11
+ /**
12
+ * Компонент для создания списков с прокруткой.
13
+ */
14
+ export var carouselRoot = function carouselRoot(Root) {
15
+ return /*#__PURE__*/forwardRef(function (_ref, ref) {
16
+ var _ref$index = _ref.index,
17
+ index = _ref$index === void 0 ? 0 : _ref$index,
18
+ _ref$scrollSnapType = _ref.scrollSnapType,
19
+ scrollSnapType = _ref$scrollSnapType === void 0 ? 'mandatory' : _ref$scrollSnapType,
20
+ scrollAlign = _ref.scrollAlign,
21
+ detectActive = _ref.detectActive,
22
+ detectThreshold = _ref.detectThreshold,
23
+ scaleCallback = _ref.scaleCallback,
24
+ scaleResetCallback = _ref.scaleResetCallback,
25
+ onIndexChange = _ref.onIndexChange,
26
+ paddingStart = _ref.paddingStart,
27
+ paddingEnd = _ref.paddingEnd,
28
+ children = _ref.children,
29
+ _ref$ariaLive = _ref.ariaLive,
30
+ ariaLive = _ref$ariaLive === void 0 ? 'off' : _ref$ariaLive,
31
+ _ref$isDragScrollDisa = _ref.isDragScrollDisabled,
32
+ isDragScrollDisabled = _ref$isDragScrollDisa === void 0 ? false : _ref$isDragScrollDisa,
33
+ rest = _objectWithoutProperties(_ref, _excluded);
34
+ var axis = 'x';
35
+ var _useCarousel = useCarousel({
36
+ index: index,
37
+ axis: axis,
38
+ scrollAlign: scrollAlign,
39
+ detectActive: detectActive,
40
+ detectThreshold: detectThreshold,
41
+ scaleCallback: scaleCallback,
42
+ scaleResetCallback: scaleResetCallback,
43
+ onIndexChange: onIndexChange
44
+ }),
45
+ scrollRef = _useCarousel.scrollRef,
46
+ trackRef = _useCarousel.trackRef;
47
+ var handleRef = useForkRef(scrollRef, ref);
48
+ useDragScroll(scrollRef, isDragScrollDisabled);
49
+ return /*#__PURE__*/React.createElement(Root, {
50
+ index: index
51
+ }, /*#__PURE__*/React.createElement(CarouselWrapper, _extends({
52
+ ref: handleRef,
53
+ scrollSnapType: scrollSnapType
54
+ }, rest), /*#__PURE__*/React.createElement(CarouselTrack, {
55
+ ref: trackRef,
56
+ paddingStart: paddingStart,
57
+ paddingEnd: paddingEnd,
58
+ "aria-live": ariaLive
59
+ }, children)));
60
+ });
61
+ };
62
+ export var carouselConfig = {
63
+ name: 'Carousel',
64
+ tag: 'div',
65
+ layout: carouselRoot,
66
+ base: base,
67
+ variations: {},
68
+ defaults: {}
69
+ };
@@ -0,0 +1,30 @@
1
+ import styled from 'styled-components';
2
+ import { css } from 'styled-components';
3
+ export var base = /*#__PURE__*/css([""]);
4
+
5
+ /**
6
+ * Компонент применяется, если требуется компенсировать отступы контейнера в сетке.
7
+ * При обертывании вокруг ``Carousel``, добавляет карусели и ее прокрутке дополнительные отступы.
8
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
9
+ */
10
+ export var CarouselGridWrapper = /*#__PURE__*/styled.div.withConfig({
11
+ componentId: "plasma-new-hope__sc-9g0yg0-0"
12
+ })(["overflow:hidden;margin-left:calc(var(--plasma-grid-margin) * -1);margin-right:calc(var(--plasma-grid-margin) * -1);"]);
13
+ export var CarouselWrapper = /*#__PURE__*/styled.div.withConfig({
14
+ componentId: "plasma-new-hope__sc-9g0yg0-1"
15
+ })(["position:relative;margin:0;padding:0;list-style:none;::-webkit-scrollbar{display:none;}overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:", ";", " &{scroll-padding:0 var(--plasma-grid-margin);padding-left:var(--plasma-grid-margin);}user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);"], function (_ref) {
16
+ var scrollSnapType = _ref.scrollSnapType;
17
+ return "x ".concat(scrollSnapType);
18
+ }, CarouselGridWrapper);
19
+ export var CarouselTrack = /*#__PURE__*/styled.div.withConfig({
20
+ componentId: "plasma-new-hope__sc-9g0yg0-2"
21
+ })(["display:inline-flex;flex-direction:row;padding-left:", ";padding-right:", ";", " &{padding-right:", ";}"], function (_ref2) {
22
+ var paddingStart = _ref2.paddingStart;
23
+ return paddingStart || 0;
24
+ }, function (_ref3) {
25
+ var paddingEnd = _ref3.paddingEnd;
26
+ return paddingEnd || 0;
27
+ }, CarouselGridWrapper, function (_ref4) {
28
+ var paddingEnd = _ref4.paddingEnd;
29
+ return paddingEnd || 'var(--plasma-grid-margin)';
30
+ });
@@ -0,0 +1,30 @@
1
+ var _excluded = ["scrollSnapAlign", "scrollSnapStop", "children"];
2
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
4
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
5
+ import React from 'react';
6
+ import styled from 'styled-components';
7
+ var StyledItem = /*#__PURE__*/styled.div.withConfig({
8
+ componentId: "plasma-new-hope__sc-1h5d6du-0"
9
+ })(["scroll-snap-align:", ";scroll-snap-stop:", ";"], function (_ref) {
10
+ var scrollSnapAlign = _ref.scrollSnapAlign;
11
+ return scrollSnapAlign || 'none';
12
+ }, function (_ref2) {
13
+ var scrollSnapAlign = _ref2.scrollSnapAlign,
14
+ scrollSnapStop = _ref2.scrollSnapStop;
15
+ return scrollSnapAlign ? scrollSnapStop : 'normal';
16
+ });
17
+ export var CarouselItem = function CarouselItem(_ref3) {
18
+ var _ref3$scrollSnapAlign = _ref3.scrollSnapAlign,
19
+ scrollSnapAlign = _ref3$scrollSnapAlign === void 0 ? 'center' : _ref3$scrollSnapAlign,
20
+ _ref3$scrollSnapStop = _ref3.scrollSnapStop,
21
+ scrollSnapStop = _ref3$scrollSnapStop === void 0 ? 'always' : _ref3$scrollSnapStop,
22
+ children = _ref3.children,
23
+ rest = _objectWithoutProperties(_ref3, _excluded);
24
+ return /*#__PURE__*/React.createElement(StyledItem, _extends({
25
+ scrollSnapAlign: scrollSnapAlign,
26
+ scrollSnapStop: scrollSnapStop,
27
+ role: "group",
28
+ "aria-roledescription": "slide"
29
+ }, rest), children);
30
+ };
@@ -0,0 +1,3 @@
1
+ export { carouselConfig, carouselRoot } from "./Carousel";
2
+ export { CarouselGridWrapper } from "./Carousel.styles";
3
+ export { CarouselItem } from "./CarouselItem";