@fountain-ui/core 3.0.0-alpha.46 → 3.0.0-alpha.47

package/build/commonjs/Chip/Chip.js

@@ -34,8 +34,10 @@ function Chip(props) {
     startElement: startElementProp,
     startElementVariant = 'default',
     style: styleProp,
+    variant = 'filled',
     ...otherProps
   } = props;
+  const isSelected = variant === 'outlined' ? false : selected;
   const {
     container: containerStyle,
     closeButtonContainer: closeButtonContainerStyle,
@@ -43,7 +45,7 @@ function Chip(props) {
     label: labelStyle,
     startElement: startElementStyle,
     startElementContainer: startElementContainerStyle
-  } = (0, _useChipStyle.default)(size, startElementVariant, color, selected);
+  } = (0, _useChipStyle.default)(size, startElementVariant, color, isSelected, variant);
   const chipStyle = (0, _styles.css)([containerStyle, styleProp]);
 
   const startElement = /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -60,7 +62,7 @@ function Chip(props) {
     children: children,
     numberOfLines: numberOfLines,
     style: labelStyle
-  }), selected ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }), isSelected ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: closeButtonContainerStyle
   }, /*#__PURE__*/_react.default.createElement(_internal.ChipClose, {
     color: 'baseInverse',

package/build/commonjs/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["Chip","props","children","color","numberOfLines","onPress","selected","size","startElement","startElementProp","startElementVariant","style","styleProp","otherProps","container","containerStyle","closeButtonContainer","closeButtonContainerStyle","closeIconSize","label","labelStyle","startElementStyle","startElementContainer","startElementContainerStyle","useChipStyle","chipStyle","css","cloneElementSafely","height","width"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { ChipClose } from '../internal';\nimport { css } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ChipProps from './ChipProps';\nimport type { ChipColor, ChipSize } from './ChipProps';\nimport useChipStyle from './useChipStyle';\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        color = 'default' as ChipColor,\n        numberOfLines,\n        onPress,\n        selected = false,\n        size = 'small' as ChipSize,\n        startElement: startElementProp,\n        startElementVariant = 'default',\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const {\n        container: containerStyle,\n        closeButtonContainer: closeButtonContainerStyle,\n        closeIconSize,\n        label: labelStyle,\n        startElement: startElementStyle,\n        startElementContainer: startElementContainerStyle,\n    } = useChipStyle(size, startElementVariant, color, selected);\n\n    const chipStyle = css([\n        containerStyle,\n        styleProp,\n    ]);\n\n    const startElement = (\n        <View style={startElementContainerStyle}>\n            {cloneElementSafely(startElementProp, { style: startElementStyle })}\n        </View>\n    );\n\n    return (\n        <ButtonBase\n            disabled={!onPress}\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startElement}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={labelStyle}\n            />\n\n            {selected ? (\n                <View style={closeButtonContainerStyle}>\n                    <ChipClose\n                        color={'baseInverse'}\n                        height={closeIconSize?.height}\n                        width={closeIconSize?.width}\n                    />\n                </View>\n            ) : null}\n        </ButtonBase>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEe,SAASA,IAAT,CAAcC,KAAd,EAAgC;EAC3C,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,aAHE;IAIFC,OAJE;IAKFC,QAAQ,GAAG,KALT;IAMFC,IAAI,GAAG,OANL;IAOFC,YAAY,EAAEC,gBAPZ;IAQFC,mBAAmB,GAAG,SARpB;IASFC,KAAK,EAAEC,SATL;IAUF,GAAGC;EAVD,IAWFZ,KAXJ;EAaA,MAAM;IACFa,SAAS,EAAEC,cADT;IAEFC,oBAAoB,EAAEC,yBAFpB;IAGFC,aAHE;IAIFC,KAAK,EAAEC,UAJL;IAKFZ,YAAY,EAAEa,iBALZ;IAMFC,qBAAqB,EAAEC;EANrB,IAOF,IAAAC,qBAAA,EAAajB,IAAb,EAAmBG,mBAAnB,EAAwCP,KAAxC,EAA+CG,QAA/C,CAPJ;EASA,MAAMmB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBX,cADkB,EAElBH,SAFkB,CAAJ,CAAlB;;EAKA,MAAMJ,YAAY,gBACd,6BAAC,iBAAD;IAAM,KAAK,EAAEe;EAAb,GACK,IAAAI,yBAAA,EAAmBlB,gBAAnB,EAAqC;IAAEE,KAAK,EAAEU;EAAT,CAArC,CADL,CADJ;;EAMA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAE,CAAChB,OADf;IAEI,OAAO,EAAEA,OAFb;IAGI,KAAK,EAAEoB;EAHX,GAIQZ,UAJR,GAMKL,YANL,eAQI,6BAAC,iBAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEE,aAFnB;IAGI,KAAK,EAAEgB;EAHX,EARJ,EAcKd,QAAQ,gBACL,6BAAC,iBAAD;IAAM,KAAK,EAAEW;EAAb,gBACI,6BAAC,mBAAD;IACI,KAAK,EAAE,aADX;IAEI,MAAM,EAAEC,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEU,MAF3B;IAGI,KAAK,EAAEV,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEW;EAH1B,EADJ,CADK,GAQL,IAtBR,CADJ;AA0BH"}
+{"version":3,"names":["Chip","props","children","color","numberOfLines","onPress","selected","size","startElement","startElementProp","startElementVariant","style","styleProp","variant","otherProps","isSelected","container","containerStyle","closeButtonContainer","closeButtonContainerStyle","closeIconSize","label","labelStyle","startElementStyle","startElementContainer","startElementContainerStyle","useChipStyle","chipStyle","css","cloneElementSafely","height","width"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { ChipClose } from '../internal';\nimport { css } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ChipProps from './ChipProps';\nimport type { ChipColor, ChipSize } from './ChipProps';\nimport useChipStyle from './useChipStyle';\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        color = 'default' as ChipColor,\n        numberOfLines,\n        onPress,\n        selected = false,\n        size = 'small' as ChipSize,\n        startElement: startElementProp,\n        startElementVariant = 'default',\n        style: styleProp,\n        variant = 'filled',\n        ...otherProps\n    } = props;\n\n    const isSelected = variant === 'outlined' ? false : selected;\n\n    const {\n        container: containerStyle,\n        closeButtonContainer: closeButtonContainerStyle,\n        closeIconSize,\n        label: labelStyle,\n        startElement: startElementStyle,\n        startElementContainer: startElementContainerStyle,\n    } = useChipStyle(size, startElementVariant, color, isSelected, variant);\n\n    const chipStyle = css([\n        containerStyle,\n        styleProp,\n    ]);\n\n    const startElement = (\n        <View style={startElementContainerStyle}>\n            {cloneElementSafely(startElementProp, { style: startElementStyle })}\n        </View>\n    );\n\n    return (\n        <ButtonBase\n            disabled={!onPress}\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startElement}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={labelStyle}\n            />\n\n            {isSelected ? (\n                <View style={closeButtonContainerStyle}>\n                    <ChipClose\n                        color={'baseInverse'}\n                        height={closeIconSize?.height}\n                        width={closeIconSize?.width}\n                    />\n                </View>\n            ) : null}\n        </ButtonBase>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEe,SAASA,IAAT,CAAcC,KAAd,EAAgC;EAC3C,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,aAHE;IAIFC,OAJE;IAKFC,QAAQ,GAAG,KALT;IAMFC,IAAI,GAAG,OANL;IAOFC,YAAY,EAAEC,gBAPZ;IAQFC,mBAAmB,GAAG,SARpB;IASFC,KAAK,EAAEC,SATL;IAUFC,OAAO,GAAG,QAVR;IAWF,GAAGC;EAXD,IAYFb,KAZJ;EAcA,MAAMc,UAAU,GAAGF,OAAO,KAAK,UAAZ,GAAyB,KAAzB,GAAiCP,QAApD;EAEA,MAAM;IACFU,SAAS,EAAEC,cADT;IAEFC,oBAAoB,EAAEC,yBAFpB;IAGFC,aAHE;IAIFC,KAAK,EAAEC,UAJL;IAKFd,YAAY,EAAEe,iBALZ;IAMFC,qBAAqB,EAAEC;EANrB,IAOF,IAAAC,qBAAA,EAAanB,IAAb,EAAmBG,mBAAnB,EAAwCP,KAAxC,EAA+CY,UAA/C,EAA2DF,OAA3D,CAPJ;EASA,MAAMc,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBX,cADkB,EAElBL,SAFkB,CAAJ,CAAlB;;EAKA,MAAMJ,YAAY,gBACd,6BAAC,iBAAD;IAAM,KAAK,EAAEiB;EAAb,GACK,IAAAI,yBAAA,EAAmBpB,gBAAnB,EAAqC;IAAEE,KAAK,EAAEY;EAAT,CAArC,CADL,CADJ;;EAMA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAE,CAAClB,OADf;IAEI,OAAO,EAAEA,OAFb;IAGI,KAAK,EAAEsB;EAHX,GAIQb,UAJR,GAMKN,YANL,eAQI,6BAAC,iBAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEE,aAFnB;IAGI,KAAK,EAAEkB;EAHX,EARJ,EAcKP,UAAU,gBACP,6BAAC,iBAAD;IAAM,KAAK,EAAEI;EAAb,gBACI,6BAAC,mBAAD;IACI,KAAK,EAAE,aADX;IAEI,MAAM,EAAEC,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEU,MAF3B;IAGI,KAAK,EAAEV,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEW;EAH1B,EADJ,CADO,GAQP,IAtBR,CADJ;AA0BH"}

package/build/commonjs/Chip/ChipProps.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.chipStartElementVariants = exports.chipSizes = exports.chipColors = void 0;
+exports.chipVariants = exports.chipStartElementVariants = exports.chipSizes = exports.chipColors = void 0;
 const chipColors = ['default', 'white'];
 exports.chipColors = chipColors;
 const chipSizes = ['large', 'small'];
 exports.chipSizes = chipSizes;
 const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'];
 exports.chipStartElementVariants = chipStartElementVariants;
+const chipVariants = ['filled', 'outlined'];
+exports.chipVariants = chipVariants;
 //# sourceMappingURL=ChipProps.js.map

package/build/commonjs/Chip/ChipProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["chipColors","chipSizes","chipStartElementVariants"],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport const chipColors = ['default', 'white'] as const;\nexport type ChipColor = typeof chipColors[number];\n\nexport const chipSizes = ['large', 'small'] as const;\nexport type ChipSize = typeof chipSizes[number];\n\nexport const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'] as const;\nexport type ChipStartElementVariant = typeof chipStartElementVariants[number];\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The content of the component.\n     */\n    children: string;\n\n    /**\n     * Set backgroundColor of the component.\n     * @default 'default'\n     */\n    color?: ChipColor;\n\n    /**\n     * Number of lines of children.\n     */\n    numberOfLines?: number;\n\n    /**\n     * If `true`, showing a close icon and applying a highlighted style.\n     */\n    selected?: boolean;\n\n    /**\n     * Determines size of component.\n     * @default 'small'\n     */\n    size?: ChipSize;\n\n    /**\n     * Element placed before the children.\n     */\n    startElement?: React.ReactElement;\n\n    /**\n     * Determines the style of the start element.\n     */\n    startElementVariant?: ChipStartElementVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,OAAZ,CAAnB;;AAGA,MAAMC,SAAS,GAAG,CAAC,OAAD,EAAU,OAAV,CAAlB;;AAGA,MAAMC,wBAAwB,GAAG,CAAC,SAAD,EAAY,QAAZ,EAAsB,OAAtB,EAA+B,MAA/B,CAAjC"}
+{"version":3,"names":["chipColors","chipSizes","chipStartElementVariants","chipVariants"],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport const chipColors = ['default', 'white'] as const;\nexport type ChipColor = typeof chipColors[number];\n\nexport const chipSizes = ['large', 'small'] as const;\nexport type ChipSize = typeof chipSizes[number];\n\nexport const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'] as const;\nexport type ChipStartElementVariant = typeof chipStartElementVariants[number];\n\nexport const chipVariants = ['filled', 'outlined'] as const;\nexport type ChipVariant = typeof chipVariants[number];\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The content of the component.\n     */\n    children: string;\n\n    /**\n     * Set backgroundColor of the component.\n     * @default 'default'\n     */\n    color?: ChipColor;\n\n    /**\n     * Number of lines of children.\n     */\n    numberOfLines?: number;\n\n    /**\n     * If `true`, showing a close icon and applying a highlighted style.\n     */\n    selected?: boolean;\n\n    /**\n     * Determines size of component.\n     * @default 'small'\n     */\n    size?: ChipSize;\n\n    /**\n     * Element placed before the children.\n     */\n    startElement?: React.ReactElement;\n\n    /**\n     * Determines the visual style of the component.\n     * @default 'filled'\n     */\n    variant?: ChipVariant;\n\n    /**\n     * Determines the style of the start element.\n     */\n    startElementVariant?: ChipStartElementVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,OAAZ,CAAnB;;AAGA,MAAMC,SAAS,GAAG,CAAC,OAAD,EAAU,OAAV,CAAlB;;AAGA,MAAMC,wBAAwB,GAAG,CAAC,SAAD,EAAY,QAAZ,EAAsB,OAAtB,EAA+B,MAA/B,CAAjC;;AAGA,MAAMC,YAAY,GAAG,CAAC,QAAD,EAAW,UAAX,CAArB"}

package/build/commonjs/Chip/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "chipStartElementVariants", {
     return _ChipProps.chipStartElementVariants;
   }
 });
+Object.defineProperty(exports, "chipVariants", {
+  enumerable: true,
+  get: function () {
+    return _ChipProps.chipVariants;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Chip';\nexport type { default as ChipProps } from './ChipProps';\nexport { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Chip';\nexport type { default as ChipProps, ChipVariant } from './ChipProps';\nexport { chipColors, chipSizes, chipStartElementVariants, chipVariants } from './ChipProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}

package/build/commonjs/Chip/useChipStyle.js

@@ -31,26 +31,33 @@ const closeIconSize = {
 }; // TODO: need to refactoring...
 
 function useChipStyle(size, startElementVariant, color, selected) {
+  let variant = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'filled';
   const theme = (0, _styles.useTheme)();
   return (0, _react.useMemo)(() => {
     var _variantStyleMap$star, _variantStyleMap$star2, _variantStyleMap$star3;
 
+    const isOutlined = variant === 'outlined';
+    const textColor = selected ? theme.palette.text.strongInverse : isOutlined ? theme.palette.text.base : theme.palette.text.strong;
     const fontStyleMap = {
       small: (0, _styles.createFontStyle)(theme, {
         selector: typography => typography.caption1.medium,
-        color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+        color: textColor
       }),
       large: (0, _styles.createFontStyle)(theme, {
         selector: typography => typography.body2.medium,
-        color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+        color: textColor
       })
     };
     const baseContainerStyle = {
       alignItems: 'center',
-      backgroundColor: selected ? theme.palette.fill.base : color === 'white' ? theme.palette.surface.base : theme.palette.fill.weaker,
+      backgroundColor: selected ? theme.palette.fill.base : isOutlined ? 'transparent' : color === 'white' ? theme.palette.surface.base : theme.palette.fill.weaker,
       borderRadius: theme.shape.radius.full,
       flexDirection: 'row',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      ...(isOutlined && {
+        borderWidth: 1,
+        borderColor: theme.palette.border.weak
+      })
     };
     const isLarge = size === 'large';
     const variantStyleMap = {
@@ -124,6 +131,6 @@ function useChipStyle(size, startElementVariant, color, selected) {
       startElement: (_variantStyleMap$star2 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star2 === void 0 ? void 0 : _variantStyleMap$star2.startElement,
       startElementContainer: (_variantStyleMap$star3 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star3 === void 0 ? void 0 : _variantStyleMap$star3.startElementContainer
     };
-  }, [theme, size, startElementVariant, color, selected]);
+  }, [theme, size, startElementVariant, color, selected, variant]);
 }
 //# sourceMappingURL=useChipStyle.js.map

package/build/commonjs/Chip/useChipStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["closeButtonContainerStyleMap","small","marginLeft","paddingTop","large","closeIconSize","height","width","useChipStyle","size","startElementVariant","color","selected","theme","useTheme","useMemo","fontStyleMap","createFontStyle","selector","typography","caption1","medium","palette","text","strongInverse","strong","body2","baseContainerStyle","alignItems","backgroundColor","fill","base","surface","weaker","borderRadius","shape","radius","full","flexDirection","overflow","isLarge","variantStyleMap","avatar","container","paddingLeft","spacing","paddingRight","paddingVertical","startElement","startElementContainer","marginRight","icon","justifyContent","image","default","paddingBottom","closeButtonContainer","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport type { SvgIconProps } from '../SvgIcon';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    closeButtonContainer?: FountainUiStyle;\n    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n    startElementContainer?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\nconst closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {\n    small: {\n        marginLeft: 8,\n        paddingTop: 1,\n    },\n    large: {\n        marginLeft: 10,\n        paddingTop: 1,\n    },\n};\n\nconst closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {\n    small: {\n        height: 14,\n        width: 8.17,\n    },\n    large: {\n        height: 16,\n        width: 9,\n    },\n};\n\n// TODO: need to refactoring...\nexport default function useChipStyle(\n    size: ChipSize,\n    startElementVariant: ChipStartElementVariant,\n    color: ChipColor,\n    selected: boolean,\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                selector: (typography) => typography.caption1.medium,\n                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,\n            }),\n            large: createFontStyle(theme, {\n                selector: (typography) => typography.body2.medium,\n                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,\n            }),\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: selected ? theme.palette.fill.base\n                : color === 'white'\n                    ? theme.palette.surface.base\n                    : theme.palette.fill.weaker,\n            borderRadius: theme.shape.radius.full,\n            flexDirection: 'row',\n            overflow: 'hidden',\n        };\n\n        const isLarge = size === 'large';\n\n        const variantStyleMap: VariantStyleMap = {\n            avatar: {\n                container: {\n                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 26 : 23,\n                    width: isLarge ? 26 : 23,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n            },\n            icon: {\n                container: {\n                    paddingLeft: theme.spacing(1.5),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n                startElement: {\n                    color: selected\n                        ? theme.palette.icon.strongInverse\n                        : theme.palette.icon.strong,\n                    height: isLarge ? 17 : 16,\n                    width: isLarge ? 17 : 16,\n                },\n                startElementContainer: {\n                    alignItems: 'center',\n                    height: isLarge ? 24 : 21,\n                    justifyContent: 'center',\n                    marginRight: theme.spacing(isLarge ? 1 : 0.75),\n                    width: isLarge ? 24 : 21,\n                },\n            },\n            image: {\n                container: {\n                    alignItems: 'center',\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 36 : 31,\n                    width: isLarge ? 48 : 40,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(1.5),\n                },\n            },\n            default: {\n                container: {\n                    paddingBottom: theme.spacing(1.75),\n                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingTop: theme.spacing(1.5),\n                },\n            },\n        };\n\n        return {\n            container: {\n                ...baseContainerStyle,\n                ...variantStyleMap[startElementVariant]?.container,\n                ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),\n            },\n            closeButtonContainer: closeButtonContainerStyleMap[size],\n            closeIconSize: closeIconSize[size],\n            label: fontStyleMap[size],\n            startElement: variantStyleMap[startElementVariant]?.startElement,\n            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,\n        };\n    }, [theme, size, startElementVariant, color, selected]);\n}\n"],"mappings":";;;;;;;AAAA;;AAIA;;AAcA,MAAMA,4BAA+D,GAAG;EACpEC,KAAK,EAAE;IACHC,UAAU,EAAE,CADT;IAEHC,UAAU,EAAE;EAFT,CAD6D;EAKpEC,KAAK,EAAE;IACHF,UAAU,EAAE,EADT;IAEHC,UAAU,EAAE;EAFT;AAL6D,CAAxE;AAWA,MAAME,aAA2D,GAAG;EAChEJ,KAAK,EAAE;IACHK,MAAM,EAAE,EADL;IAEHC,KAAK,EAAE;EAFJ,CADyD;EAKhEH,KAAK,EAAE;IACHE,MAAM,EAAE,EADL;IAEHC,KAAK,EAAE;EAFJ;AALyD,CAApE,C,CAWA;;AACe,SAASC,YAAT,CACXC,IADW,EAEXC,mBAFW,EAGXC,KAHW,EAIXC,QAJW,EAKF;EACT,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAAA;;IAC5B,MAAMC,YAAyC,GAAG;MAC9Cf,KAAK,EAAE,IAAAgB,uBAAA,EAAgBJ,KAAhB,EAAuB;QAC1BK,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,QAAX,CAAoBC,MADpB;QAE1BV,KAAK,EAAEC,QAAQ,GAAGC,KAAK,CAACS,OAAN,CAAcC,IAAd,CAAmBC,aAAtB,GAAsCX,KAAK,CAACS,OAAN,CAAcC,IAAd,CAAmBE;MAF9C,CAAvB,CADuC;MAK9CrB,KAAK,EAAE,IAAAa,uBAAA,EAAgBJ,KAAhB,EAAuB;QAC1BK,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACO,KAAX,CAAiBL,MADjB;QAE1BV,KAAK,EAAEC,QAAQ,GAAGC,KAAK,CAACS,OAAN,CAAcC,IAAd,CAAmBC,aAAtB,GAAsCX,KAAK,CAACS,OAAN,CAAcC,IAAd,CAAmBE;MAF9C,CAAvB;IALuC,CAAlD;IAWA,MAAME,kBAAmC,GAAG;MACxCC,UAAU,EAAE,QAD4B;MAExCC,eAAe,EAAEjB,QAAQ,GAAGC,KAAK,CAACS,OAAN,CAAcQ,IAAd,CAAmBC,IAAtB,GACnBpB,KAAK,KAAK,OAAV,GACIE,KAAK,CAACS,OAAN,CAAcU,OAAd,CAAsBD,IAD1B,GAEIlB,KAAK,CAACS,OAAN,CAAcQ,IAAd,CAAmBG,MALW;MAMxCC,YAAY,EAAErB,KAAK,CAACsB,KAAN,CAAYC,MAAZ,CAAmBC,IANO;MAOxCC,aAAa,EAAE,KAPyB;MAQxCC,QAAQ,EAAE;IAR8B,CAA5C;IAWA,MAAMC,OAAO,GAAG/B,IAAI,KAAK,OAAzB;IAEA,MAAMgC,eAAgC,GAAG;MACrCC,MAAM,EAAE;QACJC,SAAS,EAAE;UACPC,WAAW,EAAE/B,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,GAAH,GAAS,IAA9B,CADN;UAEPM,YAAY,EAAEjC,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,GAAH,GAAS,CAA9B,CAFP;UAGPO,eAAe,EAAElC,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,IAAH,GAAU,CAA/B;QAHV,CADP;QAMJQ,YAAY,EAAE;UACVd,YAAY,EAAErB,KAAK,CAACsB,KAAN,CAAYC,MAAZ,CAAmBC,IADvB;UAEV/B,MAAM,EAAEkC,OAAO,GAAG,EAAH,GAAQ,EAFb;UAGVjC,KAAK,EAAEiC,OAAO,GAAG,EAAH,GAAQ;QAHZ,CANV;QAWJS,qBAAqB,EAAE;UACnBC,WAAW,EAAErC,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,GAAH,GAAS,IAA9B;QADM;MAXnB,CAD6B;MAgBrCW,IAAI,EAAE;QACFR,SAAS,EAAE;UACPC,WAAW,EAAE/B,KAAK,CAACgC,OAAN,CAAc,GAAd,CADN;UAEPC,YAAY,EAAEjC,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,GAAH,GAAS,CAA9B,CAFP;UAGPO,eAAe,EAAElC,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,GAAH,GAAS,IAA9B;QAHV,CADT;QAMFQ,YAAY,EAAE;UACVrC,KAAK,EAAEC,QAAQ,GACTC,KAAK,CAACS,OAAN,CAAc6B,IAAd,CAAmB3B,aADV,GAETX,KAAK,CAACS,OAAN,CAAc6B,IAAd,CAAmB1B,MAHf;UAIVnB,MAAM,EAAEkC,OAAO,GAAG,EAAH,GAAQ,EAJb;UAKVjC,KAAK,EAAEiC,OAAO,GAAG,EAAH,GAAQ;QALZ,CANZ;QAaFS,qBAAqB,EAAE;UACnBrB,UAAU,EAAE,QADO;UAEnBtB,MAAM,EAAEkC,OAAO,GAAG,EAAH,GAAQ,EAFJ;UAGnBY,cAAc,EAAE,QAHG;UAInBF,WAAW,EAAErC,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,CAAH,GAAO,IAA5B,CAJM;UAKnBjC,KAAK,EAAEiC,OAAO,GAAG,EAAH,GAAQ;QALH;MAbrB,CAhB+B;MAqCrCa,KAAK,EAAE;QACHV,SAAS,EAAE;UACPf,UAAU,EAAE,QADL;UAEPkB,YAAY,EAAEjC,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,GAAH,GAAS,CAA9B;QAFP,CADR;QAKHQ,YAAY,EAAE;UACVd,YAAY,EAAErB,KAAK,CAACsB,KAAN,CAAYC,MAAZ,CAAmBC,IADvB;UAEV/B,MAAM,EAAEkC,OAAO,GAAG,EAAH,GAAQ,EAFb;UAGVjC,KAAK,EAAEiC,OAAO,GAAG,EAAH,GAAQ;QAHZ,CALX;QAUHS,qBAAqB,EAAE;UACnBC,WAAW,EAAErC,KAAK,CAACgC,OAAN,CAAc,GAAd;QADM;MAVpB,CArC8B;MAmDrCS,OAAO,EAAE;QACLX,SAAS,EAAE;UACPY,aAAa,EAAE1C,KAAK,CAACgC,OAAN,CAAc,IAAd,CADR;UAEPD,WAAW,EAAE/B,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,GAAH,GAAS,CAA9B,CAFN;UAGPM,YAAY,EAAEjC,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,GAAH,GAAS,CAA9B,CAHP;UAIPrC,UAAU,EAAEU,KAAK,CAACgC,OAAN,CAAc,GAAd;QAJL;MADN;IAnD4B,CAAzC;IA6DA,OAAO;MACHF,SAAS,EAAE,EACP,GAAGhB,kBADI;QAEP,6BAAGc,eAAe,CAAC/B,mBAAD,CAAlB,0DAAG,sBAAsCiC,SAAzC,CAFO;QAGP,IAAI/B,QAAQ,GAAG;UAAEkC,YAAY,EAAEjC,KAAK,CAACgC,OAAN,CAAcL,OAAO,GAAG,GAAH,GAAS,IAA9B;QAAhB,CAAH,GAA2D,EAAvE;MAHO,CADR;MAMHgB,oBAAoB,EAAExD,4BAA4B,CAACS,IAAD,CAN/C;MAOHJ,aAAa,EAAEA,aAAa,CAACI,IAAD,CAPzB;MAQHgD,KAAK,EAAEzC,YAAY,CAACP,IAAD,CARhB;MASHuC,YAAY,4BAAEP,eAAe,CAAC/B,mBAAD,CAAjB,2DAAE,uBAAsCsC,YATjD;MAUHC,qBAAqB,4BAAER,eAAe,CAAC/B,mBAAD,CAAjB,2DAAE,uBAAsCuC;IAV1D,CAAP;EAYH,CAlGM,EAkGJ,CAACpC,KAAD,EAAQJ,IAAR,EAAcC,mBAAd,EAAmCC,KAAnC,EAA0CC,QAA1C,CAlGI,CAAP;AAmGH"}
+{"version":3,"names":["closeButtonContainerStyleMap","small","marginLeft","paddingTop","large","closeIconSize","height","width","useChipStyle","size","startElementVariant","color","selected","variant","theme","useTheme","useMemo","isOutlined","textColor","palette","text","strongInverse","base","strong","fontStyleMap","createFontStyle","selector","typography","caption1","medium","body2","baseContainerStyle","alignItems","backgroundColor","fill","surface","weaker","borderRadius","shape","radius","full","flexDirection","overflow","borderWidth","borderColor","border","weak","isLarge","variantStyleMap","avatar","container","paddingLeft","spacing","paddingRight","paddingVertical","startElement","startElementContainer","marginRight","icon","justifyContent","image","default","paddingBottom","closeButtonContainer","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport type { SvgIconProps } from '../SvgIcon';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipColor, ChipSize, ChipStartElementVariant, ChipVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    closeButtonContainer?: FountainUiStyle;\n    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n    startElementContainer?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\nconst closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {\n    small: {\n        marginLeft: 8,\n        paddingTop: 1,\n    },\n    large: {\n        marginLeft: 10,\n        paddingTop: 1,\n    },\n};\n\nconst closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {\n    small: {\n        height: 14,\n        width: 8.17,\n    },\n    large: {\n        height: 16,\n        width: 9,\n    },\n};\n\n// TODO: need to refactoring...\nexport default function useChipStyle(\n    size: ChipSize,\n    startElementVariant: ChipStartElementVariant,\n    color: ChipColor,\n    selected: boolean,\n    variant: ChipVariant = 'filled',\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const isOutlined = variant === 'outlined';\n\n        const textColor = selected\n            ? theme.palette.text.strongInverse\n            : isOutlined\n                ? theme.palette.text.base\n                : theme.palette.text.strong;\n\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                selector: (typography) => typography.caption1.medium,\n                color: textColor,\n            }),\n            large: createFontStyle(theme, {\n                selector: (typography) => typography.body2.medium,\n                color: textColor,\n            }),\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: selected\n                ? theme.palette.fill.base\n                : isOutlined\n                    ? 'transparent'\n                    : color === 'white'\n                        ? theme.palette.surface.base\n                        : theme.palette.fill.weaker,\n            borderRadius: theme.shape.radius.full,\n            flexDirection: 'row',\n            overflow: 'hidden',\n            ...(isOutlined && {\n                borderWidth: 1,\n                borderColor: theme.palette.border.weak,\n            }),\n        };\n\n        const isLarge = size === 'large';\n\n        const variantStyleMap: VariantStyleMap = {\n            avatar: {\n                container: {\n                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 26 : 23,\n                    width: isLarge ? 26 : 23,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n            },\n            icon: {\n                container: {\n                    paddingLeft: theme.spacing(1.5),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n                startElement: {\n                    color: selected\n                        ? theme.palette.icon.strongInverse\n                        : theme.palette.icon.strong,\n                    height: isLarge ? 17 : 16,\n                    width: isLarge ? 17 : 16,\n                },\n                startElementContainer: {\n                    alignItems: 'center',\n                    height: isLarge ? 24 : 21,\n                    justifyContent: 'center',\n                    marginRight: theme.spacing(isLarge ? 1 : 0.75),\n                    width: isLarge ? 24 : 21,\n                },\n            },\n            image: {\n                container: {\n                    alignItems: 'center',\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 36 : 31,\n                    width: isLarge ? 48 : 40,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(1.5),\n                },\n            },\n            default: {\n                container: {\n                    paddingBottom: theme.spacing(1.75),\n                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingTop: theme.spacing(1.5),\n                },\n            },\n        };\n\n        return {\n            container: {\n                ...baseContainerStyle,\n                ...variantStyleMap[startElementVariant]?.container,\n                ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),\n            },\n            closeButtonContainer: closeButtonContainerStyleMap[size],\n            closeIconSize: closeIconSize[size],\n            label: fontStyleMap[size],\n            startElement: variantStyleMap[startElementVariant]?.startElement,\n            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,\n        };\n    }, [theme, size, startElementVariant, color, selected, variant]);\n}\n"],"mappings":"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"}

package/build/commonjs/Radio/Radio.js

@@ -79,14 +79,13 @@ function Radio(props) {
     }
   };
 
-  const isChecked = (context === null || context === void 0 ? void 0 : context.value) === value ?? checked;
+  const isChecked = context ? context.value === value : checked;
 
   const defaultCheckedIcon = /*#__PURE__*/_react.default.createElement(_internal.Check, {
     color: 'accent'
   });
 
   const checkedIcon = checkIconProp ?? defaultCheckedIcon;
-  const icon = isChecked ? checkedIcon : null;
   const startIcon = (0, _utils.cloneElementSafely)(startIconProp, {
     color: 'strong',
     height: DEFAULT_START_ICON_SIZE,
@@ -115,7 +114,11 @@ function Radio(props) {
     color: 'base',
     weight: 'regular',
     children: description
-  }) : null), icon);
+  }) : null), /*#__PURE__*/_react.default.createElement(_Column.default, {
+    style: {
+      opacity: Number(isChecked)
+    }
+  }, checkedIcon));
 }
 
 ;

