@boostdev/design-system-components 1.0.3 → 1.1.1

package/dist/native/index.d.cts

@@ -0,0 +1,208 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } 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';
+
+/** Absolute lineHeight values for React Native (ratio × fontSize). */
+declare const lineHeight: {
+    readonly display: number;
+    readonly heading1: number;
+    readonly heading2: number;
+    readonly heading3: number;
+    readonly body: number;
+    readonly bodyS: number;
+};
+
+type ThemeColors = typeof colors.light | typeof colors.dark;
+interface ThemeContextValue {
+    colors: ThemeColors;
+    isDark: boolean;
+}
+declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+interface TypographyProps {
+    variant?: TypographyVariant;
+    children: ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+declare function Typography({ variant, children, style }: TypographyProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+interface BadgeProps {
+    children: ReactNode;
+    variant?: BadgeVariant;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Badge({ children, variant, style }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = 'small' | 'medium' | 'large';
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Avatar({ src, alt, name, size, style }: Readonly<AvatarProps>): react_jsx_runtime.JSX.Element;
+
+interface SeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    style?: StyleProp<ViewStyle>;
+}
+declare function Separator({ orientation, style }: Readonly<SeparatorProps>): react_jsx_runtime.JSX.Element;
+
+type LoadingSize = 'small' | 'medium' | 'large';
+interface LoadingProps {
+    size?: LoadingSize;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Loading({ size, accessibilityLabel, style }: LoadingProps): react_jsx_runtime.JSX.Element;
+
+type ProgressSize = 'small' | 'medium' | 'large';
+interface ProgressProps {
+    value: number;
+    max?: number;
+    label: string;
+    showLabel?: boolean;
+    size?: ProgressSize;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Progress({ value, max, label, showLabel, size, style, }: Readonly<ProgressProps>): react_jsx_runtime.JSX.Element;
+
+interface SkeletonProps {
+    style?: StyleProp<ViewStyle>;
+}
+declare function Skeleton({ style }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+interface AlertProps {
+    variant?: AlertVariant;
+    icon?: ReactNode;
+    title?: string;
+    children: ReactNode;
+    onDismiss?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Alert({ variant, icon, title, children, onDismiss, style, }: Readonly<AlertProps>): react_jsx_runtime.JSX.Element;
+
+type BannerVariant = 'info' | 'success' | 'warning' | 'error';
+interface NotificationBannerProps {
+    variant?: BannerVariant;
+    children: ReactNode;
+    action?: ReactNode;
+    onDismiss?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function NotificationBanner({ variant, children, action, onDismiss, style, }: Readonly<NotificationBannerProps>): react_jsx_runtime.JSX.Element;
+
+type CardVariant = 'default' | 'elevated' | 'outlined';
+type CardPadding = 'none' | 'small' | 'medium' | 'large';
+type CardAlign = 'start' | 'center' | 'end';
+interface CardProps {
+    children: ReactNode;
+    variant?: CardVariant;
+    padding?: CardPadding;
+    textAlign?: CardAlign;
+    style?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+}
+declare function Card({ children, variant, padding, textAlign, style, onPress, accessibilityLabel, }: CardProps): react_jsx_runtime.JSX.Element;
+
+type SectionHeaderAlignment = 'start' | 'center' | 'end';
+type SectionHeaderSize = 'small' | 'medium' | 'large';
+interface SectionHeaderProps {
+    title: string;
+    subtitle?: string;
+    alignment?: SectionHeaderAlignment;
+    size?: SectionHeaderSize;
+    style?: StyleProp<ViewStyle>;
+}
+declare function SectionHeader({ title, subtitle, alignment, size, style, }: Readonly<SectionHeaderProps>): react_jsx_runtime.JSX.Element;
+
+interface IconWrapperProps {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    accessibilityElementsHidden?: boolean;
+}
+declare function IconWrapper({ children, style, accessibilityElementsHidden }: IconWrapperProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonGroupProps {
+    children: ReactNode;
+    variant?: 'flow' | 'card' | 'modal' | 'content';
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = 'default' | 'ghost';
+type ButtonSize = 'small' | 'medium' | 'large';
+interface ButtonProps {
+    children?: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    iconStart?: ReactNode;
+    iconEnd?: ReactNode;
+    disabled?: boolean;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Button({ children, variant, size, iconStart, iconEnd, disabled, onPress, accessibilityLabel, style, }: Readonly<ButtonProps>): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps {
+    label: string;
+    name: string;
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Switch({ label, value, onChange, disabled, error, hint, style, }: Readonly<SwitchProps>): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps {
+    label: ReactNode;
+    name: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Checkbox({ label, name, checked, onChange, disabled, error, hint, style, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface RadioProps {
+    label: ReactNode;
+    name: string;
+    checked?: boolean;
+    onChange?: () => void;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Radio({ label, name, checked, onChange, disabled, error, hint, style, }: RadioProps): react_jsx_runtime.JSX.Element;
+
+interface LabelProps {
+    label: ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+declare function Label({ label, style }: LabelProps): react_jsx_runtime.JSX.Element;
+
+interface MessageProps {
+    type: 'hint' | 'error';
+    message: string | undefined;
+    style?: StyleProp<TextStyle>;
+}
+declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
+
+export { Alert, Avatar, Badge, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, Checkbox, IconWrapper, type IconWrapperProps, Label, Loading, Message, NotificationBanner, Progress, Radio, SectionHeader, Separator, Skeleton, Switch, ThemeProvider, Typography, lineHeight, useTheme };

package/dist/native/index.d.ts

@@ -0,0 +1,208 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } 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';
+
+/** Absolute lineHeight values for React Native (ratio × fontSize). */
+declare const lineHeight: {
+    readonly display: number;
+    readonly heading1: number;
+    readonly heading2: number;
+    readonly heading3: number;
+    readonly body: number;
+    readonly bodyS: number;
+};
+
+type ThemeColors = typeof colors.light | typeof colors.dark;
+interface ThemeContextValue {
+    colors: ThemeColors;
+    isDark: boolean;
+}
+declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+interface TypographyProps {
+    variant?: TypographyVariant;
+    children: ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+declare function Typography({ variant, children, style }: TypographyProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+interface BadgeProps {
+    children: ReactNode;
+    variant?: BadgeVariant;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Badge({ children, variant, style }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = 'small' | 'medium' | 'large';
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Avatar({ src, alt, name, size, style }: Readonly<AvatarProps>): react_jsx_runtime.JSX.Element;
+
+interface SeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    style?: StyleProp<ViewStyle>;
+}
+declare function Separator({ orientation, style }: Readonly<SeparatorProps>): react_jsx_runtime.JSX.Element;
+
+type LoadingSize = 'small' | 'medium' | 'large';
+interface LoadingProps {
+    size?: LoadingSize;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Loading({ size, accessibilityLabel, style }: LoadingProps): react_jsx_runtime.JSX.Element;
+
+type ProgressSize = 'small' | 'medium' | 'large';
+interface ProgressProps {
+    value: number;
+    max?: number;
+    label: string;
+    showLabel?: boolean;
+    size?: ProgressSize;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Progress({ value, max, label, showLabel, size, style, }: Readonly<ProgressProps>): react_jsx_runtime.JSX.Element;
+
+interface SkeletonProps {
+    style?: StyleProp<ViewStyle>;
+}
+declare function Skeleton({ style }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+interface AlertProps {
+    variant?: AlertVariant;
+    icon?: ReactNode;
+    title?: string;
+    children: ReactNode;
+    onDismiss?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Alert({ variant, icon, title, children, onDismiss, style, }: Readonly<AlertProps>): react_jsx_runtime.JSX.Element;
+
+type BannerVariant = 'info' | 'success' | 'warning' | 'error';
+interface NotificationBannerProps {
+    variant?: BannerVariant;
+    children: ReactNode;
+    action?: ReactNode;
+    onDismiss?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function NotificationBanner({ variant, children, action, onDismiss, style, }: Readonly<NotificationBannerProps>): react_jsx_runtime.JSX.Element;
+
+type CardVariant = 'default' | 'elevated' | 'outlined';
+type CardPadding = 'none' | 'small' | 'medium' | 'large';
+type CardAlign = 'start' | 'center' | 'end';
+interface CardProps {
+    children: ReactNode;
+    variant?: CardVariant;
+    padding?: CardPadding;
+    textAlign?: CardAlign;
+    style?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+}
+declare function Card({ children, variant, padding, textAlign, style, onPress, accessibilityLabel, }: CardProps): react_jsx_runtime.JSX.Element;
+
+type SectionHeaderAlignment = 'start' | 'center' | 'end';
+type SectionHeaderSize = 'small' | 'medium' | 'large';
+interface SectionHeaderProps {
+    title: string;
+    subtitle?: string;
+    alignment?: SectionHeaderAlignment;
+    size?: SectionHeaderSize;
+    style?: StyleProp<ViewStyle>;
+}
+declare function SectionHeader({ title, subtitle, alignment, size, style, }: Readonly<SectionHeaderProps>): react_jsx_runtime.JSX.Element;
+
+interface IconWrapperProps {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    accessibilityElementsHidden?: boolean;
+}
+declare function IconWrapper({ children, style, accessibilityElementsHidden }: IconWrapperProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonGroupProps {
+    children: ReactNode;
+    variant?: 'flow' | 'card' | 'modal' | 'content';
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = 'default' | 'ghost';
+type ButtonSize = 'small' | 'medium' | 'large';
+interface ButtonProps {
+    children?: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    iconStart?: ReactNode;
+    iconEnd?: ReactNode;
+    disabled?: boolean;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Button({ children, variant, size, iconStart, iconEnd, disabled, onPress, accessibilityLabel, style, }: Readonly<ButtonProps>): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps {
+    label: string;
+    name: string;
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Switch({ label, value, onChange, disabled, error, hint, style, }: Readonly<SwitchProps>): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps {
+    label: ReactNode;
+    name: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Checkbox({ label, name, checked, onChange, disabled, error, hint, style, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface RadioProps {
+    label: ReactNode;
+    name: string;
+    checked?: boolean;
+    onChange?: () => void;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Radio({ label, name, checked, onChange, disabled, error, hint, style, }: RadioProps): react_jsx_runtime.JSX.Element;
+
+interface LabelProps {
+    label: ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+declare function Label({ label, style }: LabelProps): react_jsx_runtime.JSX.Element;
+
+interface MessageProps {
+    type: 'hint' | 'error';
+    message: string | undefined;
+    style?: StyleProp<TextStyle>;
+}
+declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
+
+export { Alert, Avatar, Badge, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, Checkbox, IconWrapper, type IconWrapperProps, Label, Loading, Message, NotificationBanner, Progress, Radio, SectionHeader, Separator, Skeleton, Switch, ThemeProvider, Typography, lineHeight, useTheme };