@fountain-ui/core 2.0.0-beta.93 → 2.0.0-beta.95

package/build/commonjs/Badge/Badge.js

@@ -11,6 +11,8 @@ var _reactNative = require("react-native");
 
 var _styles = require("../styles");
 
+var _useVariantStyleMap = _interopRequireDefault(require("./useVariantStyleMap"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -20,33 +22,25 @@ const defaultPosition = {
   horizontal: 'right'
 };
 
-const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
-  const dotSize = 4;
-  return {
-    root: {},
-    badge: {
-      backgroundColor: theme.palette.secondary.main,
-      borderRadius: dotSize * 0.5,
-      height: dotSize,
-      position: 'absolute',
-      width: dotSize
-    }
-  };
-};
-
 function Badge(props) {
   const {
     children,
+    color = 'accent',
+    content,
     invisible = false,
     position = defaultPosition,
-    style,
+    size = 'medium',
+    style: styleProp,
     offset = 0,
+    variant = 'dot',
     ...otherProps
   } = props;
-  const styles = useStyles();
-  const rootStyle = (0, _styles.css)([styles.root, style]);
-  const badgeStyle = (0, _styles.css)([styles.badge, {
+  const {
+    badge: baseBadgeStyle,
+    contentFont: contentFontStyle
+  } = (0, _useVariantStyleMap.default)(variant, size, color);
+  const rootStyle = (0, _styles.css)([styleProp]);
+  const badgeStyle = (0, _styles.css)([baseBadgeStyle, {
     [position.vertical]: offset,
     [position.horizontal]: offset
   }]);
@@ -54,7 +48,9 @@ function Badge(props) {
     style: rootStyle
   }, otherProps), children, !invisible ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: badgeStyle
-  }) : null);
+  }, content !== undefined && content !== null ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: contentFontStyle
+  }, content) : null) : null);
 }
 
 ;

