@fountain-ui/core 2.0.0-beta.9 → 2.0.0-beta.91

package/build/module/SnackbarContent/SnackbarContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","rgb","createFontStyle","css","useTheme","ButtonBase","Paper","Spacer","useStyles","theme","backgroundColor","palette","primary","main","r","g","b","useMemo","root","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","alignItems","flexDirection","justifyContent","SnackbarContent","props","actionLabel","message","onActionPress","style","otherProps","styles","messageFontStyle","selector","typo","body2","color","contrastTextColor","labelFontStyle","button2","labelStyle","padding","undefined"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport Paper from '../Paper';\nimport Spacer from '../Spacer';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n    const theme = useTheme();\n\n    const backgroundColor = theme.palette.primary.main;\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    return {\n        root: {\n            backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,\n            borderRadius: theme.shape.roundness,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3),\n        },\n        action: {\n            alignItems: 'center',\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            paddingVertical: theme.spacing(2),\n        },\n    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        actionLabel,\n        message,\n        onActionPress,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const messageFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.body2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const labelFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.button2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const labelStyle = css([\n        labelFontStyle,\n        { padding: theme.spacing(2) },\n    ]);\n\n    return (\n        <Paper\n            elevation={0}\n            style={css([\n                styles.root,\n                actionLabel ? styles.action : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            <Text\n                children={message}\n                style={css([\n                    messageFontStyle,\n                ])}\n            />\n\n            {actionLabel ? (\n                <React.Fragment>\n                    <Spacer size={1}/>\n\n                    <ButtonBase\n                        onPress={onActionPress}\n                        pressEffect={'none'}\n                    >\n                        <Text\n                            children={actionLabel}\n                            style={labelStyle}\n                        />\n                    </ButtonBase>\n                </React.Fragment>\n            ) : null}\n        </Paper>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,MAAP,MAAmB,WAAnB;;AAKA,MAAMC,SAA2C,GAAG,YAAmC;EACnF,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,MAAMM,eAAe,GAAGD,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsBC,IAA9C;EACA,MAAM,CAACC,CAAD,EAAIC,CAAJ,EAAOC,CAAP,IAAYjB,KAAK,CAACkB,OAAN,CAAc,MAAMhB,GAAG,CAACS,eAAD,CAAvB,EAA0C,CAACA,eAAD,CAA1C,CAAlB;EAEA,OAAO;IACHQ,IAAI,EAAE;MACFR,eAAe,EAAG,QAAOI,CAAE,KAAIC,CAAE,KAAIC,CAAE,OADrC;MAEFG,YAAY,EAAEV,KAAK,CAACW,KAAN,CAAYC,SAFxB;MAGFC,iBAAiB,EAAEb,KAAK,CAACc,OAAN,CAAc,CAAd,CAHjB;MAIFC,eAAe,EAAEf,KAAK,CAACc,OAAN,CAAc,CAAd;IAJf,CADH;IAOHE,MAAM,EAAE;MACJC,UAAU,EAAE,QADR;MAEJC,aAAa,EAAE,KAFX;MAGJC,cAAc,EAAE,eAHZ;MAIJJ,eAAe,EAAEf,KAAK,CAACc,OAAN,CAAc,CAAd;IAJb;EAPL,CAAP;AAcH,CApBD;;AAsBA,eAAe,SAASM,eAAT,CAAyBC,KAAzB,EAAsD;EACjE,MAAM;IACFC,WADE;IAEFC,OAFE;IAGFC,aAHE;IAIFC,KAJE;IAKF,GAAGC;EALD,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAG5B,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,MAAMiC,gBAAgB,GAAGnC,eAAe,CAACO,KAAD,EAAQ;IAC5C6B,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,KADmB;IAE5CC,KAAK,EAAEhC,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsB8B;EAFe,CAAR,CAAxC;EAKA,MAAMC,cAAc,GAAGzC,eAAe,CAACO,KAAD,EAAQ;IAC1C6B,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACK,OADiB;IAE1CH,KAAK,EAAEhC,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsB8B;EAFa,CAAR,CAAtC;EAKA,MAAMG,UAAU,GAAG1C,GAAG,CAAC,CACnBwC,cADmB,EAEnB;IAAEG,OAAO,EAAErC,KAAK,CAACc,OAAN,CAAc,CAAd;EAAX,CAFmB,CAAD,CAAtB;EAKA,oBACI,oBAAC,KAAD;IACI,SAAS,EAAE,CADf;IAEI,KAAK,EAAEpB,GAAG,CAAC,CACPiC,MAAM,CAAClB,IADA,EAEPa,WAAW,GAAGK,MAAM,CAACX,MAAV,GAAmBsB,SAFvB,EAGPb,KAHO,CAAD;EAFd,GAOQC,UAPR,gBASI,oBAAC,IAAD;IACI,QAAQ,EAAEH,OADd;IAEI,KAAK,EAAE7B,GAAG,CAAC,CACPkC,gBADO,CAAD;EAFd,EATJ,EAgBKN,WAAW,gBACR,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EADJ,eAGI,oBAAC,UAAD;IACI,OAAO,EAAEE,aADb;IAEI,WAAW,EAAE;EAFjB,gBAII,oBAAC,IAAD;IACI,QAAQ,EAAEF,WADd;IAEI,KAAK,EAAEc;EAFX,EAJJ,CAHJ,CADQ,GAcR,IA9BR,CADJ;AAkCH;AAAA"}
+{"version":3,"names":["React","Text","lightTheme","darkTheme","rgb","createFontStyle","css","useTheme","ButtonBase","Column","Paper","Spacer","Typography","useStyles","theme","backgroundColor","palette","primary","main","r","g","b","useMemo","root","flexDirection","alignItems","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","SnackbarContent","props","actionLabel","message","title","onActionPress","style","startIcon","otherProps","styles","titleFontStyle","selector","typo","subtitle2","color","mode","contrastTextColor","messageFontStyle","body2","text","secondary","labelFontStyle","button2","labelStyle","padding","undefined"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { lightTheme, darkTheme } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Paper from '../Paper';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n    const theme = useTheme();\n\n    const backgroundColor = theme.palette.primary.main;\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    return {\n        root: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,\n            borderRadius: theme.shape.roundness,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3),\n        },\n        action: {\n            paddingVertical: theme.spacing(2),\n        },\n    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        actionLabel,\n        message,\n        title,\n        onActionPress,\n        style,\n        startIcon,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: theme.mode === 'light'\n            ? lightTheme.palette.primary.contrastTextColor\n            : lightTheme.palette.primary.main,\n    });\n\n    const messageFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.body2,\n        color: title\n            ? theme.mode === 'light'\n                ? darkTheme.palette.text.secondary\n                : lightTheme.palette.text.secondary\n            : theme.palette.primary.contrastTextColor,\n    });\n\n    const labelFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.button2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const labelStyle = css([\n        labelFontStyle,\n        { padding: theme.spacing(2) },\n    ]);\n\n    return (\n        <Paper\n            elevation={0}\n            style={css([\n                styles.root,\n                actionLabel ? styles.action : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {startIcon ? (\n                <React.Fragment>\n                    {startIcon}\n\n                    <Spacer size={3}/>\n                </React.Fragment>\n            ) : null}\n\n            <Column>\n                {title ? (\n                    <Typography\n                        children={title}\n                        style={css([titleFontStyle])}\n                    />\n                ) : null}\n\n                <Text\n                    children={message}\n                    style={css([messageFontStyle])}\n                />\n            </Column>\n\n            {actionLabel ? (\n                <React.Fragment>\n                    <Spacer flex={1}/>\n\n                    <Spacer size={1}/>\n\n                    <ButtonBase\n                        onPress={onActionPress}\n                        pressEffect={'none'}\n                    >\n                        <Text\n                            children={actionLabel}\n                            style={labelStyle}\n                        />\n                    </ButtonBase>\n                </React.Fragment>\n            ) : null}\n        </Paper>\n    );\n};\n"],"mappings":"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"}

package/build/module/SnackbarContent/SnackbarContentProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["SnackbarContentProps.ts"],"sourcesContent":["import type { OverridableComponentProps } from '../types';\nimport type { PaperProps } from '../Paper';\n\nexport default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {\n    /**\n     * The text to use for the action component.\n     */\n    actionLabel?: string,\n\n    /**\n     * The message to display.\n     */\n    message?: string,\n\n    /**\n     * Callback fired when the action component pressed.\n     */\n    onActionPress?: () => void\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["SnackbarContentProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { PaperProps } from '../Paper';\n\nexport default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {\n    /**\n     * The text to use for the action component.\n     */\n    actionLabel?: string;\n\n    /**\n     * The message to display.\n     */\n    message?: string;\n\n    /**\n     * Callback fired when the action component pressed.\n     */\n    onActionPress?: () => void;\n\n    /**\n     * Element placed before the title and message.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The title to display.\n     */\n    title?: string;\n}> {}\n"],"mappings":""}

package/build/module/SvgIcon/SvgIcon.js

@@ -8,7 +8,7 @@ export default function SvgIcon(props) {
     color: colorProp = 'primary',
     height = 24,
     style: styleProp,
-    viewBox = '0 0 20 20',
+    viewBox = '0 0 24 24',
     width = 24,
     ...otherProps
   } = props;

package/build/module/SvgIcon/SvgIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Svg","css","useTheme","SvgIcon","props","color","colorProp","height","style","styleProp","viewBox","width","otherProps","theme","palette","main","flexShrink"],"sources":["SvgIcon.tsx"],"sourcesContent":["import React from 'react';\nimport Svg from 'react-native-svg';\nimport { css, useTheme } from '../styles';\nimport type SvgIconProps from './SvgIconProps';\n\nexport default function SvgIcon(props: SvgIconProps) {\n    const {\n        color: colorProp = 'primary',\n        height = 24,\n        style: styleProp,\n        viewBox = '0 0 20 20',\n        width = 24,\n        ...otherProps\n    }: SvgIconProps = props;\n\n    const theme = useTheme();\n\n    const color = theme.palette[colorProp].main;\n\n    const style = css([\n        { flexShrink: 0 },\n        styleProp,\n    ]);\n\n    return (\n        <Svg\n            color={color}\n            fill={'currentColor'}\n            height={height}\n            style={style}\n            viewBox={viewBox}\n            width={width}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,GAAP,MAAgB,kBAAhB;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,KAAK,EAAEC,SAAS,GAAG,SADjB;IAEFC,MAAM,GAAG,EAFP;IAGFC,KAAK,EAAEC,SAHL;IAIFC,OAAO,GAAG,WAJR;IAKFC,KAAK,GAAG,EALN;IAMF,GAAGC;EAND,IAOYR,KAPlB;EASA,MAAMS,KAAK,GAAGX,QAAQ,EAAtB;EAEA,MAAMG,KAAK,GAAGQ,KAAK,CAACC,OAAN,CAAcR,SAAd,EAAyBS,IAAvC;EAEA,MAAMP,KAAK,GAAGP,GAAG,CAAC,CACd;IAAEe,UAAU,EAAE;EAAd,CADc,EAEdP,SAFc,CAAD,CAAjB;EAKA,oBACI,oBAAC,GAAD;IACI,KAAK,EAAEJ,KADX;IAEI,IAAI,EAAE,cAFV;IAGI,MAAM,EAAEE,MAHZ;IAII,KAAK,EAAEC,KAJX;IAKI,OAAO,EAAEE,OALb;IAMI,KAAK,EAAEC;EANX,GAOQC,UAPR,EADJ;AAWH;AAAA"}
+{"version":3,"names":["React","Svg","css","useTheme","SvgIcon","props","color","colorProp","height","style","styleProp","viewBox","width","otherProps","theme","palette","main","flexShrink"],"sources":["SvgIcon.tsx"],"sourcesContent":["import React from 'react';\nimport Svg from 'react-native-svg';\nimport { css, useTheme } from '../styles';\nimport type SvgIconProps from './SvgIconProps';\n\nexport default function SvgIcon(props: SvgIconProps) {\n    const {\n        color: colorProp = 'primary',\n        height = 24,\n        style: styleProp,\n        viewBox = '0 0 24 24',\n        width = 24,\n        ...otherProps\n    }: SvgIconProps = props;\n\n    const theme = useTheme();\n\n    const color = theme.palette[colorProp].main;\n\n    const style = css([\n        { flexShrink: 0 },\n        styleProp,\n    ]);\n\n    return (\n        <Svg\n            color={color}\n            fill={'currentColor'}\n            height={height}\n            style={style}\n            viewBox={viewBox}\n            width={width}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,GAAP,MAAgB,kBAAhB;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,KAAK,EAAEC,SAAS,GAAG,SADjB;IAEFC,MAAM,GAAG,EAFP;IAGFC,KAAK,EAAEC,SAHL;IAIFC,OAAO,GAAG,WAJR;IAKFC,KAAK,GAAG,EALN;IAMF,GAAGC;EAND,IAOYR,KAPlB;EASA,MAAMS,KAAK,GAAGX,QAAQ,EAAtB;EAEA,MAAMG,KAAK,GAAGQ,KAAK,CAACC,OAAN,CAAcR,SAAd,EAAyBS,IAAvC;EAEA,MAAMP,KAAK,GAAGP,GAAG,CAAC,CACd;IAAEe,UAAU,EAAE;EAAd,CADc,EAEdP,SAFc,CAAD,CAAjB;EAKA,oBACI,oBAAC,GAAD;IACI,KAAK,EAAEJ,KADX;IAEI,IAAI,EAAE,cAFV;IAGI,MAAM,EAAEE,MAHZ;IAII,KAAK,EAAEC,KAJX;IAKI,OAAO,EAAEE,OALb;IAMI,KAAK,EAAEC;EANX,GAOQC,UAPR,EADJ;AAWH;AAAA"}

package/build/module/Tab/Tab.js

@@ -1,7 +1,7 @@
 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 { Platform, Text } from 'react-native';
+import React, { cloneElement } from 'react';
+import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
 import TabBase from '../TabBase';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
@@ -10,54 +10,96 @@ const styles = StyleSheet.create({
   root: { // TODO: Remove redundant platform checking
     ...(Platform.OS === 'web' ? {
       minWidth: 'auto'
-    } : {})
-  },
-  primary: {
-    minHeight: 48
-  },
-  secondary: {
-    minHeight: 48
+    } : {}),
+    minHeight: 40
   },
   bottomNavigation: {
     minHeight: 56
+  },
+  filledInner: {
+    justifyContent: 'center'
+  },
+  tertiary: {
+    minHeight: 44
   }
 });
 export default function Tab(props) {
   const {
     badgeVisible = false,
     children,
-    enableIndicator,
+    enableIndicator = false,
     icon: defaultIcon,
-    selected,
+    indicatorColor = 'primary',
+    indicatorSize = 'full',
+    selected = false,
     selectedIcon,
     variant = 'primary',
     style,
+    onTabInnerLayout,
     ...otherProps
   } = props;
   const theme = useTheme();
   const vertical = variant === 'bottom-navigation';
-  const color = selected ? theme.palette.text.primary : theme.palette.text.hint;
-  const tabBaseStyle = css([styles.root, variant === 'primary' ? styles.primary : variant === 'secondary' ? styles.secondary : styles.bottomNavigation, style]);
+  const color = selected ? theme.palette.text.primary : variant === 'contained' ? theme.palette.text.secondary : theme.palette.text.hint;
+  const containedStyle = {
+    borderColor: selected ? theme.palette.primary.main : theme.palette.border.default,
+    borderRadius: theme.shape.roundnessExtra,
+    borderWidth: selected ? 1.5 : 1,
+    minHeight: 'auto',
+    paddingHorizontal: theme.spacing(3),
+    paddingVertical: theme.spacing(1.5)
+  };
+  const tabBaseStyle = css([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, variant === 'contained' && containedStyle, variant === 'tertiary' && styles.tertiary, style]);
+  const tabInnerStyle = css([styles.root, styles.filledInner]);
   const fontStyle = createFontStyle(theme, {
-    selector: typo => variant === 'primary' ? typo.h2 : variant === 'secondary' ? typo.button2 : typo.flag,
+    selector: typo => {
+      switch (variant) {
+        case 'primary':
+          return typo.h2;
+
+        case 'secondary':
+          return typo.button2;
+
+        case 'tertiary':
+          return typo.h3;
+
+        case 'contained':
+          return selected ? { ...typo.subtitle2,
+            fontWeight: typo.fontWeight.medium
+          } : typo.body2;
+
+        default:
+          return typo.flag;
+      }
+    },
     color
   });
   const pressEffect = selected ? 'none' : 'opacity';
   const icon = selected ? selectedIcon || defaultIcon : defaultIcon;
-  const iconElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
+  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
     fill: color
   }) : null;
-  return /*#__PURE__*/React.createElement(TabBase, _extends({
-    pressEffect: pressEffect,
-    style: tabBaseStyle,
-    vertical: vertical
-  }, otherProps), /*#__PURE__*/React.createElement(Badge, {
+  const tabElement = typeof children !== 'string' ? /*#__PURE__*/React.cloneElement(children, {
+    selected
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
     children: iconElement,
     invisible: !badgeVisible
   }), /*#__PURE__*/React.createElement(Text, {
     children: children,
     style: css(fontStyle)
-  }), enableIndicator ? /*#__PURE__*/React.createElement(TabIndicator, null) : null);
+  }));
+  const tabIndicator = enableIndicator && selected ? /*#__PURE__*/React.createElement(TabIndicator, {
+    indicatorSize: indicatorSize,
+    color: indicatorColor
+  }) : null;
+  return /*#__PURE__*/React.createElement(TabBase, _extends({
+    pressEffect: pressEffect,
+    style: tabBaseStyle,
+    vertical: vertical
+  }, otherProps), indicatorSize === 'fit-content' ? /*#__PURE__*/React.createElement(View, {
+    onLayout: onTabInnerLayout,
+    style: tabInnerStyle
+  }, tabElement, tabIndicator) : /*#__PURE__*/React.createElement(React.Fragment, null, tabElement, tabIndicator));
 }
 ;
 //# sourceMappingURL=Tab.js.map

package/build/module/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","Text","Badge","TabBase","createFontStyle","css","StyleSheet","useTheme","TabIndicator","styles","create","root","OS","minWidth","primary","minHeight","secondary","bottomNavigation","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","otherProps","theme","vertical","color","palette","text","hint","tabBaseStyle","fontStyle","selector","typo","h2","button2","flag","pressEffect","iconElement","cloneElement","fill"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type TabProps from './TabProps';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    primary: {\n        minHeight: 48,\n    },\n    secondary: {\n        minHeight: 48,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator,\n        icon: defaultIcon,\n        selected,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'primary'\n            ? styles.primary\n            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? React.cloneElement(icon, { fill: color }) : null;\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n\n            {enableIndicator ? <TabIndicator/> : null}\n        </TabBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,IAAnB,QAA+B,cAA/B;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AACA,OAAOC,YAAP,MAAyB,gBAAzB;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,OAAO,EAAE;IACLC,SAAS,EAAE;EADN,CALoB;EAQ7BC,SAAS,EAAE;IACPD,SAAS,EAAE;EADJ,CARkB;EAW7BE,gBAAgB,EAAE;IACdF,SAAS,EAAE;EADG;AAXW,CAAlB,CAAf;AAgBA,eAAe,SAASG,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAHE;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QALE;IAMFC,YANE;IAOFC,OAAO,GAAG,SAPR;IAQFC,KARE;IASF,GAAGC;EATD,IAUFV,KAVJ;EAYA,MAAMW,KAAK,GAAGvB,QAAQ,EAAtB;EAEA,MAAMwB,QAAQ,GAAGJ,OAAO,KAAK,mBAA7B;EAEA,MAAMK,KAAK,GAAGP,QAAQ,GAAGK,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBpB,OAAtB,GAAgCgB,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBC,IAAzE;EAEA,MAAMC,YAAY,GAAG/B,GAAG,CAAC,CACrBI,MAAM,CAACE,IADc,EAErBgB,OAAO,KAAK,SAAZ,GACMlB,MAAM,CAACK,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0BlB,MAAM,CAACO,SAAjC,GAA6CP,MAAM,CAACQ,gBAJtC,EAKrBW,KALqB,CAAD,CAAxB;EAQA,MAAMS,SAAS,GAAGjC,eAAe,CAAC0B,KAAD,EAAQ;IACrCQ,QAAQ,EAAGC,IAAD,IAAUZ,OAAO,KAAK,SAAZ,GACdY,IAAI,CAACC,EADS,GAEbb,OAAO,KAAK,WAAZ,GAA0BY,IAAI,CAACE,OAA/B,GAAyCF,IAAI,CAACG,IAHhB;IAIrCV;EAJqC,CAAR,CAAjC;EAOA,MAAMW,WAAW,GAAGlB,QAAQ,GAAG,MAAH,GAAY,SAAxC;EAEA,MAAMF,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMoB,WAAW,GAAGrB,IAAI,gBAAGxB,KAAK,CAAC8C,YAAN,CAAmBtB,IAAnB,EAAyB;IAAEuB,IAAI,EAAEd;EAAR,CAAzB,CAAH,GAA+C,IAAvE;EAEA,oBACI,oBAAC,OAAD;IACI,WAAW,EAAEW,WADjB;IAEI,KAAK,EAAEP,YAFX;IAGI,QAAQ,EAAEL;EAHd,GAIQF,UAJR,gBAMI,oBAAC,KAAD;IACI,QAAQ,EAAEe,WADd;IAEI,SAAS,EAAE,CAACxB;EAFhB,EANJ,eAWI,oBAAC,IAAD;IACI,QAAQ,EAAEC,QADd;IAEI,KAAK,EAAEhB,GAAG,CAACgC,SAAD;EAFd,EAXJ,EAgBKf,eAAe,gBAAG,oBAAC,YAAD,OAAH,GAAqB,IAhBzC,CADJ;AAoBH;AAAA"}
+{"version":3,"names":["React","cloneElement","Platform","Text","View","Badge","TabBase","createFontStyle","css","StyleSheet","useTheme","TabIndicator","styles","create","root","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","tertiary","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","default","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","tabInnerStyle","fontStyle","selector","typo","h2","button2","h3","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","fill","tabElement","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TabProps from './TabProps';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n        minHeight: 40,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n    filledInner: {\n        justifyContent: 'center',\n    },\n    tertiary: {\n        minHeight: 44,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        indicatorColor = 'primary',\n        indicatorSize = 'full',\n        selected = false,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected\n        ? theme.palette.text.primary\n        : variant === 'contained'\n            ? theme.palette.text.secondary\n            : theme.palette.text.hint;\n\n    const containedStyle = {\n        borderColor: selected ? theme.palette.primary.main : theme.palette.border.default,\n        borderRadius: theme.shape.roundnessExtra,\n        borderWidth: selected ? 1.5 : 1,\n        minHeight: 'auto',\n        paddingHorizontal: theme.spacing(3),\n        paddingVertical: theme.spacing(1.5),\n    };\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'bottom-navigation' && styles.bottomNavigation,\n        variant === 'contained' && containedStyle,\n        variant === 'tertiary' && styles.tertiary,\n        style,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.root,\n        styles.filledInner,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => {\n            switch (variant) {\n                case 'primary':\n                    return typo.h2;\n                case 'secondary':\n                    return typo.button2;\n                case 'tertiary':\n                    return typo.h3;\n                case 'contained':\n                    return selected\n                        ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }\n                        : typo.body2;\n                default:\n                    return typo.flag;\n            }\n        },\n        color,\n    });\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;\n\n    const tabElement = typeof children !== 'string' ? (\n        React.cloneElement(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n        </React.Fragment>\n    );\n    const tabIndicator = (enableIndicator && selected)\n        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>\n        : null;\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            {indicatorSize === 'fit-content' ? (\n                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                    {tabElement}\n\n                    {tabIndicator}\n                </View>\n            ) : (\n                <React.Fragment>\n                    {tabElement}\n\n                    {tabIndicator}\n                </React.Fragment>\n            )}\n        </TabBase>\n    );\n};\n"],"mappings":"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"}

