creactive 0.0.180 → 0.0.181

package/build/components/atoms/index.d.ts

@@ -2,5 +2,7 @@ export { Gradient } from './gradient';
 export type { GradientLinearComponent, GradientLinearProperties, GradientObject, GradientStopComponent, GradientStopProperties, } from './gradient';
 export { Text } from './text';
 export type { TextComponent, TextMeasureCallback, TextProperties, TextReference, } from './text';
+export { Transition } from './transition';
+export type { TransitionComponent, TransitionProperties } from './transition';
 export { View } from './view';
 export type { ViewComponent, ViewLayoutEvent, ViewProperties } from './view';

package/build/components/atoms/text/constants/color.d.ts

@@ -31,8 +31,7 @@ export declare enum TextColor {
     FAILURE_600 = 23,
     FAILURE_700 = 24,
     FAILURE_800 = 25,
-    FAILURE_900 = 26,
-    TRANSPARENT = 27
+    FAILURE_900 = 26
 }
 /**
  * Supported text background color constants.

package/build/components/atoms/text/text.types.d.ts

@@ -70,11 +70,11 @@ export interface TextProperties extends PropsWithChildren {
      */
     maxLines?: number;
     /**
-     * Themed or transparent color.
+     * Themed, transparent, or custom color value.
      * @see Text.Color
      * @default Text.Color.BASE_800
      */
-    color?: TextColor;
+    color?: TextColor | Color;
     /**
      * Themed background color.
      * @see Text.BackgroundColor

package/build/components/atoms/transition/constants/duration.d.ts

@@ -0,0 +1,5 @@
+export declare enum TransitionDuration {
+    SM = 0,
+    MD = 1,
+    LG = 2
+}

package/build/components/atoms/transition/constants/index.d.ts

@@ -0,0 +1 @@
+export { TransitionDuration } from './duration';

package/build/components/atoms/transition/index.d.ts

@@ -0,0 +1,3 @@
+import type { TransitionComponent, TransitionProperties } from './transition.types';
+export declare const Transition: TransitionComponent;
+export type { TransitionComponent, TransitionProperties };

package/build/components/atoms/transition/transition.types.d.ts

@@ -0,0 +1,58 @@
+import type { Fraction, FractionValue, PixelDimension } from '../../../helpers';
+import type { FunctionComponent, PropsWithChildren } from 'react';
+import type { TransitionDuration } from './constants';
+export interface TransitionProperties extends PropsWithChildren {
+    /**
+     * Allows to select transition in tests.
+     * @default undefined
+     */
+    testId?: string;
+    /**
+     * Target opacity of the transition.
+     * Animates from the previous value to the new one.
+     * @see Fraction
+     * @default undefined
+     */
+    opacity?: Fraction;
+    /**
+     * Target scale of the transition.
+     * Animates from the previous value to the new one.
+     * @see Fraction
+     * @default undefined
+     */
+    scale?: Fraction;
+    /**
+     * Target horizontal translation of the transition.
+     * Animates from the previous value to the new one.
+     * @see Dimension
+     * @default undefined
+     */
+    translateX?: PixelDimension;
+    /**
+     * Target vertical translation of the transition.
+     * Animates from the previous value to the new one.
+     * @see Dimension
+     * @default undefined
+     */
+    translateY?: PixelDimension;
+    /**
+     * Duration of the transition animation.
+     * @see Transition.Duration
+     * @default Transition.Duration.MD
+     */
+    duration?: TransitionDuration;
+}
+export type TransitionComponent = FunctionComponent<TransitionProperties> & {
+    Duration: Record<keyof typeof TransitionDuration, TransitionDuration>;
+};
+/**
+ * Styled transition properties type.
+ * Used to render transition component on web.
+ */
+export type TransitionStyledProperties = {
+    css: {
+        opacity?: FractionValue;
+        transform?: string;
+        transition: string;
+    };
+};

package/build/components/atoms/view/constants/color.d.ts