package/build/commonjs/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"names":["DEFAULT_START_ICON_SIZE","useStyles","theme","useTheme","root","alignItems","borderBottomColor","palette","border","weak","borderBottomWidth","flexDirection","gap","justifyContent","paddingVertical","content","minHeight","Radio","props","checked","children","checkedIcon","checkIconProp","disabled","onChange","onChangeProp","startIcon","startIconProp","style","value","description","otherProps","styles","context","useContext","RadioContext","handlePress","isChecked","defaultCheckedIcon","icon","cloneElementSafely","color","height","width","rootStyle","css","fontStyle","createFontStyle","selector","typography","body1","regular","text","strong"],"sources":["Radio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport { Check as CheckedIcon } from '../internal';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\nimport Typography from '../Typography';\n\nconst DEFAULT_START_ICON_SIZE = 21;\n\ntype RadioStyles = NamedStylesStringUnion<'root' | 'content'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n            flexDirection: 'row',\n            gap: 32,\n            justifyContent: 'space-between',\n            paddingVertical: 14,\n        },\n        content: {\n            gap: 8,\n            minHeight: 20,\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        checkedIcon: checkIconProp,\n        disabled = false,\n        onChange: onChangeProp,\n        startIcon: startIconProp,\n        style,\n        value,\n        description,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const context = useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const defaultCheckedIcon = (\n        <CheckedIcon color={'accent'}/>\n    );\n\n    const checkedIcon = checkIconProp ?? defaultCheckedIcon;\n    const icon = isChecked ? checkedIcon : null;\n\n    const startIcon = cloneElementSafely(startIconProp, {\n        color: 'strong',\n        height: DEFAULT_START_ICON_SIZE,\n        width: DEFAULT_START_ICON_SIZE,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body1.regular,\n        color: theme.palette.text.strong,\n    });\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Column\n                gap={2}\n                flexShrink={1}\n            >\n                <Row\n                    alignItems={'center'}\n                    style={styles.content}\n                >\n                    {startIcon}\n\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n\n                {description ? (\n                    <Typography\n                        variant={'body3'}\n                        color={'base'}\n                        weight={'regular'}\n                        children={description}\n                    />\n                ) : null}\n            </Column>\n\n            {icon}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["DEFAULT_START_ICON_SIZE","useStyles","theme","useTheme","root","alignItems","borderBottomColor","palette","border","weak","borderBottomWidth","flexDirection","gap","justifyContent","paddingVertical","content","minHeight","Radio","props","checked","children","checkedIcon","checkIconProp","disabled","onChange","onChangeProp","startIcon","startIconProp","style","value","description","otherProps","styles","context","useContext","RadioContext","handlePress","isChecked","defaultCheckedIcon","cloneElementSafely","color","height","width","rootStyle","css","fontStyle","createFontStyle","selector","typography","body1","regular","text","strong","opacity","Number"],"sources":["Radio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport { Check as CheckedIcon } from '../internal';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\nimport Typography from '../Typography';\n\nconst DEFAULT_START_ICON_SIZE = 21;\n\ntype RadioStyles = NamedStylesStringUnion<'root' | 'content'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n            flexDirection: 'row',\n            gap: 32,\n            justifyContent: 'space-between',\n            paddingVertical: 14,\n        },\n        content: {\n            gap: 8,\n            minHeight: 20,\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        checkedIcon: checkIconProp,\n        disabled = false,\n        onChange: onChangeProp,\n        startIcon: startIconProp,\n        style,\n        value,\n        description,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const context = useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context\n        ? context.value === value\n        : checked;\n\n    const defaultCheckedIcon = (\n        <CheckedIcon color={'accent'}/>\n    );\n\n    const checkedIcon = checkIconProp ?? defaultCheckedIcon;\n\n    const startIcon = cloneElementSafely(startIconProp, {\n        color: 'strong',\n        height: DEFAULT_START_ICON_SIZE,\n        width: DEFAULT_START_ICON_SIZE,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body1.regular,\n        color: theme.palette.text.strong,\n    });\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Column\n                gap={2}\n                flexShrink={1}\n            >\n                <Row\n                    alignItems={'center'}\n                    style={styles.content}\n                >\n                    {startIcon}\n\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n\n                {description ? (\n                    <Typography\n                        variant={'body3'}\n                        color={'base'}\n                        weight={'regular'}\n                        children={description}\n                    />\n                ) : null}\n            </Column>\n\n            <Column style={{ opacity: Number(isChecked) }}>\n                {checkedIcon}\n            </Column>\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}