package/build/module/Tab/TabIndicator.js

@@ -2,22 +2,26 @@ import React from 'react';
 import { View } from 'react-native';
 import { useTheme } from '../styles';
 
-const useStyles = function () {
+const useStyles = function (color, indicatorSize) {
   const theme = useTheme();
   return {
     root: {
-      backgroundColor: theme.palette.secondary.main,
+      backgroundColor: theme.palette[color].main,
       bottom: 0,
-      height: 4,
-      left: 12,
-      right: 12,
+      height: 2,
+      left: indicatorSize === 'fit-content' ? 0 : 12,
+      right: indicatorSize === 'fit-content' ? 0 : 12,
       position: 'absolute'
     }
   };
 };
 
-const TabIndicator = function TabIndicator() {
-  const styles = useStyles();
+const TabIndicator = function TabIndicator(_ref) {
+  let {
+    indicatorSize,
+    color
+  } = _ref;
+  const styles = useStyles(color, indicatorSize);
   return /*#__PURE__*/React.createElement(View, {
     style: styles.root
   });

package/build/module/Tab/TabIndicator.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","useTheme","useStyles","theme","root","backgroundColor","palette","secondary","main","bottom","height","left","right","position","TabIndicator","styles","memo"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            bottom: 0,\n            height: 4,\n            left: 12,\n            right: 12,\n            position: 'absolute',\n        },\n    };\n};\n\nconst TabIndicator = function TabIndicator() {\n    const styles = useStyles();\n\n    return (\n        <View\n            style={styles.root}\n        />\n    );\n};\n\nexport default React.memo(TabIndicator);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,QAAT,QAAyB,WAAzB;;AAIA,MAAMC,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,IAAI,EAAE,EAJJ;MAKFC,KAAK,EAAE,EALL;MAMFC,QAAQ,EAAE;IANR;EADH,CAAP;AAUH,CAbD;;AAeA,MAAMC,YAAY,GAAG,SAASA,YAAT,GAAwB;EACzC,MAAMC,MAAM,GAAGb,SAAS,EAAxB;EAEA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEa,MAAM,CAACX;EADlB,EADJ;AAKH,CARD;;AAUA,4BAAeL,KAAK,CAACiB,IAAN,CAAWF,YAAX,CAAf"}
+{"version":3,"names":["React","View","useTheme","useStyles","color","indicatorSize","theme","root","backgroundColor","palette","main","bottom","height","left","right","position","TabIndicator","styles","memo"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { TabIndicatorColor, TabIndicatorSize } from './TabProps';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: (color: TabIndicatorColor, indicatorSize: TabIndicatorSize) => TabIndicatorStyles =\n    function (color: TabIndicatorColor, indicatorSize): TabIndicatorStyles {\n        const theme = useTheme();\n\n        return {\n            root: {\n                backgroundColor: theme.palette[color].main,\n                bottom: 0,\n                height: 2,\n                left: indicatorSize === 'fit-content' ? 0 : 12,\n                right: indicatorSize === 'fit-content' ? 0 : 12,\n                position: 'absolute',\n            },\n        };\n    };\n\nconst TabIndicator = function TabIndicator({ indicatorSize, color }: { indicatorSize: TabIndicatorSize; color: TabIndicatorColor }) {\n    const styles = useStyles(color, indicatorSize);\n\n    return (\n        <View\n            style={styles.root}\n        />\n    );\n};\n\nexport default React.memo(TabIndicator);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,QAAT,QAAyB,WAAzB;;AAKA,MAAMC,SAA4F,GAC9F,UAAUC,KAAV,EAAoCC,aAApC,EAAuE;EACnE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcL,KAAd,EAAqBM,IADpC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,IAAI,EAAER,aAAa,KAAK,aAAlB,GAAkC,CAAlC,GAAsC,EAJ1C;MAKFS,KAAK,EAAET,aAAa,KAAK,aAAlB,GAAkC,CAAlC,GAAsC,EAL3C;MAMFU,QAAQ,EAAE;IANR;EADH,CAAP;AAUH,CAdL;;AAgBA,MAAMC,YAAY,GAAG,SAASA,YAAT,OAA+G;EAAA,IAAzF;IAAEX,aAAF;IAAiBD;EAAjB,CAAyF;EAChI,MAAMa,MAAM,GAAGd,SAAS,CAACC,KAAD,EAAQC,aAAR,CAAxB;EAEA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEY,MAAM,CAACV;EADlB,EADJ;AAKH,CARD;;AAUA,4BAAeP,KAAK,CAACkB,IAAN,CAAWF,YAAX,CAAf"}

package/build/module/Tab/TabProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary';\nexport type TabIndicatorSize = 'full' | 'fit-content';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * Tab indicator color\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'full'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tab';\nexport type { default as TabProps, TabVariant } from './TabProps';"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB"}
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tab';\nexport type { default as TabProps, TabVariant, TabIndicatorSize } from './TabProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB"}

package/build/module/Tabs/IndexAwareTab.js

@@ -0,0 +1,23 @@
+import { cloneElement, useContext, useEffect, useState } from 'react';
+import InternalContext from './InternalContext';
+export default function IndexAwareTab(props) {
+  const {
+    children,
+    index,
+    initialIndex
+  } = props;
+  const [selected, setSelected] = useState(initialIndex === index);
+  const {
+    indexStore
+  } = useContext(InternalContext);
+  useEffect(() => {
+    return indexStore.subscribe(currentIndex => {
+      setSelected(currentIndex === index);
+    });
+  }, [indexStore, index]);
+  return /*#__PURE__*/cloneElement(children, {
+    selected
+  });
+}
+;
+//# sourceMappingURL=IndexAwareTab.js.map

package/build/module/Tabs/IndexAwareTab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cloneElement","useContext","useEffect","useState","InternalContext","IndexAwareTab","props","children","index","initialIndex","selected","setSelected","indexStore","subscribe","currentIndex"],"sources":["IndexAwareTab.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { cloneElement, useContext, useEffect, useState } from 'react';\nimport InternalContext from './InternalContext';\n\nexport interface IndexAwareTabProps {\n    children: ReactElement;\n    index: number;\n    initialIndex: number;\n}\n\nexport default function IndexAwareTab(props: IndexAwareTabProps) {\n    const {\n        children,\n        index,\n        initialIndex,\n    } = props;\n\n    const [selected, setSelected] = useState(initialIndex === index);\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        return indexStore.subscribe((currentIndex) => {\n            setSelected(currentIndex === index);\n        });\n    }, [indexStore, index]);\n\n    return cloneElement(children, { selected });\n};\n"],"mappings":"AACA,SAAgBA,YAAhB,EAA8BC,UAA9B,EAA0CC,SAA1C,EAAqDC,QAArD,QAAqE,OAArE;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAQA,eAAe,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM,CAACI,QAAD,EAAWC,WAAX,IAA0BR,QAAQ,CAACM,YAAY,KAAKD,KAAlB,CAAxC;EAEA,MAAM;IAAEI;EAAF,IAAiBX,UAAU,CAACG,eAAD,CAAjC;EAEAF,SAAS,CAAC,MAAM;IACZ,OAAOU,UAAU,CAACC,SAAX,CAAsBC,YAAD,IAAkB;MAC1CH,WAAW,CAACG,YAAY,KAAKN,KAAlB,CAAX;IACH,CAFM,CAAP;EAGH,CAJQ,EAIN,CAACI,UAAD,EAAaJ,KAAb,CAJM,CAAT;EAMA,oBAAOR,YAAY,CAACO,QAAD,EAAW;IAAEG;EAAF,CAAX,CAAnB;AACH;AAAA"}

package/build/module/Tabs/InternalContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+import { MockStore } from '../store';
+const InternalContext = /*#__PURE__*/createContext({
+  indexStore: new MockStore()
+});
+export default InternalContext;
+//# sourceMappingURL=InternalContext.js.map

package/build/module/Tabs/InternalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","MockStore","InternalContext","indexStore"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport type { MonoStore } from '../store';\nimport { MockStore } from '../store';\n\nexport interface InternalContextValue {\n    indexStore: MonoStore<number>;\n}\n\nconst InternalContext = createContext<InternalContextValue>({\n    indexStore: new MockStore(),\n});\n\nexport default InternalContext;\n"],"mappings":"AAAA,SAASA,aAAT,QAA8B,OAA9B;AAEA,SAASC,SAAT,QAA0B,UAA1B;AAMA,MAAMC,eAAe,gBAAGF,aAAa,CAAuB;EACxDG,UAAU,EAAE,IAAIF,SAAJ;AAD4C,CAAvB,CAArC;AAIA,eAAeC,eAAf"}

