@fountain-ui/core 3.0.0-alpha.16 → 3.0.0-alpha.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/build/commonjs/Tab/Tab.js +6 -3
  2. package/build/commonjs/Tab/Tab.js.map +1 -1
  3. package/build/commonjs/Tab/useVariantStyleMap.js +8 -5
  4. package/build/commonjs/Tab/useVariantStyleMap.js.map +1 -1
  5. package/build/commonjs/Tabs/useTabsStyle.js +1 -1
  6. package/build/commonjs/Tabs/useTabsStyle.js.map +1 -1
  7. package/build/commonjs/TextField/useVariantStyleMap.js +2 -1
  8. package/build/commonjs/TextField/useVariantStyleMap.js.map +1 -1
  9. package/build/module/Tab/Tab.js +6 -3
  10. package/build/module/Tab/Tab.js.map +1 -1
  11. package/build/module/Tab/useVariantStyleMap.js +8 -5
  12. package/build/module/Tab/useVariantStyleMap.js.map +1 -1
  13. package/build/module/Tabs/useTabsStyle.js +1 -1
  14. package/build/module/Tabs/useTabsStyle.js.map +1 -1
  15. package/build/module/TextField/useVariantStyleMap.js +2 -1
  16. package/build/module/TextField/useVariantStyleMap.js.map +1 -1
  17. package/build/typescript/Tab/useVariantStyleMap.d.ts +1 -0
  18. package/package.json +2 -2
  19. package/src/Tab/Tab.tsx +6 -3
  20. package/src/Tab/useVariantStyleMap.ts +9 -5
  21. package/src/Tabs/useTabsStyle.ts +1 -1
  22. package/src/TextField/useVariantStyleMap.ts +2 -1
package/build/commonjs/Tab/Tab.js CHANGED
@@ -51,6 +51,7 @@ function Tab(props) {
51
51
  } = props;
52
52
  const {
53
53
  container: containerStyle,
54
+ iconContainer: iconContainerStyle,
54
55
  inner: innerStyle,
55
56
  label: labelStyle
56
57
  } = (0, _useVariantStyleMap.default)(variant, selected, size);
@@ -61,10 +62,12 @@ function Tab(props) {
61
62
  const tabElement = typeof children !== 'string' ? (0, _utils.cloneElementSafely)(children, {
62
63
  selected
63
64
  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconElement ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Badge.default, {
64
- horizontalOffset: -6,
65
+ horizontalOffset: -4,
65
66
  invisible: !badgeVisible,
66
- verticalOffset: -4.5
67
- }, iconElement), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
67
+ verticalOffset: -4
68
+ }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
69
+ style: iconContainerStyle
70
+ }, iconElement)), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
68
71
  style: (0, _styles.css)(labelStyle)
