@salutejs/plasma-new-hope 0.83.0-canary.1213.9176450261.0 → 0.84.0-canary.1194.9208145301.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Button/Button.css +6 -9
- package/cjs/components/Button/Button.js +2 -16
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +10 -31
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Button/Button.styles_uqvh6u.css +5 -0
- package/cjs/components/Button/Button.tokens.js +0 -5
- package/cjs/components/Button/Button.tokens.js.map +1 -1
- package/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
- package/{es/components/Button/variations/_stretching/base_hy8dc.css → cjs/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
- package/cjs/components/ButtonGroup/ButtonGroup.css +2 -2
- package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
- package/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -1
- package/cjs/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
- package/{es/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → cjs/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
- package/cjs/components/Combobox/hooks/useFocusController.js +1 -0
- package/cjs/components/Combobox/hooks/useFocusController.js.map +1 -1
- package/cjs/components/Drawer/Drawer.css +6 -9
- package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
- package/cjs/components/IconButton/IconButton.css +7 -10
- package/cjs/components/IconButton/IconButton.styles.js +1 -1
- package/cjs/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
- package/cjs/components/Notification/Notification.css +6 -9
- package/cjs/components/Notification/NotificationsProvider.css +6 -9
- package/cjs/components/Pagination/Pagination.css +8 -11
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
- package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
- package/cjs/components/Select/Select.css +6 -9
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
- package/cjs/components/Slider/Slider.css +69 -0
- package/cjs/components/Slider/Slider.js +48 -0
- package/cjs/components/Slider/Slider.js.map +1 -0
- package/cjs/components/Slider/Slider.tokens.js +79 -0
- package/cjs/components/Slider/Slider.tokens.js.map +1 -0
- package/cjs/components/Slider/components/Double/Double.css +62 -0
- package/cjs/components/Slider/components/Double/Double.js +306 -0
- package/cjs/components/Slider/components/Double/Double.js.map +1 -0
- package/cjs/components/Slider/components/Double/Double.styles.js +61 -0
- package/cjs/components/Slider/components/Double/Double.styles.js.map +1 -0
- package/cjs/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
- package/cjs/components/Slider/components/Single/Single.css +16 -0
- package/cjs/components/Slider/components/Single/Single.js +164 -0
- package/cjs/components/Slider/components/Single/Single.js.map +1 -0
- package/cjs/components/Slider/components/Single/Single.styles.js +45 -0
- package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -0
- package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.css +4 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.js +82 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +33 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
- package/cjs/components/Slider/ui/Handler/Handler.css +4 -0
- package/cjs/components/Slider/ui/Handler/Handler.js +168 -0
- package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -0
- package/cjs/components/Slider/ui/Handler/Handler.styles.js +21 -0
- package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
- package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.js +31 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +15 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
- package/cjs/components/Slider/utils/index.js +56 -0
- package/cjs/components/Slider/utils/index.js.map +1 -0
- package/cjs/components/Slider/variations/_disabled/base.js +9 -0
- package/cjs/components/Slider/variations/_disabled/base.js.map +1 -0
- package/cjs/components/Slider/variations/_disabled/base_x642ct.css +1 -0
- package/cjs/components/Slider/variations/_size/base.js +9 -0
- package/cjs/components/Slider/variations/_size/base.js.map +1 -0
- package/cjs/components/Slider/variations/_size/base_x642ct.css +1 -0
- package/cjs/components/Slider/variations/_view/base.js +9 -0
- package/cjs/components/Slider/variations/_view/base.js.map +1 -0
- package/cjs/components/Slider/variations/_view/base_x642ct.css +1 -0
- package/cjs/components/TextField/TextField.js +12 -3
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/Toast/Toast.css +6 -9
- package/cjs/components/Toast/ToastController.css +6 -9
- package/cjs/engines/common.js +4 -0
- package/cjs/engines/common.js.map +1 -1
- package/cjs/engines/index.js.map +1 -1
- package/cjs/hooks/useIsomorphicLayoutEffect.js +15 -0
- package/cjs/hooks/useIsomorphicLayoutEffect.js.map +1 -0
- package/cjs/index.css +34 -12
- package/cjs/index.js +14 -0
- package/cjs/index.js.map +1 -1
- package/cjs/utils/canUseDOM.js +12 -0
- package/cjs/utils/canUseDOM.js.map +1 -0
- package/cjs/utils/index.js.map +1 -1
- package/es/components/Button/Button.css +6 -9
- package/es/components/Button/Button.js +3 -17
- package/es/components/Button/Button.js.map +1 -1
- package/es/components/Button/Button.styles.js +11 -29
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Button/Button.styles_uqvh6u.css +5 -0
- package/es/components/Button/Button.tokens.js +0 -5
- package/es/components/Button/Button.tokens.js.map +1 -1
- package/es/components/Button/variations/_stretching/base.js +1 -1
- package/es/components/Button/variations/_stretching/base.js.map +1 -1
- package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
- package/es/components/ButtonGroup/ButtonGroup.css +2 -2
- package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
- package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
- package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
- package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
- package/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
- package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
- package/es/components/Combobox/hooks/useFocusController.js +1 -0
- package/es/components/Combobox/hooks/useFocusController.js.map +1 -1
- package/es/components/Drawer/Drawer.css +6 -9
- package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
- package/es/components/IconButton/IconButton.css +7 -10
- package/es/components/IconButton/IconButton.styles.js +1 -1
- package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
- package/es/components/Notification/Notification.css +6 -9
- package/es/components/Notification/NotificationsProvider.css +6 -9
- package/es/components/Pagination/Pagination.css +8 -11
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
- package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
- package/es/components/Select/Select.css +6 -9
- package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
- package/es/components/Slider/Slider.css +69 -0
- package/es/components/Slider/Slider.js +43 -0
- package/es/components/Slider/Slider.js.map +1 -0
- package/es/components/Slider/Slider.tokens.js +74 -0
- package/es/components/Slider/Slider.tokens.js.map +1 -0
- package/es/components/Slider/components/Double/Double.css +62 -0
- package/es/components/Slider/components/Double/Double.js +302 -0
- package/es/components/Slider/components/Double/Double.js.map +1 -0
- package/es/components/Slider/components/Double/Double.styles.js +51 -0
- package/es/components/Slider/components/Double/Double.styles.js.map +1 -0
- package/es/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
- package/es/components/Slider/components/Single/Single.css +16 -0
- package/es/components/Slider/components/Single/Single.js +160 -0
- package/es/components/Slider/components/Single/Single.js.map +1 -0
- package/es/components/Slider/components/Single/Single.styles.js +36 -0
- package/es/components/Slider/components/Single/Single.styles.js.map +1 -0
- package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
- package/es/components/Slider/components/SliderBase/SliderBase.css +4 -0
- package/es/components/Slider/components/SliderBase/SliderBase.js +78 -0
- package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js +26 -0
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
- package/es/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
- package/es/components/Slider/ui/Handler/Handler.css +4 -0
- package/es/components/Slider/ui/Handler/Handler.js +164 -0
- package/es/components/Slider/ui/Handler/Handler.js.map +1 -0
- package/es/components/Slider/ui/Handler/Handler.styles.js +16 -0
- package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
- package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
- package/es/components/Slider/ui/Thumb/Thumb.css +1 -0
- package/es/components/Slider/ui/Thumb/Thumb.js +27 -0
- package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -0
- package/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
- package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
- package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
- package/es/components/Slider/utils/index.js +50 -0
- package/es/components/Slider/utils/index.js.map +1 -0
- package/es/components/Slider/variations/_disabled/base.js +5 -0
- package/es/components/Slider/variations/_disabled/base.js.map +1 -0
- package/es/components/Slider/variations/_disabled/base_x642ct.css +1 -0
- package/es/components/Slider/variations/_size/base.js +5 -0
- package/es/components/Slider/variations/_size/base.js.map +1 -0
- package/es/components/Slider/variations/_size/base_x642ct.css +1 -0
- package/es/components/Slider/variations/_view/base.js +5 -0
- package/es/components/Slider/variations/_view/base.js.map +1 -0
- package/es/components/Slider/variations/_view/base_x642ct.css +1 -0
- package/es/components/TextField/TextField.js +12 -3
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/Toast/Toast.css +6 -9
- package/es/components/Toast/ToastController.css +6 -9
- package/es/engines/common.js +4 -0
- package/es/engines/common.js.map +1 -1
- package/es/engines/index.js.map +1 -1
- package/es/hooks/useIsomorphicLayoutEffect.js +11 -0
- package/es/hooks/useIsomorphicLayoutEffect.js.map +1 -0
- package/es/index.css +34 -12
- package/es/index.js +8 -0
- package/es/index.js.map +1 -1
- package/es/utils/canUseDOM.js +8 -0
- package/es/utils/canUseDOM.js.map +1 -0
- package/es/utils/index.js.map +1 -1
- package/package.json +3 -2
- package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +3 -1
- package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
- package/styled-components/cjs/components/Button/Button.js +2 -16
- package/styled-components/cjs/components/Button/Button.styles.js +12 -20
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +8 -51
- package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
- package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
- package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +68 -0
- package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
- package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
- package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
- package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
- package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
- package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
- package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
- package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
- package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Slider/Slider.js +47 -0
- package/styled-components/cjs/components/Slider/Slider.tokens.js +77 -0
- package/styled-components/cjs/components/Slider/Slider.types.js +5 -0
- package/styled-components/cjs/components/Slider/components/Double/Double.js +318 -0
- package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +36 -0
- package/styled-components/cjs/components/Slider/components/Double/Double.types.js +5 -0
- package/styled-components/cjs/components/Slider/components/Single/Single.js +176 -0
- package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +27 -0
- package/styled-components/cjs/components/Slider/components/Single/Single.types.js +5 -0
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +83 -0
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +21 -0
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.types.js +5 -0
- package/styled-components/cjs/components/Slider/components/index.js +27 -0
- package/styled-components/cjs/components/Slider/index.js +32 -0
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +177 -0
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +15 -0
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.types.js +5 -0
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +32 -0
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +18 -0
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.types.js +5 -0
- package/styled-components/cjs/components/Slider/ui/index.js +63 -0
- package/styled-components/cjs/components/Slider/utils/index.js +55 -0
- package/styled-components/cjs/components/Slider/variations/_disabled/base.js +8 -0
- package/styled-components/cjs/components/Slider/variations/_disabled/tokens.json +4 -0
- package/styled-components/cjs/components/Slider/variations/_size/base.js +8 -0
- package/styled-components/cjs/components/Slider/variations/_size/tokens.json +0 -0
- package/styled-components/cjs/components/Slider/variations/_view/base.js +8 -0
- package/styled-components/cjs/components/Slider/variations/_view/tokens.json +0 -0
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/cjs/components/TextField/TextField.js +12 -3
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
- package/styled-components/cjs/engines/common.js +4 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +29 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js +16 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +29 -0
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.js +16 -0
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/hooks/index.js +8 -1
- package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js +12 -0
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/cjs/utils/canUseDOM.js +11 -0
- package/styled-components/cjs/utils/index.js +7 -0
- package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +3 -1
- package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
- package/styled-components/es/components/Button/Button.js +3 -17
- package/styled-components/es/components/Button/Button.styles.js +11 -19
- package/styled-components/es/components/Button/Button.template-doc.mdx +8 -51
- package/styled-components/es/components/Button/Button.tokens.js +0 -5
- package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
- package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/styled-components/es/components/Cell/Cell.template-doc.mdx +68 -0
- package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
- package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
- package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
- package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
- package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
- package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
- package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
- package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
- package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
- package/styled-components/es/components/Slider/Slider.js +38 -0
- package/styled-components/es/components/Slider/Slider.tokens.js +71 -0
- package/styled-components/es/components/Slider/Slider.types.js +1 -0
- package/styled-components/es/components/Slider/components/Double/Double.js +310 -0
- package/styled-components/es/components/Slider/components/Double/Double.styles.js +29 -0
- package/styled-components/es/components/Slider/components/Double/Double.types.js +1 -0
- package/styled-components/es/components/Slider/components/Single/Single.js +168 -0
- package/styled-components/es/components/Slider/components/Single/Single.styles.js +20 -0
- package/styled-components/es/components/Slider/components/Single/Single.types.js +1 -0
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +74 -0
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +14 -0
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.types.js +1 -0
- package/styled-components/es/components/Slider/components/index.js +3 -0
- package/styled-components/es/components/Slider/index.js +3 -0
- package/styled-components/es/components/Slider/ui/Handler/Handler.js +168 -0
- package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -0
- package/styled-components/es/components/Slider/ui/Handler/Handler.types.js +1 -0
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +25 -0
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.types.js +1 -0
- package/styled-components/es/components/Slider/ui/index.js +5 -0
- package/styled-components/es/components/Slider/utils/index.js +47 -0
- package/styled-components/es/components/Slider/variations/_disabled/base.js +2 -0
- package/styled-components/es/components/Slider/variations/_disabled/tokens.json +4 -0
- package/styled-components/es/components/Slider/variations/_size/base.js +2 -0
- package/styled-components/es/components/Slider/variations/_size/tokens.json +0 -0
- package/styled-components/es/components/Slider/variations/_view/base.js +2 -0
- package/styled-components/es/components/Slider/variations/_view/tokens.json +0 -0
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/es/components/TextField/TextField.js +12 -3
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
- package/styled-components/es/engines/common.js +4 -0
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +23 -0
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.js +10 -0
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
- package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +23 -0
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.js +10 -0
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
- package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/hooks/index.js +2 -1
- package/styled-components/es/hooks/useIsomorphicLayoutEffect.js +7 -0
- package/styled-components/es/index.js +2 -1
- package/styled-components/es/utils/canUseDOM.js +5 -0
- package/styled-components/es/utils/index.js +1 -0
- package/types/components/Button/Button.d.ts.map +1 -1
- package/types/components/Button/Button.styles.d.ts +1 -5
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/Button/Button.tokens.d.ts +0 -5
- package/types/components/Button/Button.tokens.d.ts.map +1 -1
- package/types/components/Button/Button.types.d.ts +4 -16
- package/types/components/Button/Button.types.d.ts.map +1 -1
- package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
- package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
- package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
- package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
- package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
- package/types/components/Notification/Notification.styles.d.ts +1 -43
- package/types/components/Notification/Notification.styles.d.ts.map +1 -1
- package/types/components/Pagination/Pagination.styles.d.ts +2 -86
- package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
- package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
- package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
- package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
- package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
- package/types/components/Slider/Slider.d.ts +27 -0
- package/types/components/Slider/Slider.d.ts.map +1 -0
- package/types/components/Slider/Slider.tokens.d.ts +72 -0
- package/types/components/Slider/Slider.tokens.d.ts.map +1 -0
- package/types/components/Slider/Slider.types.d.ts +3 -0
- package/types/components/Slider/Slider.types.d.ts.map +1 -0
- package/types/components/Slider/components/Double/Double.d.ts +4 -0
- package/types/components/Slider/components/Double/Double.d.ts.map +1 -0
- package/types/components/Slider/components/Double/Double.styles.d.ts +43 -0
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -0
- package/types/components/Slider/components/Double/Double.types.d.ts +65 -0
- package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -0
- package/types/components/Slider/components/Single/Single.d.ts +4 -0
- package/types/components/Slider/components/Single/Single.d.ts.map +1 -0
- package/types/components/Slider/components/Single/Single.styles.d.ts +8 -0
- package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -0
- package/types/components/Slider/components/Single/Single.types.d.ts +55 -0
- package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts +4 -0
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +6 -0
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +45 -0
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -0
- package/types/components/Slider/components/index.d.ts +6 -0
- package/types/components/Slider/components/index.d.ts.map +1 -0
- package/types/components/Slider/index.d.ts +6 -0
- package/types/components/Slider/index.d.ts.map +1 -0
- package/types/components/Slider/ui/Handler/Handler.d.ts +9 -0
- package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -0
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts +4 -0
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -0
- package/types/components/Slider/ui/Handler/Handler.types.d.ts +24 -0
- package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.d.ts +4 -0
- package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts +5 -0
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +12 -0
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -0
- package/types/components/Slider/ui/index.d.ts +6 -0
- package/types/components/Slider/ui/index.d.ts.map +1 -0
- package/types/components/Slider/utils/index.d.ts +33 -0
- package/types/components/Slider/utils/index.d.ts.map +1 -0
- package/types/components/Slider/variations/_disabled/base.d.ts +2 -0
- package/types/components/Slider/variations/_disabled/base.d.ts.map +1 -0
- package/types/components/Slider/variations/_size/base.d.ts +2 -0
- package/types/components/Slider/variations/_size/base.d.ts.map +1 -0
- package/types/components/Slider/variations/_view/base.d.ts +2 -0
- package/types/components/Slider/variations/_view/base.d.ts.map +1 -0
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/Toast/Toast.styles.d.ts +1 -43
- package/types/components/Toast/Toast.styles.d.ts.map +1 -1
- package/types/components/Toast/utils.d.ts +1 -43
- package/types/components/Toast/utils.d.ts.map +1 -1
- package/types/engines/common.d.ts +3 -3
- package/types/engines/common.d.ts.map +1 -1
- package/types/engines/index.d.ts +1 -1
- package/types/engines/index.d.ts.map +1 -1
- package/types/engines/types.d.ts +4 -0
- package/types/engines/types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
- package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts +22 -0
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +21 -0
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
- package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts +22 -0
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Slider/Slider.d.ts +21 -0
- package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -0
- package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
- package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/hooks/index.d.ts +1 -0
- package/types/hooks/index.d.ts.map +1 -1
- package/types/hooks/useIsomorphicLayoutEffect.d.ts +6 -0
- package/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
- package/types/utils/canUseDOM.d.ts +6 -0
- package/types/utils/canUseDOM.d.ts.map +1 -0
- package/types/utils/index.d.ts +1 -0
- package/types/utils/index.d.ts.map +1 -1
- package/cjs/components/Button/Button.styles_nedem1.css +0 -8
- package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
- package/es/components/Button/Button.styles_nedem1.css +0 -8
- package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
@@ -18,7 +18,7 @@ var _TextField = /*#__PURE__*/require("./TextField.styles");
|
|
18
18
|
var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
|
19
19
|
var _ui = /*#__PURE__*/require("./ui");
|
20
20
|
var _hooks = /*#__PURE__*/require("./hooks");
|
21
|
-
var _excluded = ["id", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
|
21
|
+
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
22
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
23
23
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
24
24
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -34,6 +34,8 @@ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:bloc
|
|
34
34
|
var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
35
35
|
return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
36
36
|
var id = _ref.id,
|
37
|
+
className = _ref.className,
|
38
|
+
style = _ref.style,
|
37
39
|
contentLeft = _ref.contentLeft,
|
38
40
|
contentRight = _ref.contentRight,
|
39
41
|
label = _ref.label,
|
@@ -52,6 +54,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
52
54
|
onChange = _ref.onChange,
|
53
55
|
onChangeChips = _ref.onChangeChips,
|
54
56
|
onSearch = _ref.onSearch,
|
57
|
+
onKeyDown = _ref.onKeyDown,
|
55
58
|
rest = _objectWithoutProperties(_ref, _excluded);
|
56
59
|
var contentRef = (0, _react.useRef)(null);
|
57
60
|
var inputRef = (0, _react.useRef)(null);
|
@@ -131,6 +134,10 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
131
134
|
chipsRefs.current[index] = element;
|
132
135
|
}
|
133
136
|
};
|
137
|
+
var handleOnKeyDown = function handleOnKeyDown(event) {
|
138
|
+
handleInputKeydown(event);
|
139
|
+
onKeyDown && onKeyDown(event);
|
140
|
+
};
|
134
141
|
(0, _react.useEffect)(function () {
|
135
142
|
if (!isChipEnumeration && !(values !== null && values !== void 0 && values.length)) {
|
136
143
|
return;
|
@@ -149,7 +156,9 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
149
156
|
disabled: disabled,
|
150
157
|
readOnly: !disabled && readOnly,
|
151
158
|
labelPlacement: innerLabelPlacementValue,
|
152
|
-
onClick: handleInputFocus
|
159
|
+
onClick: handleInputFocus,
|
160
|
+
className: className,
|
161
|
+
style: style
|
153
162
|
}, labelInside || innerLabelValue && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
|
154
163
|
id: labelId,
|
155
164
|
htmlFor: id
|
@@ -190,7 +199,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
190
199
|
disabled: disabled,
|
191
200
|
readOnly: !disabled && readOnly,
|
192
201
|
onChange: handleChange,
|
193
|
-
onKeyDown:
|
202
|
+
onKeyDown: handleOnKeyDown
|
194
203
|
})), labelInside && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
|
195
204
|
id: labelId,
|
196
205
|
htmlFor: innerId
|
@@ -117,7 +117,7 @@ export function App() {
|
|
117
117
|
|
118
118
|
```tsx live
|
119
119
|
import React from 'react';
|
120
|
-
import { TextField } from '@salutejs/{{ package }};
|
120
|
+
import { TextField } from '@salutejs/{{ package }}';
|
121
121
|
|
122
122
|
export function App() {
|
123
123
|
return (
|
@@ -133,4 +133,4 @@ export function App() {
|
|
133
133
|
</div>
|
134
134
|
);
|
135
135
|
}
|
136
|
-
```
|
136
|
+
```
|
@@ -0,0 +1,120 @@
|
|
1
|
+
---
|
2
|
+
id: toolbar
|
3
|
+
title: Toolbar
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
7
|
+
|
8
|
+
# Toolbar
|
9
|
+
Toolbar может отображаться в горизонтальном и вертикальном положении с разными размерами.
|
10
|
+
|
11
|
+
## Toolbar
|
12
|
+
<Description name="Toolbar" />
|
13
|
+
<PropsTable name="Toolbar" exclude={['css', 'focused']} />
|
14
|
+
|
15
|
+
## Использование
|
16
|
+
Компонент `Toolbar` должен содержать контент передаваемый в `children`.
|
17
|
+
Для разделения элементов можно использовать ToolbarDivider.
|
18
|
+
|
19
|
+
```tsx live
|
20
|
+
import React from 'react';
|
21
|
+
import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
|
22
|
+
import { IconEdit } from '@salutejs/plasma-icons';
|
23
|
+
|
24
|
+
export function App() {
|
25
|
+
return (
|
26
|
+
<Toolbar>
|
27
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
28
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
29
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
30
|
+
<ToolbarDivider />
|
31
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
32
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
33
|
+
</Toolbar>
|
34
|
+
);
|
35
|
+
}
|
36
|
+
```
|
37
|
+
|
38
|
+
## Примеры
|
39
|
+
|
40
|
+
### Размер Toolbar
|
41
|
+
Размер Toolbar задается с помощью свойства `size`.
|
42
|
+
|
43
|
+
Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
|
44
|
+
|
45
|
+
```tsx live
|
46
|
+
import React from 'react';
|
47
|
+
import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
|
48
|
+
import { IconEdit } from '@salutejs/plasma-icons';
|
49
|
+
|
50
|
+
export function App() {
|
51
|
+
return (
|
52
|
+
<div>
|
53
|
+
<Toolbar size="l">
|
54
|
+
<Button square size="l" view="clear" contentLeft={<IconEdit />} />
|
55
|
+
<Button square size="l" view="clear" contentLeft={<IconEdit />} />
|
56
|
+
<ToolbarDivider />
|
57
|
+
<Button square size="l" view="clear" contentLeft={<IconEdit />} />
|
58
|
+
<Button square size="l" view="clear" contentLeft={<IconEdit />} />
|
59
|
+
</Toolbar>
|
60
|
+
|
61
|
+
<Toolbar size="m">
|
62
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
63
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
64
|
+
<ToolbarDivider />
|
65
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
66
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
67
|
+
</Toolbar>
|
68
|
+
|
69
|
+
<Toolbar size="m">
|
70
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
71
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
72
|
+
<ToolbarDivider />
|
73
|
+
<Button square size="s" view="clear" contentLeft={<IconEdit />} />
|
74
|
+
<Button square size="s" view="clear" contentLeft={<IconEdit />} />
|
75
|
+
</Toolbar>
|
76
|
+
|
77
|
+
<Toolbar size="xs">
|
78
|
+
<Button square size="xs" view="clear" contentLeft={<IconEdit />} />
|
79
|
+
<Button square size="xs" view="clear" contentLeft={<IconEdit />} />
|
80
|
+
<ToolbarDivider />
|
81
|
+
<Button square size="xs" view="clear" contentLeft={<IconEdit />} />
|
82
|
+
<Button square size="xs" view="clear" contentLeft={<IconEdit />} />
|
83
|
+
</Toolbar>
|
84
|
+
</div>
|
85
|
+
);
|
86
|
+
}
|
87
|
+
```
|
88
|
+
|
89
|
+
### Положение Toolbar
|
90
|
+
Положение Toolbar задается с помощью свойства `orientation`. Возможные значения свойства `orientation`:
|
91
|
+
+ `"vertical"` – вертикальное положение;
|
92
|
+
+ `"horizontal"` – горизонтальное положение;
|
93
|
+
|
94
|
+
```tsx live
|
95
|
+
import React from 'react';
|
96
|
+
import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
|
97
|
+
import { IconEdit } from '@salutejs/plasma-icons';
|
98
|
+
|
99
|
+
export function App() {
|
100
|
+
return (
|
101
|
+
<div>
|
102
|
+
<Toolbar orientation="vertical">
|
103
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
104
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
105
|
+
<ToolbarDivider />
|
106
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
107
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
108
|
+
</Toolbar>
|
109
|
+
|
110
|
+
<Toolbar orientation="horizontal">
|
111
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
112
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
113
|
+
<ToolbarDivider />
|
114
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
115
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
116
|
+
</Toolbar>
|
117
|
+
</div>
|
118
|
+
);
|
119
|
+
}
|
120
|
+
```
|
@@ -21,6 +21,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
21
21
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
22
22
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
23
23
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
24
|
+
//
|
25
|
+
// Тип HTMLAttributesOmitOnChange требуется чтобы использовать компонент с кастомным пропсом onChange
|
26
|
+
//
|
27
|
+
|
24
28
|
var getStaticVariants = exports.getStaticVariants = function getStaticVariants(config) {
|
25
29
|
if (!config.variations) {
|
26
30
|
return [];
|
@@ -14,27 +14,27 @@ var config = exports.config = {
|
|
14
14
|
},
|
15
15
|
variations: {
|
16
16
|
view: {
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--
|
18
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
19
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--
|
20
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--
|
21
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
22
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
23
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
24
|
-
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-
|
25
|
-
black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-
|
26
|
-
white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-
|
17
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
18
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
19
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
20
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
21
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
22
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
23
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
24
|
+
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
25
|
+
black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
26
|
+
white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive)
|
27
27
|
},
|
28
28
|
size: {
|
29
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"
|
30
|
-
lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"
|
31
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"
|
32
|
-
mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"
|
33
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"
|
34
|
-
sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"
|
35
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"
|
36
|
-
xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"
|
37
|
-
xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;"
|
29
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
|
30
|
+
lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
|
31
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
|
32
|
+
mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
|
33
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
|
34
|
+
sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
|
35
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
|
36
|
+
xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
|
37
|
+
xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor)
|
38
38
|
},
|
39
39
|
disabled: {
|
40
40
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Button.buttonTokens.buttonDisabledOpacity)
|
@@ -4,103 +4,57 @@ import type { StoryObj, Meta } from '@storybook/react';
|
|
4
4
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
5
5
|
|
6
6
|
import { IconMic } from '../../../../components/_Icon';
|
7
|
-
import {
|
7
|
+
import { buttonConfig } from '../../../../components/Button';
|
8
|
+
import { mergeConfig } from '../../../../engines';
|
9
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
8
10
|
|
11
|
+
import { config } from './Button.config';
|
9
12
|
import { Button } from './Button';
|
10
13
|
|
11
|
-
const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
12
|
-
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
13
|
-
const stretchingValues = ['auto', 'filled', 'fixed'];
|
14
|
-
const pinValues = [
|
15
|
-
'',
|
16
|
-
'square-square',
|
17
|
-
'square-clear',
|
18
|
-
'clear-square',
|
19
|
-
'clear-clear',
|
20
|
-
'clear-circle',
|
21
|
-
'circle-clear',
|
22
|
-
'circle-circle',
|
23
|
-
];
|
24
|
-
const contentPlacinValues = ['default', 'relaxed'];
|
25
|
-
|
26
14
|
const meta: Meta<typeof Button> = {
|
27
15
|
title: 'plasma_b2c/Button',
|
28
16
|
decorators: [WithTheme],
|
29
17
|
component: Button,
|
30
18
|
args: {
|
19
|
+
text: 'Hello',
|
31
20
|
view: 'default',
|
32
21
|
size: 'm',
|
33
|
-
contentPlacing: 'default',
|
34
|
-
stretching: 'auto',
|
35
|
-
text: 'Hello',
|
36
|
-
value: 'Value',
|
37
22
|
disabled: false,
|
38
23
|
focused: true,
|
39
24
|
square: false,
|
25
|
+
stretching: 'auto',
|
40
26
|
isLoading: false,
|
41
27
|
},
|
42
28
|
argTypes: {
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
contentPlacing: {
|
56
|
-
options: contentPlacinValues,
|
29
|
+
...argTypesFromConfig(mergeConfig(buttonConfig, config)),
|
30
|
+
pin: {
|
31
|
+
options: [
|
32
|
+
'square-square',
|
33
|
+
'square-clear',
|
34
|
+
'clear-square',
|
35
|
+
'clear-clear',
|
36
|
+
'clear-circle',
|
37
|
+
'circle-clear',
|
38
|
+
'circle-circle',
|
39
|
+
'',
|
40
|
+
],
|
57
41
|
control: {
|
58
42
|
type: 'select',
|
59
43
|
},
|
44
|
+
table: { defaultValue: { summary: 'bottom' } },
|
60
45
|
},
|
61
46
|
stretching: {
|
62
|
-
options:
|
47
|
+
options: ['auto', 'filled', 'fixed'],
|
63
48
|
control: {
|
64
49
|
type: 'select',
|
65
50
|
},
|
66
51
|
},
|
67
|
-
pin: {
|
68
|
-
options: pinValues,
|
69
|
-
control: {
|
70
|
-
type: 'select',
|
71
|
-
},
|
72
|
-
table: { defaultValue: { summary: 'bottom' } },
|
73
|
-
},
|
74
52
|
},
|
75
53
|
};
|
76
54
|
|
77
55
|
export default meta;
|
78
56
|
|
79
|
-
|
80
|
-
enableContentLeft: boolean;
|
81
|
-
enableContentRight: boolean;
|
82
|
-
};
|
83
|
-
|
84
|
-
const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
|
85
|
-
const iconSize = size === 'xs' ? 'xs' : 's';
|
86
|
-
|
87
|
-
return (
|
88
|
-
<Button
|
89
|
-
contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
|
90
|
-
contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
|
91
|
-
size={size}
|
92
|
-
{...rest}
|
93
|
-
/>
|
94
|
-
);
|
95
|
-
};
|
96
|
-
|
97
|
-
export const Default: StoryObj<StoryPropsDefault> = {
|
98
|
-
args: {
|
99
|
-
enableContentLeft: false,
|
100
|
-
enableContentRight: false,
|
101
|
-
},
|
102
|
-
render: (args) => <StoryDefault {...args} />,
|
103
|
-
};
|
57
|
+
export const Default: StoryObj<ComponentProps<typeof Button>> = {};
|
104
58
|
|
105
59
|
export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
|
106
60
|
argTypes: { ...disableProps(['text']) },
|
package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js
CHANGED
@@ -13,16 +13,16 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--
|
17
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
18
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--
|
19
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--
|
20
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
21
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
22
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
23
|
-
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-
|
24
|
-
black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-
|
25
|
-
white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
17
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
18
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
19
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
20
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
21
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
22
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
23
|
+
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
24
|
+
black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
25
|
+
white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
|
26
26
|
},
|
27
27
|
size: {
|
28
28
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _ButtonGroup.buttonGroupTokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonPadding, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight),
|
package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx
CHANGED
@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
|
|
11
11
|
type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
|
12
12
|
type Story = StoryObj<StoryProps>;
|
13
13
|
|
14
|
-
const views = ['accent', 'default', 'secondary', '
|
14
|
+
const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
|
15
15
|
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
16
16
|
const orientationValues = ['horizontal', 'vertical'];
|
17
17
|
const gapValues = ['none', 'dense', 'wide'];
|
@@ -0,0 +1,29 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.config = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
+
var _Slider = /*#__PURE__*/require("../../../../components/Slider");
|
9
|
+
var config = exports.config = {
|
10
|
+
defaults: {
|
11
|
+
view: 'default',
|
12
|
+
size: 'm'
|
13
|
+
},
|
14
|
+
variations: {
|
15
|
+
view: {
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-solid-default);", ":var(--surface-solid-tertiary);", ":var(--surface-solid-default);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor),
|
17
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent);", ":var(--surface-solid-tertiary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor),
|
18
|
+
gradient: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent-gradient);", ":var(--surface-solid-tertiary);", ":var(--surface-accent-gradient);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor)
|
19
|
+
},
|
20
|
+
size: {
|
21
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
|
22
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.75rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
|
23
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.5rem;", ":-1.25rem;", ":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);", ":1rem;", ":0.125rem solid;", ":1.25rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight)
|
24
|
+
},
|
25
|
+
disabled: {
|
26
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Slider.sliderTokens.disabledOpacity)
|
27
|
+
}
|
28
|
+
}
|
29
|
+
};
|
@@ -0,0 +1,16 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Slider = void 0;
|
7
|
+
var _Slider = /*#__PURE__*/require("../../../../components/Slider");
|
8
|
+
var _engines = /*#__PURE__*/require("../../../../engines");
|
9
|
+
var _Slider2 = /*#__PURE__*/require("./Slider.config");
|
10
|
+
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Slider.sliderConfig, _Slider2.config);
|
11
|
+
var Slider = exports.Slider = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
12
|
+
|
13
|
+
/**
|
14
|
+
* Слайдер позволяет определить числовое значение в пределах указанного промежутка.
|
15
|
+
* Можно указать два значения.
|
16
|
+
*/
|