package/build/module/Chip/Chip.js

@@ -18,8 +18,10 @@ export default function Chip(props) {
     startElement: startElementProp,
     startElementVariant = 'default',
     style: styleProp,
+    variant = 'filled',
     ...otherProps
   } = props;
+  const isSelected = variant === 'outlined' ? false : selected;
   const {
     container: containerStyle,
     closeButtonContainer: closeButtonContainerStyle,
@@ -27,7 +29,7 @@ export default function Chip(props) {
     label: labelStyle,
     startElement: startElementStyle,
     startElementContainer: startElementContainerStyle
-  } = useChipStyle(size, startElementVariant, color, selected);
+  } = useChipStyle(size, startElementVariant, color, isSelected, variant);
   const chipStyle = css([containerStyle, styleProp]);
   const startElement = /*#__PURE__*/React.createElement(View, {
     style: startElementContainerStyle
@@ -42,7 +44,7 @@ export default function Chip(props) {
     children: children,
     numberOfLines: numberOfLines,
     style: labelStyle
-  }), selected ? /*#__PURE__*/React.createElement(View, {
+  }), isSelected ? /*#__PURE__*/React.createElement(View, {
     style: closeButtonContainerStyle
   }, /*#__PURE__*/React.createElement(ChipClose, {
     color: 'baseInverse',

package/build/module/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","ButtonBase","ChipClose","css","cloneElementSafely","useChipStyle","Chip","props","children","color","numberOfLines","onPress","selected","size","startElement","startElementProp","startElementVariant","style","styleProp","otherProps","container","containerStyle","closeButtonContainer","closeButtonContainerStyle","closeIconSize","label","labelStyle","startElementStyle","startElementContainer","startElementContainerStyle","chipStyle","height","width"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { ChipClose } from '../internal';\nimport { css } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ChipProps from './ChipProps';\nimport type { ChipColor, ChipSize } from './ChipProps';\nimport useChipStyle from './useChipStyle';\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        color = 'default' as ChipColor,\n        numberOfLines,\n        onPress,\n        selected = false,\n        size = 'small' as ChipSize,\n        startElement: startElementProp,\n        startElementVariant = 'default',\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const {\n        container: containerStyle,\n        closeButtonContainer: closeButtonContainerStyle,\n        closeIconSize,\n        label: labelStyle,\n        startElement: startElementStyle,\n        startElementContainer: startElementContainerStyle,\n    } = useChipStyle(size, startElementVariant, color, selected);\n\n    const chipStyle = css([\n        containerStyle,\n        styleProp,\n    ]);\n\n    const startElement = (\n        <View style={startElementContainerStyle}>\n            {cloneElementSafely(startElementProp, { style: startElementStyle })}\n        </View>\n    );\n\n    return (\n        <ButtonBase\n            disabled={!onPress}\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startElement}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={labelStyle}\n            />\n\n            {selected ? (\n                <View style={closeButtonContainerStyle}>\n                    <ChipClose\n                        color={'baseInverse'}\n                        height={closeIconSize?.height}\n                        width={closeIconSize?.width}\n                    />\n                </View>\n            ) : null}\n        </ButtonBase>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,GAAT,QAAoB,WAApB;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAGA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,eAAe,SAASC,IAAT,CAAcC,KAAd,EAAgC;EAC3C,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,aAHE;IAIFC,OAJE;IAKFC,QAAQ,GAAG,KALT;IAMFC,IAAI,GAAG,OANL;IAOFC,YAAY,EAAEC,gBAPZ;IAQFC,mBAAmB,GAAG,SARpB;IASFC,KAAK,EAAEC,SATL;IAUF,GAAGC;EAVD,IAWFZ,KAXJ;EAaA,MAAM;IACFa,SAAS,EAAEC,cADT;IAEFC,oBAAoB,EAAEC,yBAFpB;IAGFC,aAHE;IAIFC,KAAK,EAAEC,UAJL;IAKFZ,YAAY,EAAEa,iBALZ;IAMFC,qBAAqB,EAAEC;EANrB,IAOFxB,YAAY,CAACQ,IAAD,EAAOG,mBAAP,EAA4BP,KAA5B,EAAmCG,QAAnC,CAPhB;EASA,MAAMkB,SAAS,GAAG3B,GAAG,CAAC,CAClBkB,cADkB,EAElBH,SAFkB,CAAD,CAArB;EAKA,MAAMJ,YAAY,gBACd,oBAAC,IAAD;IAAM,KAAK,EAAEe;EAAb,GACKzB,kBAAkB,CAACW,gBAAD,EAAmB;IAAEE,KAAK,EAAEU;EAAT,CAAnB,CADvB,CADJ;EAMA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAE,CAAChB,OADf;IAEI,OAAO,EAAEA,OAFb;IAGI,KAAK,EAAEmB;EAHX,GAIQX,UAJR,GAMKL,YANL,eAQI,oBAAC,IAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEE,aAFnB;IAGI,KAAK,EAAEgB;EAHX,EARJ,EAcKd,QAAQ,gBACL,oBAAC,IAAD;IAAM,KAAK,EAAEW;EAAb,gBACI,oBAAC,SAAD;IACI,KAAK,EAAE,aADX;IAEI,MAAM,EAAEC,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEO,MAF3B;IAGI,KAAK,EAAEP,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEQ;EAH1B,EADJ,CADK,GAQL,IAtBR,CADJ;AA0BH"}
+{"version":3,"names":["React","Text","View","ButtonBase","ChipClose","css","cloneElementSafely","useChipStyle","Chip","props","children","color","numberOfLines","onPress","selected","size","startElement","startElementProp","startElementVariant","style","styleProp","variant","otherProps","isSelected","container","containerStyle","closeButtonContainer","closeButtonContainerStyle","closeIconSize","label","labelStyle","startElementStyle","startElementContainer","startElementContainerStyle","chipStyle","height","width"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { ChipClose } from '../internal';\nimport { css } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ChipProps from './ChipProps';\nimport type { ChipColor, ChipSize } from './ChipProps';\nimport useChipStyle from './useChipStyle';\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        color = 'default' as ChipColor,\n        numberOfLines,\n        onPress,\n        selected = false,\n        size = 'small' as ChipSize,\n        startElement: startElementProp,\n        startElementVariant = 'default',\n        style: styleProp,\n        variant = 'filled',\n        ...otherProps\n    } = props;\n\n    const isSelected = variant === 'outlined' ? false : selected;\n\n    const {\n        container: containerStyle,\n        closeButtonContainer: closeButtonContainerStyle,\n        closeIconSize,\n        label: labelStyle,\n        startElement: startElementStyle,\n        startElementContainer: startElementContainerStyle,\n    } = useChipStyle(size, startElementVariant, color, isSelected, variant);\n\n    const chipStyle = css([\n        containerStyle,\n        styleProp,\n    ]);\n\n    const startElement = (\n        <View style={startElementContainerStyle}>\n            {cloneElementSafely(startElementProp, { style: startElementStyle })}\n        </View>\n    );\n\n    return (\n        <ButtonBase\n            disabled={!onPress}\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startElement}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={labelStyle}\n            />\n\n            {isSelected ? (\n                <View style={closeButtonContainerStyle}>\n                    <ChipClose\n                        color={'baseInverse'}\n                        height={closeIconSize?.height}\n                        width={closeIconSize?.width}\n                    />\n                </View>\n            ) : null}\n        </ButtonBase>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,GAAT,QAAoB,WAApB;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAGA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,eAAe,SAASC,IAAT,CAAcC,KAAd,EAAgC;EAC3C,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,aAHE;IAIFC,OAJE;IAKFC,QAAQ,GAAG,KALT;IAMFC,IAAI,GAAG,OANL;IAOFC,YAAY,EAAEC,gBAPZ;IAQFC,mBAAmB,GAAG,SARpB;IASFC,KAAK,EAAEC,SATL;IAUFC,OAAO,GAAG,QAVR;IAWF,GAAGC;EAXD,IAYFb,KAZJ;EAcA,MAAMc,UAAU,GAAGF,OAAO,KAAK,UAAZ,GAAyB,KAAzB,GAAiCP,QAApD;EAEA,MAAM;IACFU,SAAS,EAAEC,cADT;IAEFC,oBAAoB,EAAEC,yBAFpB;IAGFC,aAHE;IAIFC,KAAK,EAAEC,UAJL;IAKFd,YAAY,EAAEe,iBALZ;IAMFC,qBAAqB,EAAEC;EANrB,IAOF1B,YAAY,CAACQ,IAAD,EAAOG,mBAAP,EAA4BP,KAA5B,EAAmCY,UAAnC,EAA+CF,OAA/C,CAPhB;EASA,MAAMa,SAAS,GAAG7B,GAAG,CAAC,CAClBoB,cADkB,EAElBL,SAFkB,CAAD,CAArB;EAKA,MAAMJ,YAAY,gBACd,oBAAC,IAAD;IAAM,KAAK,EAAEiB;EAAb,GACK3B,kBAAkB,CAACW,gBAAD,EAAmB;IAAEE,KAAK,EAAEY;EAAT,CAAnB,CADvB,CADJ;EAMA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAE,CAAClB,OADf;IAEI,OAAO,EAAEA,OAFb;IAGI,KAAK,EAAEqB;EAHX,GAIQZ,UAJR,GAMKN,YANL,eAQI,oBAAC,IAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEE,aAFnB;IAGI,KAAK,EAAEkB;EAHX,EARJ,EAcKP,UAAU,gBACP,oBAAC,IAAD;IAAM,KAAK,EAAEI;EAAb,gBACI,oBAAC,SAAD;IACI,KAAK,EAAE,aADX;IAEI,MAAM,EAAEC,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEO,MAF3B;IAGI,KAAK,EAAEP,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEQ;EAH1B,EADJ,CADO,GAQP,IAtBR,CADJ;AA0BH"}

package/build/module/Chip/ChipProps.js

@@ -1,4 +1,5 @@
 export const chipColors = ['default', 'white'];
 export const chipSizes = ['large', 'small'];
 export const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'];
+export const chipVariants = ['filled', 'outlined'];
 //# sourceMappingURL=ChipProps.js.map

package/build/module/Chip/ChipProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["chipColors","chipSizes","chipStartElementVariants"],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport const chipColors = ['default', 'white'] as const;\nexport type ChipColor = typeof chipColors[number];\n\nexport const chipSizes = ['large', 'small'] as const;\nexport type ChipSize = typeof chipSizes[number];\n\nexport const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'] as const;\nexport type ChipStartElementVariant = typeof chipStartElementVariants[number];\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The content of the component.\n     */\n    children: string;\n\n    /**\n     * Set backgroundColor of the component.\n     * @default 'default'\n     */\n    color?: ChipColor;\n\n    /**\n     * Number of lines of children.\n     */\n    numberOfLines?: number;\n\n    /**\n     * If `true`, showing a close icon and applying a highlighted style.\n     */\n    selected?: boolean;\n\n    /**\n     * Determines size of component.\n     * @default 'small'\n     */\n    size?: ChipSize;\n\n    /**\n     * Element placed before the children.\n     */\n    startElement?: React.ReactElement;\n\n    /**\n     * Determines the style of the start element.\n     */\n    startElementVariant?: ChipStartElementVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,OAAZ,CAAnB;AAGP,OAAO,MAAMC,SAAS,GAAG,CAAC,OAAD,EAAU,OAAV,CAAlB;AAGP,OAAO,MAAMC,wBAAwB,GAAG,CAAC,SAAD,EAAY,QAAZ,EAAsB,OAAtB,EAA+B,MAA/B,CAAjC"}
+{"version":3,"names":["chipColors","chipSizes","chipStartElementVariants","chipVariants"],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport const chipColors = ['default', 'white'] as const;\nexport type ChipColor = typeof chipColors[number];\n\nexport const chipSizes = ['large', 'small'] as const;\nexport type ChipSize = typeof chipSizes[number];\n\nexport const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'] as const;\nexport type ChipStartElementVariant = typeof chipStartElementVariants[number];\n\nexport const chipVariants = ['filled', 'outlined'] as const;\nexport type ChipVariant = typeof chipVariants[number];\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The content of the component.\n     */\n    children: string;\n\n    /**\n     * Set backgroundColor of the component.\n     * @default 'default'\n     */\n    color?: ChipColor;\n\n    /**\n     * Number of lines of children.\n     */\n    numberOfLines?: number;\n\n    /**\n     * If `true`, showing a close icon and applying a highlighted style.\n     */\n    selected?: boolean;\n\n    /**\n     * Determines size of component.\n     * @default 'small'\n     */\n    size?: ChipSize;\n\n    /**\n     * Element placed before the children.\n     */\n    startElement?: React.ReactElement;\n\n    /**\n     * Determines the visual style of the component.\n     * @default 'filled'\n     */\n    variant?: ChipVariant;\n\n    /**\n     * Determines the style of the start element.\n     */\n    startElementVariant?: ChipStartElementVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,OAAZ,CAAnB;AAGP,OAAO,MAAMC,SAAS,GAAG,CAAC,OAAD,EAAU,OAAV,CAAlB;AAGP,OAAO,MAAMC,wBAAwB,GAAG,CAAC,SAAD,EAAY,QAAZ,EAAsB,OAAtB,EAA+B,MAA/B,CAAjC;AAGP,OAAO,MAAMC,YAAY,GAAG,CAAC,QAAD,EAAW,UAAX,CAArB"}

package/build/module/Chip/index.js

@@ -1,3 +1,3 @@
 export { default } from './Chip';
-export { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';
+export { chipColors, chipSizes, chipStartElementVariants, chipVariants } from './ChipProps';
 //# sourceMappingURL=index.js.map

package/build/module/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","chipColors","chipSizes","chipStartElementVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Chip';\nexport type { default as ChipProps } from './ChipProps';\nexport { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB;AAEA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,wBAAhC,QAAgE,aAAhE"}
+{"version":3,"names":["default","chipColors","chipSizes","chipStartElementVariants","chipVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Chip';\nexport type { default as ChipProps, ChipVariant } from './ChipProps';\nexport { chipColors, chipSizes, chipStartElementVariants, chipVariants } from './ChipProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB;AAEA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,wBAAhC,EAA0DC,YAA1D,QAA8E,aAA9E"}

package/build/module/Chip/useChipStyle.js

@@ -22,26 +22,33 @@ const closeIconSize = {
 }; // TODO: need to refactoring...
 
 export default function useChipStyle(size, startElementVariant, color, selected) {
+  let variant = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'filled';
   const theme = useTheme();
   return useMemo(() => {
     var _variantStyleMap$star, _variantStyleMap$star2, _variantStyleMap$star3;
 
+    const isOutlined = variant === 'outlined';
+    const textColor = selected ? theme.palette.text.strongInverse : isOutlined ? theme.palette.text.base : theme.palette.text.strong;
     const fontStyleMap = {
       small: createFontStyle(theme, {
         selector: typography => typography.caption1.medium,
-        color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+        color: textColor
       }),
       large: createFontStyle(theme, {
         selector: typography => typography.body2.medium,
-        color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+        color: textColor
       })
     };
     const baseContainerStyle = {
       alignItems: 'center',
-      backgroundColor: selected ? theme.palette.fill.base : color === 'white' ? theme.palette.surface.base : theme.palette.fill.weaker,
+      backgroundColor: selected ? theme.palette.fill.base : isOutlined ? 'transparent' : color === 'white' ? theme.palette.surface.base : theme.palette.fill.weaker,
       borderRadius: theme.shape.radius.full,
       flexDirection: 'row',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      ...(isOutlined && {
+        borderWidth: 1,
+        borderColor: theme.palette.border.weak
+      })
     };
     const isLarge = size === 'large';
     const variantStyleMap = {
@@ -115,6 +122,6 @@ export default function useChipStyle(size, startElementVariant, color, selected)
       startElement: (_variantStyleMap$star2 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star2 === void 0 ? void 0 : _variantStyleMap$star2.startElement,
       startElementContainer: (_variantStyleMap$star3 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star3 === void 0 ? void 0 : _variantStyleMap$star3.startElementContainer
     };
-  }, [theme, size, startElementVariant, color, selected]);
+  }, [theme, size, startElementVariant, color, selected, variant]);
 }
 //# sourceMappingURL=useChipStyle.js.map

package/build/module/Chip/useChipStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","createFontStyle","useTheme","closeButtonContainerStyleMap","small","marginLeft","paddingTop","large","closeIconSize","height","width","useChipStyle","size","startElementVariant","color","selected","theme","fontStyleMap","selector","typography","caption1","medium","palette","text","strongInverse","strong","body2","baseContainerStyle","alignItems","backgroundColor","fill","base","surface","weaker","borderRadius","shape","radius","full","flexDirection","overflow","isLarge","variantStyleMap","avatar","container","paddingLeft","spacing","paddingRight","paddingVertical","startElement","startElementContainer","marginRight","icon","justifyContent","image","default","paddingBottom","closeButtonContainer","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport type { SvgIconProps } from '../SvgIcon';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    closeButtonContainer?: FountainUiStyle;\n    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n    startElementContainer?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\nconst closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {\n    small: {\n        marginLeft: 8,\n        paddingTop: 1,\n    },\n    large: {\n        marginLeft: 10,\n        paddingTop: 1,\n    },\n};\n\nconst closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {\n    small: {\n        height: 14,\n        width: 8.17,\n    },\n    large: {\n        height: 16,\n        width: 9,\n    },\n};\n\n// TODO: need to refactoring...\nexport default function useChipStyle(\n    size: ChipSize,\n    startElementVariant: ChipStartElementVariant,\n    color: ChipColor,\n    selected: boolean,\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                selector: (typography) => typography.caption1.medium,\n                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,\n            }),\n            large: createFontStyle(theme, {\n                selector: (typography) => typography.body2.medium,\n                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,\n            }),\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: selected ? theme.palette.fill.base\n                : color === 'white'\n                    ? theme.palette.surface.base\n                    : theme.palette.fill.weaker,\n            borderRadius: theme.shape.radius.full,\n            flexDirection: 'row',\n            overflow: 'hidden',\n        };\n\n        const isLarge = size === 'large';\n\n        const variantStyleMap: VariantStyleMap = {\n            avatar: {\n                container: {\n                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 26 : 23,\n                    width: isLarge ? 26 : 23,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n            },\n            icon: {\n                container: {\n                    paddingLeft: theme.spacing(1.5),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n                startElement: {\n                    color: selected\n                        ? theme.palette.icon.strongInverse\n                        : theme.palette.icon.strong,\n                    height: isLarge ? 17 : 16,\n                    width: isLarge ? 17 : 16,\n                },\n                startElementContainer: {\n                    alignItems: 'center',\n                    height: isLarge ? 24 : 21,\n                    justifyContent: 'center',\n                    marginRight: theme.spacing(isLarge ? 1 : 0.75),\n                    width: isLarge ? 24 : 21,\n                },\n            },\n            image: {\n                container: {\n                    alignItems: 'center',\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 36 : 31,\n                    width: isLarge ? 48 : 40,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(1.5),\n                },\n            },\n            default: {\n                container: {\n                    paddingBottom: theme.spacing(1.75),\n                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingTop: theme.spacing(1.5),\n                },\n            },\n        };\n\n        return {\n            container: {\n                ...baseContainerStyle,\n                ...variantStyleMap[startElementVariant]?.container,\n                ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),\n            },\n            closeButtonContainer: closeButtonContainerStyleMap[size],\n            closeIconSize: closeIconSize[size],\n            label: fontStyleMap[size],\n            startElement: variantStyleMap[startElementVariant]?.startElement,\n            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,\n        };\n    }, [theme, size, startElementVariant, color, selected]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","createFontStyle","useTheme","closeButtonContainerStyleMap","small","marginLeft","paddingTop","large","closeIconSize","height","width","useChipStyle","size","startElementVariant","color","selected","variant","theme","isOutlined","textColor","palette","text","strongInverse","base","strong","fontStyleMap","selector","typography","caption1","medium","body2","baseContainerStyle","alignItems","backgroundColor","fill","surface","weaker","borderRadius","shape","radius","full","flexDirection","overflow","borderWidth","borderColor","border","weak","isLarge","variantStyleMap","avatar","container","paddingLeft","spacing","paddingRight","paddingVertical","startElement","startElementContainer","marginRight","icon","justifyContent","image","default","paddingBottom","closeButtonContainer","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport type { SvgIconProps } from '../SvgIcon';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipColor, ChipSize, ChipStartElementVariant, ChipVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    closeButtonContainer?: FountainUiStyle;\n    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n    startElementContainer?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\nconst closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {\n    small: {\n        marginLeft: 8,\n        paddingTop: 1,\n    },\n    large: {\n        marginLeft: 10,\n        paddingTop: 1,\n    },\n};\n\nconst closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {\n    small: {\n        height: 14,\n        width: 8.17,\n    },\n    large: {\n        height: 16,\n        width: 9,\n    },\n};\n\n// TODO: need to refactoring...\nexport default function useChipStyle(\n    size: ChipSize,\n    startElementVariant: ChipStartElementVariant,\n    color: ChipColor,\n    selected: boolean,\n    variant: ChipVariant = 'filled',\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const isOutlined = variant === 'outlined';\n\n        const textColor = selected\n            ? theme.palette.text.strongInverse\n            : isOutlined\n                ? theme.palette.text.base\n                : theme.palette.text.strong;\n\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                selector: (typography) => typography.caption1.medium,\n                color: textColor,\n            }),\n            large: createFontStyle(theme, {\n                selector: (typography) => typography.body2.medium,\n                color: textColor,\n            }),\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: selected\n                ? theme.palette.fill.base\n                : isOutlined\n                    ? 'transparent'\n                    : color === 'white'\n                        ? theme.palette.surface.base\n                        : theme.palette.fill.weaker,\n            borderRadius: theme.shape.radius.full,\n            flexDirection: 'row',\n            overflow: 'hidden',\n            ...(isOutlined && {\n                borderWidth: 1,\n                borderColor: theme.palette.border.weak,\n            }),\n        };\n\n        const isLarge = size === 'large';\n\n        const variantStyleMap: VariantStyleMap = {\n            avatar: {\n                container: {\n                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 26 : 23,\n                    width: isLarge ? 26 : 23,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n            },\n            icon: {\n                container: {\n                    paddingLeft: theme.spacing(1.5),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n                startElement: {\n                    color: selected\n                        ? theme.palette.icon.strongInverse\n                        : theme.palette.icon.strong,\n                    height: isLarge ? 17 : 16,\n                    width: isLarge ? 17 : 16,\n                },\n                startElementContainer: {\n                    alignItems: 'center',\n                    height: isLarge ? 24 : 21,\n                    justifyContent: 'center',\n                    marginRight: theme.spacing(isLarge ? 1 : 0.75),\n                    width: isLarge ? 24 : 21,\n                },\n            },\n            image: {\n                container: {\n                    alignItems: 'center',\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 36 : 31,\n                    width: isLarge ? 48 : 40,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(1.5),\n                },\n            },\n            default: {\n                container: {\n                    paddingBottom: theme.spacing(1.75),\n                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingTop: theme.spacing(1.5),\n                },\n            },\n        };\n\n        return {\n            container: {\n                ...baseContainerStyle,\n                ...variantStyleMap[startElementVariant]?.container,\n                ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),\n            },\n            closeButtonContainer: closeButtonContainerStyleMap[size],\n            closeIconSize: closeIconSize[size],\n            label: fontStyleMap[size],\n            startElement: variantStyleMap[startElementVariant]?.startElement,\n            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,\n        };\n    }, [theme, size, startElementVariant, color, selected, variant]);\n}\n"],"mappings":"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"}

package/build/module/Radio/Radio.js

@@ -56,12 +56,11 @@ export default function Radio(props) {
     }
   };
 
-  const isChecked = (context === null || context === void 0 ? void 0 : context.value) === value ?? checked;
+  const isChecked = context ? context.value === value : checked;
   const defaultCheckedIcon = /*#__PURE__*/React.createElement(CheckedIcon, {
     color: 'accent'
   });
   const checkedIcon = checkIconProp ?? defaultCheckedIcon;
-  const icon = isChecked ? checkedIcon : null;
   const startIcon = cloneElementSafely(startIconProp, {
     color: 'strong',
     height: DEFAULT_START_ICON_SIZE,
@@ -90,7 +89,11 @@ export default function Radio(props) {
     color: 'base',
     weight: 'regular',
     children: description
-  }) : null), icon);
+  }) : null), /*#__PURE__*/React.createElement(Column, {
+    style: {
+      opacity: Number(isChecked)
+    }
+  }, checkedIcon));
 }
 ;
 //# sourceMappingURL=Radio.js.map

