@tamagui/button 1.116.1 → 1.116.3
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 +224 -0
- package/dist/cjs/Button.test.js +8 -0
- package/dist/cjs/index.js +15 -0
- package/package.json +9 -9
- /package/dist/cjs/{Button.cjs.map → Button.js.map} +0 -0
- /package/dist/cjs/{Button.test.cjs.map → Button.test.js.map} +0 -0
- /package/dist/cjs/{index.cjs.map → index.js.map} +0 -0
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var Button_exports = {};
|
|
16
|
+
__export(Button_exports, {
|
|
17
|
+
Button: () => Button2,
|
|
18
|
+
ButtonContext: () => ButtonContext,
|
|
19
|
+
ButtonFrame: () => ButtonFrame,
|
|
20
|
+
ButtonIcon: () => ButtonIcon,
|
|
21
|
+
ButtonText: () => ButtonText,
|
|
22
|
+
buttonStaticConfig: () => buttonStaticConfig,
|
|
23
|
+
useButton: () => useButton
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(Button_exports);
|
|
26
|
+
var import_font_size = require("@tamagui/font-size"), import_get_button_sized = require("@tamagui/get-button-sized"), import_helpers = require("@tamagui/helpers"), import_helpers_tamagui = require("@tamagui/helpers-tamagui"), import_stacks = require("@tamagui/stacks"), import_text = require("@tamagui/text"), import_web = require("@tamagui/web"), import_react = require("react"), import_jsx_runtime = require("react/jsx-runtime");
|
|
27
|
+
const ButtonContext = (0, import_web.createStyledContext)({
|
|
28
|
+
// keeping these here means they work with styled() passing down color to text
|
|
29
|
+
color: void 0,
|
|
30
|
+
ellipse: void 0,
|
|
31
|
+
fontFamily: void 0,
|
|
32
|
+
fontSize: void 0,
|
|
33
|
+
fontStyle: void 0,
|
|
34
|
+
fontWeight: void 0,
|
|
35
|
+
letterSpacing: void 0,
|
|
36
|
+
maxFontSizeMultiplier: void 0,
|
|
37
|
+
size: void 0,
|
|
38
|
+
textAlign: void 0,
|
|
39
|
+
variant: void 0
|
|
40
|
+
}), BUTTON_NAME = "Button", ButtonFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
|
|
41
|
+
name: BUTTON_NAME,
|
|
42
|
+
tag: "button",
|
|
43
|
+
context: ButtonContext,
|
|
44
|
+
role: "button",
|
|
45
|
+
focusable: !0,
|
|
46
|
+
variants: {
|
|
47
|
+
unstyled: {
|
|
48
|
+
false: {
|
|
49
|
+
size: "$true",
|
|
50
|
+
justifyContent: "center",
|
|
51
|
+
alignItems: "center",
|
|
52
|
+
flexWrap: "nowrap",
|
|
53
|
+
flexDirection: "row",
|
|
54
|
+
cursor: "pointer",
|
|
55
|
+
hoverTheme: !0,
|
|
56
|
+
pressTheme: !0,
|
|
57
|
+
backgrounded: !0,
|
|
58
|
+
borderWidth: 1,
|
|
59
|
+
borderColor: "transparent",
|
|
60
|
+
focusVisibleStyle: {
|
|
61
|
+
outlineColor: "$outlineColor",
|
|
62
|
+
outlineStyle: "solid",
|
|
63
|
+
outlineWidth: 2
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
variant: {
|
|
68
|
+
outlined: {
|
|
69
|
+
backgroundColor: "transparent",
|
|
70
|
+
borderWidth: 2,
|
|
71
|
+
borderColor: "$borderColor",
|
|
72
|
+
hoverStyle: {
|
|
73
|
+
backgroundColor: "transparent",
|
|
74
|
+
borderColor: "$borderColorHover"
|
|
75
|
+
},
|
|
76
|
+
pressStyle: {
|
|
77
|
+
backgroundColor: "transparent",
|
|
78
|
+
borderColor: "$borderColorPress"
|
|
79
|
+
},
|
|
80
|
+
focusVisibleStyle: {
|
|
81
|
+
backgroundColor: "transparent",
|
|
82
|
+
borderColor: "$borderColorFocus"
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
size: {
|
|
87
|
+
"...size": import_get_button_sized.getButtonSized,
|
|
88
|
+
":number": import_get_button_sized.getButtonSized
|
|
89
|
+
},
|
|
90
|
+
disabled: {
|
|
91
|
+
true: {
|
|
92
|
+
pointerEvents: "none"
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
defaultVariants: {
|
|
97
|
+
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
98
|
+
}
|
|
99
|
+
}), ButtonText = (0, import_web.styled)(import_text.SizableText, {
|
|
100
|
+
name: "Button",
|
|
101
|
+
context: ButtonContext,
|
|
102
|
+
variants: {
|
|
103
|
+
unstyled: {
|
|
104
|
+
false: {
|
|
105
|
+
userSelect: "none",
|
|
106
|
+
cursor: "pointer",
|
|
107
|
+
// flexGrow 1 leads to inconsistent native style where text pushes to start of view
|
|
108
|
+
flexGrow: 0,
|
|
109
|
+
flexShrink: 1,
|
|
110
|
+
ellipse: !0,
|
|
111
|
+
color: "$color"
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
defaultVariants: {
|
|
116
|
+
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
117
|
+
}
|
|
118
|
+
}), ButtonIcon = (props) => {
|
|
119
|
+
const { children, scaleIcon = 1 } = props, { size, color } = (0, import_react.useContext)(ButtonContext), iconSize = (typeof size == "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size)) * scaleIcon;
|
|
120
|
+
return (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color })(children);
|
|
121
|
+
}, ButtonComponent = ButtonFrame.styleable(
|
|
122
|
+
function(props, ref) {
|
|
123
|
+
const { props: buttonProps } = useButton(props);
|
|
124
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, { ...buttonProps, ref });
|
|
125
|
+
}
|
|
126
|
+
), buttonStaticConfig = {
|
|
127
|
+
inlineProps: /* @__PURE__ */ new Set([
|
|
128
|
+
// text props go here (can't really optimize them, but we never fully extract button anyway)
|
|
129
|
+
// may be able to remove this entirely, as the compiler / runtime have gotten better
|
|
130
|
+
"color",
|
|
131
|
+
"fontWeight",
|
|
132
|
+
"fontSize",
|
|
133
|
+
"fontFamily",
|
|
134
|
+
"fontStyle",
|
|
135
|
+
"letterSpacing",
|
|
136
|
+
"textAlign",
|
|
137
|
+
"unstyled"
|
|
138
|
+
])
|
|
139
|
+
}, Button2 = (0, import_helpers.withStaticProperties)(ButtonComponent, {
|
|
140
|
+
Text: ButtonText,
|
|
141
|
+
Icon: ButtonIcon
|
|
142
|
+
});
|
|
143
|
+
function useButton({ textProps, ...propsIn }, { Text = Button2.Text } = { Text: Button2.Text }) {
|
|
144
|
+
const isNested = (0, import_react.useContext)(import_stacks.ButtonNestingContext), propsActive = (0, import_web.useProps)(propsIn, {
|
|
145
|
+
noNormalize: !0,
|
|
146
|
+
noExpand: !0
|
|
147
|
+
}), {
|
|
148
|
+
icon,
|
|
149
|
+
iconAfter,
|
|
150
|
+
space,
|
|
151
|
+
spaceFlex,
|
|
152
|
+
scaleIcon = 1,
|
|
153
|
+
scaleSpace = 0.66,
|
|
154
|
+
separator,
|
|
155
|
+
noTextWrap,
|
|
156
|
+
fontFamily,
|
|
157
|
+
fontSize,
|
|
158
|
+
fontWeight,
|
|
159
|
+
fontStyle,
|
|
160
|
+
letterSpacing,
|
|
161
|
+
tag,
|
|
162
|
+
ellipse,
|
|
163
|
+
maxFontSizeMultiplier,
|
|
164
|
+
...restProps
|
|
165
|
+
} = propsActive, size = propsActive.size || (propsActive.unstyled ? void 0 : "$true"), color = propsActive.color, iconSize = (typeof size == "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size, {
|
|
166
|
+
font: fontFamily?.[0] === "$" ? fontFamily : void 0
|
|
167
|
+
})) * scaleIcon, getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
|
|
168
|
+
size: iconSize,
|
|
169
|
+
color
|
|
170
|
+
}), [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon), spaceSize = space ?? (0, import_web.getVariableValue)(iconSize) * scaleSpace, contents = noTextWrap ? [propsIn.children] : (0, import_text.wrapChildrenInText)(
|
|
171
|
+
Text,
|
|
172
|
+
{
|
|
173
|
+
children: propsIn.children,
|
|
174
|
+
fontFamily,
|
|
175
|
+
fontSize,
|
|
176
|
+
textProps,
|
|
177
|
+
fontWeight,
|
|
178
|
+
fontStyle,
|
|
179
|
+
letterSpacing,
|
|
180
|
+
ellipse,
|
|
181
|
+
maxFontSizeMultiplier
|
|
182
|
+
},
|
|
183
|
+
Text === ButtonText && propsActive.unstyled !== !0 ? {
|
|
184
|
+
unstyled: process.env.TAMAGUI_HEADLESS === "1",
|
|
185
|
+
size
|
|
186
|
+
} : void 0
|
|
187
|
+
), inner = (0, import_web.spacedChildren)({
|
|
188
|
+
// a bit arbitrary but scaling to font size is necessary so long as button does
|
|
189
|
+
space: spaceSize,
|
|
190
|
+
spaceFlex,
|
|
191
|
+
ensureKeys: !0,
|
|
192
|
+
separator,
|
|
193
|
+
direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
|
|
194
|
+
// for keys to stay the same we keep indices as similar a possible
|
|
195
|
+
// so even if icons are undefined we still pass them
|
|
196
|
+
children: [themedIcon, ...contents, themedIconAfter]
|
|
197
|
+
}), props = {
|
|
198
|
+
size,
|
|
199
|
+
...propsIn.disabled && {
|
|
200
|
+
// in rnw - false still has keyboard tabIndex, undefined = not actually focusable
|
|
201
|
+
focusable: void 0,
|
|
202
|
+
// even with tabIndex unset, it will keep focusVisibleStyle on web so disable it here
|
|
203
|
+
focusVisibleStyle: {
|
|
204
|
+
borderColor: "$background"
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
// fixes SSR issue + DOM nesting issue of not allowing button in button
|
|
208
|
+
tag: tag ?? (isNested ? "span" : (
|
|
209
|
+
// defaults to <a /> when accessibilityRole = link
|
|
210
|
+
// see https://github.com/tamagui/tamagui/issues/505
|
|
211
|
+
propsActive.accessibilityRole === "link" || propsActive.role === "link" ? "a" : "button"
|
|
212
|
+
)),
|
|
213
|
+
...restProps,
|
|
214
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, { value: !0, children: inner }),
|
|
215
|
+
// forces it to be a runtime pressStyle so it passes through context text colors
|
|
216
|
+
disableClassName: !0
|
|
217
|
+
};
|
|
218
|
+
return {
|
|
219
|
+
spaceSize,
|
|
220
|
+
isNested,
|
|
221
|
+
props
|
|
222
|
+
};
|
|
223
|
+
}
|
|
224
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var import_config_default = require("@tamagui/config-default"), import_core = require("@tamagui/core"), import_vitest = require("vitest");
|
|
2
|
+
const conf = (0, import_core.createTamagui)((0, import_config_default.getDefaultTamaguiConfig)());
|
|
3
|
+
(0, import_vitest.describe)("Button", () => {
|
|
4
|
+
(0, import_vitest.test)("123", () => {
|
|
5
|
+
(0, import_vitest.expect)(!0).toBeTruthy();
|
|
6
|
+
});
|
|
7
|
+
});
|
|
8
|
+
//# sourceMappingURL=Button.test.js.map
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __copyProps = (to, from, except, desc) => {
|
|
6
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
7
|
+
for (let key of __getOwnPropNames(from))
|
|
8
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
9
|
+
return to;
|
|
10
|
+
}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
11
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
12
|
+
var src_exports = {};
|
|
13
|
+
module.exports = __toCommonJS(src_exports);
|
|
14
|
+
__reExport(src_exports, require("./Button"), module.exports);
|
|
15
|
+
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/button",
|
|
3
|
-
"version": "1.116.
|
|
3
|
+
"version": "1.116.3",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -34,16 +34,16 @@
|
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@tamagui/font-size": "1.116.
|
|
38
|
-
"@tamagui/get-button-sized": "1.116.
|
|
39
|
-
"@tamagui/helpers": "1.116.
|
|
40
|
-
"@tamagui/helpers-tamagui": "1.116.
|
|
41
|
-
"@tamagui/stacks": "1.116.
|
|
42
|
-
"@tamagui/text": "1.116.
|
|
43
|
-
"@tamagui/web": "1.116.
|
|
37
|
+
"@tamagui/font-size": "1.116.3",
|
|
38
|
+
"@tamagui/get-button-sized": "1.116.3",
|
|
39
|
+
"@tamagui/helpers": "1.116.3",
|
|
40
|
+
"@tamagui/helpers-tamagui": "1.116.3",
|
|
41
|
+
"@tamagui/stacks": "1.116.3",
|
|
42
|
+
"@tamagui/text": "1.116.3",
|
|
43
|
+
"@tamagui/web": "1.116.3"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@tamagui/build": "1.116.
|
|
46
|
+
"@tamagui/build": "1.116.3",
|
|
47
47
|
"react": "^18.2.0 || ^19.0.0",
|
|
48
48
|
"vitest": "^2.1.3"
|
|
49
49
|
},
|
|
File without changes
|
|
File without changes
|
|
File without changes
|