@tamagui/button 3.0.0-beta.807.1 → 3.0.0-beta.831.1

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 (17) hide show
  1. package/dist/cjs/Button.cjs +18 -103
  2. package/dist/cjs/Button.native.cjs +18 -126
  3. package/dist/cjs/Button.native.js +18 -126
  4. package/dist/cjs/Button.native.js.map +1 -1
  5. package/dist/esm/Button.mjs +21 -104
  6. package/dist/esm/Button.mjs.map +1 -1
  7. package/dist/esm/Button.native.js +21 -127
  8. package/dist/esm/Button.native.js.map +1 -1
  9. package/dist/jsx/Button.mjs +21 -104
  10. package/dist/jsx/Button.mjs.map +1 -1
  11. package/dist/jsx/Button.native.cjs +18 -126
  12. package/dist/jsx/Button.native.js +18 -126
  13. package/dist/jsx/Button.native.js.map +1 -1
  14. package/package.json +11 -11
  15. package/src/Button.tsx +68 -190
  16. package/types/Button.d.ts +38 -275
  17. package/types/Button.d.ts.map +1 -1
package/dist/esm/Button.mjs CHANGED
@@ -1,35 +1,11 @@
1
1
  import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
2
2
  import { ButtonNestingContext } from "@tamagui/stacks";
3
- import { wrapChildrenInText } from "@tamagui/text";
4
- import { Text, View, createStyledContext, createStyledHOC, isVariable, styled, useProps, withStaticProperties } from "@tamagui/web";
3
+ import { textParentProps, wrapChildrenInText } from "@tamagui/text";
4
+ import { Text, View, splitStyleProps, styled } from "@tamagui/web";
5
5
  import { useContext } from "react";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
7
 
