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

package/build/module/TextField/useVariantStyleMap.js

@@ -0,0 +1,94 @@
+import { useMemo } from 'react';
+import { typographyOf } from '@fountain-ui/styles';
+import { createFontStyle, useTheme } from '../styles';
+
+function useStatusColor(theme, status) {
+  switch (status) {
+    default:
+    case 'default':
+      return {
+        borderColor: theme.palette.border.base,
+        hintColor: theme.palette.text.weak
+      };
+
+    case 'success':
+      return {
+        borderColor: theme.palette.status.success,
+        hintColor: theme.palette.status.success
+      };
+
+    case 'error':
+      return {
+        borderColor: theme.palette.status.danger,
+        hintColor: theme.palette.status.danger
+      };
+  }
+}
+
+export default function useVariantStyleMap(variant, status, isFocused) {
+  const theme = useTheme();
+  const {
+    borderColor,
+    hintColor
+  } = useStatusColor(theme, status);
+  return useMemo(() => {
+    switch (variant) {
+      default:
+      case 'default':
+        return {
+          containerStyle: {
+            borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
+            borderBottomWidth: 1
+          },
+          inputStyle: {
+            paddingRight: theme.spacing(4),
+            paddingVertical: theme.spacing(4),
+            ...createFontStyle(theme, {
+              selector: _ => typographyOf({
+                fontSize: 18,
+                lineHeight: 27,
+                fontFamily: 'Pretendard-SemiBold',
+                letterSpacing: 0
+              }),
+              color: theme.palette.text.strong
+            })
+          },
+          hintStyle: {
+            marginTop: theme.spacing(2),
+            ...createFontStyle(theme, {
+              // selector: (typography) => typography.caption1['regular']
+              color: hintColor
+            })
+          }
+        };
+
+      case 'search':
+        return {
+          containerStyle: {
+            backgroundColor: theme.palette.surface.supportive,
+            borderColor: theme.palette.border.base,
+            borderRadius: theme.shape.radius.md,
+            borderWidth: 0.5,
+            paddingLeft: theme.spacing(3),
+            paddingRight: theme.spacing(0.5)
+          },
+          inputStyle: {
+            paddingBottom: theme.spacing(2.5),
+            paddingLeft: theme.spacing(2),
+            paddingRight: theme.spacing(1),
+            paddingTop: theme.spacing(2.25),
+            ...createFontStyle(theme, {
+              selector: _ => typographyOf({
+                fontSize: 16,
+                lineHeight: 19.2,
+                fontFamily: 'Pretendard-SemiBold',
+                letterSpacing: -0.16
+              }),
+              color: theme.palette.text.strong
+            })
+          }
+        };
+    }
+  }, [theme, borderColor, hintColor, variant, isFocused]);
+}
+//# sourceMappingURL=useVariantStyleMap.js.map

package/build/module/TextField/useVariantStyleMap.js.map

@@ -0,0 +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: 'Pretendard-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: 'Pretendard-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/module/Tooltip/Beaks/Beak.js

@@ -0,0 +1,56 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import HorizontalLargeBeak from './HorizontalLargeBeak';
+import HorizontalSmallBeak from './HorizontalSmallBeak';
+import VerticalLargeBeak from './VerticalLargeBeak';
+import VerticalSmallBeak from './VerticalSmallBeak';
+
+const getBeakComponent = (placement, size) => {
+  if (placement === 'top' || placement === 'bottom') {
+    if (size === 'small') return {
+      Component: HorizontalSmallBeak,
+      rotate: placement === 'top' ? '180deg' : '0deg'
+    };
+    if (size === 'large') return {
+      Component: HorizontalLargeBeak,
+      rotate: placement === 'top' ? '180deg' : '0deg'
+    };
+  }
+
+  if (placement === 'left' || placement === 'right') {
+    if (size === 'small') return {
+      Component: VerticalSmallBeak,
+      rotate: placement === 'left' ? '180deg' : '0deg'
+    };
+    if (size === 'large') return {
+      Component: VerticalLargeBeak,
+      rotate: placement === 'left' ? '180deg' : '0deg'
+    };
+  }
+
+  return {
+    Component: () => null,
+    rotate: '0deg'
+  };
+};
+
+export default function Beak(props) {
+  const {
+    placement = 'top',
+    size = 'small',
+    ...otherProps
+  } = props;
+  const {
+    Component,
+    rotate
+  } = getBeakComponent(placement, size);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, otherProps, {
+    style: {
+      transform: [{
+        rotate
+      }]
+    }
+  }));
+}
+//# sourceMappingURL=Beak.js.map

