@salutejs/plasma-new-hope 0.141.0-canary.1422.10721189833.0 → 0.141.0-canary.1422.10773738088.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. package/emotion/cjs/components/Combobox/Combobox.template-doc.mdx +345 -0
  2. package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.config.js +39 -0
  3. package/{styled-components/cjs/examples/plasma_b2c/components/Combobox/ComboboxNew → emotion/cjs/examples/plasma_b2c/components/Combobox}/Combobox.js +2 -2
  4. package/emotion/{es/examples/plasma_b2c/components/Combobox/ComboboxNew → cjs/examples/plasma_b2c/components/Combobox}/Combobox.stories.tsx +3 -3
  5. package/emotion/cjs/examples/plasma_b2c/components/Combobox/Legacy/Combobox.config.js +25 -0
  6. package/emotion/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.stories.tsx +21 -34
  7. package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.config.js +39 -0
  8. package/emotion/cjs/examples/{plasma_b2c/components/Combobox/ComboboxNew → plasma_web/components/Combobox}/Combobox.js +2 -2
  9. package/emotion/cjs/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.stories.tsx → Combobox.stories.tsx} +3 -3
  10. package/emotion/cjs/examples/plasma_web/components/Combobox/Legacy/Combobox.config.js +25 -0
  11. package/emotion/{es/examples/plasma_b2c/components/Combobox/ComboboxOld → cjs/examples/plasma_web/components/Combobox/Legacy}/Combobox.stories.tsx +21 -34
  12. package/emotion/es/components/Combobox/Combobox.template-doc.mdx +345 -0
  13. package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.config.js +33 -0
  14. package/emotion/es/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  15. package/emotion/{cjs/examples/plasma_b2c/components/Combobox/ComboboxNew → es/examples/plasma_b2c/components/Combobox}/Combobox.stories.tsx +3 -3
  16. package/emotion/es/examples/plasma_b2c/components/Combobox/Legacy/Combobox.config.js +19 -0
  17. package/emotion/es/examples/{plasma_web/components/Combobox/ComboboxOld → plasma_b2c/components/Combobox/Legacy}/Combobox.stories.tsx +21 -34
  18. package/emotion/es/examples/plasma_web/components/Combobox/Combobox.config.js +33 -0
  19. package/emotion/es/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  20. package/emotion/es/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.stories.tsx → Combobox.stories.tsx} +3 -3
  21. package/emotion/es/examples/plasma_web/components/Combobox/Legacy/Combobox.config.js +19 -0
  22. package/emotion/{cjs/examples/plasma_web/components/Combobox/ComboboxOld → es/examples/plasma_web/components/Combobox/Legacy}/Combobox.stories.tsx +21 -34
  23. package/package.json +2 -2
  24. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +345 -0
  25. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.config.js → Combobox.config.js} +2 -2
  26. package/{emotion/cjs/examples/plasma_web/components/Combobox/ComboboxNew → styled-components/cjs/examples/plasma_b2c/components/Combobox}/Combobox.js +2 -2
  27. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +368 -0
  28. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  29. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  30. package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.config.js +39 -0
  31. package/styled-components/cjs/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  32. package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +368 -0
  33. package/styled-components/cjs/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  34. package/styled-components/cjs/examples/plasma_web/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  35. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +345 -0
  36. package/styled-components/es/examples/{plasma_web/components/Combobox/ComboboxNew → plasma_b2c/components/Combobox}/Combobox.config.js +2 -2
  37. package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  38. package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +368 -0
  39. package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  40. package/styled-components/es/examples/plasma_b2c/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  41. package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.config.js +33 -0
  42. package/styled-components/es/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  43. package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +368 -0
  44. package/styled-components/es/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  45. package/styled-components/es/examples/plasma_web/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  46. package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +0 -2
  47. package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
  48. package/types/examples/plasma_b2c/components/Combobox/Combobox.config.d.ts.map +1 -0
  49. package/types/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.d.ts → Combobox.d.ts} +3 -3
  50. package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts.map +1 -0
  51. package/types/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts.map +1 -1
  52. package/types/examples/plasma_b2c/components/Combobox/Legacy/Combobox.d.ts.map +1 -0
  53. package/types/examples/plasma_web/components/Combobox/Combobox.config.d.ts.map +1 -0
  54. package/types/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.d.ts → Combobox.d.ts} +3 -3
  55. package/types/examples/plasma_web/components/Combobox/Combobox.d.ts.map +1 -0
  56. package/types/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts.map +1 -1
  57. package/types/examples/plasma_web/components/Combobox/Legacy/Combobox.d.ts.map +1 -0
  58. package/emotion/cjs/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.js +0 -39
  59. package/emotion/cjs/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.config.js +0 -25
  60. package/emotion/cjs/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.js +0 -39
  61. package/emotion/cjs/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.config.js +0 -25
  62. package/emotion/es/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.js +0 -33
  63. package/emotion/es/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.config.js +0 -19
  64. package/emotion/es/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.js +0 -33
  65. package/emotion/es/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.config.js +0 -19
  66. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  67. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  68. package/styled-components/cjs/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.js +0 -39
  69. package/styled-components/cjs/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  70. package/styled-components/cjs/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  71. package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.js +0 -33
  72. package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  73. package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  74. package/styled-components/es/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  75. package/styled-components/es/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  76. package/types/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.d.ts.map +0 -1
  77. package/types/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.d.ts.map +0 -1
  78. package/types/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.d.ts.map +0 -1
  79. package/types/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.d.ts.map +0 -1
  80. package/types/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.d.ts.map +0 -1
  81. package/types/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.d.ts.map +0 -1
  82. /package/emotion/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  83. /package/emotion/cjs/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  84. /package/emotion/es/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  85. /package/emotion/es/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  86. /package/styled-components/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  87. /package/styled-components/cjs/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  88. /package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  89. /package/styled-components/es/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  90. /package/types/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.config.d.ts → Combobox.config.d.ts} +0 -0
  91. /package/types/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts +0 -0
  92. /package/types/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.d.ts +0 -0
  93. /package/types/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.config.d.ts → Combobox.config.d.ts} +0 -0
  94. /package/types/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts +0 -0
  95. /package/types/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.d.ts +0 -0
