@primer/components 0.0.0-202111255030 → 0.0.0-202111301520

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (168) hide show
  1. package/dist/browser.esm.js +2 -2209
  2. package/dist/browser.esm.js.map +1 -1
  3. package/dist/browser.umd.js +2 -2209
  4. package/dist/browser.umd.js.map +1 -1
  5. package/lib/ActionList/Header.js +1 -1
  6. package/lib/ActionList/Item.js +10 -10
  7. package/lib/ActionList/List.js +1 -1
  8. package/lib/ActionList2/Divider.d.ts +3 -2
  9. package/lib/ActionList2/Divider.js +10 -5
  10. package/lib/ActionList2/Item.js +22 -6
  11. package/lib/ActionList2/List.js +12 -2
  12. package/lib/ActionList2/MenuContext.d.ts +10 -0
  13. package/lib/ActionList2/MenuContext.js +15 -0
  14. package/lib/ActionList2/Selection.js +11 -0
  15. package/lib/ActionList2/index.d.ts +1 -2
  16. package/lib/ActionMenu2.d.ts +313 -0
  17. package/lib/ActionMenu2.js +91 -0
  18. package/lib/Autocomplete/Autocomplete.d.ts +2 -1
  19. package/lib/Autocomplete/AutocompleteInput.d.ts +2 -1
  20. package/lib/BaseStyles.js +2 -20
  21. package/lib/BorderBox.js +1 -1
  22. package/lib/Box.js +1 -1
  23. package/lib/Breadcrumbs.js +3 -3
  24. package/lib/Button/Button.d.ts +2 -2
  25. package/lib/Button/Button.js +1 -1
  26. package/lib/Button/ButtonClose.d.ts +2 -2
  27. package/lib/Button/ButtonDanger.d.ts +2 -2
  28. package/lib/Button/ButtonGroup.js +1 -1
  29. package/lib/Button/ButtonInvisible.d.ts +2 -2
  30. package/lib/Button/ButtonOutline.d.ts +2 -2
  31. package/lib/Button/ButtonPrimary.d.ts +2 -2
  32. package/lib/Checkbox.js +1 -1
  33. package/lib/CircleOcticon.d.ts +35 -35
  34. package/lib/Details.js +1 -1
  35. package/lib/Dialog.d.ts +37 -37
  36. package/lib/Dropdown.d.ts +6 -6
  37. package/lib/DropdownMenu/DropdownButton.d.ts +6 -3
  38. package/lib/FilterList.d.ts +1 -1
  39. package/lib/FilteredActionList/FilteredActionList.js +1 -1
  40. package/lib/Flex.js +1 -1
  41. package/lib/LabelGroup.js +1 -1
  42. package/lib/NewButton/button.d.ts +11 -2
  43. package/lib/NewButton/button.js +283 -6
  44. package/lib/NewButton/index.d.ts +11 -6
  45. package/lib/NewButton/index.js +0 -18
  46. package/lib/NewButton/types.d.ts +8 -28
  47. package/lib/NewButton/types.js +1 -19
  48. package/lib/Overlay.js +1 -1
  49. package/lib/Pagination/Pagination.js +2 -2
  50. package/lib/Position.d.ts +4 -4
  51. package/lib/Position.js +1 -1
  52. package/lib/SelectMenu/SelectMenu.d.ts +11 -10
  53. package/lib/SelectMenu/SelectMenu.js +1 -1
  54. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  55. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  56. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  57. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  58. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  59. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  60. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  61. package/lib/SelectMenu/SelectMenuTabs.js +1 -1
  62. package/lib/StateLabel.js +1 -1
  63. package/lib/StyledOcticon.js +1 -1
  64. package/lib/SubNav.js +3 -3
  65. package/lib/TextInputWithTokens.d.ts +2 -1
  66. package/lib/ThemeProvider.d.ts +1 -0
  67. package/lib/ThemeProvider.js +17 -4
  68. package/lib/Timeline.js +4 -4
  69. package/lib/Token/AvatarToken.d.ts +1 -1
  70. package/lib/Token/AvatarToken.js +1 -1
  71. package/lib/Token/IssueLabelToken.d.ts +1 -1
  72. package/lib/Token/Token.d.ts +1 -1
  73. package/lib/Token/TokenBase.js +1 -1
  74. package/lib/Tooltip.js +1 -1
  75. package/lib/UnderlineNav.js +2 -2
  76. package/lib/drafts.d.ts +1 -0
  77. package/lib/drafts.js +13 -0
  78. package/lib-esm/ActionList/Header.js +1 -1
  79. package/lib-esm/ActionList/Item.js +10 -10
  80. package/lib-esm/ActionList/List.js +1 -1
  81. package/lib-esm/ActionList2/Divider.d.ts +3 -2
  82. package/lib-esm/ActionList2/Divider.js +8 -5
  83. package/lib-esm/ActionList2/Item.js +20 -6
  84. package/lib-esm/ActionList2/List.js +10 -2
  85. package/lib-esm/ActionList2/MenuContext.d.ts +10 -0
  86. package/lib-esm/ActionList2/MenuContext.js +3 -0
  87. package/lib-esm/ActionList2/Selection.js +9 -0
  88. package/lib-esm/ActionList2/index.d.ts +1 -2
  89. package/lib-esm/ActionMenu2.d.ts +313 -0
  90. package/lib-esm/ActionMenu2.js +67 -0
  91. package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -1
  92. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -1
  93. package/lib-esm/BaseStyles.js +2 -20
  94. package/lib-esm/BorderBox.js +1 -1
  95. package/lib-esm/Box.js +1 -1
  96. package/lib-esm/Breadcrumbs.js +3 -3
  97. package/lib-esm/Button/Button.d.ts +2 -2
  98. package/lib-esm/Button/Button.js +1 -1
  99. package/lib-esm/Button/ButtonClose.d.ts +2 -2
  100. package/lib-esm/Button/ButtonDanger.d.ts +2 -2
  101. package/lib-esm/Button/ButtonGroup.js +1 -1
  102. package/lib-esm/Button/ButtonInvisible.d.ts +2 -2
  103. package/lib-esm/Button/ButtonOutline.d.ts +2 -2
  104. package/lib-esm/Button/ButtonPrimary.d.ts +2 -2
  105. package/lib-esm/Checkbox.js +1 -1
  106. package/lib-esm/CircleOcticon.d.ts +35 -35
  107. package/lib-esm/Details.js +1 -1
  108. package/lib-esm/Dialog.d.ts +37 -37
  109. package/lib-esm/Dropdown.d.ts +6 -6
  110. package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -3
  111. package/lib-esm/FilterList.d.ts +1 -1
  112. package/lib-esm/FilteredActionList/FilteredActionList.js +1 -1
  113. package/lib-esm/Flex.js +1 -1
  114. package/lib-esm/LabelGroup.js +1 -1
  115. package/lib-esm/NewButton/button.d.ts +11 -2
  116. package/lib-esm/NewButton/button.js +275 -4
  117. package/lib-esm/NewButton/index.d.ts +11 -6
  118. package/lib-esm/NewButton/index.js +1 -4
  119. package/lib-esm/NewButton/types.d.ts +8 -28
  120. package/lib-esm/NewButton/types.js +1 -6
  121. package/lib-esm/Overlay.js +1 -1
  122. package/lib-esm/Pagination/Pagination.js +2 -2
  123. package/lib-esm/Position.d.ts +4 -4
  124. package/lib-esm/Position.js +1 -1
  125. package/lib-esm/SelectMenu/SelectMenu.d.ts +11 -10
  126. package/lib-esm/SelectMenu/SelectMenu.js +1 -1
  127. package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
  128. package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
  129. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  130. package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
  131. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  132. package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
  133. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
  134. package/lib-esm/SelectMenu/SelectMenuTabs.js +1 -1
  135. package/lib-esm/StateLabel.js +1 -1
  136. package/lib-esm/StyledOcticon.js +1 -1
  137. package/lib-esm/SubNav.js +3 -3
  138. package/lib-esm/TextInputWithTokens.d.ts +2 -1
  139. package/lib-esm/ThemeProvider.d.ts +1 -0
  140. package/lib-esm/ThemeProvider.js +17 -4
  141. package/lib-esm/Timeline.js +4 -4
  142. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  143. package/lib-esm/Token/AvatarToken.js +1 -1
  144. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  145. package/lib-esm/Token/Token.d.ts +1 -1
  146. package/lib-esm/Token/TokenBase.js +1 -1
  147. package/lib-esm/Tooltip.js +1 -1
  148. package/lib-esm/UnderlineNav.js +2 -2
  149. package/lib-esm/drafts.d.ts +1 -0
  150. package/lib-esm/drafts.js +2 -1
  151. package/package.json +14 -8
  152. package/CHANGELOG.md +0 -992
  153. package/lib/NewButton/button-base.d.ts +0 -6
  154. package/lib/NewButton/button-base.js +0 -69
  155. package/lib/NewButton/button-link.d.ts +0 -26
  156. package/lib/NewButton/button-link.js +0 -31
  157. package/lib/NewButton/icon-button.d.ts +0 -4
  158. package/lib/NewButton/icon-button.js +0 -57
  159. package/lib/NewButton/styles.d.ts +0 -202
  160. package/lib/NewButton/styles.js +0 -248
  161. package/lib-esm/NewButton/button-base.d.ts +0 -6
  162. package/lib-esm/NewButton/button-base.js +0 -47
  163. package/lib-esm/NewButton/button-link.d.ts +0 -26
  164. package/lib-esm/NewButton/button-link.js +0 -15
  165. package/lib-esm/NewButton/icon-button.d.ts +0 -4
  166. package/lib-esm/NewButton/icon-button.js +0 -35
  167. package/lib-esm/NewButton/styles.d.ts +0 -202
  168. package/lib-esm/NewButton/styles.js +0 -229
