@impulse-ui-native/theme 1.0.10 → 2.0.1

package/dist/index.d.mts

@@ -1,26 +1,37 @@
-import { ViewStyle, TextStyle, DimensionValue, StyleSheet } from 'react-native';
-import { DeepPartial } from '@impulse-ui-native/core';
+import { ViewStyle, TextStyle, StyleSheet } from 'react-native';
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
+import { DeepPartial } from '@impulse-ui-native/core';
 
-declare const StylePropsSet: Set<keyof SpacingProps | keyof ColorProps | keyof ShadowProps | keyof BorderProps | keyof TypographyProps | keyof FlexProps | keyof DimensionProps>;
-
-type BorderProps = {
-    borderRadius?: ViewStyle['borderRadius'];
-    borderColor?: ViewStyle['borderColor'];
-    borderWidth?: ViewStyle['borderWidth'];
-    borderStyle?: ViewStyle['borderStyle'];
-};
+interface BorderProps {
+    borderRadius?: ViewStyle["borderRadius"];
+    borderTopLeftRadius?: ViewStyle["borderTopLeftRadius"];
+    borderTopRightRadius?: ViewStyle["borderTopRightRadius"];
+    borderBottomLeftRadius?: ViewStyle["borderBottomLeftRadius"];
+    borderBottomRightRadius?: ViewStyle["borderBottomRightRadius"];
+    borderWidth?: ViewStyle["borderWidth"];
+    borderTopWidth?: ViewStyle["borderTopWidth"];
+    borderRightWidth?: ViewStyle["borderRightWidth"];
+    borderBottomWidth?: ViewStyle["borderBottomWidth"];
+    borderLeftWidth?: ViewStyle["borderLeftWidth"];
+    borderColor?: ViewStyle["borderColor"];
+    borderTopColor?: ViewStyle["borderTopColor"];
+    borderRightColor?: ViewStyle["borderRightColor"];
+    borderBottomColor?: ViewStyle["borderBottomColor"];
+    borderLeftColor?: ViewStyle["borderLeftColor"];
+    borderStyle?: ViewStyle["borderStyle"];
+}
 
-type ColorProps = {
-    color?: TextStyle['color'];
-    backgroundColor?: ViewStyle['backgroundColor'];
-    opacity?: ViewStyle['opacity'];
-};
+interface ColorProps {
+    color?: TextStyle["color"];
+    backgroundColor?: ViewStyle["backgroundColor"];
+    opacity?: ViewStyle["opacity"];
+}
 
 type ComponentSize = "small" | "medium" | "large";
+type ComponentVariant = "filled" | "outlined" | "soft" | "ghost" | "plain";
 