@@ -0,0 +1,33 @@
1
+ import { css } from 'styled-components';
2
+ import { comboboxNewTokens as tokens } from '../../../../components/Combobox';
3
+ export var config = {
4
+ defaults: {
5
+ view: 'default',
6
+ size: 'm',
7
+ labelPlacement: 'outer'
8
+ },
9
+ variations: {
10
+ view: {
11
+ "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-accent);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], tokens.textFieldColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
12
+ positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], tokens.textFieldColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
13
+ warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], tokens.textFieldColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
14
+ negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], tokens.textFieldColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly)
15
+ },
16
+ size: {
17
+ l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":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;", ":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.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);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1rem;", ":0.125rem;", ":0.875rem;", ":1.5rem;", ":1rem 1rem 1rem 0.875rem;", ":0.75rem 1rem 0.75rem 0.875rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.5rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":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);", ":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);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.textFieldFontFamily, tokens.textFieldFontSize, tokens.textFieldFontStyle, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLabelOffset, tokens.textFieldLabelFontFamily, tokens.textFieldLabelFontSize, tokens.textFieldLabelFontStyle, tokens.textFieldLabelFontWeight, tokens.textFieldLabelLetterSpacing, tokens.textFieldLabelLineHeight, tokens.textFieldLeftHelperOffset, tokens.textFieldLeftHelperFontFamily, tokens.textFieldLeftHelperFontSize, tokens.textFieldLeftHelperFontStyle, tokens.textFieldLeftHelperFontWeight, tokens.textFieldLeftHelperLetterSpacing, tokens.textFieldLeftHelperLineHeight, tokens.textFieldLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, tokens.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPaddingRight, tokens.textFieldChipPaddingLeft, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.emptyStatePadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconMargin, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor, tokens.indicatorSize),
18
+ m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.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-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":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.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);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.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-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.875rem 1rem 0.875rem 1rem;", ":0.125rem;", ":0.75rem;", ":1.5rem;", ":0.75rem 0.75rem 0.75rem 0.75rem;", ":0.5rem 0.75rem 0.5rem 0.75rem;", ":0.625rem;", ":0 0.375rem 0 0;", ":1.5rem;", ":1.5rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":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);", ":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);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.textFieldFontFamily, tokens.textFieldFontSize, tokens.textFieldFontStyle, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLabelOffset, tokens.textFieldLabelFontFamily, tokens.textFieldLabelFontSize, tokens.textFieldLabelFontStyle, tokens.textFieldLabelFontWeight, tokens.textFieldLabelLetterSpacing, tokens.textFieldLabelLineHeight, tokens.textFieldLeftHelperOffset, tokens.textFieldLeftHelperFontFamily, tokens.textFieldLeftHelperFontSize, tokens.textFieldLeftHelperFontStyle, tokens.textFieldLeftHelperFontWeight, tokens.textFieldLeftHelperLetterSpacing, tokens.textFieldLeftHelperLineHeight, tokens.textFieldLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, tokens.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPaddingRight, tokens.textFieldChipPaddingLeft, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.emptyStatePadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconMargin, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor, tokens.indicatorSize),
19
+ s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.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);", ":0.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-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.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);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":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.625rem 0.875rem 0.625rem 0.875rem;", ":0.125rem;", ":0.625rem;", ":1.5rem;", ":0.5rem 0.75rem 0.5rem 0.675rem;", ":0.25rem 0.75rem 0.25rem 0.675rem;", ":0.5rem;", ":1.5rem;", ":1rem;", ":0 0.375rem 0 0;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":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);", ":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.25rem;", ":0.875rem;", ":0.375rem;", ":0.25rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.textFieldFontFamily, tokens.textFieldFontSize, tokens.textFieldFontStyle, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLabelOffset, tokens.textFieldLabelFontFamily, tokens.textFieldLabelFontSize, tokens.textFieldLabelFontStyle, tokens.textFieldLabelFontWeight, tokens.textFieldLabelLetterSpacing, tokens.textFieldLabelLineHeight, tokens.textFieldLeftHelperOffset, tokens.textFieldLeftHelperFontFamily, tokens.textFieldLeftHelperFontSize, tokens.textFieldLeftHelperFontStyle, tokens.textFieldLeftHelperFontWeight, tokens.textFieldLeftHelperLetterSpacing, tokens.textFieldLeftHelperLineHeight, tokens.textFieldLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, tokens.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPaddingRight, tokens.textFieldChipPaddingLeft, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.emptyStatePadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.itemIconMargin, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor, tokens.indicatorSize),
20
+ xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":0.0625rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.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);", ":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-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.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);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":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);", ":0.5rem 0.625rem 0.5rem 0.625rem;", ":0.125rem;", ":0.5rem;", ":1rem;", ":0.5rem 0.5rem 0.5rem 0.375rem;", ":0.25rem 0.5rem 0.25rem 0.375rem;", ":0.375rem;", ":0 0.25rem 0 0;", ":1rem;", ":1rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.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);", ":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);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.textFieldFontFamily, tokens.textFieldFontSize, tokens.textFieldFontStyle, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLabelOffset, tokens.textFieldLabelFontFamily, tokens.textFieldLabelFontSize, tokens.textFieldLabelFontStyle, tokens.textFieldLabelFontWeight, tokens.textFieldLabelLetterSpacing, tokens.textFieldLabelLineHeight, tokens.textFieldLeftHelperOffset, tokens.textFieldLeftHelperFontFamily, tokens.textFieldLeftHelperFontSize, tokens.textFieldLeftHelperFontStyle, tokens.textFieldLeftHelperFontWeight, tokens.textFieldLeftHelperLetterSpacing, tokens.textFieldLeftHelperLineHeight, tokens.textFieldLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, tokens.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPaddingRight, tokens.textFieldChipPaddingLeft, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.emptyStatePadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconMargin, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor, tokens.indicatorSize)
21
+ },
22
+ labelPlacement: {
23
+ inner: /*#__PURE__*/css(["", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":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);"], tokens.textFieldPlaceholderColor, tokens.textFieldLabelInnerFontFamily, tokens.textFieldLabelInnerFontSize, tokens.textFieldLabelInnerFontStyle, tokens.textFieldLabelInnerFontWeight, tokens.textFieldLabelInnerLetterSpacing, tokens.textFieldLabelInnerLineHeight),
24
+ outer: /*#__PURE__*/css([""])
25
+ },
26
+ disabled: {
27
+ "true": /*#__PURE__*/css(["", ":0.4;"], tokens.textFieldDisabledOpacity)
28
+ },
29
+ readOnly: {
30
+ "true": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldBorderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
31
+ }
32
+ }
33
+ };
@@ -1,5 +1,5 @@
1
- import { component, mergeConfig } from '../../../../../engines';
2
- import { comboboxNewConfig } from '../../../../..';
1
+ import { component, mergeConfig } from '../../../../engines';
2
+ import { comboboxNewConfig } from '../../../..';
3
3
  import { config } from './Combobox.config';