package/build/commonjs/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultPosition","vertical","horizontal","useStyles","theme","useTheme","dotSize","root","badge","backgroundColor","palette","secondary","main","borderRadius","height","position","width","Badge","props","children","invisible","style","offset","otherProps","styles","rootStyle","css","badgeStyle"],"sources":["Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport BadgeProps, { BadgePosition } from './BadgeProps';\n\nconst defaultPosition: BadgePosition = {\n    vertical: 'top',\n    horizontal: 'right',\n};\n\ntype BadgeStyles = NamedStylesStringUnion<'root' | 'badge'>;\n\nconst useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {\n    const theme = useTheme();\n\n    const dotSize = 4;\n\n    return {\n        root: {},\n        badge: {\n            backgroundColor: theme.palette.secondary.main,\n            borderRadius: dotSize * 0.5,\n            height: dotSize,\n            position: 'absolute',\n            width: dotSize,\n        },\n    };\n};\n\nexport default function Badge(props: BadgeProps) {\n    const {\n        children,\n        invisible = false,\n        position = defaultPosition,\n        style,\n        offset = 0,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const badgeStyle = css([\n        styles.badge,\n        {\n            [position.vertical]: offset,\n            [position.horizontal]: offset,\n        },\n    ]);\n\n    return (\n        <View\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n\n            {!invisible ? <View style={badgeStyle}/> : null}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAGA,MAAMA,eAA8B,GAAG;EACnCC,QAAQ,EAAE,KADyB;EAEnCC,UAAU,EAAE;AAFuB,CAAvC;;AAOA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,OAAO,GAAG,CAAhB;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,KAAK,EAAE;MACHC,eAAe,EAAEL,KAAK,CAACM,OAAN,CAAcC,SAAd,CAAwBC,IADtC;MAEHC,YAAY,EAAEP,OAAO,GAAG,GAFrB;MAGHQ,MAAM,EAAER,OAHL;MAIHS,QAAQ,EAAE,UAJP;MAKHC,KAAK,EAAEV;IALJ;EAFJ,CAAP;AAUH,CAfD;;AAiBe,SAASW,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,QADE;IAEFC,SAAS,GAAG,KAFV;IAGFL,QAAQ,GAAGf,eAHT;IAIFqB,KAJE;IAKFC,MAAM,GAAG,CALP;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGrB,SAAS,EAAxB;EAEA,MAAMsB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAACjB,IADW,EAElBc,KAFkB,CAAJ,CAAlB;EAKA,MAAMM,UAAU,GAAG,IAAAD,WAAA,EAAI,CACnBF,MAAM,CAAChB,KADY,EAEnB;IACI,CAACO,QAAQ,CAACd,QAAV,GAAqBqB,MADzB;IAEI,CAACP,QAAQ,CAACb,UAAV,GAAuBoB;EAF3B,CAFmB,CAAJ,CAAnB;EAQA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAEG;EADX,GAEQF,UAFR,GAIKJ,QAJL,EAMK,CAACC,SAAD,gBAAa,6BAAC,iBAAD;IAAM,KAAK,EAAEO;EAAb,EAAb,GAA0C,IAN/C,CADJ;AAUH;;AAAA"}
+{"version":3,"names":["defaultPosition","vertical","horizontal","Badge","props","children","color","content","invisible","position","size","style","styleProp","offset","variant","otherProps","badge","baseBadgeStyle","contentFont","contentFontStyle","useVariantStyleMap","rootStyle","css","badgeStyle","undefined"],"sources":["Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { css } from '../styles';\nimport type BadgeProps from './BadgeProps';\nimport type { BadgeColor, BadgePosition, BadgeSize, BadgeVariant } from './BadgeProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst defaultPosition: BadgePosition = {\n    vertical: 'top',\n    horizontal: 'right',\n};\n\nexport default function Badge(props: BadgeProps) {\n    const {\n        children,\n        color = 'accent' as BadgeColor,\n        content,\n        invisible = false,\n        position = defaultPosition,\n        size = 'medium' as BadgeSize,\n        style: styleProp,\n        offset = 0,\n        variant = 'dot' as BadgeVariant,\n        ...otherProps\n    } = props;\n\n    const {\n        badge: baseBadgeStyle,\n        contentFont: contentFontStyle,\n    } = useVariantStyleMap(variant, size, color);\n\n    const rootStyle = css([\n        styleProp,\n    ]);\n\n    const badgeStyle = css([\n        baseBadgeStyle,\n        {\n            [position.vertical]: offset,\n            [position.horizontal]: offset,\n        },\n    ]);\n\n    return (\n        <View\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n\n            {!invisible ? (\n                <View style={badgeStyle}>\n                    {content !== undefined && content !== null ? (\n                        <Text style={contentFontStyle}>{content}</Text>\n                    ) : null}\n                </View>\n            ) : null}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;;;AAEA,MAAMA,eAA8B,GAAG;EACnCC,QAAQ,EAAE,KADyB;EAEnCC,UAAU,EAAE;AAFuB,CAAvC;;AAKe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,QAFN;IAGFC,OAHE;IAIFC,SAAS,GAAG,KAJV;IAKFC,QAAQ,GAAGT,eALT;IAMFU,IAAI,GAAG,QANL;IAOFC,KAAK,EAAEC,SAPL;IAQFC,MAAM,GAAG,CARP;IASFC,OAAO,GAAG,KATR;IAUF,GAAGC;EAVD,IAWFX,KAXJ;EAaA,MAAM;IACFY,KAAK,EAAEC,cADL;IAEFC,WAAW,EAAEC;EAFX,IAGF,IAAAC,2BAAA,EAAmBN,OAAnB,EAA4BJ,IAA5B,EAAkCJ,KAAlC,CAHJ;EAKA,MAAMe,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBV,SADkB,CAAJ,CAAlB;EAIA,MAAMW,UAAU,GAAG,IAAAD,WAAA,EAAI,CACnBL,cADmB,EAEnB;IACI,CAACR,QAAQ,CAACR,QAAV,GAAqBY,MADzB;IAEI,CAACJ,QAAQ,CAACP,UAAV,GAAuBW;EAF3B,CAFmB,CAAJ,CAAnB;EAQA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAEQ;EADX,GAEQN,UAFR,GAIKV,QAJL,EAMK,CAACG,SAAD,gBACG,6BAAC,iBAAD;IAAM,KAAK,EAAEe;EAAb,GACKhB,OAAO,KAAKiB,SAAZ,IAAyBjB,OAAO,KAAK,IAArC,gBACG,6BAAC,iBAAD;IAAM,KAAK,EAAEY;EAAb,GAAgCZ,OAAhC,CADH,GAEG,IAHR,CADH,GAMG,IAZR,CADJ;AAgBH;;AAAA"}

package/build/commonjs/Badge/BadgeProps.js

@@ -1,2 +1,17 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.badgeVerticalPositions = exports.badgeVariants = exports.badgeSizes = exports.badgeHorizontalPositions = exports.badgeColors = void 0;
+const badgeHorizontalPositions = ['right', 'left'];
+exports.badgeHorizontalPositions = badgeHorizontalPositions;
+const badgeVerticalPositions = ['top', 'bottom'];
+exports.badgeVerticalPositions = badgeVerticalPositions;
+const badgeColors = ['accent', 'danger'];
+exports.badgeColors = badgeColors;
+const badgeSizes = ['large', 'medium'];
+exports.badgeSizes = badgeSizes;
+const badgeVariants = ['dot', 'number'];
+exports.badgeVariants = badgeVariants;
 //# sourceMappingURL=BadgeProps.js.map

package/build/commonjs/Badge/BadgeProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["BadgeProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport type BadgeHorizontalPosition = 'right' | 'left';\n\nexport type BadgeVerticalPosition = 'top' | 'bottom';\n\nexport interface BadgePosition {\n    vertical: BadgeVerticalPosition;\n    horizontal: BadgeHorizontalPosition;\n}\n\nexport default interface BadgeProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The badge will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the badge is invisible.\n     * @default false\n     */\n    invisible?: boolean;\n\n    /**\n     * The position of the badge.\n     * @default {\n     *     vertical: 'top',\n     *     horizontal: 'right',\n     * }\n     */\n    position?: BadgePosition;\n\n    /**\n     * The offset of the badge.\n     * @default 0\n     */\n    offset?: number;\n}> {}\n"],"mappings":""}
+{"version":3,"names":["badgeHorizontalPositions","badgeVerticalPositions","badgeColors","badgeSizes","badgeVariants"],"sources":["BadgeProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const badgeHorizontalPositions = ['right', 'left'] as const;\nexport type BadgeHorizontalPosition = typeof badgeHorizontalPositions[number];\n\nexport const badgeVerticalPositions = ['top', 'bottom'] as const;\nexport type BadgeVerticalPosition = typeof badgeVerticalPositions[number];\n\nexport interface BadgePosition {\n    vertical: BadgeVerticalPosition;\n    horizontal: BadgeHorizontalPosition;\n}\n\nexport const badgeColors = ['accent', 'danger'] as const;\nexport type BadgeColor = typeof badgeColors[number];\n\nexport const badgeSizes = ['large', 'medium'] as const;\nexport type BadgeSize = typeof badgeSizes[number];\n\nexport const badgeVariants = ['dot', 'number'] as const;\nexport type BadgeVariant = typeof badgeVariants[number];\n\nexport default interface BadgeProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The badge will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     *\n     * @default 'accent'\n     */\n    color?: BadgeColor;\n\n    /**\n     * (only number variant)\n     */\n    content?: number;\n\n    /**\n     * If `true`, the badge is invisible.\n     * @default false\n     */\n    invisible?: boolean;\n\n    /**\n     * The position of the badge.\n     * @default {\n     *     vertical: 'top',\n     *     horizontal: 'right',\n     * }\n     */\n    position?: BadgePosition;\n\n    /**\n     * The offset of the badge.\n     * @default 0\n     */\n    offset?: number;\n\n    /**\n     *\n     */\n    size?: BadgeSize;\n\n    /**\n     *\n     * @default 'dot'\n     */\n    variant?: BadgeVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,wBAAwB,GAAG,CAAC,OAAD,EAAU,MAAV,CAAjC;;AAGA,MAAMC,sBAAsB,GAAG,CAAC,KAAD,EAAQ,QAAR,CAA/B;;AAQA,MAAMC,WAAW,GAAG,CAAC,QAAD,EAAW,QAAX,CAApB;;AAGA,MAAMC,UAAU,GAAG,CAAC,OAAD,EAAU,QAAV,CAAnB;;AAGA,MAAMC,aAAa,GAAG,CAAC,KAAD,EAAQ,QAAR,CAAtB"}

package/build/commonjs/Badge/LegacyBadge.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Badge;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _styles = require("../styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const defaultPosition = {
+  vertical: 'top',
+  horizontal: 'right'
+};
+
+const useStyles = function () {
+  const theme = (0, _styles.useTheme)();
+  const dotSize = 4;
+  return {
+    root: {},
+    badge: {
+      backgroundColor: theme.palette.secondary.main,
+      borderRadius: dotSize * 0.5,
+      height: dotSize,
+      position: 'absolute',
+      width: dotSize
+    }
+  };
+};
+
+function Badge(props) {
+  const {
+    children,
+    invisible = false,
+    position = defaultPosition,
+    style,
+    offset = 0,
+    ...otherProps
+  } = props;
+  const styles = useStyles();
+  const rootStyle = (0, _styles.css)([styles.root, style]);
+  const badgeStyle = (0, _styles.css)([styles.badge, {
+    [position.vertical]: offset,
+    [position.horizontal]: offset
+  }]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
+    style: rootStyle
+  }, otherProps), children, !invisible ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: badgeStyle
+  }) : null);
+}
+
+;
+//# sourceMappingURL=LegacyBadge.js.map

