@fountain-ui/core 3.0.0-alpha.3 → 3.0.0-alpha.30
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.
- package/build/commonjs/Accordion/Accordion.js +15 -8
- package/build/commonjs/Accordion/Accordion.js.map +1 -1
- package/build/commonjs/Accordion/AccordionProps.js.map +1 -1
- package/build/commonjs/Accordion/useVariantStyleMap.js +15 -8
- package/build/commonjs/Accordion/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/AppBar/AppBar.js +7 -2
- package/build/commonjs/AppBar/AppBar.js.map +1 -1
- package/build/commonjs/Badge/Badge.js +4 -3
- package/build/commonjs/Badge/Badge.js.map +1 -1
- package/build/commonjs/Badge/BadgeProps.js.map +1 -1
- package/build/commonjs/Badge/useVariantStyleMap.js +2 -2
- package/build/commonjs/Badge/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/BottomSheetTitle/BottomSheetTitle.js +5 -2
- package/build/commonjs/BottomSheetTitle/BottomSheetTitle.js.map +1 -1
- package/build/commonjs/BottomSheetTitle/BottomSheetTitleProps.js.map +1 -1
- package/build/commonjs/Button/Button.js +26 -12
- package/build/commonjs/Button/Button.js.map +1 -1
- package/build/commonjs/Button/ButtonProps.js.map +1 -1
- package/build/commonjs/ButtonBase/ButtonBase.js +1 -1
- package/build/commonjs/ButtonBase/ButtonBase.js.map +1 -1
- package/build/commonjs/ButtonBase/index.js +2 -2
- package/build/commonjs/ButtonBase/index.js.map +1 -1
- package/build/commonjs/Checkbox/Checkbox.js +4 -1
- package/build/commonjs/Checkbox/Checkbox.js.map +1 -1
- package/build/commonjs/Checkbox/useVariantStyleMap.js +6 -2
- package/build/commonjs/Checkbox/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/Chip/Chip.js +25 -14
- package/build/commonjs/Chip/Chip.js.map +1 -1
- package/build/commonjs/Chip/ChipProps.js +3 -1
- package/build/commonjs/Chip/ChipProps.js.map +1 -1
- package/build/commonjs/Chip/index.js +6 -0
- package/build/commonjs/Chip/index.js.map +1 -1
- package/build/commonjs/Chip/useChipStyle.js +51 -31
- package/build/commonjs/Chip/useChipStyle.js.map +1 -1
- package/build/commonjs/Dialog/Dialog.js +10 -12
- package/build/commonjs/Dialog/Dialog.js.map +1 -1
- package/build/commonjs/Dialog/DialogProps.js +1 -1
- package/build/commonjs/Dialog/DialogProps.js.map +1 -1
- package/build/commonjs/Dialog/useDialogSectionStyle.js +6 -4
- package/build/commonjs/Dialog/useDialogSectionStyle.js.map +1 -1
- package/build/commonjs/Dialog/useDialogStyle.js +19 -8
- package/build/commonjs/Dialog/useDialogStyle.js.map +1 -1
- package/build/commonjs/DialogActions/DialogActions.js +0 -1
- package/build/commonjs/DialogActions/DialogActions.js.map +1 -1
- package/build/commonjs/DialogTitle/DialogLargeTitle.js +80 -0
- package/build/commonjs/DialogTitle/DialogLargeTitle.js.map +1 -0
- package/build/commonjs/DialogTitle/DialogTitle.js +8 -4
- package/build/commonjs/DialogTitle/DialogTitle.js.map +1 -1
- package/build/commonjs/Divider/Divider.js +17 -9
- package/build/commonjs/Divider/Divider.js.map +1 -1
- package/build/commonjs/Divider/DividerProps.js +1 -1
- package/build/commonjs/Divider/DividerProps.js.map +1 -1
- package/build/commonjs/Empty/Empty.js +1 -1
- package/build/commonjs/Empty/Empty.js.map +1 -1
- package/build/commonjs/Flexbox/Flexbox.js +2 -0
- package/build/commonjs/Flexbox/Flexbox.js.map +1 -1
- package/build/commonjs/Flexbox/FlexboxProps.js.map +1 -1
- package/build/commonjs/IconButton/IconButton.js +3 -0
- package/build/commonjs/IconButton/IconButton.js.map +1 -1
- package/build/commonjs/IconButton/IconButtonProps.js +1 -1
- package/build/commonjs/IconButton/IconButtonProps.js.map +1 -1
- package/build/commonjs/Image/Image.js +2 -2
- package/build/commonjs/Image/Image.js.map +1 -1
- package/build/commonjs/ImageCore/ImageCoreNative.js +1 -1
- package/build/commonjs/ImageCore/ImageCoreNative.js.map +1 -1
- package/build/commonjs/ListItem/ListItem.js +38 -26
- package/build/commonjs/ListItem/ListItem.js.map +1 -1
- package/build/commonjs/ListItem/ListItemProps.js.map +1 -1
- package/build/commonjs/ListItemIcon/ListItemIcon.js +1 -2
- package/build/commonjs/ListItemIcon/ListItemIcon.js.map +1 -1
- package/build/commonjs/ListItemSecondaryAction/ListItemSecondaryAction.js +2 -0
- package/build/commonjs/ListItemSecondaryAction/ListItemSecondaryAction.js.map +1 -1
- package/build/commonjs/ListItemText/ListItemText.js +20 -21
- package/build/commonjs/ListItemText/ListItemText.js.map +1 -1
- package/build/commonjs/ListItemText/ListItemTextProps.js.map +1 -1
- package/build/commonjs/ListSubheader/ListSubheader.js +1 -1
- package/build/commonjs/ListSubheader/ListSubheader.js.map +1 -1
- package/build/commonjs/Pagination/NumberPagination.js +4 -2
- package/build/commonjs/Pagination/NumberPagination.js.map +1 -1
- package/build/commonjs/Pagination/Pagination.js +2 -0
- package/build/commonjs/Pagination/Pagination.js.map +1 -1
- package/build/commonjs/Pagination/PaginationProps.js +3 -1
- package/build/commonjs/Pagination/PaginationProps.js.map +1 -1
- package/build/commonjs/Pagination/index.js +6 -0
- package/build/commonjs/Pagination/index.js.map +1 -1
- package/build/commonjs/PaginationItem/PaginationItem.js +32 -22
- package/build/commonjs/PaginationItem/PaginationItem.js.map +1 -1
- package/build/commonjs/PaginationItem/PaginationItemProps.js.map +1 -1
- package/build/commonjs/Radio/Radio.js +11 -4
- package/build/commonjs/Radio/Radio.js.map +1 -1
- package/build/commonjs/RadioGroup/RadioGroup.js +2 -27
- package/build/commonjs/RadioGroup/RadioGroup.js.map +1 -1
- package/build/commonjs/Section/Section.js +32 -0
- package/build/commonjs/Section/Section.js.map +1 -0
- package/build/commonjs/Section/SectionProps.js +2 -0
- package/build/commonjs/Section/SectionProps.js.map +1 -0
- package/build/commonjs/Section/index.js +16 -0
- package/build/commonjs/Section/index.js.map +1 -0
- package/build/commonjs/ShadowView/ShadowView.native.js +4 -0
- package/build/commonjs/ShadowView/ShadowView.native.js.map +1 -1
- package/build/commonjs/SnackbarContent/SnackbarContent.js +26 -9
- package/build/commonjs/SnackbarContent/SnackbarContent.js.map +1 -1
- package/build/commonjs/Tab/Tab.js +21 -19
- package/build/commonjs/Tab/Tab.js.map +1 -1
- package/build/commonjs/Tab/TabProps.js +4 -2
- package/build/commonjs/Tab/TabProps.js.map +1 -1
- package/build/commonjs/Tab/index.js +14 -0
- package/build/commonjs/Tab/index.js.map +1 -1
- package/build/commonjs/Tab/useVariantStyleMap.js +59 -18
- package/build/commonjs/Tab/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/TabBase/TabBase.js +1 -8
- package/build/commonjs/TabBase/TabBase.js.map +1 -1
- package/build/commonjs/TabBase/TabBaseProps.js.map +1 -1
- package/build/commonjs/Tabs/Tabs.js +23 -7
- package/build/commonjs/Tabs/Tabs.js.map +1 -1
- package/build/commonjs/Tabs/TabsProps.js.map +1 -1
- package/build/commonjs/Tabs/index.js.map +1 -1
- package/build/commonjs/Tabs/useTabsStyle.js +80 -0
- package/build/commonjs/Tabs/useTabsStyle.js.map +1 -0
- package/build/commonjs/TextField/TextField.js +48 -12
- package/build/commonjs/TextField/TextField.js.map +1 -1
- package/build/commonjs/TextField/useVariantStyleMap.js +29 -29
- package/build/commonjs/TextField/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/Toolbar/BackButton/BackButton.js +47 -0
- package/build/commonjs/Toolbar/BackButton/BackButton.js.map +1 -0
- package/build/commonjs/Toolbar/BackButton/BackButtonProps.js +2 -0
- package/build/commonjs/Toolbar/BackButton/BackButtonProps.js.map +1 -0
- package/build/commonjs/Toolbar/BackButton/index.js +16 -0
- package/build/commonjs/Toolbar/BackButton/index.js.map +1 -0
- package/build/commonjs/Toolbar/Toolbar.js +8 -4
- package/build/commonjs/Toolbar/Toolbar.js.map +1 -1
- package/build/commonjs/Tooltip/Beaks/index.js +32 -0
- package/build/commonjs/Tooltip/Beaks/index.js.map +1 -1
- package/build/commonjs/Tooltip/Tooltip.js +11 -18
- package/build/commonjs/Tooltip/Tooltip.js.map +1 -1
- package/build/commonjs/Tooltip/index.js +19 -0
- package/build/commonjs/Tooltip/index.js.map +1 -1
- package/build/commonjs/Typography/Typography.js +9 -2
- package/build/commonjs/Typography/Typography.js.map +1 -1
- package/build/commonjs/Typography/TypographyProps.js.map +1 -1
- package/build/commonjs/hooks/useBreakpointUp.js +4 -1
- package/build/commonjs/hooks/useBreakpointUp.js.map +1 -1
- package/build/commonjs/hooks/useCollapsibleAppBar.js +3 -10
- package/build/commonjs/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/commonjs/hooks/useContentContainerStyle.js +39 -25
- package/build/commonjs/hooks/useContentContainerStyle.js.map +1 -1
- package/build/commonjs/hooks/useFadeInAppBar.js +2 -2
- package/build/commonjs/hooks/useFadeInAppBar.js.map +1 -1
- package/build/commonjs/index.js +21 -0
- package/build/commonjs/index.js.map +1 -1
- package/build/commonjs/internal/icons/AppBarChevronLeft.js +23 -0
- package/build/commonjs/internal/icons/AppBarChevronLeft.js.map +1 -0
- package/build/commonjs/internal/icons/ChevronLeft.js +4 -2
- package/build/commonjs/internal/icons/ChevronLeft.js.map +1 -1
- package/build/commonjs/internal/icons/ChevronRight.js +4 -2
- package/build/commonjs/internal/icons/ChevronRight.js.map +1 -1
- package/build/commonjs/internal/icons/ChipClose.js +23 -0
- package/build/commonjs/internal/icons/ChipClose.js.map +1 -0
- package/build/commonjs/internal/icons/Clear.js +3 -3
- package/build/commonjs/internal/icons/Clear.js.map +1 -1
- package/build/commonjs/internal/icons/Close.js +4 -2
- package/build/commonjs/internal/icons/Close.js.map +1 -1
- package/build/commonjs/internal/icons/Search.js +2 -2
- package/build/commonjs/internal/icons/Search.js.map +1 -1
- package/build/commonjs/internal/icons/index.js +16 -0
- package/build/commonjs/internal/icons/index.js.map +1 -1
- package/build/module/Accordion/Accordion.js +15 -8
- package/build/module/Accordion/Accordion.js.map +1 -1
- package/build/module/Accordion/AccordionProps.js.map +1 -1
- package/build/module/Accordion/useVariantStyleMap.js +15 -8
- package/build/module/Accordion/useVariantStyleMap.js.map +1 -1
- package/build/module/AppBar/AppBar.js +6 -2
- package/build/module/AppBar/AppBar.js.map +1 -1
- package/build/module/Badge/Badge.js +4 -3
- package/build/module/Badge/Badge.js.map +1 -1
- package/build/module/Badge/BadgeProps.js.map +1 -1
- package/build/module/Badge/useVariantStyleMap.js +2 -2
- package/build/module/Badge/useVariantStyleMap.js.map +1 -1
- package/build/module/BottomSheetTitle/BottomSheetTitle.js +5 -2
- package/build/module/BottomSheetTitle/BottomSheetTitle.js.map +1 -1
- package/build/module/BottomSheetTitle/BottomSheetTitleProps.js.map +1 -1
- package/build/module/Button/Button.js +27 -13
- package/build/module/Button/Button.js.map +1 -1
- package/build/module/Button/ButtonProps.js.map +1 -1
- package/build/module/ButtonBase/ButtonBase.js +1 -1
- package/build/module/ButtonBase/ButtonBase.js.map +1 -1
- package/build/module/ButtonBase/index.js +1 -1
- package/build/module/ButtonBase/index.js.map +1 -1
- package/build/module/Checkbox/Checkbox.js +4 -1
- package/build/module/Checkbox/Checkbox.js.map +1 -1
- package/build/module/Checkbox/useVariantStyleMap.js +6 -2
- package/build/module/Checkbox/useVariantStyleMap.js.map +1 -1
- package/build/module/Chip/Chip.js +21 -13
- package/build/module/Chip/Chip.js.map +1 -1
- package/build/module/Chip/ChipProps.js +1 -0
- package/build/module/Chip/ChipProps.js.map +1 -1
- package/build/module/Chip/index.js +1 -1
- package/build/module/Chip/index.js.map +1 -1
- package/build/module/Chip/useChipStyle.js +51 -31
- package/build/module/Chip/useChipStyle.js.map +1 -1
- package/build/module/Dialog/Dialog.js +10 -11
- package/build/module/Dialog/Dialog.js.map +1 -1
- package/build/module/Dialog/DialogProps.js +1 -1
- package/build/module/Dialog/DialogProps.js.map +1 -1
- package/build/module/Dialog/useDialogSectionStyle.js +6 -4
- package/build/module/Dialog/useDialogSectionStyle.js.map +1 -1
- package/build/module/Dialog/useDialogStyle.js +18 -8
- package/build/module/Dialog/useDialogStyle.js.map +1 -1
- package/build/module/DialogActions/DialogActions.js +0 -1
- package/build/module/DialogActions/DialogActions.js.map +1 -1
- package/build/module/DialogTitle/DialogLargeTitle.js +65 -0
- package/build/module/DialogTitle/DialogLargeTitle.js.map +1 -0
- package/build/module/DialogTitle/DialogTitle.js +6 -3
- package/build/module/DialogTitle/DialogTitle.js.map +1 -1
- package/build/module/Divider/Divider.js +7 -0
- package/build/module/Divider/Divider.js.map +1 -1
- package/build/module/Divider/DividerProps.js +1 -1
- package/build/module/Divider/DividerProps.js.map +1 -1
- package/build/module/Empty/Empty.js +1 -1
- package/build/module/Empty/Empty.js.map +1 -1
- package/build/module/Flexbox/Flexbox.js +2 -0
- package/build/module/Flexbox/Flexbox.js.map +1 -1
- package/build/module/Flexbox/FlexboxProps.js.map +1 -1
- package/build/module/IconButton/IconButton.js +3 -0
- package/build/module/IconButton/IconButton.js.map +1 -1
- package/build/module/IconButton/IconButtonProps.js +1 -1
- package/build/module/IconButton/IconButtonProps.js.map +1 -1
- package/build/module/Image/Image.js +2 -2
- package/build/module/Image/Image.js.map +1 -1
- package/build/module/ImageCore/ImageCoreNative.js +1 -1
- package/build/module/ImageCore/ImageCoreNative.js.map +1 -1
- package/build/module/ListItem/ListItem.js +36 -28
- package/build/module/ListItem/ListItem.js.map +1 -1
- package/build/module/ListItem/ListItemProps.js.map +1 -1
- package/build/module/ListItemIcon/ListItemIcon.js +1 -2
- package/build/module/ListItemIcon/ListItemIcon.js.map +1 -1
- package/build/module/ListItemSecondaryAction/ListItemSecondaryAction.js +2 -0
- package/build/module/ListItemSecondaryAction/ListItemSecondaryAction.js.map +1 -1
- package/build/module/ListItemText/ListItemText.js +17 -19
- package/build/module/ListItemText/ListItemText.js.map +1 -1
- package/build/module/ListItemText/ListItemTextProps.js.map +1 -1
- package/build/module/ListSubheader/ListSubheader.js +1 -1
- package/build/module/ListSubheader/ListSubheader.js.map +1 -1
- package/build/module/Pagination/NumberPagination.js +4 -2
- package/build/module/Pagination/NumberPagination.js.map +1 -1
- package/build/module/Pagination/Pagination.js +2 -0
- package/build/module/Pagination/Pagination.js.map +1 -1
- package/build/module/Pagination/PaginationProps.js +1 -0
- package/build/module/Pagination/PaginationProps.js.map +1 -1
- package/build/module/Pagination/index.js +1 -1
- package/build/module/Pagination/index.js.map +1 -1
- package/build/module/PaginationItem/PaginationItem.js +28 -21
- package/build/module/PaginationItem/PaginationItem.js.map +1 -1
- package/build/module/PaginationItem/PaginationItemProps.js.map +1 -1
- package/build/module/Radio/Radio.js +10 -4
- package/build/module/Radio/Radio.js.map +1 -1
- package/build/module/RadioGroup/RadioGroup.js +2 -20
- package/build/module/RadioGroup/RadioGroup.js.map +1 -1
- package/build/module/Section/Section.js +19 -0
- package/build/module/Section/Section.js.map +1 -0
- package/build/module/Section/SectionProps.js +2 -0
- package/build/module/Section/SectionProps.js.map +1 -0
- package/build/module/Section/index.js +2 -0
- package/build/module/Section/index.js.map +1 -0
- package/build/module/ShadowView/ShadowView.native.js +4 -0
- package/build/module/ShadowView/ShadowView.native.js.map +1 -1
- package/build/module/SnackbarContent/SnackbarContent.js +26 -9
- package/build/module/SnackbarContent/SnackbarContent.js.map +1 -1
- package/build/module/Tab/Tab.js +22 -19
- package/build/module/Tab/Tab.js.map +1 -1
- package/build/module/Tab/TabProps.js +2 -1
- package/build/module/Tab/TabProps.js.map +1 -1
- package/build/module/Tab/index.js +1 -0
- package/build/module/Tab/index.js.map +1 -1
- package/build/module/Tab/useVariantStyleMap.js +59 -18
- package/build/module/Tab/useVariantStyleMap.js.map +1 -1
- package/build/module/TabBase/TabBase.js +1 -8
- package/build/module/TabBase/TabBase.js.map +1 -1
- package/build/module/TabBase/TabBaseProps.js.map +1 -1
- package/build/module/Tabs/Tabs.js +21 -7
- package/build/module/Tabs/Tabs.js.map +1 -1
- package/build/module/Tabs/TabsProps.js.map +1 -1
- package/build/module/Tabs/index.js.map +1 -1
- package/build/module/Tabs/useTabsStyle.js +70 -0
- package/build/module/Tabs/useTabsStyle.js.map +1 -0
- package/build/module/TextField/TextField.js +48 -12
- package/build/module/TextField/TextField.js.map +1 -1
- package/build/module/TextField/useVariantStyleMap.js +29 -29
- package/build/module/TextField/useVariantStyleMap.js.map +1 -1
- package/build/module/Toolbar/BackButton/BackButton.js +32 -0
- package/build/module/Toolbar/BackButton/BackButton.js.map +1 -0
- package/build/module/Toolbar/BackButton/BackButtonProps.js +2 -0
- package/build/module/Toolbar/BackButton/BackButtonProps.js.map +1 -0
- package/build/module/Toolbar/BackButton/index.js +2 -0
- package/build/module/Toolbar/BackButton/index.js.map +1 -0
- package/build/module/Toolbar/Toolbar.js +7 -3
- package/build/module/Toolbar/Toolbar.js.map +1 -1
- package/build/module/Tooltip/Beaks/index.js +4 -0
- package/build/module/Tooltip/Beaks/index.js.map +1 -1
- package/build/module/Tooltip/Tooltip.js +4 -10
- package/build/module/Tooltip/Tooltip.js.map +1 -1
- package/build/module/Tooltip/index.js +1 -0
- package/build/module/Tooltip/index.js.map +1 -1
- package/build/module/Typography/Typography.js +9 -2
- package/build/module/Typography/Typography.js.map +1 -1
- package/build/module/Typography/TypographyProps.js.map +1 -1
- package/build/module/hooks/useBreakpointUp.js +4 -1
- package/build/module/hooks/useBreakpointUp.js.map +1 -1
- package/build/module/hooks/useCollapsibleAppBar.js +4 -10
- package/build/module/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/module/hooks/useContentContainerStyle.js +43 -25
- package/build/module/hooks/useContentContainerStyle.js.map +1 -1
- package/build/module/hooks/useFadeInAppBar.js +2 -2
- package/build/module/hooks/useFadeInAppBar.js.map +1 -1
- package/build/module/index.js +2 -0
- package/build/module/index.js.map +1 -1
- package/build/module/internal/icons/AppBarChevronLeft.js +9 -0
- package/build/module/internal/icons/AppBarChevronLeft.js.map +1 -0
- package/build/module/internal/icons/ChevronLeft.js +4 -2
- package/build/module/internal/icons/ChevronLeft.js.map +1 -1
- package/build/module/internal/icons/ChevronRight.js +4 -2
- package/build/module/internal/icons/ChevronRight.js.map +1 -1
- package/build/module/internal/icons/ChipClose.js +9 -0
- package/build/module/internal/icons/ChipClose.js.map +1 -0
- package/build/module/internal/icons/Clear.js +3 -3
- package/build/module/internal/icons/Clear.js.map +1 -1
- package/build/module/internal/icons/Close.js +4 -2
- package/build/module/internal/icons/Close.js.map +1 -1
- package/build/module/internal/icons/Search.js +2 -2
- package/build/module/internal/icons/Search.js.map +1 -1
- package/build/module/internal/icons/index.js +2 -0
- package/build/module/internal/icons/index.js.map +1 -1
- package/build/typescript/Accordion/AccordionProps.d.ts +4 -1
- package/build/typescript/Accordion/useVariantStyleMap.d.ts +1 -0
- package/build/typescript/Badge/BadgeProps.d.ts +10 -5
- package/build/typescript/BottomSheetTitle/BottomSheetTitleProps.d.ts +1 -0
- package/build/typescript/Button/ButtonProps.d.ts +5 -0
- package/build/typescript/ButtonBase/index.d.ts +1 -1
- package/build/typescript/Checkbox/useVariantStyleMap.d.ts +1 -0
- package/build/typescript/Chip/ChipProps.d.ts +11 -4
- package/build/typescript/Chip/index.d.ts +1 -1
- package/build/typescript/Chip/useChipStyle.d.ts +6 -3
- package/build/typescript/Dialog/DialogProps.d.ts +1 -6
- package/build/typescript/Dialog/useDialogStyle.d.ts +1 -1
- package/build/typescript/DialogTitle/DialogLargeTitle.d.ts +9 -0
- package/build/typescript/DialogTitle/DialogTitle.d.ts +6 -1
- package/build/typescript/Divider/DividerProps.d.ts +1 -1
- package/build/typescript/Flexbox/FlexboxProps.d.ts +4 -0
- package/build/typescript/IconButton/IconButtonProps.d.ts +1 -1
- package/build/typescript/ListItem/ListItem.d.ts +1 -1
- package/build/typescript/ListItem/ListItemProps.d.ts +4 -0
- package/build/typescript/ListItemText/ListItemTextProps.d.ts +2 -9
- package/build/typescript/Pagination/PaginationProps.d.ts +12 -0
- package/build/typescript/Pagination/index.d.ts +2 -2
- package/build/typescript/PaginationItem/PaginationItemProps.d.ts +6 -0
- package/build/typescript/Section/Section.d.ts +3 -0
- package/build/typescript/Section/SectionProps.d.ts +6 -0
- package/build/typescript/Section/index.d.ts +2 -0
- package/build/typescript/Tab/TabProps.d.ts +21 -2
- package/build/typescript/Tab/index.d.ts +2 -1
- package/build/typescript/Tab/useVariantStyleMap.d.ts +4 -2
- package/build/typescript/TabBase/TabBaseProps.d.ts +0 -5
- package/build/typescript/Tabs/Tabs.d.ts +1 -1
- package/build/typescript/Tabs/TabsProps.d.ts +6 -1
- package/build/typescript/Tabs/index.d.ts +1 -1
- package/build/typescript/Tabs/useTabsStyle.d.ts +8 -0
- package/build/typescript/TextField/useVariantStyleMap.d.ts +2 -0
- package/build/typescript/Toolbar/BackButton/BackButton.d.ts +3 -0
- package/build/typescript/Toolbar/BackButton/BackButtonProps.d.ts +4 -0
- package/build/typescript/Toolbar/BackButton/index.d.ts +2 -0
- package/build/typescript/Toolbar/Toolbar.d.ts +6 -1
- package/build/typescript/Tooltip/Beaks/index.d.ts +4 -0
- package/build/typescript/Tooltip/index.d.ts +1 -0
- package/build/typescript/Typography/TypographyProps.d.ts +4 -0
- package/build/typescript/hooks/useCollapsibleAppBar.d.ts +0 -1
- package/build/typescript/hooks/useContentContainerStyle.d.ts +5 -8
- package/build/typescript/index.d.ts +2 -0
- package/build/typescript/internal/icons/AppBarChevronLeft.d.ts +131 -0
- package/build/typescript/internal/icons/ChipClose.d.ts +131 -0
- package/build/typescript/internal/icons/index.d.ts +2 -0
- package/package.json +5 -5
- package/src/Accordion/Accordion.tsx +18 -9
- package/src/Accordion/AccordionProps.ts +4 -2
- package/src/Accordion/useVariantStyleMap.ts +14 -6
- package/src/AppBar/AppBar.tsx +5 -1
- package/src/Badge/Badge.tsx +4 -3
- package/src/Badge/BadgeProps.ts +12 -6
- package/src/Badge/useVariantStyleMap.ts +2 -2
- package/src/BottomSheetTitle/BottomSheetTitle.tsx +4 -1
- package/src/BottomSheetTitle/BottomSheetTitleProps.ts +1 -0
- package/src/Button/Button.tsx +28 -12
- package/src/Button/ButtonProps.ts +6 -0
- package/src/ButtonBase/ButtonBase.tsx +1 -1
- package/src/ButtonBase/index.ts +1 -1
- package/src/Checkbox/Checkbox.tsx +11 -8
- package/src/Checkbox/useVariantStyleMap.ts +6 -1
- package/src/Chip/Chip.tsx +24 -13
- package/src/Chip/ChipProps.ts +13 -4
- package/src/Chip/index.ts +1 -1
- package/src/Chip/useChipStyle.ts +59 -29
- package/src/Dialog/Dialog.tsx +12 -11
- package/src/Dialog/DialogProps.ts +1 -7
- package/src/Dialog/useDialogSectionStyle.ts +6 -4
- package/src/Dialog/useDialogStyle.ts +19 -7
- package/src/DialogActions/DialogActions.tsx +0 -1
- package/src/DialogTitle/DialogLargeTitle.tsx +95 -0
- package/src/DialogTitle/DialogTitle.tsx +6 -1
- package/src/Divider/Divider.tsx +5 -0
- package/src/Divider/DividerProps.ts +1 -1
- package/src/Empty/Empty.tsx +1 -1
- package/src/Flexbox/Flexbox.tsx +2 -0
- package/src/Flexbox/FlexboxProps.ts +5 -0
- package/src/IconButton/IconButton.tsx +2 -0
- package/src/IconButton/IconButtonProps.ts +1 -0
- package/src/Image/Image.tsx +3 -3
- package/src/ImageCore/ImageCoreNative.tsx +1 -1
- package/src/ListItem/ListItem.tsx +61 -30
- package/src/ListItem/ListItemProps.ts +5 -0
- package/src/ListItemIcon/ListItemIcon.tsx +1 -2
- package/src/ListItemSecondaryAction/ListItemSecondaryAction.tsx +2 -0
- package/src/ListItemText/ListItemText.tsx +20 -28
- package/src/ListItemText/ListItemTextProps.ts +2 -10
- package/src/ListSubheader/ListSubheader.tsx +1 -1
- package/src/Pagination/NumberPagination.tsx +7 -2
- package/src/Pagination/Pagination.tsx +3 -2
- package/src/Pagination/PaginationProps.ts +15 -0
- package/src/Pagination/index.ts +2 -2
- package/src/PaginationItem/PaginationItem.tsx +31 -24
- package/src/PaginationItem/PaginationItemProps.ts +7 -0
- package/src/Radio/Radio.tsx +12 -3
- package/src/RadioGroup/RadioGroup.tsx +2 -28
- package/src/Section/Section.tsx +26 -0
- package/src/Section/SectionProps.ts +6 -0
- package/src/Section/index.ts +2 -0
- package/src/ShadowView/ShadowView.native.tsx +4 -0
- package/src/SnackbarContent/SnackbarContent.tsx +36 -15
- package/src/Tab/Tab.tsx +32 -22
- package/src/Tab/TabProps.ts +25 -2
- package/src/Tab/index.ts +2 -1
- package/src/Tab/useVariantStyleMap.ts +72 -19
- package/src/TabBase/TabBase.tsx +1 -9
- package/src/TabBase/TabBaseProps.ts +0 -6
- package/src/Tabs/Tabs.tsx +26 -8
- package/src/Tabs/TabsProps.ts +7 -1
- package/src/Tabs/index.ts +1 -1
- package/src/Tabs/useTabsStyle.ts +77 -0
- package/src/TextField/TextField.tsx +69 -26
- package/src/TextField/useVariantStyleMap.ts +29 -27
- package/src/Toolbar/BackButton/BackButton.tsx +44 -0
- package/src/Toolbar/BackButton/BackButtonProps.ts +4 -0
- package/src/Toolbar/BackButton/index.ts +2 -0
- package/src/Toolbar/Toolbar.tsx +6 -1
- package/src/Tooltip/Beaks/index.ts +4 -0
- package/src/Tooltip/Tooltip.tsx +4 -9
- package/src/Tooltip/index.ts +1 -0
- package/src/Typography/Typography.tsx +3 -1
- package/src/Typography/TypographyProps.ts +5 -0
- package/src/hooks/useBreakpointUp.ts +3 -1
- package/src/hooks/useCollapsibleAppBar.ts +4 -23
- package/src/hooks/useContentContainerStyle.ts +43 -31
- package/src/hooks/useFadeInAppBar.ts +2 -2
- package/src/index.ts +3 -0
- package/src/internal/icons/AppBarChevronLeft.tsx +15 -0
- package/src/internal/icons/ChevronLeft.tsx +4 -1
- package/src/internal/icons/ChevronRight.tsx +4 -1
- package/src/internal/icons/ChipClose.tsx +13 -0
- package/src/internal/icons/Clear.tsx +3 -3
- package/src/internal/icons/Close.tsx +4 -1
- package/src/internal/icons/Search.tsx +2 -2
- package/src/internal/icons/index.ts +2 -0
- package/build/commonjs/ButtonBase/LegacyButtonBase.js +0 -126
- package/build/commonjs/ButtonBase/LegacyButtonBase.js.map +0 -1
- package/build/module/ButtonBase/LegacyButtonBase.js +0 -106
- package/build/module/ButtonBase/LegacyButtonBase.js.map +0 -1
- package/build/typescript/ButtonBase/LegacyButtonBase.d.ts +0 -5
- package/src/ButtonBase/LegacyButtonBase.tsx +0 -135
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","View","typographyOf","createFontStyle","css","useTheme","ButtonBase","Column","Spacer","Typography","StatusIcon","useStyles","theme","root","flexDirection","alignItems","alignSelf","backgroundColor","palette","surface","accent","borderRadius","maxWidth","paddingBottom","spacing","paddingHorizontal","paddingTop","actionButton","marginLeft","SnackbarContent","props","actionContent","message","title","onPress","style","styleProp","status","startIcon","otherProps","styles","titleFontStyle","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","messageFontStyle","labelFontStyle","hasActionButton","rootStyle","shape","radius","xl","undefined","width"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { typographyOf } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport Column from '../Column';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\nimport StatusIcon from './StatusIcon';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n const theme = useTheme();\n\n return {\n root: {\n flexDirection: 'row',\n alignItems: 'center',\n alignSelf: 'center',\n backgroundColor: theme.palette.surface.accent,\n borderRadius: 22,\n maxWidth: 400,\n paddingBottom: theme.spacing(2.25),\n paddingHorizontal: theme.spacing(4),\n paddingTop: theme.spacing(2),\n },\n actionButton: {\n marginLeft: theme.spacing(6),\n },\n };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n const {\n actionContent,\n message,\n title,\n onPress,\n style: styleProp,\n status = 'info',\n startIcon,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize:
|
|
1
|
+
{"version":3,"names":["React","Text","View","typographyOf","createFontStyle","css","useTheme","ButtonBase","Column","Spacer","Typography","StatusIcon","useStyles","theme","root","flexDirection","alignItems","alignSelf","backgroundColor","palette","surface","accent","borderRadius","maxWidth","paddingBottom","spacing","paddingHorizontal","paddingTop","actionButton","marginLeft","actionLabel","actionElement","paddingLeft","paddingVertical","SnackbarContent","props","actionContent","message","title","onPress","style","styleProp","status","startIcon","otherProps","styles","titleFontStyle","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","messageFontStyle","labelFontStyle","hasActionButton","rootStyle","shape","radius","xl","undefined","width"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { typographyOf } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport Column from '../Column';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\nimport StatusIcon from './StatusIcon';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton' | 'actionLabel' | 'actionElement'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n const theme = useTheme();\n\n return {\n root: {\n flexDirection: 'row',\n alignItems: 'center',\n alignSelf: 'center',\n backgroundColor: theme.palette.surface.accent,\n borderRadius: 22,\n maxWidth: 400,\n paddingBottom: theme.spacing(2.25),\n paddingHorizontal: theme.spacing(4),\n paddingTop: theme.spacing(2),\n },\n actionButton: {\n marginLeft: theme.spacing(6),\n },\n actionLabel: {\n paddingBottom: theme.spacing(1.5),\n paddingTop: theme.spacing(1.25),\n },\n actionElement: {\n paddingLeft: theme.spacing(2),\n paddingVertical: theme.spacing(1.25),\n },\n };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n const {\n actionContent,\n message,\n title,\n onPress,\n style: styleProp,\n status = 'info',\n startIcon,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 15,\n lineHeight: 19.5,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strongInverse,\n });\n\n const messageFontStyle = createFontStyle(theme, {\n selector: (_) => title\n ? typographyOf({\n fontSize: 12,\n lineHeight: 15.6,\n fontFamily: 'PretendardStd-Regular',\n letterSpacing: 0,\n })\n : typographyOf({\n fontSize: 14,\n lineHeight: 18.2,\n fontFamily: 'PretendardStd-Regular',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strongInverse,\n });\n\n const labelFontStyle = createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 13,\n lineHeight: 16.25,\n fontFamily: 'LexendDeca-SemiBold',\n letterSpacing: -0.26,\n }),\n color: theme.palette.text.accent,\n });\n\n const hasActionButton = !!(actionContent && onPress);\n\n const rootStyle = css([\n styles.root,\n startIcon ? { borderRadius: theme.shape.radius.xl } : undefined,\n hasActionButton ? { width: '100%' } : undefined,\n styleProp,\n ]);\n\n return (\n <ButtonBase\n disabled={!onPress}\n onPress={onPress}\n style={rootStyle}\n {...otherProps}\n >\n {startIcon ? (\n <React.Fragment>\n {startIcon}\n\n <Spacer size={3}/>\n </React.Fragment>\n ) : status !== 'info' ? (\n <React.Fragment>\n <StatusIcon status={status}/>\n\n <Spacer size={1.5}/>\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 {actionContent ? (\n <React.Fragment>\n <Spacer flex={1}/>\n\n <View style={styles.actionButton}>\n {typeof actionContent === 'string' ? (\n <View style={styles.actionLabel}>\n <Text\n children={actionContent}\n style={labelFontStyle}\n />\n </View>\n ) : (\n <View style={styles.actionElement}>\n {actionContent}\n </View>\n )}\n </View>\n </React.Fragment>\n ) : null}\n </ButtonBase>\n );\n};\n"],"mappings":"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"}
|
package/build/module/Tab/Tab.js
CHANGED
|
@@ -3,9 +3,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Platform, Text, View } from 'react-native';
|
|
5
5
|
import Badge from '../Badge';
|
|
6
|
-
import Spacer from '../Spacer';
|
|
7
6
|
import TabBase from '../TabBase';
|
|
8
|
-
import { css, StyleSheet
|
|
7
|
+
import { css, StyleSheet } from '../styles';
|
|
9
8
|
import { cloneElementSafely } from '../utils';
|
|
10
9
|
import useVariantStyleMap from './useVariantStyleMap';
|
|
11
10
|
const styles = StyleSheet.create({
|
|
@@ -25,41 +24,45 @@ export default function Tab(props) {
|
|
|
25
24
|
children,
|
|
26
25
|
enableIndicator = false,
|
|
27
26
|
icon: defaultIcon,
|
|
27
|
+
parentColor = 'default',
|
|
28
28
|
selected = false,
|
|
29
29
|
selectedIcon,
|
|
30
|
+
size = 'medium',
|
|
30
31
|
variant = 'default',
|
|
31
32
|
style: styleProp,
|
|
33
|
+
innerStyle: innerStyleProp,
|
|
32
34
|
onTabInnerLayout,
|
|
33
35
|
...otherProps
|
|
34
36
|
} = props;
|
|
35
|
-
const theme = useTheme();
|
|
36
|
-
const vertical = variant === 'bottom-navigation';
|
|
37
37
|
const {
|
|
38
38
|
container: containerStyle,
|
|
39
|
+
iconContainer: iconContainerStyle,
|
|
39
40
|
inner: innerStyle,
|
|
40
41
|
label: labelStyle
|
|
41
|
-
} = useVariantStyleMap(variant, selected);
|
|
42
|
+
} = useVariantStyleMap(variant, selected, size, parentColor);
|
|
42
43
|
const tabBaseStyle = css([styles.root, containerStyle, styleProp]);
|
|
43
|
-
const tabInnerStyle = css([styles.filledInner, innerStyle]);
|
|
44
|
-
const pressEffect = selected ? 'none' : 'opacity';
|
|
44
|
+
const tabInnerStyle = css([styles.filledInner, innerStyle, innerStyleProp]);
|
|
45
45
|
const icon = selected ? selectedIcon || defaultIcon : defaultIcon;
|
|
46
|
-
const
|
|
47
|
-
const iconElement = cloneElementSafely(icon, {
|
|
48
|
-
fill: iconColor
|
|
49
|
-
});
|
|
46
|
+
const iconElement = cloneElementSafely(icon);
|
|
50
47
|
const tabElement = typeof children !== 'string' ? cloneElementSafely(children, {
|
|
51
48
|
selected
|
|
52
49
|
}) : /*#__PURE__*/React.createElement(React.Fragment, null, iconElement ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
50
|
+
horizontalOffset: -4,
|
|
51
|
+
invisible: !badgeVisible,
|
|
52
|
+
verticalOffset: -4
|
|
53
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
54
|
+
style: iconContainerStyle
|
|
55
|
+
}, iconElement)), /*#__PURE__*/React.createElement(Text, {
|
|
57
56
|
style: css(labelStyle)
|
|
58
|
-
}, children))
|
|
57
|
+
}, children)) : /*#__PURE__*/React.createElement(Badge, {
|
|
58
|
+
horizontalOffset: -7,
|
|
59
|
+
invisible: !badgeVisible,
|
|
60
|
+
verticalOffset: 3
|
|
61
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
62
|
+
style: css(labelStyle)
|
|
63
|
+
}, children)));
|
|
59
64
|
return /*#__PURE__*/React.createElement(TabBase, _extends({
|
|
60
|
-
|
|
61
|
-
style: tabBaseStyle,
|
|
62
|
-
vertical: vertical
|
|
65
|
+
style: tabBaseStyle
|
|
63
66
|
}, otherProps), /*#__PURE__*/React.createElement(View, {
|
|
64
67
|
onLayout: onTabInnerLayout,
|
|
65
68
|
style: tabInnerStyle
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","Text","View","Badge","
|
|
1
|
+
{"version":3,"names":["React","Platform","Text","View","Badge","TabBase","css","StyleSheet","cloneElementSafely","useVariantStyleMap","styles","create","root","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","parentColor","selected","selectedIcon","size","variant","style","styleProp","innerStyle","innerStyleProp","onTabInnerLayout","otherProps","container","containerStyle","iconContainer","iconContainerStyle","inner","label","labelStyle","tabBaseStyle","tabInnerStyle","iconElement","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type { TabsColor } from '../Tabs';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabSize, TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n },\n filledInner: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n parentColor = 'default' as TabsColor,\n selected = false,\n selectedIcon,\n size = 'medium' as TabSize,\n variant = 'default' as TabVariant,\n style: styleProp,\n innerStyle: innerStyleProp,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const {\n container: containerStyle,\n iconContainer: iconContainerStyle,\n inner: innerStyle,\n label: labelStyle,\n } = useVariantStyleMap(variant, selected, size, parentColor);\n\n const tabBaseStyle = css([\n styles.root,\n containerStyle,\n styleProp,\n ]);\n\n const tabInnerStyle = css([\n styles.filledInner,\n innerStyle,\n innerStyleProp,\n ]);\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconElement = cloneElementSafely(icon);\n\n const tabElement = typeof children !== 'string' ? (\n cloneElementSafely(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n {iconElement ? (\n <React.Fragment>\n <Badge\n horizontalOffset={-4}\n invisible={!badgeVisible}\n verticalOffset={-4}\n >\n <View style={iconContainerStyle}>\n {iconElement}\n </View>\n </Badge>\n\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </React.Fragment>\n ) : (\n <Badge\n horizontalOffset={-7}\n invisible={!badgeVisible}\n verticalOffset={3}\n >\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </Badge>\n )}\n </React.Fragment>\n );\n\n return (\n <TabBase\n style={tabBaseStyle}\n {...otherProps}\n >\n <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n {tabElement}\n </View>\n </TabBase>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,IAAnB,EAAyBC,IAAzB,QAAqC,cAArC;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA,SAASC,GAAT,EAAcC,UAAd,QAAgC,WAAhC;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIX,QAAQ,CAACY,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;AAWA,eAAe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,WAAW,GAAG,SALZ;IAMFC,QAAQ,GAAG,KANT;IAOFC,YAPE;IAQFC,IAAI,GAAG,QARL;IASFC,OAAO,GAAG,SATR;IAUFC,KAAK,EAAEC,SAVL;IAWFC,UAAU,EAAEC,cAXV;IAYFC,gBAZE;IAaF,GAAGC;EAbD,IAcFhB,KAdJ;EAgBA,MAAM;IACFiB,SAAS,EAAEC,cADT;IAEFC,aAAa,EAAEC,kBAFb;IAGFC,KAAK,EAAER,UAHL;IAIFS,KAAK,EAAEC;EAJL,IAKFjC,kBAAkB,CAACoB,OAAD,EAAUH,QAAV,EAAoBE,IAApB,EAA0BH,WAA1B,CALtB;EAOA,MAAMkB,YAAY,GAAGrC,GAAG,CAAC,CACrBI,MAAM,CAACE,IADc,EAErByB,cAFqB,EAGrBN,SAHqB,CAAD,CAAxB;EAMA,MAAMa,aAAa,GAAGtC,GAAG,CAAC,CACtBI,MAAM,CAACK,WADe,EAEtBiB,UAFsB,EAGtBC,cAHsB,CAAD,CAAzB;EAMA,MAAMV,IAAI,GAAGG,QAAQ,GAAIC,YAAY,IAAIH,WAApB,GAAmCA,WAAxD;EACA,MAAMqB,WAAW,GAAGrC,kBAAkB,CAACe,IAAD,CAAtC;EAEA,MAAMuB,UAAU,GAAG,OAAOzB,QAAP,KAAoB,QAApB,GACfb,kBAAkB,CAACa,QAAD,EAAW;IACzBK;EADyB,CAAX,CADH,gBAKf,oBAAC,KAAD,CAAO,QAAP,QACKmB,WAAW,gBACR,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,KAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACzB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,gBAKI,oBAAC,IAAD;IAAM,KAAK,EAAEmB;EAAb,GACKM,WADL,CALJ,CADJ,eAWI,oBAAC,IAAD;IAAM,KAAK,EAAEvC,GAAG,CAACoC,UAAD;EAAhB,GACKrB,QADL,CAXJ,CADQ,gBAiBR,oBAAC,KAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,oBAAC,IAAD;IAAM,KAAK,EAAEd,GAAG,CAACoC,UAAD;EAAhB,GACKrB,QADL,CALJ,CAlBR,CALJ;EAoCA,oBACI,oBAAC,OAAD;IACI,KAAK,EAAEsB;EADX,GAEQR,UAFR,gBAII,oBAAC,IAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEU;EAAzC,GACKE,UADL,CAJJ,CADJ;AAUH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tabVariants"],"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 const tabVariants = ['default', 'circular', 'bottom-navigation'] as const;\nexport type TabVariant = typeof tabVariants[number];\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 * If supplied, use this icon on selected state.\n */\n selectedIcon?: React.ReactElement;\n\n /**\n * The variant to use.\n * @default 'default'\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":"
|
|
1
|
+
{"version":3,"names":["tabSizes","tabVariants"],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { TabsColor } from '../Tabs';\nimport type { ExtendedStyle, OverridableComponentProps } from '../types';\n\nexport const tabSizes = ['small', 'medium'] as const;\nexport type TabSize = typeof tabSizes[number];\n\nexport const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;\nexport type TabVariant = typeof tabVariants[number];\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 * The color value inherited from the parent Tabs component.\n * This allows Tab components to apply consistent styling based on the Tabs container's color scheme.\n * @default 'default'\n */\n parentColor?: TabsColor;\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 size of the Tab.\n * @default 'medium'\n */\n size?: TabSize;\n\n /**\n * The variant to use.\n * @default 'default'\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 /**\n * Custom style to apply to the inner container of the Tab.\n * This allows customization of the tab's inner layout and appearance.\n */\n innerStyle?: ExtendedStyle | ExtendedStyle[];\n}> {}\n"],"mappings":"AAMA,OAAO,MAAMA,QAAQ,GAAG,CAAC,OAAD,EAAU,QAAV,CAAjB;AAGP,OAAO,MAAMC,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,eAAxB,EAAyC,mBAAzC,CAApB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tab';\nexport type { default as TabProps, TabVariant } from './TabProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB"}
|
|
1
|
+
{"version":3,"names":["default","tabSizes","tabVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tab';\nexport type { default as TabProps, TabSize, TabVariant } from './TabProps';\nexport { tabSizes, tabVariants } from './TabProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,EAAmBC,WAAnB,QAAsC,YAAtC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
2
|
import { typographyOf } from '@fountain-ui/styles';
|
|
3
3
|
import { createFontStyle, useTheme } from '../styles';
|
|
4
|
-
export default function useVariantStyleMap(variant, selected) {
|
|
4
|
+
export default function useVariantStyleMap(variant, selected, size, parentColor) {
|
|
5
5
|
const theme = useTheme();
|
|
6
6
|
return useMemo(() => {
|
|
7
7
|
switch (variant) {
|
|
@@ -12,19 +12,50 @@ export default function useVariantStyleMap(variant, selected) {
|
|
|
12
12
|
paddingVertical: theme.spacing(1)
|
|
13
13
|
},
|
|
14
14
|
inner: {
|
|
15
|
-
backgroundColor: selected ? theme.palette.fill.base : theme.palette.fill.weaker,
|
|
15
|
+
backgroundColor: selected ? theme.palette.fill.base : parentColor === 'alt' ? theme.palette.surface.base : theme.palette.fill.weaker,
|
|
16
16
|
borderRadius: theme.shape.radius.full,
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
flexDirection: 'row',
|
|
18
|
+
gap: 5,
|
|
19
|
+
paddingBottom: 7.5,
|
|
20
|
+
paddingHorizontal: 14,
|
|
21
|
+
paddingTop: 6.5
|
|
22
|
+
},
|
|
23
|
+
label: createFontStyle(theme, {
|
|
24
|
+
selector: _ => typographyOf({
|
|
25
|
+
fontSize: size === 'small' ? 14 : 15,
|
|
26
|
+
lineHeight: size === 'small' ? 18.2 : 19.5,
|
|
27
|
+
fontFamily: 'PretendardStd-SemiBold',
|
|
28
|
+
letterSpacing: 0
|
|
29
|
+
}),
|
|
30
|
+
color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
|
|
31
|
+
})
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
case 'circular-home':
|
|
35
|
+
return {
|
|
36
|
+
container: {
|
|
37
|
+
paddingBottom: 4,
|
|
38
|
+
paddingHorizontal: 3
|
|
39
|
+
},
|
|
40
|
+
inner: {
|
|
41
|
+
backgroundColor: selected ? theme.palette.fill.base : theme.palette.surface.base,
|
|
42
|
+
borderRadius: theme.shape.radius.full,
|
|
43
|
+
borderWidth: selected ? undefined : 0.5,
|
|
44
|
+
borderColor: selected ? undefined : theme.palette.border.weak,
|
|
45
|
+
flexDirection: 'row',
|
|
46
|
+
gap: 5,
|
|
47
|
+
paddingBottom: 7.5,
|
|
48
|
+
paddingHorizontal: 14,
|
|
49
|
+
paddingTop: 6.5
|
|
19
50
|
},
|
|
20
51
|
label: createFontStyle(theme, {
|
|
21
52
|
selector: _ => typographyOf({
|
|
22
53
|
fontSize: 14,
|
|
23
54
|
lineHeight: 18.2,
|
|
24
|
-
fontFamily: '
|
|
25
|
-
letterSpacing: 0
|
|
55
|
+
fontFamily: 'LexendDeca-Medium',
|
|
56
|
+
letterSpacing: -0.28
|
|
26
57
|
}),
|
|
27
|
-
color: selected ? theme.palette.text.strongInverse : theme.palette.text.
|
|
58
|
+
color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
|
|
28
59
|
})
|
|
29
60
|
};
|
|
30
61
|
|
|
@@ -34,15 +65,19 @@ export default function useVariantStyleMap(variant, selected) {
|
|
|
34
65
|
alignItems: 'center',
|
|
35
66
|
height: 49,
|
|
36
67
|
justifyContent: 'flex-start',
|
|
37
|
-
|
|
38
|
-
|
|
68
|
+
maxWidth: 64,
|
|
69
|
+
paddingTop: 10
|
|
70
|
+
},
|
|
71
|
+
inner: {
|
|
72
|
+
flexDirection: 'column',
|
|
73
|
+
gap: 5
|
|
39
74
|
},
|
|
40
75
|
label: createFontStyle(theme, {
|
|
41
76
|
selector: _ => typographyOf({
|
|
42
|
-
fontSize: 10,
|
|
43
|
-
lineHeight: 10,
|
|
44
|
-
fontFamily: '
|
|
45
|
-
letterSpacing: -0.
|
|
77
|
+
fontSize: 10.5,
|
|
78
|
+
lineHeight: 10.5,
|
|
79
|
+
fontFamily: 'PretendardStd-Medium',
|
|
80
|
+
letterSpacing: -0.105
|
|
46
81
|
}),
|
|
47
82
|
color: selected ? theme.palette.text.strong : theme.palette.text.base
|
|
48
83
|
})
|
|
@@ -52,19 +87,25 @@ export default function useVariantStyleMap(variant, selected) {
|
|
|
52
87
|
default:
|
|
53
88
|
return {
|
|
54
89
|
container: {
|
|
55
|
-
|
|
90
|
+
paddingHorizontal: 10
|
|
91
|
+
},
|
|
92
|
+
inner: {
|
|
93
|
+
flexDirection: 'row',
|
|
94
|
+
gap: 5,
|
|
95
|
+
paddingHorizontal: 1,
|
|
96
|
+
paddingVertical: 10
|
|
56
97
|
},
|
|
57
98
|
label: createFontStyle(theme, {
|
|
58
99
|
selector: _ => typographyOf({
|
|
59
|
-
fontSize: 15,
|
|
60
|
-
lineHeight: 18.75,
|
|
61
|
-
fontFamily: '
|
|
100
|
+
fontSize: size === 'small' ? 15 : 16,
|
|
101
|
+
lineHeight: size === 'small' ? 18.75 : 20,
|
|
102
|
+
fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
|
|
62
103
|
letterSpacing: 0
|
|
63
104
|
}),
|
|
64
105
|
color: selected ? theme.palette.text.strong : theme.palette.text.base
|
|
65
106
|
})
|
|
66
107
|
};
|
|
67
108
|
}
|
|
68
|
-
}, [theme, variant, selected]);
|
|
109
|
+
}, [theme, variant, selected, size, parentColor]);
|
|
69
110
|
}
|
|
70
111
|
//# sourceMappingURL=useVariantStyleMap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","label","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","
|
|
1
|
+
{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","size","parentColor","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","surface","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","maxWidth","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport type { TabsColor } from '../Tabs';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n container: FountainUiStyle;\n iconContainer?: FountainUiStyle;\n inner?: FountainUiStyle;\n label: TextStyle;\n}\n\nexport default function useVariantStyleMap(\n variant: TabVariant,\n selected: boolean,\n size: TabSize,\n parentColor: TabsColor,\n): VariantStyle {\n const theme = useTheme();\n\n return useMemo<VariantStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingHorizontal: theme.spacing(0.75),\n paddingVertical: theme.spacing(1),\n },\n inner: {\n backgroundColor: selected\n ? theme.palette.fill.base\n : parentColor === 'alt'\n ? theme.palette.surface.base\n : theme.palette.fill.weaker,\n borderRadius: theme.shape.radius.full,\n flexDirection: 'row',\n gap: 5,\n paddingBottom: 7.5,\n paddingHorizontal: 14,\n paddingTop: 6.5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: size === 'small' ? 14 : 15,\n lineHeight: size === 'small' ? 18.2 : 19.5,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strongInverse\n : theme.palette.text.base,\n }),\n };\n case 'circular-home':\n return {\n container: {\n paddingBottom: 4,\n paddingHorizontal: 3,\n },\n inner: {\n backgroundColor: selected\n ? theme.palette.fill.base\n : theme.palette.surface.base,\n borderRadius: theme.shape.radius.full,\n borderWidth: selected ? undefined : 0.5,\n borderColor: selected ? undefined : theme.palette.border.weak,\n flexDirection: 'row',\n gap: 5,\n paddingBottom: 7.5,\n paddingHorizontal: 14,\n paddingTop: 6.5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 14,\n lineHeight: 18.2,\n fontFamily: 'LexendDeca-Medium',\n letterSpacing: -0.28,\n }),\n color: selected\n ? theme.palette.text.strongInverse\n : theme.palette.text.base,\n }),\n };\n case 'bottom-navigation':\n return {\n container: {\n alignItems: 'center',\n height: 49,\n justifyContent: 'flex-start',\n maxWidth: 64,\n paddingTop: 10,\n },\n inner: {\n flexDirection: 'column',\n gap: 5,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 10.5,\n lineHeight: 10.5,\n fontFamily: 'PretendardStd-Medium',\n letterSpacing: -0.105,\n }),\n color: selected\n ? theme.palette.text.strong\n : theme.palette.text.base,\n }),\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: 10,\n },\n inner: {\n flexDirection: 'row',\n gap: 5,\n paddingHorizontal: 1,\n paddingVertical: 10,\n },\n label: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: size === 'small' ? 15 : 16,\n lineHeight: size === 'small' ? 18.75 : 20,\n fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n letterSpacing: 0,\n }),\n color: selected\n ? theme.palette.text.strong\n : theme.palette.text.base,\n }),\n };\n }\n }, [theme, variant, selected, size, parentColor]);\n}\n"],"mappings":"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"}
|
|
@@ -9,12 +9,6 @@ const useStyles = function () {
|
|
|
9
9
|
root: {
|
|
10
10
|
alignItems: 'center',
|
|
11
11
|
justifyContent: 'center'
|
|
12
|
-
},
|
|
13
|
-
row: {
|
|
14
|
-
flexDirection: 'row'
|
|
15
|
-
},
|
|
16
|
-
column: {
|
|
17
|
-
flexDirection: 'column'
|
|
18
12
|
}
|
|
19
13
|
};
|
|
20
14
|
};
|
|
@@ -25,7 +19,6 @@ export default function TabBase(props) {
|
|
|
25
19
|
disabled = false,
|
|
26
20
|
onPress,
|
|
27
21
|
selected = false,
|
|
28
|
-
vertical = false,
|
|
29
22
|
style,
|
|
30
23
|
...otherProps
|
|
31
24
|
} = props;
|
|
@@ -33,7 +26,7 @@ export default function TabBase(props) {
|
|
|
33
26
|
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
|
|
34
27
|
onPress: onPress,
|
|
35
28
|
disabled: disabled,
|
|
36
|
-
style: css([styles.root,
|
|
29
|
+
style: css([styles.root, style])
|
|
37
30
|
}, otherProps), children);
|
|
38
31
|
}
|
|
39
32
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","css","ButtonBase","useStyles","root","alignItems","justifyContent","
|
|
1
|
+
{"version":3,"names":["React","css","ButtonBase","useStyles","root","alignItems","justifyContent","TabBase","props","children","disabled","onPress","selected","style","otherProps","styles"],"sources":["TabBase.tsx"],"sourcesContent":["import React from 'react';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport type TabBaseProps from './TabBaseProps';\n\ntype TabBaseStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {\n return {\n root: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n };\n};\n\nexport default function TabBase(props: TabBaseProps) {\n const {\n children,\n disabled = false,\n onPress,\n selected = false,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n return (\n <ButtonBase\n onPress={onPress}\n disabled={disabled}\n style={css([\n styles.root,\n style,\n ])}\n {...otherProps}\n >\n {children}\n </ButtonBase>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAuD,qBAAvD;AACA,OAAOC,UAAP,MAAuB,eAAvB;;AAKA,MAAMC,SAAmC,GAAG,YAA2B;EACnE,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,OAHE;IAIFC,QAAQ,GAAG,KAJT;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFN,KAPJ;EASA,MAAMO,MAAM,GAAGZ,SAAS,EAAxB;EAEA,oBACI,oBAAC,UAAD;IACI,OAAO,EAAEQ,OADb;IAEI,QAAQ,EAAED,QAFd;IAGI,KAAK,EAAET,GAAG,CAAC,CACPc,MAAM,CAACX,IADA,EAEPS,KAFO,CAAD;EAHd,GAOQC,UAPR,GASKL,QATL,CADJ;AAaH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TabBaseProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport default interface TabBaseProps extends OverridableComponentProps<ButtonBaseProps, {\n /**\n * Content of the TabBase.\n */\n children: React.ReactNode;\n\n /**\n * If `true`, the component is selected.\n * @default false\n */\n selected?: boolean;\n
|
|
1
|
+
{"version":3,"names":[],"sources":["TabBaseProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport default interface TabBaseProps extends OverridableComponentProps<ButtonBaseProps, {\n /**\n * Content of the TabBase.\n */\n children: React.ReactNode;\n\n /**\n * If `true`, the component is selected.\n * @default false\n */\n selected?: boolean;\n}> {}\n"],"mappings":""}
|
|
@@ -10,6 +10,8 @@ import useTabInnerContentsWidth from './useTabInnerContentsWidth';
|
|
|
10
10
|
import useIndexStore from './useIndexStore';
|
|
11
11
|
import InternalContext from './InternalContext';
|
|
12
12
|
import { isEveryTabCoordinatesDefined } from './utils';
|
|
13
|
+
import { defaultCoordinate } from './TabCoordinate';
|
|
14
|
+
import useTabsStyle from './useTabsStyle';
|
|
13
15
|
|
|
14
16
|
const useStyles = function () {
|
|
15
17
|
const theme = useTheme();
|
|
@@ -21,9 +23,6 @@ const useStyles = function () {
|
|
|
21
23
|
fixedTab: {
|
|
22
24
|
flex: 1
|
|
23
25
|
},
|
|
24
|
-
scrollableContainer: {
|
|
25
|
-
paddingHorizontal: theme.spacing(1)
|
|
26
|
-
},
|
|
27
26
|
bottomDivider: {
|
|
28
27
|
borderBottomColor: theme.palette.border.base,
|
|
29
28
|
borderBottomWidth: 0.5
|
|
@@ -46,6 +45,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
|
|
|
46
45
|
scrollable = false,
|
|
47
46
|
scrollViewContentContainerStyle,
|
|
48
47
|
showDivider = false,
|
|
48
|
+
size = 'medium',
|
|
49
49
|
style,
|
|
50
50
|
variant = 'default',
|
|
51
51
|
UNSTABLE_sharedIndex,
|
|
@@ -57,6 +57,10 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
|
|
|
57
57
|
const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
|
|
58
58
|
const realInitialIndex = sharedIndex.initialValue;
|
|
59
59
|
const currentIndexRef = useRef(initialIndex);
|
|
60
|
+
const {
|
|
61
|
+
container: containerStyle,
|
|
62
|
+
contentContainer: contentContainerStyle
|
|
63
|
+
} = useTabsStyle(variant, size, scrollable);
|
|
60
64
|
|
|
61
65
|
const setTab = newIndex => {
|
|
62
66
|
const currentIndex = currentIndexRef.current;
|
|
@@ -83,10 +87,16 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
|
|
|
83
87
|
}
|
|
84
88
|
|
|
85
89
|
return innerContentsWidthList.map((innerContentWidth, idx) => {
|
|
90
|
+
const outerCoordinate = outerCoordinates[idx];
|
|
91
|
+
|
|
92
|
+
if (!outerCoordinate) {
|
|
93
|
+
return defaultCoordinate;
|
|
94
|
+
}
|
|
95
|
+
|
|
86
96
|
const {
|
|
87
97
|
x1: outerX1,
|
|
88
98
|
x2: outerX2
|
|
89
|
-
} =
|
|
99
|
+
} = outerCoordinate;
|
|
90
100
|
const tabWidth = outerX2 - outerX1;
|
|
91
101
|
const distanceFromParent = (tabWidth - innerContentWidth) / 2;
|
|
92
102
|
const indicatorStartCoordinate = outerX1 + distanceFromParent;
|
|
@@ -141,15 +151,19 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
|
|
|
141
151
|
}; // @ts-ignore
|
|
142
152
|
|
|
143
153
|
|
|
154
|
+
const tabStyle = child.props.style; // @ts-ignore
|
|
155
|
+
|
|
144
156
|
const tabElement = /*#__PURE__*/cloneElement(child, {
|
|
145
157
|
enableIndicator: !disableIndicator && !canRenderIndicator,
|
|
146
158
|
onTabInnerLayout,
|
|
147
159
|
onLayout,
|
|
148
160
|
onPress,
|
|
149
161
|
onMouseDown,
|
|
162
|
+
parentColor: color,
|
|
163
|
+
size,
|
|
150
164
|
variant,
|
|
151
165
|
indicatorSize,
|
|
152
|
-
style: scrollable ? undefined : styles.fixedTab
|
|
166
|
+
style: css([scrollable ? undefined : styles.fixedTab, tabStyle])
|
|
153
167
|
});
|
|
154
168
|
return /*#__PURE__*/React.createElement(IndexAwareTab, {
|
|
155
169
|
children: tabElement,
|
|
@@ -171,13 +185,13 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
|
|
|
171
185
|
indexStore
|
|
172
186
|
}
|
|
173
187
|
}, /*#__PURE__*/React.createElement(View, {
|
|
174
|
-
style: css([styles.root, {
|
|
188
|
+
style: css([styles.root, containerStyle, {
|
|
175
189
|
backgroundColor: backgroundColorMap[color]
|
|
176
190
|
}, showDivider ? styles.bottomDivider : undefined, scrollable ? undefined : styles.fixedRoot, style])
|
|
177
191
|
}, scrollable ? /*#__PURE__*/React.createElement(ScrollableTabsView, {
|
|
178
192
|
automaticallyAdjustContentInsets: false,
|
|
179
193
|
bounces: false,
|
|
180
|
-
contentContainerStyle: css([
|
|
194
|
+
contentContainerStyle: css([contentContainerStyle, scrollViewContentContainerStyle]),
|
|
181
195
|
coordinates: coordinates,
|
|
182
196
|
directionalLockEnabled: true,
|
|
183
197
|
horizontal: true,
|
|
@@ -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","color","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","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';\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 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 { 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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"}
|
|
1
|
+
{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useTabInnerContentsWidth","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","defaultCoordinate","useTabsStyle","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","size","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","container","containerStyle","contentContainer","contentContainerStyle","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerContentsWidthList","updateInnerContentsWidth","canRenderIndicator","indexStore","coordinates","length","map","innerContentWidth","idx","outerCoordinate","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabStyle","tabElement","enableIndicator","parentColor","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 { TabSize, 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 { defaultCoordinate } from './TabCoordinate';\nimport useTabsStyle from './useTabsStyle';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\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 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 size = 'medium' as TabSize,\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 {\n container: containerStyle,\n contentContainer: contentContainerStyle,\n } = useTabsStyle(variant, size, scrollable);\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 outerCoordinate = outerCoordinates[idx];\n if (!outerCoordinate) {\n return defaultCoordinate;\n }\n\n const { x1: outerX1, x2: outerX2 } = outerCoordinate;\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 tabStyle = child.props.style;\n\n // @ts-ignore\n const tabElement = cloneElement(child, {\n enableIndicator: !disableIndicator && !canRenderIndicator,\n onTabInnerLayout,\n onLayout,\n onPress,\n onMouseDown,\n parentColor: color,\n size,\n variant,\n indicatorSize,\n style: css([\n scrollable ? undefined : styles.fixedTab,\n tabStyle,\n ]),\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 contentContainerStyle,\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 +1 @@
|
|
|
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"}
|
|
1
|
+
{"version":3,"names":["tabsColors","tabIndicatorSizes"],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabSize, 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 * The size of the Tab.\n * @default 'medium'\n */\n size?: TabSize;\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"}
|
|
@@ -1 +1 @@
|
|
|
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"}
|
|
1
|
+
{"version":3,"names":["default","tabIndicatorSizes","tabsColors"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps, TabIndicatorSize, TabsColor } 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"}
|