@salutejs/plasma-new-hope 0.78.0-dev.0 → 0.79.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (75) hide show
  1. package/cjs/components/Button/Button.styles.js +1 -0
  2. package/cjs/components/Button/Button.styles.js.map +1 -1
  3. package/cjs/components/Drawer/Drawer.js +1 -0
  4. package/cjs/components/Drawer/Drawer.js.map +1 -1
  5. package/cjs/components/IconButton/IconButton.css +24 -0
  6. package/cjs/components/IconButton/IconButton.js +50 -0
  7. package/cjs/components/IconButton/IconButton.js.map +1 -0
  8. package/cjs/components/IconButton/IconButton.styles.js +16 -0
  9. package/cjs/components/IconButton/IconButton.styles.js.map +1 -0
  10. package/cjs/components/IconButton/IconButton.styles_1hknr37.css +1 -0
  11. package/cjs/components/IconButton/IconButton.tokens.js +32 -0
  12. package/cjs/components/IconButton/IconButton.tokens.js.map +1 -0
  13. package/cjs/index.css +2 -0
  14. package/cjs/index.js +5 -0
  15. package/cjs/index.js.map +1 -1
  16. package/es/components/Button/Button.styles.js +1 -0
  17. package/es/components/Button/Button.styles.js.map +1 -1
  18. package/es/components/Drawer/Drawer.js +1 -0
  19. package/es/components/Drawer/Drawer.js.map +1 -1
  20. package/es/components/IconButton/IconButton.css +24 -0
  21. package/es/components/IconButton/IconButton.js +45 -0
  22. package/es/components/IconButton/IconButton.js.map +1 -0
  23. package/es/components/IconButton/IconButton.styles.js +12 -0
  24. package/es/components/IconButton/IconButton.styles.js.map +1 -0
  25. package/es/components/IconButton/IconButton.styles_1hknr37.css +1 -0
  26. package/es/components/IconButton/IconButton.tokens.js +28 -0
  27. package/es/components/IconButton/IconButton.tokens.js.map +1 -0
  28. package/es/index.css +2 -0
  29. package/es/index.js +2 -0
  30. package/es/index.js.map +1 -1
  31. package/package.json +2 -2
  32. package/styled-components/cjs/components/Button/Button.styles.js +10 -2
  33. package/styled-components/cjs/components/IconButton/IconButton.js +47 -0
  34. package/styled-components/cjs/components/IconButton/IconButton.styles.js +13 -0
  35. package/styled-components/cjs/components/IconButton/IconButton.tokens.js +31 -0
  36. package/styled-components/cjs/components/IconButton/index.js +25 -0
  37. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +45 -0
  38. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js +11 -0
  39. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +71 -0
  40. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +45 -0
  41. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js +11 -0
  42. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +71 -0
  43. package/styled-components/cjs/index.js +11 -0
  44. package/styled-components/es/components/Button/Button.styles.js +10 -2
  45. package/styled-components/es/components/IconButton/IconButton.js +41 -0
  46. package/styled-components/es/components/IconButton/IconButton.styles.js +8 -0
  47. package/styled-components/es/components/IconButton/IconButton.tokens.js +25 -0
  48. package/styled-components/es/components/IconButton/index.js +2 -0
  49. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +39 -0
  50. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.js +5 -0
  51. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +71 -0
  52. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +39 -0
  53. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js +5 -0
  54. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +71 -0
  55. package/styled-components/es/index.js +1 -0
  56. package/types/components/Button/Button.styles.d.ts +1 -0
  57. package/types/components/Button/Button.styles.d.ts.map +1 -1
  58. package/types/components/IconButton/IconButton.d.ts +35 -0
  59. package/types/components/IconButton/IconButton.d.ts.map +1 -0
  60. package/types/components/IconButton/IconButton.styles.d.ts +3 -0
  61. package/types/components/IconButton/IconButton.styles.d.ts.map +1 -0
  62. package/types/components/IconButton/IconButton.tokens.d.ts +26 -0
  63. package/types/components/IconButton/IconButton.tokens.d.ts.map +1 -0
  64. package/types/components/IconButton/index.d.ts +3 -0
  65. package/types/components/IconButton/index.d.ts.map +1 -0
  66. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts +38 -0
  67. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +1 -0
  68. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +32 -0
  69. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -0
  70. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts +38 -0
  71. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +1 -0
  72. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +32 -0
  73. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -0
  74. package/types/index.d.ts +1 -0
  75. package/types/index.d.ts.map +1 -1
