npm - @fountain-ui/core - Versions diffs - 2.0.0-beta.98 → 3.0.0-alpha.10 - Mend

@fountain-ui/core 2.0.0-beta.98 → 3.0.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (889) hide show

package/build/module/Tabs/Tabs.js CHANGED Viewed

@@ -10,6 +10,7 @@ import useTabInnerContentsWidth from './useTabInnerContentsWidth';
 import useIndexStore from './useIndexStore';
 import InternalContext from './InternalContext';
 import { isEveryTabCoordinatesDefined } from './utils';
+import useTabsStyle from './useTabsStyle';
 const useStyles = function () {
   const theme = useTheme();
@@ -26,7 +27,7 @@ const useStyles = function () {
     },
     bottomDivider: {
       borderBottomColor: theme.palette.border.base,
-      borderBottomWidth: 1
+      borderBottomWidth: 0.5
     }
   };
 };
@@ -36,6 +37,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
   const {
     children,
+    color = 'default',
     initialIndex = 0,
     disableIndicator = false,
     indicatorSize = 'fit-content',
@@ -56,6 +58,9 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
   const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
   const realInitialIndex = sharedIndex.initialValue;
   const currentIndexRef = useRef(initialIndex);
+  const {
+    container: containerStyle
+  } = useTabsStyle(variant);
   const setTab = newIndex => {
     const currentIndex = currentIndexRef.current;
@@ -67,11 +72,16 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     setTab
   }), [sharedIndex]);
   const styles = useStyles();
+  const theme = useTheme();
   const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);
   const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);
   const canRenderIndicator = indicatorSize === 'fit-content' ? isEveryTabCoordinatesDefined(innerContentsWidthList, children) : isEveryTabCoordinatesDefined(outerCoordinates, children);
   const indexStore = useIndexStore(sharedIndex);
   const coordinates = useMemo(() => {
+    if (outerCoordinates.length === 0) {
+      return [];
+    }
     if (indicatorSize !== 'fit-content') {
       return outerCoordinates;
     }
@@ -89,7 +99,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
         x2: indicatorStartCoordinate + innerContentWidth
       };
     });
