@boostdev/design-system-react-native 0.3.0 → 0.5.0

package/dist/index.d.cts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
 import { colors } from '@boostdev/design-system-foundation/native';
 export { animation, border, colors, font, spacing, zIndex } from '@boostdev/design-system-foundation/native';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { TextProps, Text, TextInputProps, TextInput, StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 /** Absolute lineHeight values for React Native (ratio × fontSize). */
 declare const lineHeight: {
@@ -80,21 +81,51 @@ declare function createReactNavigationTheme(options?: CreateReactNavigationTheme
  */
 declare function useReactNavigationTheme(overrides?: Pick<CreateReactNavigationThemeOptions, 'colors' | 'fonts'>): ReactNavigationTheme;
 
+/** The ceiling for a text with this style (see `maxFontScaleFor`), unless the caller passes its own. */
+declare function maxFontScaleForStyle(style: StyleProp<TextStyle>, override?: number | null): number;
+/**
+ * React Native's `Text` with a ceiling on how far it grows with the OS text size, taken from its
+ * own font size. Pass `maxFontSizeMultiplier` to override it, e.g. `1` for text in a fixed shape.
+ */
+declare const ScaledText: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<Text>>;
+/** React Native's `TextInput` with the same ceiling as `ScaledText`. */
+declare const ScaledTextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<TextInput>>;
+
+/**
+ * How far text of this size may grow with the OS text size (iOS Dynamic Type, Android font
+ * scale), as React Native's `maxFontSizeMultiplier`. Big text grows less: a 16 pt body line may
+ * double, a 32 pt heading grows to about 42, and a figure of 60 pt or more (a countdown, a score)
+ * stays as it is.
+ */
+declare function maxFontScaleFor(fontSize: number): number;
+
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
 interface TypographyProps {
     variant?: TypographyVariant;
     children: ReactNode;
     style?: StyleProp<TextStyle>;
+    /**
+     * Overrides the ceiling on how far the text grows with the OS text size (default: from its
+     * font size, see `maxFontScaleFor`). `1` keeps the text at its own size.
+     */
+    maxFontSizeMultiplier?: number;
+    /** Truncates the text with an ellipsis after this many lines. */
+    numberOfLines?: number;
 }
-declare function Typography({ variant, children, style }: TypographyProps): react_jsx_runtime.JSX.Element;
+declare function Typography({ variant, children, style, maxFontSizeMultiplier, numberOfLines, }: TypographyProps): react_jsx_runtime.JSX.Element;
 
 type BadgeVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
 interface BadgeProps {
     children: ReactNode;
     variant?: BadgeVariant;
     style?: StyleProp<ViewStyle>;
+    /**
+     * Overrides the ceiling on how far the text grows with the OS text size (default: from its
+     * font size, see `maxFontScaleFor`). Pass `1` for a count on a fixed shape.
+     */
+    maxFontSizeMultiplier?: number;
 }
-declare function Badge({ children, variant, style }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ children, variant, style, maxFontSizeMultiplier }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 type AvatarSize = 'small' | 'medium' | 'large';
 interface AvatarProps {
@@ -468,7 +499,7 @@ interface ComboboxProps {
 }
 declare function Combobox({ label, name, options, placeholder, value, onChange, disabled, error, hint, style, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
 
-type SegmentedControlSize = 'small' | 'medium' | 'large';
+type SegmentedControlSize = 'small' | 'medium' | 'large' | 'xlarge';
 type SegmentedControlVariant = 'outline' | 'filled';
 interface SegmentedControlProps {
     selectedIndex?: number;
@@ -636,4 +667,4 @@ interface MessageProps {
 }
 declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type CreateReactNavigationThemeOptions, type DescriptionItem, DescriptionList, Dialog, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, type ReactNavigationFontStyle, type ReactNavigationTheme, type ReactNavigationThemeColors, type ReactNavigationThemeFonts, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, SideSheet, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, type ThemeColorName, type ThemeColors, ThemeProvider, type ThemeTokenOverrides, ToastProvider, Tooltip, Typography, createReactNavigationTheme, lineHeight, useReactNavigationTheme, useTheme, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type CreateReactNavigationThemeOptions, type DescriptionItem, DescriptionList, Dialog, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, type ReactNavigationFontStyle, type ReactNavigationTheme, type ReactNavigationThemeColors, type ReactNavigationThemeFonts, ScaledText, ScaledTextInput, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, SideSheet, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, type ThemeColorName, type ThemeColors, ThemeProvider, type ThemeTokenOverrides, ToastProvider, Tooltip, Typography, createReactNavigationTheme, lineHeight, maxFontScaleFor, maxFontScaleForStyle, useReactNavigationTheme, useTheme, useToast };

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
 import { colors } from '@boostdev/design-system-foundation/native';
 export { animation, border, colors, font, spacing, zIndex } from '@boostdev/design-system-foundation/native';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { TextProps, Text, TextInputProps, TextInput, StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 /** Absolute lineHeight values for React Native (ratio × fontSize). */
 declare const lineHeight: {
@@ -80,21 +81,51 @@ declare function createReactNavigationTheme(options?: CreateReactNavigationTheme
  */
 declare function useReactNavigationTheme(overrides?: Pick<CreateReactNavigationThemeOptions, 'colors' | 'fonts'>): ReactNavigationTheme;
 
+/** The ceiling for a text with this style (see `maxFontScaleFor`), unless the caller passes its own. */
+declare function maxFontScaleForStyle(style: StyleProp<TextStyle>, override?: number | null): number;
+/**
+ * React Native's `Text` with a ceiling on how far it grows with the OS text size, taken from its
+ * own font size. Pass `maxFontSizeMultiplier` to override it, e.g. `1` for text in a fixed shape.
+ */
+declare const ScaledText: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<Text>>;
+/** React Native's `TextInput` with the same ceiling as `ScaledText`. */
+declare const ScaledTextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<TextInput>>;
+
+/**
+ * How far text of this size may grow with the OS text size (iOS Dynamic Type, Android font
+ * scale), as React Native's `maxFontSizeMultiplier`. Big text grows less: a 16 pt body line may
+ * double, a 32 pt heading grows to about 42, and a figure of 60 pt or more (a countdown, a score)
+ * stays as it is.
+ */
+declare function maxFontScaleFor(fontSize: number): number;
+
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
 interface TypographyProps {
     variant?: TypographyVariant;
     children: ReactNode;
     style?: StyleProp<TextStyle>;
+    /**
+     * Overrides the ceiling on how far the text grows with the OS text size (default: from its
+     * font size, see `maxFontScaleFor`). `1` keeps the text at its own size.
+     */
+    maxFontSizeMultiplier?: number;
+    /** Truncates the text with an ellipsis after this many lines. */
+    numberOfLines?: number;
 }
-declare function Typography({ variant, children, style }: TypographyProps): react_jsx_runtime.JSX.Element;
+declare function Typography({ variant, children, style, maxFontSizeMultiplier, numberOfLines, }: TypographyProps): react_jsx_runtime.JSX.Element;
 
 type BadgeVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
 interface BadgeProps {
     children: ReactNode;
     variant?: BadgeVariant;
     style?: StyleProp<ViewStyle>;
+    /**
+     * Overrides the ceiling on how far the text grows with the OS text size (default: from its
+     * font size, see `maxFontScaleFor`). Pass `1` for a count on a fixed shape.
+     */
+    maxFontSizeMultiplier?: number;
 }
-declare function Badge({ children, variant, style }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ children, variant, style, maxFontSizeMultiplier }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 type AvatarSize = 'small' | 'medium' | 'large';
 interface AvatarProps {
@@ -468,7 +499,7 @@ interface ComboboxProps {
 }
 declare function Combobox({ label, name, options, placeholder, value, onChange, disabled, error, hint, style, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
 
-type SegmentedControlSize = 'small' | 'medium' | 'large';
+type SegmentedControlSize = 'small' | 'medium' | 'large' | 'xlarge';
 type SegmentedControlVariant = 'outline' | 'filled';
 interface SegmentedControlProps {
     selectedIndex?: number;
@@ -636,4 +667,4 @@ interface MessageProps {
 }
 declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type CreateReactNavigationThemeOptions, type DescriptionItem, DescriptionList, Dialog, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, type ReactNavigationFontStyle, type ReactNavigationTheme, type ReactNavigationThemeColors, type ReactNavigationThemeFonts, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, SideSheet, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, type ThemeColorName, type ThemeColors, ThemeProvider, type ThemeTokenOverrides, ToastProvider, Tooltip, Typography, createReactNavigationTheme, lineHeight, useReactNavigationTheme, useTheme, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type CreateReactNavigationThemeOptions, type DescriptionItem, DescriptionList, Dialog, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, type ReactNavigationFontStyle, type ReactNavigationTheme, type ReactNavigationThemeColors, type ReactNavigationThemeFonts, ScaledText, ScaledTextInput, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, SideSheet, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, type ThemeColorName, type ThemeColors, ThemeProvider, type ThemeTokenOverrides, ToastProvider, Tooltip, Typography, createReactNavigationTheme, lineHeight, maxFontScaleFor, maxFontScaleForStyle, useReactNavigationTheme, useTheme, useToast };