69
72
  }, children)) : /*#__PURE__*/_react.default.createElement(_Badge.default, {
70
73
  horizontalOffset: -7,
package/build/commonjs/Tab/Tab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","size","variant","style","styleProp","onTabInnerLayout","otherProps","container","containerStyle","inner","innerStyle","label","labelStyle","useVariantStyleMap","tabBaseStyle","css","tabInnerStyle","iconElement","cloneElementSafely","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabSize, TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n },\n filledInner: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n selected = false,\n selectedIcon,\n size = 'medium' as TabSize,\n variant = 'default' as TabVariant,\n style: styleProp,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const {\n container: containerStyle,\n inner: innerStyle,\n label: labelStyle,\n } = useVariantStyleMap(variant, selected, size);\n\n const tabBaseStyle = css([\n styles.root,\n containerStyle,\n styleProp,\n ]);\n\n const tabInnerStyle = css([\n styles.filledInner,\n innerStyle,\n ]);\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconElement = cloneElementSafely(icon);\n\n const tabElement = typeof children !== 'string' ? (\n cloneElementSafely(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n {iconElement ? (\n <React.Fragment>\n <Badge\n horizontalOffset={-6}\n invisible={!badgeVisible}\n verticalOffset={-4.5}\n >\n {iconElement}\n </Badge>\n\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </React.Fragment>\n ) : (\n <Badge\n horizontalOffset={-7}\n invisible={!badgeVisible}\n verticalOffset={3}\n >\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </Badge>\n )}\n </React.Fragment>\n );\n\n return (\n <TabBase\n style={tabBaseStyle}\n {...otherProps}\n >\n <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n {tabElement}\n </View>\n </TabBase>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;;AAWe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,IAAI,GAAG,QAPL;IAQFC,OAAO,GAAG,SARR;IASFC,KAAK,EAAEC,SATL;IAUFC,gBAVE;IAWF,GAAGC;EAXD,IAYFb,KAZJ;EAcA,MAAM;IACFc,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF,IAAAC,2BAAA,EAAmBX,OAAnB,EAA4BH,QAA5B,EAAsCE,IAAtC,CAJJ;EAMA,MAAMa,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBjC,MAAM,CAACG,IADc,EAErBuB,cAFqB,EAGrBJ,SAHqB,CAAJ,CAArB;EAMA,MAAMY,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBjC,MAAM,CAACO,WADe,EAEtBqB,UAFsB,CAAJ,CAAtB;EAKA,MAAMb,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMmB,WAAW,GAAG,IAAAC,yBAAA,EAAmBrB,IAAnB,CAApB;EAEA,MAAMsB,UAAU,GAAG,OAAOxB,QAAP,KAAoB,QAApB,GACf,IAAAuB,yBAAA,EAAmBvB,QAAnB,EAA6B;IACzBI;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKkB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACvB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,GAKKuB,WALL,CADJ,eASI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAF,WAAA,EAAIH,UAAJ;EAAb,GACKjB,QADL,CATJ,CADQ,gBAeR,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAqB,WAAA,EAAIH,UAAJ;EAAb,GACKjB,QADL,CALJ,CAhBR,CALJ;EAkCA,oBACI,6BAAC,gBAAD;IACI,KAAK,EAAEmB;EADX,GAEQR,UAFR,gBAII,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEW;EAAzC,GACKG,UADL,CAJJ,CADJ;AAUH;;AAAA"}
1
+ {"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","size","variant","style","styleProp","onTabInnerLayout","otherProps","container","containerStyle","iconContainer","iconContainerStyle","inner","innerStyle","label","labelStyle","useVariantStyleMap","tabBaseStyle","css","tabInnerStyle","iconElement","cloneElementSafely","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabSize, TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n },\n filledInner: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n selected = false,\n selectedIcon,\n size = 'medium' as TabSize,\n variant = 'default' as TabVariant,\n style: styleProp,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const {\n container: containerStyle,\n iconContainer: iconContainerStyle,\n inner: innerStyle,\n label: labelStyle,\n } = useVariantStyleMap(variant, selected, size);\n\n const tabBaseStyle = css([\n styles.root,\n containerStyle,\n styleProp,\n ]);\n\n const tabInnerStyle = css([\n styles.filledInner,\n innerStyle,\n ]);\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconElement = cloneElementSafely(icon);\n\n const tabElement = typeof children !== 'string' ? (\n cloneElementSafely(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n {iconElement ? (\n <React.Fragment>\n <Badge\n horizontalOffset={-4}\n invisible={!badgeVisible}\n verticalOffset={-4}\n >\n <View style={iconContainerStyle}>\n {iconElement}\n </View>\n </Badge>\n\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </React.Fragment>\n ) : (\n <Badge\n horizontalOffset={-7}\n invisible={!badgeVisible}\n verticalOffset={3}\n >\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </Badge>\n )}\n </React.Fragment>\n );\n\n return (\n <TabBase\n style={tabBaseStyle}\n {...otherProps}\n >\n <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n {tabElement}\n </View>\n </TabBase>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;;AAWe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,IAAI,GAAG,QAPL;IAQFC,OAAO,GAAG,SARR;IASFC,KAAK,EAAEC,SATL;IAUFC,gBAVE;IAWF,GAAGC;EAXD,IAYFb,KAZJ;EAcA,MAAM;IACFc,SAAS,EAAEC,cADT;IAEFC,aAAa,EAAEC,kBAFb;IAGFC,KAAK,EAAEC,UAHL;IAIFC,KAAK,EAAEC;EAJL,IAKF,IAAAC,2BAAA,EAAmBb,OAAnB,EAA4BH,QAA5B,EAAsCE,IAAtC,CALJ;EAOA,MAAMe,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBnC,MAAM,CAACG,IADc,EAErBuB,cAFqB,EAGrBJ,SAHqB,CAAJ,CAArB;EAMA,MAAMc,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBnC,MAAM,CAACO,WADe,EAEtBuB,UAFsB,CAAJ,CAAtB;EAKA,MAAMf,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMqB,WAAW,GAAG,IAAAC,yBAAA,EAAmBvB,IAAnB,CAApB;EAEA,MAAMwB,UAAU,GAAG,OAAO1B,QAAP,KAAoB,QAApB,GACf,IAAAyB,yBAAA,EAAmBzB,QAAnB,EAA6B;IACzBI;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKoB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACzB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAEgB;EAAb,GACKS,WADL,CALJ,CADJ,eAWI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAF,WAAA,EAAIH,UAAJ;EAAb,GACKnB,QADL,CAXJ,CADQ,gBAiBR,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAuB,WAAA,EAAIH,UAAJ;EAAb,GACKnB,QADL,CALJ,CAlBR,CALJ;EAoCA,oBACI,6BAAC,gBAAD;IACI,KAAK,EAAEqB;EADX,GAEQV,UAFR,gBAII,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEa;EAAzC,GACKG,UADL,CAJJ,CADJ;AAUH;;AAAA"}
package/build/commonjs/Tab/useVariantStyleMap.js CHANGED
@@ -44,8 +44,8 @@ function useVariantStyleMap(variant, selected, size) {
44
44
  case 'circular-home':
45
45
  return {
46
46
  container: {
47
- paddingHorizontal: theme.spacing(0.75),
48
- paddingVertical: theme.spacing(1)
47
+ paddingBottom: 4,
48
+ paddingHorizontal: 3
49
49
  },
50
50
  inner: {
51
51
  backgroundColor: selected ? theme.palette.fill.base : theme.palette.surface.base,
@@ -78,16 +78,19 @@ function useVariantStyleMap(variant, selected, size) {
78
78
  paddingTop: 10.5,
79
79
  width: 48
80
80
  },
81
+ iconContainer: {
82
+ padding: 0.75
83
+ },
81
84
  inner: {
82
85
  flexDirection: 'column',
83
86
  gap: 4.75
84
87
  },
85
88
  label: (0, _styles2.createFontStyle)(theme, {
86
89
  selector: _ => (0, _styles.typographyOf)({
87
- fontSize: 10,
88
- lineHeight: 10,
90
+ fontSize: 10.5,
91
+ lineHeight: 10.5,
89
92
  fontFamily: 'PretendardStd-Medium',
90
- letterSpacing: -0.1
93
+ letterSpacing: -0.105
91
94
  }),
92
95
  color: selected ? theme.palette.text.strong : theme.palette.text.base
93
96
  })
package/build/commonjs/Tab/useVariantStyleMap.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useVariantStyleMap","variant","selected","size","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","width","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n container: FountainUiStyle;\n inner?: FountainUiStyle;\n label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {\n const theme = useTheme();\n\n return useMemo<VariantStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingHorizontal: theme.spacing(0.75),\n paddingVertical: theme.spacing(1),\n },\n inner: {\n backgroundColor: selected\n ? theme.palette.fill.base\n : theme.palette.fill.weaker,\n borderRadius: theme.shape.radius.full,\n flexDirection: 'row',\n gap: 5,\n paddingBottom: 7.5,\n paddingHorizontal: 14,\n paddingTop: 6.5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: size === 'small' ? 14 : 15,\n lineHeight: size === 'small' ? 18.2 : 19.5,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strongInverse\n : theme.palette.text.base,\n }),\n };\n case 'circular-home':\n return {\n container: {\n paddingHorizontal: theme.spacing(0.75),\n paddingVertical: theme.spacing(1),\n },\n inner: {\n backgroundColor: selected\n ? theme.palette.fill.base\n : theme.palette.surface.base,\n borderRadius: theme.shape.radius.full,\n borderWidth: selected ? undefined : 0.5,\n borderColor: selected ? undefined : theme.palette.border.weak,\n flexDirection: 'row',\n gap: 5,\n paddingBottom: 6.5,\n paddingHorizontal: 14,\n paddingVertical: 7.5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 15,\n lineHeight: 19.5,\n fontFamily: 'LexendDeca-Medium',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strongInverse\n : theme.palette.text.base,\n }),\n };\n case 'bottom-navigation':\n return {\n container: {\n alignItems: 'center',\n height: 49,\n justifyContent: 'flex-start',\n paddingTop: 10.5,\n width: 48,\n },\n inner: {\n flexDirection: 'column',\n gap: 4.75,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 10,\n lineHeight: 10,\n fontFamily: 'PretendardStd-Medium',\n letterSpacing: -0.1,\n }),\n color: selected\n ? theme.palette.text.strong\n : theme.palette.text.base,\n }),\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: 10,\n },\n inner: {\n flexDirection: 'row',\n gap: 5,\n paddingHorizontal: 1,\n paddingVertical: 10,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: size === 'small' ? 15 : 16,\n lineHeight: size === 'small' ? 18.75 : 20,\n fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strong\n : theme.palette.text.base,\n }),\n };\n }\n }, [theme, variant, selected, size]);\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["useVariantStyleMap","variant","selected","size","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","width","iconContainer","padding","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n container: FountainUiStyle;\n iconContainer?: FountainUiStyle;\n inner?: FountainUiStyle;\n label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {\n const theme = useTheme();\n\n return useMemo<VariantStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingHorizontal: theme.spacing(0.75),\n paddingVertical: theme.spacing(1),\n },\n inner: {\n backgroundColor: selected\n ? theme.palette.fill.base\n : theme.palette.fill.weaker,\n borderRadius: theme.shape.radius.full,\n flexDirection: 'row',\n gap: 5,\n paddingBottom: 7.5,\n paddingHorizontal: 14,\n paddingTop: 6.5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: size === 'small' ? 14 : 15,\n lineHeight: size === 'small' ? 18.2 : 19.5,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strongInverse\n : theme.palette.text.base,\n }),\n };\n case 'circular-home':\n return {\n container: {\n paddingBottom: 4,\n paddingHorizontal: 3,\n },\n inner: {\n backgroundColor: selected\n ? theme.palette.fill.base\n : theme.palette.surface.base,\n borderRadius: theme.shape.radius.full,\n borderWidth: selected ? undefined : 0.5,\n borderColor: selected ? undefined : theme.palette.border.weak,\n flexDirection: 'row',\n gap: 5,\n paddingBottom: 6.5,\n paddingHorizontal: 14,\n paddingVertical: 7.5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 15,\n lineHeight: 19.5,\n fontFamily: 'LexendDeca-Medium',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strongInverse\n : theme.palette.text.base,\n }),\n };\n case 'bottom-navigation':\n return {\n container: {\n alignItems: 'center',\n height: 49,\n justifyContent: 'flex-start',\n paddingTop: 10.5,\n width: 48,\n },\n iconContainer: {\n padding: 0.75,\n },\n inner: {\n flexDirection: 'column',\n gap: 4.75,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 10.5,\n lineHeight: 10.5,\n fontFamily: 'PretendardStd-Medium',\n letterSpacing: -0.105,\n }),\n color: selected\n ? theme.palette.text.strong\n : theme.palette.text.base,\n }),\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: 10,\n },\n inner: {\n flexDirection: 'row',\n gap: 5,\n paddingHorizontal: 1,\n paddingVertical: 10,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: size === 'small' ? 15 : 16,\n lineHeight: size === 'small' ? 18.75 : 20,\n fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strong\n : theme.palette.text.base,\n }),\n };\n }\n }, [theme, variant, selected, size]);\n}\n"],"mappings":"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"}
package/build/commonjs/Tabs/useTabsStyle.js CHANGED
@@ -37,7 +37,7 @@ function useTabsStyle(variant, size) {
37
37
  container: {
38
38
  borderTopColor: theme.palette.border.base,
39
39
  borderTopWidth: 0.5,
40
- paddingHorizontal: 20
40
+ paddingHorizontal: 24
41
41
  }
42
42
  };