-  }, [outerCoordinates, innerContentsWidthList, indicatorSize]);
+  }, [outerCoordinates, innerContentsWidthList]);
   useEffect(() => {
     return indexStore.subscribe(newIndex => {
       onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
@@ -156,12 +166,18 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     disabled: disableIndicator,
     initialIndex: realInitialIndex
   }) : null;
+  const backgroundColorMap = {
+    default: theme.palette.background.base,
+    alt: theme.palette.background.alt
+  };
   return /*#__PURE__*/React.createElement(InternalContext.Provider, {
     value: {
       indexStore
     }
   }, /*#__PURE__*/React.createElement(View, {
-    style: css([styles.root, showDivider ? styles.bottomDivider : undefined, scrollable ? undefined : styles.fixedRoot, style])
+    style: css([styles.root, containerStyle, {
+      backgroundColor: backgroundColorMap[color]
+    }, showDivider ? styles.bottomDivider : undefined, scrollable ? undefined : styles.fixedRoot, style])
   }, scrollable ? /*#__PURE__*/React.createElement(ScrollableTabsView, {
     automaticallyAdjustContentInsets: false,
     bounces: false,

package/build/module/Tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useTabInnerContentsWidth","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","props","ref","children","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerContentsWidthList","updateInnerContentsWidth","canRenderIndicator","indexStore","coordinates","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","filter","Boolean","tabIndicator"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type { TabVariant } from '../Tab/TabProps';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n \| 'root'\n \| 'fixedRoot'\n \| 'fixedTab'\n \| 'scrollableContainer'\n \| 'bottomDivider';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n const theme = useTheme();\n\n return {\n root: {},\n fixedRoot: {\n flexDirection: 'row',\n },\n fixedTab: {\n flex: 1,\n },\n scrollableContainer: {\n paddingHorizontal: theme.spacing(1),\n },\n bottomDivider: {\n borderBottomColor: theme.palette.border.base,\n borderBottomWidth: 1,\n },\n };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n initialIndex = 0,\n disableIndicator = false,\n indicatorSize = 'fit-content',\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n scrollViewContentContainerStyle,\n showDivider = false,\n style,\n variant = 'default' as TabVariant,\n UNSTABLE_sharedIndex,\n onTabSelected,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n const realInitialIndex = sharedIndex.initialValue;\n\n const currentIndexRef = useRef(initialIndex);\n\n const setTab = (newIndex: number) => {\n const currentIndex = currentIndexRef.current;\n onTabSelected?.(newIndex, currentIndex);\n\n sharedIndex.animatedValue.setValue(newIndex);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n setTab,\n }),\n [sharedIndex],\n );\n\n const styles = useStyles();\n\n const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n const canRenderIndicator = indicatorSize === 'fit-content'\n ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n const indexStore = useIndexStore(sharedIndex);\n\n const coordinates = useMemo(() => {\n if (indicatorSize !== 'fit-content') {\n return outerCoordinates;\n }\n\n return innerContentsWidthList.map((innerContentWidth, idx) => {\n const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n const tabWidth = outerX2 - outerX1;\n const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n return {\n x1: indicatorStartCoordinate,\n x2: indicatorStartCoordinate + innerContentWidth,\n };\n });\n }, [outerCoordinates, innerContentsWidthList, indicatorSize]);\n\n useEffect(() => {\n return indexStore.subscribe(newIndex => {\n onChange?.(newIndex);\n currentIndexRef.current = newIndex;\n });\n }, [indexStore, onChange]);\n\n const tabElements = React.Children.map(children, (child, index) => {\n if (!child) {\n return null;\n }\n\n const onTabInnerLayout = (event: LayoutChangeEvent) => {\n const { width } = event.nativeEvent.layout;\n\n updateInnerContentsWidth(index, width);\n };\n\n const onLayout = (event: LayoutChangeEvent) => {\n const { x, width } = event.nativeEvent.layout;\n\n updateCoordinate(index, x, width);\n\n // @ts-ignore\n child.props.onLayout?.(event);\n };\n\n const onMouseDown = (e: GestureResponderEvent) => {\n if (keyboardShouldPersistTaps === 'always') {\n e.preventDefault();\n }\n };\n\n const onPress = () => {\n setTab(index);\n\n // @ts-ignore\n child.props.onPress?.();\n };\n\n // @ts-ignore\n const tabElement = cloneElement(child, {\n enableIndicator: !disableIndicator && !canRenderIndicator,\n onTabInnerLayout,\n onLayout,\n onPress,\n onMouseDown,\n variant,\n indicatorSize,\n style: scrollable ? undefined : styles.fixedTab,\n });\n\n return (\n <IndexAwareTab\n children={tabElement}\n index={index}\n initialIndex={realInitialIndex}\n />\n );\n })?.filter(Boolean);\n\n const tabIndicator = canRenderIndicator ? (\n <TabIndicator\n coordinates={coordinates}\n disabled={disableIndicator}\n initialIndex={realInitialIndex}\n />\n ) : null;\n\n return (\n <InternalContext.Provider value={{ indexStore }}>\n <View\n style={css([\n styles.root,\n showDivider ? styles.bottomDivider : undefined,\n scrollable ? undefined : styles.fixedRoot,\n style,\n ])}\n >\n {scrollable ? (\n <ScrollableTabsView\n automaticallyAdjustContentInsets={false}\n bounces={false}\n contentContainerStyle={css([\n styles.scrollableContainer,\n scrollViewContentContainerStyle,\n ])}\n coordinates={coordinates}\n directionalLockEnabled={true}\n horizontal={true}\n initialIndex={realInitialIndex}\n scrollsToTop={false}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n keyboardDismissMode={keyboardDismissMode}\n keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n >\n {tabElements}\n {tabIndicator}\n </ScrollableTabsView>\n ) : (\n <React.Fragment>\n {tabElements}\n {tabIndicator}\n </React.Fragment>\n )}\n </View>\n </InternalContext.Provider>\n );\n});\n\nexport default Tabs;\n"],"mappings":"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"}
1	+ {"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useTabInnerContentsWidth","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useTabsStyle","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","container","containerStyle","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerContentsWidthList","updateInnerContentsWidth","canRenderIndicator","indexStore","coordinates","length","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","filter","Boolean","tabIndicator","backgroundColorMap","default","background","alt","backgroundColor"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type { TabVariant } from '../Tab';\nimport type TabsProps from './TabsProps';\nimport type { TabsColor } from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\nimport useTabsStyle from './useTabsStyle';\n\ntype TabsStyleKeys =\n \| 'root'\n \| 'fixedRoot'\n \| 'fixedTab'\n \| 'scrollableContainer'\n \| 'bottomDivider';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n const theme = useTheme();\n\n return {\n root: {},\n fixedRoot: {\n flexDirection: 'row',\n },\n fixedTab: {\n flex: 1,\n },\n scrollableContainer: {\n paddingHorizontal: theme.spacing(1),\n },\n bottomDivider: {\n borderBottomColor: theme.palette.border.base,\n borderBottomWidth: 0.5,\n },\n };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n color = 'default',\n initialIndex = 0,\n disableIndicator = false,\n indicatorSize = 'fit-content',\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n scrollViewContentContainerStyle,\n showDivider = false,\n style,\n variant = 'default' as TabVariant,\n UNSTABLE_sharedIndex,\n onTabSelected,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n const realInitialIndex = sharedIndex.initialValue;\n\n const currentIndexRef = useRef(initialIndex);\n\n const { container: containerStyle } = useTabsStyle(variant);\n\n const setTab = (newIndex: number) => {\n const currentIndex = currentIndexRef.current;\n onTabSelected?.(newIndex, currentIndex);\n\n sharedIndex.animatedValue.setValue(newIndex);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n setTab,\n }),\n [sharedIndex],\n );\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n const canRenderIndicator = indicatorSize === 'fit-content'\n ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n const indexStore = useIndexStore(sharedIndex);\n\n const coordinates = useMemo(() => {\n if (outerCoordinates.length === 0) {\n return [];\n }\n\n if (indicatorSize !== 'fit-content') {\n return outerCoordinates;\n }\n\n return innerContentsWidthList.map((innerContentWidth, idx) => {\n const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n const tabWidth = outerX2 - outerX1;\n const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n return {\n x1: indicatorStartCoordinate,\n x2: indicatorStartCoordinate + innerContentWidth,\n };\n });\n }, [outerCoordinates, innerContentsWidthList]);\n\n useEffect(() => {\n return indexStore.subscribe(newIndex => {\n onChange?.(newIndex);\n currentIndexRef.current = newIndex;\n });\n }, [indexStore, onChange]);\n\n const tabElements = React.Children.map(children, (child, index) => {\n if (!child) {\n return null;\n }\n\n const onTabInnerLayout = (event: LayoutChangeEvent) => {\n const { width } = event.nativeEvent.layout;\n\n updateInnerContentsWidth(index, width);\n };\n\n const onLayout = (event: LayoutChangeEvent) => {\n const { x, width } = event.nativeEvent.layout;\n\n updateCoordinate(index, x, width);\n\n // @ts-ignore\n child.props.onLayout?.(event);\n };\n\n const onMouseDown = (e: GestureResponderEvent) => {\n if (keyboardShouldPersistTaps === 'always') {\n e.preventDefault();\n }\n };\n\n const onPress = () => {\n setTab(index);\n\n // @ts-ignore\n child.props.onPress?.();\n };\n\n // @ts-ignore\n const tabElement = cloneElement(child, {\n enableIndicator: !disableIndicator && !canRenderIndicator,\n onTabInnerLayout,\n onLayout,\n onPress,\n onMouseDown,\n variant,\n indicatorSize,\n style: scrollable ? undefined : styles.fixedTab,\n });\n\n return (\n <IndexAwareTab\n children={tabElement}\n index={index}\n initialIndex={realInitialIndex}\n />\n );\n })?.filter(Boolean);\n\n const tabIndicator = canRenderIndicator ? (\n <TabIndicator\n coordinates={coordinates}\n disabled={disableIndicator}\n initialIndex={realInitialIndex}\n />\n ) : null;\n\n const backgroundColorMap: Record<TabsColor, string> = {\n default: theme.palette.background.base,\n alt: theme.palette.background.alt,\n };\n\n return (\n <InternalContext.Provider value={{ indexStore }}>\n <View\n style={css([\n styles.root,\n containerStyle,\n { backgroundColor: backgroundColorMap[color] },\n showDivider ? styles.bottomDivider : undefined,\n scrollable ? undefined : styles.fixedRoot,\n style,\n ])}\n >\n {scrollable ? (\n <ScrollableTabsView\n automaticallyAdjustContentInsets={false}\n bounces={false}\n contentContainerStyle={css([\n styles.scrollableContainer,\n scrollViewContentContainerStyle,\n ])}\n coordinates={coordinates}\n directionalLockEnabled={true}\n horizontal={true}\n initialIndex={realInitialIndex}\n scrollsToTop={false}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n keyboardDismissMode={keyboardDismissMode}\n keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n >\n {tabElements}\n {tabIndicator}\n </ScrollableTabsView>\n ) : (\n <React.Fragment>\n {tabElements}\n {tabIndicator}\n </React.Fragment>\n )}\n </View>\n </InternalContext.Provider>\n );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

package/build/module/Tabs/TabsProps.js CHANGED Viewed

@@ -1,2 +1,3 @@
+export const tabsColors = ['default', 'alt'];
 export const tabIndicatorSizes = ['fit-content', 'full'];
 //# sourceMappingURL=TabsProps.js.map

package/build/module/Tabs/TabsProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tabIndicatorSizes"],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabVariant } from '../Tab~~/TabProps~~';\nimport type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport const tabIndicatorSizes = ['fit-content', 'full'] as const;\nexport type TabIndicatorSize = typeof tabIndicatorSizes[number];\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n ref?: Ref<TabsInstance>;\n\n /*\n Collection of Tab components.\n /\n children: ReactNode;\n\n /\n If `true`, the indicator is disabled.\n * @default false\n /\n disableIndicator?: boolean;\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 'fit-content'\n /\n indicatorSize?: TabIndicatorSize;\n\n /\n Index of initial tab that should be selected.\n * @default 0\n /\n initialIndex?: number;\n\n /\n keyboard dismissing condition of dragging.\n * @default 'none'\n /\n keyboardDismissMode?: KeyboardDismissMode,\n\n /\n keyboard persisting condition of tapping.\n * @default 'never'\n /\n keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n /\n Callback fired when a tab is selected.\n /\n onChange?: (newIndex: number) => void;\n\n /\n If `true`, the component will be able to scroll.\n * @default false\n /\n scrollable?: boolean;\n\n /\n These styles will be applied to the scroll view content container which wraps all of the child views.\n /\n scrollViewContentContainerStyle?: ExtendedStyle \| ExtendedStyle[];\n\n /\n Determines whether to display the bottom border.\n * @default false\n /\n showDivider?: boolean;\n\n /\n Unstable API.\n /\n UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n /\n The variant to use.\n * @default 'primary'\n /\n variant?: TabVariant;\n\n /\n Callback function executed when a Tab is selected.\n * Executed even if the index does not change when a Tab is pressed.\n * Receives the next tab index and the current tab index as parameters.\n */\n onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":"AAMA,OAAO,MAAMA,iBAAiB,GAAG,CAAC,aAAD,EAAgB,MAAhB,CAA1B"}
1	+ {"version":3,"names":["tabsColors","tabIndicatorSizes"],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabVariant } from '../Tab';\nimport type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport const tabsColors = ['default', 'alt'] as const;\nexport type TabsColor = typeof tabsColors[number];\n\nexport const tabIndicatorSizes = ['fit-content', 'full'] as const;\nexport type TabIndicatorSize = typeof tabIndicatorSizes[number];\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n ref?: Ref<TabsInstance>;\n\n /*\n Collection of Tab components.\n /\n children: ReactNode;\n\n /\n The color of the component. It supports those theme colors that make sense for this component.\n * @default 'default'\n /\n color?: TabsColor;\n\n /\n If `true`, the indicator is disabled.\n * @default false\n /\n disableIndicator?: boolean;\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 'fit-content'\n /\n indicatorSize?: TabIndicatorSize;\n\n /\n Index of initial tab that should be selected.\n * @default 0\n /\n initialIndex?: number;\n\n /\n keyboard dismissing condition of dragging.\n * @default 'none'\n /\n keyboardDismissMode?: KeyboardDismissMode,\n\n /\n keyboard persisting condition of tapping.\n * @default 'never'\n /\n keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n /\n Callback fired when a tab is selected.\n /\n onChange?: (newIndex: number) => void;\n\n /\n If `true`, the component will be able to scroll.\n * @default false\n /\n scrollable?: boolean;\n\n /\n These styles will be applied to the scroll view content container which wraps all of the child views.\n /\n scrollViewContentContainerStyle?: ExtendedStyle \| ExtendedStyle[];\n\n /\n Determines whether to display the bottom border.\n * @default false\n /\n showDivider?: boolean;\n\n /\n Unstable API.\n /\n UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n /\n The variant to use.\n * @default 'primary'\n /\n variant?: TabVariant;\n\n /\n Callback function executed when a Tab is selected.\n * Executed even if the index does not change when a Tab is pressed.\n * Receives the next tab index and the current tab index as parameters.\n */\n onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":"AAMA,OAAO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,KAAZ,CAAnB;AAGP,OAAO,MAAMC,iBAAiB,GAAG,CAAC,aAAD,EAAgB,MAAhB,CAA1B"}

package/build/module/Tabs/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
-export { default } from './LegacyTabs';
+export { default } from './Tabs';
+export { tabIndicatorSizes, tabsColors } from './TabsProps';
 //# sourceMappingURL=index.js.map

package/build/module/Tabs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './~~LegacyTabs~~';\nexport type { default as TabsProps } from './~~LegacyTabsProps~~';\nexport type { TabsInstance } from './types';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,~~cAAxB~~"}
1	+ {"version":3,"names":["default","tabIndicatorSizes","tabsColors"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps } from './TabsProps';\nexport { tabIndicatorSizes, tabsColors } from './TabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB;AAEA,SAASC,iBAAT,EAA4BC,UAA5B,QAA8C,aAA9C"}

package/build/module/Tabs/useTabsStyle.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { useTheme } from '../styles';
+export default function useTabsStyle(variant) {
+  const theme = useTheme();
+  return useMemo(() => {
+    switch (variant) {
+      case 'circular':
+        return {
+          container: {
+            paddingBottom: theme.spacing(2),
+            paddingHorizontal: theme.spacing(3)
+          }
+        };
+      case 'bottom-navigation':
+        return {
+          container: {}
+        };
+      case 'default':
+      default:
+        return {
+          container: {
+            paddingHorizontal: theme.spacing(1.5)
+          }
+        };
+    }
+  }, [theme, variant]);
+}
+//# sourceMappingURL=useTabsStyle.js.map

package/build/module/Tabs/useTabsStyle.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["useMemo","useTheme","useTabsStyle","variant","theme","container","paddingBottom","spacing","paddingHorizontal"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { TabVariant } from '../Tab';\n\ninterface TabsStyle {\n container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant) {\n const theme = useTheme();\n\n return useMemo<TabsStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingBottom: theme.spacing(2),\n paddingHorizontal: theme.spacing(3),\n },\n };\n case 'bottom-navigation':\n return {\n container: {},\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: theme.spacing(1.5),\n },\n };\n }\n }, [theme, variant]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAOA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQG,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHE,SAAS,EAAE;YACPC,aAAa,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CADR;YAEPC,iBAAiB,EAAEJ,KAAK,CAACG,OAAN,CAAc,CAAd;UAFZ;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHF,SAAS,EAAE;QADR,CAAP;;MAGJ,KAAK,SAAL;MACA;QACI,OAAO;UACHA,SAAS,EAAE;YACPG,iBAAiB,EAAEJ,KAAK,CAACG,OAAN,CAAc,GAAd;UADZ;QADR,CAAP;IAdR;EAoBH,CArBa,EAqBX,CAACH,KAAD,EAAQD,OAAR,CArBW,CAAd;AAsBH"}

package/build/module/TextField/TextField.js CHANGED Viewed

@@ -72,7 +72,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
   const showClearButton = showClearButtonProp ?? isSearch;
   const titleFontStyle = createFontStyle(theme, {
-    // selector: (typography) => typography.caption1['semiBold']
+    selector: typography => typography.caption1['semiBold'],
     color: theme.palette.text.strong
   });
   const inputStyle = css([styles.input, variantStyles.inputStyle, Platform.OS === 'web' ? {
@@ -89,7 +89,6 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     style: containerStyle
   }, isSearch ? isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, null) : /*#__PURE__*/React.createElement(Search, {
     color: 'base',
-    enableV2: true,
     height: 18,
     width: 18
   }) : null, /*#__PURE__*/React.createElement(TextInput, _extends({

package/build/module/TextField/TextField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","styles","create","root","alignItems","flexGrow","input","secureToggleButton","padding","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","color","palette","strong","inputStyle","OS","outlineWidth","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n flexGrow: 1,\n },\n input: {\n flexGrow: 1,\n },\n secureToggleButton: {\n alignItems: 'flex-end',\n padding: 0,\n },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n const {\n autoFocus,\n containerStyle: containerStyleProp,\n editable = true,\n hint,\n isLoading,\n onBlur,\n onChangeText: onChangeTextProp,\n onFocus,\n placeholderTextColor: placeholderTextColorProp,\n secureTextEntry: secureTextEntryProp,\n showClearButton: showClearButtonProp,\n status = 'default' as TextFieldStatus,\n style: styleProp,\n title,\n value,\n variant = 'default' as TextFieldVariant,\n ...otherProps\n } = props;\n\n const isSearch = variant === 'search';\n\n const disabled = !editable \|\| isLoading;\n\n const theme = useTheme();\n\n const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleSecureTogglePress = () => {\n setSecureTextEntry((current) => !current);\n };\n\n const handleChangeText = (text: string) => {\n onChangeTextProp?.(text);\n };\n\n const handleClear = () => {\n handleChangeText('');\n };\n\n const showClearButton = showClearButtonProp ?? isSearch;\n\n const titleFontStyle = createFontStyle(theme, {\n // selector: (typography) => typography.caption1['semiBold']\n color: theme.palette.text.strong,\n });\n\n const inputStyle = css([\n styles.input,\n variantStyles.inputStyle,\n Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n styleProp,\n ]);\n\n const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;\n\n const containerStyle = css([\n styles.root,\n variantStyles.containerStyle,\n { opacity: disabled ? 0.3 : 1 },\n containerStyleProp,\n ]);\n\n return (\n <View>\n {title && !isSearch ? (\n <Text\n children={title}\n style={titleFontStyle}\n />\n ) : null}\n\n <Row style={containerStyle}>\n {isSearch ? (\n isLoading ? (\n <LoadingSpinner/>\n ) : (\n <Search\n color={'base'}\n enableV2={true}\n height={18}\n width={18}\n />\n )\n ) : null}\n\n <TextInput\n autoFocus={autoFocus}\n editable={!disabled}\n onBlur={handleBlur}\n onChangeText={handleChangeText}\n onFocus={handleFocus}\n placeholderTextColor={placeholderTextColor}\n ref={ref}\n secureTextEntry={secureTextEntry}\n style={inputStyle}\n value={value}\n {...otherProps}\n />\n\n {showClearButton && value?.length && value.length > 0 ? (\n <IconButton\n color={'base'}\n children={\n <Clear\n height={13.75}\n width={15}\n />\n }\n onPress={handleClear}\n />\n ) : null}\n\n {secureTextEntryProp && !isSearch ? (\n <IconButton\n color={'base'}\n onPress={handleSecureTogglePress}\n style={styles.secureToggleButton}\n >\n {secureTextEntry ? (\n <EyeOff\n height={19}\n width={17.42}\n />\n ) : (\n <EyeOn\n height={19}\n width={17.42}\n />\n )}\n </IconButton>\n ) : null}\n </Row>\n\n {hint && !isSearch ? (\n <Text\n children={hint}\n style={variantStyles.hintStyle}\n />\n ) : null}\n </View>\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}
1	+ {"version":3,"names":["React","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","styles","create","root","alignItems","flexGrow","input","secureToggleButton","padding","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","OS","outlineWidth","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n flexGrow: 1,\n },\n input: {\n flexGrow: 1,\n },\n secureToggleButton: {\n alignItems: 'flex-end',\n padding: 0,\n },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n const {\n autoFocus,\n containerStyle: containerStyleProp,\n editable = true,\n hint,\n isLoading,\n onBlur,\n onChangeText: onChangeTextProp,\n onFocus,\n placeholderTextColor: placeholderTextColorProp,\n secureTextEntry: secureTextEntryProp,\n showClearButton: showClearButtonProp,\n status = 'default' as TextFieldStatus,\n style: styleProp,\n title,\n value,\n variant = 'default' as TextFieldVariant,\n ...otherProps\n } = props;\n\n const isSearch = variant === 'search';\n\n const disabled = !editable \|\| isLoading;\n\n const theme = useTheme();\n\n const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleSecureTogglePress = () => {\n setSecureTextEntry((current) => !current);\n };\n\n const handleChangeText = (text: string) => {\n onChangeTextProp?.(text);\n };\n\n const handleClear = () => {\n handleChangeText('');\n };\n\n const showClearButton = showClearButtonProp ?? isSearch;\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typography) => typography.caption1['semiBold'],\n color: theme.palette.text.strong,\n });\n\n const inputStyle = css([\n styles.input,\n variantStyles.inputStyle,\n Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n styleProp,\n ]);\n\n const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;\n\n const containerStyle = css([\n styles.root,\n variantStyles.containerStyle,\n { opacity: disabled ? 0.3 : 1 },\n containerStyleProp,\n ]);\n\n return (\n <View>\n {title && !isSearch ? (\n <Text\n children={title}\n style={titleFontStyle}\n />\n ) : null}\n\n <Row style={containerStyle}>\n {isSearch ? (\n isLoading ? (\n <LoadingSpinner/>\n ) : (\n <Search\n color={'base'}\n height={18}\n width={18}\n />\n )\n ) : null}\n\n <TextInput\n autoFocus={autoFocus}\n editable={!disabled}\n onBlur={handleBlur}\n onChangeText={handleChangeText}\n onFocus={handleFocus}\n placeholderTextColor={placeholderTextColor}\n ref={ref}\n secureTextEntry={secureTextEntry}\n style={inputStyle}\n value={value}\n {...otherProps}\n />\n\n {showClearButton && value?.length && value.length > 0 ? (\n <IconButton\n color={'base'}\n children={\n <Clear\n height={13.75}\n width={15}\n />\n }\n onPress={handleClear}\n />\n ) : null}\n\n {secureTextEntryProp && !isSearch ? (\n <IconButton\n color={'base'}\n onPress={handleSecureTogglePress}\n style={styles.secureToggleButton}\n >\n {secureTextEntry ? (\n <EyeOff\n height={19}\n width={17.42}\n />\n ) : (\n <EyeOn\n height={19}\n width={17.42}\n />\n )}\n </IconButton>\n ) : null}\n </Row>\n\n {hint && !isSearch ? (\n <Text\n children={hint}\n style={variantStyles.hintStyle}\n />\n ) : null}\n </View>\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/build/module/TextField/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
-export { default } from './LegacyTextField';
+export { default } from './TextField';
+export { textFieldStatus } from './TextFieldProps';
 //# sourceMappingURL=index.js.map

package/build/module/TextField/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["default"],"sources":["index.tsx"],"sourcesContent":["export { default } from './~~LegacyTextField~~';\nexport type { default as TextFieldProps } from './~~LegacyTextFieldProps~~';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,~~mBAAxB~~"}
1	+ {"version":3,"names":["default","textFieldStatus"],"sources":["index.tsx"],"sourcesContent":["export { default } from './TextField';\nexport type { default as TextFieldProps } from './TextFieldProps';\nexport { textFieldStatus } from './TextFieldProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB;AAEA,SAASC,eAAT,QAAgC,kBAAhC"}

package/build/module/TextField/useVariantStyleMap.js CHANGED Viewed

@@ -47,7 +47,7 @@ export default function useVariantStyleMap(variant, status, isFocused) {
               selector: _ => typographyOf({
                 fontSize: 18,
                 lineHeight: 27,
-                fontFamily: 'Pretendard-SemiBold',
+                fontFamily: 'PretendardStd-SemiBold',
                 letterSpacing: 0
               }),
               color: theme.palette.text.strong
@@ -81,7 +81,7 @@ export default function useVariantStyleMap(variant, status, isFocused) {
               selector: _ => typographyOf({
                 fontSize: 16,
                 lineHeight: 19.2,
-                fontFamily: 'Pretendard-SemiBold',
+                fontFamily: 'PretendardStd-SemiBold',
                 letterSpacing: -0.16
               }),
               color: theme.palette.text.strong

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

	@@ -1 +1 @@
1	- {"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingRight","spacing","paddingVertical","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingLeft","paddingBottom","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n },\n inputStyle: {\n paddingRight: theme.spacing(4),\n paddingVertical: theme.spacing(4),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: '~~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":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,YAAT,QAA6B,qBAA7B;AACA,SAASC,eAAT,EAA0BC,QAA1B,QAA0C,WAA1C;;AASA,SAASC,cAAT,CAAwBC,KAAxB,EAAsCC,MAAtC,EAA4G;EACxG,QAAQA,MAAR;IACI;IACA,KAAK,SAAL;MACI,OAAO;QACHC,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IAD/B;QAEHC,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBC;MAF3B,CAAP;;IAIJ,KAAK,SAAL;MACI,OAAO;QACHN,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBQ,OAD/B;QAEHH,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBQ;MAF7B,CAAP;;IAIJ,KAAK,OAAL;MACI,OAAO;QACHP,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBS,MAD/B;QAEHJ,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBS;MAF7B,CAAP;EAbR;AAkBH;;AAED,eAAe,SAASC,kBAAT,CAA4BC,OAA5B,EAAuDX,MAAvD,EAAgFY,SAAhF,EAAqH;EAChI,MAAMb,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAM;IACFI,WADE;IAEFI;EAFE,IAGFP,cAAc,CAACC,KAAD,EAAQC,MAAR,CAHlB;EAKA,OAAON,OAAO,CAAC,MAAM;IACjB,QAAQiB,OAAR;MACI;MACA,KAAK,SAAL;QACI,OAAO;UACHE,cAAc,EAAE;YACZC,iBAAiB,EAAEd,MAAM,KAAK,SAAX,IAAwBY,SAAxB,GAAoCb,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBY,MAAzD,GAAkEd,WADzE;YAEZe,iBAAiB,EAAE;UAFP,CADb;UAKHC,UAAU,EAAE;YACRC,YAAY,EAAEnB,KAAK,CAACoB,OAAN,CAAc,CAAd,CADN;YAERC,eAAe,EAAErB,KAAK,CAACoB,OAAN,CAAc,CAAd,CAFT;YAGR,GAAGvB,eAAe,CAACG,KAAD,EAAQ;cACtBsB,QAAQ,EAAGC,CAAD,IAAO3B,YAAY,CAAC;gBAC1B4B,QAAQ,EAAE,EADgB;gBAE1BC,UAAU,EAAE,EAFc;gBAG1BC,UAAU,EAAE,~~qBAHc~~;gBAI1BC,aAAa,EAAE;cAJW,CAAD,CADP;cAOtBC,KAAK,EAAE5B,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBS;YAPJ,CAAR;UAHV,CALT;UAkBHa,SAAS,EAAE;YACPC,SAAS,EAAE9B,KAAK,CAACoB,OAAN,CAAc,CAAd,CADJ;YAEP,GAAGvB,eAAe,CAACG,KAAD,EAAQ;cACtB;cACA4B,KAAK,EAAEtB;YAFe,CAAR;UAFX;QAlBR,CAAP;;MA0BJ,KAAK,QAAL;QACI,OAAO;UACHQ,cAAc,EAAE;YACZiB,eAAe,EAAE/B,KAAK,CAACG,OAAN,CAAc6B,OAAd,CAAsBC,UAD3B;YAEZ/B,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IAFtB;YAGZ6B,YAAY,EAAElC,KAAK,CAACmC,KAAN,CAAYC,MAAZ,CAAmBC,EAHrB;YAIZC,WAAW,EAAE,GAJD;YAKZC,WAAW,EAAEvC,KAAK,CAACoB,OAAN,CAAc,CAAd,CALD;YAMZD,YAAY,EAAEnB,KAAK,CAACoB,OAAN,CAAc,GAAd;UANF,CADb;UASHF,UAAU,EAAE;YACRsB,aAAa,EAAExC,KAAK,CAACoB,OAAN,CAAc,GAAd,CADP;YAERmB,WAAW,EAAEvC,KAAK,CAACoB,OAAN,CAAc,CAAd,CAFL;YAGRD,YAAY,EAAEnB,KAAK,CAACoB,OAAN,CAAc,CAAd,CAHN;YAIRqB,UAAU,EAAEzC,KAAK,CAACoB,OAAN,CAAc,IAAd,CAJJ;YAKR,GAAGvB,eAAe,CAACG,KAAD,EAAQ;cACtBsB,QAAQ,EAAGC,CAAD,IAAO3B,YAAY,CAAC;gBAC1B4B,QAAQ,EAAE,EADgB;gBAE1BC,UAAU,EAAE,IAFc;gBAG1BC,UAAU,EAAE,~~qBAHc~~;gBAI1BC,aAAa,EAAE,CAAC;cAJU,CAAD,CADP;cAOtBC,KAAK,EAAE5B,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBS;YAPJ,CAAR;UALV;QATT,CAAP;IA9BR;EAwDH,CAzDa,EAyDX,CAAChB,KAAD,EAAQE,WAAR,EAAqBI,SAArB,EAAgCM,OAAhC,EAAyCC,SAAzC,CAzDW,CAAd;AA0DH"}
1	+ {"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingRight","spacing","paddingVertical","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingLeft","paddingBottom","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n },\n inputStyle: {\n paddingRight: theme.spacing(4),\n paddingVertical: theme.spacing(4),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n },\n hintStyle: {\n marginTop: theme.spacing(2),\n ...createFontStyle(theme, {\n // selector: (typography) => typography.caption1['regular']\n color: hintColor,\n }),\n },\n };\n case 'search':\n return {\n containerStyle: {\n backgroundColor: theme.palette.surface.supportive,\n borderColor: theme.palette.border.base,\n borderRadius: theme.shape.radius.md,\n borderWidth: 0.5,\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(0.5),\n },\n inputStyle: {\n paddingBottom: theme.spacing(2.5),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n paddingTop: theme.spacing(2.25),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 19.2,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: -0.16,\n }),\n color: theme.palette.text.strong,\n }),\n },\n };\n }\n }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}

package/build/module/Toggle/Toggle.js CHANGED Viewed

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useRef, useEffect } from 'react';
 import { Animated } from 'react-native';
 import { commonColors } from '@fountain-ui/styles';
-import ButtonBase from '../ButtonBase';
+import ButtonBase from '../ButtonBase/ButtonBase';
 import ShadowView from '../ShadowView';
 import { css, useTheme } from '../styles';
@@ -15,7 +15,6 @@ const useStyles = function () {
       justifyContent: 'center'
     },
     toggle: {
-      backgroundColor: commonColors.static.strongInverse,
       borderRadius: theme.shape.radius.full
     }
   };
@@ -32,6 +31,7 @@ const sizeMap = {
 export default function Toggle(props) {
   const {
     checked = false,
+    disabled = false,
     onChange,
     style: styleProp,
     ...otherProps
@@ -57,11 +57,12 @@ export default function Toggle(props) {
     outputRange: [paddingHorizontal, containerWidth - toggleSize - paddingHorizontal]
   });
   const containerStyle = css([styles.root, {
-    backgroundColor: checked ? theme.palette.fill.accent : theme.palette.fill.weak,
+    backgroundColor: disabled || !checked ? theme.palette.fill.weak : theme.palette.fill.accent,
     height: containerHeight,
     width: containerWidth
   }, styleProp]);
   const toggleStyle = css([styles.toggle, {
+    backgroundColor: disabled ? theme.palette.status.disabledLabel : commonColors.static.strongInverse,
     height: toggleSize,
     width: toggleSize
   }]);
@@ -76,6 +77,7 @@ export default function Toggle(props) {
   };
   return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, otherProps, {
+    disabled: disabled,
     pressEffect: 'none',
     onPress: handlePress,
     style: containerStyle

package/build/module/Toggle/Toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useRef","useEffect","Animated","commonColors","ButtonBase","ShadowView","css","useTheme","useStyles","theme","root","borderRadius","shape","radius","full","justifyContent","toggle","~~backgroundColor","static","strongInverse","~~sizeMap","medium","containerHeight","containerWidth","paddingHorizontal","toggleSize","Toggle","props","checked","onChange","style","styleProp","otherProps","styles","animation","Value","current","timing","toValue","duration","useNativeDriver","start","translateX","interpolate","inputRange","outputRange","containerStyle","palette","fill","~~accent~~","~~weak~~","height","width","toggleStyle","animatedStyle","transform","handlePress"],"sources":["Toggle.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { Animated } from 'react-native';\nimport { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport ShadowView from '../ShadowView';\nimport { css, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type ToggleProps from './ToggleProps';\n\ntype ToggleStyles = NamedStylesStringUnion<'root' \| 'toggle'>;\n\nconst useStyles: UseStyles<ToggleStyles> = function (): ToggleStyles {\n const theme = useTheme();\n\n return {\n root: {\n borderRadius: theme.shape.radius.full,\n justifyContent: 'center',\n },\n toggle: {\n ~~backgroundColor: commonColors.static.strongInverse,\n~~ borderRadius: theme.shape.radius.full,\n },\n };\n};\n\nconst sizeMap = {\n medium: {\n containerHeight: 24,\n containerWidth: 42,\n paddingHorizontal: 3,\n toggleSize: 18,\n },\n};\n\nexport default function Toggle(props: ToggleProps) {\n const {\n checked = false,\n onChange,\n style: styleProp,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const animation = useRef(new Animated.Value(checked ? 1 : 0)).current;\n\n const {\n containerHeight,\n containerWidth,\n paddingHorizontal,\n toggleSize,\n } = sizeMap['medium'];\n\n useEffect(() => {\n Animated.timing(animation, {\n toValue: checked ? 1 : 0,\n duration: 150,\n useNativeDriver: false,\n }).start();\n }, [checked]);\n\n const translateX = animation.interpolate({\n inputRange: [0, 1],\n outputRange: [paddingHorizontal, containerWidth - toggleSize - paddingHorizontal],\n });\n\n const containerStyle = css([\n styles.root,\n {\n backgroundColor: checked\n ? theme.palette.fill.~~accent\n~~ : theme.palette.fill.~~weak~~,\n height: containerHeight,\n width: containerWidth,\n },\n styleProp,\n ]);\n\n const toggleStyle = css([\n styles.toggle,\n {\n height: toggleSize,\n width: toggleSize,\n },\n ]);\n\n const animatedStyle = {\n transform: [{ translateX: translateX as unknown }],\n } as ExtendedStyle;\n\n const handlePress = () => {\n onChange?.(!checked);\n };\n\n return (\n <ButtonBase\n {...otherProps}\n pressEffect={'none'}\n onPress={handlePress}\n style={containerStyle}\n >\n <Animated.View style={animatedStyle}>\n <ShadowView\n style={toggleStyle}\n variant={400}\n />\n </Animated.View>\n </ButtonBase>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,SAAxB,QAAyC,OAAzC;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,YAAT,QAAgE,qBAAhE;AACA,OAAOC,UAAP,MAAuB,~~eAAvB~~;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAMA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,YAAY,EAAEF,KAAK,CAACG,KAAN,CAAYC,MAAZ,CAAmBC,IAD/B;MAEFC,cAAc,EAAE;IAFd,CADH;IAKHC,MAAM,EAAE;~~MACJC~~,~~eAAe,EAAEd,~~YAAY,~~CAACe,MAAb,CAAoBC,aADjC;MAEJR,YAAY,~~EAAEF,KAAK,CAACG,KAAN,CAAYC,MAAZ,CAAmBC;~~IAF7B~~;EALL,CAAP;~~AAUH~~,~~CAbD~~;;~~AAeA~~,~~MAAMM~~,OAAO,GAAG;EACZC,MAAM,EAAE;IACJC,eAAe,EAAE,EADb;IAEJC,cAAc,EAAE,EAFZ;IAGJC,iBAAiB,EAAE,CAHf;IAIJC,UAAU,EAAE;EAJR;AADI,CAAhB;AASA,eAAe,SAASC,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,OAAO,GAAG,KADR;IAEFC,~~QAFE~~;IAGFC,KAAK,EAAEC,~~SAHL~~;~~IAIF~~,GAAGC;~~EAJD~~,~~IAKFL~~,~~KALJ~~;~~EAOA~~,~~MAAMM~~,MAAM,~~GAAGzB~~,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,~~MAAM2B~~,SAAS,~~GAAGlC~~,MAAM,CAAC,IAAIE,QAAQ,~~CAACiC~~,KAAb,~~CAAmBP~~,OAAO,GAAG,CAAH,GAAO,CAAjC,CAAD,CAAN,~~CAA4CQ~~,OAA9D;EAEA,MAAM;~~IACFd~~,eADE;IAEFC,cAFE;IAGFC,iBAHE;IAIFC;EAJE,IAKFL,OAAO,CAAC,QAAD,CALX;~~EAOAnB~~,SAAS,CAAC,MAAM;IACZC,QAAQ,~~CAACmC~~,MAAT,CAAgBH,SAAhB,EAA2B;MACvBI,OAAO,~~EAAEV~~,OAAO,GAAG,CAAH,GAAO,CADA;~~MAEvBW~~,QAAQ,EAAE,GAFa;MAGvBC,eAAe,EAAE;IAHM,CAA3B,EAIGC,KAJH;EAKH,CANQ,EAMN,~~CAACb~~,OAAD,CANM,CAAT;EAQA,~~MAAMc~~,UAAU,GAAGR,SAAS,CAACS,WAAV,CAAsB;IACrCC,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADyB;IAErCC,WAAW,EAAE,~~CAACrB~~,iBAAD,EAAoBD,cAAc,GAAGE,UAAjB,GAA8BD,iBAAlD;EAFwB,CAAtB,CAAnB;EAKA,~~MAAMsB~~,cAAc,~~GAAGxC~~,GAAG,CAAC,~~CACvB2B~~,MAAM,~~CAACvB~~,IADgB,EAEvB;~~IACIO~~,eAAe,~~EAAEW~~,~~OAAO~~,~~GAClBnB~~,KAAK,~~CAACsC~~,OAAN,CAAcC,IAAd,CAAmBC,~~MADD~~,~~GAElBxC~~,KAAK,~~CAACsC~~,OAAN,CAAcC,IAAd,CAAmBE,~~IAH7B~~;~~IAIIC~~,MAAM,~~EAAE7B~~,~~eAJZ~~;~~IAKI8B~~,KAAK,~~EAAE7B~~;~~EALX~~,CAFuB,~~EASvBQ~~,~~SATuB~~,CAAD,CAA1B;~~EAYA~~,~~MAAMsB~~,WAAW,~~GAAG/C~~,GAAG,CAAC,~~CACpB2B~~,MAAM,~~CAACjB~~,MADa,EAEpB;~~IACImC~~,MAAM,~~EAAE1B~~,~~UADZ~~;~~IAEI2B~~,KAAK,~~EAAE3B~~;~~EAFX~~,CAFoB,CAAD,CAAvB;~~EAQA~~,~~MAAM6B~~,aAAa,GAAG;IAClBC,SAAS,EAAE,CAAC;~~MAAEb~~,UAAU,EAAEA;IAAd,CAAD;EADO,CAAtB;;EAIA,~~MAAMc~~,WAAW,GAAG,MAAM;~~IACtB3B~~,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG,~~CAACD~~,OAAJ,CAAR;EACH,CAFD;;EAIA,oBACI,oBAAC,UAAD,~~eACQI~~,UADR;IAEI,WAAW,EAAE,~~MAFjB~~;~~IAGI~~,OAAO,~~EAAEwB~~,~~WAHb~~;~~IAII~~,KAAK,~~EAAEV~~;~~EAJX~~,~~iBAMI~~,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,~~EAAEQ~~;EAAtB,gBACI,oBAAC,UAAD;IACI,KAAK,~~EAAED~~,WADX;IAEI,OAAO,EAAE;EAFb,EADJ,~~CANJ~~,CADJ;~~AAeH~~;AAAA"}
1	+ {"version":3,"names":["React","useRef","useEffect","Animated","commonColors","ButtonBase","ShadowView","css","useTheme","useStyles","theme","root","borderRadius","shape","radius","full","justifyContent","toggle","sizeMap","medium","containerHeight","containerWidth","paddingHorizontal","toggleSize","Toggle","props","checked","disabled","onChange","style","styleProp","otherProps","styles","animation","Value","current","timing","toValue","duration","useNativeDriver","start","translateX","interpolate","inputRange","outputRange","containerStyle","backgroundColor","palette","fill","weak","accent","height","width","toggleStyle","status","disabledLabel","static","strongInverse","animatedStyle","transform","handlePress"],"sources":["Toggle.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { Animated } from 'react-native';\nimport { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport ShadowView from '../ShadowView';\nimport { css, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type ToggleProps from './ToggleProps';\n\ntype ToggleStyles = NamedStylesStringUnion<'root' \| 'toggle'>;\n\nconst useStyles: UseStyles<ToggleStyles> = function (): ToggleStyles {\n const theme = useTheme();\n\n return {\n root: {\n borderRadius: theme.shape.radius.full,\n justifyContent: 'center',\n },\n toggle: {\n borderRadius: theme.shape.radius.full,\n },\n };\n};\n\nconst sizeMap = {\n medium: {\n containerHeight: 24,\n containerWidth: 42,\n paddingHorizontal: 3,\n toggleSize: 18,\n },\n};\n\nexport default function Toggle(props: ToggleProps) {\n const {\n checked = false,\n disabled = false,\n onChange,\n style: styleProp,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const animation = useRef(new Animated.Value(checked ? 1 : 0)).current;\n\n const {\n containerHeight,\n containerWidth,\n paddingHorizontal,\n toggleSize,\n } = sizeMap['medium'];\n\n useEffect(() => {\n Animated.timing(animation, {\n toValue: checked ? 1 : 0,\n duration: 150,\n useNativeDriver: false,\n }).start();\n }, [checked]);\n\n const translateX = animation.interpolate({\n inputRange: [0, 1],\n outputRange: [paddingHorizontal, containerWidth - toggleSize - paddingHorizontal],\n });\n\n const containerStyle = css([\n styles.root,\n {\n backgroundColor: disabled \|\| !checked ? theme.palette.fill.weak : theme.palette.fill.accent,\n height: containerHeight,\n width: containerWidth,\n },\n styleProp,\n ]);\n\n const toggleStyle = css([\n styles.toggle,\n {\n backgroundColor: disabled\n ? theme.palette.status.disabledLabel\n : commonColors.static.strongInverse,\n height: toggleSize,\n width: toggleSize,\n },\n ]);\n\n const animatedStyle = {\n transform: [{ translateX: translateX as unknown }],\n } as ExtendedStyle;\n\n const handlePress = () => {\n onChange?.(!checked);\n };\n\n return (\n <ButtonBase\n {...otherProps}\n disabled={disabled}\n pressEffect={'none'}\n onPress={handlePress}\n style={containerStyle}\n >\n <Animated.View style={animatedStyle}>\n <ShadowView\n style={toggleStyle}\n variant={400}\n />\n </Animated.View>\n </ButtonBase>\n );\n};\n"],"mappings":"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"}

package/build/module/Toolbar/Toolbar.js CHANGED Viewed

@@ -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 { View } from 'react-native';
+import Row from '../Row';
 import { css, useTheme } from '../styles';
 const useStyles = function () {
@@ -9,9 +9,7 @@ const useStyles = function () {
   return {
     root: {
       alignItems: 'center',
-      flexDirection: 'row',
-      flexWrap: 'nowrap',
-      minHeight: 56
+      flexWrap: 'nowrap'
     },
     gutters: {
       paddingHorizontal: theme.spacing(4)
@@ -19,15 +17,27 @@ const useStyles = function () {
   };
 };
+const sizeMap = {
+  small: {
+    height: 48
+  },
+  medium: {
+    height: 50
+  },
+  large: {
+    height: 56
+  }
+};
 export default function Toolbar(props) {
   const {
     disableGutters = false,
+    size = 'medium',
     style,
     ...otherProps
   } = props;
   const styles = useStyles();
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: css([styles.root, !disableGutters ? styles.gutters : undefined, style])
+  return /*#__PURE__*/React.createElement(Row, _extends({
+    style: css([styles.root, !disableGutters ? styles.gutters : undefined, sizeMap[size], style])
   }, otherProps));
 }
 ;

package/build/module/Toolbar/Toolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","~~View~~","css","useTheme","useStyles","theme","root","alignItems","~~flexDirection~~","~~flexWrap~~","~~minHeight~~","~~gutters~~","~~paddingHorizontal~~","~~spacing~~","Toolbar","props","disableGutters","style","otherProps","styles","undefined"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { ~~View~~ } from '~~react~~-~~native~~';\nimport { ~~NamedStylesStringUnion~~, ~~UseStyles~~ } from '~~@fountain-ui/~~styles';\nimport type ToolbarProps from './ToolbarProps';\nimport { ~~css,~~ ~~useTheme~~ } from '~~../styles~~';\n\ntype ToolbarStyles = NamedStylesStringUnion<'root' \| 'gutters'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n ~~flexDirection: 'row',\n~~ flexWrap: 'nowrap',\n ~~minHeight: 56,\n~~ },\n gutters: {\n paddingHorizontal: theme.spacing(4),\n },\n };\n};\n\nexport default function Toolbar(props: ToolbarProps) {\n const {\n disableGutters = false,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n return (\n <~~View~~\n style={css([\n styles.root,\n !disableGutters ? styles.gutters : undefined,\n style,\n ])}\n {...otherProps}\n />\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;~~AACA~~,~~SAASC~~,~~IAAT~~,~~QAAqB~~,~~cAArB~~;~~AAGA~~,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;~~AAIA~~,MAAMC,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,~~aAAa,EAAE,KAFb;MAGFC,~~QAAQ,EAAE~~,QAHR~~;~~MAIFC~~,~~SAAS,EAAE;IAJT,~~CADH;~~IAOHC~~,OAAO,EAAE;MACLC,iBAAiB,~~EAAEP~~,KAAK,~~CAACQ~~,OAAN,CAAc,CAAd;IADd;~~EAPN~~,CAAP;~~AAWH~~,~~CAdD~~;;~~AAgBA~~,eAAe,~~SAASC~~,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,cAAc,GAAG,KADf;IAEFC,~~KAFE~~;~~IAGF~~,GAAGC;~~EAHD~~,~~IAIFH~~,~~KAJJ~~;~~EAMA~~,~~MAAMI~~,MAAM,~~GAAGf~~,SAAS,EAAxB;EAEA,oBACI,oBAAC,~~IAAD~~;IACI,KAAK,EAAEF,GAAG,CAAC,~~CACPiB~~,MAAM,~~CAACb~~,IADA,EAEP,~~CAACU~~,cAAD,~~GAAkBG~~,MAAM,~~CAACR~~,OAAzB,~~GAAmCS~~,SAF5B,~~EAGPH~~,~~KAHO~~,CAAD;EADd,~~GAMQC~~,~~UANR~~,EADJ;~~AAUH~~;AAAA"}
1	+ {"version":3,"names":["React","Row","css","useTheme","useStyles","theme","root","alignItems","flexWrap","gutters","paddingHorizontal","spacing","sizeMap","small","height","medium","large","Toolbar","props","disableGutters","size","style","otherProps","styles","undefined"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { css, useTheme } from '../styles';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'root' \| 'gutters'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n flexWrap: 'nowrap',\n },\n gutters: {\n paddingHorizontal: theme.spacing(4),\n },\n };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n small: { height: 48 },\n medium: { height: 50 },\n large: { height: 56 },\n};\n\nexport default function Toolbar(props: ToolbarProps) {\n const {\n disableGutters = false,\n size = 'medium',\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n return (\n <Row\n style={css([\n styles.root,\n !disableGutters ? styles.gutters : undefined,\n sizeMap[size],\n style,\n ])}\n {...otherProps}\n />\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAMA,MAAMC,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,QAAQ,EAAE;IAFR,CADH;IAKHC,OAAO,EAAE;MACLC,iBAAiB,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd;IADd;EALN,CAAP;AASH,CAZD;;AAcA,MAAMC,OAA6C,GAAG;EAClDC,KAAK,EAAE;IAAEC,MAAM,EAAE;EAAV,CAD2C;EAElDC,MAAM,EAAE;IAAED,MAAM,EAAE;EAAV,CAF0C;EAGlDE,KAAK,EAAE;IAAEF,MAAM,EAAE;EAAV;AAH2C,CAAtD;AAMA,eAAe,SAASG,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,cAAc,GAAG,KADf;IAEFC,IAAI,GAAG,QAFL;IAGFC,KAHE;IAIF,GAAGC;EAJD,IAKFJ,KALJ;EAOA,MAAMK,MAAM,GAAGnB,SAAS,EAAxB;EAEA,oBACI,oBAAC,GAAD;IACI,KAAK,EAAEF,GAAG,CAAC,CACPqB,MAAM,CAACjB,IADA,EAEP,CAACa,cAAD,GAAkBI,MAAM,CAACd,OAAzB,GAAmCe,SAF5B,EAGPZ,OAAO,CAACQ,IAAD,CAHA,EAIPC,KAJO,CAAD;EADd,GAOQC,UAPR,EADJ;AAWH;AAAA"}

package/build/module/Toolbar/ToolbarProps.js CHANGED Viewed

@@ -1,2 +1,2 @@
+export const toolbarSizes = ['small', 'medium', 'large'];
 //# sourceMappingURL=ToolbarProps.js.map

package/build/module/Toolbar/ToolbarProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["ToolbarProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ~~ViewProps~~ } from '~~react-native~~';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface ToolbarProps extends OverridableComponentProps<~~ViewProps~~, {\n /*\n The content of the component.\n /\n children: React.ReactNode,\n\n /\n If `true`, disables gutter padding.\n * @default false\n */\n disableGutters?: boolean,\n}> {}\n"],"mappings":""}
1	+ {"version":3,"names":["toolbarSizes"],"sources":["ToolbarProps.ts"],"sourcesContent":["import React from 'react';\nimport type { RowProps } from '../Row';\nimport type { OverridableComponentProps } from '../types';\n\nexport const toolbarSizes = ['small', 'medium', 'large'] as const;\nexport type ToolbarSize = typeof toolbarSizes[number];\n\nexport default interface ToolbarProps extends OverridableComponentProps<RowProps, {\n /*\n The content of the component.\n /\n children: React.ReactNode,\n\n /\n If `true`, disables gutter padding.\n * @default false\n /\n disableGutters?: boolean,\n\n /\n Determines the height of the toolbar.\n * @default 'medium'\n */\n size?: ToolbarSize;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,YAAY,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,CAArB"}

package/build/module/Toolbar/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
 export { default } from './Toolbar';
+export { toolbarSizes } from './ToolbarProps';
 //# sourceMappingURL=index.js.map

package/build/module/Toolbar/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Toolbar';\nexport type { default as ToolbarProps } from './ToolbarProps';"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB"}
1	+ {"version":3,"names":["default","toolbarSizes"],"sources":["index.ts"],"sourcesContent":["export { default } from './Toolbar';\nexport type { default as ToolbarProps } from './ToolbarProps';\nexport { toolbarSizes } from './ToolbarProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB;AAEA,SAASC,YAAT,QAA6B,gBAA7B"}

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

@@ -1,2 +1,6 @@
 export { default } from './Beak';
+export { default as HorizontalLargeBeak } from './HorizontalLargeBeak';
+export { default as HorizontalSmallBeak } from './HorizontalSmallBeak';
+export { default as VerticalLargeBeak } from './VerticalLargeBeak';
+export { default as VerticalSmallBeak } from './VerticalSmallBeak';
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"names":["default","HorizontalLargeBeak","HorizontalSmallBeak","VerticalLargeBeak","VerticalSmallBeak"],"sources":["index.ts"],"sourcesContent":["export { default } from './Beak';\nexport type { default as BeakProps } from './BeakProps';\nexport { default as HorizontalLargeBeak } from './HorizontalLargeBeak';\nexport { default as HorizontalSmallBeak } from './HorizontalSmallBeak';\nexport { default as VerticalLargeBeak } from './VerticalLargeBeak';\nexport { default as VerticalSmallBeak } from './VerticalSmallBeak';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB;AAEA,SAASA,OAAO,IAAIC,mBAApB,QAA+C,uBAA/C;AACA,SAASD,OAAO,IAAIE,mBAApB,QAA+C,uBAA/C;AACA,SAASF,OAAO,IAAIG,iBAApB,QAA6C,qBAA7C;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,qBAA7C"}

package/build/module/Tooltip/Tooltip.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, Text, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
 import Beak from './Beaks';
@@ -50,14 +49,14 @@ const useStyles = function () {
     },
     small: {
       borderRadius: theme.shape.radius.sm,
+      paddingBottom: theme.spacing(1.75),
       paddingHorizontal: theme.spacing(2),
-      paddingVertical: theme.spacing(1.5)
+      paddingTop: theme.spacing(1.5)
     },
     large: {
       borderRadius: 5,
-      paddingBottom: theme.spacing(2.5),
       paddingHorizontal: theme.spacing(4),
-      paddingTop: theme.spacing(2)
+      paddingVertical: theme.spacing(2)
     }
   };
 };
@@ -121,13 +120,7 @@ export default function Tooltip(props) {
     scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
   }, [visible]);
   const fontStyle = createFontStyle(theme, {
-    selector: typo => size === 'large' ? typographyOf({
-      fontSize: 13,
-      lineHeight: 19.5,
-      fontFamily: 'Pretendard-Regular',
-      letterSpacing: 0
-    }) // TODO: change caption2.
-    : typo.caption3.regular,
+    selector: typo => size === 'large' ? typo.body3.regular : typo.caption2.regular,
     color: theme.palette.text.strongInverse
   });
   const textStyle = css([fontStyle, {