@@ -30,5 +30,14 @@ export declare enum ViewBackgroundColor {
     ACCENT_600 = 23,
     ACCENT_700 = 24,
     ACCENT_800 = 25,
-    ACCENT_900 = 26
+    ACCENT_900 = 26,
+    SUBACCENT_100 = 27,
+    SUBACCENT_200 = 28,
+    SUBACCENT_300 = 29,
+    SUBACCENT_400 = 30,
+    SUBACCENT_500 = 31,
+    SUBACCENT_600 = 32,
+    SUBACCENT_700 = 33,
+    SUBACCENT_800 = 34,
+    SUBACCENT_900 = 35
 }

package/build/components/atoms/view/view.types.d.ts

@@ -297,11 +297,11 @@ export interface ViewProperties extends PropsWithChildren {
      */
     borderRadiusBottomRight?: ViewBorderRadius;
     /**
-     * View background color.
+     * Themed or custom background color.
      * @see View.BackgroundColor
-     * @default View.BackgroundColor.TRANSPARENT
+     * @default undefined
      */
-    backgroundColor?: ViewBackgroundColor;
+    backgroundColor?: ViewBackgroundColor | Color;
     /**
      * Callback function that is called when the layout of the view changes.
      * @param event Event containing the width and height of the view.

package/build/components/index.d.ts

@@ -1,2 +1,2 @@
-export { Gradient, Text, View } from './atoms';
-export type { GradientLinearComponent, GradientLinearProperties, GradientObject, GradientStopComponent, GradientStopProperties, TextComponent, TextMeasureCallback, TextProperties, TextReference, ViewComponent, ViewLayoutEvent, ViewProperties, } from './atoms';
+export { Gradient, Text, Transition, View } from './atoms';
+export type { GradientLinearComponent, GradientLinearProperties, GradientObject, GradientStopComponent, GradientStopProperties, TextComponent, TextMeasureCallback, TextProperties, TextReference, TransitionComponent, TransitionProperties, ViewComponent, ViewLayoutEvent, ViewProperties, } from './atoms';

package/build/contexts/theme/constants/color.d.ts

@@ -25,6 +25,15 @@ export declare const COLOR_BACKGROUND_ACCENT_600 = "rgb(115,180,238)";
 export declare const COLOR_BACKGROUND_ACCENT_700 = "rgb(95,168,233)";
 export declare const COLOR_BACKGROUND_ACCENT_800 = "rgb(75,155,225)";
 export declare const COLOR_BACKGROUND_ACCENT_900 = "rgb(50,130,200)";
+export declare const COLOR_BACKGROUND_SUBACCENT_100 = "rgb(215,245,235)";
+export declare const COLOR_BACKGROUND_SUBACCENT_200 = "rgb(200,240,225)";
+export declare const COLOR_BACKGROUND_SUBACCENT_300 = "rgb(185,235,215)";
+export declare const COLOR_BACKGROUND_SUBACCENT_400 = "rgb(170,230,205)";
+export declare const COLOR_BACKGROUND_SUBACCENT_500 = "rgb(155,225,195)";
+export declare const COLOR_BACKGROUND_SUBACCENT_600 = "rgb(145,222,190)";
+export declare const COLOR_BACKGROUND_SUBACCENT_700 = "rgb(135,218,185)";
+export declare const COLOR_BACKGROUND_SUBACCENT_800 = "rgb(125,215,180)";
+export declare const COLOR_BACKGROUND_SUBACCENT_900 = "rgb(100,195,160)";
 export declare const COLOR_BORDER_BASE_100 = "rgb(235,235,240)";
 export declare const COLOR_BORDER_BASE_200 = "rgb(230,230,235)";
 export declare const COLOR_BORDER_BASE_300 = "rgb(225,225,230)";

package/build/contexts/theme/constants/index.d.ts

@@ -1,5 +1,5 @@
 export { BORDER_RADIUS_BASE_LG, BORDER_RADIUS_BASE_MD, BORDER_RADIUS_BASE_SM, BORDER_RADIUS_BASE_X2L, BORDER_RADIUS_BASE_X3L, BORDER_RADIUS_BASE_X4L, BORDER_RADIUS_BASE_X5L, BORDER_RADIUS_BASE_X6L, BORDER_RADIUS_BASE_XL, BORDER_RADIUS_BASE_XS, BORDER_WIDTH_BASE_LG, BORDER_WIDTH_BASE_MD, BORDER_WIDTH_BASE_SM, } from './border';
-export { COLOR_BACKGROUND_BASE_100, COLOR_BACKGROUND_BASE_200, COLOR_BACKGROUND_BASE_300, COLOR_BACKGROUND_BASE_400, COLOR_BACKGROUND_BASE_500, COLOR_BACKGROUND_BASE_600, COLOR_BACKGROUND_BASE_700, COLOR_BACKGROUND_BASE_800, COLOR_BACKGROUND_BASE_900, COLOR_BACKGROUND_PRIMARY_100, COLOR_BACKGROUND_PRIMARY_200, COLOR_BACKGROUND_PRIMARY_300, COLOR_BACKGROUND_PRIMARY_400, COLOR_BACKGROUND_PRIMARY_500, COLOR_BACKGROUND_PRIMARY_600, COLOR_BACKGROUND_PRIMARY_700, COLOR_BACKGROUND_PRIMARY_800, COLOR_BACKGROUND_PRIMARY_900, COLOR_BACKGROUND_ACCENT_100, COLOR_BACKGROUND_ACCENT_200, COLOR_BACKGROUND_ACCENT_300, COLOR_BACKGROUND_ACCENT_400, COLOR_BACKGROUND_ACCENT_500, COLOR_BACKGROUND_ACCENT_600, COLOR_BACKGROUND_ACCENT_700, COLOR_BACKGROUND_ACCENT_800, COLOR_BACKGROUND_ACCENT_900, COLOR_BORDER_BASE_100, COLOR_BORDER_BASE_200, COLOR_BORDER_BASE_300, COLOR_BORDER_BASE_400, COLOR_BORDER_BASE_500, COLOR_BORDER_BASE_600, COLOR_BORDER_BASE_700, COLOR_BORDER_BASE_800, COLOR_BORDER_BASE_900, COLOR_FOREGROUND_BASE_100, COLOR_FOREGROUND_BASE_200, COLOR_FOREGROUND_BASE_300, COLOR_FOREGROUND_BASE_400, COLOR_FOREGROUND_BASE_500, COLOR_FOREGROUND_BASE_600, COLOR_FOREGROUND_BASE_700, COLOR_FOREGROUND_BASE_800, COLOR_FOREGROUND_BASE_900, COLOR_FOREGROUND_FAILURE_100, COLOR_FOREGROUND_FAILURE_200, COLOR_FOREGROUND_FAILURE_300, COLOR_FOREGROUND_FAILURE_400, COLOR_FOREGROUND_FAILURE_500, COLOR_FOREGROUND_FAILURE_600, COLOR_FOREGROUND_FAILURE_700, COLOR_FOREGROUND_FAILURE_800, COLOR_FOREGROUND_FAILURE_900, COLOR_FOREGROUND_INVERSE_100, COLOR_FOREGROUND_INVERSE_200, COLOR_FOREGROUND_INVERSE_300, COLOR_FOREGROUND_INVERSE_400, COLOR_FOREGROUND_INVERSE_500, COLOR_FOREGROUND_INVERSE_600, COLOR_FOREGROUND_INVERSE_700, COLOR_FOREGROUND_INVERSE_800, COLOR_FOREGROUND_INVERSE_900, } from './color';
+export { COLOR_BACKGROUND_BASE_100, COLOR_BACKGROUND_BASE_200, COLOR_BACKGROUND_BASE_300, COLOR_BACKGROUND_BASE_400, COLOR_BACKGROUND_BASE_500, COLOR_BACKGROUND_BASE_600, COLOR_BACKGROUND_BASE_700, COLOR_BACKGROUND_BASE_800, COLOR_BACKGROUND_BASE_900, COLOR_BACKGROUND_PRIMARY_100, COLOR_BACKGROUND_PRIMARY_200, COLOR_BACKGROUND_PRIMARY_300, COLOR_BACKGROUND_PRIMARY_400, COLOR_BACKGROUND_PRIMARY_500, COLOR_BACKGROUND_PRIMARY_600, COLOR_BACKGROUND_PRIMARY_700, COLOR_BACKGROUND_PRIMARY_800, COLOR_BACKGROUND_PRIMARY_900, COLOR_BACKGROUND_ACCENT_100, COLOR_BACKGROUND_ACCENT_200, COLOR_BACKGROUND_ACCENT_300, COLOR_BACKGROUND_ACCENT_400, COLOR_BACKGROUND_ACCENT_500, COLOR_BACKGROUND_ACCENT_600, COLOR_BACKGROUND_ACCENT_700, COLOR_BACKGROUND_ACCENT_800, COLOR_BACKGROUND_ACCENT_900, COLOR_BACKGROUND_SUBACCENT_100, COLOR_BACKGROUND_SUBACCENT_200, COLOR_BACKGROUND_SUBACCENT_300, COLOR_BACKGROUND_SUBACCENT_400, COLOR_BACKGROUND_SUBACCENT_500, COLOR_BACKGROUND_SUBACCENT_600, COLOR_BACKGROUND_SUBACCENT_700, COLOR_BACKGROUND_SUBACCENT_800, COLOR_BACKGROUND_SUBACCENT_900, COLOR_BORDER_BASE_100, COLOR_BORDER_BASE_200, COLOR_BORDER_BASE_300, COLOR_BORDER_BASE_400, COLOR_BORDER_BASE_500, COLOR_BORDER_BASE_600, COLOR_BORDER_BASE_700, COLOR_BORDER_BASE_800, COLOR_BORDER_BASE_900, COLOR_FOREGROUND_BASE_100, COLOR_FOREGROUND_BASE_200, COLOR_FOREGROUND_BASE_300, COLOR_FOREGROUND_BASE_400, COLOR_FOREGROUND_BASE_500, COLOR_FOREGROUND_BASE_600, COLOR_FOREGROUND_BASE_700, COLOR_FOREGROUND_BASE_800, COLOR_FOREGROUND_BASE_900, COLOR_FOREGROUND_FAILURE_100, COLOR_FOREGROUND_FAILURE_200, COLOR_FOREGROUND_FAILURE_300, COLOR_FOREGROUND_FAILURE_400, COLOR_FOREGROUND_FAILURE_500, COLOR_FOREGROUND_FAILURE_600, COLOR_FOREGROUND_FAILURE_700, COLOR_FOREGROUND_FAILURE_800, COLOR_FOREGROUND_FAILURE_900, COLOR_FOREGROUND_INVERSE_100, COLOR_FOREGROUND_INVERSE_200, COLOR_FOREGROUND_INVERSE_300, COLOR_FOREGROUND_INVERSE_400, COLOR_FOREGROUND_INVERSE_500, COLOR_FOREGROUND_INVERSE_600, COLOR_FOREGROUND_INVERSE_700, COLOR_FOREGROUND_INVERSE_800, COLOR_FOREGROUND_INVERSE_900, } from './color';
 export { DURATION_BASE_LG, DURATION_BASE_MD, DURATION_BASE_SM, } from './duration';
 export { FONT_FAMILY_BASE, FONT_FAMILY_TYPOGRAPHIC, FONT_SIZE_BASE_LG, FONT_SIZE_BASE_MD, FONT_SIZE_BASE_SM, FONT_SIZE_BASE_X2L, FONT_SIZE_BASE_X2S, FONT_SIZE_BASE_X3L, FONT_SIZE_BASE_X4L, FONT_SIZE_BASE_X5L, FONT_SIZE_BASE_X6L, FONT_SIZE_BASE_XL, FONT_SIZE_BASE_XS, FONT_WEIGHT_BASE_BLACK, FONT_WEIGHT_BASE_BOLD, FONT_WEIGHT_BASE_EXTRABOLD, FONT_WEIGHT_BASE_EXTRALIGHT, FONT_WEIGHT_BASE_LIGHT, FONT_WEIGHT_BASE_MEDIUM, FONT_WEIGHT_BASE_REGULAR, FONT_WEIGHT_BASE_SEMIBOLD, FONT_WEIGHT_BASE_THIN, } from './font';
 export { ICON_SIZE_BASE_LG, ICON_SIZE_BASE_MD, ICON_SIZE_BASE_SM } from './icon';

package/build/contexts/theme/hooks/use-theme-style-sheet.d.ts

@@ -80,6 +80,33 @@ export declare const useThemeStyleSheet: () => {
     colorBackgroundAccent900: {
         backgroundColor: import("../../..").Color;
     };
+    colorBackgroundSubaccent100: {
+        backgroundColor: import("../../..").Color;
+    };
+    colorBackgroundSubaccent200: {
+        backgroundColor: import("../../..").Color;
+    };
+    colorBackgroundSubaccent300: {
+        backgroundColor: import("../../..").Color;
+    };
+    colorBackgroundSubaccent400: {
+        backgroundColor: import("../../..").Color;
+    };
+    colorBackgroundSubaccent500: {
+        backgroundColor: import("../../..").Color;
+    };
+    colorBackgroundSubaccent600: {
+        backgroundColor: import("../../..").Color;
+    };
+    colorBackgroundSubaccent700: {
+        backgroundColor: import("../../..").Color;
+    };
+    colorBackgroundSubaccent800: {
+        backgroundColor: import("../../..").Color;
+    };
+    colorBackgroundSubaccent900: {
+        backgroundColor: import("../../..").Color;
+    };
     colorBorderBase100: {
         borderColor: import("../../..").Color;
     };

package/build/contexts/theme/theme.types.d.ts

@@ -9,92 +9,92 @@ import type { FunctionComponent, PropsWithChildren } from 'react';
 export interface ThemeContextValue {
     /**
      * Least contrast base background color.
-     * @default rgb(198,198,202)
+     * @default rgb(215,215,220)
      */
     colorBackgroundBase100: Color;
     /**
      * Dim base background color.
-     * @default rgb(212,212,216)
+     * @default rgb(220,220,225)
      */
     colorBackgroundBase200: Color;
     /**
      * Mix of dim and muted base background color.
-     * @default rgb(216,216,228)
+     * @default rgb(225,225,230)
      */
     colorBackgroundBase300: Color;
     /**
      * Muted base background color.
-     * @default rgb(218,218,234)
+     * @default rgb(230,230,235)
      */
     colorBackgroundBase400: Color;
     /**
      * Mix of muted and subtle base background color.
-     * @default rgb(224,224,238)
+     * @default rgb(235,235,240)
      */
     colorBackgroundBase500: Color;
     /**
      * Subtle base background color.
-     * @default rgb(244,244,245)
+     * @default rgb(240,240,245)
      */
     colorBackgroundBase600: Color;
     /**
      * Mix of subtle and default base background color.
-     * @default rgb(247,247,249)
+     * @default rgb(245,245,250)
      */
     colorBackgroundBase700: Color;
     /**
      * Base default interface background color.
-     * @default rgb(249,249,250)
+     * @default rgb(250,250,255)
      */
     colorBackgroundBase800: Color;
     /**
      * Most contrast base background color.
-     * @default rgb(254,254,255)
+     * @default rgb(255,255,255)
      */
     colorBackgroundBase900: Color;
     /**
      * Least contrast primary background color.
-     * @default rgb(102,102,116)
+     * @default rgb(40,40,45)
      */
     colorBackgroundPrimary100: Color;
     /**
      * Dim primary background color.
-     * @default rgb(82,82,92)
+     * @default rgb(35,35,40)
      */
     colorBackgroundPrimary200: Color;
     /**
      * Mix of dim and muted primary background color.
-     * @default rgb(74,74,88)
+     * @default rgb(30,30,35)
      */
     colorBackgroundPrimary300: Color;
     /**
      * Muted primary background color.
-     * @default rgb(63,63,70)
+     * @default rgb(25,25,30)
      */
     colorBackgroundPrimary400: Color;
     /**
      * Mix of muted and subtle primary background color.
-     * @default rgb(49,49,56)
+     * @default rgb(20,20,25)
      */
     colorBackgroundPrimary500: Color;
     /**
      * Subtle primary background color.
-     * @default rgb(39,39,42)
+     * @default rgb(15,15,20)
      */
     colorBackgroundPrimary600: Color;
     /**
      * Mix of subtle and default primary background color.
-     * @default rgb(30,30,34)
+     * @default rgb(10,10,15)
      */
     colorBackgroundPrimary700: Color;
     /**
      * Primary default background color.
-     * @default rgb(24,24,27)
+     * @default rgb(5,5,10)
      */
     colorBackgroundPrimary800: Color;
     /**
      * Most contrast primary background color.
-     * @default rgb(6,6,14)
+     * @default rgb(0,0,5)
      */
     colorBackgroundPrimary900: Color;
     /**
@@ -142,49 +142,94 @@ export interface ThemeContextValue {
      * @default rgb(50,130,200)
      */
     colorBackgroundAccent900: Color;
+    /**
+     * Least contrast subaccent background color.
+     * @default rgb(215,245,235)
+     */
+    colorBackgroundSubaccent100: Color;
+    /**
+     * Dim subaccent background color.
+     * @default rgb(200,240,225)
+     */
+    colorBackgroundSubaccent200: Color;
+    /**
+     * Mix of dim and muted subaccent background color.
+     * @default rgb(185,235,215)
+     */
+    colorBackgroundSubaccent300: Color;
+    /**
+     * Muted subaccent background color.
+     * @default rgb(170,230,205)
+     */
+    colorBackgroundSubaccent400: Color;
+    /**
+     * Mix of muted and subtle subaccent background color.
+     * @default rgb(155,225,195)
+     */
+    colorBackgroundSubaccent500: Color;
+    /**
+     * Subtle subaccent background color.
+     * @default rgb(145,222,190)
+     */
+    colorBackgroundSubaccent600: Color;
+    /**
+     * Mix of subtle and default subaccent background color.
+     * @default rgb(135,218,185)
+     */
+    colorBackgroundSubaccent700: Color;
+    /**
+     * Subaccent default background color.
+     * @default rgb(125,215,180)
+     */
+    colorBackgroundSubaccent800: Color;
+    /**
+     * Most contrast subaccent background color.
+     * @default rgb(100,195,160)
+     */
+    colorBackgroundSubaccent900: Color;
     /**
      * Least contrast base border color.
-     * @default rgb(253,252,254)
+     * @default rgb(235,235,240)
      */
     colorBorderBase100: Color;
     /**
      * Dim base border color.
-     * @default rgb(249,249,250)
+     * @default rgb(230,230,235)
      */
     colorBorderBase200: Color;
     /**
      * Mix of dim and muted base border color.
-     * @default rgb(247,247,249)
+     * @default rgb(225,225,230)
      */
     colorBorderBase300: Color;
     /**
      * Muted base border color.
-     * @default rgb(244,244,245)
+     * @default rgb(220,220,225)
      */
     colorBorderBase400: Color;
     /**
      * Mix of muted and subtle base border color.
-     * @default rgb(224,224,238)
+     * @default rgb(215,215,220)
      */
     colorBorderBase500: Color;
     /**
      * Subtle base border color.
-     * @default rgb(218,218,234)
+     * @default rgb(210,210,215)
      */
     colorBorderBase600: Color;
     /**
      * Mix of subtle and default base border color.
-     * @default rgb(216,216,228)
+     * @default rgb(205,205,210)
      */
     colorBorderBase700: Color;
     /**
      * Base default border color.
-     * @default rgb(212,212,216)
+     * @default rgb(200,200,205)
      */
     colorBorderBase800: Color;
     /**
      * Most contrast base border color.
-     * @default rgb(198,198,202)
+     * @default rgb(195,195,200)
      */
     colorBorderBase900: Color;
     /**