package/build/module/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","Text","ButtonBase","Column","Check","CheckedIcon","Row","createFontStyle","css","useTheme","cloneElementSafely","RadioContext","Typography","DEFAULT_START_ICON_SIZE","useStyles","theme","root","alignItems","borderBottomColor","palette","border","weak","borderBottomWidth","flexDirection","gap","justifyContent","paddingVertical","content","minHeight","Radio","props","checked","children","checkedIcon","checkIconProp","disabled","onChange","onChangeProp","startIcon","startIconProp","style","value","description","otherProps","styles","context","handlePress","isChecked","defaultCheckedIcon","icon","color","height","width","rootStyle","fontStyle","selector","typography","body1","regular","text","strong"],"sources":["Radio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport { Check as CheckedIcon } from '../internal';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\nimport Typography from '../Typography';\n\nconst DEFAULT_START_ICON_SIZE = 21;\n\ntype RadioStyles = NamedStylesStringUnion<'root' | 'content'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n            flexDirection: 'row',\n            gap: 32,\n            justifyContent: 'space-between',\n            paddingVertical: 14,\n        },\n        content: {\n            gap: 8,\n            minHeight: 20,\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        checkedIcon: checkIconProp,\n        disabled = false,\n        onChange: onChangeProp,\n        startIcon: startIconProp,\n        style,\n        value,\n        description,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const context = useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const defaultCheckedIcon = (\n        <CheckedIcon color={'accent'}/>\n    );\n\n    const checkedIcon = checkIconProp ?? defaultCheckedIcon;\n    const icon = isChecked ? checkedIcon : null;\n\n    const startIcon = cloneElementSafely(startIconProp, {\n        color: 'strong',\n        height: DEFAULT_START_ICON_SIZE,\n        width: DEFAULT_START_ICON_SIZE,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body1.regular,\n        color: theme.palette.text.strong,\n    });\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Column\n                gap={2}\n                flexShrink={1}\n            >\n                <Row\n                    alignItems={'center'}\n                    style={styles.content}\n                >\n                    {startIcon}\n\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n\n                {description ? (\n                    <Typography\n                        variant={'body3'}\n                        color={'base'}\n                        weight={'regular'}\n                        children={description}\n                    />\n                ) : null}\n            </Column>\n\n            {icon}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useContext","Text","ButtonBase","Column","Check","CheckedIcon","Row","createFontStyle","css","useTheme","cloneElementSafely","RadioContext","Typography","DEFAULT_START_ICON_SIZE","useStyles","theme","root","alignItems","borderBottomColor","palette","border","weak","borderBottomWidth","flexDirection","gap","justifyContent","paddingVertical","content","minHeight","Radio","props","checked","children","checkedIcon","checkIconProp","disabled","onChange","onChangeProp","startIcon","startIconProp","style","value","description","otherProps","styles","context","handlePress","isChecked","defaultCheckedIcon","color","height","width","rootStyle","fontStyle","selector","typography","body1","regular","text","strong","opacity","Number"],"sources":["Radio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport { Check as CheckedIcon } from '../internal';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\nimport Typography from '../Typography';\n\nconst DEFAULT_START_ICON_SIZE = 21;\n\ntype RadioStyles = NamedStylesStringUnion<'root' | 'content'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n            flexDirection: 'row',\n            gap: 32,\n            justifyContent: 'space-between',\n            paddingVertical: 14,\n        },\n        content: {\n            gap: 8,\n            minHeight: 20,\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        checkedIcon: checkIconProp,\n        disabled = false,\n        onChange: onChangeProp,\n        startIcon: startIconProp,\n        style,\n        value,\n        description,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const context = useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context\n        ? context.value === value\n        : checked;\n\n    const defaultCheckedIcon = (\n        <CheckedIcon color={'accent'}/>\n    );\n\n    const checkedIcon = checkIconProp ?? defaultCheckedIcon;\n\n    const startIcon = cloneElementSafely(startIconProp, {\n        color: 'strong',\n        height: DEFAULT_START_ICON_SIZE,\n        width: DEFAULT_START_ICON_SIZE,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body1.regular,\n        color: theme.palette.text.strong,\n    });\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Column\n                gap={2}\n                flexShrink={1}\n            >\n                <Row\n                    alignItems={'center'}\n                    style={styles.content}\n                >\n                    {startIcon}\n\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n\n                {description ? (\n                    <Typography\n                        variant={'body3'}\n                        color={'base'}\n                        weight={'regular'}\n                        children={description}\n                    />\n                ) : null}\n            </Column>\n\n            <Column style={{ opacity: Number(isChecked) }}>\n                {checkedIcon}\n            </Column>\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}