@@ -1,6 +0,0 @@
1
- import { ComponentPropsWithRef } from 'react';
2
- import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
3
- import { ButtonProps } from './types';
4
- declare const ButtonBase: PolymorphicForwardRefComponent<"a" | "button", ButtonProps>;
5
- export declare type ButtonBaseProps = ComponentPropsWithRef<typeof ButtonBase>;
6
- export default ButtonBase;
@@ -1,69 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _Box = _interopRequireDefault(require("../Box"));
11
-
12
- var _sx = require("../sx");
13
-
14
- var _ThemeProvider = require("../ThemeProvider");
15
-
16
- var _types = require("./types");
17
-
18
- var _styles = require("./styles");
19
-
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
-
24
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
-
26
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
27
-
28
- const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
29
- children,
30
- as: Component = 'button',
31
- sx: sxProp = {},
32
- ...props
33
- }, forwardedRef) => {
34
- const {
35
- leadingIcon: LeadingIcon,
36
- trailingIcon: TrailingIcon,
37
- variant = 'default',
38
- size = 'medium'
39
- } = props;
40
- const {
41
- theme
42
- } = (0, _ThemeProvider.useTheme)();
43
- const iconWrapStyles = {
44
- display: 'inline-block'
45
- };
46
-
47
- const sxStyles = _sx.merge.all([(0, _styles.getButtonStyles)(theme), (0, _styles.getSizeStyles)(size, variant, false), (0, _styles.getVariantStyles)(variant, theme), sxProp]);
48
-
49
- return /*#__PURE__*/_react.default.createElement(_types.StyledButton, _extends({
50
- as: Component,
51
- sx: sxStyles
52
- }, props, {
53
- ref: forwardedRef
54
- }), LeadingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
55
- as: "span",
56
- "data-component": "leadingIcon",
57
- sx: iconWrapStyles
58
- }, /*#__PURE__*/_react.default.createElement(LeadingIcon, null)), /*#__PURE__*/_react.default.createElement("span", {
59
- "data-component": "text"
60
- }, children), TrailingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
61
- as: "span",
62
- "data-component": "trailingIcon",
63
- sx: { ...iconWrapStyles,
64
- ml: 2
65
- }
66
- }, /*#__PURE__*/_react.default.createElement(TrailingIcon, null)));
67
- });
68
- var _default = ButtonBase;
69
- exports.default = _default;
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
- import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
3
- declare const LinkButton: PolymorphicForwardRefComponent<"a", Omit<(Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
4
- ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
5
- }) | (Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
6
- ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
7
- }), string | number | symbol> & {
8
- leadingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
9
- trailingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
10
- children: React.ReactNode;
11
- } & {
12
- variant?: import("./types").VariantType | undefined;
13
- size?: import("./types").Size | undefined;
14
- disabled?: boolean | undefined;
15
- } & import("../sx").SxProp & React.HTMLAttributes<HTMLButtonElement> & {
16
- [x: string]: any;
17
- [x: number]: any;
18
- } & {
19
- theme?: any;
20
- } & {
21
- as?: string | React.ComponentType<any> | undefined;
22
- forwardedAs?: string | React.ComponentType<any> | undefined;
23
- } & {
24
- as?: "a" | "button" | undefined;
25
- }>;
26
- export default LinkButton;
@@ -1,31 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _buttonBase = _interopRequireDefault(require("./button-base"));
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
-
16
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
-
18
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
19
-
20
- const LinkButton = /*#__PURE__*/(0, _react.forwardRef)(({
21
- children,
22
- as: Component = 'a',
23
- ...props
24
- }, forwardedRef) => {
25
- return /*#__PURE__*/_react.default.createElement(_buttonBase.default, _extends({
26
- as: Component,
27
- ref: forwardedRef
28
- }, props), children);
29
- });
30
- var _default = LinkButton;
31
- exports.default = _default;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { IconButtonProps } from './types';
3
- declare const IconButton: React.ForwardRefExoticComponent<Pick<IconButtonProps, string | number | symbol> & React.RefAttributes<HTMLButtonElement>>;
4
- export default IconButton;
@@ -1,57 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _sx = require("../sx");
11
-
12
- var _ThemeProvider = require("../ThemeProvider");
13
-
14
- var _Box = _interopRequireDefault(require("../Box"));
15
-
16
- var _types = require("./types");
17
-
18
- var _styles = require("./styles");
19
-
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
-
24
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
-
26
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
27
-
28
- const IconButton = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
29
- const {
30
- variant = 'default',
31
- size = 'medium',
32
- sx: sxProp = {},
33
- icon: Icon,
34
- iconLabel
35
- } = props;
36
- const {
37
- theme
38
- } = (0, _ThemeProvider.useTheme)();
39
- const styles = { ...(0, _styles.getBaseStyles)(theme)
40
- };
41
-
42
- const sxStyles = _sx.merge.all([styles, (0, _styles.getSizeStyles)(size, variant, true), (0, _styles.getVariantStyles)(variant, theme), sxProp]);
43
-
44
- return /*#__PURE__*/_react.default.createElement(_types.StyledButton, _extends({
45
- sx: sxStyles,
46
- ref: forwardedRef
47
- }, props), /*#__PURE__*/_react.default.createElement("span", {
48
- hidden: true
49
- }, iconLabel), /*#__PURE__*/_react.default.createElement(_Box.default, {
50
- as: "span",
51
- sx: {
52
- display: 'inline-block'
53
- }
54
- }, /*#__PURE__*/_react.default.createElement(Icon, null)));
55
- });
56
- var _default = IconButton;
57
- exports.default = _default;
@@ -1,202 +0,0 @@
1
- import { VariantType } from './types';
2
- import { Theme } from '../ThemeProvider';
3
- export declare const TEXT_ROW_HEIGHT = "20px";
4
- export declare const getVariantStyles: (variant?: VariantType, theme?: Theme | undefined) => {
5
- color: string;
6
- backgroundColor: string;
7
- boxShadow: string;
8
- '&:hover:not([disabled])': {
9
- backgroundColor: string;
10
- };
11
- '&:focus:not([disabled])': {
12
- boxShadow: string;
13
- };
14
- '&:active:not([disabled])': {
15
- backgroundColor: string;
16
- boxShadow: string;
17
- };
18
- '&:disabled': {
19
- color: string;
20
- backgroundColor: string;
21
- };
22
- } | {
23
- color: string;
24
- backgroundColor: string;
25
- borderColor: string;
26
- boxShadow: string;
27
- '&:hover:not([disabled])': {
28
- color: string;
29
- backgroundColor: string;
30
- };
31
- '&:focus:not([disabled])': {
32
- boxShadow: string;
33
- };
34
- '&:active:not([disabled])': {
35
- backgroundColor: string;
36
- boxShadow: string;
37
- };
38
- '&:disabled': {
39
- color: string;
40
- backgroundColor: string;
41
- };
42
- '[data-component="ButtonCounter"]': {
43
- backgroundColor: string;
44
- color: string;
45
- };
46
- } | {
47
- color: string;
48
- backgroundColor: string;
49
- boxShadow: string;
50
- '&:hover:not([disabled])': {
51
- color: string;
52
- backgroundColor: string;
53
- borderColor: string;
54
- boxShadow: string;
55
- '[data-component="ButtonCounter"]': {
56
- backgroundColor: string;
57
- color: string;
58
- };
59
- };
60
- '&:focus:not([disabled])': {
61
- borderColor: string;
62
- boxShadow: string;
63
- };
64
- '&:active:not([disabled])': {
65
- color: string;
66
- backgroundColor: string;
67
- boxShadow: string;
68
- borderColor: string;
69
- };
70
- '&:disabled': {
71
- color: string;
72
- backgroundColor: string;
73
- borderColor: string;
74
- '[data-component="ButtonCounter"]': {
75
- backgroundColor: string;
76
- };
77
- };
78
- '[data-component="ButtonCounter"]': {
79
- color: string;
80
- backgroundColor: string;
81
- };
82
- } | {
83
- color: string;
84
- backgroundColor: string;
85
- border: string;
86
- boxShadow: string;
87
- '&:hover:not([disabled])': {
88
- backgroundColor: string;
89
- };
90
- '&:focus:not([disabled])': {
91
- boxShadow: string;
92
- };
93
- '&:active:not([disabled])': {
94
- backgroundColor: string;
95
- };
96
- '&:disabled': {
97
- color: string;
98
- };
99
- } | {
100
- color: string;
101
- boxShadow: string;
102
- '&:hover': {
103
- color: string;
104
- backgroundColor: string;
105
- borderColor: string;
106
- boxShadow: string;
107
- '[data-component="ButtonCounter"]': {
108
- backgroundColor: string;
109
- color: string;
110
- };
111
- };
112
- '&:focus': {
113
- borderColor: string;
114
- boxShadow: string;
115
- };
116
- '&:active:not([disabled])': {
117
- color: string;
118
- backgroundColor: string;
119
- boxShadow: string;
120
- borderColor: string;
121
- };
122
- '&:disabled': {
123
- color: string;
124
- backgroundColor: string;
125
- borderColor: string;
126
- '[data-component="ButtonCounter"]': {
127
- backgroundColor: string;
128
- };
129
- };
130
- '[data-component="ButtonCounter"]': {
131
- backgroundColor: string;
132
- color: string;
133
- };
134
- };
135
- export declare const getSizeStyles: (size: string | undefined, variant: VariantType | undefined, iconOnly: boolean) => {
136
- paddingY: string;
137
- paddingX: string;
138
- fontSize: number;
139
- '[data-component="ButtonCounter"]': {
140
- fontSize: number;
141
- };
142
- };
143
- export declare const getBaseStyles: (theme?: Theme | undefined) => {
144
- borderRadius: string;
145
- border: string;
146
- borderColor: any;
147
- fontWeight: string;
148
- lineHeight: string;
149
- whiteSpace: string;
150
- verticalAlign: string;
151
- cursor: string;
152
- appearance: string;
153
- userSelect: string;
154
- textDecoration: string;
155
- textAlign: string;
156
- '&:focus': {
157
- outline: string;
158
- };
159
- '&:disabled': {
160
- cursor: string;
161
- };
162
- '&:disabled svg': {
163
- opacity: string;
164
- };
165
- };
166
- export declare const getButtonStyles: (theme?: Theme | undefined) => {
167
- display: string;
168
- gridTemplateAreas: string;
169
- '& > :not(:last-child)': {
170
- mr: string;
171
- };
172
- '[data-component="leadingIcon"]': {
173
- gridArea: string;
174
- };
175
- '[data-component="text"]': {
176
- gridArea: string;
177
- };
178
- '[data-component="trailingIcon"]': {
179
- gridArea: string;
180
- };
181
- borderRadius: string;
182
- border: string;
183
- borderColor: any;
184
- fontWeight: string;
185
- lineHeight: string;
186
- whiteSpace: string;
187
- verticalAlign: string;
188
- cursor: string;
189
- appearance: string;
190
- userSelect: string;
191
- textDecoration: string;
192
- textAlign: string;
193
- '&:focus': {
194
- outline: string;
195
- };
196
- '&:disabled': {
197
- cursor: string;
198
- };
199
- '&:disabled svg': {
200
- opacity: string;
201
- };
202
- };
@@ -1,248 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.getButtonStyles = exports.getBaseStyles = exports.getSizeStyles = exports.getVariantStyles = exports.TEXT_ROW_HEIGHT = void 0;
7
- const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
8
-
9
- exports.TEXT_ROW_HEIGHT = TEXT_ROW_HEIGHT;
10
-
11
- const getVariantStyles = (variant = 'default', theme) => {
12
- const style = {
13
- default: {
14
- color: 'btn.text',
15
- backgroundColor: 'btn.bg',
16
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}, ${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.insetShadow}`,
17
- '&:hover:not([disabled])': {
18
- backgroundColor: 'btn.hoverBg'
19
- },
20
- // focus must come before :active so that the active box shadow overrides
21
- '&:focus:not([disabled])': {
22
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.focusShadow}`
23
- },
24
- '&:active:not([disabled])': {
25
- backgroundColor: 'btn.selectedBg',
26
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadowActive}`
27
- },
28
- '&:disabled': {
29
- color: 'primer.fg.disabled',
30
- backgroundColor: 'btn.disabledBg'
31
- }
32
- },
33
- primary: {
34
- color: 'btn.primary.text',
35
- backgroundColor: 'btn.primary.bg',
36
- borderColor: 'border.subtle',
37
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.shadow}`,
38
- '&:hover:not([disabled])': {
39
- color: 'btn.primary.hoverText',
40
- backgroundColor: 'btn.primary.hoverBg'
41
- },
42
- // focus must come before :active so that the active box shadow overrides
43
- '&:focus:not([disabled])': {
44
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.focusShadow}`
45
- },
46
- '&:active:not([disabled])': {
47
- backgroundColor: 'btn.primary.selectedBg',
48
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.selectedShadow}`
49
- },
50
- '&:disabled': {
51
- color: 'btn.primary.disabledText',
52
- backgroundColor: 'btn.primary.disabledBg'
53
- },
54
- '[data-component="ButtonCounter"]': {
55
- backgroundColor: 'btn.primary.counterBg',
56
- color: 'btn.primary.text'
57
- }
58
- },
59
- danger: {
60
- color: 'btn.danger.text',
61
- backgroundColor: 'btn.bg',
62
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}`,
63
- '&:hover:not([disabled])': {
64
- color: 'btn.danger.hoverText',
65
- backgroundColor: 'btn.danger.hoverBg',
66
- borderColor: 'btn.danger.hoverBorder',
67
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.hoverShadow}`,
68
- '[data-component="ButtonCounter"]': {
69
- backgroundColor: 'btn.danger.hoverCounterBg',
70
- color: 'btn.danger.hoverText'
71
- }
72
- },
73
- // focus must come before :active so that the active box shadow overrides
74
- '&:focus:not([disabled])': {
75
- borderColor: 'btn.danger.focusBorder',
76
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.focusShadow}`
77
- },
78
- '&:active:not([disabled])': {
79
- color: 'btn.danger.selectedText',
80
- backgroundColor: 'btn.danger.selectedBg',
81
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.selectedShadow}`,
82
- borderColor: 'btn.danger.selectedBorder'
83
- },
84
- '&:disabled': {
85
- color: 'btn.danger.disabledText',
86
- backgroundColor: 'btn.danger.disabledBg',
87
- borderColor: 'btn.danger.disabledBorder',
88
- '[data-component="ButtonCounter"]': {
89
- backgroundColor: 'btn.danger.disabledCounterBg'
90
- }
91
- },
92
- '[data-component="ButtonCounter"]': {
93
- color: 'btn.danger.text',
94
- backgroundColor: 'btn.danger.counterBg'
95
- }
96
- },
97
- invisible: {
98
- color: 'accent.fg',
99
- backgroundColor: 'transparent',
100
- border: '0',
101
- boxShadow: 'none',
102
- '&:hover:not([disabled])': {
103
- backgroundColor: 'btn.hoverBg'
104
- },
105
- // focus must come before :active so that the active box shadow overrides
106
- '&:focus:not([disabled])': {
107
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.focusShadow}`
108
- },
109
- '&:active:not([disabled])': {
110
- backgroundColor: 'btn.selectedBg'
111
- },
112
- '&:disabled': {
113
- color: 'primer.fg.disabled'
114
- }
115
- },
116
- outline: {
117
- color: 'btn.outline.text',
118
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}`,
119
- '&:hover': {
120
- color: 'btn.outline.hoverText',
121
- backgroundColor: 'btn.outline.hoverBg',
122
- borderColor: 'outline.hoverBorder',
123
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.hoverShadow}`,
124
- '[data-component="ButtonCounter"]': {
125
- backgroundColor: 'btn.outline.hoverCounterBg',
126
- color: 'btn.outline.hoverText'
127
- }
128
- },
129
- // focus must come before :active so that the active box shadow overrides
130
- '&:focus': {
131
- borderColor: 'btn.outline.focusBorder',
132
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.focusShadow}`
133
- },
134
- '&:active:not([disabled])': {
135
- color: 'btn.outline.selectedText',
136
- backgroundColor: 'btn.outline.selectedBg',
137
- boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.selectedShadow}`,
138
- borderColor: 'btn.outline.selectedBorder'
139
- },
140
- '&:disabled': {
141
- color: 'btn.outline.disabledText',
142
- backgroundColor: 'btn.outline.disabledBg',
143
- borderColor: 'btn.border',
144
- '[data-component="ButtonCounter"]': {
145
- backgroundColor: 'btn.outline.disabledCounterBg'
146
- }
147
- },
148
- '[data-component="ButtonCounter"]': {
149
- backgroundColor: 'btn.outline.counterBg',
150
- color: 'btn.outline.text'
151
- }
152
- }
153
- };
154
- return style[variant];
155
- };
156
-
157
- exports.getVariantStyles = getVariantStyles;
158
-
159
- const getSizeStyles = (size = 'medium', variant = 'default', iconOnly) => {
160
- let paddingY, paddingX, fontSize;
161
-
162
- switch (size) {
163
- case 'small':
164
- paddingY = 3;
165
- paddingX = 12;
166
- fontSize = 0;
167
- break;
168
-
169
- case 'large':
170
- paddingY = 9;
171
- paddingX = 20;
172
- fontSize = 2;
173
- break;
174
-
175
- case 'medium':
176
- default:
177
- paddingY = 5;
178
- paddingX = 16;
179
- fontSize = 1;
180
- }
181
-
182
- if (iconOnly) {
183
- paddingX = paddingY + 2;
184
- }
185
-
186
- if (variant === 'invisible') {
187
- paddingY = paddingY + 1;
188
- }
189
-
190
- return {
191
- paddingY: `${paddingY}px`,
192
- paddingX: `${paddingX}px`,
193
- fontSize,
194
- '[data-component="ButtonCounter"]': {
195
- fontSize
196
- }
197
- };
198
- };
199
-
200
- exports.getSizeStyles = getSizeStyles;
201
-
202
- const getBaseStyles = theme => ({
203
- borderRadius: '2',
204
- border: '1px solid',
205
- borderColor: theme === null || theme === void 0 ? void 0 : theme.colors.btn.border,
206
- fontWeight: 'bold',
207
- lineHeight: TEXT_ROW_HEIGHT,
208
- whiteSpace: 'nowrap',
209
- verticalAlign: 'middle',
210
- cursor: 'pointer',
211
- appearance: 'none',
212
- userSelect: 'none',
213
- textDecoration: 'none',
214
- textAlign: 'center',
215
- '&:focus': {
216
- outline: 'none'
217
- },
218
- '&:disabled': {
219
- cursor: 'default'
220
- },
221
- '&:disabled svg': {
222
- opacity: '0.6'
223
- }
224
- });
225
-
226
- exports.getBaseStyles = getBaseStyles;
227
-
228
- const getButtonStyles = theme => {
229
- const styles = { ...getBaseStyles(theme),
230
- display: 'grid',
231
- gridTemplateAreas: '"leadingIcon text trailingIcon"',
232
- '& > :not(:last-child)': {
233
- mr: '2'
234
- },
235
- '[data-component="leadingIcon"]': {
236
- gridArea: 'leadingIcon'
237
- },
238
- '[data-component="text"]': {
239
- gridArea: 'text'
240
- },
241
- '[data-component="trailingIcon"]': {
242
- gridArea: 'trailingIcon'
243
- }
244
- };
245
- return styles;
246
- };
247
-
248
- exports.getButtonStyles = getButtonStyles;
@@ -1,6 +0,0 @@
1
- import { ComponentPropsWithRef } from 'react';
2
- import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
3
- import { ButtonProps } from './types';
4
- declare const ButtonBase: PolymorphicForwardRefComponent<"a" | "button", ButtonProps>;
5
- export declare type ButtonBaseProps = ComponentPropsWithRef<typeof ButtonBase>;
6
- export default ButtonBase;