package/build/commonjs/Badge/LegacyBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["defaultPosition","vertical","horizontal","useStyles","theme","useTheme","dotSize","root","badge","backgroundColor","palette","secondary","main","borderRadius","height","position","width","Badge","props","children","invisible","style","offset","otherProps","styles","rootStyle","css","badgeStyle"],"sources":["LegacyBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport BadgeProps, { BadgePosition } from './LegacyBadgeProps';\n\nconst defaultPosition: BadgePosition = {\n    vertical: 'top',\n    horizontal: 'right',\n};\n\ntype BadgeStyles = NamedStylesStringUnion<'root' | 'badge'>;\n\nconst useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {\n    const theme = useTheme();\n\n    const dotSize = 4;\n\n    return {\n        root: {},\n        badge: {\n            backgroundColor: theme.palette.secondary.main,\n            borderRadius: dotSize * 0.5,\n            height: dotSize,\n            position: 'absolute',\n            width: dotSize,\n        },\n    };\n};\n\nexport default function Badge(props: BadgeProps) {\n    const {\n        children,\n        invisible = false,\n        position = defaultPosition,\n        style,\n        offset = 0,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const badgeStyle = css([\n        styles.badge,\n        {\n            [position.vertical]: offset,\n            [position.horizontal]: offset,\n        },\n    ]);\n\n    return (\n        <View\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n\n            {!invisible ? <View style={badgeStyle}/> : null}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAGA,MAAMA,eAA8B,GAAG;EACnCC,QAAQ,EAAE,KADyB;EAEnCC,UAAU,EAAE;AAFuB,CAAvC;;AAOA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,OAAO,GAAG,CAAhB;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,KAAK,EAAE;MACHC,eAAe,EAAEL,KAAK,CAACM,OAAN,CAAcC,SAAd,CAAwBC,IADtC;MAEHC,YAAY,EAAEP,OAAO,GAAG,GAFrB;MAGHQ,MAAM,EAAER,OAHL;MAIHS,QAAQ,EAAE,UAJP;MAKHC,KAAK,EAAEV;IALJ;EAFJ,CAAP;AAUH,CAfD;;AAiBe,SAASW,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,QADE;IAEFC,SAAS,GAAG,KAFV;IAGFL,QAAQ,GAAGf,eAHT;IAIFqB,KAJE;IAKFC,MAAM,GAAG,CALP;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGrB,SAAS,EAAxB;EAEA,MAAMsB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAACjB,IADW,EAElBc,KAFkB,CAAJ,CAAlB;EAKA,MAAMM,UAAU,GAAG,IAAAD,WAAA,EAAI,CACnBF,MAAM,CAAChB,KADY,EAEnB;IACI,CAACO,QAAQ,CAACd,QAAV,GAAqBqB,MADzB;IAEI,CAACP,QAAQ,CAACb,UAAV,GAAuBoB;EAF3B,CAFmB,CAAJ,CAAnB;EAQA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAEG;EADX,GAEQF,UAFR,GAIKJ,QAJL,EAMK,CAACC,SAAD,gBAAa,6BAAC,iBAAD;IAAM,KAAK,EAAEO;EAAb,EAAb,GAA0C,IAN/C,CADJ;AAUH;;AAAA"}