43
43
 
package/build/commonjs/Tabs/useTabsStyle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useTabsStyle","variant","size","theme","useTheme","isTablet","useBreakpointUp","useMemo","container","paddingBottom","paddingHorizontal","borderTopColor","palette","border","base","borderTopWidth"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabSize, TabVariant } from '../Tab';\n\ninterface TabsStyle {\n container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant, size: TabSize) {\n const theme = useTheme();\n\n const isTablet = useBreakpointUp('md', true, false);\n\n return useMemo<TabsStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: isTablet ? 20 : (size === 'small' ? 8 : 12),\n },\n };\n case 'circular-home':\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: isTablet ? 20 : 8,\n },\n };\n case 'bottom-navigation':\n return {\n container: {\n borderTopColor: theme.palette.border.base,\n borderTopWidth: 0.5,\n paddingHorizontal: 20,\n },\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: isTablet ? 14 : 6,\n },\n };\n }\n }, [theme, variant, isTablet, size]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAOe,SAASA,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0D;EACrE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAjB;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAC5B,QAAQN,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHO,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEL,QAAQ,GAAG,EAAH,GAASH,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB;UAFpD;QADR,CAAP;;MAMJ,KAAK,eAAL;QACI,OAAO;UACHM,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEL,QAAQ,GAAG,EAAH,GAAQ;UAF5B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPG,cAAc,EAAER,KAAK,CAACS,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;YAEPC,cAAc,EAAE,GAFT;YAGPL,iBAAiB,EAAE;UAHZ;QADR,CAAP;;MAOJ,KAAK,SAAL;MACA;QACI,OAAO;UACHF,SAAS,EAAE;YACPE,iBAAiB,EAAEL,QAAQ,GAAG,EAAH,GAAQ;UAD5B;QADR,CAAP;IAzBR;EA+BH,CAhCM,EAgCJ,CAACF,KAAD,EAAQF,OAAR,EAAiBI,QAAjB,EAA2BH,IAA3B,CAhCI,CAAP;AAiCH"}
1
+ {"version":3,"names":["useTabsStyle","variant","size","theme","useTheme","isTablet","useBreakpointUp","useMemo","container","paddingBottom","paddingHorizontal","borderTopColor","palette","border","base","borderTopWidth"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabSize, TabVariant } from '../Tab';\n\ninterface TabsStyle {\n container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant, size: TabSize) {\n const theme = useTheme();\n\n const isTablet = useBreakpointUp('md', true, false);\n\n return useMemo<TabsStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: isTablet ? 20 : (size === 'small' ? 8 : 12),\n },\n };\n case 'circular-home':\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: isTablet ? 20 : 8,\n },\n };\n case 'bottom-navigation':\n return {\n container: {\n borderTopColor: theme.palette.border.base,\n borderTopWidth: 0.5,\n paddingHorizontal: 24,\n },\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: isTablet ? 14 : 6,\n },\n };\n }\n }, [theme, variant, isTablet, size]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAOe,SAASA,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0D;EACrE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAjB;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAC5B,QAAQN,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHO,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEL,QAAQ,GAAG,EAAH,GAASH,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB;UAFpD;QADR,CAAP;;MAMJ,KAAK,eAAL;QACI,OAAO;UACHM,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEL,QAAQ,GAAG,EAAH,GAAQ;UAF5B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPG,cAAc,EAAER,KAAK,CAACS,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;YAEPC,cAAc,EAAE,GAFT;YAGPL,iBAAiB,EAAE;UAHZ;QADR,CAAP;;MAOJ,KAAK,SAAL;MACA;QACI,OAAO;UACHF,SAAS,EAAE;YACPE,iBAAiB,EAAEL,QAAQ,GAAG,EAAH,GAAQ;UAD5B;QADR,CAAP;IAzBR;EA+BH,CAhCM,EAgCJ,CAACF,KAAD,EAAQF,OAAR,EAAiBI,QAAjB,EAA2BH,IAA3B,CAhCI,CAAP;AAiCH"}
package/build/commonjs/TextField/useVariantStyleMap.js CHANGED
@@ -50,6 +50,7 @@ function useVariantStyleMap(variant, status, isFocused) {
50
50
  borderBottomWidth: 1
51
51
  },