@@ -0,0 +1,41 @@
1
+ import { buttonRoot } from '../Button';
2
+ import { base as viewCSS } from '../Button/variations/_view/base';
3
+ import { base as sizeCSS } from '../Button/variations/_size/base';
4
+ import { base as disabledCSS } from '../Button/variations/_disabled/base';
5
+ import { base as focusedCSS } from '../Button/variations/_focused/base';
6
+ import { base as blurredCSS } from '../Button/variations/_blurred/base';
7
+ import { base as stretchingCSS } from '../Button/variations/_stretching/base';
8
+ import { base } from './IconButton.styles';
9
+ export var iconButtonRoot = buttonRoot;
10
+ export var iconButtonConfig = {
11
+ name: 'IconButton',
12
+ tag: 'button',
13
+ layout: iconButtonRoot,
14
+ base: base,
15
+ variations: {
16
+ view: {
17
+ css: viewCSS
18
+ },
19
+ size: {
20
+ css: sizeCSS
21
+ },
22
+ disabled: {
23
+ css: disabledCSS,
24
+ attrs: true
25
+ },
26
+ focused: {
27
+ css: focusedCSS
28
+ },
29
+ blurred: {
30
+ css: blurredCSS
31
+ },
32
+ stretching: {
33
+ css: stretchingCSS
34
+ }
35
+ },
36
+ defaults: {
37
+ view: 'secondary',
38
+ size: 'm',
39
+ stretching: 'fixed'
40
+ }
41
+ };
@@ -0,0 +1,8 @@
1
+ import { css } from 'styled-components';
2
+ import { buttonTokens } from '../Button';
3
+ import { baseContent as buttonBase } from '../Button/Button.styles';
4
+ import { tokens } from './IconButton.tokens';
5
+
6
+ // Переопределние токенов из Button
7
+ export var mappingOverride = /*#__PURE__*/"\n ".concat(buttonTokens.buttonPadding, ": 0;\n\n ").concat(buttonTokens.buttonColor, ": var(").concat(tokens.iconButtonColor, ");\n ").concat(buttonTokens.buttonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n\n ").concat(buttonTokens.buttonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n ").concat(buttonTokens.buttonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n\n ").concat(buttonTokens.buttonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n ").concat(buttonTokens.buttonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n\n ").concat(buttonTokens.buttonFontFamily, ": var(").concat(tokens.iconButtonFontFamily, ");\n ").concat(buttonTokens.buttonFontSize, ": var(").concat(tokens.iconButtonFontSize, ");\n ").concat(buttonTokens.buttonFontStyle, ": var(").concat(tokens.iconButtonFontStyle, ");\n ").concat(buttonTokens.buttonFontWeight, ":var(").concat(tokens.iconButtonFontWeight, ");\n ").concat(buttonTokens.buttonLetterSpacing, ": var(").concat(tokens.iconButtonLetterSpacing, ");\n ").concat(buttonTokens.buttonLineHeight, ": var(").concat(tokens.iconButtonLineHeight, ");\n\n ").concat(buttonTokens.buttonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n ").concat(buttonTokens.buttonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n ").concat(buttonTokens.buttonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n\n ").concat(buttonTokens.buttonDisabledOpacity, ": var(").concat(tokens.iconButtonDisabledOpacity, ");\n ").concat(buttonTokens.buttonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n\n ").concat(buttonTokens.buttonSpinnerSize, ": var(").concat(tokens.iconButtonSpinnerSize, ");\n ").concat(buttonTokens.buttonSpinnerColor, ": var(").concat(tokens.iconButtonSpinnerColor, ");\n");
8
+ export var base = /*#__PURE__*/css(["", ";", ";"], buttonBase, mappingOverride);
@@ -0,0 +1,25 @@
1
+ export var tokens = {
2
+ iconButtonColor: '--plasma-icon-button-color',
3
+ iconButtonBackgroundColor: '--plasma-icon-button-background-color',
4
+ iconButtonColorHover: '--plasma-icon-button-color-hover',
5
+ iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
6
+ iconButtonColorActive: '--plasma-icon-button-color-active',
7
+ iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
8
+ iconButtonScaleHover: '--plasma-icon-button-scale-hover',
9
+ iconButtonScaleActive: '---plasma-icon-button-scale-active',
10
+ iconButtonHeight: '--plasma-icon-button-height',
11
+ iconButtonWidth: '--plasma-icon-button-width',
12
+ iconButtonPadding: '--plasma-icon-button-padding',
13
+ iconButtonRadius: '--plasma-icon-button-radius',
14
+ iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
15
+ iconButtonFontFamily: '--plasma-icon-button-font-family',
16
+ iconButtonFontSize: '--plasma-icon-button-font-size',
17
+ iconButtonFontStyle: '--plasma-icon-button-font-style',
18
+ iconButtonFontWeight: '--plasma-icon-button-font-weight',
19
+ iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
20
+ iconButtonLineHeight: '--plasma-icon-button-line-height',
21
+ iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
22
+ iconButtonFocusColor: '--plasma-icon-button-focus-color',
23
+ iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
24
+ iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
25
+ };
@@ -0,0 +1,2 @@
1
+ export { iconButtonRoot, iconButtonConfig } from './IconButton';
2
+ export { tokens as iconButtonTokens } from './IconButton.tokens';
@@ -0,0 +1,39 @@
1
+ import { css } from 'styled-components';
2
+ import { iconButtonTokens } from '../../../../components/IconButton';
3
+ export var config = {
4
+ defaults: {
5
+ view: 'default',
6
+ focused: 'true',
7
+ size: 'm'
8
+ },
9
+ variations: {
10
+ view: {
11
+ "default": /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
12
+ accent: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
13
+ secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
14
+ clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
15
+ success: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
16
+ warning: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
17
+ critical: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
18
+ dark: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
19
+ black: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
20
+ white: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
21
+ },
22
+ size: {
23
+ l: /*#__PURE__*/css(["", ":3.5rem;", ":3.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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
24
+ lr: /*#__PURE__*/css(["", ":3.5rem;", ":3.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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
25
+ m: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
26
+ mr: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
27
+ s: /*#__PURE__*/css(["", ":2.5rem;", ":2.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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
28
+ sr: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
29
+ xs: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
30
+ xsr: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
31
+ },
32
+ disabled: {
33
+ "true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
34
+ },
35
+ focused: {
36
+ "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
37
+ }
38
+ }
39
+ };
@@ -0,0 +1,5 @@
1
+ import { iconButtonConfig } from '../../../../components/IconButton';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './IconButton.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig, config);
5
+ export var IconButton = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,71 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import { disableProps } from '@salutejs/plasma-sb-utils';
4
+
5
+ import { iconButtonConfig } from '../../../../components/IconButton';
6
+ import { mergeConfig } from '../../../../engines';
7
+ import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
+ import { IconChevronLeft } from '../../../../components/_Icon';
9
+
10
+ import { config } from './IconButton.config';
11
+ import { IconButton } from './IconButton';
12
+
13
+ const meta: Meta<typeof IconButton> = {
14
+ title: 'plasma_b2c/IconButton',
15
+ decorators: [WithTheme],
16
+ component: IconButton,
17
+ argTypes: {
18
+ ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
19
+ pin: {
20
+ options: [
21
+ 'square-square',
22
+ 'square-clear',
23
+ 'clear-square',
24
+ 'clear-clear',
25
+ 'clear-circle',
26
+ 'circle-clear',
27
+ 'circle-circle',
28
+ '',
29
+ ],
30
+ control: {
31
+ type: 'select',
32
+ },
33
+ table: { defaultValue: { summary: 'bottom' } },
34
+ },
35
+ },
36
+ };
37
+
38
+ export default meta;
39
+
40
+ const getSizeForIcon = (size) => {
41
+ const map = {
42
+ mr: 's',
43
+ lr: 's',
44
+ m: 's',
45
+ l: 's',
46
+ sr: 's',
47
+ xsr: 'xs',
48
+ };
49
+ if (map[size]) {
50
+ return map[size];
51
+ }
52
+
53
+ return size;
54
+ };
55
+
56
+ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
57
+ args: {
58
+ children: <IconChevronLeft />,
59
+ view: 'default',
60
+ size: 'm',
61
+ disabled: false,
62
+ focused: true,
63
+ isLoading: false,
64
+ },
65
+ argTypes: { ...disableProps(['children']) },
66
+ render: (args) => (
67
+ <IconButton {...args}>
68
+ <IconChevronLeft size={getSizeForIcon(args.size)} />
69
+ </IconButton>
70
+ ),
71
+ };
@@ -0,0 +1,39 @@
1
+ import { css } from 'styled-components';
2
+ import { iconButtonTokens } from '../../../../components/IconButton';
3
+ export var config = {
4
+ defaults: {
5
+ view: 'default',
6
+ focused: 'true',
7
+ size: 'm'
8
+ },
9
+ variations: {
10
+ view: {
11
+ "default": /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
12
+ accent: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
13
+ secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
14
+ clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
15
+ success: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
16
+ warning: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
17
+ critical: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
18
+ dark: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
19
+ black: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
20
+ white: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
21
+ },
22
+ size: {
23
+ l: /*#__PURE__*/css(["", ":3.5rem;", ":3.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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
24
+ lr: /*#__PURE__*/css(["", ":3.5rem;", ":3.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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
25
+ m: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
26
+ mr: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
27
+ s: /*#__PURE__*/css(["", ":2.5rem;", ":2.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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
28
+ sr: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
29
+ xs: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
30
+ xsr: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
31
+ },
32
+ disabled: {
33
+ "true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
34
+ },
35
+ focused: {
36
+ "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
37
+ }
38
+ }
39
+ };
@@ -0,0 +1,5 @@
1
+ import { iconButtonConfig } from '../../../../components/IconButton';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './IconButton.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig, config);
5
+ export var IconButton = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,71 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import { disableProps } from '@salutejs/plasma-sb-utils';
4
+
5
+ import { iconButtonConfig } from '../../../../components/IconButton';
6
+ import { mergeConfig } from '../../../../engines';
7
+ import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
+ import { IconChevronLeft } from '../../../../components/_Icon';
9
+
10
+ import { config } from './IconButton.config';
11
+ import { IconButton } from './IconButton';
12
+
13
+ const meta: Meta<typeof IconButton> = {
14
+ title: 'plasma_web/IconButton',
15
+ decorators: [WithTheme],
16
+ component: IconButton,
17
+ argTypes: {
18
+ ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
19
+ pin: {
20
+ options: [
21
+ 'square-square',
22
+ 'square-clear',
23
+ 'clear-square',
24
+ 'clear-clear',
25
+ 'clear-circle',
26
+ 'circle-clear',
27
+ 'circle-circle',
28
+ '',
29
+ ],
30
+ control: {
31
+ type: 'select',
32
+ },
33
+ table: { defaultValue: { summary: 'bottom' } },
34
+ },
35
+ },
36
+ };
37
+
38
+ export default meta;
39
+
40
+ const getSizeForIcon = (size) => {
41
+ const map = {
42
+ mr: 's',
43
+ lr: 's',
44
+ m: 's',
45
+ l: 's',
46
+ sr: 's',
47
+ xsr: 'xs',
48
+ };
49
+ if (map[size]) {
50
+ return map[size];
51
+ }
52
+
53
+ return size;
54
+ };
55
+
56
+ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
57
+ args: {
58
+ children: <IconChevronLeft />,
59
+ view: 'default',
60
+ size: 'm',
61
+ disabled: false,
62
+ focused: true,
63
+ isLoading: false,
64
+ },
65
+ argTypes: { ...disableProps(['children']) },
66
+ render: (args) => (
67
+ <IconButton {...args}>
68
+ <IconChevronLeft size={getSizeForIcon(args.size)} />
69
+ </IconButton>
70
+ ),
71
+ };
@@ -5,6 +5,7 @@ export * from './engines';
5
5
  export * from './hooks';
6
6
  export * from './utils';
7
7
  export * from './components/Button';
8
+ export * from './components/IconButton';
8
9
  export * from './components/ButtonGroup';
9
10
  export * from './components/Chip';
10
11
  export * from './components/Cell';
@@ -21,4 +21,5 @@ export declare const StyledSpinner: import("@linaria/react").StyledMeta & import
21
21
  size?: undefined;
22
22
  view?: string | undefined;
23
23
  } & import("react").RefAttributes<HTMLDivElement>))>;
24
+ export declare const baseContent: string;
24
25
  //# sourceMappingURL=Button.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAKF,eAAO,MAAM,UAAU,uKAUtB,CAAC;AAGF,eAAO,MAAM,QAAQ;;EAOpB,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC"}
1
+ {"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAKF,eAAO,MAAM,UAAU,uKAUtB,CAAC;AAGF,eAAO,MAAM,QAAQ;;EAOpB,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAGF,eAAO,MAAM,WAAW,QA6FvB,CAAC"}
@@ -0,0 +1,35 @@
1
+ /// <reference types="react" />
2
+ export declare const iconButtonRoot: (Root: import("../..").RootProps<HTMLButtonElement, import("../Button").ButtonProps<HTMLElement>>) => import("react").ForwardRefExoticComponent<import("../Button").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
3
+ export declare const iconButtonConfig: {
4
+ name: string;
5
+ tag: string;
6
+ layout: (Root: import("../..").RootProps<HTMLButtonElement, import("../Button").ButtonProps<HTMLElement>>) => import("react").ForwardRefExoticComponent<import("../Button").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
7
+ base: import("@linaria/core").LinariaClassName;
8
+ variations: {
9
+ view: {
10
+ css: import("@linaria/core").LinariaClassName;
11
+ };
12
+ size: {
13
+ css: import("@linaria/core").LinariaClassName;
14
+ };
15
+ disabled: {
16
+ css: import("@linaria/core").LinariaClassName;
17
+ attrs: boolean;
18
+ };
19
+ focused: {
20
+ css: import("@linaria/core").LinariaClassName;
21
+ };
22
+ blurred: {
23
+ css: import("@linaria/core").LinariaClassName;
24
+ };
25
+ stretching: {
26
+ css: import("@linaria/core").LinariaClassName;
27
+ };
28
+ };
29
+ defaults: {
30
+ view: string;
31
+ size: string;
32
+ stretching: string;
33
+ };
34
+ };
35
+ //# sourceMappingURL=IconButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":";AAUA,eAAO,MAAM,cAAc,kPAAa,CAAC;AAEzC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B5B,CAAC"}
@@ -0,0 +1,3 @@
1
+ export declare const mappingOverride: string;
2
+ export declare const base: import("@linaria/core").LinariaClassName;
3
+ //# sourceMappingURL=IconButton.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,QA6B3B,CAAC;AAEF,eAAO,MAAM,IAAI,0CAGhB,CAAC"}
@@ -0,0 +1,26 @@
1
+ export declare const tokens: {
2
+ iconButtonColor: string;
3
+ iconButtonBackgroundColor: string;
4
+ iconButtonColorHover: string;
5
+ iconButtonBackgroundColorHover: string;
6
+ iconButtonColorActive: string;
7
+ iconButtonBackgroundColorActive: string;
8
+ iconButtonScaleHover: string;
9
+ iconButtonScaleActive: string;
10
+ iconButtonHeight: string;
11
+ iconButtonWidth: string;
12
+ iconButtonPadding: string;
13
+ iconButtonRadius: string;
14
+ iconButtonRadiusCircle: string;
15
+ iconButtonFontFamily: string;
16
+ iconButtonFontSize: string;
17
+ iconButtonFontStyle: string;
18
+ iconButtonFontWeight: string;
19
+ iconButtonLetterSpacing: string;
20
+ iconButtonLineHeight: string;
21
+ iconButtonDisabledOpacity: string;
22
+ iconButtonFocusColor: string;
23
+ iconButtonSpinnerColor: string;
24
+ iconButtonSpinnerSize: string;
25
+ };
26
+ //# sourceMappingURL=IconButton.tokens.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CA4BlB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { iconButtonRoot, iconButtonConfig } from './IconButton';
2
+ export { tokens as iconButtonTokens } from './IconButton.tokens';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
@@ -0,0 +1,38 @@
1
+ export declare const config: {
2
+ defaults: {
3
+ view: string;
4
+ focused: string;
5
+ size: string;
6
+ };
7
+ variations: {
8
+ view: {
9
+ default: import("@linaria/core").LinariaClassName;
10
+ accent: import("@linaria/core").LinariaClassName;
11
+ secondary: import("@linaria/core").LinariaClassName;
12
+ clear: import("@linaria/core").LinariaClassName;
13
+ success: import("@linaria/core").LinariaClassName;
14
+ warning: import("@linaria/core").LinariaClassName;
15
+ critical: import("@linaria/core").LinariaClassName;
16
+ dark: import("@linaria/core").LinariaClassName;
17
+ black: import("@linaria/core").LinariaClassName;
18
+ white: import("@linaria/core").LinariaClassName;
19
+ };
20
+ size: {
21
+ l: import("@linaria/core").LinariaClassName;
22
+ lr: import("@linaria/core").LinariaClassName;
23
+ m: import("@linaria/core").LinariaClassName;
24
+ mr: import("@linaria/core").LinariaClassName;
25
+ s: import("@linaria/core").LinariaClassName;
26
+ sr: import("@linaria/core").LinariaClassName;
27
+ xs: import("@linaria/core").LinariaClassName;
28
+ xsr: import("@linaria/core").LinariaClassName;
29
+ };
30
+ disabled: {
31
+ true: import("@linaria/core").LinariaClassName;
32
+ };
33
+ focused: {
34
+ true: import("@linaria/core").LinariaClassName;
35
+ };
36
+ };
37
+ };
38
+ //# sourceMappingURL=IconButton.config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/IconButton/IconButton.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsNlB,CAAC"}
@@ -0,0 +1,32 @@
1
+ /// <reference types="react" />
2
+ export declare const IconButton: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
3
+ view: {
4
+ default: import("@linaria/core").LinariaClassName;
5
+ accent: import("@linaria/core").LinariaClassName;
6
+ secondary: import("@linaria/core").LinariaClassName;
7
+ clear: import("@linaria/core").LinariaClassName;
8
+ success: import("@linaria/core").LinariaClassName;
9
+ warning: import("@linaria/core").LinariaClassName;
10
+ critical: import("@linaria/core").LinariaClassName;
11
+ dark: import("@linaria/core").LinariaClassName;
12
+ black: import("@linaria/core").LinariaClassName;
13
+ white: import("@linaria/core").LinariaClassName;
14
+ };
15
+ size: {
16
+ l: import("@linaria/core").LinariaClassName;
17
+ lr: import("@linaria/core").LinariaClassName;
18
+ m: import("@linaria/core").LinariaClassName;
19
+ mr: import("@linaria/core").LinariaClassName;
20
+ s: import("@linaria/core").LinariaClassName;
21
+ sr: import("@linaria/core").LinariaClassName;
22
+ xs: import("@linaria/core").LinariaClassName;
23
+ xsr: import("@linaria/core").LinariaClassName;
24
+ };
25
+ disabled: {
26
+ true: import("@linaria/core").LinariaClassName;
27
+ };
28
+ focused: {
29
+ true: import("@linaria/core").LinariaClassName;
30
+ };
31
+ }> & import("../../../..").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
32
+ //# sourceMappingURL=IconButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/IconButton/IconButton.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uGAA0B,CAAC"}
@@ -0,0 +1,38 @@
1
+ export declare const config: {
2
+ defaults: {
3
+ view: string;
4
+ focused: string;
5
+ size: string;
6
+ };
7
+ variations: {
8
+ view: {
9
+ default: import("@linaria/core").LinariaClassName;
10
+ accent: import("@linaria/core").LinariaClassName;
11
+ secondary: import("@linaria/core").LinariaClassName;
12
+ clear: import("@linaria/core").LinariaClassName;
13
+ success: import("@linaria/core").LinariaClassName;
14
+ warning: import("@linaria/core").LinariaClassName;
15
+ critical: import("@linaria/core").LinariaClassName;
16
+ dark: import("@linaria/core").LinariaClassName;
17
+ black: import("@linaria/core").LinariaClassName;
18
+ white: import("@linaria/core").LinariaClassName;
19
+ };
20
+ size: {
21
+ l: import("@linaria/core").LinariaClassName;
22
+ lr: import("@linaria/core").LinariaClassName;
23
+ m: import("@linaria/core").LinariaClassName;
24
+ mr: import("@linaria/core").LinariaClassName;
25
+ s: import("@linaria/core").LinariaClassName;
26
+ sr: import("@linaria/core").LinariaClassName;
27
+ xs: import("@linaria/core").LinariaClassName;
28
+ xsr: import("@linaria/core").LinariaClassName;
29
+ };
30
+ disabled: {
31
+ true: import("@linaria/core").LinariaClassName;
32
+ };
33
+ focused: {
34
+ true: import("@linaria/core").LinariaClassName;
35
+ };
36
+ };
37
+ };
38
+ //# sourceMappingURL=IconButton.config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/IconButton/IconButton.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsNlB,CAAC"}
@@ -0,0 +1,32 @@
1
+ /// <reference types="react" />
2
+ export declare const IconButton: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
3
+ view: {
4
+ default: import("@linaria/core").LinariaClassName;
5
+ accent: import("@linaria/core").LinariaClassName;
6
+ secondary: import("@linaria/core").LinariaClassName;
7
+ clear: import("@linaria/core").LinariaClassName;
8
+ success: import("@linaria/core").LinariaClassName;
9
+ warning: import("@linaria/core").LinariaClassName;
10
+ critical: import("@linaria/core").LinariaClassName;
11
+ dark: import("@linaria/core").LinariaClassName;
12
+ black: import("@linaria/core").LinariaClassName;
13
+ white: import("@linaria/core").LinariaClassName;
14
+ };
15
+ size: {
16
+ l: import("@linaria/core").LinariaClassName;
17
+ lr: import("@linaria/core").LinariaClassName;
18
+ m: import("@linaria/core").LinariaClassName;
19
+ mr: import("@linaria/core").LinariaClassName;
20
+ s: import("@linaria/core").LinariaClassName;
21
+ sr: import("@linaria/core").LinariaClassName;
22
+ xs: import("@linaria/core").LinariaClassName;
23
+ xsr: import("@linaria/core").LinariaClassName;
24
+ };
25
+ disabled: {
26
+ true: import("@linaria/core").LinariaClassName;
27
+ };
28
+ focused: {
29
+ true: import("@linaria/core").LinariaClassName;
30
+ };
31
+ }> & import("../../../..").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
32
+ //# sourceMappingURL=IconButton.d.ts.map