@tamagui/button 1.0.1-beta.94 → 1.0.1-beta.97

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.
@@ -154,7 +154,7 @@ const ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
154
154
  ]);
155
155
  const isInsideButton = (0, import_react.useContext)(import_core.ButtonInsideButtonContext);
156
156
  const size = props.size || "$4";
157
- const iconSize = (0, import_font_size.getFontSize)(size) * scaleIcon;
157
+ const iconSize = (typeof size === "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size)) * scaleIcon;
158
158
  const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
159
159
  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
160
160
  const spaceSize = (0, import_core.getVariableValue)(iconSize) * scaleSpace;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Button.tsx"],
4
- "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiComponent,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, wrapChildrenInText } 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\nexport const ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: 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 cursor: 'inherit',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\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 = wrapChildrenInText(ButtonText, props)\n\n return (\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 <ButtonInsideButtonContext.Provider value={true}>\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:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents}\n </ButtonInsideButtonContext.Provider>\n </ButtonFrame>\n )\n})\n\nexport const Button: TamaguiComponent<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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",
4
+ "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiComponent,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, wrapChildrenInText } 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\nexport const ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: 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 } 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 cursor: 'inherit',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\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 = (typeof size === 'number' ? size * 0.5 : 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 = wrapChildrenInText(ButtonText, props)\n\n return (\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 <ButtonInsideButtonContext.Provider value={true}>\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:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents}\n </ButtonInsideButtonContext.Provider>\n </ButtonFrame>\n )\n})\n\nexport const Button: TamaguiComponent<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
  }
@@ -136,7 +136,7 @@ const ButtonComponent = forwardRef((props, ref) => {
136
136
  ]);
137
137
  const isInsideButton = useContext(ButtonInsideButtonContext);
138
138
  const size = props.size || "$4";
139
- const iconSize = getFontSize(size) * scaleIcon;
139
+ const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
140
140
  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
141
141
  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
142
142
  const spaceSize = getVariableValue(iconSize) * scaleSpace;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Button.tsx"],
4
- "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiComponent,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, wrapChildrenInText } 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\nexport const ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: 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 cursor: 'inherit',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\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 = wrapChildrenInText(ButtonText, props)\n\n return (\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 <ButtonInsideButtonContext.Provider value={true}>\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:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents}\n </ButtonInsideButtonContext.Provider>\n </ButtonFrame>\n )\n})\n\nexport const Button: TamaguiComponent<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;AACA;AACA;AACA;AAIA,MAAM;AAuBC,MAAM,cAAc,OAAO,gBAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,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,QAAQ;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAED,MAAM,kBAAkB,WAAW,CAAC,OAAoB,QAAQ;AAE9D,QAqBI,YApBF;AAAA;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,MAEE,IADC,iBACD,IADC;AAAA,IAnBH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,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,mBAAmB,YAAY,KAAK;AAErD,SACE,oCAAC;AAAA,IACC;AAAA,KAEK,kBAAkB;AAAA,IACrB,KAAK;AAAA,EACP,IALD;AAAA,IAMC;AAAA,MACI,OAEJ,oCAAC,0BAA0B,UAA1B;AAAA,IAAmC,OAAO;AAAA,KACxC,cAAc,kBACX,eAAe;AAAA,IAEb,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WACE,MAAM,kBAAkB,YAAY,MAAM,kBAAkB,mBACxD,aACA;AAAA,IACN,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;",
4
+ "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiComponent,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, wrapChildrenInText } 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\nexport const ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: 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 } 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 cursor: 'inherit',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\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 = (typeof size === 'number' ? size * 0.5 : 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 = wrapChildrenInText(ButtonText, props)\n\n return (\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 <ButtonInsideButtonContext.Provider value={true}>\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:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents}\n </ButtonInsideButtonContext.Provider>\n </ButtonFrame>\n )\n})\n\nexport const Button: TamaguiComponent<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
  }
