@primer/components 0.0.0-20211124581 → 0.0.0-202111255030

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 (76) hide show
  1. package/CHANGELOG.md +1 -7
  2. package/dist/browser.esm.js +148 -166
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +156 -174
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList2/Divider.d.ts +2 -3
  7. package/lib/ActionList2/Divider.js +5 -10
  8. package/lib/ActionList2/Item.js +5 -21
  9. package/lib/ActionList2/List.js +1 -11
  10. package/lib/ActionList2/Selection.js +0 -11
  11. package/lib/ActionList2/index.d.ts +2 -1
  12. package/lib/Autocomplete/Autocomplete.d.ts +2 -10
  13. package/lib/Autocomplete/AutocompleteInput.d.ts +2 -10
  14. package/lib/Checkbox.d.ts +1 -1
  15. package/lib/NewButton/button-base.d.ts +6 -0
  16. package/lib/NewButton/button-base.js +69 -0
  17. package/lib/NewButton/button-link.d.ts +26 -0
  18. package/lib/NewButton/button-link.js +31 -0
  19. package/lib/NewButton/button.d.ts +2 -11
  20. package/lib/NewButton/button.js +6 -283
  21. package/lib/NewButton/icon-button.d.ts +4 -0
  22. package/lib/NewButton/icon-button.js +57 -0
  23. package/lib/NewButton/index.d.ts +6 -11
  24. package/lib/NewButton/index.js +18 -0
  25. package/lib/NewButton/styles.d.ts +202 -0
  26. package/lib/NewButton/styles.js +248 -0
  27. package/lib/NewButton/types.d.ts +28 -8
  28. package/lib/NewButton/types.js +19 -1
  29. package/lib/SelectMenu/SelectMenu.d.ts +2 -10
  30. package/lib/TextInput.d.ts +1 -8
  31. package/lib/TextInput.js +5 -16
  32. package/lib/TextInputWithTokens.d.ts +2 -10
  33. package/lib/_TextInputWrapper.d.ts +0 -3
  34. package/lib/_TextInputWrapper.js +7 -18
  35. package/lib/drafts.d.ts +0 -1
  36. package/lib/drafts.js +0 -13
  37. package/lib-esm/ActionList2/Divider.d.ts +2 -3
  38. package/lib-esm/ActionList2/Divider.js +5 -8
  39. package/lib-esm/ActionList2/Item.js +5 -19
  40. package/lib-esm/ActionList2/List.js +1 -9
  41. package/lib-esm/ActionList2/Selection.js +0 -9
  42. package/lib-esm/ActionList2/index.d.ts +2 -1
  43. package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -10
  44. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -10
  45. package/lib-esm/Checkbox.d.ts +1 -1
  46. package/lib-esm/NewButton/button-base.d.ts +6 -0
  47. package/lib-esm/NewButton/button-base.js +47 -0
  48. package/lib-esm/NewButton/button-link.d.ts +26 -0
  49. package/lib-esm/NewButton/button-link.js +15 -0
  50. package/lib-esm/NewButton/button.d.ts +2 -11
  51. package/lib-esm/NewButton/button.js +4 -275
  52. package/lib-esm/NewButton/icon-button.d.ts +4 -0
  53. package/lib-esm/NewButton/icon-button.js +35 -0
  54. package/lib-esm/NewButton/index.d.ts +6 -11
  55. package/lib-esm/NewButton/index.js +4 -1
  56. package/lib-esm/NewButton/styles.d.ts +202 -0
  57. package/lib-esm/NewButton/styles.js +229 -0
  58. package/lib-esm/NewButton/types.d.ts +28 -8
  59. package/lib-esm/NewButton/types.js +6 -1
  60. package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -10
  61. package/lib-esm/TextInput.d.ts +1 -8
  62. package/lib-esm/TextInput.js +5 -16
  63. package/lib-esm/TextInputWithTokens.d.ts +2 -10
  64. package/lib-esm/_TextInputWrapper.d.ts +0 -3
  65. package/lib-esm/_TextInputWrapper.js +7 -18
  66. package/lib-esm/drafts.d.ts +0 -1
  67. package/lib-esm/drafts.js +1 -2
  68. package/package.json +1 -1
  69. package/lib/ActionList2/MenuContext.d.ts +0 -10
  70. package/lib/ActionList2/MenuContext.js +0 -15
  71. package/lib/ActionMenu2.d.ts +0 -310
  72. package/lib/ActionMenu2.js +0 -91
  73. package/lib-esm/ActionList2/MenuContext.d.ts +0 -10
  74. package/lib-esm/ActionList2/MenuContext.js +0 -3
  75. package/lib-esm/ActionMenu2.d.ts +0 -310
  76. package/lib-esm/ActionMenu2.js +0 -67