package/build/module/Tooltip/Beaks/Beak.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","HorizontalLargeBeak","HorizontalSmallBeak","VerticalLargeBeak","VerticalSmallBeak","getBeakComponent","placement","size","Component","rotate","Beak","props","otherProps","transform"],"sources":["Beak.tsx"],"sourcesContent":["import React from 'react';\nimport type { TooltipPlacement, TooltipSize } from '../TooltipProps';\nimport type BeakProps from './BeakProps';\nimport HorizontalLargeBeak from './HorizontalLargeBeak';\nimport HorizontalSmallBeak from './HorizontalSmallBeak';\nimport VerticalLargeBeak from './VerticalLargeBeak';\nimport VerticalSmallBeak from './VerticalSmallBeak';\n\nconst getBeakComponent = (placement: TooltipPlacement, size: TooltipSize) => {\n    if (placement === 'top' || placement === 'bottom') {\n        if (size === 'small') return {\n            Component: HorizontalSmallBeak,\n            rotate: placement === 'top' ? '180deg' : '0deg',\n        };\n        if (size === 'large') return {\n            Component: HorizontalLargeBeak,\n            rotate: placement === 'top' ? '180deg' : '0deg',\n        };\n    }\n\n    if (placement === 'left' || placement === 'right') {\n        if (size === 'small') return {\n            Component: VerticalSmallBeak,\n            rotate: placement === 'left' ? '180deg' : '0deg',\n        };\n        if (size === 'large') return {\n            Component: VerticalLargeBeak,\n            rotate: placement === 'left' ? '180deg' : '0deg',\n        };\n    }\n\n    return {\n        Component: () => null,\n        rotate: '0deg',\n    };\n};\n\nexport default function Beak(props: BeakProps) {\n    const {\n        placement = 'top' as TooltipPlacement,\n        size = 'small' as TooltipSize,\n        ...otherProps\n    } = props;\n\n    const { Component, rotate } = getBeakComponent(placement, size);\n\n    return (\n        <Component\n            {...otherProps}\n            style={{ transform: [{ rotate }] }}\n        />\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,SAAD,EAA8BC,IAA9B,KAAoD;EACzE,IAAID,SAAS,KAAK,KAAd,IAAuBA,SAAS,KAAK,QAAzC,EAAmD;IAC/C,IAAIC,IAAI,KAAK,OAAb,EAAsB,OAAO;MACzBC,SAAS,EAAEN,mBADc;MAEzBO,MAAM,EAAEH,SAAS,KAAK,KAAd,GAAsB,QAAtB,GAAiC;IAFhB,CAAP;IAItB,IAAIC,IAAI,KAAK,OAAb,EAAsB,OAAO;MACzBC,SAAS,EAAEP,mBADc;MAEzBQ,MAAM,EAAEH,SAAS,KAAK,KAAd,GAAsB,QAAtB,GAAiC;IAFhB,CAAP;EAIzB;;EAED,IAAIA,SAAS,KAAK,MAAd,IAAwBA,SAAS,KAAK,OAA1C,EAAmD;IAC/C,IAAIC,IAAI,KAAK,OAAb,EAAsB,OAAO;MACzBC,SAAS,EAAEJ,iBADc;MAEzBK,MAAM,EAAEH,SAAS,KAAK,MAAd,GAAuB,QAAvB,GAAkC;IAFjB,CAAP;IAItB,IAAIC,IAAI,KAAK,OAAb,EAAsB,OAAO;MACzBC,SAAS,EAAEL,iBADc;MAEzBM,MAAM,EAAEH,SAAS,KAAK,MAAd,GAAuB,QAAvB,GAAkC;IAFjB,CAAP;EAIzB;;EAED,OAAO;IACHE,SAAS,EAAE,MAAM,IADd;IAEHC,MAAM,EAAE;EAFL,CAAP;AAIH,CA3BD;;AA6BA,eAAe,SAASC,IAAT,CAAcC,KAAd,EAAgC;EAC3C,MAAM;IACFL,SAAS,GAAG,KADV;IAEFC,IAAI,GAAG,OAFL;IAGF,GAAGK;EAHD,IAIFD,KAJJ;EAMA,MAAM;IAAEH,SAAF;IAAaC;EAAb,IAAwBJ,gBAAgB,CAACC,SAAD,EAAYC,IAAZ,CAA9C;EAEA,oBACI,oBAAC,SAAD,eACQK,UADR;IAEI,KAAK,EAAE;MAAEC,SAAS,EAAE,CAAC;QAAEJ;MAAF,CAAD;IAAb;EAFX,GADJ;AAMH"}

package/build/module/Tooltip/Beaks/BeakProps.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=BeakProps.js.map

package/build/module/Tooltip/Beaks/BeakProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["BeakProps.ts"],"sourcesContent":["import type { SvgProps } from 'react-native-svg';\nimport type TooltipProps from '../TooltipProps';\n\nexport default interface BeakProps extends SvgProps, Pick<TooltipProps, 'placement' | 'size'> {}\n"],"mappings":""}

package/build/module/Tooltip/Beaks/HorizontalLargeBeak.js

@@ -0,0 +1,14 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export default function HorizontalLargeBeak(props) {
+  return /*#__PURE__*/React.createElement(Svg, _extends({
+    height: 5,
+    viewBox: '0 0 13 5',
+    width: 13
+  }, props), /*#__PURE__*/React.createElement(Path, {
+    d: "M5.81034 0.656815L1.82931 4.44828C1.45743 4.80245 0.963553 5 0.45 5H12.55C12.0364 5 11.5426 4.80245 11.1707 4.44828L7.18966 0.656815C6.80345 0.288998 6.19655 0.288999 5.81034 0.656815Z"
+  }));
+}
+//# sourceMappingURL=HorizontalLargeBeak.js.map

package/build/module/Tooltip/Beaks/HorizontalLargeBeak.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Path","Svg","HorizontalLargeBeak","props"],"sources":["HorizontalLargeBeak.tsx"],"sourcesContent":["import React from 'react';\nimport type { SvgProps } from 'react-native-svg';\nimport { Path, Svg } from 'react-native-svg';\n\nexport default function HorizontalLargeBeak(props: SvgProps) {\n    return (\n        <Svg\n            height={5}\n            viewBox={'0 0 13 5'}\n            width={13}\n            {...props}\n        >\n            <Path\n                d=\"M5.81034 0.656815L1.82931 4.44828C1.45743 4.80245 0.963553 5 0.45 5H12.55C12.0364 5 11.5426 4.80245 11.1707 4.44828L7.18966 0.656815C6.80345 0.288998 6.19655 0.288999 5.81034 0.656815Z\"\n            />\n        </Svg>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,IAAT,EAAeC,GAAf,QAA0B,kBAA1B;AAEA,eAAe,SAASC,mBAAT,CAA6BC,KAA7B,EAA8C;EACzD,oBACI,oBAAC,GAAD;IACI,MAAM,EAAE,CADZ;IAEI,OAAO,EAAE,UAFb;IAGI,KAAK,EAAE;EAHX,GAIQA,KAJR,gBAMI,oBAAC,IAAD;IACI,CAAC,EAAC;EADN,EANJ,CADJ;AAYH"}

package/build/module/Tooltip/Beaks/HorizontalSmallBeak.js

@@ -0,0 +1,14 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export default function HorizontalSmallBeak(props) {
+  return /*#__PURE__*/React.createElement(Svg, _extends({
+    height: 4,
+    viewBox: '0 0 11 4',
+    width: 11
+  }, props), /*#__PURE__*/React.createElement(Path, {
+    d: "M5.11034 0.656814L2.17931 3.44828C1.80743 3.80245 1.31355 4 0.800001 4H10.8C10.2864 4 9.79257 3.80245 9.42069 3.44828L6.48966 0.656815C6.10345 0.288998 5.49655 0.288998 5.11034 0.656814Z"
+  }));
+}
+//# sourceMappingURL=HorizontalSmallBeak.js.map

package/build/module/Tooltip/Beaks/HorizontalSmallBeak.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Path","Svg","HorizontalSmallBeak","props"],"sources":["HorizontalSmallBeak.tsx"],"sourcesContent":["import React from 'react';\nimport type { SvgProps } from 'react-native-svg';\nimport { Path, Svg } from 'react-native-svg';\n\nexport default function HorizontalSmallBeak(props: SvgProps) {\n    return (\n        <Svg\n            height={4}\n            viewBox={'0 0 11 4'}\n            width={11}\n            {...props}\n        >\n            <Path\n                d=\"M5.11034 0.656814L2.17931 3.44828C1.80743 3.80245 1.31355 4 0.800001 4H10.8C10.2864 4 9.79257 3.80245 9.42069 3.44828L6.48966 0.656815C6.10345 0.288998 5.49655 0.288998 5.11034 0.656814Z\"\n            />\n        </Svg>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,IAAT,EAAeC,GAAf,QAA0B,kBAA1B;AAEA,eAAe,SAASC,mBAAT,CAA6BC,KAA7B,EAA8C;EACzD,oBACI,oBAAC,GAAD;IACI,MAAM,EAAE,CADZ;IAEI,OAAO,EAAE,UAFb;IAGI,KAAK,EAAE;EAHX,GAIQA,KAJR,gBAMI,oBAAC,IAAD;IACI,CAAC,EAAC;EADN,EANJ,CADJ;AAYH"}

package/build/module/Tooltip/Beaks/VerticalLargeBeak.js

@@ -0,0 +1,14 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export default function VerticalLargeBeak(props) {
+  return /*#__PURE__*/React.createElement(Svg, _extends({
+    height: 28,
+    viewBox: '0 0 5 28',
+    width: 5
+  }, props), /*#__PURE__*/React.createElement(Path, {
+    d: "M0.656815 13.3103L4.44828 9.32931C4.80245 8.95743 5 8.46355 5 7.95V20.05C5 19.5364 4.80245 19.0426 4.44828 18.6707L0.656815 14.6897C0.288998 14.3034 0.288998 13.6966 0.656815 13.3103Z"
+  }));
+}
+//# sourceMappingURL=VerticalLargeBeak.js.map

package/build/module/Tooltip/Beaks/VerticalLargeBeak.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Path","Svg","VerticalLargeBeak","props"],"sources":["VerticalLargeBeak.tsx"],"sourcesContent":["import React from 'react';\nimport type { SvgProps } from 'react-native-svg';\nimport { Path, Svg } from 'react-native-svg';\n\nexport default function VerticalLargeBeak(props: SvgProps) {\n    return (\n        <Svg\n            height={28}\n            viewBox={'0 0 5 28'}\n            width={5}\n            {...props}\n        >\n            <Path\n                d=\"M0.656815 13.3103L4.44828 9.32931C4.80245 8.95743 5 8.46355 5 7.95V20.05C5 19.5364 4.80245 19.0426 4.44828 18.6707L0.656815 14.6897C0.288998 14.3034 0.288998 13.6966 0.656815 13.3103Z\"\n            />\n        </Svg>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,IAAT,EAAeC,GAAf,QAA0B,kBAA1B;AAEA,eAAe,SAASC,iBAAT,CAA2BC,KAA3B,EAA4C;EACvD,oBACI,oBAAC,GAAD;IACI,MAAM,EAAE,EADZ;IAEI,OAAO,EAAE,UAFb;IAGI,KAAK,EAAE;EAHX,GAIQA,KAJR,gBAMI,oBAAC,IAAD;IACI,CAAC,EAAC;EADN,EANJ,CADJ;AAYH"}

package/build/module/Tooltip/Beaks/VerticalSmallBeak.js

@@ -0,0 +1,14 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export default function VerticalSmallBeak(props) {
+  return /*#__PURE__*/React.createElement(Svg, _extends({
+    height: 11,
+    viewBox: '0 0 4 11',
+    width: 4
+  }, props), /*#__PURE__*/React.createElement(Path, {
+    d: "M0.656815 4.81034L3.44828 1.87931C3.80245 1.50742 4 1.01355 4 0.499994L4 10.5C4 9.98644 3.80245 9.49257 3.44828 9.12068L0.656816 6.18965C0.288999 5.80344 0.288999 5.19655 0.656815 4.81034Z"
+  }));
+}
+//# sourceMappingURL=VerticalSmallBeak.js.map

package/build/module/Tooltip/Beaks/VerticalSmallBeak.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Path","Svg","VerticalSmallBeak","props"],"sources":["VerticalSmallBeak.tsx"],"sourcesContent":["import React from 'react';\nimport type { SvgProps } from 'react-native-svg';\nimport { Path, Svg } from 'react-native-svg';\n\nexport default function VerticalSmallBeak(props: SvgProps) {\n    return (\n        <Svg\n            height={11}\n            viewBox={'0 0 4 11'}\n            width={4}\n            {...props}\n        >\n            <Path\n                d=\"M0.656815 4.81034L3.44828 1.87931C3.80245 1.50742 4 1.01355 4 0.499994L4 10.5C4 9.98644 3.80245 9.49257 3.44828 9.12068L0.656816 6.18965C0.288999 5.80344 0.288999 5.19655 0.656815 4.81034Z\"\n            />\n        </Svg>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,IAAT,EAAeC,GAAf,QAA0B,kBAA1B;AAEA,eAAe,SAASC,iBAAT,CAA2BC,KAA3B,EAA4C;EACvD,oBACI,oBAAC,GAAD;IACI,MAAM,EAAE,EADZ;IAEI,OAAO,EAAE,UAFb;IAGI,KAAK,EAAE;EAHX,GAIQA,KAJR,gBAMI,oBAAC,IAAD;IACI,CAAC,EAAC;EADN,EANJ,CADJ;AAYH"}

package/build/module/Tooltip/Beaks/index.js

@@ -0,0 +1,2 @@
+export { default } from './Beak';
+//# sourceMappingURL=index.js.map

package/build/module/Tooltip/Beaks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Beak';\nexport type { default as BeakProps } from './BeakProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB"}

package/build/module/Tooltip/LegacyTooltip.js

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react';
+import { Platform, Text, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { rgb } from '@fountain-ui/utils';
+import ButtonBase from '../ButtonBase';
+import { createFontStyle, css, useTheme } from '../styles';
+import { Close as CloseIcon } from '../internal/icons';
+import UpArrow from './UpArrow';
+const DEFAULT_OPACITY = 0.8;
+const INITIAL_LAYOUT = {
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0
+};
+const ANIMATION_CONFIG = {
+  duration: 150
+};
+export default function Tooltip(props) {
+  const {
+    arrowLayout,
+    children,
+    initialLayout = INITIAL_LAYOUT,
+    left,
+    onClose,
+    placement = 'top',
+    right,
+    numberOfTitleLines = 1,
+    style,
+    title,
+    tooltipStyle,
+    verticalOffset = 4,
+    visible = false
+  } = props;
+  const theme = useTheme();
+  const [layout, setLayout] = useState(initialLayout);
+  const scale = useSharedValue(0);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: scale.value
+    }]
+  }), []);
+  const [r, g, b] = rgb(theme.palette.primary.main);
+  const totalVerticalOffset = -(layout.height + verticalOffset);
+  const tooltipLayoutStyle = {
+    alignItems: (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'left' ? 'flex-start' : (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'right' ? 'flex-end' : 'center',
+    bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
+    left,
+    position: 'absolute',
+    right,
+    top: placement === 'top' ? totalVerticalOffset : undefined,
+    zIndex: theme.zIndex.tooltip,
+    height: visible ? undefined : 0,
+    overflow: visible ? undefined : 'hidden',
+    ...Platform.select({
+      web: {
+        display: visible ? 'flex' : 'none'
+      },
+      default: {}
+    })
+  };
+  useEffect(() => {
+    const nextScaleValue = visible ? 1 : 0;
+    scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
+  }, [visible]);
+  const touchableStyle = {
+    alignItems: 'center',
+    backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
+    borderRadius: theme.shape.roundness,
+    flexDirection: 'row',
+    padding: theme.spacing(2),
+    width: '100%'
+  };
+  const fontStyle = createFontStyle(theme, {
+    selector: typo => typo.caption2,
+    color: theme.palette.primary.contrastTextColor
+  });
+  const textStyle = css([fontStyle, {
+    marginRight: theme.spacing(2),
+    flexShrink: 1
+  }]);
+  const arrowStyle = css({ ...(arrowLayout && {
+      [arrowLayout.placement]: arrowLayout.offset
+    })
+  });
+  const buttonElem = /*#__PURE__*/React.createElement(ButtonBase, {
+    pressEffect: 'none',
+    onPress: onClose
+  }, /*#__PURE__*/React.createElement(View, {
+    style: css(touchableStyle)
+  }, /*#__PURE__*/React.createElement(Text // TODO: Should we provide text prop customization?
+  , {
+    numberOfLines: numberOfTitleLines,
+    style: textStyle
+  }, title), /*#__PURE__*/React.createElement(CloseIcon, {
+    fill: theme.palette.primary.contrastTextColor,
+    width: 20,
+    height: 20
+  })));
+  const arrowElem = /*#__PURE__*/React.createElement(View, {
+    style: arrowStyle
+  }, /*#__PURE__*/React.createElement(UpArrow, {
+    upsideDown: placement === 'top',
+    fill: theme.palette.primary.main,
+    opacity: DEFAULT_OPACITY
+  }));
+  return /*#__PURE__*/React.createElement(View, {
+    style: style
+  }, children, /*#__PURE__*/React.createElement(Animated.View, {
+    onLayout: event => {
+      if (event.nativeEvent.layout.height === 0) {
+        return;
+      }
+
+      setLayout(event.nativeEvent.layout);
+    },
+    style: [animatedStyle, tooltipLayoutStyle, tooltipStyle]
+  }, placement === 'top' ? /*#__PURE__*/React.createElement(React.Fragment, null, buttonElem, arrowElem) : /*#__PURE__*/React.createElement(React.Fragment, null, arrowElem, buttonElem)));
+}
+;
+//# sourceMappingURL=LegacyTooltip.js.map

package/build/module/Tooltip/LegacyTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","Platform","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","ButtonBase","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","DEFAULT_OPACITY","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","initialLayout","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","scale","animatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","select","web","display","default","nextScaleValue","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","flexShrink","arrowStyle","offset","buttonElem","arrowElem","event","nativeEvent"],"sources":["LegacyTooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './LegacyTooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        arrowLayout,\n        children,\n        initialLayout = INITIAL_LAYOUT,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        numberOfTitleLines = 1,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: arrowLayout?.placement === 'left'\n            ? 'flex-start'\n            : arrowLayout?.placement === 'right'\n                ? 'flex-end'\n                : 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n        ...Platform.select({\n            web: {\n                display: visible ? 'flex' : 'none',\n            },\n            default: {},\n        }),\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n        width: '100%',\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            marginRight: theme.spacing(2),\n            flexShrink: 1,\n        },\n    ]);\n\n    const arrowStyle = css({\n        ...(arrowLayout && {\n            [arrowLayout.placement]: arrowLayout.offset,\n        }),\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={numberOfTitleLines}\n                    style={textStyle}\n                >\n                    {title}\n                </Text>\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <View style={arrowStyle}>\n            <UpArrow\n                upsideDown={placement === 'top'}\n                fill={theme.palette.primary.main}\n                opacity={DEFAULT_OPACITY}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => {\n                    if (event.nativeEvent.layout.height === 0) {\n                        return;\n                    }\n\n                    setLayout(event.nativeEvent.layout);\n                }}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/module/Tooltip/LegacyTooltipProps.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=LegacyTooltipProps.js.map

package/build/module/Tooltip/LegacyTooltipProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacyTooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport type TooltipArrowPlacement = 'left' | 'right';\n\nexport type TooltipInitialLayout = {\n    height: number;\n    width: number;\n    x: number;\n    y: number;\n};\n\nexport default interface TooltipProps extends ComponentProps<{\n    /**\n     * Tooltip reference element.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Left position relative to reference element.\n     */\n    left?: number;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Tooltip placement.\n     * @default 'top'\n     */\n    placement?: TooltipPlacement;\n\n    /**\n     * Right position relative to reference element.\n     */\n    right?: number;\n\n    /**\n     * Tooltip title.\n     */\n    title: ButtonProps['children'];\n\n    /**\n     * Additional style for tooltip wrapper.\n     */\n    tooltipStyle?: ViewProps['style'];\n\n    /**\n     * The additional amount to vertically shift.\n     * @default 4\n     */\n    verticalOffset?: number;\n\n    /**\n     * If `true`, the tooltip is shown.\n     * @default false\n     */\n    visible?: boolean;\n\n    /**\n     * Tooltip arrow layout.\n     * If 'undefined', the arrow will be centered on tooltip.\n     */\n    arrowLayout?: {\n        placement: TooltipArrowPlacement;\n        offset: number;\n    }\n\n    /**\n     * number of tooltip's title lines\n     * @default 1\n     */\n    numberOfTitleLines?: TextProps['numberOfLines'];\n\n    /**\n     * position of tooltip before onLayout call\n     * @default  { height: 0, width: 0 , x: 0, y: 0}\n     */\n    initialLayout?: TooltipInitialLayout;\n}> {}\n"],"mappings":""}

package/build/module/Tooltip/Tooltip.js

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, Text, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-import { rgb } from '@fountain-ui/utils';
+import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
-import { Close as CloseIcon } from '../internal/icons';
-import UpArrow from './UpArrow';
-const DEFAULT_OPACITY = 0.8;
+import Beak from './Beaks';
+const DEFAULT_BEAK_LAYOUT = {
+  offset: 0,
+  placement: 'middle'
+};
 const INITIAL_LAYOUT = {
   width: 0,
   height: 0,
@@ -16,9 +18,53 @@ const INITIAL_LAYOUT = {
 const ANIMATION_CONFIG = {
   duration: 150
 };
+
+const getFlexDirection = placement => {
+  switch (placement) {
+    case 'right':
+      return 'row-reverse';
+
+    case 'bottom':
+      return 'column-reverse';
+
+    case 'left':
+      return 'row';
+
+    case 'top':
+    default:
+      return 'column';
+  }
+};
+
+const useStyles = function () {
+  const theme = useTheme();
+  return {
+    root: {
+      position: 'absolute',
+      zIndex: theme.zIndex.tooltip
+    },
+    content: {
+      backgroundColor: theme.palette.fill.base,
+      paddingHorizontal: theme.spacing(2),
+      paddingVertical: theme.spacing(1.5)
+    },
+    small: {
+      borderRadius: theme.shape.radius.sm,
+      paddingHorizontal: theme.spacing(2),
+      paddingVertical: theme.spacing(1.5)
+    },
+    large: {
+      borderRadius: 5,
+      paddingBottom: theme.spacing(2.5),
+      paddingHorizontal: theme.spacing(4),
+      paddingTop: theme.spacing(2)
+    }
+  };
+};
+
 export default function Tooltip(props) {
   const {
-    arrowLayout,
+    beakLayout = DEFAULT_BEAK_LAYOUT,
     children,
     initialLayout = INITIAL_LAYOUT,
     left,
@@ -26,13 +72,19 @@ export default function Tooltip(props) {
     placement = 'top',
     right,
     numberOfTitleLines = 1,
+    size = 'small',
     style,
     title,
     tooltipStyle,
     verticalOffset = 4,
     visible = false
   } = props;
+  const {
+    offset: beakOffset,
+    placement: beakPlacement
+  } = beakLayout;
   const theme = useTheme();
+  const styles = useStyles();
   const [layout, setLayout] = useState(initialLayout);
   const scale = useSharedValue(0);
   const animatedStyle = useAnimatedStyle(() => ({
@@ -40,16 +92,14 @@ export default function Tooltip(props) {
       scale: scale.value
     }]
   }), []);
-  const [r, g, b] = rgb(theme.palette.primary.main);
-  const totalVerticalOffset = -(layout.height + verticalOffset);
+  const flexDirection = getFlexDirection(placement);
+  const isVerticalPlacement = placement === 'top' || placement === 'bottom';
+  const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);
   const tooltipLayoutStyle = {
-    alignItems: (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'left' ? 'flex-start' : (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'right' ? 'flex-end' : 'center',
-    bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
+    alignItems: beakPlacement === 'start' ? 'flex-start' : beakPlacement === 'end' ? 'flex-end' : 'center',
+    flexDirection,
     left,
-    position: 'absolute',
     right,
-    top: placement === 'top' ? totalVerticalOffset : undefined,
-    zIndex: theme.zIndex.tooltip,
     height: visible ? undefined : 0,
     overflow: visible ? undefined : 'hidden',
     ...Platform.select({
@@ -57,53 +107,54 @@ export default function Tooltip(props) {
         display: visible ? 'flex' : 'none'
       },
       default: {}
-    })
+    }),
+    [placement]: totalOffset
   };
+  const contentStyle = css([styles.content, styles[size], isVerticalPlacement ? {
+    width: '100%'
+  } : {
+    flexGrow: 1,
+    flexShrink: 1
+  }]);
   useEffect(() => {
     const nextScaleValue = visible ? 1 : 0;
     scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
   }, [visible]);
-  const touchableStyle = {
-    alignItems: 'center',
-    backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
-    borderRadius: theme.shape.roundness,
-    flexDirection: 'row',
-    padding: theme.spacing(2),
-    width: '100%'
-  };
   const fontStyle = createFontStyle(theme, {
-    selector: typo => typo.caption2,
-    color: theme.palette.primary.contrastTextColor
+    selector: typo => size === 'large' ? typographyOf({
+      fontSize: 13,
+      lineHeight: 19.5,
+      fontFamily: 'Pretendard-Regular',
+      letterSpacing: 0
+    }) // TODO: change caption2.
+    : typo.caption3.regular,
+    color: theme.palette.text.strongInverse
   });
   const textStyle = css([fontStyle, {
-    marginRight: theme.spacing(2),
     flexShrink: 1
   }]);
-  const arrowStyle = css({ ...(arrowLayout && {
-      [arrowLayout.placement]: arrowLayout.offset
-    })
+  const beakStyle = css({
+    transform: [isVerticalPlacement ? {
+      translateX: beakOffset
+    } : {
+      translateY: beakOffset
+    }]
   });
   const buttonElem = /*#__PURE__*/React.createElement(ButtonBase, {
     pressEffect: 'none',
-    onPress: onClose
-  }, /*#__PURE__*/React.createElement(View, {
-    style: css(touchableStyle)
-  }, /*#__PURE__*/React.createElement(Text, {
-    children: title // TODO: Should we provide text prop customization?
-    ,
+    onPress: onClose,
+    style: contentStyle
+  }, /*#__PURE__*/React.createElement(Text // TODO: Should we provide text prop customization?
+  , {
     numberOfLines: numberOfTitleLines,
     style: textStyle
-  }), /*#__PURE__*/React.createElement(CloseIcon, {
-    fill: theme.palette.primary.contrastTextColor,
-    width: 20,
-    height: 20
-  })));
-  const arrowElem = /*#__PURE__*/React.createElement(View, {
-    style: arrowStyle
-  }, /*#__PURE__*/React.createElement(UpArrow, {
-    upsideDown: placement === 'top',
-    fill: theme.palette.primary.main,
-    opacity: DEFAULT_OPACITY
+  }, title));
+  const beakElem = /*#__PURE__*/React.createElement(View, {
+    style: beakStyle
+  }, /*#__PURE__*/React.createElement(Beak, {
+    fill: theme.palette.fill.base,
+    placement: placement,
+    size: size
   }));
   return /*#__PURE__*/React.createElement(View, {
     style: style
@@ -115,8 +166,8 @@ export default function Tooltip(props) {
 
       setLayout(event.nativeEvent.layout);
     },
-    style: [animatedStyle, tooltipLayoutStyle, tooltipStyle]
-  }, placement === 'top' ? /*#__PURE__*/React.createElement(React.Fragment, null, buttonElem, arrowElem) : /*#__PURE__*/React.createElement(React.Fragment, null, arrowElem, buttonElem)));
+    style: [styles.root, animatedStyle, tooltipLayoutStyle, tooltipStyle]
+  }, buttonElem, beakElem));
 }
 ;
 //# sourceMappingURL=Tooltip.js.map