package/build/typescript/Chip/ChipProps.d.ts

@@ -7,6 +7,8 @@ export declare const chipSizes: readonly ["large", "small"];
 export declare type ChipSize = typeof chipSizes[number];
 export declare const chipStartElementVariants: readonly ["default", "avatar", "image", "icon"];
 export declare type ChipStartElementVariant = typeof chipStartElementVariants[number];
+export declare const chipVariants: readonly ["filled", "outlined"];
+export declare type ChipVariant = typeof chipVariants[number];
 export default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {
     /**
      * The content of the component.
@@ -34,6 +36,11 @@ export default interface ChipProps extends OverridableComponentProps<ButtonBaseP
      * Element placed before the children.
      */
     startElement?: React.ReactElement;
+    /**
+     * Determines the visual style of the component.
+     * @default 'filled'
+     */
+    variant?: ChipVariant;
     /**
      * Determines the style of the start element.
      */

package/build/typescript/Chip/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './Chip';
-export type { default as ChipProps } from './ChipProps';
-export { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';
+export type { default as ChipProps, ChipVariant } from './ChipProps';
+export { chipColors, chipSizes, chipStartElementVariants, chipVariants } from './ChipProps';

package/build/typescript/Chip/useChipStyle.d.ts

@@ -1,7 +1,7 @@
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import type { SvgIconProps } from '../SvgIcon';
-import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
+import type { ChipColor, ChipSize, ChipStartElementVariant, ChipVariant } from './ChipProps';
 interface ChipStyle {
     container: FountainUiStyle;
     closeButtonContainer?: FountainUiStyle;
@@ -10,5 +10,5 @@ interface ChipStyle {
     startElement?: FountainUiStyle;
     startElementContainer?: FountainUiStyle;
 }
-export default function useChipStyle(size: ChipSize, startElementVariant: ChipStartElementVariant, color: ChipColor, selected: boolean): ChipStyle;
+export default function useChipStyle(size: ChipSize, startElementVariant: ChipStartElementVariant, color: ChipColor, selected: boolean, variant?: ChipVariant): ChipStyle;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.46",
+  "version": "3.0.0-alpha.47",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6b35ac6d8d2ecdf422e4159b21379259c298b867"
+  "gitHead": "b478e97e8323697e6e21635b36779fb3b7530dc9"
 }

package/src/Chip/Chip.tsx

@@ -19,9 +19,12 @@ export default function Chip(props: ChipProps) {
         startElement: startElementProp,
         startElementVariant = 'default',
         style: styleProp,
+        variant = 'filled',
         ...otherProps
     } = props;
 
+    const isSelected = variant === 'outlined' ? false : selected;
+
     const {
         container: containerStyle,
         closeButtonContainer: closeButtonContainerStyle,
@@ -29,7 +32,7 @@ export default function Chip(props: ChipProps) {
         label: labelStyle,
         startElement: startElementStyle,
         startElementContainer: startElementContainerStyle,
-    } = useChipStyle(size, startElementVariant, color, selected);
+    } = useChipStyle(size, startElementVariant, color, isSelected, variant);
 
     const chipStyle = css([
         containerStyle,
@@ -57,7 +60,7 @@ export default function Chip(props: ChipProps) {
                 style={labelStyle}
             />
 
-            {selected ? (
+            {isSelected ? (
                 <View style={closeButtonContainerStyle}>
                     <ChipClose
                         color={'baseInverse'}

package/src/Chip/ChipProps.ts

@@ -11,6 +11,9 @@ export type ChipSize = typeof chipSizes[number];
 export const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'] as const;
 export type ChipStartElementVariant = typeof chipStartElementVariants[number];
 
+export const chipVariants = ['filled', 'outlined'] as const;
+export type ChipVariant = typeof chipVariants[number];
+
 export default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {
     /**
      * The content of the component.
@@ -44,6 +47,12 @@ export default interface ChipProps extends OverridableComponentProps<ButtonBaseP
      */
     startElement?: React.ReactElement;
 
+    /**
+     * Determines the visual style of the component.
+     * @default 'filled'
+     */
+    variant?: ChipVariant;
+
     /**
      * Determines the style of the start element.
      */

package/src/Chip/index.ts

@@ -1,3 +1,3 @@
 export { default } from './Chip';
-export type { default as ChipProps } from './ChipProps';
-export { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';
+export type { default as ChipProps, ChipVariant } from './ChipProps';
+export { chipColors, chipSizes, chipStartElementVariants, chipVariants } from './ChipProps';

package/src/Chip/useChipStyle.ts

@@ -3,7 +3,7 @@ import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import type { SvgIconProps } from '../SvgIcon';
 import { createFontStyle, useTheme } from '../styles';
-import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
+import type { ChipColor, ChipSize, ChipStartElementVariant, ChipVariant } from './ChipProps';
 
 interface ChipStyle {
     container: FountainUiStyle;
@@ -44,30 +44,46 @@ export default function useChipStyle(
     startElementVariant: ChipStartElementVariant,
     color: ChipColor,
     selected: boolean,
+    variant: ChipVariant = 'filled',
 ): ChipStyle {
     const theme = useTheme();
 
     return useMemo<ChipStyle>(() => {
+        const isOutlined = variant === 'outlined';
+
+        const textColor = selected
+            ? theme.palette.text.strongInverse
+            : isOutlined
+                ? theme.palette.text.base
+                : theme.palette.text.strong;
+
         const fontStyleMap: Record<ChipSize, TextStyle> = {
             small: createFontStyle(theme, {
                 selector: (typography) => typography.caption1.medium,
-                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
+                color: textColor,
             }),
             large: createFontStyle(theme, {
                 selector: (typography) => typography.body2.medium,
-                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
+                color: textColor,
             }),
         };
 
         const baseContainerStyle: FountainUiStyle = {
             alignItems: 'center',
-            backgroundColor: selected ? theme.palette.fill.base
-                : color === 'white'
-                    ? theme.palette.surface.base
-                    : theme.palette.fill.weaker,
+            backgroundColor: selected
+                ? theme.palette.fill.base
+                : isOutlined
+                    ? 'transparent'
+                    : color === 'white'
+                        ? theme.palette.surface.base
+                        : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
             flexDirection: 'row',
             overflow: 'hidden',
+            ...(isOutlined && {
+                borderWidth: 1,
+                borderColor: theme.palette.border.weak,
+            }),
         };
 
         const isLarge = size === 'large';
@@ -145,5 +161,5 @@ export default function useChipStyle(
             startElement: variantStyleMap[startElementVariant]?.startElement,
             startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,
         };
-    }, [theme, size, startElementVariant, color, selected]);
+    }, [theme, size, startElementVariant, color, selected, variant]);
 }

package/src/Radio/Radio.tsx

@@ -62,14 +62,15 @@ export default function Radio(props: RadioProps) {
         }
     };
 
-    const isChecked = context?.value === value ?? checked;
+    const isChecked = context
+        ? context.value === value
+        : checked;
 
     const defaultCheckedIcon = (
         <CheckedIcon color={'accent'}/>
     );
 
     const checkedIcon = checkIconProp ?? defaultCheckedIcon;
-    const icon = isChecked ? checkedIcon : null;
 
     const startIcon = cloneElementSafely(startIconProp, {
         color: 'strong',
@@ -120,7 +121,9 @@ export default function Radio(props: RadioProps) {
                 ) : null}
             </Column>
 
-            {icon}
+            <Column style={{ opacity: Number(isChecked) }}>
+                {checkedIcon}
+            </Column>
         </ButtonBase>
     );
 };