52
52
  inputStyle: {
53
+ paddingLeft: 0,
53
54
  paddingRight: theme.spacing(4),
54
55
  paddingVertical: theme.spacing(4),
55
56
  ...(0, _styles2.createFontStyle)(theme, {
@@ -65,7 +66,7 @@ function useVariantStyleMap(variant, status, isFocused) {
65
66
  hintStyle: {
66
67
  marginTop: theme.spacing(2),
67
68
  ...(0, _styles2.createFontStyle)(theme, {
68
- // selector: (typography) => typography.caption1['regular']
69
+ selector: typography => typography.caption1['regular'],
69
70
  color: hintColor
70
71
  })
71
72
  }
package/build/commonjs/TextField/useVariantStyleMap.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingRight","spacing","paddingVertical","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingLeft","paddingBottom","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n },\n inputStyle: {\n paddingRight: theme.spacing(4),\n paddingVertical: theme.spacing(4),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n },\n hintStyle: {\n marginTop: theme.spacing(2),\n ...createFontStyle(theme, {\n // selector: (typography) => typography.caption1['regular']\n color: hintColor,\n }),\n },\n };\n case 'search':\n return {\n containerStyle: {\n backgroundColor: theme.palette.surface.supportive,\n borderColor: theme.palette.border.base,\n borderRadius: theme.shape.radius.md,\n borderWidth: 0.5,\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(0.5),\n },\n inputStyle: {\n paddingBottom: theme.spacing(2.5),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n paddingTop: theme.spacing(2.25),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 19.2,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: -0.16,\n }),\n color: theme.palette.text.strong,\n }),\n },\n };\n }\n }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingLeft","paddingRight","spacing","paddingVertical","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n },\n inputStyle: {\n paddingLeft: 0,\n paddingRight: theme.spacing(4),\n paddingVertical: theme.spacing(4),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n },\n hintStyle: {\n marginTop: theme.spacing(2),\n ...createFontStyle(theme, {\n selector: (typography) => typography.caption1['regular'],\n color: hintColor,\n }),\n },\n };\n case 'search':\n return {\n containerStyle: {\n backgroundColor: theme.palette.surface.supportive,\n borderColor: theme.palette.border.base,\n borderRadius: theme.shape.radius.md,\n borderWidth: 0.5,\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(0.5),\n },\n inputStyle: {\n paddingBottom: theme.spacing(2.5),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n paddingTop: theme.spacing(2.25),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 19.2,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: -0.16,\n }),\n color: theme.palette.text.strong,\n }),\n },\n };\n }\n }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AASA,SAASA,cAAT,CAAwBC,KAAxB,EAAsCC,MAAtC,EAA4G;EACxG,QAAQA,MAAR;IACI;IACA,KAAK,SAAL;MACI,OAAO;QACHC,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IAD/B;QAEHC,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBC;MAF3B,CAAP;;IAIJ,KAAK,SAAL;MACI,OAAO;QACHN,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBQ,OAD/B;QAEHH,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBQ;MAF7B,CAAP;;IAIJ,KAAK,OAAL;MACI,OAAO;QACHP,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBS,MAD/B;QAEHJ,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBS;MAF7B,CAAP;EAbR;AAkBH;;AAEc,SAASC,kBAAT,CAA4BC,OAA5B,EAAuDX,MAAvD,EAAgFY,SAAhF,EAAqH;EAChI,MAAMb,KAAK,GAAG,IAAAc,iBAAA,GAAd;EAEA,MAAM;IACFZ,WADE;IAEFI;EAFE,IAGFP,cAAc,CAACC,KAAD,EAAQC,MAAR,CAHlB;EAKA,OAAO,IAAAc,cAAA,EAAQ,MAAM;IACjB,QAAQH,OAAR;MACI;MACA,KAAK,SAAL;QACI,OAAO;UACHI,cAAc,EAAE;YACZC,iBAAiB,EAAEhB,MAAM,KAAK,SAAX,IAAwBY,SAAxB,GAAoCb,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBc,MAAzD,GAAkEhB,WADzE;YAEZiB,iBAAiB,EAAE;UAFP,CADb;UAKHC,UAAU,EAAE;YACRC,WAAW,EAAE,CADL;YAERC,YAAY,EAAEtB,KAAK,CAACuB,OAAN,CAAc,CAAd,CAFN;YAGRC,eAAe,EAAExB,KAAK,CAACuB,OAAN,CAAc,CAAd,CAHT;YAIR,GAAG,IAAAE,wBAAA,EAAgBzB,KAAhB,EAAuB;cACtB0B,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;gBAC1BC,QAAQ,EAAE,EADgB;gBAE1BC,UAAU,EAAE,EAFc;gBAG1BC,UAAU,EAAE,wBAHc;gBAI1BC,aAAa,EAAE;cAJW,CAAb,CADK;cAOtBC,KAAK,EAAEjC,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBW;YAPJ,CAAvB;UAJK,CALT;UAmBHgB,SAAS,EAAE;YACPC,SAAS,EAAEnC,KAAK,CAACuB,OAAN,CAAc,CAAd,CADJ;YAEP,GAAG,IAAAE,wBAAA,EAAgBzB,KAAhB,EAAuB;cACtB0B,QAAQ,EAAGU,UAAD,IAAgBA,UAAU,CAACC,QAAX,CAAoB,SAApB,CADJ;cAEtBJ,KAAK,EAAE3B;YAFe,CAAvB;UAFI;QAnBR,CAAP;;MA2BJ,KAAK,QAAL;QACI,OAAO;UACHU,cAAc,EAAE;YACZsB,eAAe,EAAEtC,KAAK,CAACG,OAAN,CAAcoC,OAAd,CAAsBC,UAD3B;YAEZtC,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IAFtB;YAGZoC,YAAY,EAAEzC,KAAK,CAAC0C,KAAN,CAAYC,MAAZ,CAAmBC,EAHrB;YAIZC,WAAW,EAAE,GAJD;YAKZxB,WAAW,EAAErB,KAAK,CAACuB,OAAN,CAAc,CAAd,CALD;YAMZD,YAAY,EAAEtB,KAAK,CAACuB,OAAN,CAAc,GAAd;UANF,CADb;UASHH,UAAU,EAAE;YACR0B,aAAa,EAAE9C,KAAK,CAACuB,OAAN,CAAc,GAAd,CADP;YAERF,WAAW,EAAErB,KAAK,CAACuB,OAAN,CAAc,CAAd,CAFL;YAGRD,YAAY,EAAEtB,KAAK,CAACuB,OAAN,CAAc,CAAd,CAHN;YAIRwB,UAAU,EAAE/C,KAAK,CAACuB,OAAN,CAAc,IAAd,CAJJ;YAKR,GAAG,IAAAE,wBAAA,EAAgBzB,KAAhB,EAAuB;cACtB0B,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;gBAC1BC,QAAQ,EAAE,EADgB;gBAE1BC,UAAU,EAAE,IAFc;gBAG1BC,UAAU,EAAE,wBAHc;gBAI1BC,aAAa,EAAE,CAAC;cAJU,CAAb,CADK;cAOtBC,KAAK,EAAEjC,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBW;YAPJ,CAAvB;UALK;QATT,CAAP;IA/BR;EAyDH,CA1DM,EA0DJ,CAAClB,KAAD,EAAQE,WAAR,EAAqBI,SAArB,EAAgCM,OAAhC,EAAyCC,SAAzC,CA1DI,CAAP;AA2DH"}
package/build/module/Tab/Tab.js CHANGED
@@ -34,6 +34,7 @@ export default function Tab(props) {
34
34
  } = props;
35
35
  const {
36
36
  container: containerStyle,
37
+ iconContainer: iconContainerStyle,
37
38
  inner: innerStyle,
38
39
  label: labelStyle
39
40
  } = useVariantStyleMap(variant, selected, size);
@@ -44,10 +45,12 @@ export default function Tab(props) {
44
45
  const tabElement = typeof children !== 'string' ? cloneElementSafely(children, {
45
46
  selected
46
47
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, iconElement ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
47
- horizontalOffset: -6,
48
+ horizontalOffset: -4,
48
49
  invisible: !badgeVisible,
49
- verticalOffset: -4.5
50
- }, iconElement), /*#__PURE__*/React.createElement(Text, {
50
+ verticalOffset: -4
51
+ }, /*#__PURE__*/React.createElement(View, {
52
+ style: iconContainerStyle
53
+ }, iconElement)), /*#__PURE__*/React.createElement(Text, {
51
54
  style: css(labelStyle)
52
55
  }, children)) : /*#__PURE__*/React.createElement(Badge, {
53
56
  horizontalOffset: -7,
package/build/module/Tab/Tab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","Platform","Text","View","Badge","TabBase","css","StyleSheet","cloneElementSafely","useVariantStyleMap","styles","create","root","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","size","variant","style","styleProp","onTabInnerLayout","otherProps","container","containerStyle","inner","innerStyle","label","labelStyle","tabBaseStyle","tabInnerStyle","iconElement","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabSize, TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n },\n filledInner: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n selected = false,\n selectedIcon,\n size = 'medium' as TabSize,\n variant = 'default' as TabVariant,\n style: styleProp,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const {\n container: containerStyle,\n inner: innerStyle,\n label: labelStyle,\n } = useVariantStyleMap(variant, selected, size);\n\n const tabBaseStyle = css([\n styles.root,\n containerStyle,\n styleProp,\n ]);\n\n const tabInnerStyle = css([\n styles.filledInner,\n innerStyle,\n ]);\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconElement = cloneElementSafely(icon);\n\n const tabElement = typeof children !== 'string' ? (\n cloneElementSafely(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n {iconElement ? (\n <React.Fragment>\n <Badge\n horizontalOffset={-6}\n invisible={!badgeVisible}\n verticalOffset={-4.5}\n >\n {iconElement}\n </Badge>\n\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </React.Fragment>\n ) : (\n <Badge\n horizontalOffset={-7}\n invisible={!badgeVisible}\n verticalOffset={3}\n >\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </Badge>\n )}\n </React.Fragment>\n );\n\n return (\n <TabBase\n style={tabBaseStyle}\n {...otherProps}\n >\n <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n {tabElement}\n </View>\n </TabBase>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,IAAnB,EAAyBC,IAAzB,QAAqC,cAArC;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,SAASC,GAAT,EAAcC,UAAd,QAAgC,WAAhC;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIX,QAAQ,CAACY,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;AAWA,eAAe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,IAAI,GAAG,QAPL;IAQFC,OAAO,GAAG,SARR;IASFC,KAAK,EAAEC,SATL;IAUFC,gBAVE;IAWF,GAAGC;EAXD,IAYFb,KAZJ;EAcA,MAAM;IACFc,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF7B,kBAAkB,CAACmB,OAAD,EAAUH,QAAV,EAAoBE,IAApB,CAJtB;EAMA,MAAMY,YAAY,GAAGjC,GAAG,CAAC,CACrBI,MAAM,CAACE,IADc,EAErBsB,cAFqB,EAGrBJ,SAHqB,CAAD,CAAxB;EAMA,MAAMU,aAAa,GAAGlC,GAAG,CAAC,CACtBI,MAAM,CAACK,WADe,EAEtBqB,UAFsB,CAAD,CAAzB;EAKA,MAAMb,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMiB,WAAW,GAAGjC,kBAAkB,CAACe,IAAD,CAAtC;EAEA,MAAMmB,UAAU,GAAG,OAAOrB,QAAP,KAAoB,QAApB,GACfb,kBAAkB,CAACa,QAAD,EAAW;IACzBI;EADyB,CAAX,CADH,gBAKf,oBAAC,KAAD,CAAO,QAAP,QACKgB,WAAW,gBACR,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,KAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACrB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,GAKKqB,WALL,CADJ,eASI,oBAAC,IAAD;IAAM,KAAK,EAAEnC,GAAG,CAACgC,UAAD;EAAhB,GACKjB,QADL,CATJ,CADQ,gBAeR,oBAAC,KAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,oBAAC,IAAD;IAAM,KAAK,EAAEd,GAAG,CAACgC,UAAD;EAAhB,GACKjB,QADL,CALJ,CAhBR,CALJ;EAkCA,oBACI,oBAAC,OAAD;IACI,KAAK,EAAEkB;EADX,GAEQP,UAFR,gBAII,oBAAC,IAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAES;EAAzC,GACKE,UADL,CAJJ,CADJ;AAUH;AAAA"}
1
+ {"version":3,"names":["React","Platform","Text","View","Badge","TabBase","css","StyleSheet","cloneElementSafely","useVariantStyleMap","styles","create","root","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","size","variant","style","styleProp","onTabInnerLayout","otherProps","container","containerStyle","iconContainer","iconContainerStyle","inner","innerStyle","label","labelStyle","tabBaseStyle","tabInnerStyle","iconElement","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabSize, TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n },\n filledInner: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n selected = false,\n selectedIcon,\n size = 'medium' as TabSize,\n variant = 'default' as TabVariant,\n style: styleProp,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const {\n container: containerStyle,\n iconContainer: iconContainerStyle,\n inner: innerStyle,\n label: labelStyle,\n } = useVariantStyleMap(variant, selected, size);\n\n const tabBaseStyle = css([\n styles.root,\n containerStyle,\n styleProp,\n ]);\n\n const tabInnerStyle = css([\n styles.filledInner,\n innerStyle,\n ]);\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconElement = cloneElementSafely(icon);\n\n const tabElement = typeof children !== 'string' ? (\n cloneElementSafely(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n {iconElement ? (\n <React.Fragment>\n <Badge\n horizontalOffset={-4}\n invisible={!badgeVisible}\n verticalOffset={-4}\n >\n <View style={iconContainerStyle}>\n {iconElement}\n </View>\n </Badge>\n\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </React.Fragment>\n ) : (\n <Badge\n horizontalOffset={-7}\n invisible={!badgeVisible}\n verticalOffset={3}\n >\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </Badge>\n )}\n </React.Fragment>\n );\n\n return (\n <TabBase\n style={tabBaseStyle}\n {...otherProps}\n >\n <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n {tabElement}\n </View>\n </TabBase>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,IAAnB,EAAyBC,IAAzB,QAAqC,cAArC;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,SAASC,GAAT,EAAcC,UAAd,QAAgC,WAAhC;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIX,QAAQ,CAACY,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;AAWA,eAAe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,IAAI,GAAG,QAPL;IAQFC,OAAO,GAAG,SARR;IASFC,KAAK,EAAEC,SATL;IAUFC,gBAVE;IAWF,GAAGC;EAXD,IAYFb,KAZJ;EAcA,MAAM;IACFc,SAAS,EAAEC,cADT;IAEFC,aAAa,EAAEC,kBAFb;IAGFC,KAAK,EAAEC,UAHL;IAIFC,KAAK,EAAEC;EAJL,IAKF/B,kBAAkB,CAACmB,OAAD,EAAUH,QAAV,EAAoBE,IAApB,CALtB;EAOA,MAAMc,YAAY,GAAGnC,GAAG,CAAC,CACrBI,MAAM,CAACE,IADc,EAErBsB,cAFqB,EAGrBJ,SAHqB,CAAD,CAAxB;EAMA,MAAMY,aAAa,GAAGpC,GAAG,CAAC,CACtBI,MAAM,CAACK,WADe,EAEtBuB,UAFsB,CAAD,CAAzB;EAKA,MAAMf,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMmB,WAAW,GAAGnC,kBAAkB,CAACe,IAAD,CAAtC;EAEA,MAAMqB,UAAU,GAAG,OAAOvB,QAAP,KAAoB,QAApB,GACfb,kBAAkB,CAACa,QAAD,EAAW;IACzBI;EADyB,CAAX,CADH,gBAKf,oBAAC,KAAD,CAAO,QAAP,QACKkB,WAAW,gBACR,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,KAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACvB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,gBAKI,oBAAC,IAAD;IAAM,KAAK,EAAEgB;EAAb,GACKO,WADL,CALJ,CADJ,eAWI,oBAAC,IAAD;IAAM,KAAK,EAAErC,GAAG,CAACkC,UAAD;EAAhB,GACKnB,QADL,CAXJ,CADQ,gBAiBR,oBAAC,KAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,oBAAC,IAAD;IAAM,KAAK,EAAEd,GAAG,CAACkC,UAAD;EAAhB,GACKnB,QADL,CALJ,CAlBR,CALJ;EAoCA,oBACI,oBAAC,OAAD;IACI,KAAK,EAAEoB;EADX,GAEQT,UAFR,gBAII,oBAAC,IAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEW;EAAzC,GACKE,UADL,CAJJ,CADJ;AAUH;AAAA"}
package/build/module/Tab/useVariantStyleMap.js CHANGED
@@ -34,8 +34,8 @@ export default function useVariantStyleMap(variant, selected, size) {
34
34
  case 'circular-home':
35
35
  return {
36
36
  container: {
37
- paddingHorizontal: theme.spacing(0.75),
38
- paddingVertical: theme.spacing(1)
37
+ paddingBottom: 4,
38
+ paddingHorizontal: 3
39
39
  },
40
40
  inner: {
41
41
  backgroundColor: selected ? theme.palette.fill.base : theme.palette.surface.base,
@@ -68,16 +68,19 @@ export default function useVariantStyleMap(variant, selected, size) {
68
68
  paddingTop: 10.5,
69
69
  width: 48
70
70
  },
71
+ iconContainer: {
72
+ padding: 0.75
73
+ },
71
74
  inner: {
72
75
  flexDirection: 'column',
73
76
  gap: 4.75
74
77
  },
75
78
  label: createFontStyle(theme, {
76
79
  selector: _ => typographyOf({
77
- fontSize: 10,
78
- lineHeight: 10,
80
+ fontSize: 10.5,
81
+ lineHeight: 10.5,
79
82
  fontFamily: 'PretendardStd-Medium',
80
- letterSpacing: -0.1
83
+ letterSpacing: -0.105
81
84
  }),
82
85
  color: selected ? theme.palette.text.strong : theme.palette.text.base
83
86
  })
package/build/module/Tab/useVariantStyleMap.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","size","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","width","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n container: FountainUiStyle;\n inner?: FountainUiStyle;\n label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {\n const theme = useTheme();\n\n return useMemo<VariantStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingHorizontal: theme.spacing(0.75),\n paddingVertical: theme.spacing(1),\n },\n inner: {\n backgroundColor: selected\n ? theme.palette.fill.base\n : theme.palette.fill.weaker,\n borderRadius: theme.shape.radius.full,\n flexDirection: 'row',\n gap: 5,\n paddingBottom: 7.5,\n paddingHorizontal: 14,\n paddingTop: 6.5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: size === 'small' ? 14 : 15,\n lineHeight: size === 'small' ? 18.2 : 19.5,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strongInverse\n : theme.palette.text.base,\n }),\n };\n case 'circular-home':\n return {\n container: {\n paddingHorizontal: theme.spacing(0.75),\n paddingVertical: theme.spacing(1),\n },\n inner: {\n backgroundColor: selected\n ? theme.palette.fill.base\n : theme.palette.surface.base,\n borderRadius: theme.shape.radius.full,\n borderWidth: selected ? undefined : 0.5,\n borderColor: selected ? undefined : theme.palette.border.weak,\n flexDirection: 'row',\n gap: 5,\n paddingBottom: 6.5,\n paddingHorizontal: 14,\n paddingVertical: 7.5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 15,\n lineHeight: 19.5,\n fontFamily: 'LexendDeca-Medium',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strongInverse\n : theme.palette.text.base,\n }),\n };\n case 'bottom-navigation':\n return {\n container: {\n alignItems: 'center',\n height: 49,\n justifyContent: 'flex-start',\n paddingTop: 10.5,\n width: 48,\n },\n inner: {\n flexDirection: 'column',\n gap: 4.75,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 10,\n lineHeight: 10,\n fontFamily: 'PretendardStd-Medium',\n letterSpacing: -0.1,\n }),\n color: selected\n ? theme.palette.text.strong\n : theme.palette.text.base,\n }),\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: 10,\n },\n inner: {\n flexDirection: 'row',\n gap: 5,\n paddingHorizontal: 1,\n paddingVertical: 10,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: size === 'small' ? 15 : 16,\n lineHeight: size === 'small' ? 18.75 : 20,\n fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strong\n : theme.palette.text.base,\n }),\n };\n }\n }, [theme, variant, selected, size]);\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","size","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","width","iconContainer","padding","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n container: FountainUiStyle;\n iconContainer?: FountainUiStyle;\n inner?: FountainUiStyle;\n label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {\n const theme = useTheme();\n\n return useMemo<VariantStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingHorizontal: theme.spacing(0.75),\n paddingVertical: theme.spacing(1),\n },\n inner: {\n backgroundColor: selected\n ? theme.palette.fill.base\n : theme.palette.fill.weaker,\n borderRadius: theme.shape.radius.full,\n flexDirection: 'row',\n gap: 5,\n paddingBottom: 7.5,\n paddingHorizontal: 14,\n paddingTop: 6.5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: size === 'small' ? 14 : 15,\n lineHeight: size === 'small' ? 18.2 : 19.5,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strongInverse\n : theme.palette.text.base,\n }),\n };\n case 'circular-home':\n return {\n container: {\n paddingBottom: 4,\n paddingHorizontal: 3,\n },\n inner: {\n backgroundColor: selected\n ? theme.palette.fill.base\n : theme.palette.surface.base,\n borderRadius: theme.shape.radius.full,\n borderWidth: selected ? undefined : 0.5,\n borderColor: selected ? undefined : theme.palette.border.weak,\n flexDirection: 'row',\n gap: 5,\n paddingBottom: 6.5,\n paddingHorizontal: 14,\n paddingVertical: 7.5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 15,\n lineHeight: 19.5,\n fontFamily: 'LexendDeca-Medium',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strongInverse\n : theme.palette.text.base,\n }),\n };\n case 'bottom-navigation':\n return {\n container: {\n alignItems: 'center',\n height: 49,\n justifyContent: 'flex-start',\n paddingTop: 10.5,\n width: 48,\n },\n iconContainer: {\n padding: 0.75,\n },\n inner: {\n flexDirection: 'column',\n gap: 4.75,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 10.5,\n lineHeight: 10.5,\n fontFamily: 'PretendardStd-Medium',\n letterSpacing: -0.105,\n }),\n color: selected\n ? theme.palette.text.strong\n : theme.palette.text.base,\n }),\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: 10,\n },\n inner: {\n flexDirection: 'row',\n gap: 5,\n paddingHorizontal: 1,\n paddingVertical: 10,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: size === 'small' ? 15 : 16,\n lineHeight: size === 'small' ? 18.75 : 20,\n fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strong\n : theme.palette.text.base,\n }),\n };\n }\n }, [theme, variant, selected, size]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAGA,SAASC,YAAT,QAA6B,qBAA7B;AACA,SAASC,eAAT,EAA0BC,QAA1B,QAA0C,WAA1C;AAUA,eAAe,SAASC,kBAAT,CAA4BC,OAA5B,EAAiDC,QAAjD,EAAoEC,IAApE,EAAiG;EAC5G,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,OAAOH,OAAO,CAAe,MAAM;IAC/B,QAAQK,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHI,SAAS,EAAE;YACPC,iBAAiB,EAAEF,KAAK,CAACG,OAAN,CAAc,IAAd,CADZ;YAEPC,eAAe,EAAEJ,KAAK,CAACG,OAAN,CAAc,CAAd;UAFV,CADR;UAKHE,KAAK,EAAE;YACHC,eAAe,EAAER,QAAQ,GACnBE,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBC,IADA,GAEnBT,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBE,MAHtB;YAIHC,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,MAAZ,CAAmBC,IAJ9B;YAKHC,aAAa,EAAE,KALZ;YAMHC,GAAG,EAAE,CANF;YAOHC,aAAa,EAAE,GAPZ;YAQHf,iBAAiB,EAAE,EARhB;YASHgB,UAAU,EAAE;UATT,CALJ;UAgBHC,KAAK,EAAEzB,eAAe,CAACM,KAAD,EAAQ;YAC1BoB,QAAQ,EAAGC,CAAD,IAAO5B,YAAY,CAAC;cAC1B6B,QAAQ,EAAEvB,IAAI,KAAK,OAAT,GAAmB,EAAnB,GAAwB,EADR;cAE1BwB,UAAU,EAAExB,IAAI,KAAK,OAAT,GAAmB,IAAnB,GAA0B,IAFZ;cAG1ByB,UAAU,EAAE,wBAHc;cAI1BC,aAAa,EAAE;YAJW,CAAD,CADH;YAO1BC,KAAK,EAAE5B,QAAQ,GACTE,KAAK,CAACO,OAAN,CAAcoB,IAAd,CAAmBC,aADV,GAET5B,KAAK,CAACO,OAAN,CAAcoB,IAAd,CAAmBlB;UATC,CAAR;QAhBnB,CAAP;;MA4BJ,KAAK,eAAL;QACI,OAAO;UACHR,SAAS,EAAE;YACPgB,aAAa,EAAE,CADR;YAEPf,iBAAiB,EAAE;UAFZ,CADR;UAKHG,KAAK,EAAE;YACHC,eAAe,EAAER,QAAQ,GACnBE,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBC,IADA,GAEnBT,KAAK,CAACO,OAAN,CAAcsB,OAAd,CAAsBpB,IAHzB;YAIHE,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,MAAZ,CAAmBC,IAJ9B;YAKHgB,WAAW,EAAEhC,QAAQ,GAAGiC,SAAH,GAAe,GALjC;YAMHC,WAAW,EAAElC,QAAQ,GAAGiC,SAAH,GAAe/B,KAAK,CAACO,OAAN,CAAc0B,MAAd,CAAqBC,IANtD;YAOHnB,aAAa,EAAE,KAPZ;YAQHC,GAAG,EAAE,CARF;YASHC,aAAa,EAAE,GATZ;YAUHf,iBAAiB,EAAE,EAVhB;YAWHE,eAAe,EAAE;UAXd,CALJ;UAkBHe,KAAK,EAAEzB,eAAe,CAACM,KAAD,EAAQ;YAC1BoB,QAAQ,EAAGC,CAAD,IAAO5B,YAAY,CAAC;cAC1B6B,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,IAFc;cAG1BC,UAAU,EAAE,mBAHc;cAI1BC,aAAa,EAAE;YAJW,CAAD,CADH;YAO1BC,KAAK,EAAE5B,QAAQ,GACTE,KAAK,CAACO,OAAN,CAAcoB,IAAd,CAAmBC,aADV,GAET5B,KAAK,CAACO,OAAN,CAAcoB,IAAd,CAAmBlB;UATC,CAAR;QAlBnB,CAAP;;MA8BJ,KAAK,mBAAL;QACI,OAAO;UACHR,SAAS,EAAE;YACPkC,UAAU,EAAE,QADL;YAEPC,MAAM,EAAE,EAFD;YAGPC,cAAc,EAAE,YAHT;YAIPnB,UAAU,EAAE,IAJL;YAKPoB,KAAK,EAAE;UALA,CADR;UAQHC,aAAa,EAAE;YACXC,OAAO,EAAE;UADE,CARZ;UAWHnC,KAAK,EAAE;YACHU,aAAa,EAAE,QADZ;YAEHC,GAAG,EAAE;UAFF,CAXJ;UAeHG,KAAK,EAAEzB,eAAe,CAACM,KAAD,EAAQ;YAC1BoB,QAAQ,EAAGC,CAAD,IAAO5B,YAAY,CAAC;cAC1B6B,QAAQ,EAAE,IADgB;cAE1BC,UAAU,EAAE,IAFc;cAG1BC,UAAU,EAAE,sBAHc;cAI1BC,aAAa,EAAE,CAAC;YAJU,CAAD,CADH;YAO1BC,KAAK,EAAE5B,QAAQ,GACTE,KAAK,CAACO,OAAN,CAAcoB,IAAd,CAAmBc,MADV,GAETzC,KAAK,CAACO,OAAN,CAAcoB,IAAd,CAAmBlB;UATC,CAAR;QAfnB,CAAP;;MA2BJ,KAAK,SAAL;MACA;QACI,OAAO;UACHR,SAAS,EAAE;YACPC,iBAAiB,EAAE;UADZ,CADR;UAIHG,KAAK,EAAE;YACHU,aAAa,EAAE,KADZ;YAEHC,GAAG,EAAE,CAFF;YAGHd,iBAAiB,EAAE,CAHhB;YAIHE,eAAe,EAAE;UAJd,CAJJ;UAUHe,KAAK,EAAEzB,eAAe,CAACM,KAAD,EAAQ;YAC1BoB,QAAQ,EAAGC,CAAD,IAAO5B,YAAY,CAAC;cAC1B6B,QAAQ,EAAEvB,IAAI,KAAK,OAAT,GAAmB,EAAnB,GAAwB,EADR;cAE1BwB,UAAU,EAAExB,IAAI,KAAK,OAAT,GAAmB,KAAnB,GAA2B,EAFb;cAG1ByB,UAAU,EAAE1B,QAAQ,GAAG,wBAAH,GAA8B,sBAHxB;cAI1B2B,aAAa,EAAE;YAJW,CAAD,CADH;YAO1BC,KAAK,EAAE5B,QAAQ,GACTE,KAAK,CAACO,OAAN,CAAcoB,IAAd,CAAmBc,MADV,GAETzC,KAAK,CAACO,OAAN,CAAcoB,IAAd,CAAmBlB;UATC,CAAR;QAVnB,CAAP;IA3FR;EAkHH,CAnHa,EAmHX,CAACT,KAAD,EAAQH,OAAR,EAAiBC,QAAjB,EAA2BC,IAA3B,CAnHW,CAAd;AAoHH"}
package/build/module/Tabs/useTabsStyle.js CHANGED
@@ -27,7 +27,7 @@ export default function useTabsStyle(variant, size) {
27
27
  container: {
28
28
  borderTopColor: theme.palette.border.base,
29
29
  borderTopWidth: 0.5,
30
- paddingHorizontal: 20
30
+ paddingHorizontal: 24
31
31
  }
32
32
  };