-type DimensionProps = {
+interface DimensionProps {
     width?: ViewStyle["width"];
     height?: ViewStyle["height"];
     minWidth?: ViewStyle["minWidth"];
@@ -28,7 +39,8 @@ type DimensionProps = {
     minHeight?: ViewStyle["minHeight"];
     maxHeight?: ViewStyle["maxHeight"];
     aspectRatio?: ViewStyle["aspectRatio"];
-};
+    overflow?: ViewStyle["overflow"];
+}
 
 type FlexProps = {
     flex?: ViewStyle["flex"];
@@ -49,37 +61,74 @@ type FlexProps = {
     right?: ViewStyle["right"];
     bottom?: ViewStyle["bottom"];
     left?: ViewStyle["left"];
+    zIndex?: ViewStyle["zIndex"];
 };
 
+type ShadowLevel = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+type ShadowPosition = "around" | "bottom" | "top";
+type ShadowIntensity = {
+    radius: number;
+    opacity: number;
+    elevation: number;
+};
 type ShadowProps = {
-    shadowColor?: ViewStyle['shadowColor'];
-    shadowOpacity?: ViewStyle['shadowOpacity'];
-    shadowRadius?: ViewStyle['shadowRadius'];
-    shadowOffset?: ViewStyle['shadowOffset'];
-    elevation?: ViewStyle['elevation'];
+    shadow?: ShadowLevel;
+    shadowPosition?: ShadowPosition;
+    shadowColor?: ViewStyle["shadowColor"];
+    shadowOpacity?: ViewStyle["shadowOpacity"];
+    shadowRadius?: ViewStyle["shadowRadius"];
+    shadowOffset?: ViewStyle["shadowOffset"];
+    elevation?: ViewStyle["elevation"];
 };
 
-type SpacingProps = {
-    margin?: ViewStyle['margin'];
-    marginTop?: ViewStyle['marginTop'];
-    marginBottom?: ViewStyle['marginBottom'];
-    marginLeft?: ViewStyle['marginLeft'];
-    marginRight?: ViewStyle['marginRight'];
-    marginHorizontal?: ViewStyle['marginHorizontal'];
-    marginVertical?: ViewStyle['marginVertical'];
-    padding?: ViewStyle['padding'];
-    paddingTop?: ViewStyle['paddingTop'];
-    paddingBottom?: ViewStyle['paddingBottom'];
-    paddingLeft?: ViewStyle['paddingLeft'];
-    paddingRight?: ViewStyle['paddingRight'];
-    paddingHorizontal?: ViewStyle['paddingHorizontal'];
-    paddingVertical?: ViewStyle['paddingVertical'];
-};
+interface SpacingProps {
+    margin?: ViewStyle["margin"];
+    marginTop?: ViewStyle["marginTop"];
+    marginBottom?: ViewStyle["marginBottom"];
+    marginLeft?: ViewStyle["marginLeft"];
+    marginRight?: ViewStyle["marginRight"];
+    marginHorizontal?: ViewStyle["marginHorizontal"];
+    marginVertical?: ViewStyle["marginVertical"];
+    padding?: ViewStyle["padding"];
+    paddingTop?: ViewStyle["paddingTop"];
+    paddingBottom?: ViewStyle["paddingBottom"];
+    paddingLeft?: ViewStyle["paddingLeft"];
+    paddingRight?: ViewStyle["paddingRight"];
+    paddingHorizontal?: ViewStyle["paddingHorizontal"];
+    paddingVertical?: ViewStyle["paddingVertical"];
+}
 
-type TypographyProps = {
+type FontWeightNormal = "Montserrat_100Thin" | "Montserrat_200ExtraLight" | "Montserrat_300Light" | "Montserrat_400Regular" | "Montserrat_500Medium" | "Montserrat_600SemiBold" | "Montserrat_700Bold" | "Montserrat_800ExtraBold" | "Montserrat_900Black";
+type FontWeightItalic = "Montserrat_100Thin_Italic" | "Montserrat_200ExtraLight_Italic" | "Montserrat_300Light_Italic" | "Montserrat_400Regular_Italic" | "Montserrat_500Medium_Italic" | "Montserrat_600SemiBold_Italic" | "Montserrat_700Bold_Italic" | "Montserrat_800ExtraBold_Italic" | "Montserrat_900Black_Italic";
+type FontWeightValue = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type SpaceSizesKey = "none" | "xxs" | "xs" | "mxs" | "sm" | "msm" | "md" | "lg" | "xl" | "xxl";
+type Space = Record<SpaceSizesKey, number>;
+type TypographyKey = "xxs" | "xs" | "xsm" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "huge" | "massive" | "giant" | "colossal";
+type FontSize = Record<TypographyKey, number>;
+type LineHeight = Record<TypographyKey, number>;
+type FontWeightKeys = "thin" | "extraLight" | "light" | "regular" | "medium" | "semiBold" | "bold" | "extraBold" | "black";
+type FontFamily = Record<"normal" | "italic", Record<FontWeightValue, string>>;
+type FontWeight = Record<FontWeightKeys, FontWeightValue>;
+type LetterSpacingKey = "tightest" | "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | "ultraWide";
+type LetterSpacings = Record<LetterSpacingKey, number>;
+type BorderSizeKey = "sm" | "md" | "lg" | "xl" | "xxl";
+type BorderSize = Record<BorderSizeKey, number>;
+type RadiusKey = "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "round";
+type Radii = Record<RadiusKey, number>;
+type RadiusDrawnKey = "drawn1" | "drawn2" | "drawn3" | "drawn4" | "drawn5" | "drawn6";
+type RadiiDrawn = Record<RadiusDrawnKey, string>;
+type RadiusBlobKey = "blob1" | "blob2" | "blob3" | "blob4" | "blob5";
+type RadiiBlob = Record<RadiusBlobKey, string>;
+type RadiusConditionalKey = "conditional1" | "conditional2" | "conditional3" | "conditional4" | "conditional5" | "conditional6";
+type RadiiConditional = Record<RadiusConditionalKey, string>;
+type NeutralColorKey = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13";
+type NeutralColor = Record<NeutralColorKey, string>;
+
+interface TypographyProps {
     fontSize?: TextStyle["fontSize"];
     fontFamily?: TextStyle["fontFamily"];
-    fontWeight?: FontWeightKey;
+    fontWeight?: FontWeightValue;
+    fontVariant?: TextStyle["fontVariant"];
     fontStyle?: TextStyle["fontStyle"];
     letterSpacing?: TextStyle["letterSpacing"];
     lineHeight?: TextStyle["lineHeight"];
@@ -91,84 +140,369 @@ type TypographyProps = {
     includeFontPadding?: TextStyle["includeFontPadding"];
     textAlignVertical?: TextStyle["textAlignVertical"];
     writingDirection?: TextStyle["writingDirection"];
-};
+}
 type TypographyPresetKey = "Master" | "DisplayLarge" | "DisplayMedium" | "DisplaySmall" | "Title1" | "Title2" | "Title3" | "Title4" | "Title5" | "Title6" | "Subtitle1" | "Subtitle2" | "BodyLarge" | "Body" | "BodySmall" | "Caption" | "Label" | "Overline" | "Helper" | "Code" | "Quote" | "Eyebrow";
-type FontWeightNormal = "Montserrat_100Thin" | "Montserrat_200ExtraLight" | "Montserrat_300Light" | "Montserrat_400Regular" | "Montserrat_500Medium" | "Montserrat_600SemiBold" | "Montserrat_700Bold" | "Montserrat_800ExtraBold" | "Montserrat_900Black";
-type FontWeightItalic = "Montserrat_100Thin_Italic" | "Montserrat_200ExtraLight_Italic" | "Montserrat_300Light_Italic" | "Montserrat_400Regular_Italic" | "Montserrat_500Medium_Italic" | "Montserrat_600SemiBold_Italic" | "Montserrat_700Bold_Italic" | "Montserrat_800ExtraBold_Italic" | "Montserrat_900Black_Italic";
-type FontWeightKey = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 
 type StyleProps = Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps & DimensionProps>;
 type StylePropKey = keyof StyleProps;
 
-type SpaceSizesKeys = "none" | "auto" | "xxs" | "xs" | "mxs" | "sm" | "msm" | "md" | "lg" | "xl" | "xxl";
-type Space = Record<SpaceSizesKeys, DimensionValue>;
-type FontSizesKeys = "xxs" | "xs" | "xsm" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "huge" | "massive";
-type FontSizes = Record<FontSizesKeys, number>;
-type LineHeightKeys = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-type LineHeights = Record<LineHeightKeys, string>;
-type LetterSpacingKey = "tightest" | "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | "ultraWide";
-type LetterSpacings = Record<LetterSpacingKey, number>;
-type BorderSizeKey = "sm" | "md" | "lg" | "xl" | "xxl";
-type BorderSizes = Record<BorderSizeKey, number>;
-type RadiusKey = "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "round";
-type Radii = Record<RadiusKey, number>;
-type RadiusDrawnKey = "drawn1" | "drawn2" | "drawn3" | "drawn4" | "drawn5" | "drawn6";
-type RadiiDrawn = Record<RadiusDrawnKey, string>;
-type RadiusBlobKey = "blob1" | "blob2" | "blob3" | "blob4" | "blob5";
-type RadiiBlob = Record<RadiusBlobKey, string>;
-type RadiusConditionalKey = "conditional1" | "conditional2" | "conditional3" | "conditional4" | "conditional5" | "conditional6";
-type RadiiConditional = Record<RadiusConditionalKey, string>;
-type NeutralColorKey = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13";
-type NeutralColors = Record<NeutralColorKey, string>;
+type ButtonSizeTokens = Record<ComponentSize, {
+    height: number;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    fontSize: number;
+}>;
+type IconButtonSizeTokens = Record<ComponentSize, {
+    size: number;
+    padding: number;
+}>;
+type ButtonVariantTokens = Record<ComponentVariant, {
+    backgroundColor: string;
+    borderColor: string;
+    color: string;
+    disabledBackgroundColor: string;
+    disabledBorderColor: string;
+    disabledColor: string;
+}>;
+type IconButtonVariantTokens = Record<ComponentVariant, {
+    backgroundColor: string;
+    borderColor: string;
+    color: string;
+    disabledBackgroundColor: string;
+    disabledBorderColor: string;
+    disabledColor: string;
+}>;
+interface ButtonTokens {
+    borderWidth: number;
+    borderRadius: number;
+    sizes: ButtonSizeTokens;
+    variants: ButtonVariantTokens;
+}
+interface IconButtonTokens {
+    borderWidth: number;
+    borderRadius: number;
+    sizes: IconButtonSizeTokens;
+    variants: IconButtonVariantTokens;
+}
+
+interface ControlAddonTokens {
+    marginHorizontal: number;
+    hitSlop: number;
+    iconColor: string;
+    errorIconColor: string;
+    disabledIconColor: string;
+}
+type ControlContainerSizeTokens = Record<ComponentSize, {
+    height: number;
+    paddingHorizontal: number;
+}>;
+type ControlContainerVariantTokens = Record<ComponentVariant, {
+    backgroundColor: string;
+    borderColor: string;
+    errorBorderColor: string;
+    disabledBackgroundColor: string;
+    disabledBorderColor: string;
+}>;
+interface ControlContainerTokens {
+    borderWidth: number;
+    borderRadius: number;
+    disabledOpacity: number;
+    sizes: ControlContainerSizeTokens;
+    variants: ControlContainerVariantTokens;
+}
+interface ControlErrorTokens {
+    marginTop: number;
+    color: string;
+    fontSize: number;
+}
+type ControlInputSizeTokens = Record<ComponentSize, {
+    fontSize: number;
+}>;
+type ControlInputVariantTokens = Record<ComponentVariant, {
+    color: string;
+    placeholderColor: string;
+    disabledColor: string;
+    disabledPlaceholderColor: string;
+    errorColor: string;
+    errorPlaceholderColor: string;
+}>;
+interface ControlInputTokens {
+    flex: number;
+    fontFamily: string;
+    paddingHorizontal: number;
+    sizes: ControlInputSizeTokens;
+    variants: ControlInputVariantTokens;
+}
+interface ControlLabelTokens {
+    marginBottom: number;
+    fontSize: number;
+    color: string;
+    disabledColor: string;
+    errorColor: string;
+}
+
+interface DataStateDetailsTokens {
+    gap: number;
+    iconSize: number;
+    iconColor: string;
+}
+interface DataStateActionsFooterTokens {
+    gap: number;
+}
+interface DataStateContentTokens {
+    zIndex: number;
+}
+interface DataStateLoadingTokens {
+    transitionDuration: number;
+    loaderZIndex: number;
+}
+interface DataStateTokens {
+    details: DataStateDetailsTokens;
+    actionsFooter: DataStateActionsFooterTokens;
+    content: DataStateContentTokens;
+    loading: DataStateLoadingTokens;
+}
+
+interface DatetimePickerCalendarTokens {
+    dayNamesMarginBottom: number;
+    weeksGap: number;
+}
+interface DatetimePickerDayTokens {
+    size: number;
+    borderRadius: number;
+    color: string;
+    outsideMonthColor: string;
+    selectedBackgroundColor: string;
+    selectedColor: string;
+    rangeBackgroundColor: string;
+    rangeColor: string;
+}
+interface DatetimePickerFlyoutActionsTokens {
+    gap: number;
+    buttonsGap: number;
+    clearColor: string;
+}
+interface DatetimePickerQuickDateOptionsTokens {
+    gap: number;
+}
+interface DatetimePickerVisibleDateSelectTokens {
+    gap: number;
+}
+interface DatePickerFlyoutTokens {
+    gap: number;
+}
+interface DatetimePickerFlyoutTokens {
+    gap: number;
+}
+interface DatetimeRangePickerFlyoutTokens {
+    gap: number;
+    timeInputsGap: number;
+}
+interface DatetimePickerTokens {
+    calendar: DatetimePickerCalendarTokens;
+    day: DatetimePickerDayTokens;
+    datePickerFlyout: DatePickerFlyoutTokens;
+    datetimePickerFlyout: DatetimePickerFlyoutTokens;
+    datetimeRangePickerFlyout: DatetimeRangePickerFlyoutTokens;
+    flyoutActions: DatetimePickerFlyoutActionsTokens;
+    quickDateOptions: DatetimePickerQuickDateOptionsTokens;
+    visibleDateSelect: DatetimePickerVisibleDateSelectTokens;
+}
+
+interface FlyoutHandleTokens {
+    containerHeight: number;
+    width: `${number}%`;
+    height: number;
+    borderRadius: number;
+    backgroundColor: string;
+}
+interface FlyoutTitleTokens {
+    paddingVertical: number;
+    paddingHorizontal: number;
+}
+interface FlyoutTokens {
+    zIndexBase: number;
+    maxHeightRatio: number;
+    overlayColor: string;
+    overlayVisibleOpacity: number;
+    backgroundColor: string;
+    contentPaddingHorizontal: number;
+    borderRadius: number;
+    hiddenOpacity: number;
+    title: FlyoutTitleTokens;
+    handle: FlyoutHandleTokens;
+}
+
+interface SelectOptionTokens {
+    padding: number;
+    selectedIconColor: string;
+    selectedIconVisibleOpacity: number;
+    selectedIconHiddenOpacity: number;
+}
+interface SelectTokens {
+    option: SelectOptionTokens;
+}
+
+interface SkeletonBoneTokens {
+    backgroundColor: string;
+    borderColor: string;
+    initialOpacity: number;
+    animatedOpacity: number;
+    animationDuration: number;
+}
+interface SkeletonTextTokens {
+    alignSelf: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    textTransform: "none" | "capitalize" | "uppercase" | "lowercase";
+    opacity: number;
+}
+interface SkeletonTokens {
+    bone: SkeletonBoneTokens;
+    text: SkeletonTextTokens;
+}
+
+type TagColor = "primary" | "secondary" | "error" | "warning" | "success" | "info";
+type TagSizeTokens = Record<ComponentSize, {
+    height: number;
+    paddingHorizontal: number;
+    minWidth: number;
+    fontSize: number;
+}>;
+type TagVariantTokens = Record<ComponentVariant, {
+    backgroundColor: string;
+    borderColor: string;
+    color: string;
+    disabledBackgroundColor: string;
+    disabledBorderColor: string;
+    disabledColor: string;
+}>;
+type TagColorTokens = Record<TagColor, TagVariantTokens>;
+interface TagTokens {
+    borderWidth: number;
+    borderRadius: number;
+    gap: number;
+    iconMarginLeft: number;
+    sizes: TagSizeTokens;
+    colors: TagColorTokens;
+}
+
+interface TimePickerColumnTokens {
+    width: number;
+    height: number;
+    gap: number;
+    listWidth: number;
+    itemHeight: number;
+    visibleItems: number;
+    verticalPadding: number;
+    initialScrollIndexViewOffset: number;
+    fontSize: number;
+    selectedColor: string;
+    color: string;
+    selectedFontWeight: number;
+    fontWeight: number;
+}
+interface TimePickerFlyoutTokens {
+    gap: number;
+}
+interface TimePickerColumnsTokens {
+    height: number;
+    gap: number;
+    indicatorHeight: number;
+    indicatorWidth: number;
+    indicatorTop: number;
+    indicatorBorderRadius: number;
+    indicatorBackgroundColor: string;
+}
+interface TimePickerTokens {
+    column: TimePickerColumnTokens;
+    flyout: TimePickerFlyoutTokens;
+    columns: TimePickerColumnsTokens;
+}
 
 interface ThemeContextData {
-    loaded: boolean;
     theme: AppTheme;
-    components?: DeepPartial<ComponentsThemes>;
 }
 type ColorScheme = "light" | "dark";
+type ColorPair = {
+    value: string;
+    contrast: string;
+};
 type ThemeColors = {
-    primary: string;
-    secondary: string;
-    neutral: NeutralColors;
-    white: string;
-    black: string;
-    error: string;
-    warning: string;
-    success: string;
-    info: string;
+    primary: ColorPair;
+    accent: ColorPair;
+    secondary: ColorPair;
+    neutral: NeutralColor;
+    surface: {
+        primary: ColorPair;
+        secondary: ColorPair;
+        elevated: ColorPair;
+        inverse: ColorPair;
+    };
     text: {
         primary: string;
         secondary: string;
+        tertiary: string;
+        inverse: string;
+        disabled: string;
     };
-    background: {
-        primary: string;
-        secondary: string;
+    border: {
+        subtle: ColorPair;
+        default: ColorPair;
+        strong: ColorPair;
+        focus: ColorPair;
     };
+    feedback: {
+        error: ColorPair;
+        warning: ColorPair;
+        success: ColorPair;
+        info: ColorPair;
+    };
+    overlay: string;
+    white: string;
+    black: string;
 } & ExtendedThemeColors;
 interface ExtendedThemeColors {
 }
 interface ComponentsThemes {
-    typography: Record<TypographyPresetKey, TypographyProps>;
+    (theme: PrimitiveThemeTokens): ComponentsTokens;
 }
-interface AppTheme {
+interface ComponentsTokens {
+    button: ButtonTokens;
+    iconButton: IconButtonTokens;
+    tag: TagTokens;
+    controlAddon: ControlAddonTokens;
+    controlContainer: ControlContainerTokens;
+    controlError: ControlErrorTokens;
+    controlInput: ControlInputTokens;
+    controlLabel: ControlLabelTokens;
+    select: SelectTokens;
+    datetimePicker: DatetimePickerTokens;
+    timePicker: TimePickerTokens;
+    flyout: FlyoutTokens;
+    skeleton: SkeletonTokens;
+    dataState: DataStateTokens;
+}
+interface PrimitiveThemeTokens {
     colors: ThemeColors;
-    spacing: Space;
+    space: Space;
     radii: Radii;
-    borderSize: BorderSizes;
-    fontWeights: Record<"normal" | "italic", Record<FontWeightKey, string>>;
-    fontSize: FontSizes;
+    borderSize: BorderSize;
+    fontFamily: FontFamily;
+    fontWeight: FontWeight;
+    fontSize: FontSize;
+    lineHeight: LineHeight;
+}
+interface AppTheme extends PrimitiveThemeTokens {
+    components: ComponentsTokens;
 }
-type CustomComponentsTheme = ((theme: AppTheme) => DeepPartial<ComponentsThemes>) | DeepPartial<ComponentsThemes>;
 
-declare const FontWeightsNormal: Record<FontWeightKey, FontWeightNormal>;
-declare const FontWeightsItalic: Record<FontWeightKey, FontWeightItalic>;
+declare const StylePropsSet: Set<keyof SpacingProps | keyof ColorProps | keyof ShadowProps | keyof BorderProps | keyof TypographyProps | keyof FlexProps | keyof DimensionProps>;
+declare const shadowScale: Record<ShadowLevel, ShadowIntensity>;
 
-declare function useBorder(): BorderSizes;
+declare function useBorder(): BorderSize;
 
 declare function useColors(): ThemeColors;
 
-declare function useComponentsTheme(): DeepPartial<ComponentsThemes> | undefined;
+declare function useComponentsTokens(): ComponentsTokens;
 
 declare function useRadii(): Radii;
 
@@ -179,31 +513,42 @@ declare function useStyleProps<Props extends object>(props: Props): Partial<Spac
 declare function useTheme(): AppTheme;
 
 type ThemedStyles<T extends StyleSheet.NamedStyles<T>> = T;
-type StyledFunction<Props extends object, T extends StyleSheet.NamedStyles<T>> = (theme: AppTheme, props: Props) => ThemedStyles<T>;
-declare const useThemedStyles: <Props extends object, T extends StyleSheet.NamedStyles<T>>(styledFunction: StyledFunction<Props, T>, props: Props) => ThemedStyles<T>;
+type StyledFunctionNoProps<T extends StyleSheet.NamedStyles<T>> = (theme: AppTheme) => ThemedStyles<T>;
+type StyledFunctionWithProps<Props extends object, T extends StyleSheet.NamedStyles<T>> = (theme: AppTheme, props: Props) => ThemedStyles<T>;
+declare function useThemedStyles<T extends StyleSheet.NamedStyles<T>>(styledFunction: StyledFunctionNoProps<T>): ThemedStyles<T>;
+declare function useThemedStyles<Props extends object, T extends StyleSheet.NamedStyles<T>>(styledFunction: StyledFunctionWithProps<Props, T>, props: Props, dependencies: readonly unknown[]): ThemedStyles<T>;
+declare function useThemedStyles<Props extends object, T extends StyleSheet.NamedStyles<T>>(styledFunction: StyledFunctionWithProps<Props, T>, props: Props, dependencies: readonly unknown[]): ThemedStyles<T>;
 
 interface ThemeProviderProps {
     scheme?: ColorScheme;
     theme?: DeepPartial<{
-        light: AppTheme;
-        dark: AppTheme;
+        light: PrimitiveThemeTokens;
+        dark: PrimitiveThemeTokens;
     }>;
-    components?: CustomComponentsTheme;
+    components?: ((theme: PrimitiveThemeTokens) => DeepPartial<ComponentsTokens>) | DeepPartial<ComponentsTokens>;
 }
 declare const ThemeProvider: react.NamedExoticComponent<PropsWithChildren<ThemeProviderProps>>;
-declare function useThemeContext(): ThemeContextData;
+declare function useThemeContext(): AppTheme;
 
-declare const DarkTheme: AppTheme;
+declare const DarkTheme: PrimitiveThemeTokens;
 
-declare const LightTheme: AppTheme;
+declare const LightTheme: PrimitiveThemeTokens;
 
 declare const SpaceTokens: Space;
-declare const BorderSizeTokens: BorderSizes;
+declare const BorderSizeTokens: BorderSize;
 declare const RadiiTokens: Radii;
-declare const FontSizeTokens: FontSizes;
-declare const NeutralColorTokens: NeutralColors;
+declare const FontSizeTokens: FontSize;
+declare const LineHeightTokens: LineHeight;
+declare const FontWeightTokens: FontWeight;
+declare const FontFamilyWeightsNormalTokens: Record<FontWeightValue, FontWeightNormal>;
+declare const FontFamilyWeightsItalicTokens: Record<FontWeightValue, FontWeightItalic>;
+declare const FontFamilyTokens: FontFamily;
+declare const NeutralColorTokens: NeutralColor;
+declare const LightColors: ThemeColors;
+declare function createComponentsTokens(tokens: PrimitiveThemeTokens): ComponentsTokens;
 
 declare const extractStyleProps: <Props extends object>(props: Props) => StyleProps;
 declare const createStyleKey: <Props extends object>(props: Props) => string;
+declare const getShadowStyle: (level: ShadowLevel | undefined, position: ShadowPosition | undefined, colors: ThemeColors) => ViewStyle;
 
-export { type AppTheme, type BorderProps, type BorderSizeKey, BorderSizeTokens, type BorderSizes, type ColorProps, type ColorScheme, type ComponentSize, type ComponentsThemes, type CustomComponentsTheme, DarkTheme, type DimensionProps, type ExtendedThemeColors, type FlexProps, FontSizeTokens, type FontSizes, type FontSizesKeys, type FontWeightItalic, type FontWeightKey, type FontWeightNormal, FontWeightsItalic, FontWeightsNormal, type LetterSpacingKey, type LetterSpacings, LightTheme, type LineHeightKeys, type LineHeights, type NeutralColorKey, NeutralColorTokens, type NeutralColors, type Radii, type RadiiBlob, type RadiiConditional, type RadiiDrawn, RadiiTokens, type RadiusBlobKey, type RadiusConditionalKey, type RadiusDrawnKey, type RadiusKey, type ShadowProps, type Space, type SpaceSizesKeys, SpaceTokens, type SpacingProps, type StylePropKey, type StyleProps, StylePropsSet, type ThemeColors, type ThemeContextData, ThemeProvider, type TypographyPresetKey, type TypographyProps, createStyleKey, extractStyleProps, useBorder, useColors, useComponentsTheme, useRadii, useSpace, useStyleProps, useTheme, useThemeContext, useThemedStyles };
+export { type AppTheme, type BorderProps, type BorderSize, type BorderSizeKey, BorderSizeTokens, type ButtonSizeTokens, type ButtonTokens, type ButtonVariantTokens, type ColorPair, type ColorProps, type ColorScheme, type ComponentSize, type ComponentVariant, type ComponentsThemes, type ComponentsTokens, type ControlAddonTokens, type ControlContainerSizeTokens, type ControlContainerTokens, type ControlContainerVariantTokens, type ControlErrorTokens, type ControlInputSizeTokens, type ControlInputTokens, type ControlInputVariantTokens, type ControlLabelTokens, DarkTheme, type DataStateActionsFooterTokens, type DataStateContentTokens, type DataStateDetailsTokens, type DataStateLoadingTokens, type DataStateTokens, type DatePickerFlyoutTokens, type DatetimePickerCalendarTokens, type DatetimePickerDayTokens, type DatetimePickerFlyoutActionsTokens, type DatetimePickerFlyoutTokens, type DatetimePickerQuickDateOptionsTokens, type DatetimePickerTokens, type DatetimePickerVisibleDateSelectTokens, type DatetimeRangePickerFlyoutTokens, type DimensionProps, type ExtendedThemeColors, type FlexProps, type FlyoutHandleTokens, type FlyoutTitleTokens, type FlyoutTokens, type FontFamily, FontFamilyTokens, FontFamilyWeightsItalicTokens, FontFamilyWeightsNormalTokens, type FontSize, FontSizeTokens, type FontWeight, type FontWeightItalic, type FontWeightKeys, type FontWeightNormal, FontWeightTokens, type FontWeightValue, type IconButtonSizeTokens, type IconButtonTokens, type IconButtonVariantTokens, type LetterSpacingKey, type LetterSpacings, LightColors, LightTheme, type LineHeight, LineHeightTokens, type NeutralColor, type NeutralColorKey, NeutralColorTokens, type PrimitiveThemeTokens, type Radii, type RadiiBlob, type RadiiConditional, type RadiiDrawn, RadiiTokens, type RadiusBlobKey, type RadiusConditionalKey, type RadiusDrawnKey, type RadiusKey, type SelectOptionTokens, type SelectTokens, type ShadowIntensity, type ShadowLevel, type ShadowPosition, type ShadowProps, type SkeletonBoneTokens, type SkeletonTextTokens, type SkeletonTokens, type Space, type SpaceSizesKey, SpaceTokens, type SpacingProps, type StylePropKey, type StyleProps, StylePropsSet, type TagColor, type TagColorTokens, type TagSizeTokens, type TagTokens, type TagVariantTokens, type ThemeColors, type ThemeContextData, ThemeProvider, type TimePickerColumnTokens, type TimePickerColumnsTokens, type TimePickerFlyoutTokens, type TimePickerTokens, type TypographyKey, type TypographyPresetKey, type TypographyProps, createComponentsTokens, createStyleKey, extractStyleProps, getShadowStyle, shadowScale, useBorder, useColors, useComponentsTokens, useRadii, useSpace, useStyleProps, useTheme, useThemeContext, useThemedStyles };