@@ -88,7 +88,7 @@ const ButtonComponent = forwardRef((props, ref) => {
88
88
  } = props;
89
89
  const isInsideButton = useContext(ButtonInsideButtonContext);
90
90
  const size = props.size || "$4";
91
- const iconSize = getFontSize(size) * scaleIcon;
91
+ const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
92
92
  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
93
93
  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
94
94
  const spaceSize = getVariableValue(iconSize) * scaleSpace;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Button.tsx"],
4
- "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiComponent,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, wrapChildrenInText } 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\nexport const ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: 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 cursor: 'inherit',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\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 = wrapChildrenInText(ButtonText, props)\n\n return (\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 <ButtonInsideButtonContext.Provider value={true}>\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:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents}\n </ButtonInsideButtonContext.Provider>\n </ButtonFrame>\n )\n})\n\nexport const Button: TamaguiComponent<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;AACA;AACA;AACA;AAIA,MAAM;AAuBC,MAAM,cAAc,OAAO,gBAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,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,QAAQ;AAAA,EAER,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,mBAAmB,YAAY,KAAK;AAErD,SACE,CAAC,YACC,YAAY,gBAEP,kBAAkB;AAAA,IACrB,KAAK;AAAA,EACP,GACA,KAAK,SACD,MAEJ,CAAC,0BAA0B,SAAS,OAAO,OACxC,cAAc,kBACX,eAAe;AAAA,IAEb,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WACE,MAAM,kBAAkB,YAAY,MAAM,kBAAkB,mBACxD,aACA;AAAA,IACN,UAAU,CAAC,YAAY,UAAU,eAAe;AAAA,EAClD,CAAC,IACD,SACN,EAdC,0BAA0B,SAe7B,EAxBC;AA0BL,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;",
4
+ "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiComponent,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, wrapChildrenInText } 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\nexport const ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: 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 } 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 cursor: 'inherit',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\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 = (typeof size === 'number' ? size * 0.5 : 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 = wrapChildrenInText(ButtonText, props)\n\n return (\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 <ButtonInsideButtonContext.Provider value={true}>\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:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents}\n </ButtonInsideButtonContext.Provider>\n </ButtonFrame>\n )\n})\n\nexport const Button: TamaguiComponent<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;AACA;AACA;AACA;AAIA,MAAM;AAuBC,MAAM,cAAc,OAAO,gBAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,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,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAMM,MAAM,aAAa,OAAO,aAAa;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EAER,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,WAAY,QAAO,SAAS,WAAW,OAAO,MAAM,YAAY,IAAI,KAAK;AAC/E,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,mBAAmB,YAAY,KAAK;AAErD,SACE,CAAC,YACC,YAAY,gBAEP,kBAAkB;AAAA,IACrB,KAAK;AAAA,EACP,GACA,KAAK,SACD,MAEJ,CAAC,0BAA0B,SAAS,OAAO,OACxC,cAAc,kBACX,eAAe;AAAA,IAEb,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WACE,MAAM,kBAAkB,YAAY,MAAM,kBAAkB,mBACxD,aACA;AAAA,IACN,UAAU,CAAC,YAAY,UAAU,eAAe;AAAA,EAClD,CAAC,IACD,SACN,EAdC,0BAA0B,SAe7B,EAxBC;AA0BL,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/button",
3
- "version": "1.0.1-beta.94",
3
+ "version": "1.0.1-beta.97",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -19,16 +19,16 @@
19
19
  "watch": "tamagui-build --watch"
20
20
  },
21
21
  "dependencies": {
22
- "@tamagui/core": "^1.0.1-beta.94",
23
- "@tamagui/font-size": "^1.0.1-beta.94",
24
- "@tamagui/helpers-tamagui": "^1.0.1-beta.94"
22
+ "@tamagui/core": "^1.0.1-beta.97",
23
+ "@tamagui/font-size": "^1.0.1-beta.97",
24
+ "@tamagui/helpers-tamagui": "^1.0.1-beta.97"
25
25
  },
26
26
  "peerDependencies": {
27
27
  "react": "*",
28
28
  "react-dom": "*"
29
29
  },
30
30
  "devDependencies": {
31
- "@tamagui/build": "^1.0.1-beta.94",
31
+ "@tamagui/build": "^1.0.1-beta.97",
32
32
  "react": "*",
33
33
  "react-dom": "*"
34
34
  },
package/src/Button.tsx CHANGED
@@ -88,8 +88,6 @@ export const ButtonFrame = styled(ThemeableStack, {
88
88
  pointerEvents: 'none',
89
89
  },
90
90
  },
91
-
92
- // TODO see core/styled.ts bug
93
91
  } as const,
94
92
 
95
93
  defaultVariants: {
@@ -138,7 +136,7 @@ const ButtonComponent = forwardRef((props: ButtonProps, ref) => {
138
136
 
139
137
  const isInsideButton = useContext(ButtonInsideButtonContext)
140
138
  const size = props.size || '$4'
141
- const iconSize = getFontSize(size) * scaleIcon
139
+ const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon
142
140
  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
143
141
  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)
144
142
  const spaceSize = getVariableValue(iconSize) * scaleSpace
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EACR,gBAAgB,EAChB,cAAc,EAMf,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,gBAAgB,EAAoB,MAAM,0BAA0B,CAAA;AAG7E,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,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDtB,CAAA;AAMF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;GAQrB,CAAA;AAgEF,eAAO,MAAM,MAAM,EAAE,gBAAgB,CAAC,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAWvE,CAAA"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EACR,gBAAgB,EAChB,cAAc,EAMf,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,gBAAgB,EAAoB,MAAM,0BAA0B,CAAA;AAG7E,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,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDtB,CAAA;AAMF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;GAQrB,CAAA;AAgEF,eAAO,MAAM,MAAM,EAAE,gBAAgB,CAAC,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAWvE,CAAA"}