33
33
 
package/build/module/Tabs/useTabsStyle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useMemo","useBreakpointUp","useTheme","useTabsStyle","variant","size","theme","isTablet","container","paddingBottom","paddingHorizontal","borderTopColor","palette","border","base","borderTopWidth"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabSize, TabVariant } from '../Tab';\n\ninterface TabsStyle {\n container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant, size: TabSize) {\n const theme = useTheme();\n\n const isTablet = useBreakpointUp('md', true, false);\n\n return useMemo<TabsStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: isTablet ? 20 : (size === 'small' ? 8 : 12),\n },\n };\n case 'circular-home':\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: isTablet ? 20 : 8,\n },\n };\n case 'bottom-navigation':\n return {\n container: {\n borderTopColor: theme.palette.border.base,\n borderTopWidth: 0.5,\n paddingHorizontal: 20,\n },\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: isTablet ? 14 : 6,\n },\n };\n }\n }, [theme, variant, isTablet, size]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,QAAT,QAAyB,WAAzB;AAOA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0D;EACrE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,MAAMK,QAAQ,GAAGN,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAhC;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQI,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHI,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEH,QAAQ,GAAG,EAAH,GAASF,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB;UAFpD;QADR,CAAP;;MAMJ,KAAK,eAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEH,QAAQ,GAAG,EAAH,GAAQ;UAF5B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHC,SAAS,EAAE;YACPG,cAAc,EAAEL,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;YAEPC,cAAc,EAAE,GAFT;YAGPL,iBAAiB,EAAE;UAHZ;QADR,CAAP;;MAOJ,KAAK,SAAL;MACA;QACI,OAAO;UACHF,SAAS,EAAE;YACPE,iBAAiB,EAAEH,QAAQ,GAAG,EAAH,GAAQ;UAD5B;QADR,CAAP;IAzBR;EA+BH,CAhCa,EAgCX,CAACD,KAAD,EAAQF,OAAR,EAAiBG,QAAjB,EAA2BF,IAA3B,CAhCW,CAAd;AAiCH"}
1
+ {"version":3,"names":["useMemo","useBreakpointUp","useTheme","useTabsStyle","variant","size","theme","isTablet","container","paddingBottom","paddingHorizontal","borderTopColor","palette","border","base","borderTopWidth"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabSize, TabVariant } from '../Tab';\n\ninterface TabsStyle {\n container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant, size: TabSize) {\n const theme = useTheme();\n\n const isTablet = useBreakpointUp('md', true, false);\n\n return useMemo<TabsStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: isTablet ? 20 : (size === 'small' ? 8 : 12),\n },\n };\n case 'circular-home':\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: isTablet ? 20 : 8,\n },\n };\n case 'bottom-navigation':\n return {\n container: {\n borderTopColor: theme.palette.border.base,\n borderTopWidth: 0.5,\n paddingHorizontal: 24,\n },\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: isTablet ? 14 : 6,\n },\n };\n }\n }, [theme, variant, isTablet, size]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,QAAT,QAAyB,WAAzB;AAOA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0D;EACrE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,MAAMK,QAAQ,GAAGN,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAhC;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQI,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHI,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEH,QAAQ,GAAG,EAAH,GAASF,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB;UAFpD;QADR,CAAP;;MAMJ,KAAK,eAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEH,QAAQ,GAAG,EAAH,GAAQ;UAF5B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHC,SAAS,EAAE;YACPG,cAAc,EAAEL,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;YAEPC,cAAc,EAAE,GAFT;YAGPL,iBAAiB,EAAE;UAHZ;QADR,CAAP;;MAOJ,KAAK,SAAL;MACA;QACI,OAAO;UACHF,SAAS,EAAE;YACPE,iBAAiB,EAAEH,QAAQ,GAAG,EAAH,GAAQ;UAD5B;QADR,CAAP;IAzBR;EA+BH,CAhCa,EAgCX,CAACD,KAAD,EAAQF,OAAR,EAAiBG,QAAjB,EAA2BF,IAA3B,CAhCW,CAAd;AAiCH"}
package/build/module/TextField/useVariantStyleMap.js CHANGED
@@ -41,6 +41,7 @@ export default function useVariantStyleMap(variant, status, isFocused) {
41
41
  borderBottomWidth: 1
42
42
  },