package/build/module/Tabs/ScrollableTabsView.js

@@ -0,0 +1,22 @@
+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 { ScrollView } from 'react-native';
+import useScrollViewReaction from './useScrollViewReaction';
+export default function ScrollableTabsView(props) {
+  const {
+    coordinates,
+    initialIndex,
+    ...scrollViewProps
+  } = props;
+  const {
+    scrollViewRef,
+    onLayout
+  } = useScrollViewReaction(initialIndex, coordinates);
+  return /*#__PURE__*/React.createElement(ScrollView, _extends({
+    ref: scrollViewRef,
+    onLayout: onLayout
+  }, scrollViewProps));
+}
+;
+//# sourceMappingURL=ScrollableTabsView.js.map

package/build/module/Tabs/ScrollableTabsView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ScrollView","useScrollViewReaction","ScrollableTabsView","props","coordinates","initialIndex","scrollViewProps","scrollViewRef","onLayout"],"sources":["ScrollableTabsView.tsx"],"sourcesContent":["import React from 'react';\nimport type { ScrollViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport TabCoordinate from './TabCoordinate';\nimport useScrollViewReaction from './useScrollViewReaction';\n\nexport interface ScrollableTabsViewProps extends ScrollViewProps {\n    initialIndex: number;\n    coordinates: TabCoordinate[];\n}\n\nexport default function ScrollableTabsView(props: ScrollableTabsViewProps) {\n    const {\n        coordinates,\n        initialIndex,\n        ...scrollViewProps\n    } = props;\n\n    const { scrollViewRef, onLayout } = useScrollViewReaction(initialIndex, coordinates);\n\n    return (\n        <ScrollView\n            ref={scrollViewRef}\n            onLayout={onLayout}\n            {...scrollViewProps}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,UAAT,QAA2B,cAA3B;AAEA,OAAOC,qBAAP,MAAkC,yBAAlC;AAOA,eAAe,SAASC,kBAAT,CAA4BC,KAA5B,EAA4D;EACvE,MAAM;IACFC,WADE;IAEFC,YAFE;IAGF,GAAGC;EAHD,IAIFH,KAJJ;EAMA,MAAM;IAAEI,aAAF;IAAiBC;EAAjB,IAA8BP,qBAAqB,CAACI,YAAD,EAAeD,WAAf,CAAzD;EAEA,oBACI,oBAAC,UAAD;IACI,GAAG,EAAEG,aADT;IAEI,QAAQ,EAAEC;EAFd,GAGQF,eAHR,EADJ;AAOH;AAAA"}

package/build/module/Tabs/TabIndicator.js

@@ -1,17 +1,25 @@
 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 Animated, { useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
+import React, { useCallback, useContext, useEffect } from 'react';
+import { Animated, Easing } from 'react-native';
 import { useTheme } from '../styles';
+import { useAnimatedValue } from '../hooks';
+import { isNotAndroid12 } from '../utils';
 import { defaultCoordinate } from './TabCoordinate';
+import InternalContext from './InternalContext';
+const INDICATOR_WIDTH = 10;
+const INDICATOR_HEIGHT = 2;
+const SCROLLABLE_TABS_INSET = 12 * 2;
 
-const useStyles = function () {
+const useStyles = function (color) {
   const theme = useTheme();
   return {
     root: {
-      backgroundColor: theme.palette.secondary.main,
+      backgroundColor: theme.palette[color].main,
+      left: 0,
       bottom: 0,
-      height: 4,
+      width: INDICATOR_WIDTH,
+      height: INDICATOR_HEIGHT,
       position: 'absolute'
     },
     disabled: {
@@ -20,37 +28,70 @@ const useStyles = function () {
   };
 };
 
+const startAnimation = (value, toValue) => {
+  Animated.timing(value, {
+    toValue: toValue,
+    duration: 300,
+    easing: Easing.bezier(0.25, 1, 0.5, 1),
+    useNativeDriver: isNotAndroid12
+  }).start();
+};
+
 export default function TabIndicator(props) {
   const {
+    color = 'primary',
     coordinates,
     disabled,
+    initialIndex,
     scrollable,
-    scrollValue,
     style,
     ...otherProps
   } = props;
-  const styles = useStyles();
-  const layout = useDerivedValue(() => {
-    const rawScrollValue = scrollValue.value;
-    const index = Math.floor(rawScrollValue);
-    const offset = rawScrollValue % 1;
-    const coordinate = coordinates[index] ?? defaultCoordinate;
-    const nextCoordinate = coordinates[index + 1] ?? defaultCoordinate;
-    const x1 = offset * nextCoordinate.x1 + (1 - offset) * coordinate.x1;
-    const x2 = offset * nextCoordinate.x2 + (1 - offset) * coordinate.x2;
-    const leftInset = scrollable ? 12 : 0;
-    const rightInset = scrollable ? 24 : 0;
+  const styles = useStyles(color);
+  const computeAnimationValues = useCallback(currentIndex => {
+    const {
+      x1,
+      x2
+    } = coordinates[currentIndex] ?? defaultCoordinate;
+    const tabWidth = x2 - x1;
+    const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
+    const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
+    const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;
     return {
-      left: x1 + leftInset,
-      width: Math.max(x2 - x1 - rightInset, 0)
+      tx: nextTranslateX,
+      sx: nextScaleX
+    };
+  }, [coordinates, scrollable]);
+  const {
+    tx: initialTx,
+    sx: initialSx
+  } = computeAnimationValues(initialIndex);
+  const translateX = useAnimatedValue(initialTx);
+  const scaleX = useAnimatedValue(initialSx);
+  const {
+    indexStore
+  } = useContext(InternalContext);
+  useEffect(() => {
+    const scrollToIndex = index => {
+      const {
+        tx,
+        sx
+      } = computeAnimationValues(index);
+      startAnimation(translateX, tx);
+      startAnimation(scaleX, sx);
     };
-  });
-  const animatedStyle = useAnimatedStyle(() => ({
-    left: layout.value.left,
-    width: layout.value.width
-  }));
+
+    scrollToIndex(indexStore.getState());
+    return indexStore.subscribe(scrollToIndex);
+  }, [computeAnimationValues, coordinates, indexStore]);
   return /*#__PURE__*/React.createElement(Animated.View, _extends({
-    style: [styles.root, disabled ? styles.disabled : undefined, animatedStyle, style]
+    style: [styles.root, disabled ? styles.disabled : undefined, {
+      transform: [{
+        translateX
+      }, {
+        scaleX
+      }]
+    }, style]
   }, otherProps));
 }
 ;

package/build/module/Tabs/TabIndicator.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","useAnimatedStyle","useDerivedValue","useTheme","defaultCoordinate","useStyles","theme","root","backgroundColor","palette","secondary","main","bottom","height","position","disabled","TabIndicator","props","coordinates","scrollable","scrollValue","style","otherProps","styles","layout","rawScrollValue","value","index","Math","floor","offset","coordinate","nextCoordinate","x1","x2","leftInset","rightInset","left","width","max","animatedStyle","undefined"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport Animated, { useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            bottom: 0,\n            height: 4,\n            position: 'absolute',\n        },\n        disabled: {\n            height: 0,\n        },\n    };\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        coordinates,\n        disabled,\n        scrollable,\n        scrollValue,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const layout = useDerivedValue(() => {\n        const rawScrollValue = scrollValue.value;\n        const index = Math.floor(rawScrollValue);\n        const offset = rawScrollValue % 1;\n\n        const coordinate = coordinates[index] ?? defaultCoordinate;\n        const nextCoordinate = coordinates[index + 1] ?? defaultCoordinate;\n\n        const x1 = (offset * nextCoordinate.x1 + (1 - offset) * coordinate.x1);\n        const x2 = (offset * nextCoordinate.x2 + (1 - offset) * coordinate.x2);\n\n        const leftInset = scrollable ? 12 : 0;\n        const rightInset = scrollable ? 24 : 0;\n\n        return {\n            left: x1 + leftInset,\n            width: Math.max(x2 - x1 - rightInset, 0),\n        };\n    });\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        left: layout.value.left,\n        width: layout.value.width,\n    }));\n\n    return (\n        <Animated.View\n            style={[\n                styles.root,\n                disabled ? styles.disabled : undefined,\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,eAArC,QAA4D,yBAA5D;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAEA,SAASC,iBAAT,QAAkC,iBAAlC;;AAIA,MAAMC,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,IAAI,EAAE;MACFC,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,QAAQ,EAAE;IAJR,CADH;IAOHC,QAAQ,EAAE;MACNF,MAAM,EAAE;IADF;EAPP,CAAP;AAWH,CAdD;;AAgBA,eAAe,SAASG,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,WADE;IAEFH,QAFE;IAGFI,UAHE;IAIFC,WAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGlB,SAAS,EAAxB;EAEA,MAAMmB,MAAM,GAAGtB,eAAe,CAAC,MAAM;IACjC,MAAMuB,cAAc,GAAGL,WAAW,CAACM,KAAnC;IACA,MAAMC,KAAK,GAAGC,IAAI,CAACC,KAAL,CAAWJ,cAAX,CAAd;IACA,MAAMK,MAAM,GAAGL,cAAc,GAAG,CAAhC;IAEA,MAAMM,UAAU,GAAGb,WAAW,CAACS,KAAD,CAAX,IAAsBvB,iBAAzC;IACA,MAAM4B,cAAc,GAAGd,WAAW,CAACS,KAAK,GAAG,CAAT,CAAX,IAA0BvB,iBAAjD;IAEA,MAAM6B,EAAE,GAAIH,MAAM,GAAGE,cAAc,CAACC,EAAxB,GAA6B,CAAC,IAAIH,MAAL,IAAeC,UAAU,CAACE,EAAnE;IACA,MAAMC,EAAE,GAAIJ,MAAM,GAAGE,cAAc,CAACE,EAAxB,GAA6B,CAAC,IAAIJ,MAAL,IAAeC,UAAU,CAACG,EAAnE;IAEA,MAAMC,SAAS,GAAGhB,UAAU,GAAG,EAAH,GAAQ,CAApC;IACA,MAAMiB,UAAU,GAAGjB,UAAU,GAAG,EAAH,GAAQ,CAArC;IAEA,OAAO;MACHkB,IAAI,EAAEJ,EAAE,GAAGE,SADR;MAEHG,KAAK,EAAEV,IAAI,CAACW,GAAL,CAASL,EAAE,GAAGD,EAAL,GAAUG,UAAnB,EAA+B,CAA/B;IAFJ,CAAP;EAIH,CAlB6B,CAA9B;EAoBA,MAAMI,aAAa,GAAGvC,gBAAgB,CAAC,OAAO;IAC1CoC,IAAI,EAAEb,MAAM,CAACE,KAAP,CAAaW,IADuB;IAE1CC,KAAK,EAAEd,MAAM,CAACE,KAAP,CAAaY;EAFsB,CAAP,CAAD,CAAtC;EAKA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHf,MAAM,CAAChB,IADJ,EAEHQ,QAAQ,GAAGQ,MAAM,CAACR,QAAV,GAAqB0B,SAF1B,EAGHD,aAHG,EAIHnB,KAJG;EADX,GAOQC,UAPR,EADJ;AAWH;AAAA"}
+{"version":3,"names":["React","useCallback","useContext","useEffect","Animated","Easing","useTheme","useAnimatedValue","isNotAndroid12","defaultCoordinate","InternalContext","INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","color","theme","root","backgroundColor","palette","main","left","bottom","width","height","position","disabled","startAnimation","value","toValue","timing","duration","easing","bezier","useNativeDriver","start","TabIndicator","props","coordinates","initialIndex","scrollable","style","otherProps","styles","computeAnimationValues","currentIndex","x1","x2","tabWidth","nextTranslateX","inset","nextScaleX","tx","sx","initialTx","initialSx","translateX","scaleX","indexStore","scrollToIndex","index","getState","subscribe","undefined","transform"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 2;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =\n    function (color: TabIndicatorColor): TabIndicatorStyles {\n        const theme = useTheme();\n\n        return {\n            root: {\n                backgroundColor: theme.palette[color].main,\n                left: 0,\n                bottom: 0,\n                width: INDICATOR_WIDTH,\n                height: INDICATOR_HEIGHT,\n                position: 'absolute',\n            },\n            disabled: {\n                height: 0,\n            },\n        };\n    };\n\nconst startAnimation = (value: Animated.Value, toValue: number) => {\n    Animated.timing(value, {\n        toValue: toValue,\n        duration: 300,\n        easing: Easing.bezier(0.25, 1, 0.5, 1),\n        useNativeDriver: isNotAndroid12,\n    }).start();\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        color = 'primary',\n        coordinates,\n        disabled,\n        initialIndex,\n        scrollable,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles(color);\n\n    const computeAnimationValues = useCallback((currentIndex: number) => {\n        const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;\n\n        const tabWidth = x2 - x1;\n\n        const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n        const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n        return { tx: nextTranslateX, sx: nextScaleX };\n    }, [coordinates, scrollable]);\n\n    const {\n        tx: initialTx,\n        sx: initialSx,\n    } = computeAnimationValues(initialIndex);\n\n    const translateX = useAnimatedValue(initialTx);\n    const scaleX = useAnimatedValue(initialSx);\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        const scrollToIndex = (index: number) => {\n            const { tx, sx } = computeAnimationValues(index);\n\n            startAnimation(translateX, tx);\n            startAnimation(scaleX, sx);\n        };\n\n        scrollToIndex(indexStore.getState());\n\n        return indexStore.subscribe(scrollToIndex);\n    }, [\n        computeAnimationValues,\n        coordinates,\n        indexStore,\n    ]);\n\n    return (\n        <Animated.View\n            style={[\n                styles.root,\n                disabled ? styles.disabled : undefined,\n                { transform: [{ translateX }, { scaleX }] },\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":"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"}

package/build/module/Tabs/TabIndicatorProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabIndicatorProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { OverridableComponentProps } from '../types';\nimport type TabCoordinate from './TabCoordinate';\n\nexport default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Tab item coordinates.\n     */\n    coordinates: TabCoordinate[];\n\n    /**\n     * If `true`, the indicator is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * If `true`, the tab will be able to scroll.\n     */\n    scrollable: boolean;\n\n    /**\n     * Scrollable value for using animated interpolation.\n     */\n    scrollValue: SharedValue<number>;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabIndicatorProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type TabCoordinate from './TabCoordinate';\n\nexport type TabIndicatorColor = 'primary' | 'secondary';\n\nexport default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Tab item coordinates.\n     */\n    coordinates: TabCoordinate[];\n\n    /**\n     * Indicator color.\n     * @default: 'primary'\n     */\n    color?: TabIndicatorColor;\n\n    /**\n     * If `true`, the indicator is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * Initial index.\n     */\n    initialIndex: number;\n\n    /**\n     * If `true`, the tab will be able to scroll.\n     */\n    scrollable: boolean;\n}> {}\n"],"mappings":""}