@tamagui/button 1.0.1-beta.40 → 1.0.1-beta.43
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.
- package/dist/cjs/Button.js +13 -70
- package/dist/cjs/Button.js.map +2 -2
- package/dist/esm/Button.js +17 -77
- package/dist/esm/Button.js.map +2 -2
- package/dist/jsx/Button.js +17 -72
- package/package.json +5 -4
- package/types/Button.d.ts +34 -33
- package/types/Button.d.ts.map +1 -1
package/dist/cjs/Button.js
CHANGED
|
@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
|
|
|
21
21
|
return a;
|
|
22
22
|
};
|
|
23
23
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
24
|
var __objRest = (source, exclude) => {
|
|
26
25
|
var target = {};
|
|
27
26
|
for (var prop in source)
|
|
@@ -56,6 +55,7 @@ __export(Button_exports, {
|
|
|
56
55
|
module.exports = __toCommonJS(Button_exports);
|
|
57
56
|
var import_core = require("@tamagui/core");
|
|
58
57
|
var import_font_size = require("@tamagui/font-size");
|
|
58
|
+
var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
|
|
59
59
|
var import_stacks = require("@tamagui/stacks");
|
|
60
60
|
var import_text = require("@tamagui/text");
|
|
61
61
|
var import_react = __toESM(require("react"));
|
|
@@ -65,11 +65,13 @@ const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
65
65
|
tag: "button",
|
|
66
66
|
hoverable: true,
|
|
67
67
|
pressable: true,
|
|
68
|
+
backgrounded: true,
|
|
68
69
|
borderWidth: 1,
|
|
69
70
|
borderColor: "transparent",
|
|
70
71
|
justifyContent: "center",
|
|
71
72
|
alignItems: "center",
|
|
72
73
|
flexWrap: "nowrap",
|
|
74
|
+
flexDirection: "row",
|
|
73
75
|
cursor: "pointer",
|
|
74
76
|
pressStyle: {
|
|
75
77
|
borderColor: "transparent"
|
|
@@ -119,8 +121,9 @@ const ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
|
|
|
119
121
|
space,
|
|
120
122
|
spaceFlex,
|
|
121
123
|
scaleIcon = 1,
|
|
122
|
-
scaleSpace = 0.
|
|
123
|
-
|
|
124
|
+
scaleSpace = 0.66,
|
|
125
|
+
separator,
|
|
126
|
+
color,
|
|
124
127
|
fontWeight,
|
|
125
128
|
letterSpacing,
|
|
126
129
|
fontSize,
|
|
@@ -137,6 +140,7 @@ const ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
|
|
|
137
140
|
"spaceFlex",
|
|
138
141
|
"scaleIcon",
|
|
139
142
|
"scaleSpace",
|
|
143
|
+
"separator",
|
|
140
144
|
"color",
|
|
141
145
|
"fontWeight",
|
|
142
146
|
"letterSpacing",
|
|
@@ -146,74 +150,12 @@ const ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
|
|
|
146
150
|
"textProps"
|
|
147
151
|
]);
|
|
148
152
|
const isInsideButton = (0, import_react.useContext)(import_core.ButtonInsideButtonContext);
|
|
149
|
-
const theme = (0, import_core.useTheme)();
|
|
150
153
|
const size = props.size || "$4";
|
|
151
|
-
let color;
|
|
152
|
-
if (theme && colorProp && colorProp in theme) {
|
|
153
|
-
color = theme[colorProp];
|
|
154
|
-
} else if (colorProp) {
|
|
155
|
-
color = colorProp;
|
|
156
|
-
} else {
|
|
157
|
-
color = theme == null ? void 0 : theme.color;
|
|
158
|
-
}
|
|
159
|
-
color = color == null ? void 0 : color.toString();
|
|
160
154
|
const iconSize = (0, import_font_size.getFontSize)(size) * scaleIcon;
|
|
161
|
-
const
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
if (el) {
|
|
166
|
-
return import_react.default.createElement(el, {
|
|
167
|
-
color,
|
|
168
|
-
size: iconSize
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
|
-
return el;
|
|
172
|
-
}, "addTheme");
|
|
173
|
-
const themedIcon = icon ? addTheme(icon) : null;
|
|
174
|
-
const themedIconAfter = iconAfter ? addTheme(iconAfter) : null;
|
|
175
|
-
let contents = children;
|
|
176
|
-
if (!noTextWrap && children) {
|
|
177
|
-
let concatStringChildren = function() {
|
|
178
|
-
if (!lastIsString)
|
|
179
|
-
return;
|
|
180
|
-
const index = nextChildren.length - 1;
|
|
181
|
-
const childrenStrings = nextChildren[index];
|
|
182
|
-
nextChildren[index] = /* @__PURE__ */ import_react.default.createElement(ButtonText, __spreadValues(__spreadValues(__spreadValues({
|
|
183
|
-
key: index
|
|
184
|
-
}, {
|
|
185
|
-
fontWeight,
|
|
186
|
-
letterSpacing,
|
|
187
|
-
fontSize,
|
|
188
|
-
fontFamily,
|
|
189
|
-
textAlign,
|
|
190
|
-
size
|
|
191
|
-
}), colorProp && {
|
|
192
|
-
color: colorProp
|
|
193
|
-
}), textProps), childrenStrings);
|
|
194
|
-
};
|
|
195
|
-
__name(concatStringChildren, "concatStringChildren");
|
|
196
|
-
let allChildren = import_react.default.Children.toArray(children);
|
|
197
|
-
let nextChildren = [];
|
|
198
|
-
let lastIsString = false;
|
|
199
|
-
for (const child of allChildren) {
|
|
200
|
-
const last = nextChildren[nextChildren.length - 1];
|
|
201
|
-
const isString = typeof child === "string";
|
|
202
|
-
if (isString) {
|
|
203
|
-
if (lastIsString) {
|
|
204
|
-
last.push(child);
|
|
205
|
-
} else {
|
|
206
|
-
nextChildren.push([child]);
|
|
207
|
-
}
|
|
208
|
-
} else {
|
|
209
|
-
concatStringChildren();
|
|
210
|
-
nextChildren.push(child);
|
|
211
|
-
}
|
|
212
|
-
lastIsString = isString;
|
|
213
|
-
}
|
|
214
|
-
concatStringChildren();
|
|
215
|
-
contents = nextChildren;
|
|
216
|
-
}
|
|
155
|
+
const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
|
|
156
|
+
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
157
|
+
const spaceSize = (0, import_core.getVariableValue)(iconSize) * scaleSpace;
|
|
158
|
+
const contents = (0, import_helpers_tamagui.wrapStringChildrenInText)(ButtonText, props);
|
|
217
159
|
return /* @__PURE__ */ import_react.default.createElement(import_core.ButtonInsideButtonContext.Provider, {
|
|
218
160
|
value: true
|
|
219
161
|
}, /* @__PURE__ */ import_react.default.createElement(ButtonFrame, __spreadValues(__spreadProps(__spreadValues({
|
|
@@ -223,8 +165,9 @@ const ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
|
|
|
223
165
|
}), {
|
|
224
166
|
ref
|
|
225
167
|
}), rest), themedIcon || themedIconAfter ? (0, import_core.spacedChildren)({
|
|
226
|
-
space:
|
|
168
|
+
space: spaceSize,
|
|
227
169
|
spaceFlex,
|
|
170
|
+
separator,
|
|
228
171
|
direction: props.flexDirection || "row",
|
|
229
172
|
children: [themedIcon, contents, themedIconAfter]
|
|
230
173
|
}) : contents));
|
package/dist/cjs/Button.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n ReactComponentWithRef,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n ReactComponentWithRef,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport {\n TextParentStyles,\n useGetThemedIcon,\n wrapStringChildrenInText,\n} from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, SizableTextProps } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ButtonFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // dont wrap inner contents in a text element\n noTextWrap?: boolean\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n }\n\nconst ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n hoverable: true,\n pressable: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n justifyContent: 'center',\n alignItems: 'center',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n\n // if we wanted this only when pressable = true, we'd need to merge variants?\n cursor: 'pointer',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': getButtonSize,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n pointerEvents: 'none',\n },\n },\n\n // TODO see core/styled.ts bug\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n color: '$color',\n selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nconst ButtonComponent = forwardRef((props: ButtonProps, ref) => {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props as ButtonProps\n\n const isInsideButton = useContext(ButtonInsideButtonContext)\n const size = props.size || '$4'\n const iconSize = getFontSize(size) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapStringChildrenInText(ButtonText, props)\n\n return (\n // careful not to destructure and re-order props, order is important\n <ButtonInsideButtonContext.Provider value={true}>\n <ButtonFrame\n fontFamily={fontFamily}\n // fixes SSR issue + DOM nesting issue of not allowing button in button\n {...(isInsideButton && {\n tag: 'span',\n })}\n ref={ref as any}\n {...rest}\n >\n {themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction: props.flexDirection || 'row',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents}\n </ButtonFrame>\n </ButtonInsideButtonContext.Provider>\n )\n})\n\nexport const Button: ReactComponentWithRef<ButtonProps, HTMLButtonElement | View> =\n ButtonFrame.extractable(themeable(ButtonComponent as any) as any, {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract button anyway)\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n })\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Button.js
CHANGED
|
@@ -1,29 +1,32 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import {
|
|
4
2
|
ButtonInsideButtonContext,
|
|
5
3
|
getButtonSize,
|
|
6
4
|
getVariableValue,
|
|
7
5
|
spacedChildren,
|
|
8
6
|
styled,
|
|
9
|
-
themeable
|
|
10
|
-
useTheme
|
|
7
|
+
themeable
|
|
11
8
|
} from "@tamagui/core";
|
|
12
9
|
import { getFontSize } from "@tamagui/font-size";
|
|
10
|
+
import {
|
|
11
|
+
useGetThemedIcon,
|
|
12
|
+
wrapStringChildrenInText
|
|
13
|
+
} from "@tamagui/helpers-tamagui";
|
|
13
14
|
import { ThemeableStack } from "@tamagui/stacks";
|
|
14
15
|
import { SizableText } from "@tamagui/text";
|
|
15
|
-
import React, { forwardRef,
|
|
16
|
+
import React, { forwardRef, useContext } from "react";
|
|
16
17
|
React["createElement"];
|
|
17
18
|
const ButtonFrame = styled(ThemeableStack, {
|
|
18
19
|
name: "Button",
|
|
19
20
|
tag: "button",
|
|
20
21
|
hoverable: true,
|
|
21
22
|
pressable: true,
|
|
23
|
+
backgrounded: true,
|
|
22
24
|
borderWidth: 1,
|
|
23
25
|
borderColor: "transparent",
|
|
24
26
|
justifyContent: "center",
|
|
25
27
|
alignItems: "center",
|
|
26
28
|
flexWrap: "nowrap",
|
|
29
|
+
flexDirection: "row",
|
|
27
30
|
cursor: "pointer",
|
|
28
31
|
pressStyle: {
|
|
29
32
|
borderColor: "transparent"
|
|
@@ -73,8 +76,9 @@ const ButtonComponent = forwardRef((props, ref) => {
|
|
|
73
76
|
space,
|
|
74
77
|
spaceFlex,
|
|
75
78
|
scaleIcon = 1,
|
|
76
|
-
scaleSpace = 0.
|
|
77
|
-
|
|
79
|
+
scaleSpace = 0.66,
|
|
80
|
+
separator,
|
|
81
|
+
color,
|
|
78
82
|
fontWeight,
|
|
79
83
|
letterSpacing,
|
|
80
84
|
fontSize,
|
|
@@ -84,77 +88,12 @@ const ButtonComponent = forwardRef((props, ref) => {
|
|
|
84
88
|
...rest
|
|
85
89
|
} = props;
|
|
86
90
|
const isInsideButton = useContext(ButtonInsideButtonContext);
|
|
87
|
-
const theme = useTheme();
|
|
88
91
|
const size = props.size || "$4";
|
|
89
|
-
let color;
|
|
90
|
-
if (theme && colorProp && colorProp in theme) {
|
|
91
|
-
color = theme[colorProp];
|
|
92
|
-
} else if (colorProp) {
|
|
93
|
-
color = colorProp;
|
|
94
|
-
} else {
|
|
95
|
-
color = theme == null ? void 0 : theme.color;
|
|
96
|
-
}
|
|
97
|
-
color = color == null ? void 0 : color.toString();
|
|
98
92
|
const iconSize = getFontSize(size) * scaleIcon;
|
|
99
|
-
const
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
if (el) {
|
|
104
|
-
return React.createElement(el, {
|
|
105
|
-
color,
|
|
106
|
-
size: iconSize
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
return el;
|
|
110
|
-
}, "addTheme");
|
|
111
|
-
const themedIcon = icon ? addTheme(icon) : null;
|
|
112
|
-
const themedIconAfter = iconAfter ? addTheme(iconAfter) : null;
|
|
113
|
-
let contents = children;
|
|
114
|
-
if (!noTextWrap && children) {
|
|
115
|
-
let concatStringChildren = function() {
|
|
116
|
-
if (!lastIsString)
|
|
117
|
-
return;
|
|
118
|
-
const index = nextChildren.length - 1;
|
|
119
|
-
const childrenStrings = nextChildren[index];
|
|
120
|
-
nextChildren[index] = /* @__PURE__ */ React.createElement(ButtonText, {
|
|
121
|
-
key: index,
|
|
122
|
-
...{
|
|
123
|
-
fontWeight,
|
|
124
|
-
letterSpacing,
|
|
125
|
-
fontSize,
|
|
126
|
-
fontFamily,
|
|
127
|
-
textAlign,
|
|
128
|
-
size
|
|
129
|
-
},
|
|
130
|
-
...colorProp && {
|
|
131
|
-
color: colorProp
|
|
132
|
-
},
|
|
133
|
-
...textProps
|
|
134
|
-
}, childrenStrings);
|
|
135
|
-
};
|
|
136
|
-
__name(concatStringChildren, "concatStringChildren");
|
|
137
|
-
let allChildren = React.Children.toArray(children);
|
|
138
|
-
let nextChildren = [];
|
|
139
|
-
let lastIsString = false;
|
|
140
|
-
for (const child of allChildren) {
|
|
141
|
-
const last = nextChildren[nextChildren.length - 1];
|
|
142
|
-
const isString = typeof child === "string";
|
|
143
|
-
if (isString) {
|
|
144
|
-
if (lastIsString) {
|
|
145
|
-
last.push(child);
|
|
146
|
-
} else {
|
|
147
|
-
nextChildren.push([child]);
|
|
148
|
-
}
|
|
149
|
-
} else {
|
|
150
|
-
concatStringChildren();
|
|
151
|
-
nextChildren.push(child);
|
|
152
|
-
}
|
|
153
|
-
lastIsString = isString;
|
|
154
|
-
}
|
|
155
|
-
concatStringChildren();
|
|
156
|
-
contents = nextChildren;
|
|
157
|
-
}
|
|
93
|
+
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
94
|
+
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
95
|
+
const spaceSize = getVariableValue(iconSize) * scaleSpace;
|
|
96
|
+
const contents = wrapStringChildrenInText(ButtonText, props);
|
|
158
97
|
return /* @__PURE__ */ React.createElement(ButtonInsideButtonContext.Provider, {
|
|
159
98
|
value: true
|
|
160
99
|
}, /* @__PURE__ */ React.createElement(ButtonFrame, {
|
|
@@ -165,8 +104,9 @@ const ButtonComponent = forwardRef((props, ref) => {
|
|
|
165
104
|
ref,
|
|
166
105
|
...rest
|
|
167
106
|
}, themedIcon || themedIconAfter ? spacedChildren({
|
|
168
|
-
space:
|
|
107
|
+
space: spaceSize,
|
|
169
108
|
spaceFlex,
|
|
109
|
+
separator,
|
|
170
110
|
direction: props.flexDirection || "row",
|
|
171
111
|
children: [themedIcon, contents, themedIconAfter]
|
|
172
112
|
}) : contents));
|
package/dist/esm/Button.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n ReactComponentWithRef,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n ReactComponentWithRef,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport {\n TextParentStyles,\n useGetThemedIcon,\n wrapStringChildrenInText,\n} from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, SizableTextProps } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ButtonFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // dont wrap inner contents in a text element\n noTextWrap?: boolean\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n }\n\nconst ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n hoverable: true,\n pressable: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n justifyContent: 'center',\n alignItems: 'center',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n\n // if we wanted this only when pressable = true, we'd need to merge variants?\n cursor: 'pointer',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': getButtonSize,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n pointerEvents: 'none',\n },\n },\n\n // TODO see core/styled.ts bug\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n color: '$color',\n selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nconst ButtonComponent = forwardRef((props: ButtonProps, ref) => {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props as ButtonProps\n\n const isInsideButton = useContext(ButtonInsideButtonContext)\n const size = props.size || '$4'\n const iconSize = getFontSize(size) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapStringChildrenInText(ButtonText, props)\n\n return (\n // careful not to destructure and re-order props, order is important\n <ButtonInsideButtonContext.Provider value={true}>\n <ButtonFrame\n fontFamily={fontFamily}\n // fixes SSR issue + DOM nesting issue of not allowing button in button\n {...(isInsideButton && {\n tag: 'span',\n })}\n ref={ref as any}\n {...rest}\n >\n {themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction: props.flexDirection || 'row',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents}\n </ButtonFrame>\n </ButtonInsideButtonContext.Provider>\n )\n})\n\nexport const Button: ReactComponentWithRef<ButtonProps, HTMLButtonElement | View> =\n ButtonFrame.extractable(themeable(ButtonComponent as any) as any, {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract button anyway)\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n })\n"],
|
|
5
|
+
"mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AACA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AAIA,MAAM;AAuBN,MAAM,cAAc,OAAO,gBAAgB;AAAA,EACzC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,WAAW;AAAA,EACX,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EAGf,QAAQ;AAAA,EAER,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EAGF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAMM,MAAM,aAAa,OAAO,aAAa;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAED,MAAM,kBAAkB,WAAW,CAAC,OAAoB,QAAQ;AAE9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,MACD;AAEJ,QAAM,iBAAiB,WAAW,yBAAyB;AAC3D,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,WAAW,YAAY,IAAI,IAAI;AACrC,QAAM,gBAAgB,iBAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,mBAAmB,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,YAAY,iBAAiB,QAAQ,IAAI;AAC/C,QAAM,WAAW,yBAAyB,YAAY,KAAK;AAE3D,SAEE,oCAAC,0BAA0B,UAA1B;AAAA,IAAmC,OAAO;AAAA,KACzC,oCAAC;AAAA,IACC;AAAA,OAEK,kBAAkB;AAAA,MACrB,KAAK;AAAA,IACP;AAAA,IACA;AAAA,OACI;AAAA,KAEH,cAAc,kBACX,eAAe;AAAA,IAEb,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW,MAAM,iBAAiB;AAAA,IAClC,UAAU,CAAC,YAAY,UAAU,eAAe;AAAA,EAClD,CAAC,IACD,QACN,CACF;AAEJ,CAAC;AAEM,MAAM,SACX,YAAY,YAAY,UAAU,eAAsB,GAAU;AAAA,EAChE,aAAa,oBAAI,IAAI;AAAA,IAEnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Button.js
CHANGED
|
@@ -1,29 +1,32 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import {
|
|
4
2
|
ButtonInsideButtonContext,
|
|
5
3
|
getButtonSize,
|
|
6
4
|
getVariableValue,
|
|
7
5
|
spacedChildren,
|
|
8
6
|
styled,
|
|
9
|
-
themeable
|
|
10
|
-
useTheme
|
|
7
|
+
themeable
|
|
11
8
|
} from "@tamagui/core";
|
|
12
9
|
import { getFontSize } from "@tamagui/font-size";
|
|
10
|
+
import {
|
|
11
|
+
useGetThemedIcon,
|
|
12
|
+
wrapStringChildrenInText
|
|
13
|
+
} from "@tamagui/helpers-tamagui";
|
|
13
14
|
import { ThemeableStack } from "@tamagui/stacks";
|
|
14
15
|
import { SizableText } from "@tamagui/text";
|
|
15
|
-
import React, { forwardRef,
|
|
16
|
+
import React, { forwardRef, useContext } from "react";
|
|
16
17
|
React["createElement"];
|
|
17
18
|
const ButtonFrame = styled(ThemeableStack, {
|
|
18
19
|
name: "Button",
|
|
19
20
|
tag: "button",
|
|
20
21
|
hoverable: true,
|
|
21
22
|
pressable: true,
|
|
23
|
+
backgrounded: true,
|
|
22
24
|
borderWidth: 1,
|
|
23
25
|
borderColor: "transparent",
|
|
24
26
|
justifyContent: "center",
|
|
25
27
|
alignItems: "center",
|
|
26
28
|
flexWrap: "nowrap",
|
|
29
|
+
flexDirection: "row",
|
|
27
30
|
cursor: "pointer",
|
|
28
31
|
pressStyle: {
|
|
29
32
|
borderColor: "transparent"
|
|
@@ -73,8 +76,9 @@ const ButtonComponent = forwardRef((props, ref) => {
|
|
|
73
76
|
space,
|
|
74
77
|
spaceFlex,
|
|
75
78
|
scaleIcon = 1,
|
|
76
|
-
scaleSpace = 0.
|
|
77
|
-
|
|
79
|
+
scaleSpace = 0.66,
|
|
80
|
+
separator,
|
|
81
|
+
color,
|
|
78
82
|
fontWeight,
|
|
79
83
|
letterSpacing,
|
|
80
84
|
fontSize,
|
|
@@ -84,77 +88,18 @@ const ButtonComponent = forwardRef((props, ref) => {
|
|
|
84
88
|
...rest
|
|
85
89
|
} = props;
|
|
86
90
|
const isInsideButton = useContext(ButtonInsideButtonContext);
|
|
87
|
-
const theme = useTheme();
|
|
88
91
|
const size = props.size || "$4";
|
|
89
|
-
let color;
|
|
90
|
-
if (theme && colorProp && colorProp in theme) {
|
|
91
|
-
color = theme[colorProp];
|
|
92
|
-
} else if (colorProp) {
|
|
93
|
-
color = colorProp;
|
|
94
|
-
} else {
|
|
95
|
-
color = theme == null ? void 0 : theme.color;
|
|
96
|
-
}
|
|
97
|
-
color = color == null ? void 0 : color.toString();
|
|
98
92
|
const iconSize = getFontSize(size) * scaleIcon;
|
|
99
|
-
const
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
if (el) {
|
|
104
|
-
return React.createElement(el, {
|
|
105
|
-
color,
|
|
106
|
-
size: iconSize
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
return el;
|
|
110
|
-
}, "addTheme");
|
|
111
|
-
const themedIcon = icon ? addTheme(icon) : null;
|
|
112
|
-
const themedIconAfter = iconAfter ? addTheme(iconAfter) : null;
|
|
113
|
-
let contents = children;
|
|
114
|
-
if (!noTextWrap && children) {
|
|
115
|
-
let concatStringChildren = function() {
|
|
116
|
-
if (!lastIsString)
|
|
117
|
-
return;
|
|
118
|
-
const index = nextChildren.length - 1;
|
|
119
|
-
const childrenStrings = nextChildren[index];
|
|
120
|
-
nextChildren[index] = <ButtonText key={index} {...{
|
|
121
|
-
fontWeight,
|
|
122
|
-
letterSpacing,
|
|
123
|
-
fontSize,
|
|
124
|
-
fontFamily,
|
|
125
|
-
textAlign,
|
|
126
|
-
size
|
|
127
|
-
}} {...colorProp && {
|
|
128
|
-
color: colorProp
|
|
129
|
-
}} {...textProps}>{childrenStrings}</ButtonText>;
|
|
130
|
-
};
|
|
131
|
-
__name(concatStringChildren, "concatStringChildren");
|
|
132
|
-
let allChildren = React.Children.toArray(children);
|
|
133
|
-
let nextChildren = [];
|
|
134
|
-
let lastIsString = false;
|
|
135
|
-
for (const child of allChildren) {
|
|
136
|
-
const last = nextChildren[nextChildren.length - 1];
|
|
137
|
-
const isString = typeof child === "string";
|
|
138
|
-
if (isString) {
|
|
139
|
-
if (lastIsString) {
|
|
140
|
-
last.push(child);
|
|
141
|
-
} else {
|
|
142
|
-
nextChildren.push([child]);
|
|
143
|
-
}
|
|
144
|
-
} else {
|
|
145
|
-
concatStringChildren();
|
|
146
|
-
nextChildren.push(child);
|
|
147
|
-
}
|
|
148
|
-
lastIsString = isString;
|
|
149
|
-
}
|
|
150
|
-
concatStringChildren();
|
|
151
|
-
contents = nextChildren;
|
|
152
|
-
}
|
|
93
|
+
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
94
|
+
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
95
|
+
const spaceSize = getVariableValue(iconSize) * scaleSpace;
|
|
96
|
+
const contents = wrapStringChildrenInText(ButtonText, props);
|
|
153
97
|
return <ButtonInsideButtonContext.Provider value={true}><ButtonFrame fontFamily={fontFamily} {...isInsideButton && {
|
|
154
98
|
tag: "span"
|
|
155
99
|
}} ref={ref} {...rest}>{themedIcon || themedIconAfter ? spacedChildren({
|
|
156
|
-
space:
|
|
100
|
+
space: spaceSize,
|
|
157
101
|
spaceFlex,
|
|
102
|
+
separator,
|
|
158
103
|
direction: props.flexDirection || "row",
|
|
159
104
|
children: [themedIcon, contents, themedIconAfter]
|
|
160
105
|
}) : contents}</ButtonFrame></ButtonInsideButtonContext.Provider>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/button",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.43",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -16,15 +16,16 @@
|
|
|
16
16
|
"watch": "tamagui-build --watch"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
20
|
-
"@tamagui/font-size": "^1.0.1-beta.
|
|
19
|
+
"@tamagui/core": "^1.0.1-beta.43",
|
|
20
|
+
"@tamagui/font-size": "^1.0.1-beta.43",
|
|
21
|
+
"@tamagui/helpers-tamagui": "^1.0.1-beta.43"
|
|
21
22
|
},
|
|
22
23
|
"peerDependencies": {
|
|
23
24
|
"react": "*",
|
|
24
25
|
"react-dom": "*"
|
|
25
26
|
},
|
|
26
27
|
"devDependencies": {
|
|
27
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
28
|
+
"@tamagui/build": "^1.0.1-beta.43",
|
|
28
29
|
"react": "*",
|
|
29
30
|
"react-dom": "*"
|
|
30
31
|
},
|
package/types/Button.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { GetProps, ReactComponentWithRef, ThemeableProps } from '@tamagui/core';
|
|
2
|
-
import {
|
|
2
|
+
import { TextParentStyles } from '@tamagui/helpers-tamagui';
|
|
3
3
|
import { FunctionComponent } from 'react';
|
|
4
4
|
import { View } from 'react-native';
|
|
5
5
|
declare type ButtonIconProps = {
|
|
@@ -7,93 +7,94 @@ declare type ButtonIconProps = {
|
|
|
7
7
|
size?: number;
|
|
8
8
|
};
|
|
9
9
|
declare type IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null;
|
|
10
|
-
export declare type ButtonProps = GetProps<typeof ButtonFrame> & ThemeableProps & {
|
|
10
|
+
export declare type ButtonProps = Omit<TextParentStyles, 'TextComponent'> & GetProps<typeof ButtonFrame> & ThemeableProps & {
|
|
11
11
|
icon?: IconProp;
|
|
12
12
|
iconAfter?: IconProp;
|
|
13
13
|
scaleIcon?: number;
|
|
14
14
|
noTextWrap?: boolean;
|
|
15
15
|
spaceFlex?: number | boolean;
|
|
16
16
|
scaleSpace?: number;
|
|
17
|
-
color?: SizableTextProps['color'];
|
|
18
|
-
fontWeight?: SizableTextProps['fontWeight'];
|
|
19
|
-
fontSize?: SizableTextProps['fontSize'];
|
|
20
|
-
fontFamily?: SizableTextProps['fontFamily'];
|
|
21
|
-
letterSpacing?: SizableTextProps['letterSpacing'];
|
|
22
|
-
textAlign?: SizableTextProps['textAlign'];
|
|
23
|
-
textProps?: Partial<SizableTextProps>;
|
|
24
17
|
};
|
|
25
18
|
declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
26
|
-
fullscreen?: boolean | undefined;
|
|
27
|
-
elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
19
|
+
readonly fullscreen?: boolean | undefined;
|
|
20
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
28
21
|
} & {
|
|
29
22
|
fontFamily?: unknown;
|
|
23
|
+
backgrounded?: boolean | undefined;
|
|
24
|
+
radiused?: boolean | undefined;
|
|
30
25
|
hoverable?: boolean | undefined;
|
|
31
26
|
pressable?: boolean | undefined;
|
|
32
27
|
focusable?: boolean | undefined;
|
|
33
28
|
circular?: boolean | undefined;
|
|
34
|
-
|
|
29
|
+
padded?: boolean | undefined;
|
|
35
30
|
elevate?: boolean | undefined;
|
|
36
31
|
bordered?: number | boolean | undefined;
|
|
37
32
|
transparent?: boolean | undefined;
|
|
38
33
|
chromeless?: boolean | undefined;
|
|
39
34
|
}, "disabled" | "size" | "active"> & {
|
|
40
|
-
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
41
|
-
active?: boolean | undefined;
|
|
42
|
-
disabled?: boolean | undefined;
|
|
35
|
+
readonly size?: import("@tamagui/core").SizeTokens | undefined;
|
|
36
|
+
readonly active?: boolean | undefined;
|
|
37
|
+
readonly disabled?: boolean | undefined;
|
|
43
38
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
44
|
-
fullscreen?: boolean | undefined;
|
|
45
|
-
elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
39
|
+
readonly fullscreen?: boolean | undefined;
|
|
40
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
46
41
|
} & {
|
|
47
42
|
fontFamily?: unknown;
|
|
43
|
+
backgrounded?: boolean | undefined;
|
|
44
|
+
radiused?: boolean | undefined;
|
|
48
45
|
hoverable?: boolean | undefined;
|
|
49
46
|
pressable?: boolean | undefined;
|
|
50
47
|
focusable?: boolean | undefined;
|
|
51
48
|
circular?: boolean | undefined;
|
|
52
|
-
|
|
49
|
+
padded?: boolean | undefined;
|
|
53
50
|
elevate?: boolean | undefined;
|
|
54
51
|
bordered?: number | boolean | undefined;
|
|
55
52
|
transparent?: boolean | undefined;
|
|
56
53
|
chromeless?: boolean | undefined;
|
|
57
54
|
}, "disabled" | "size" | "active"> & {
|
|
58
|
-
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
59
|
-
active?: boolean | undefined;
|
|
60
|
-
disabled?: boolean | undefined;
|
|
55
|
+
readonly size?: import("@tamagui/core").SizeTokens | undefined;
|
|
56
|
+
readonly active?: boolean | undefined;
|
|
57
|
+
readonly disabled?: boolean | undefined;
|
|
61
58
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
62
|
-
fullscreen?: boolean | undefined;
|
|
63
|
-
elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
59
|
+
readonly fullscreen?: boolean | undefined;
|
|
60
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
64
61
|
} & {
|
|
65
62
|
fontFamily?: unknown;
|
|
63
|
+
backgrounded?: boolean | undefined;
|
|
64
|
+
radiused?: boolean | undefined;
|
|
66
65
|
hoverable?: boolean | undefined;
|
|
67
66
|
pressable?: boolean | undefined;
|
|
68
67
|
focusable?: boolean | undefined;
|
|
69
68
|
circular?: boolean | undefined;
|
|
70
|
-
|
|
69
|
+
padded?: boolean | undefined;
|
|
71
70
|
elevate?: boolean | undefined;
|
|
72
71
|
bordered?: number | boolean | undefined;
|
|
73
72
|
transparent?: boolean | undefined;
|
|
74
73
|
chromeless?: boolean | undefined;
|
|
75
74
|
}, "disabled" | "size" | "active"> & {
|
|
76
|
-
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
77
|
-
active?: boolean | undefined;
|
|
78
|
-
disabled?: boolean | undefined;
|
|
75
|
+
readonly size?: import("@tamagui/core").SizeTokens | undefined;
|
|
76
|
+
readonly active?: boolean | undefined;
|
|
77
|
+
readonly disabled?: boolean | undefined;
|
|
79
78
|
}>>, any, import("@tamagui/core").StackPropsBase, {
|
|
80
|
-
fullscreen?: boolean | undefined;
|
|
81
|
-
elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
79
|
+
readonly fullscreen?: boolean | undefined;
|
|
80
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
82
81
|
} & {
|
|
83
82
|
fontFamily?: unknown;
|
|
83
|
+
backgrounded?: boolean | undefined;
|
|
84
|
+
radiused?: boolean | undefined;
|
|
84
85
|
hoverable?: boolean | undefined;
|
|
85
86
|
pressable?: boolean | undefined;
|
|
86
87
|
focusable?: boolean | undefined;
|
|
87
88
|
circular?: boolean | undefined;
|
|
88
|
-
|
|
89
|
+
padded?: boolean | undefined;
|
|
89
90
|
elevate?: boolean | undefined;
|
|
90
91
|
bordered?: number | boolean | undefined;
|
|
91
92
|
transparent?: boolean | undefined;
|
|
92
93
|
chromeless?: boolean | undefined;
|
|
93
94
|
} & {
|
|
94
|
-
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
95
|
-
active?: boolean | undefined;
|
|
96
|
-
disabled?: boolean | undefined;
|
|
95
|
+
readonly size?: import("@tamagui/core").SizeTokens | undefined;
|
|
96
|
+
readonly active?: boolean | undefined;
|
|
97
|
+
readonly disabled?: boolean | undefined;
|
|
97
98
|
}>;
|
|
98
99
|
export declare const ButtonText: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
|
|
99
100
|
size?: import("@tamagui/core").FontSizeTokens | undefined;
|
package/types/Button.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EACR,qBAAqB,EACrB,cAAc,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EACR,qBAAqB,EACrB,cAAc,EAMf,MAAM,eAAe,CAAA;AAEtB,OAAO,EACL,gBAAgB,EAGjB,MAAM,0BAA0B,CAAA;AAGjC,OAAc,EAAE,iBAAiB,EAA0B,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAKnC,aAAK,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,aAAK,QAAQ,GAAG,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA;AAEvE,oBAAY,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,GAC/D,QAAQ,CAAC,OAAO,WAAW,CAAC,GAC5B,cAAc,GAAG;IAEf,IAAI,CAAC,EAAE,QAAQ,CAAA;IAEf,SAAS,CAAC,EAAE,QAAQ,CAAA;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAE5B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAEH,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDf,CAAA;AAMF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;GAMrB,CAAA;AA8DF,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAW5E,CAAA"}
|