43
43
  inputStyle: {
44
+ paddingLeft: 0,
44
45
  paddingRight: theme.spacing(4),
45
46
  paddingVertical: theme.spacing(4),
46
47
  ...createFontStyle(theme, {
@@ -56,7 +57,7 @@ export default function useVariantStyleMap(variant, status, isFocused) {
56
57
  hintStyle: {
57
58
  marginTop: theme.spacing(2),
58
59
  ...createFontStyle(theme, {
59
- // selector: (typography) => typography.caption1['regular']
60
+ selector: typography => typography.caption1['regular'],
60
61
  color: hintColor
61
62
  })
62
63
  }
package/build/module/TextField/useVariantStyleMap.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingRight","spacing","paddingVertical","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingLeft","paddingBottom","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n },\n inputStyle: {\n paddingRight: theme.spacing(4),\n paddingVertical: theme.spacing(4),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n },\n hintStyle: {\n marginTop: theme.spacing(2),\n ...createFontStyle(theme, {\n // selector: (typography) => typography.caption1['regular']\n color: hintColor,\n }),\n },\n };\n case 'search':\n return {\n containerStyle: {\n backgroundColor: theme.palette.surface.supportive,\n borderColor: theme.palette.border.base,\n borderRadius: theme.shape.radius.md,\n borderWidth: 0.5,\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(0.5),\n },\n inputStyle: {\n paddingBottom: theme.spacing(2.5),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n paddingTop: theme.spacing(2.25),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 19.2,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: -0.16,\n }),\n color: theme.palette.text.strong,\n }),\n },\n };\n }\n }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingLeft","paddingRight","spacing","paddingVertical","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n },\n inputStyle: {\n paddingLeft: 0,\n paddingRight: theme.spacing(4),\n paddingVertical: theme.spacing(4),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n },\n hintStyle: {\n marginTop: theme.spacing(2),\n ...createFontStyle(theme, {\n selector: (typography) => typography.caption1['regular'],\n color: hintColor,\n }),\n },\n };\n case 'search':\n return {\n containerStyle: {\n backgroundColor: theme.palette.surface.supportive,\n borderColor: theme.palette.border.base,\n borderRadius: theme.shape.radius.md,\n borderWidth: 0.5,\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(0.5),\n },\n inputStyle: {\n paddingBottom: theme.spacing(2.5),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n paddingTop: theme.spacing(2.25),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 19.2,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: -0.16,\n }),\n color: theme.palette.text.strong,\n }),\n },\n };\n }\n }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
package/build/typescript/Tab/useVariantStyleMap.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { FountainUiStyle } from '@fountain-ui/styles';
3
3
  import type { TabSize, TabVariant } from './TabProps';
4
4
  interface VariantStyle {
5
5
  container: FountainUiStyle;
6
+ iconContainer?: FountainUiStyle;
6
7
  inner?: FountainUiStyle;
7
8
  label: TextStyle;
8
9
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fountain-ui/core",
3
- "version": "3.0.0-alpha.16",
3
+ "version": "3.0.0-alpha.18",
4
4
  "author": "Fountain-UI Team",
5
5
  "description": "React components that implement Tappytoon's Fountain Design.",
6
6
  "license": "MIT",
@@ -67,5 +67,5 @@
67
67
  "publishConfig": {
68
68
  "access": "public"
69
69
  },
70
- "gitHead": "7b89ae070ab492f408e51043a2afa60deb607cdd"
70
+ "gitHead": "d39e78bbc87db3526b4544aca37ad297beef9024"
71
71
  }
package/src/Tab/Tab.tsx CHANGED
@@ -36,6 +36,7 @@ export default function Tab(props: TabProps) {
36
36
 
37
37
  const {
38
38
  container: containerStyle,
39
+ iconContainer: iconContainerStyle,
39
40
  inner: innerStyle,
40
41
  label: labelStyle,
41
42
  } = useVariantStyleMap(variant, selected, size);
@@ -63,11 +64,13 @@ export default function Tab(props: TabProps) {
63
64
  {iconElement ? (
64
65
  <React.Fragment>
65
66
  <Badge
66
- horizontalOffset={-6}
67
+ horizontalOffset={-4}
67
68
  invisible={!badgeVisible}
68
- verticalOffset={-4.5}
69
+ verticalOffset={-4}
69
70
  >
70
- {iconElement}
71
+ <View style={iconContainerStyle}>
72
+ {iconElement}
73
+ </View>
71
74
  </Badge>
72
75
 
73
76
  <Text style={css(labelStyle)}>
package/src/Tab/useVariantStyleMap.ts CHANGED
@@ -7,6 +7,7 @@ import type { TabSize, TabVariant } from './TabProps';
7
7
 
8
8
  interface VariantStyle {
9
9
  container: FountainUiStyle;
10
+ iconContainer?: FountainUiStyle;
10
11
  inner?: FountainUiStyle;
11
12
  label: TextStyle;
12
13
  }
@@ -48,8 +49,8 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
48
49
  case 'circular-home':
49
50
  return {
50
51
  container: {
51
- paddingHorizontal: theme.spacing(0.75),
52
- paddingVertical: theme.spacing(1),
52
+ paddingBottom: 4,
53
+ paddingHorizontal: 3,
53
54
  },
54
55
  inner: {
55
56
  backgroundColor: selected
@@ -85,16 +86,19 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
85
86
  paddingTop: 10.5,
86
87
  width: 48,
87
88
  },
89
+ iconContainer: {
90
+ padding: 0.75,
91
+ },
88
92
  inner: {
89
93
  flexDirection: 'column',
90
94
  gap: 4.75,
91
95
  },
92
96
  label: createFontStyle(theme, {
93
97
  selector: (_) => typographyOf({
94
- fontSize: 10,
95
- lineHeight: 10,
98
+ fontSize: 10.5,
99
+ lineHeight: 10.5,
96
100
  fontFamily: 'PretendardStd-Medium',
97
- letterSpacing: -0.1,
101
+ letterSpacing: -0.105,
98
102
  }),
99
103
  color: selected
100
104
  ? theme.palette.text.strong
package/src/Tabs/useTabsStyle.ts CHANGED
@@ -34,7 +34,7 @@ export default function useTabsStyle(variant: TabVariant, size: TabSize) {
34
34
  container: {
35
35
  borderTopColor: theme.palette.border.base,
36
36
  borderTopWidth: 0.5,
37
- paddingHorizontal: 20,
37
+ paddingHorizontal: 24,
38
38
  },
39
39
  };
40
40
  case 'default':
package/src/TextField/useVariantStyleMap.ts CHANGED
@@ -49,6 +49,7 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
49
49
  borderBottomWidth: 1,
50
50
  },
51
51
  inputStyle: {
52
+ paddingLeft: 0,
52
53
  paddingRight: theme.spacing(4),
53
54
  paddingVertical: theme.spacing(4),
54
55
  ...createFontStyle(theme, {
@@ -64,7 +65,7 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
64
65
  hintStyle: {
65
66
  marginTop: theme.spacing(2),
66
67
  ...createFontStyle(theme, {
67
- // selector: (typography) => typography.caption1['regular']
68
+ selector: (typography) => typography.caption1['regular'],
68
69
  color: hintColor,
69
70
  }),
70
71
  },