@@ -1,6 +1,5 @@
1
- import React from 'react';
2
- import { SxProp } from '../sx';
1
+ /// <reference types="react" />
3
2
  /**
4
3
  * Visually separates `Item`s or `Group`s in an `ActionList`.
5
4
  */
6
- export declare const Divider: React.FC<SxProp>;
5
+ export declare function Divider(): JSX.Element;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Divider = void 0;
6
+ exports.Divider = Divider;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
@@ -11,30 +11,25 @@ var _Box = _interopRequireDefault(require("../Box"));
11
11
 
12
12
  var _constants = require("../constants");
13
13
 
14
- var _sx = require("../sx");
15
-
16
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
15
 
18
16
  /**
19
17
  * Visually separates `Item`s or `Group`s in an `ActionList`.
20
18
  */
21
- const Divider = ({
22
- sx = {}
23
- }) => {
19
+ function Divider() {
24
20
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
25
21
  as: "li",
26
22
  role: "separator",
27
- sx: (0, _sx.merge)({
23
+ sx: {
28
24
  height: 1,
29
25
  backgroundColor: 'actionListItem.inlineDivider',
30
26
  marginTop: theme => `calc(${(0, _constants.get)('space.2')(theme)} - 1px)`,
31
27
  marginBottom: 2,
32
28
  listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
33
29
 
34
- }, sx),
30
+ },
35
31
  "data-component": "ActionList.Divider"
36
32
  });
37
- };
33
+ }
38
34
 
39
- exports.Divider = Divider;
40
35
  Divider.displayName = "Divider";
@@ -21,8 +21,6 @@ var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
21
21
 
22
22
  var _List = require("./List");
23
23
 
24
- var _MenuContext = require("./MenuContext");
25
-
26
24
  var _Selection = require("./Selection");
27
25
 
28
26
  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); }
@@ -84,7 +82,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
84
82
  onSelect,
85
83
  sx: sxProp = {},
86
84
  id,
87
- role,
88
85
  _PrivateItemWrapper,
89
86
  ...props
90
87
  }, forwardedRef) => {
@@ -93,11 +90,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
93
90
  showDividers
94
91
  } = _react.default.useContext(_List.ListContext);
95
92
 
96
- const {
97
- itemRole,
98
- afterSelect
99
- } = _react.default.useContext(_MenuContext.MenuContext);
100
-
101
93
  const {
102
94
  theme
103
95
  } = (0, _ThemeProvider.useTheme)();
@@ -173,24 +165,17 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
173
165
  const clickHandler = _react.default.useCallback(event => {
174
166
  if (typeof onSelect !== 'function') return;
175
167
  if (disabled) return;
176
-
177
- if (!event.defaultPrevented) {
178
- onSelect(event); // if this Item is inside a Menu, close the Menu
179
-
180
- if (typeof afterSelect === 'function') afterSelect();
181
- }
182
- }, [onSelect, disabled, afterSelect]);
168
+ if (!event.defaultPrevented) onSelect(event);
169
+ }, [onSelect, disabled]);
183
170
 