4
4
  var mergedConfig = /*#__PURE__*/mergeConfig(comboboxNewConfig, config);
5
5
  var Combobox = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,368 @@
1
+ import React, { useState } from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+
5
+ import { WithTheme } from '../../../_helpers';
6
+ import { IconDone } from '../../../../components/_Icon';
7
+
8
+ import { Combobox } from './Combobox';
9
+
10
+ type StorySelectProps = ComponentProps<typeof Combobox> & {
11
+ enableContentLeft?: boolean;
12
+ };
13
+
14
+ const view = ['default', 'positive', 'warning', 'negative'];
15
+ const size = ['xs', 's', 'm', 'l'];
16
+ const labelPlacement = ['inner', 'outer'];
17
+ const variant = ['normal', 'tight'];
18
+
19
+ const meta: Meta<StorySelectProps> = {
20
+ title: 'plasma_web/Combobox',
21
+ decorators: [WithTheme],
22
+ component: Combobox,
23
+ argTypes: {
24
+ size: {
25
+ options: size,
26
+ control: {
27
+ type: 'select',
28
+ },
29
+ },
30
+ view: {
31
+ options: view,
32
+ control: {
33
+ type: 'select',
34
+ },
35
+ },
36
+ labelPlacement: {
37
+ options: labelPlacement,
38
+ control: {
39
+ type: 'select',
40
+ },
41
+ },
42
+ variant: {
43
+ options: variant,
44
+ control: {
45
+ type: 'select',
46
+ },
47
+ },
48
+ listWidth: {
49
+ control: {
50
+ type: 'text',
51
+ },
52
+ },
53
+ listOverflow: {
54
+ control: {
55
+ type: 'text',
56
+ },
57
+ },
58
+ listHeight: {
59
+ control: {
60
+ type: 'text',
61
+ },
62
+ },
63
+ },
64
+ args: {
65
+ label: 'Label',
66
+ labelPlacement: 'outer',
67
+ placeholder: 'Placeholder',
68
+ helperText: 'Helper text',
69
+ size: 'm',
70
+ view: 'default',
71
+ enableContentLeft: false,
72
+ isTargetAmount: false,
73
+ variant: 'normal',
74
+ disabled: false,
75
+ readOnly: false,
76
+ alwaysOpened: false,
77
+ },
78
+ parameters: {
79
+ controls: {
80
+ include: [
81
+ 'size',
82
+ 'view',
83
+ 'enableContentLeft',
84
+ 'label',
85
+ 'labelPlacement',
86
+ 'placeholder',
87
+ 'helperText',
88
+ 'isTargetAmount',
89
+ 'closeAfterSelect',
90
+ 'alwaysOpened',
91
+ 'variant',
92
+ 'disabled',
93
+ 'readOnly',
94
+ 'listWidth',
95
+ 'listOverflow',
96
+ 'listHeight',
97
+ ],
98
+ },
99
+ },
100
+ };
101
+
102
+ export default meta;
103
+
104
+ const items = [
105
+ {
106
+ value: 'north_america',
107
+ label: 'Северная Америка',
108
+ },
109
+ {
110
+ value: 'south_america',
111
+ label: 'Южная Америка',
112
+ items: [
113
+ {
114
+ value: 'brazil',
115
+ label: 'Бразилия',
116
+ items: [
117
+ {
118
+ value: 'rio_de_janeiro',
119
+ label: 'Рио-де-Жанейро',
120
+ },
121
+ {
122
+ value: 'sao_paulo',
123
+ label: 'Сан-Паулу',
124
+ },
125
+ ],
126
+ },
127
+ {
128
+ value: 'argentina',
129
+ label: 'Аргентина',
130
+ items: [
131
+ {
132
+ value: 'buenos_aires',
133
+ label: 'Буэнос-Айрес',
134
+ },
135
+ {
136
+ value: 'cordoba',
137
+ label: 'Кордова',
138
+ },
139
+ ],
140
+ },
141
+ {
142
+ value: 'colombia',
143
+ label: 'Колумбия',
144
+ items: [
145
+ {
146
+ value: 'bogota',
147
+ label: 'Богота',
148
+ },
149
+ {
150
+ value: 'medellin',
151
+ label: 'Медельин',
152
+ },
153
+ ],
154
+ },
155
+ ],
156
+ },
157
+ {
158
+ value: 'europe',
159
+ label: 'Европа',
160
+ items: [
161
+ {
162
+ value: 'france',
163
+ label: 'Франция',
164
+ items: [
165
+ {
166
+ value: 'paris',
167
+ label: 'Париж',
168
+ },
169
+ {
170
+ value: 'lyon',
171
+ label: 'Лион',
172
+ },
173
+ ],
174
+ },
175
+ {
176
+ value: 'germany',
177
+ label: 'Германия',
178
+ items: [
179
+ {
180
+ value: 'berlin',
181
+ label: 'Берлин',
182
+ },
183
+ {
184
+ value: 'munich',
185
+ label: 'Мюнхен',
186
+ },
187
+ ],
188
+ },
189
+ {
190
+ value: 'italy',
191
+ label: 'Италия',
192
+ items: [
193
+ {
194
+ value: 'rome',
195
+ label: 'Рим',
196
+ },
197
+ {
198
+ value: 'milan',
199
+ label: 'Милан',
200
+ },
201
+ ],
202
+ },
203
+ {
204
+ value: 'spain',
205
+ label: 'Испания',
206
+ items: [
207
+ {
208
+ value: 'madrid',
209
+ label: 'Мадрид',
210
+ },
211
+ {
212
+ value: 'barcelona',
213
+ label: 'Барселона',
214
+ },
215
+ ],
216
+ },
217
+ {
218
+ value: 'united_kingdom',
219
+ label: 'Великобритания',
220
+ items: [
221
+ {
222
+ value: 'london',
223
+ label: 'Лондон',
224
+ },
225
+ {
226
+ value: 'manchester',
227
+ label: 'Манчестер',
228
+ },
229
+ ],
230
+ },
231
+ ],
232
+ },
233
+ {
234
+ value: 'asia',
235
+ label: 'Азия',
236
+ items: [
237
+ {
238
+ value: 'china',
239
+ label: 'Китай',
240
+ items: [
241
+ {
242
+ value: 'beijing',
243
+ label: 'Пекин',
244
+ },
245
+ {
246
+ value: 'shanghai',
247
+ label: 'Шанхай',
248
+ },
249
+ ],
250
+ },
251
+ {
252
+ value: 'japan',
253
+ label: 'Япония',
254
+ items: [
255
+ {
256
+ value: 'tokyo',
257
+ label: 'Токио',
258
+ },
259
+ {
260
+ value: 'osaka',
261
+ label: 'Осака',
262
+ },
263
+ ],
264
+ },
265
+ {
266
+ value: 'india',
267
+ label: 'Индия',
268
+ items: [
269
+ {
270
+ value: 'delhi',
271
+ label: 'Дели',
272
+ },
273
+ {
274
+ value: 'mumbai',
275
+ label: 'Мумбаи',
276
+ },
277
+ ],
278
+ },
279
+ {
280
+ value: 'south_korea',
281
+ label: 'Южная Корея',
282
+ items: [
283
+ {
284
+ value: 'seoul',
285
+ label: 'Сеул',
286
+ },
287
+ {
288
+ value: 'busan',
289
+ label: 'Пусан',
290
+ },
291
+ ],
292
+ },
293
+ {
294
+ value: 'thailand',
295
+ label: 'Таиланд',
296
+ items: [
297
+ {
298
+ value: 'bangkok',
299
+ label: 'Бангкок',
300
+ },
301
+ {
302
+ value: 'phuket',
303
+ label: 'Пхукет',
304
+ },
305
+ ],
306
+ },
307
+ ],
308
+ },
309
+ {
310
+ value: 'africa',
311
+ label: 'Африка',
312
+ disabled: true,
313
+ },
314
+ ];
315
+
316
+ const SingleStory = (args: StorySelectProps) => {
317
+ const [value, setValue] = useState('');
318
+
319
+ return (
320
+ <div style={{ width: '400px' }}>
321
+ <Combobox
322
+ {...args}
323
+ items={items}
324
+ value={value}
325
+ onChange={setValue}
326
+ contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
327
+ autoComplete="off"
328
+ />
329
+ </div>
330
+ );
331
+ };
332
+
333
+ export const Single: StoryObj<StorySelectProps> = {
334
+ render: (args) => <SingleStory {...args} />,
335
+ args: {
336
+ closeAfterSelect: true,
337
+ },
338
+ parameters: {
339
+ controls: {
340
+ exclude: ['isTargetAmount'],
341
+ },
342
+ },
343
+ };
344
+
345
+ const MultipleStory = (args: StorySelectProps) => {
346
+ const [value, setValue] = useState([]);
347
+
348
+ return (
349
+ <div style={{ width: '400px' }}>
350
+ <Combobox
351
+ {...args}
352
+ multiple
353
+ items={items}
354
+ value={value}
355
+ onChange={setValue}
356
+ contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
357
+ autoComplete="off"
358
+ />
359
+ </div>
360
+ );
361
+ };
362
+
363
+ export const Multiple: StoryObj<StorySelectProps> = {
364
+ render: (args) => <MultipleStory {...args} />,
365
+ args: {
366
+ closeAfterSelect: false,
367
+ },
368
+ };
@@ -13,7 +13,7 @@ export var config = {
13
13
  l: /*#__PURE__*/css(["", ":100%;", ":auto;", ":0.875rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":1rem;", ":0;", ":1rem;", ":auto;", ":1.5rem;", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.75rem;", ":1.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.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1rem;", ":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);", ":1rem;", ":3.5rem;", ":100%;", ":0.875rem;", ":0 3.5rem 0 1.5rem;", ":0 3.625rem 0 0.375rem;", ":0 3.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":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);", ":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);"], comboboxTokens.width, comboboxTokens.height, comboboxTokens.borderRadius, comboboxTokens.paddingTop, comboboxTokens.paddingRight, comboboxTokens.paddingBottom, comboboxTokens.paddingLeft, comboboxTokens.dividerColor, comboboxTokens.dividerHeight, comboboxTokens.dividerMarginTop, comboboxTokens.dividerMarginRight, comboboxTokens.dividerMarginBottom, comboboxTokens.dividerMarginLeft, comboboxTokens.itemWidth, comboboxTokens.itemHeight, comboboxTokens.itemPaddingTop, comboboxTokens.itemPaddingRight, comboboxTokens.itemPaddingBottom, comboboxTokens.itemPaddingLeft, comboboxTokens.itemBorderRadius, comboboxTokens.itemContentLeftWidth, comboboxTokens.itemFontFamily, comboboxTokens.itemFontSize, comboboxTokens.itemFontStyle, comboboxTokens.itemFontWeightBold, comboboxTokens.itemFontLetterSpacing, comboboxTokens.itemFontLineHeight, comboboxTokens.chipGap, comboboxTokens.chipBorderRadius, comboboxTokens.chipWidth, comboboxTokens.chipHeight, comboboxTokens.chipPaddingRight, comboboxTokens.chipPaddingLeft, comboboxTokens.chipClearContentMarginLeft, comboboxTokens.chipClearContentMarginRight, comboboxTokens.chipCloseIconSize, comboboxTokens.chipFontFamily, comboboxTokens.chipFontSize, comboboxTokens.chipFontStyle, comboboxTokens.chipFontWeight, comboboxTokens.chipLetterSpacing, comboboxTokens.chipLineHeight, comboboxTokens.targetArrowRight, comboboxTokens.targetHeight, comboboxTokens.targetWidth, comboboxTokens.targetRadius, comboboxTokens.targetPadding, comboboxTokens.targetPaddingHasChips, comboboxTokens.targetPaddingWithInput, comboboxTokens.targetInnerTop, comboboxTokens.targetLabelInnerTop, comboboxTokens.targetFontFamily, comboboxTokens.targetFontSize, comboboxTokens.targetFontStyle, comboboxTokens.targetFontWeight, comboboxTokens.targetLetterSpacing, comboboxTokens.targetLineHeight, comboboxTokens.targetLabelInnerFontFamily, comboboxTokens.targetLabelInnerFontSize, comboboxTokens.targetLabelInnerFontStyle, comboboxTokens.targetLabelInnerFontWeight, comboboxTokens.targetLabelInnerLetterSpacing, comboboxTokens.targetLabelInnerLineHeight)
14
14
  },
