@fountain-ui/core 3.0.0-alpha.1 → 3.0.0-alpha.11

package/build/typescript/Chip/ChipProps.d.ts

@@ -1,23 +1,30 @@
 import React from 'react';
 import { OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
+export declare const chipColors: readonly ["default", "white"];
+export declare type ChipColor = typeof chipColors[number];
 export declare const chipSizes: readonly ["large", "small"];
 export declare type ChipSize = typeof chipSizes[number];
 export declare const chipStartElementVariants: readonly ["default", "avatar", "image", "icon"];
 export declare type ChipStartElementVariant = typeof chipStartElementVariants[number];
 export default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {
-    /**
-     * Element placed after the children.
-     */
-    endElement?: React.ReactElement;
     /**
      * The content of the component.
      */
     children: string;
+    /**
+     * Set backgroundColor of the component.
+     * @default 'default'
+     */
+    color?: ChipColor;
     /**
      * Number of lines of children.
      */
     numberOfLines?: number;
+    /**
+     * If `true`, showing a close icon and applying a highlighted style.
+     */
+    selected?: boolean;
     /**
      * Determines size of component.
      * @default 'small'

package/build/typescript/Chip/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Chip';
 export type { default as ChipProps } from './ChipProps';
+export { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';

package/build/typescript/Chip/useChipStyle.d.ts

@@ -1,11 +1,12 @@
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
-import type { ChipSize, ChipStartElementVariant } from './ChipProps';
+import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
 interface ChipStyle {
     container: FountainUiStyle;
-    endElement?: FountainUiStyle;
+    closeButton?: FountainUiStyle;
     label: TextStyle;
     startElement?: FountainUiStyle;
+    startElementContainer?: FountainUiStyle;
 }
-export default function useChipStyle(size: ChipSize, startElementVariant: ChipStartElementVariant, isEndElement: boolean): ChipStyle;
+export default function useChipStyle(size: ChipSize, startElementVariant: ChipStartElementVariant, color: ChipColor, selected: boolean): ChipStyle;
 export {};

package/build/typescript/Dialog/DialogProps.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ModalProps } from '../Modal';
 import type { OverridableComponentProps } from '../types';
 import { ANIMATION_TYPE } from '../Modal';
-export declare const dialogSizes: readonly ["small", "medium", "large"];
+export declare const dialogSizes: readonly ["small", "medium", "large", "full"];
 export declare type DialogSize = typeof dialogSizes[number];
 export default interface DialogProps extends OverridableComponentProps<ModalProps, {
     /**
@@ -14,11 +14,6 @@ export default interface DialogProps extends OverridableComponentProps<ModalProp
      * Dialog children, usually the included sub-components.
      */
     children?: React.ReactNode;
-    /**
-     * If `true`, the dialog is full-screen.
-     * @default false
-     */
-    fullScreen?: boolean;
     /**
      * Determines the minWidth of the Dialog.
      * @default 'medium'

package/build/typescript/Dialog/index.d.ts

@@ -1,4 +1,5 @@
 export { default } from './Dialog';
 export type { default as DialogProps } from './DialogProps';
+export { dialogSizes } from './DialogProps';
 export { DialogProvider, useDialogContext } from './DialogContext';
 export { default as useDialogSectionStyle } from './useDialogSectionStyle';

package/build/typescript/Dialog/useDialogStyle.d.ts

@@ -2,5 +2,5 @@ import type { NamedStylesStringUnion } from '@fountain-ui/styles';
 import type { DialogSize } from './DialogProps';
 declare type DialogStyleKeys = 'root' | 'container' | 'paper' | 'topElementContainer' | 'topElementContent';
 declare type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
-export default function useDialogStyle(size: DialogSize, fullScreen: boolean): DialogStyles;
+export default function useDialogStyle(size: DialogSize): DialogStyles;
 export {};

package/build/typescript/DialogTitle/BackButton.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IconButtonProps } from '../IconButton';
+interface BackButtonProps extends Omit<IconButtonProps, 'children'> {
+}
+export default function BackButton(props: BackButtonProps): JSX.Element;
+export {};

package/build/typescript/DialogTitle/CloseButton.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IconButtonProps } from '../IconButton';
+interface CloseButtonProps extends Omit<IconButtonProps, 'children'> {
+}
+export default function CloseButton(props: CloseButtonProps): JSX.Element;
+export {};

package/build/typescript/DialogTitle/DialogTitle.d.ts

@@ -1,3 +1,10 @@
 /// <reference types="react" />
+import BackButton from './BackButton';
+import CloseButton from './CloseButton';
 import type DialogTitleProps from './DialogTitleProps';
-export default function DialogTitle(props: DialogTitleProps): JSX.Element;
+declare const DialogTitle: {
+    (props: DialogTitleProps): JSX.Element;
+    BackButton: typeof BackButton;
+    CloseButton: typeof CloseButton;
+};
+export default DialogTitle;

package/build/typescript/Divider/DividerProps.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
-export declare const elementAligns: readonly ["start", "center", "end"];
-export declare type ElementAlign = typeof elementAligns[number];
-export declare const dividerVariants: readonly ["base", "strong"];
+export declare const dividerElementAligns: readonly ["start", "center", "end"];
+export declare type DividerElementAlign = typeof dividerElementAligns[number];
+export declare const dividerVariants: readonly ["base", "strong", "baseStatic", "strongStatic"];
 export declare type DividerVariant = typeof dividerVariants[number];
 export default interface DividerProps extends OverridableComponentProps<ViewProps, {
     /**
@@ -34,7 +34,7 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
      *  Set position of children.
      *  @default center
      */
-    elementAlign?: ElementAlign;
+    elementAlign?: DividerElementAlign;
     /**
      * Select the style of the divider based on this value.
      *  @default base

package/build/typescript/Divider/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Divider';
 export type { default as DividerProps } from './DividerProps';
+export { dividerVariants, dividerElementAligns } from './DividerProps';

package/build/typescript/Flexbox/FlexboxProps.d.ts

@@ -40,6 +40,10 @@ export default interface FlexboxProps extends OverridableComponentProps<ViewProp
      * @default 'nowrap'
      */
     flexWrap?: FlexStyle['flexWrap'];
+    /**
+     * Defines the spacing between items in a flex container.
+     */
+    gap?: number | undefined;
     /**
      * Content of this component.
      */

package/build/typescript/IconButton/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './IconButton';
 export type { default as IconButtonProps } from './IconButtonProps';
+export { iconButtonColors } from './IconButtonProps';

package/build/typescript/ListItem/ListItem.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import ListItemProps from './ListItemProps';
+import type ListItemProps from './ListItemProps';
 export default function ListItem(props: ListItemProps): JSX.Element;

package/build/typescript/ListItem/ListItemProps.d.ts

@@ -13,6 +13,10 @@ export default interface ListItemProps extends OverridableComponentProps<React.P
      * @default false
      */
     button?: boolean;
+    /**
+     * Displays a description in this item.
+     */
+    description?: string;
     /**
      * Whether to prevent interaction with the ButtonBase.
      * @default false

package/build/typescript/ListItemText/ListItemTextProps.d.ts

@@ -1,16 +1,9 @@
-import type { TypographyProps } from '../Typography';
 import type { OverridableComponentProps } from '../types';
 import type { ColumnProps } from '../Column';
-declare type BaseProps = Omit<ColumnProps, 'children'>;
-export default interface ListItemTextProps extends OverridableComponentProps<BaseProps, {
+export default interface ListItemTextProps extends OverridableComponentProps<ColumnProps, {
     /**
      * The main content element.
      */
-    primary?: TypographyProps['children'];
-    /**
-     * The secondary content element.
-     */
-    secondary?: TypographyProps['children'];
+    children: string;
 }> {
 }
-export {};

package/build/typescript/Pagination/PaginationProps.d.ts

@@ -1,9 +1,16 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
+export declare const paginationColors: readonly ["base", "static"];
+export declare type PaginationColor = typeof paginationColors[number];
 export declare const paginationVariants: readonly ["dot", "number"];
 export declare type PaginationVariant = typeof paginationVariants[number];
 export interface PaginationRenderItemParams {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
     /**
      * Index of the pagination item.
      */
@@ -27,6 +34,11 @@ export default interface PaginationProps extends OverridableComponentProps<ViewP
      * The pagination will be added relative to this node.
      */
     children?: React.ReactNode;
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
     /**
      * The total number of pages.
      */

package/build/typescript/Pagination/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Pagination';
-export type { default as PaginationProps } from './PaginationProps';
+export type { default as PaginationProps, PaginationColor, PaginationVariant } from './PaginationProps';
+export { paginationColors, paginationVariants } from './PaginationProps';

package/build/typescript/PaginationItem/PaginationItemProps.d.ts

@@ -1,6 +1,12 @@
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
+import { PaginationColor } from '../Pagination';
 export default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
     /**
      * If `true`, the pagination item is disabled.
      * @default false

package/build/typescript/Section/Section.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type SectionProps from './SectionProps';
+export default function Section(props: SectionProps): JSX.Element;

package/build/typescript/Section/SectionProps.d.ts

@@ -0,0 +1,6 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+export default interface SectionProps extends OverridableComponentProps<ViewProps, {
+    maxWidth?: number;
+}> {
+}

package/build/typescript/Section/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Section';
+export type { default as SectionProps } from './SectionProps';

package/build/typescript/Snackbar/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Snackbar';
 export type { default as SnackbarProps } from './SnackbarProps';
+export { snackbarStatus } from './SnackbarProps';

package/build/typescript/SvgIcon/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './SvgIcon';
 export type { default as SvgIconProps } from './SvgIconProps';
+export { svgIconColors, svgIconSizes } from './SvgIconProps';

package/build/typescript/Tabs/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './Tabs';
 export type { default as TabsProps } from './TabsProps';
+export { tabIndicatorSizes, tabsColors } from './TabsProps';
 export type { TabsInstance } from './types';

package/build/typescript/Tabs/useTabsStyle.d.ts

@@ -0,0 +1,7 @@
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import type { TabVariant } from '../Tab';
+interface TabsStyle {
+    container: FountainUiStyle;
+}
+export default function useTabsStyle(variant: TabVariant): TabsStyle;
+export {};

package/build/typescript/TextField/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './TextField';
 export type { default as TextFieldProps } from './TextFieldProps';
+export { textFieldStatus } from './TextFieldProps';

package/build/typescript/Toolbar/BackButton/BackButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type BackButtonProps from './BackButtonProps';
+export default function BackButton(props: BackButtonProps): JSX.Element;

package/build/typescript/Toolbar/BackButton/BackButtonProps.d.ts

@@ -0,0 +1,4 @@
+import type { IconButtonProps } from '../../IconButton';
+import type { OverridableComponentProps } from '../../types';
+export default interface BackButtonProps extends OverridableComponentProps<Omit<IconButtonProps, 'children'>, {}> {
+}

package/build/typescript/Toolbar/BackButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './BackButton';
+export type { default as BackButtonProps } from './BackButtonProps';

package/build/typescript/Toolbar/Toolbar.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
+import BackButton from './BackButton';
 import type ToolbarProps from './ToolbarProps';
-export default function Toolbar(props: ToolbarProps): JSX.Element;
+declare const Toolbar: {
+    (props: ToolbarProps): JSX.Element;
+    BackButton: typeof BackButton;
+};
+export default Toolbar;

package/build/typescript/Toolbar/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Toolbar';
 export type { default as ToolbarProps } from './ToolbarProps';
+export { toolbarSizes } from './ToolbarProps';

package/build/typescript/Tooltip/Beaks/index.d.ts

@@ -1,2 +1,6 @@
 export { default } from './Beak';
 export type { default as BeakProps } from './BeakProps';
+export { default as HorizontalLargeBeak } from './HorizontalLargeBeak';
+export { default as HorizontalSmallBeak } from './HorizontalSmallBeak';
+export { default as VerticalLargeBeak } from './VerticalLargeBeak';
+export { default as VerticalSmallBeak } from './VerticalSmallBeak';

package/build/typescript/Tooltip/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from './Tooltip';
-export type { default as TooltipProps } from './TooltipProps';
+export type { default as TooltipProps, TooltipBeakLayout, TooltipBeakPlacement } from './TooltipProps';
+export { tooltipBeakPlacements, tooltipPlacements, tooltipSizes } from './TooltipProps';
+export * from './Beaks';

package/build/typescript/Typography/TypographyProps.d.ts

@@ -48,6 +48,10 @@ export default interface TypographyProps extends ComponentProps<{
      * Internal use only. The hyperlink of the text.
      */
     href?: string;
+    /**
+     * Defines the vertical spacing between lines of text.
+     */
+    lineHeight?: TextStyle['lineHeight'];
     /**
      * Used to truncate the text with an ellipsis after computing the text
      * layout, including line wrapping, such that the total number of lines

package/build/typescript/Typography/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Typography';
 export type { default as TypographyProps } from './TypographyProps';
+export { typographyColors } from './TypographyProps';

package/build/typescript/hooks/useContentContainerStyle.d.ts

@@ -1,11 +1,7 @@
-import type { ScrollViewProps } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
 import type { Theme } from '../types';
-declare type Breakpoint = keyof Theme['breakpoints']['values'];
-declare type ContentContainerStyle = ScrollViewProps['contentContainerStyle'];
 export interface Config {
-    breakpoint?: Breakpoint;
-    maxWidth?: Breakpoint;
-    styleProvider?: (theme: Theme) => ContentContainerStyle;
+    maxWidth?: number;
+    styleProvider?: (theme: Theme) => FountainUiStyle;
 }
-export default function useContentContainerStyle(config?: Config): ContentContainerStyle;
-export {};
+export default function useContentContainerStyle(config?: Config): FountainUiStyle;

package/build/typescript/index.d.ts

@@ -97,6 +97,8 @@ export { default as RadioGroup } from './RadioGroup';
 export * from './RadioGroup';
 export { default as Row } from './Row';
 export * from './Row';
+export { default as Section } from './Section';
+export * from './Section';
 export { default as ShadowView } from './ShadowView';
 export * from './ShadowView';
 export { default as Slide } from './Slide';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.11",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^3.0.0-alpha.1",
+    "@fountain-ui/styles": "^3.0.0-alpha.7",
     "@fountain-ui/utils": "^3.0.0-alpha.1"
   },
   "peerDependencies": {
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "88b0532dcdf185877d95cd713f9d9076728abe12"
+  "gitHead": "3261dc43532e6f39bbddce1a59eddd677d84dc3c"
 }

package/src/Accordion/Accordion.tsx

@@ -62,6 +62,7 @@ export default function Accordion(props: AccordionProps) {
         container: containerStyle,
         content: contentStyle,
         contentFont: contentFontStyle,
+        iconContainer: iconContainerStyle,
         subTitleFont: subTitleFontStyle,
         title: titleStyle,
         titleFont: titleFontStyle,
@@ -123,7 +124,9 @@ export default function Accordion(props: AccordionProps) {
                         <Row alignItems={'center'}>
                             {LeftComponent ? (
                                 <React.Fragment>
-                                    {LeftComponent}
+                                    <View style={iconContainerStyle}>
+                                        {LeftComponent}
+                                    </View>
 
                                     <Spacer size={1.5}/>
                                 </React.Fragment>

package/src/Accordion/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Accordion';
 export type { default as AccordionProps } from './AccordionProps';
+export { accordionVariants } from './AccordionProps';

package/src/Accordion/useVariantStyleMap.ts

@@ -9,6 +9,7 @@ interface VariantStyle {
     container: FountainUiStyle;
     content: FountainUiStyle;
     contentFont: TextStyle;
+    iconContainer?: FountainUiStyle;
     subTitleFont?: TextStyle;
     title: FountainUiStyle;
     titleFont: TextStyle;
@@ -39,8 +40,7 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                         color: theme.palette.text.base,
                     }),
                     subTitleFont: createFontStyle(theme, {
-                        // TODO: select typography.
-                        // selector: (typography) => typography.caption1.regular,
+                        selector: (typography) => typography.caption1.regular,
                         color: theme.palette.text.base,
                     }),
                     title: {
@@ -51,9 +51,9 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     },
                     titleFont: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontSize: 16,
+                            lineHeight: 20.8,
+                            fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
                         color: theme.palette.text.strong,
@@ -75,10 +75,12 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                         position: 'absolute',
                     },
                     contentFont: createFontStyle(theme, {
-                        // TODO: select typography.
-                        // selector: typography => typography.caption2.regular,
+                        selector: (typography) => typography.caption2.regular,
                         color: theme.palette.text.base,
                     }),
+                    iconContainer: {
+                        paddingTop: 1,
+                    },
                     title: {
                         alignItems: 'center',
                         paddingBottom: theme.spacing(1),
@@ -116,9 +118,9 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     },
                     titleFont: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontSize: 16,
+                            lineHeight: 20.8,
+                            fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
                         color: theme.palette.text.strong,

package/src/AppBar/AppBar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { useBreakpointUp } from '../hooks';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
 import type { AppBarColor } from './AppBarProps';
@@ -31,6 +32,8 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
 
     const theme = useTheme();
 
+    const isDesktop = useBreakpointUp('md', true, false);
+
     const styles = useStyles();
 
     const backgroundColorMap: Record<AppBarColor, string> = {
@@ -41,6 +44,7 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
     const paperStyle = css([
         styles.root,
         { backgroundColor: backgroundColorMap[color] },
+        isDesktop ? { paddingHorizontal: 8 } : undefined,
         style,
     ]);
 

package/src/AppBar/index.ts

@@ -1,2 +1,3 @@
 export { default } from './AppBar';
 export type { default as AppBarProps } from './AppBarProps';
+export { appBarColors } from './AppBarProps';

package/src/Badge/index.ts

@@ -1,2 +1,13 @@
 export { default } from './Badge';
-export type { default as BadgeProps } from './BadgeProps';
+export type {
+    default as BadgeProps,
+    BadgeHorizontalPosition,
+    BadgePosition,
+    BadgeVerticalPosition,
+} from './BadgeProps';
+export {
+    badgeColors,
+    badgeHorizontalPositions,
+    badgeSizes,
+    badgeVerticalPositions,
+} from './BadgeProps';

package/src/Badge/useVariantStyleMap.ts

@@ -49,13 +49,13 @@ export default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSiz
             large: typographyOf({
                 fontSize: 14,
                 lineHeight: 14,
-                fontFamily: 'Pretendard-Bold',
+                fontFamily: 'PretendardStd-Bold',
                 letterSpacing: -0.7,
             }),
             medium: typographyOf({
                 fontSize: 12,
                 lineHeight: 12,
-                fontFamily: 'Pretendard-Bold',
+                fontFamily: 'PretendardStd-Bold',
                 letterSpacing: -0.6,
             }),
         };

package/src/BottomSheetTitle/BottomSheetTitle.tsx

@@ -74,6 +74,7 @@ export default function BottomSheetTitle(props: BottomSheetTitleProps) {
                     color={'accent'}
                     disableMinWidth={true}
                     onPress={actionButtonProps.onPress}
+                    size={'large'}
                     style={styles.actionButton}
                     variant={'text'}
                 />