8
- const buttonContextKeys = [
9
- "color",
10
- "ellipsis",
11
- "fontFamily",
12
- "fontSize",
13
- "fontStyle",
14
- "fontWeight",
15
- "letterSpacing",
16
- "maxFontSizeMultiplier",
17
- "textAlign"
18
- ];
19
- const ButtonContext = createStyledContext({
20
- color: void 0,
21
- ellipsis: void 0,
22
- fontFamily: void 0,
23
- fontSize: void 0,
24
- fontStyle: void 0,
25
- fontWeight: void 0,
26
- letterSpacing: void 0,
27
- maxFontSizeMultiplier: void 0,
28
- textAlign: void 0
29
- }, { keys: buttonContextKeys });
30
8
  const ButtonFrame = styled(View, {
31
- context: ButtonContext,
32
- displayName: "ButtonFrame",
33
9
  role: "button",
34
10
  render: /* @__PURE__ */ jsx("button", { type: "button" }),
35
11
  tabIndex: 0,
@@ -40,88 +16,45 @@ const ButtonFrame = styled(View, {
40
16
  variants: { disabled: { true: { pointerEvents: "none" } } }
41
17
  });
42
18
  const ButtonText = styled(Text, {
43
- context: ButtonContext,
44
- displayName: "ButtonText",
45
19
  flexGrow: 0,
46
20
  flexShrink: 1
47
21
  });
48
- const isOpaqueColor = (value) => typeof value === "object" && value !== null && ("dynamic" in value || "semantic" in value || "resource_paths" in value);
49
22
  const ButtonIcon = ({ children, color, scaleIcon = 1, size }) => {
50
- const styledContext = ButtonContext.useStyledContext();
51
- const iconColor = color ?? styledContext?.color;
52
23
  const getThemedIcon = useGetThemedIcon({
53
- color: typeof iconColor === "string" && iconColor !== "unset" || isVariable(iconColor) || isOpaqueColor(iconColor) ? iconColor : void 0,
24
+ color,
54
25
  size: size === void 0 ? void 0 : size * scaleIcon
55
26
  });
56
27
  return getThemedIcon(children);
57
28
  };
58
- const buttonInternalPropNames = [
59
- "children",
60
- "color",
61
- "disabled",
62
- "ellipsis",
63
- "fontFamily",
64
- "fontSize",
65
- "fontStyle",
66
- "fontWeight",
67
- "icon",
68
- "iconAfter",
69
- "iconSize",
70
- "letterSpacing",
71
- "maxFontSizeMultiplier",
72
- "noTextWrap",
73
- "render",
74
- "scaleIcon",
75
- "textAlign",
76
- "textProps"
77
- ];
78
- function useButton(propsIn, { Text: Text2 = ButtonText, iconColor: iconColorOption, iconSize: iconSizeOption, textProps: textPropsOption } = {}) {
29
+ function useButton(propsIn, { Text: Text2 = ButtonText, iconColor, iconSize: iconSizeOption, textProps: textPropsOption } = {}) {
79
30
  const isNested = useContext(ButtonNestingContext);
80
- const styledContext = ButtonContext.useStyledContext();
81
- const processedProps = useProps(propsIn, {
82
- noNormalize: true,
83
- noExpand: true
31
+ const [wrappedTextProps, buttonProps] = splitStyleProps(propsIn, {
32
+ expandShorthands: true,
33
+ filter: textParentProps
84
34
  });
85
- const { children, color, disabled, ellipsis, fontFamily, fontSize, fontStyle, fontWeight, icon, iconAfter, iconSize, letterSpacing, maxFontSizeMultiplier, noTextWrap, render, scaleIcon = 1, textAlign, textProps } = processedProps;
86
- const frameProps = { ...propsIn };
87
- for (const key of buttonInternalPropNames) {
88
- delete frameProps[key];
89
- }
90
- const contextColor = color ?? styledContext?.color;
91
- const iconColor = iconColorOption ?? contextColor;
35
+ const { children, disabled, icon, iconAfter, iconSize, render, scaleIcon = 1, ...frameProps } = buttonProps;
36
+ const { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;
92
37
  const resolvedIconSize = iconSize ?? iconSizeOption;
93
38
  const getThemedIcon = useGetThemedIcon({
94
- color: typeof iconColor === "string" && iconColor !== "unset" || isVariable(iconColor) || isOpaqueColor(iconColor) ? iconColor : void 0,
39
+ color: iconColor,
95
40
  size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon
96
41
  });
97
42
  const [themedIcon, themedIconAfter] = [icon, iconAfter].map((item) => {
98
43
  return item ? getThemedIcon(item) : null;
99
44
  });
100
- const textContext = {
101
- color: contextColor,
102
- ellipsis: ellipsis ?? styledContext?.ellipsis,
103
- fontFamily: fontFamily ?? styledContext?.fontFamily,
104
- fontSize: fontSize ?? styledContext?.fontSize,
105
- fontStyle: fontStyle ?? styledContext?.fontStyle,
106
- fontWeight: fontWeight ?? styledContext?.fontWeight,
107
- letterSpacing: letterSpacing ?? styledContext?.letterSpacing,
108
- maxFontSizeMultiplier: maxFontSizeMultiplier ?? styledContext?.maxFontSizeMultiplier,
109
- textAlign: textAlign ?? styledContext?.textAlign
110
- };
111
45
  const wrappedChildren = wrapChildrenInText(Text2, {
112
46
  children,
113
- ...textContext,
114
47
  noTextWrap,
115
48
  textProps
116
49
  }, {
117
50
  ...textPropsOption,
118
- ...processedProps.size === void 0 ? null : { size: processedProps.size }
51
+ ...textStyleProps
119
52
  });
120
- const resolvedRender = render ?? (isNested ? "span" : processedProps.accessibilityRole === "link" || processedProps.role === "link" ? "a" : disabled ? /* @__PURE__ */ jsx("button", {
53
+ const resolvedRender = render ?? (isNested ? "span" : disabled ? /* @__PURE__ */ jsx("button", {
121
54
  type: "button",
122
55
  disabled: true
123
56
  }) : void 0);
124
- const props = {
57
+ const resolvedProps = {
125
58
  ...frameProps,
126
59
  ...disabled && {
127
60
  "aria-disabled": true,
@@ -142,36 +75,20 @@ function useButton(propsIn, { Text: Text2 = ButtonText, iconColor: iconColorOpti
142
75
  onKeyDown: void 0,
143
76
  onKeyUp: void 0
144
77
  },
145
- children: /* @__PURE__ */ jsx(ButtonNestingContext.Provider, {
78
+ children: /* @__PURE__ */ jsxs(ButtonNestingContext.Provider, {
146
79
  value: true,
147
- children: /* @__PURE__ */ jsxs(ButtonContext.Provider, {
148
- ...textContext,
149
- children: [
150
- themedIcon,
151
- wrappedChildren,
152
- themedIconAfter
153
- ]
154
- })
80
+ children: [
81
+ themedIcon,
82
+ wrappedChildren,
83
+ themedIconAfter
84
+ ]
155
85
  })
156
86
  };
157
87
  return {
158
88
  isNested,
159
- props
89
+ props: resolvedProps
160
90
  };
161
91
  }
162
- const ButtonComponent = createStyledHOC(ButtonFrame, function Button(props, ref) {
163
- const { props: buttonProps } = useButton(props);
164
- return /* @__PURE__ */ jsx(ButtonFrame, {
165
- ref,
166
- ...buttonProps
167
- });
168
- });
169
- const Button2 = withStaticProperties(ButtonComponent, {
170
- Apply: ButtonContext.Provider,
171
- Frame: ButtonFrame,
172
- Icon: ButtonIcon,
173
- Text: ButtonText
174
- });
175
92
 
176
- export { Button2 as Button, ButtonContext, ButtonFrame, ButtonIcon, ButtonText, useButton };
93
+ export { ButtonFrame, ButtonIcon, ButtonText, useButton };
177
94
  //# sourceMappingURL=Button.mjs.map
package/dist/esm/Button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","names":[],"sources":["esm/Button.js"],"sourcesContent":["import { useGetThemedIcon } from \"@tamagui/helpers-tamagui\";\nimport { ButtonNestingContext } from \"@tamagui/stacks\";\nimport { wrapChildrenInText } from \"@tamagui/text\";\nimport {\n createStyledContext,\n createStyledHOC,\n isVariable,\n styled,\n Text,\n useProps,\n View,\n withStaticProperties\n} from \"@tamagui/web\";\nimport { useContext } from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst buttonContextKeys = [\n \"color\",\n \"ellipsis\",\n \"fontFamily\",\n \"fontSize\",\n \"fontStyle\",\n \"fontWeight\",\n \"letterSpacing\",\n \"maxFontSizeMultiplier\",\n \"textAlign\"\n];\nconst ButtonContext = createStyledContext(\n {\n color: void 0,\n ellipsis: void 0,\n fontFamily: void 0,\n fontSize: void 0,\n fontStyle: void 0,\n fontWeight: void 0,\n letterSpacing: void 0,\n maxFontSizeMultiplier: void 0,\n textAlign: void 0\n },\n {\n keys: buttonContextKeys\n }\n);\nconst ButtonFrame = styled(View, {\n context: ButtonContext,\n displayName: \"ButtonFrame\",\n role: \"button\",\n render: /* @__PURE__ */ jsx(\"button\", { type: \"button\" }),\n tabIndex: 0,\n alignItems: \"center\",\n flexDirection: \"row\",\n flexWrap: \"nowrap\",\n justifyContent: \"center\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nconst ButtonText = styled(Text, {\n context: ButtonContext,\n displayName: \"ButtonText\",\n // flexGrow 1 pushes text to the start of its parent on native\n flexGrow: 0,\n flexShrink: 1\n});\nconst isOpaqueColor = (value) => typeof value === \"object\" && value !== null && (\"dynamic\" in value || \"semantic\" in value || \"resource_paths\" in value);\nconst ButtonIcon = ({ children, color, scaleIcon = 1, size }) => {\n const styledContext = ButtonContext.useStyledContext();\n const iconColor = color ?? styledContext?.color;\n const getThemedIcon = useGetThemedIcon({\n // icons take one concrete color: conditional values (numbers, flat\n // objects) fall back to the theme color\n color: typeof iconColor === \"string\" && iconColor !== \"unset\" || isVariable(iconColor) || isOpaqueColor(iconColor) ? iconColor : void 0,\n size: size === void 0 ? void 0 : size * scaleIcon\n });\n return getThemedIcon(children);\n};\nconst buttonInternalPropNames = [\n \"children\",\n \"color\",\n \"disabled\",\n \"ellipsis\",\n \"fontFamily\",\n \"fontSize\",\n \"fontStyle\",\n \"fontWeight\",\n \"icon\",\n \"iconAfter\",\n \"iconSize\",\n \"letterSpacing\",\n \"maxFontSizeMultiplier\",\n \"noTextWrap\",\n \"render\",\n \"scaleIcon\",\n \"textAlign\",\n \"textProps\"\n];\nfunction useButton(propsIn, {\n Text: Text2 = ButtonText,\n iconColor: iconColorOption,\n iconSize: iconSizeOption,\n textProps: textPropsOption\n} = {}) {\n const isNested = useContext(ButtonNestingContext);\n const styledContext = ButtonContext.useStyledContext();\n const processedProps = useProps(propsIn, {\n noNormalize: true,\n noExpand: true\n });\n const {\n children,\n color,\n disabled,\n ellipsis,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n icon,\n iconAfter,\n iconSize,\n letterSpacing,\n maxFontSizeMultiplier,\n noTextWrap,\n render,\n scaleIcon = 1,\n textAlign,\n textProps\n } = processedProps;\n const frameProps = { ...propsIn };\n for (const key of buttonInternalPropNames) {\n delete frameProps[key];\n }\n const contextColor = color ?? styledContext?.color;\n const iconColor = iconColorOption ?? contextColor;\n const resolvedIconSize = iconSize ?? iconSizeOption;\n const getThemedIcon = useGetThemedIcon({\n // icons take one concrete color: conditional values (numbers, flat\n // objects) fall back to the theme color\n color: typeof iconColor === \"string\" && iconColor !== \"unset\" || isVariable(iconColor) || isOpaqueColor(iconColor) ? iconColor : void 0,\n size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon\n });\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map((item) => {\n return item ? getThemedIcon(item) : null;\n });\n const textContext = {\n color: contextColor,\n ellipsis: ellipsis ?? styledContext?.ellipsis,\n fontFamily: fontFamily ?? styledContext?.fontFamily,\n fontSize: fontSize ?? styledContext?.fontSize,\n fontStyle: fontStyle ?? styledContext?.fontStyle,\n fontWeight: fontWeight ?? styledContext?.fontWeight,\n letterSpacing: letterSpacing ?? styledContext?.letterSpacing,\n maxFontSizeMultiplier: maxFontSizeMultiplier ?? styledContext?.maxFontSizeMultiplier,\n textAlign: textAlign ?? styledContext?.textAlign\n };\n const wrappedChildren = wrapChildrenInText(\n Text2,\n {\n children,\n ...textContext,\n noTextWrap,\n textProps\n },\n {\n ...textPropsOption,\n ...processedProps.size === void 0 ? null : { size: processedProps.size }\n }\n );\n const resolvedRender = render ?? (isNested ? \"span\" : processedProps.accessibilityRole === \"link\" || processedProps.role === \"link\" ? \"a\" : disabled ? /* @__PURE__ */ jsx(\"button\", { type: \"button\", disabled: true }) : void 0);\n const props = {\n ...frameProps,\n ...disabled && {\n \"aria-disabled\": true,\n disabled: true,\n tabIndex: -1\n },\n ...resolvedRender === void 0 ? null : { render: resolvedRender },\n ...isNested && {\n // a nested Button is a presentation part, not a control: strip the\n // interactive semantics so we never place a focusable role=button (with\n // its own press/keyboard handlers) inside the outer native <button>. that\n // nesting is invalid html, adds an extra focus stop, and bubbles\n // activation to the outer control. resolvedRender already makes it a span.\n role: \"none\",\n tabIndex: -1,\n \"aria-disabled\": void 0,\n disabled: void 0,\n onPress: void 0,\n onPressIn: void 0,\n onPressOut: void 0,\n onLongPress: void 0,\n onClick: void 0,\n onKeyDown: void 0,\n onKeyUp: void 0\n },\n children: /* @__PURE__ */ jsx(ButtonNestingContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(ButtonContext.Provider, { ...textContext, children: [\n themedIcon,\n wrappedChildren,\n themedIconAfter\n ] }) })\n };\n return {\n isNested,\n props\n };\n}\nconst ButtonComponent = createStyledHOC(\n ButtonFrame,\n function Button(props, ref) {\n const { props: buttonProps } = useButton(props);\n return /* @__PURE__ */ jsx(ButtonFrame, { ref, ...buttonProps });\n }\n);\nconst Button2 = withStaticProperties(ButtonComponent, {\n Apply: ButtonContext.Provider,\n Frame: ButtonFrame,\n Icon: ButtonIcon,\n Text: ButtonText\n});\nexport {\n Button2 as Button,\n ButtonContext,\n ButtonFrame,\n ButtonIcon,\n ButtonText,\n useButton\n};\n//# sourceMappingURL=Button.js.map\n"],"mappings":";;;;;;;;AAeA,MAAM,oBAAoB;CACxB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,gBAAgB,oBACpB;CACE,OAAO,KAAK;CACZ,UAAU,KAAK;CACf,YAAY,KAAK;CACjB,UAAU,KAAK;CACf,WAAW,KAAK;CAChB,YAAY,KAAK;CACjB,eAAe,KAAK;CACpB,uBAAuB,KAAK;CAC5B,WAAW,KAAK;AAClB,GACA,EACE,MAAM,kBACR,CACF;AACA,MAAM,cAAc,OAAO,MAAM;CAC/B,SAAS;CACT,aAAa;CACb,MAAM;CACN,QAAwB,oBAAI,UAAU,EAAE,MAAM,SAAS,CAAC;CACxD,UAAU;CACV,YAAY;CACZ,eAAe;CACf,UAAU;CACV,gBAAgB;CAChB,UAAU,EACR,UAAU,EACR,MAAM,EACJ,eAAe,OACjB,EACF,EACF;AACF,CAAC;AACD,MAAM,aAAa,OAAO,MAAM;CAC9B,SAAS;CACT,aAAa;CAEb,UAAU;CACV,YAAY;AACd,CAAC;AACD,MAAM,iBAAiB,UAAU,OAAO,UAAU,YAAY,UAAU,SAAS,aAAa,SAAS,cAAc,SAAS,oBAAoB;AAClJ,MAAM,cAAc,EAAE,UAAU,OAAO,YAAY,GAAG,WAAW;CAC/D,MAAM,gBAAgB,cAAc,iBAAiB;CACrD,MAAM,YAAY,SAAS,eAAe;CAC1C,MAAM,gBAAgB,iBAAiB;EAGrC,OAAO,OAAO,cAAc,YAAY,cAAc,WAAW,WAAW,SAAS,KAAK,cAAc,SAAS,IAAI,YAAY,KAAK;EACtI,MAAM,SAAS,KAAK,IAAI,KAAK,IAAI,OAAO;CAC1C,CAAC;CACD,OAAO,cAAc,QAAQ;AAC/B;AACA,MAAM,0BAA0B;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AACA,SAAS,UAAU,SAAS,EAC1B,MAAM,QAAQ,YACd,WAAW,iBACX,UAAU,gBACV,WAAW,oBACT,CAAC,GAAG;CACN,MAAM,WAAW,WAAW,oBAAoB;CAChD,MAAM,gBAAgB,cAAc,iBAAiB;CACrD,MAAM,iBAAiB,SAAS,SAAS;EACvC,aAAa;EACb,UAAU;CACZ,CAAC;CACD,MAAM,EACJ,UACA,OACA,UACA,UACA,YACA,UACA,WACA,YACA,MACA,WACA,UACA,eACA,uBACA,YACA,QACA,YAAY,GACZ,WACA,cACE;CACJ,MAAM,aAAa,EAAE,GAAG,QAAQ;CAChC,KAAK,MAAM,OAAO,yBAAyB;EACzC,OAAO,WAAW;CACpB;CACA,MAAM,eAAe,SAAS,eAAe;CAC7C,MAAM,YAAY,mBAAmB;CACrC,MAAM,mBAAmB,YAAY;CACrC,MAAM,gBAAgB,iBAAiB;EAGrC,OAAO,OAAO,cAAc,YAAY,cAAc,WAAW,WAAW,SAAS,KAAK,cAAc,SAAS,IAAI,YAAY,KAAK;EACtI,MAAM,qBAAqB,KAAK,IAAI,KAAK,IAAI,mBAAmB;CAClE,CAAC;CACD,MAAM,CAAC,YAAY,mBAAmB,CAAC,MAAM,SAAS,CAAC,CAAC,KAAK,SAAS;EACpE,OAAO,OAAO,cAAc,IAAI,IAAI;CACtC,CAAC;CACD,MAAM,cAAc;EAClB,OAAO;EACP,UAAU,YAAY,eAAe;EACrC,YAAY,cAAc,eAAe;EACzC,UAAU,YAAY,eAAe;EACrC,WAAW,aAAa,eAAe;EACvC,YAAY,cAAc,eAAe;EACzC,eAAe,iBAAiB,eAAe;EAC/C,uBAAuB,yBAAyB,eAAe;EAC/D,WAAW,aAAa,eAAe;CACzC;CACA,MAAM,kBAAkB,mBACtB,OACA;EACE;EACA,GAAG;EACH;EACA;CACF,GACA;EACE,GAAG;EACH,GAAG,eAAe,SAAS,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,KAAK;CACzE,CACF;CACA,MAAM,iBAAiB,WAAW,WAAW,SAAS,eAAe,sBAAsB,UAAU,eAAe,SAAS,SAAS,MAAM,WAA2B,oBAAI,UAAU;EAAE,MAAM;EAAU,UAAU;CAAK,CAAC,IAAI,KAAK;CAChO,MAAM,QAAQ;EACZ,GAAG;EACH,GAAG,YAAY;GACb,iBAAiB;GACjB,UAAU;GACV,UAAU,CAAC;EACb;EACA,GAAG,mBAAmB,KAAK,IAAI,OAAO,EAAE,QAAQ,eAAe;EAC/D,GAAG,YAAY;GAMb,MAAM;GACN,UAAU,CAAC;GACX,iBAAiB,KAAK;GACtB,UAAU,KAAK;GACf,SAAS,KAAK;GACd,WAAW,KAAK;GAChB,YAAY,KAAK;GACjB,aAAa,KAAK;GAClB,SAAS,KAAK;GACd,WAAW,KAAK;GAChB,SAAS,KAAK;EAChB;EACA,UAA0B,oBAAI,qBAAqB,UAAU;GAAE,OAAO;GAAM,UAA0B,qBAAK,cAAc,UAAU;IAAE,GAAG;IAAa,UAAU;KAC7J;KACA;KACA;IACF;GAAE,CAAC;EAAE,CAAC;CACR;CACA,OAAO;EACL;EACA;CACF;AACF;AACA,MAAM,kBAAkB,gBACtB,aACA,SAAS,OAAO,OAAO,KAAK;CAC1B,MAAM,EAAE,OAAO,gBAAgB,UAAU,KAAK;CAC9C,OAAuB,oBAAI,aAAa;EAAE;EAAK,GAAG;CAAY,CAAC;AACjE,CACF;AACA,MAAM,UAAU,qBAAqB,iBAAiB;CACpD,OAAO,cAAc;CACrB,OAAO;CACP,MAAM;CACN,MAAM;AACR,CAAC"}
1
+ {"version":3,"file":"Button.js","names":[],"sources":["esm/Button.js"],"sourcesContent":["import { useGetThemedIcon } from \"@tamagui/helpers-tamagui\";\nimport { ButtonNestingContext } from \"@tamagui/stacks\";\nimport { textParentProps, wrapChildrenInText } from \"@tamagui/text\";\nimport { splitStyleProps, styled, Text, View } from \"@tamagui/web\";\nimport { useContext } from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst ButtonFrame = styled(View, {\n // role is the cross-platform one; render only lands on web\n role: \"button\",\n render: /* @__PURE__ */ jsx(\"button\", { type: \"button\" }),\n tabIndex: 0,\n alignItems: \"center\",\n flexDirection: \"row\",\n flexWrap: \"nowrap\",\n justifyContent: \"center\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nconst ButtonText = styled(Text, {\n // flexGrow 1 pushes text to the start of its parent on native\n flexGrow: 0,\n flexShrink: 1\n});\nconst ButtonIcon = ({ children, color, scaleIcon = 1, size }) => {\n const getThemedIcon = useGetThemedIcon({\n color,\n size: size === void 0 ? void 0 : size * scaleIcon\n });\n return getThemedIcon(children);\n};\nfunction useButton(propsIn, {\n Text: Text2 = ButtonText,\n iconColor,\n iconSize: iconSizeOption,\n textProps: textPropsOption\n} = {}) {\n const isNested = useContext(ButtonNestingContext);\n const [wrappedTextProps, buttonProps] = splitStyleProps(propsIn, {\n expandShorthands: true,\n filter: textParentProps\n });\n const {\n children,\n disabled,\n icon,\n iconAfter,\n iconSize,\n render,\n scaleIcon = 1,\n ...frameProps\n } = buttonProps;\n const { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;\n const resolvedIconSize = iconSize ?? iconSizeOption;\n const getThemedIcon = useGetThemedIcon({\n color: iconColor,\n size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon\n });\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map((item) => {\n return item ? getThemedIcon(item) : null;\n });\n const wrappedChildren = wrapChildrenInText(\n Text2,\n { children, noTextWrap, textProps },\n { ...textPropsOption, ...textStyleProps }\n );\n const resolvedRender = render ?? (isNested ? \"span\" : disabled ? /* @__PURE__ */ jsx(\"button\", { type: \"button\", disabled: true }) : void 0);\n const resolvedProps = {\n ...frameProps,\n ...disabled && {\n \"aria-disabled\": true,\n disabled: true,\n tabIndex: -1\n },\n ...resolvedRender === void 0 ? null : { render: resolvedRender },\n ...isNested && {\n // a nested Button is a presentation part, not a control: strip the\n // interactive semantics so we never place a focusable role=button (with\n // its own press/keyboard handlers) inside the outer native <button>. that\n // nesting is invalid html, adds an extra focus stop, and bubbles\n // activation to the outer control. resolvedRender already makes it a span.\n role: \"none\",\n tabIndex: -1,\n \"aria-disabled\": void 0,\n disabled: void 0,\n onPress: void 0,\n onPressIn: void 0,\n onPressOut: void 0,\n onLongPress: void 0,\n onClick: void 0,\n onKeyDown: void 0,\n onKeyUp: void 0\n },\n children: /* @__PURE__ */ jsxs(ButtonNestingContext.Provider, { value: true, children: [\n themedIcon,\n wrappedChildren,\n themedIconAfter\n ] })\n };\n return {\n isNested,\n props: resolvedProps\n };\n}\nexport {\n ButtonFrame,\n ButtonIcon,\n ButtonText,\n useButton\n};\n//# sourceMappingURL=Button.js.map\n"],"mappings":";;;;;;;;AAMA,MAAM,cAAc,OAAO,MAAM;CAE/B,MAAM;CACN,QAAwB,oBAAI,UAAU,EAAE,MAAM,SAAS,CAAC;CACxD,UAAU;CACV,YAAY;CACZ,eAAe;CACf,UAAU;CACV,gBAAgB;CAChB,UAAU,EACR,UAAU,EACR,MAAM,EACJ,eAAe,OACjB,EACF,EACF;AACF,CAAC;AACD,MAAM,aAAa,OAAO,MAAM;CAE9B,UAAU;CACV,YAAY;AACd,CAAC;AACD,MAAM,cAAc,EAAE,UAAU,OAAO,YAAY,GAAG,WAAW;CAC/D,MAAM,gBAAgB,iBAAiB;EACrC;EACA,MAAM,SAAS,KAAK,IAAI,KAAK,IAAI,OAAO;CAC1C,CAAC;CACD,OAAO,cAAc,QAAQ;AAC/B;AACA,SAAS,UAAU,SAAS,EAC1B,MAAM,QAAQ,YACd,WACA,UAAU,gBACV,WAAW,oBACT,CAAC,GAAG;CACN,MAAM,WAAW,WAAW,oBAAoB;CAChD,MAAM,CAAC,kBAAkB,eAAe,gBAAgB,SAAS;EAC/D,kBAAkB;EAClB,QAAQ;CACV,CAAC;CACD,MAAM,EACJ,UACA,UACA,MACA,WACA,UACA,QACA,YAAY,GACZ,GAAG,eACD;CACJ,MAAM,EAAE,YAAY,WAAW,GAAG,mBAAmB;CACrD,MAAM,mBAAmB,YAAY;CACrC,MAAM,gBAAgB,iBAAiB;EACrC,OAAO;EACP,MAAM,qBAAqB,KAAK,IAAI,KAAK,IAAI,mBAAmB;CAClE,CAAC;CACD,MAAM,CAAC,YAAY,mBAAmB,CAAC,MAAM,SAAS,CAAC,CAAC,KAAK,SAAS;EACpE,OAAO,OAAO,cAAc,IAAI,IAAI;CACtC,CAAC;CACD,MAAM,kBAAkB,mBACtB,OACA;EAAE;EAAU;EAAY;CAAU,GAClC;EAAE,GAAG;EAAiB,GAAG;CAAe,CAC1C;CACA,MAAM,iBAAiB,WAAW,WAAW,SAAS,WAA2B,oBAAI,UAAU;EAAE,MAAM;EAAU,UAAU;CAAK,CAAC,IAAI,KAAK;CAC1I,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG,YAAY;GACb,iBAAiB;GACjB,UAAU;GACV,UAAU,CAAC;EACb;EACA,GAAG,mBAAmB,KAAK,IAAI,OAAO,EAAE,QAAQ,eAAe;EAC/D,GAAG,YAAY;GAMb,MAAM;GACN,UAAU,CAAC;GACX,iBAAiB,KAAK;GACtB,UAAU,KAAK;GACf,SAAS,KAAK;GACd,WAAW,KAAK;GAChB,YAAY,KAAK;GACjB,aAAa,KAAK;GAClB,SAAS,KAAK;GACd,WAAW,KAAK;GAChB,SAAS,KAAK;EAChB;EACA,UAA0B,qBAAK,qBAAqB,UAAU;GAAE,OAAO;GAAM,UAAU;IACrF;IACA;IACA;GACF;EAAE,CAAC;CACL;CACA,OAAO;EACL;EACA,OAAO;CACT;AACF"}
package/dist/esm/Button.native.js CHANGED
@@ -1,39 +1,11 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
3
3
  import { ButtonNestingContext } from "@tamagui/stacks";
4
- import { wrapChildrenInText } from "@tamagui/text";
5
- import { Text, View, createStyledContext, createStyledHOC, isVariable, styled, useProps, withStaticProperties } from "@tamagui/web";
4
+ import { textParentProps, wrapChildrenInText } from "@tamagui/text";
5
+ import { Text, View, splitStyleProps, styled } from "@tamagui/web";
6
6
  import { useContext } from "react";
7
7
 
8
- function _type_of(obj) {
9
- "@swc/helpers - typeof";
10
- return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
11
- }
12
- var buttonContextKeys = [
13
- "color",
14
- "ellipsis",
15
- "fontFamily",
16
- "fontSize",
17
- "fontStyle",
18
- "fontWeight",
19
- "letterSpacing",
20
- "maxFontSizeMultiplier",
21
- "textAlign"
22
- ];
23
- var ButtonContext = createStyledContext({
24
- color: void 0,
25
- ellipsis: void 0,
26
- fontFamily: void 0,
27
- fontSize: void 0,
28
- fontStyle: void 0,
29
- fontWeight: void 0,
30
- letterSpacing: void 0,
31
- maxFontSizeMultiplier: void 0,
32
- textAlign: void 0
33
- }, { keys: buttonContextKeys });
34
8
  var ButtonFrame = styled(View, {
35
- context: ButtonContext,
36
- displayName: "ButtonFrame",
37
9
  role: "button",
38
10
  render: /* @__PURE__ */ jsx("button", { type: "button" }),
39
11
  tabIndex: 0,
@@ -44,109 +16,47 @@ var ButtonFrame = styled(View, {
44
16
  variants: { disabled: { true: { pointerEvents: "none" } } }
45
17
  });
46
18
  var ButtonText = styled(Text, {
47
- context: ButtonContext,
48
- displayName: "ButtonText",
49
19
  flexGrow: 0,
50
20
  flexShrink: 1
51
21
  });
52
- var isOpaqueColor = function(value) {
53
- return (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && value !== null && ("dynamic" in value || "semantic" in value || "resource_paths" in value);
54
- };
55
22
  var ButtonIcon = function(param) {
56
23
  var { children, color, scaleIcon = 1, size } = param;
57
- var styledContext = ButtonContext.useStyledContext();
58
- var iconColor = color !== null && color !== void 0 ? color : styledContext === null || styledContext === void 0 ? void 0 : styledContext.color;
59
24
  var getThemedIcon = useGetThemedIcon({
60
- color: typeof iconColor === "string" && iconColor !== "unset" || isVariable(iconColor) || isOpaqueColor(iconColor) ? iconColor : void 0,
25
+ color,
61
26
  size: size === void 0 ? void 0 : size * scaleIcon
62
27
  });
63
28
  return getThemedIcon(children);
64
29
  };
65
- var buttonInternalPropNames = [
66
- "children",
67
- "color",
68
- "disabled",
69
- "ellipsis",
70
- "fontFamily",
71
- "fontSize",
72
- "fontStyle",
73
- "fontWeight",
74
- "icon",
75
- "iconAfter",
76
- "iconSize",
77
- "letterSpacing",
78
- "maxFontSizeMultiplier",
79
- "noTextWrap",
80
- "render",
81
- "scaleIcon",
82
- "textAlign",
83
- "textProps"
84
- ];
85
30
  function useButton(propsIn) {
86
- var { Text: _$Text = ButtonText, iconColor: iconColorOption, iconSize: iconSizeOption, textProps: textPropsOption } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
31
+ var { Text: _$Text = ButtonText, iconColor, iconSize: iconSizeOption, textProps: textPropsOption } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
87
32
  var isNested = useContext(ButtonNestingContext);
88
- var styledContext = ButtonContext.useStyledContext();
89
- var processedProps = useProps(propsIn, {
90
- noNormalize: true,
91
- noExpand: true
33
+ var [wrappedTextProps, buttonProps] = splitStyleProps(propsIn, {
34
+ expandShorthands: true,
35
+ filter: textParentProps
92
36
  });
93
- var { children, color, disabled, ellipsis, fontFamily, fontSize, fontStyle, fontWeight, icon, iconAfter, iconSize, letterSpacing, maxFontSizeMultiplier, noTextWrap, render, scaleIcon = 1, textAlign, textProps } = processedProps;
94
- var frameProps = { ...propsIn };
95
- var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
96
- try {
97
- for (var _iterator = buttonInternalPropNames[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
98
- var key = _step.value;
99
- delete frameProps[key];
100
- }
101
- } catch (err) {
102
- _didIteratorError = true;
103
- _iteratorError = err;
104
- } finally {
105
- try {
106
- if (!_iteratorNormalCompletion && _iterator.return != null) {
107
- _iterator.return();
108
- }
109
- } finally {
110
- if (_didIteratorError) {
111
- throw _iteratorError;
112
- }
113
- }
114
- }
115
- var contextColor = color !== null && color !== void 0 ? color : styledContext === null || styledContext === void 0 ? void 0 : styledContext.color;
116
- var iconColor = iconColorOption !== null && iconColorOption !== void 0 ? iconColorOption : contextColor;
37
+ var { children, disabled, icon, iconAfter, iconSize, render, scaleIcon = 1, ...frameProps } = buttonProps;
38
+ var { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;
117
39
  var resolvedIconSize = iconSize !== null && iconSize !== void 0 ? iconSize : iconSizeOption;
118
40
  var getThemedIcon = useGetThemedIcon({
119
- color: typeof iconColor === "string" && iconColor !== "unset" || isVariable(iconColor) || isOpaqueColor(iconColor) ? iconColor : void 0,
41
+ color: iconColor,
120
42
  size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon
121
43
  });
122
44
  var [themedIcon, themedIconAfter] = [icon, iconAfter].map(function(item) {
123
45
  return item ? getThemedIcon(item) : null;
124
46
  });
125
- var textContext = {
126
- color: contextColor,
127
- ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : styledContext === null || styledContext === void 0 ? void 0 : styledContext.ellipsis,
128
- fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : styledContext === null || styledContext === void 0 ? void 0 : styledContext.fontFamily,
129
- fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : styledContext === null || styledContext === void 0 ? void 0 : styledContext.fontSize,
130
- fontStyle: fontStyle !== null && fontStyle !== void 0 ? fontStyle : styledContext === null || styledContext === void 0 ? void 0 : styledContext.fontStyle,
131
- fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : styledContext === null || styledContext === void 0 ? void 0 : styledContext.fontWeight,
132
- letterSpacing: letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : styledContext === null || styledContext === void 0 ? void 0 : styledContext.letterSpacing,
133
- maxFontSizeMultiplier: maxFontSizeMultiplier !== null && maxFontSizeMultiplier !== void 0 ? maxFontSizeMultiplier : styledContext === null || styledContext === void 0 ? void 0 : styledContext.maxFontSizeMultiplier,
134
- textAlign: textAlign !== null && textAlign !== void 0 ? textAlign : styledContext === null || styledContext === void 0 ? void 0 : styledContext.textAlign
135
- };
136
47
  var wrappedChildren = wrapChildrenInText(_$Text, {
137
48
  children,
138
- ...textContext,
139
49
  noTextWrap,
140
50
  textProps
141
51
  }, {
142
52
  ...textPropsOption,
143
- ...processedProps.size === void 0 ? null : { size: processedProps.size }
53
+ ...textStyleProps
144
54
  });
145
- var resolvedRender = render !== null && render !== void 0 ? render : isNested ? "span" : processedProps.accessibilityRole === "link" || processedProps.role === "link" ? "a" : disabled ? /* @__PURE__ */ jsx("button", {
55
+ var resolvedRender = render !== null && render !== void 0 ? render : isNested ? "span" : disabled ? /* @__PURE__ */ jsx("button", {
146
56
  type: "button",
147
57
  disabled: true
148
58
  }) : void 0;
149
- var props = {
59
+ var resolvedProps = {
150
60
  ...frameProps,
151
61
  ...disabled && {
152
62
  "aria-disabled": true,
@@ -167,36 +77,20 @@ function useButton(propsIn) {
167
77
  onKeyDown: void 0,
168
78
  onKeyUp: void 0
169
79
  },
170
- children: /* @__PURE__ */ jsx(ButtonNestingContext.Provider, {
80
+ children: /* @__PURE__ */ jsxs(ButtonNestingContext.Provider, {
171
81
  value: true,
172
- children: /* @__PURE__ */ jsxs(ButtonContext.Provider, {
173
- ...textContext,
174
- children: [
175
- themedIcon,
176
- wrappedChildren,
177
- themedIconAfter
178
- ]
179
- })
82
+ children: [
83
+ themedIcon,
84
+ wrappedChildren,
85
+ themedIconAfter
86
+ ]
180
87
  })
181
88
  };
182
89
  return {
183
90
  isNested,
184
- props
91
+ props: resolvedProps
185
92
  };
186
93
  }
187
- var ButtonComponent = createStyledHOC(ButtonFrame, function Button(props, ref) {
188
- var { props: buttonProps } = useButton(props);
189
- return /* @__PURE__ */ jsx(ButtonFrame, {
190
- ref,
191
- ...buttonProps
192
- });
193
- });
194
- var Button2 = withStaticProperties(ButtonComponent, {
195
- Apply: ButtonContext.Provider,
196
- Frame: ButtonFrame,
197
- Icon: ButtonIcon,
198
- Text: ButtonText
199
- });
200
94
 
201
- export { Button2 as Button, ButtonContext, ButtonFrame, ButtonIcon, ButtonText, useButton };
95
+ export { ButtonFrame, ButtonIcon, ButtonText, useButton };
202
96
  //# sourceMappingURL=Button.native.js.map
package/dist/esm/Button.native.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.native.js","names":[],"sources":["esm/Button.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useGetThemedIcon } from \"@tamagui/helpers-tamagui\";\nimport { ButtonNestingContext } from \"@tamagui/stacks\";\nimport { wrapChildrenInText } from \"@tamagui/text\";\nimport { createStyledContext, createStyledHOC, isVariable, styled, Text, useProps, View, withStaticProperties } from \"@tamagui/web\";\nimport { useContext } from \"react\";\nfunction _type_of(obj) {\n \"@swc/helpers - typeof\";\n return obj && typeof Symbol !== \"undefined\" && obj.constructor === Symbol ? \"symbol\" : typeof obj;\n}\nvar buttonContextKeys = [\n \"color\",\n \"ellipsis\",\n \"fontFamily\",\n \"fontSize\",\n \"fontStyle\",\n \"fontWeight\",\n \"letterSpacing\",\n \"maxFontSizeMultiplier\",\n \"textAlign\"\n];\nvar ButtonContext = createStyledContext({\n color: void 0,\n ellipsis: void 0,\n fontFamily: void 0,\n fontSize: void 0,\n fontStyle: void 0,\n fontWeight: void 0,\n letterSpacing: void 0,\n maxFontSizeMultiplier: void 0,\n textAlign: void 0\n}, {\n keys: buttonContextKeys\n});\nvar ButtonFrame = styled(View, {\n context: ButtonContext,\n displayName: \"ButtonFrame\",\n role: \"button\",\n render: /* @__PURE__ */ _jsx(\"button\", {\n type: \"button\"\n }),\n tabIndex: 0,\n alignItems: \"center\",\n flexDirection: \"row\",\n flexWrap: \"nowrap\",\n justifyContent: \"center\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nvar ButtonText = styled(Text, {\n context: ButtonContext,\n displayName: \"ButtonText\",\n // flexGrow 1 pushes text to the start of its parent on native\n flexGrow: 0,\n flexShrink: 1\n});\nvar isOpaqueColor = function(value) {\n return (typeof value === \"undefined\" ? \"undefined\" : _type_of(value)) === \"object\" && value !== null && (\"dynamic\" in value || \"semantic\" in value || \"resource_paths\" in value);\n};\nvar ButtonIcon = function(param) {\n var { children, color, scaleIcon = 1, size } = param;\n var styledContext = ButtonContext.useStyledContext();\n var iconColor = color !== null && color !== void 0 ? color : styledContext === null || styledContext === void 0 ? void 0 : styledContext.color;\n var getThemedIcon = useGetThemedIcon({\n // icons take one concrete color: conditional values (numbers, flat\n // objects) fall back to the theme color\n color: typeof iconColor === \"string\" && iconColor !== \"unset\" || isVariable(iconColor) || isOpaqueColor(iconColor) ? iconColor : void 0,\n size: size === void 0 ? void 0 : size * scaleIcon\n });\n return getThemedIcon(children);\n};\nvar buttonInternalPropNames = [\n \"children\",\n \"color\",\n \"disabled\",\n \"ellipsis\",\n \"fontFamily\",\n \"fontSize\",\n \"fontStyle\",\n \"fontWeight\",\n \"icon\",\n \"iconAfter\",\n \"iconSize\",\n \"letterSpacing\",\n \"maxFontSizeMultiplier\",\n \"noTextWrap\",\n \"render\",\n \"scaleIcon\",\n \"textAlign\",\n \"textProps\"\n];\nfunction useButton(propsIn) {\n var { Text: _$Text = ButtonText, iconColor: iconColorOption, iconSize: iconSizeOption, textProps: textPropsOption } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};\n var isNested = useContext(ButtonNestingContext);\n var styledContext = ButtonContext.useStyledContext();\n var processedProps = useProps(propsIn, {\n noNormalize: true,\n noExpand: true\n });\n var { children, color, disabled, ellipsis, fontFamily, fontSize, fontStyle, fontWeight, icon, iconAfter, iconSize, letterSpacing, maxFontSizeMultiplier, noTextWrap, render, scaleIcon = 1, textAlign, textProps } = processedProps;\n var frameProps = {\n ...propsIn\n };\n var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;\n try {\n for (var _iterator = buttonInternalPropNames[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {\n var key = _step.value;\n delete frameProps[key];\n }\n } catch (err) {\n _didIteratorError = true;\n _iteratorError = err;\n } finally {\n try {\n if (!_iteratorNormalCompletion && _iterator.return != null) {\n _iterator.return();\n }\n } finally {\n if (_didIteratorError) {\n throw _iteratorError;\n }\n }\n }\n var contextColor = color !== null && color !== void 0 ? color : styledContext === null || styledContext === void 0 ? void 0 : styledContext.color;\n var iconColor = iconColorOption !== null && iconColorOption !== void 0 ? iconColorOption : contextColor;\n var resolvedIconSize = iconSize !== null && iconSize !== void 0 ? iconSize : iconSizeOption;\n var getThemedIcon = useGetThemedIcon({\n // icons take one concrete color: conditional values (numbers, flat\n // objects) fall back to the theme color\n color: typeof iconColor === \"string\" && iconColor !== \"unset\" || isVariable(iconColor) || isOpaqueColor(iconColor) ? iconColor : void 0,\n size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon\n });\n var [themedIcon, themedIconAfter] = [\n icon,\n iconAfter\n ].map(function(item) {\n return item ? getThemedIcon(item) : null;\n });\n var textContext = {\n color: contextColor,\n ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : styledContext === null || styledContext === void 0 ? void 0 : styledContext.ellipsis,\n fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : styledContext === null || styledContext === void 0 ? void 0 : styledContext.fontFamily,\n fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : styledContext === null || styledContext === void 0 ? void 0 : styledContext.fontSize,\n fontStyle: fontStyle !== null && fontStyle !== void 0 ? fontStyle : styledContext === null || styledContext === void 0 ? void 0 : styledContext.fontStyle,\n fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : styledContext === null || styledContext === void 0 ? void 0 : styledContext.fontWeight,\n letterSpacing: letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : styledContext === null || styledContext === void 0 ? void 0 : styledContext.letterSpacing,\n maxFontSizeMultiplier: maxFontSizeMultiplier !== null && maxFontSizeMultiplier !== void 0 ? maxFontSizeMultiplier : styledContext === null || styledContext === void 0 ? void 0 : styledContext.maxFontSizeMultiplier,\n textAlign: textAlign !== null && textAlign !== void 0 ? textAlign : styledContext === null || styledContext === void 0 ? void 0 : styledContext.textAlign\n };\n var wrappedChildren = wrapChildrenInText(_$Text, {\n children,\n ...textContext,\n noTextWrap,\n textProps\n }, {\n ...textPropsOption,\n ...processedProps.size === void 0 ? null : {\n size: processedProps.size\n }\n });\n var resolvedRender = render !== null && render !== void 0 ? render : isNested ? \"span\" : processedProps.accessibilityRole === \"link\" || processedProps.role === \"link\" ? \"a\" : disabled ? /* @__PURE__ */ _jsx(\"button\", {\n type: \"button\",\n disabled: true\n }) : void 0;\n var props = {\n ...frameProps,\n ...disabled && {\n \"aria-disabled\": true,\n disabled: true,\n tabIndex: -1\n },\n ...resolvedRender === void 0 ? null : {\n render: resolvedRender\n },\n ...isNested && {\n // a nested Button is a presentation part, not a control: strip the\n // interactive semantics so we never place a focusable role=button (with\n // its own press/keyboard handlers) inside the outer native <button>. that\n // nesting is invalid html, adds an extra focus stop, and bubbles\n // activation to the outer control. resolvedRender already makes it a span.\n role: \"none\",\n tabIndex: -1,\n \"aria-disabled\": void 0,\n disabled: void 0,\n onPress: void 0,\n onPressIn: void 0,\n onPressOut: void 0,\n onLongPress: void 0,\n onClick: void 0,\n onKeyDown: void 0,\n onKeyUp: void 0\n },\n children: /* @__PURE__ */ _jsx(ButtonNestingContext.Provider, {\n value: true,\n children: /* @__PURE__ */ _jsxs(ButtonContext.Provider, {\n ...textContext,\n children: [\n themedIcon,\n wrappedChildren,\n themedIconAfter\n ]\n })\n })\n };\n return {\n isNested,\n props\n };\n}\nvar ButtonComponent = createStyledHOC(ButtonFrame, function Button(props, ref) {\n var { props: buttonProps } = useButton(props);\n return /* @__PURE__ */ _jsx(ButtonFrame, {\n ref,\n ...buttonProps\n });\n});\nvar Button2 = withStaticProperties(ButtonComponent, {\n Apply: ButtonContext.Provider,\n Frame: ButtonFrame,\n Icon: ButtonIcon,\n Text: ButtonText\n});\nexport {\n Button2 as Button,\n ButtonContext,\n ButtonFrame,\n ButtonIcon,\n ButtonText,\n useButton\n};\n//# sourceMappingURL=Button.js.map\n"],"mappings":"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"}
1
+ {"version":3,"file":"Button.native.js","names":[],"sources":["esm/Button.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useGetThemedIcon } from \"@tamagui/helpers-tamagui\";\nimport { ButtonNestingContext } from \"@tamagui/stacks\";\nimport { textParentProps, wrapChildrenInText } from \"@tamagui/text\";\nimport { splitStyleProps, styled, Text, View } from \"@tamagui/web\";\nimport { useContext } from \"react\";\nvar ButtonFrame = styled(View, {\n // role is the cross-platform one; render only lands on web\n role: \"button\",\n render: /* @__PURE__ */ _jsx(\"button\", {\n type: \"button\"\n }),\n tabIndex: 0,\n alignItems: \"center\",\n flexDirection: \"row\",\n flexWrap: \"nowrap\",\n justifyContent: \"center\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nvar ButtonText = styled(Text, {\n // flexGrow 1 pushes text to the start of its parent on native\n flexGrow: 0,\n flexShrink: 1\n});\nvar ButtonIcon = function(param) {\n var { children, color, scaleIcon = 1, size } = param;\n var getThemedIcon = useGetThemedIcon({\n color,\n size: size === void 0 ? void 0 : size * scaleIcon\n });\n return getThemedIcon(children);\n};\nfunction useButton(propsIn) {\n var { Text: _$Text = ButtonText, iconColor, iconSize: iconSizeOption, textProps: textPropsOption } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};\n var isNested = useContext(ButtonNestingContext);\n var [wrappedTextProps, buttonProps] = splitStyleProps(propsIn, {\n expandShorthands: true,\n filter: textParentProps\n });\n var { children, disabled, icon, iconAfter, iconSize, render, scaleIcon = 1, ...frameProps } = buttonProps;\n var { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;\n var resolvedIconSize = iconSize !== null && iconSize !== void 0 ? iconSize : iconSizeOption;\n var getThemedIcon = useGetThemedIcon({\n color: iconColor,\n size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon\n });\n var [themedIcon, themedIconAfter] = [\n icon,\n iconAfter\n ].map(function(item) {\n return item ? getThemedIcon(item) : null;\n });\n var wrappedChildren = wrapChildrenInText(_$Text, {\n children,\n noTextWrap,\n textProps\n }, {\n ...textPropsOption,\n ...textStyleProps\n });\n var resolvedRender = render !== null && render !== void 0 ? render : isNested ? \"span\" : disabled ? /* @__PURE__ */ _jsx(\"button\", {\n type: \"button\",\n disabled: true\n }) : void 0;\n var resolvedProps = {\n ...frameProps,\n ...disabled && {\n \"aria-disabled\": true,\n disabled: true,\n tabIndex: -1\n },\n ...resolvedRender === void 0 ? null : {\n render: resolvedRender\n },\n ...isNested && {\n // a nested Button is a presentation part, not a control: strip the\n // interactive semantics so we never place a focusable role=button (with\n // its own press/keyboard handlers) inside the outer native <button>. that\n // nesting is invalid html, adds an extra focus stop, and bubbles\n // activation to the outer control. resolvedRender already makes it a span.\n role: \"none\",\n tabIndex: -1,\n \"aria-disabled\": void 0,\n disabled: void 0,\n onPress: void 0,\n onPressIn: void 0,\n onPressOut: void 0,\n onLongPress: void 0,\n onClick: void 0,\n onKeyDown: void 0,\n onKeyUp: void 0\n },\n children: /* @__PURE__ */ _jsxs(ButtonNestingContext.Provider, {\n value: true,\n children: [\n themedIcon,\n wrappedChildren,\n themedIconAfter\n ]\n })\n };\n return {\n isNested,\n props: resolvedProps\n };\n}\nexport {\n ButtonFrame,\n ButtonIcon,\n ButtonText,\n useButton\n};\n//# sourceMappingURL=Button.js.map\n"],"mappings":";;;;;;;;AAMA,IAAI,cAAc,OAAO,MAAM;CAE7B,MAAM;CACN,QAAwB,oBAAK,UAAU,EACrC,MAAM,SACR,CAAC;CACD,UAAU;CACV,YAAY;CACZ,eAAe;CACf,UAAU;CACV,gBAAgB;CAChB,UAAU,EACR,UAAU,EACR,MAAM,EACJ,eAAe,OACjB,EACF,EACF;AACF,CAAC;AACD,IAAI,aAAa,OAAO,MAAM;CAE5B,UAAU;CACV,YAAY;AACd,CAAC;AACD,IAAI,aAAa,SAAS,OAAO;CAC/B,IAAI,EAAE,UAAU,OAAO,YAAY,GAAG,SAAS;CAC/C,IAAI,gBAAgB,iBAAiB;EACnC;EACA,MAAM,SAAS,KAAK,IAAI,KAAK,IAAI,OAAO;CAC1C,CAAC;CACD,OAAO,cAAc,QAAQ;AAC/B;AACA,SAAS,UAAU,SAAS;CAC1B,IAAI,EAAE,MAAM,SAAS,YAAY,WAAW,UAAU,gBAAgB,WAAW,oBAAoB,UAAU,SAAS,KAAK,UAAU,OAAO,KAAK,IAAI,UAAU,KAAK,CAAC;CACvK,IAAI,WAAW,WAAW,oBAAoB;CAC9C,IAAI,CAAC,kBAAkB,eAAe,gBAAgB,SAAS;EAC7D,kBAAkB;EAClB,QAAQ;CACV,CAAC;CACD,IAAI,EAAE,UAAU,UAAU,MAAM,WAAW,UAAU,QAAQ,YAAY,GAAG,GAAG,eAAe;CAC9F,IAAI,EAAE,YAAY,WAAW,GAAG,mBAAmB;CACnD,IAAI,mBAAmB,aAAa,QAAQ,aAAa,KAAK,IAAI,WAAW;CAC7E,IAAI,gBAAgB,iBAAiB;EACnC,OAAO;EACP,MAAM,qBAAqB,KAAK,IAAI,KAAK,IAAI,mBAAmB;CAClE,CAAC;CACD,IAAI,CAAC,YAAY,mBAAmB,CAClC,MACA,SACF,CAAC,CAAC,IAAI,SAAS,MAAM;EACnB,OAAO,OAAO,cAAc,IAAI,IAAI;CACtC,CAAC;CACD,IAAI,kBAAkB,mBAAmB,QAAQ;EAC/C;EACA;EACA;CACF,GAAG;EACD,GAAG;EACH,GAAG;CACL,CAAC;CACD,IAAI,iBAAiB,WAAW,QAAQ,WAAW,KAAK,IAAI,SAAS,WAAW,SAAS,WAA2B,oBAAK,UAAU;EACjI,MAAM;EACN,UAAU;CACZ,CAAC,IAAI,KAAK;CACV,IAAI,gBAAgB;EAClB,GAAG;EACH,GAAG,YAAY;GACb,iBAAiB;GACjB,UAAU;GACV,UAAU,CAAC;EACb;EACA,GAAG,mBAAmB,KAAK,IAAI,OAAO,EACpC,QAAQ,eACV;EACA,GAAG,YAAY;GAMb,MAAM;GACN,UAAU,CAAC;GACX,iBAAiB,KAAK;GACtB,UAAU,KAAK;GACf,SAAS,KAAK;GACd,WAAW,KAAK;GAChB,YAAY,KAAK;GACjB,aAAa,KAAK;GAClB,SAAS,KAAK;GACd,WAAW,KAAK;GAChB,SAAS,KAAK;EAChB;EACA,UAA0B,qBAAM,qBAAqB,UAAU;GAC7D,OAAO;GACP,UAAU;IACR;IACA;IACA;GACF;EACF,CAAC;CACH;CACA,OAAO;EACL;EACA,OAAO;CACT;AACF"}
package/dist/jsx/Button.mjs CHANGED
@@ -1,35 +1,11 @@
1
1
  import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
2
2
  import { ButtonNestingContext } from "@tamagui/stacks";
3
- import { wrapChildrenInText } from "@tamagui/text";
4
- import { Text, View, createStyledContext, createStyledHOC, isVariable, styled, useProps, withStaticProperties } from "@tamagui/web";
3
+ import { textParentProps, wrapChildrenInText } from "@tamagui/text";
4
+ import { Text, View, splitStyleProps, styled } from "@tamagui/web";
5
5
  import { useContext } from "react";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
7
 
8
- const buttonContextKeys = [
9
- "color",
10
- "ellipsis",
11
- "fontFamily",
12
- "fontSize",
13
- "fontStyle",
14
- "fontWeight",
15
- "letterSpacing",
16
- "maxFontSizeMultiplier",
17
- "textAlign"
18
- ];
19
- const ButtonContext = createStyledContext({
20
- color: void 0,
21
- ellipsis: void 0,
22
- fontFamily: void 0,
23
- fontSize: void 0,
24
- fontStyle: void 0,
25
- fontWeight: void 0,
26
- letterSpacing: void 0,
27
- maxFontSizeMultiplier: void 0,
28
- textAlign: void 0
29
- }, { keys: buttonContextKeys });
30
8
  const ButtonFrame = styled(View, {
31
- context: ButtonContext,
32
- displayName: "ButtonFrame",
33
9
  role: "button",
34
10
  render: /* @__PURE__ */ jsx("button", { type: "button" }),
35
11
  tabIndex: 0,
@@ -40,88 +16,45 @@ const ButtonFrame = styled(View, {
40
16
  variants: { disabled: { true: { pointerEvents: "none" } } }
41
17
  });
42
18
  const ButtonText = styled(Text, {
43
- context: ButtonContext,
44
- displayName: "ButtonText",
45
19
  flexGrow: 0,
46
20
  flexShrink: 1
47
21
  });
48
- const isOpaqueColor = (value) => typeof value === "object" && value !== null && ("dynamic" in value || "semantic" in value || "resource_paths" in value);
49
22
  const ButtonIcon = ({ children, color, scaleIcon = 1, size }) => {
50
- const styledContext = ButtonContext.useStyledContext();
51
- const iconColor = color ?? styledContext?.color;
52
23
  const getThemedIcon = useGetThemedIcon({
53
- color: typeof iconColor === "string" && iconColor !== "unset" || isVariable(iconColor) || isOpaqueColor(iconColor) ? iconColor : void 0,
24
+ color,
54
25
  size: size === void 0 ? void 0 : size * scaleIcon
55
26
  });
56
27
  return getThemedIcon(children);
57
28
  };
58
- const buttonInternalPropNames = [
59
- "children",
60
- "color",
61
- "disabled",
62
- "ellipsis",
63
- "fontFamily",
64
- "fontSize",
65
- "fontStyle",
66
- "fontWeight",
67
- "icon",
68
- "iconAfter",
69
- "iconSize",
70
- "letterSpacing",
71
- "maxFontSizeMultiplier",
72
- "noTextWrap",
73
- "render",
74
- "scaleIcon",
75
- "textAlign",
76
- "textProps"
77
- ];
78
- function useButton(propsIn, { Text: Text2 = ButtonText, iconColor: iconColorOption, iconSize: iconSizeOption, textProps: textPropsOption } = {}) {
29
+ function useButton(propsIn, { Text: Text2 = ButtonText, iconColor, iconSize: iconSizeOption, textProps: textPropsOption } = {}) {
79
30
  const isNested = useContext(ButtonNestingContext);
80
- const styledContext = ButtonContext.useStyledContext();
81
- const processedProps = useProps(propsIn, {
82
- noNormalize: true,
83
- noExpand: true
31
+ const [wrappedTextProps, buttonProps] = splitStyleProps(propsIn, {
32
+ expandShorthands: true,
33
+ filter: textParentProps
84
34
  });
85
- const { children, color, disabled, ellipsis, fontFamily, fontSize, fontStyle, fontWeight, icon, iconAfter, iconSize, letterSpacing, maxFontSizeMultiplier, noTextWrap, render, scaleIcon = 1, textAlign, textProps } = processedProps;
86
- const frameProps = { ...propsIn };
87
- for (const key of buttonInternalPropNames) {
88
- delete frameProps[key];
89
- }
90
- const contextColor = color ?? styledContext?.color;
91
- const iconColor = iconColorOption ?? contextColor;
35
+ const { children, disabled, icon, iconAfter, iconSize, render, scaleIcon = 1, ...frameProps } = buttonProps;
36
+ const { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;
92
37
  const resolvedIconSize = iconSize ?? iconSizeOption;
93
38
  const getThemedIcon = useGetThemedIcon({
94
- color: typeof iconColor === "string" && iconColor !== "unset" || isVariable(iconColor) || isOpaqueColor(iconColor) ? iconColor : void 0,
39
+ color: iconColor,
95
40
  size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon
96
41
  });
97
42
  const [themedIcon, themedIconAfter] = [icon, iconAfter].map((item) => {
98
43
  return item ? getThemedIcon(item) : null;
99
44
  });
100
- const textContext = {
101
- color: contextColor,
102
- ellipsis: ellipsis ?? styledContext?.ellipsis,
103
- fontFamily: fontFamily ?? styledContext?.fontFamily,
104
- fontSize: fontSize ?? styledContext?.fontSize,
105
- fontStyle: fontStyle ?? styledContext?.fontStyle,
106
- fontWeight: fontWeight ?? styledContext?.fontWeight,
107
- letterSpacing: letterSpacing ?? styledContext?.letterSpacing,
108
- maxFontSizeMultiplier: maxFontSizeMultiplier ?? styledContext?.maxFontSizeMultiplier,
109
- textAlign: textAlign ?? styledContext?.textAlign
110
- };
111
45
  const wrappedChildren = wrapChildrenInText(Text2, {
112
46
  children,
113
- ...textContext,
114
47
  noTextWrap,
115
48
  textProps
116
49
  }, {
117
50
  ...textPropsOption,
118
- ...processedProps.size === void 0 ? null : { size: processedProps.size }
51
+ ...textStyleProps
119
52
  });
120
- const resolvedRender = render ?? (isNested ? "span" : processedProps.accessibilityRole === "link" || processedProps.role === "link" ? "a" : disabled ? /* @__PURE__ */ jsx("button", {
53
+ const resolvedRender = render ?? (isNested ? "span" : disabled ? /* @__PURE__ */ jsx("button", {
121
54
  type: "button",
122
55
  disabled: true
123
56
  }) : void 0);
124
- const props = {
57
+ const resolvedProps = {
125
58
  ...frameProps,
126
59
  ...disabled && {
127
60
  "aria-disabled": true,
@@ -142,36 +75,20 @@ function useButton(propsIn, { Text: Text2 = ButtonText, iconColor: iconColorOpti
142
75
  onKeyDown: void 0,
143
76
  onKeyUp: void 0
144
77
  },
145
- children: /* @__PURE__ */ jsx(ButtonNestingContext.Provider, {
78
+ children: /* @__PURE__ */ jsxs(ButtonNestingContext.Provider, {
146
79
  value: true,
147
- children: /* @__PURE__ */ jsxs(ButtonContext.Provider, {
148
- ...textContext,
149
- children: [
150
- themedIcon,
151
- wrappedChildren,
152
- themedIconAfter
153
- ]
154
- })
80
+ children: [
81
+ themedIcon,
82
+ wrappedChildren,
83
+ themedIconAfter
84
+ ]
155
85
  })
156
86
  };
157
87
  return {
158
88
  isNested,
159
- props
89
+ props: resolvedProps
160
90
  };
161
91
  }
162
- const ButtonComponent = createStyledHOC(ButtonFrame, function Button(props, ref) {
163
- const { props: buttonProps } = useButton(props);
164
- return /* @__PURE__ */ jsx(ButtonFrame, {
165
- ref,
166
- ...buttonProps
167
- });
168
- });
169
- const Button2 = withStaticProperties(ButtonComponent, {
170
- Apply: ButtonContext.Provider,
171
- Frame: ButtonFrame,
172
- Icon: ButtonIcon,
173
- Text: ButtonText
174
- });
175
92
 
176
- export { Button2 as Button, ButtonContext, ButtonFrame, ButtonIcon, ButtonText, useButton };
93
+ export { ButtonFrame, ButtonIcon, ButtonText, useButton };
177
94
  //# sourceMappingURL=Button.mjs.map