package/build/commonjs/Badge/LegacyBadgeProps.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=LegacyBadgeProps.js.map

package/build/commonjs/Badge/LegacyBadgeProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacyBadgeProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport type BadgeHorizontalPosition = 'right' | 'left';\n\nexport type BadgeVerticalPosition = 'top' | 'bottom';\n\nexport interface BadgePosition {\n    vertical: BadgeVerticalPosition;\n    horizontal: BadgeHorizontalPosition;\n}\n\nexport default interface BadgeProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The badge will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the badge is invisible.\n     * @default false\n     */\n    invisible?: boolean;\n\n    /**\n     * The position of the badge.\n     * @default {\n     *     vertical: 'top',\n     *     horizontal: 'right',\n     * }\n     */\n    position?: BadgePosition;\n\n    /**\n     * The offset of the badge.\n     * @default 0\n     */\n    offset?: number;\n}> {}\n"],"mappings":""}

package/build/commonjs/Badge/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _Badge.default;
+    return _LegacyBadge.default;
   }
 });
 
-var _Badge = _interopRequireDefault(require("./Badge"));
+var _LegacyBadge = _interopRequireDefault(require("./LegacyBadge"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/build/commonjs/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Badge';\nexport type { default as BadgeProps } from './BadgeProps';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyBadge';\nexport type { default as BadgeProps } from './LegacyBadgeProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/Badge/useVariantStyleMap.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useVariantStyleMap;
+
+var _react = require("react");
+
+var _styles = require("@fountain-ui/styles");
+
+var _styles2 = require("../styles");
+
+const sizeMap = {
+  dot: {
+    medium: 4
+  },
+  number: {
+    large: 26,
+    medium: 22
+  }
+};
+
+const getColorMap = theme => ({
+  accent: theme.palette.fill.accent,
+  danger: theme.palette.status.danger
+});
+
+function useVariantStyleMap(variant, size, color) {
+  const theme = (0, _styles2.useTheme)();
+  return (0, _react.useMemo)(() => {
+    const badgeSize = sizeMap[variant][size] ?? sizeMap[variant].medium;
+
+    if (process.env.NODE_ENV !== 'production' && sizeMap[variant][size] === undefined) {
+      console.warn('The selected size is not supported for the chosen variant.');
+    }
+
+    const colorMap = getColorMap(theme);
+    const commonBadgeStyle = {
+      backgroundColor: colorMap[color],
+      borderRadius: theme.shape.radius.full,
+      height: badgeSize,
+      position: 'absolute',
+      width: badgeSize
+    };
+
+    switch (variant) {
+      default:
+      case 'dot':
+        return {
+          badge: { ...commonBadgeStyle
+          }
+        };
+
+      case 'number':
+        return {
+          badge: { ...commonBadgeStyle,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          contentFont: (0, _styles2.createFontStyle)(theme, {
+            selector: _ => (0, _styles.typographyOf)({
+              fontSize: 12,
+              lineHeight: 12,
+              fontFamily: 'Pretendard-Bold',
+              letterSpacing: -0.6
+            }),
+            color: _styles.commonColors.opacity.white['100']
+          })
+        };
+    }
+  }, [theme, variant, size, color]);
+}
+//# sourceMappingURL=useVariantStyleMap.js.map

package/build/commonjs/Badge/useVariantStyleMap.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sizeMap","dot","medium","number","large","getColorMap","theme","accent","palette","fill","danger","status","useVariantStyleMap","variant","size","color","useTheme","useMemo","badgeSize","process","env","NODE_ENV","undefined","console","warn","colorMap","commonBadgeStyle","backgroundColor","borderRadius","shape","radius","full","height","position","width","badge","alignItems","justifyContent","contentFont","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","commonColors","opacity","white"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { commonColors, typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { BadgeColor, BadgeSize, BadgeVariant } from './BadgeProps';\n\nconst sizeMap: Record<BadgeVariant, Partial<Record<BadgeSize, number>>> = {\n    dot: {\n        medium: 4,\n    },\n    number: {\n        large: 26,\n        medium: 22,\n    },\n};\n\nconst getColorMap = (theme: Theme): Record<BadgeColor, string> => ({\n    accent: theme.palette.fill.accent,\n    danger: theme.palette.status.danger,\n});\n\ninterface VariantStyle {\n    badge: FountainUiStyle;\n    contentFont?: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSize, color: BadgeColor): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        const badgeSize = sizeMap[variant][size] ?? sizeMap[variant].medium;\n\n        if (process.env.NODE_ENV !== 'production' && sizeMap[variant][size] === undefined) {\n            console.warn('The selected size is not supported for the chosen variant.');\n        }\n\n        const colorMap = getColorMap(theme);\n\n        const commonBadgeStyle: FountainUiStyle = {\n            backgroundColor: colorMap[color],\n            borderRadius: theme.shape.radius.full,\n            height: badgeSize,\n            position: 'absolute',\n            width: badgeSize,\n        };\n\n        switch (variant) {\n            default:\n            case 'dot':\n                return {\n                    badge: { ...commonBadgeStyle },\n                };\n            case 'number':\n                return {\n                    badge: {\n                        ...commonBadgeStyle,\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 12,\n                            lineHeight: 12,\n                            fontFamily: 'Pretendard-Bold',\n                            letterSpacing: -0.6,\n                        }),\n                        color: commonColors.opacity.white['100'],\n                    }),\n                };\n        }\n    }, [theme, variant, size, color]);\n}\n"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AAGA,MAAMA,OAAiE,GAAG;EACtEC,GAAG,EAAE;IACDC,MAAM,EAAE;EADP,CADiE;EAItEC,MAAM,EAAE;IACJC,KAAK,EAAE,EADH;IAEJF,MAAM,EAAE;EAFJ;AAJ8D,CAA1E;;AAUA,MAAMG,WAAW,GAAIC,KAAD,KAA+C;EAC/DC,MAAM,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBF,MADoC;EAE/DG,MAAM,EAAEJ,KAAK,CAACE,OAAN,CAAcG,MAAd,CAAqBD;AAFkC,CAA/C,CAApB;;AAUe,SAASE,kBAAT,CAA4BC,OAA5B,EAAmDC,IAAnD,EAAoEC,KAApE,EAAqG;EAChH,MAAMT,KAAK,GAAG,IAAAU,iBAAA,GAAd;EAEA,OAAO,IAAAC,cAAA,EAAsB,MAAM;IAC/B,MAAMC,SAAS,GAAGlB,OAAO,CAACa,OAAD,CAAP,CAAiBC,IAAjB,KAA0Bd,OAAO,CAACa,OAAD,CAAP,CAAiBX,MAA7D;;IAEA,IAAIiB,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAAzB,IAAyCrB,OAAO,CAACa,OAAD,CAAP,CAAiBC,IAAjB,MAA2BQ,SAAxE,EAAmF;MAC/EC,OAAO,CAACC,IAAR,CAAa,4DAAb;IACH;;IAED,MAAMC,QAAQ,GAAGpB,WAAW,CAACC,KAAD,CAA5B;IAEA,MAAMoB,gBAAiC,GAAG;MACtCC,eAAe,EAAEF,QAAQ,CAACV,KAAD,CADa;MAEtCa,YAAY,EAAEtB,KAAK,CAACuB,KAAN,CAAYC,MAAZ,CAAmBC,IAFK;MAGtCC,MAAM,EAAEd,SAH8B;MAItCe,QAAQ,EAAE,UAJ4B;MAKtCC,KAAK,EAAEhB;IAL+B,CAA1C;;IAQA,QAAQL,OAAR;MACI;MACA,KAAK,KAAL;QACI,OAAO;UACHsB,KAAK,EAAE,EAAE,GAAGT;UAAL;QADJ,CAAP;;MAGJ,KAAK,QAAL;QACI,OAAO;UACHS,KAAK,EAAE,EACH,GAAGT,gBADA;YAEHU,UAAU,EAAE,QAFT;YAGHC,cAAc,EAAE;UAHb,CADJ;UAMHC,WAAW,EAAE,IAAAC,wBAAA,EAAgBjC,KAAhB,EAAuB;YAChCkC,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,EAFc;cAG1BC,UAAU,EAAE,iBAHc;cAI1BC,aAAa,EAAE,CAAC;YAJU,CAAb,CADe;YAOhC/B,KAAK,EAAEgC,oBAAA,CAAaC,OAAb,CAAqBC,KAArB,CAA2B,KAA3B;UAPyB,CAAvB;QANV,CAAP;IAPR;EAwBH,CAzCM,EAyCJ,CAAC3C,KAAD,EAAQO,OAAR,EAAiBC,IAAjB,EAAuBC,KAAvB,CAzCI,CAAP;AA0CH"}

package/build/commonjs/Button/Button.js

@@ -9,9 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+var _styles = require("@fountain-ui/styles");
 
-var _styles = require("../styles");
+var _ButtonBase = _interopRequireDefault(require("../ButtonBase/ButtonBase"));
+
+var _icons = require("../internal/icons");
+
+var _styles2 = require("../styles");
 
 var _utils = require("../utils");
 
@@ -22,7 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _styles2.useTheme)();
   return {
     root: {
       alignItems: 'center',
@@ -42,26 +46,59 @@ const useStyles = function () {
     medium: {
       gap: theme.spacing(1.5),
       minWidth: 88,
-      paddingHorizontal: 11,
-      paddingVertical: theme.spacing(3)
+      paddingHorizontal: theme.spacing(6),
+      paddingVertical: theme.spacing(2.75)
     },
     small: {
       minWidth: 64,
-      paddingHorizontal: theme.spacing(2.5),
+      paddingHorizontal: theme.spacing(6),
       paddingVertical: theme.spacing(2)
+    },
+    loadingSpinner: {
+      position: 'absolute'
     }
   };
 };
 
+const fontStyleMap = {
+  large: (0, _styles.typographyOf)({
+    fontSize: 16,
+    lineHeight: 20,
+    fontFamily: 'LexendDeca-SemiBold',
+    letterSpacing: -0.32
+  }),
+  medium: (0, _styles.typographyOf)({
+    fontSize: 15,
+    lineHeight: 19.5,
+    fontFamily: 'LexendDeca-SemiBold',
+    letterSpacing: -0.3
+  }),
+  small: (0, _styles.typographyOf)({
+    fontSize: 13,
+    lineHeight: 16.9,
+    fontFamily: 'LexendDeca-SemiBold',
+    letterSpacing: -0.26
+  })
+};
+
+function getLoadingSpinnerColor(variant, color) {
+  if (variant === 'solid' || variant === 'capsuleSolid' && color !== 'secondary') {
+    return 'white';
+  }
+
+  return 'gray';
+}
+
 function Button(props) {
   const {
     children,
-    color = 'primary',
-    disabled = false,
+    color: colorProp = 'primary',
+    disabled: disabledProp = false,
     disableMinWidth = false,
     endIcon: endIconProp,
     fullWidth = false,
     href,
+    isLoading = false,
     onPress,
     pressEffect,
     size = 'medium',
@@ -70,11 +107,12 @@ function Button(props) {
     variant = 'solid',
     ...otherProps
   } = props;
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _styles2.useTheme)();
   const styles = useStyles();
+  const disabled = disabledProp || isLoading;
+  const color = disabledProp ? 'disabled' : colorProp;
   const {
-    borderColor,
-    fillColor,
+    container: containerStyle,
     iconColor,
     labelColor
   } = (0, _useVariantStyleMap.default)(variant, color);
@@ -83,19 +121,17 @@ function Button(props) {
   };
   const startIcon = (0, _utils.cloneElementSafely)(startIconProp, iconProps);
   const endIcon = (0, _utils.cloneElementSafely)(endIconProp, iconProps);
-  const buttonBaseStyle = (0, _styles.css)([styles.root, {
-    backgroundColor: fillColor
-  }, variant === 'outlined' ? {
-    borderColor,
-    borderWidth: 1
-  } : undefined, styles[size], fullWidth ? styles.fullWidth : undefined, disableMinWidth ? {
+  const buttonBaseStyle = (0, _styles2.css)([styles.root, containerStyle, styles[size], fullWidth ? styles.fullWidth : undefined, disableMinWidth ? {
     minWidth: 0
   } : undefined, styleProp]);
-  const fontStyle = (0, _styles.createFontStyle)(theme, {
-    selector: typo => size === 'small' ? typo.button2 : typo.button1,
+  const contentStyle = (0, _styles2.css)({
+    opacity: isLoading ? 0 : 1
+  });
+  const fontStyle = (0, _styles2.createFontStyle)(theme, {
+    selector: _ => fontStyleMap[size],
     color: labelColor
   });
-  const textStyle = (0, _styles.css)([fontStyle, {
+  const textStyle = (0, _styles2.css)([fontStyle, {
     textAlign: 'center'
   }]);
   const modifiedPressEffect = variant !== 'text' && !pressEffect ? 'scale' : pressEffect;
@@ -117,15 +153,21 @@ function Button(props) {
     }
   };
 
+  const loadingSpinnerColor = getLoadingSpinnerColor(variant, color);
   return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
     disabled: disabled,
     onPress: handlePress,
     style: buttonBaseStyle,
     pressEffect: modifiedPressEffect
-  }, otherProps), startIcon, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    children: children,
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: contentStyle
+  }, startIcon, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: textStyle
-  }), endIcon);
+  }, children), endIcon), isLoading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingSpinner, {
+    color: loadingSpinnerColor,
+    size: size,
+    style: styles.loadingSpinner
+  }) : null);
 }
 
 ;