184
171
  const keyPressHandler = _react.default.useCallback(event => {
185
172
  if (typeof onSelect !== 'function') return;
186
173
  if (disabled) return;
187
174
 
188
175
  if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
189
- onSelect(event); // if this Item is inside a Menu, close the Menu
190
-
191
- if (typeof afterSelect === 'function') afterSelect();
176
+ onSelect(event);
192
177
  }
193
- }, [onSelect, disabled, afterSelect]); // use props.id if provided, otherwise generate one.
178
+ }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
194
179
 
195
180
 
196
181
  const labelId = (0, _ssr.useSSRSafeId)(id);
@@ -213,8 +198,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
213
198
  "aria-disabled": disabled ? true : undefined,
214
199
  tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
215
200
  "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
216
- "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined,
217
- role: role || itemRole
201
+ "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
218
202
  }, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
219
203
  selected: selected
220
204
  }), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {
@@ -11,8 +11,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
11
 
12
12
  var _sx = _interopRequireWildcard(require("../sx"));
13
13
 
14
- var _MenuContext = require("./MenuContext");
15
-
16
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); }
17
15
 
18
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; }
@@ -34,7 +32,6 @@ const List = /*#__PURE__*/_react.default.forwardRef(({
34
32
  variant = 'inset',
35
33
  selectionVariant,
36
34
  showDividers = false,
37
- role,
38
35
  sx: sxProp = {},
39
36
  ...props
40
37
  }, forwardedRef) => {
@@ -44,15 +41,8 @@ const List = /*#__PURE__*/_react.default.forwardRef(({
44
41
  // reset ul styles
45
42
  paddingY: variant === 'inset' ? 2 : 0
46
43
  };
47
- /** if list is inside a Menu, it will get a role from the Menu */
48
-
49
- const {
50
- listRole
51
- } = _react.default.useContext(_MenuContext.MenuContext);
52
-
53
44
  return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
54
- sx: (0, _sx.merge)(styles, sxProp),
55
- role: role || listRole
45
+ sx: (0, _sx.merge)(styles, sxProp)
56
46
  }, props, {
57
47
  ref: forwardedRef
58
48
  }), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {
@@ -13,8 +13,6 @@ var _List = require("./List");
13
13
 
14
14
  var _Group = require("./Group");
15
15
 
16
- var _MenuContext = require("./MenuContext");
17
-
18
16
  var _Visuals = require("./Visuals");
19
17
 
20
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,10 +27,6 @@ const Selection = ({
29
27
  const {
30
28
  selectionVariant: groupSelectionVariant
31
29
  } = _react.default.useContext(_Group.GroupContext);
32
-
33
- const {
34
- parent
35
- } = _react.default.useContext(_MenuContext.MenuContext);
36
30
  /** selectionVariant in Group can override the selectionVariant in List root */
37
31
 
38
32
 
@@ -44,11 +38,6 @@ const Selection = ({
44
38
  return null;
45
39
  }
46
40
 
47
- if (parent === 'ActionMenu') {
48
- throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
49
- return null;
50
- }
51
-
52
41
  if (selectionVariant === 'single') {
53
42
  return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, null, selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null));
54
43
  }
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { Divider } from './Divider';
2
3
  export type { ListProps as ActionListProps } from './List';
3
4
  export type { GroupProps } from './Group';
4
5
  export type { ItemProps } from './Item';
@@ -25,7 +26,7 @@ export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRe
25
26
  referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
26
27
  }>;
27
28
  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
28
- Divider: import("react").FC<import("../sx").SxProp>;
29
+ Divider: typeof Divider;
29
30
  /** Secondary text which provides additional information about an `Item`. */
30
31
  Description: import("react").FC<import("./Description").DescriptionProps>;
31
32
  /** Icon (or similar) positioned before `Item` text. */
@@ -20,17 +20,11 @@ declare const _default: React.FC<{
20
20
  } & {
21
21
  as?: string | React.ComponentType<any> | undefined;
22
22
  forwardedAs?: string | React.ComponentType<any> | undefined;
23
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingVisual" | "trailingVisual" | "contrast"> & {
23
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
24
24
  className?: string | undefined;
25
25
  icon?: React.ComponentType<{
26
26
  className?: string | undefined;
27
27
  }> | undefined;
28
- leadingVisual?: string | React.ComponentType<{
29
- className?: string | undefined;
30
- }> | undefined;
31
- trailingVisual?: string | React.ComponentType<{
32
- className?: string | undefined;
33
- }> | undefined;
34
28
  } & Pick<{
35
29
  color?: string | undefined;
36
30
  maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -43,7 +37,6 @@ declare const _default: React.FC<{
43
37
  slot?: string | undefined;
44
38
  style?: React.CSSProperties | undefined;
45
39
  title?: string | undefined;
46
- size?: "small" | "large" | undefined;
47
40
  block?: boolean | undefined;
48
41
  variant?: "small" | "large" | undefined;
49
42
  role?: React.AriaRole | undefined;
@@ -301,10 +294,9 @@ declare const _default: React.FC<{
301
294
  disabled?: boolean | undefined;
302
295
  hasIcon?: boolean | undefined;
303
296
  contrast?: boolean | undefined;
304
- validationStatus?: "error" | "warning" | undefined;
305
297
  } & {
306
298
  theme?: any;
307
- }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
299
+ }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
308
300
  as?: React.ComponentType<any> | undefined;
309
301
  }>;
310
302
  Menu: typeof AutocompleteMenu;
@@ -12,17 +12,11 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
12
12
  } & {
13
13
  as?: string | React.ComponentType<any> | undefined;
14
14
  forwardedAs?: string | React.ComponentType<any> | undefined;
15
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingVisual" | "trailingVisual" | "contrast"> & {
15
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
16
16
  className?: string | undefined;
17
17
  icon?: React.ComponentType<{
18
18
  className?: string | undefined;
19
19
  }> | undefined;
20
- leadingVisual?: string | React.ComponentType<{
21
- className?: string | undefined;
22
- }> | undefined;
23
- trailingVisual?: string | React.ComponentType<{
24
- className?: string | undefined;
25
- }> | undefined;
26
20
  } & Pick<{
27
21
  color?: string | undefined;
28
22
  maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -35,7 +29,6 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
35
29
  slot?: string | undefined;
36
30
  style?: React.CSSProperties | undefined;
37
31
  title?: string | undefined;
38
- size?: "small" | "large" | undefined;
39
32
  block?: boolean | undefined;
40
33
  variant?: "small" | "large" | undefined;
41
34
  role?: React.AriaRole | undefined;
@@ -293,9 +286,8 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
293
286
  disabled?: boolean | undefined;
294
287
  hasIcon?: boolean | undefined;
295
288
  contrast?: boolean | undefined;
296
- validationStatus?: "error" | "warning" | undefined;
297
289
  } & {
298
290
  theme?: any;
299
- }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
291
+ }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
300
292
  export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
301
293
  export default AutocompleteInput;
package/lib/Checkbox.d.ts CHANGED
@@ -25,5 +25,5 @@ export declare type CheckboxProps = {
25
25
  /**
26
26
  * An accessible, native checkbox component
27
27
  */
28
- declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
28
+ declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
29
29
  export default Checkbox;
@@ -0,0 +1,6 @@
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;
@@ -0,0 +1,69 @@
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;
@@ -0,0 +1,26 @@
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;
@@ -0,0 +1,31 @@
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,13 +1,4 @@
1
1
  import React from 'react';
2
- import { SxProp } from '../sx';
3
- import { VariantType } from './types';
4
- declare const Button: React.ForwardRefExoticComponent<{
5
- variant?: VariantType | undefined;
6
- size?: import("./types").Size | undefined;
7
- icon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
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
- disabled?: boolean | undefined;
11
- children: React.ReactNode;
12
- } & SxProp & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
2
+ import { ButtonProps } from './types';
3
+ declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, string | number | symbol> & React.RefAttributes<HTMLButtonElement>>;
13
4
  export { Button };