15
15
  view: {
16
- "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-active);", ":var(--text-accent);", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], comboboxTokens.targetColor, comboboxTokens.targetLabelColor, comboboxTokens.targetArrowColor, comboboxTokens.targetBorderColor, comboboxTokens.targetBorderColorHover, comboboxTokens.targetBorderColorActive, comboboxTokens.targetBorderColorOpen, comboboxTokens.background, comboboxTokens.boxShadow, comboboxTokens.itemBackground, comboboxTokens.itemBackgroundHover, comboboxTokens.itemBackgroundSelectedHover, comboboxTokens.itemColor, comboboxTokens.itemContentLeftColor, comboboxTokens.chipCloseIconColor, comboboxTokens.chipColor, comboboxTokens.chipBackground, comboboxTokens.chipColorHover, comboboxTokens.chipBackgroundHover, comboboxTokens.chipColorActive, comboboxTokens.chipBackgroundActive, comboboxTokens.chipBackgroundReadOnly, comboboxTokens.chipColorReadOnly, comboboxTokens.chipBackgroundReadOnlyHover, comboboxTokens.chipColorReadOnlyHover, comboboxTokens.chipOpacityReadonly, comboboxTokens.disabledOpacity, comboboxTokens.focusColor)
16
+ "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-active);", ":var(--text-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], comboboxTokens.targetColor, comboboxTokens.targetLabelColor, comboboxTokens.targetArrowColor, comboboxTokens.targetBorderColor, comboboxTokens.targetBorderColorHover, comboboxTokens.targetBorderColorActive, comboboxTokens.targetBorderColorOpen, comboboxTokens.background, comboboxTokens.boxShadow, comboboxTokens.itemBackground, comboboxTokens.itemBackgroundHover, comboboxTokens.itemBackgroundSelectedHover, comboboxTokens.itemColor, comboboxTokens.itemContentLeftColor, comboboxTokens.chipCloseIconColor, comboboxTokens.chipColor, comboboxTokens.chipBackground, comboboxTokens.chipColorHover, comboboxTokens.chipBackgroundHover, comboboxTokens.chipColorActive, comboboxTokens.chipBackgroundActive, comboboxTokens.chipBackgroundReadOnly, comboboxTokens.chipColorReadOnly, comboboxTokens.chipBackgroundReadOnlyHover, comboboxTokens.chipColorReadOnlyHover, comboboxTokens.chipOpacityReadonly, comboboxTokens.disabledOpacity, comboboxTokens.focusColor)
17
17
  }
18
18
  }
19
19
  };