package/build/commonjs/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","borderRadius","shape","radius","sm","flexDirection","justifyContent","fullWidth","width","large","gap","spacing","minWidth","paddingHorizontal","paddingVertical","medium","small","Button","props","children","color","disabled","disableMinWidth","endIcon","endIconProp","href","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","borderColor","fillColor","iconColor","labelColor","useVariantStyleMap","iconProps","fill","cloneElementSafely","buttonBaseStyle","css","backgroundColor","borderWidth","undefined","fontStyle","createFontStyle","selector","typo","button2","button1","textStyle","textAlign","modifiedPressEffect","handlePress","Linking","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonColor, ButtonSize, ButtonVariant } from './ButtonProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype ButtonStyles = NamedStylesStringUnion<'root' | 'fullWidth' | 'large' | 'medium' | 'small'>;\n\nconst useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: theme.shape.radius.sm,\n            flexDirection: 'row',\n            justifyContent: 'center',\n        },\n        fullWidth: {\n            width: '100%',\n        },\n        large: {\n            gap: theme.spacing(2),\n            minWidth: 104,\n            paddingHorizontal: theme.spacing(6),\n            paddingVertical: theme.spacing(3.5),\n        },\n        medium: {\n            gap: theme.spacing(1.5),\n            minWidth: 88,\n            paddingHorizontal: 11,\n            paddingVertical: theme.spacing(3),\n        },\n        small: {\n            minWidth: 64,\n            paddingHorizontal: theme.spacing(2.5),\n            paddingVertical: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Button(props: ButtonProps) {\n    const {\n        children,\n        color = 'primary' as ButtonColor,\n        disabled = false,\n        disableMinWidth = false,\n        endIcon: endIconProp,\n        fullWidth = false,\n        href,\n        onPress,\n        pressEffect,\n        size = 'medium' as ButtonSize,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'solid' as ButtonVariant,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const {\n        borderColor,\n        fillColor,\n        iconColor,\n        labelColor,\n    } = useVariantStyleMap(variant, color);\n\n    const iconProps = {\n        fill: iconColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    const buttonBaseStyle = css([\n        styles.root,\n        { backgroundColor: fillColor },\n        variant === 'outlined' ? { borderColor, borderWidth: 1 } : undefined,\n        styles[size],\n        fullWidth ? styles.fullWidth : undefined,\n        disableMinWidth ? { minWidth: 0 } : undefined,\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n        color: labelColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const modifiedPressEffect = variant !== 'text' && !pressEffect\n        ? 'scale'\n        : pressEffect;\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n        if (href) {\n            if (await Linking.canOpenURL(href)) {\n                await Linking.openURL(href);\n            }\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={buttonBaseStyle}\n            pressEffect={modifiedPressEffect}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","borderRadius","shape","radius","sm","flexDirection","justifyContent","fullWidth","width","large","gap","spacing","minWidth","paddingHorizontal","paddingVertical","medium","small","loadingSpinner","position","fontStyleMap","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","getLoadingSpinnerColor","variant","color","Button","props","children","colorProp","disabled","disabledProp","disableMinWidth","endIcon","endIconProp","href","isLoading","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","otherProps","styles","container","containerStyle","iconColor","labelColor","useVariantStyleMap","iconProps","fill","cloneElementSafely","buttonBaseStyle","css","undefined","contentStyle","opacity","fontStyle","createFontStyle","selector","_","textStyle","textAlign","modifiedPressEffect","handlePress","Linking","canOpenURL","openURL","loadingSpinnerColor"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text, View } from 'react-native';\nimport type { FontStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport { LoadingSpinner } from '../internal/icons';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonColor, ButtonSize, ButtonVariant } from './ButtonProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype ButtonStyles = NamedStylesStringUnion<'root' | 'fullWidth' | 'large' | 'medium' | 'small' | 'loadingSpinner'>;\n\nconst useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: theme.shape.radius.sm,\n            flexDirection: 'row',\n            justifyContent: 'center',\n        },\n        fullWidth: {\n            width: '100%',\n        },\n        large: {\n            gap: theme.spacing(2),\n            minWidth: 104,\n            paddingHorizontal: theme.spacing(6),\n            paddingVertical: theme.spacing(3.5),\n        },\n        medium: {\n            gap: theme.spacing(1.5),\n            minWidth: 88,\n            paddingHorizontal: theme.spacing(6),\n            paddingVertical: theme.spacing(2.75),\n        },\n        small: {\n            minWidth: 64,\n            paddingHorizontal: theme.spacing(6),\n            paddingVertical: theme.spacing(2),\n        },\n        loadingSpinner: {\n            position: 'absolute',\n        },\n    };\n};\n\nconst fontStyleMap: Record<ButtonSize, FontStyle> = {\n    large: typographyOf({\n        fontSize: 16,\n        lineHeight: 20,\n        fontFamily: 'LexendDeca-SemiBold',\n        letterSpacing: -0.32,\n    }),\n    medium: typographyOf({\n        fontSize: 15,\n        lineHeight: 19.5,\n        fontFamily: 'LexendDeca-SemiBold',\n        letterSpacing: -0.3,\n    }),\n    small: typographyOf({\n        fontSize: 13,\n        lineHeight: 16.9,\n        fontFamily: 'LexendDeca-SemiBold',\n        letterSpacing: -0.26,\n    }),\n};\n\nfunction getLoadingSpinnerColor(variant: ButtonVariant, color: ButtonColor) {\n    if (variant === 'solid' || (variant === 'capsuleSolid' && color !== 'secondary')) {\n        return 'white';\n    }\n    return 'gray';\n}\n\nexport default function Button(props: ButtonProps) {\n    const {\n        children,\n        color: colorProp = 'primary' as ButtonColor,\n        disabled: disabledProp = false,\n        disableMinWidth = false,\n        endIcon: endIconProp,\n        fullWidth = false,\n        href,\n        isLoading = false,\n        onPress,\n        pressEffect,\n        size = 'medium' as ButtonSize,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'solid' as ButtonVariant,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const disabled = disabledProp || isLoading;\n\n    const color = disabledProp ? 'disabled' : colorProp;\n    const {\n        container: containerStyle,\n        iconColor,\n        labelColor,\n    } = useVariantStyleMap(variant, color);\n\n    const iconProps = {\n        fill: iconColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    const buttonBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styles[size],\n        fullWidth ? styles.fullWidth : undefined,\n        disableMinWidth ? { minWidth: 0 } : undefined,\n        styleProp,\n    ]);\n\n    const contentStyle = css({\n        opacity: isLoading ? 0 : 1,\n    });\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (_) => fontStyleMap[size],\n        color: labelColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const modifiedPressEffect = variant !== 'text' && !pressEffect\n        ? 'scale'\n        : pressEffect;\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n        if (href) {\n            if (await Linking.canOpenURL(href)) {\n                await Linking.openURL(href);\n            }\n        }\n    };\n\n    const loadingSpinnerColor = getLoadingSpinnerColor(variant, color);\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={buttonBaseStyle}\n            pressEffect={modifiedPressEffect}\n            {...otherProps}\n        >\n            <View style={contentStyle}>\n                {startIcon}\n\n                <Text style={textStyle}>\n                    {children}\n                </Text>\n\n                {endIcon}\n            </View>\n\n            {isLoading ? (\n                <LoadingSpinner\n                    color={loadingSpinnerColor}\n                    size={size}\n                    style={styles.loadingSpinner}\n                />\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Button/ButtonProps.js

@@ -8,6 +8,6 @@ const ButtonColors = ['accent', 'primary', 'danger', 'disabled', 'secondary', 'a
 exports.ButtonColors = ButtonColors;
 const ButtonSizes = ['small', 'medium', 'large'];
 exports.ButtonSizes = ButtonSizes;
-const ButtonVariants = ['solid', 'outlined', 'text'];
+const ButtonVariants = ['solid', 'outlined', 'text', 'capsuleSolid', 'capsuleOutlined'];
 exports.ButtonVariants = ButtonVariants;
 //# sourceMappingURL=ButtonProps.js.map

package/build/commonjs/Button/ButtonProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["ButtonColors","ButtonSizes","ButtonVariants"],"sources":["ButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const ButtonColors = [\n    'accent',\n    'primary',\n    'danger',\n    'disabled',\n    'secondary',\n    'accentAlt',\n] as const;\nexport type ButtonColor = typeof ButtonColors[number];\n\nexport const ButtonSizes = [\n    'small',\n    'medium',\n    'large',\n] as const;\nexport type ButtonSize = typeof ButtonSizes[number];\n\nexport const ButtonVariants = [\n    'solid',\n    'outlined',\n    'text',\n] as const;\nexport type ButtonVariant = typeof ButtonVariants[number];\n\nexport default interface ButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The content of the button.\n     */\n    children: string;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'primary'\n     */\n    color?: ButtonColor;\n\n    /**\n     * Determines whether minWidth should be applied.\n     * @default false\n     */\n    disableMinWidth?: boolean;\n\n    /**\n     * Element placed after the children.\n     */\n    endIcon?: React.ReactElement;\n\n    /**\n     * If `true`, the button will take up the full width of its container.\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * The URL to link to when the button is clicked.\n     */\n    href?: string;\n\n    /**\n     * The size of the button.\n     * @default 'medium'\n     */\n    size?: ButtonSize;\n\n    /**\n     * Element placed before the children.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'solid'\n     */\n    variant?: ButtonVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,YAAY,GAAG,CACxB,QADwB,EAExB,SAFwB,EAGxB,QAHwB,EAIxB,UAJwB,EAKxB,WALwB,EAMxB,WANwB,CAArB;;AAUA,MAAMC,WAAW,GAAG,CACvB,OADuB,EAEvB,QAFuB,EAGvB,OAHuB,CAApB;;AAOA,MAAMC,cAAc,GAAG,CAC1B,OAD0B,EAE1B,UAF0B,EAG1B,MAH0B,CAAvB"}
+{"version":3,"names":["ButtonColors","ButtonSizes","ButtonVariants"],"sources":["ButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const ButtonColors = [\n    'accent',\n    'primary',\n    'danger',\n    'disabled',\n    'secondary',\n    'accentAlt',\n] as const;\nexport type ButtonColor = typeof ButtonColors[number];\n\nexport const ButtonSizes = [\n    'small',\n    'medium',\n    'large',\n] as const;\nexport type ButtonSize = typeof ButtonSizes[number];\n\nexport const ButtonVariants = [\n    'solid',\n    'outlined',\n    'text',\n    'capsuleSolid',\n    'capsuleOutlined',\n] as const;\nexport type ButtonVariant = typeof ButtonVariants[number];\n\nexport default interface ButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The content of the button.\n     */\n    children: string;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'primary'\n     */\n    color?: ButtonColor;\n\n    /**\n     * Determines whether minWidth should be applied.\n     * @default false\n     */\n    disableMinWidth?: boolean;\n\n    /**\n     * Element placed after the children.\n     */\n    endIcon?: React.ReactElement;\n\n    /**\n     * If `true`, the button will take up the full width of its container.\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * The URL to link to when the button is clicked.\n     */\n    href?: string;\n\n    /**\n     * Determines whether to show the loading status or not.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * The size of the button.\n     * @default 'medium'\n     */\n    size?: ButtonSize;\n\n    /**\n     * Element placed before the children.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'solid'\n     */\n    variant?: ButtonVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,YAAY,GAAG,CACxB,QADwB,EAExB,SAFwB,EAGxB,QAHwB,EAIxB,UAJwB,EAKxB,WALwB,EAMxB,WANwB,CAArB;;AAUA,MAAMC,WAAW,GAAG,CACvB,OADuB,EAEvB,QAFuB,EAGvB,OAHuB,CAApB;;AAOA,MAAMC,cAAc,GAAG,CAC1B,OAD0B,EAE1B,UAF0B,EAG1B,MAH0B,EAI1B,cAJ0B,EAK1B,iBAL0B,CAAvB"}