creactive 0.0.131 → 0.0.133

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

@@ -0,0 +1,2 @@
+export { Text } from './text';
+export type { TextComponent, TextProperties, TextReference } from './text';

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

@@ -0,0 +1,36 @@
+/**
+ * Supported text color constants.
+ * Part of theme colors, suitable for text coloring.
+ * Transparent extra color constant is also included.
+ * @see Text.Color
+ */
+export declare enum TextColor {
+    BASE_100 = 0,
+    BASE_200 = 1,
+    BASE_300 = 2,
+    BASE_400 = 3,
+    BASE_500 = 4,
+    BASE_600 = 5,
+    BASE_700 = 6,
+    BASE_800 = 7,
+    BASE_900 = 8,
+    INVERSE_100 = 9,
+    INVERSE_200 = 10,
+    INVERSE_300 = 11,
+    INVERSE_400 = 12,
+    INVERSE_500 = 13,
+    INVERSE_600 = 14,
+    INVERSE_700 = 15,
+    INVERSE_800 = 16,
+    INVERSE_900 = 17,
+    FAILURE_100 = 18,
+    FAILURE_200 = 19,
+    FAILURE_300 = 20,
+    FAILURE_400 = 21,
+    FAILURE_500 = 22,
+    FAILURE_600 = 23,
+    FAILURE_700 = 24,
+    FAILURE_800 = 25,
+    FAILURE_900 = 26,
+    TRANSPARENT = 27
+}

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

@@ -0,0 +1,42 @@
+/**
+ * Enumerated text font family style constants.
+ * Most theme colors, suitable for text component.
+ * @see Text.FontFamily
+ */
+export declare enum TextFontFamily {
+    BASE = 0,
+    TYPOGRAPHIC = 1
+}
+/**
+ * Supported text font weight constants.
+ * All theme font weights used by text component.
+ * @see Text.FontWeight
+ */
+export declare enum TextFontWeight {
+    THIN = 0,
+    EXTRA_LIGHT = 1,
+    LIGHT = 2,
+    REGULAR = 3,
+    MEDIUM = 4,
+    SEMIBOLD = 5,
+    BOLD = 6,
+    EXTRA_BOLD = 7,
+    BLACK = 8
+}
+/**
+ * Supported text font size constants.
+ * All theme font sizes used by text component.
+ * @see Text.FontSize
+ */
+export declare enum TextFontSize {
+    X2S = 0,
+    XS = 1,
+    SM = 2,
+    MD = 3,
+    LG = 4,
+    XL = 5,
+    X2L = 6,
+    X3L = 7,
+    X4L = 8,
+    X5L = 9
+}

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

@@ -0,0 +1,4 @@
+export { TextColor } from './color';
+export { TextFontFamily, TextFontSize, TextFontWeight } from './font';
+export { TextTag } from './tag';
+export { TextAlign, TextDecoration, TextLineHeight } from './text';

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

@@ -0,0 +1,16 @@
+/**
+ * Enumerated text tag constants.
+ * Allows to control HTML tag to render.
+ * Makes no sense on native platforms.
+ * @see Text.Tag
+ */
+export declare enum TextTag {
+    H1 = 0,
+    H2 = 1,
+    H3 = 2,
+    H4 = 3,
+    H5 = 4,
+    H6 = 5,
+    P = 6,
+    SPAN = 7
+}

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

@@ -0,0 +1,32 @@
+/**
+ * Supported text alignment constants.
+ * Controls horizontal text alignment within container.
+ * @see Text.TextAlign
+ */
+export declare enum TextAlign {
+    LEFT = 0,
+    CENTER = 1,
+    RIGHT = 2
+}
+/**
+ * Supported text decoration constants.
+ * Controls text styling effects like underlines.
+ * @see Text.TextDecoration
+ */
+export declare enum TextDecoration {
+    NONE = 0,
+    UNDERLINE = 1
+}
+/**
+ * Supported text line height constants.
+ * Controls themed vertical spacing between text lines.
+ * @see Text.LineHeight
+ */
+export declare enum TextLineHeight {
+    NONE = 0,
+    TIGHT = 1,
+    SNUG = 2,
+    NORMAL = 3,
+    RELAXED = 4,
+    LOOSE = 5
+}

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

@@ -0,0 +1,3 @@
+import type { TextComponent, TextProperties, TextReference } from './text.types';
+export declare const Text: TextComponent;
+export type { TextComponent, TextProperties, TextReference };

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

@@ -0,0 +1,111 @@
+import type { Fraction } from '../../../helpers';
+import type { Color, FontWeight } from '../../../types';
+import type { ForwardRefExoticComponent, PropsWithChildren, PropsWithoutRef, RefAttributes } from 'react';
+import type { TextAlign, TextColor, TextDecoration, TextFontFamily, TextFontSize, TextFontWeight, TextLineHeight, TextTag } from './constants';
+/**
+ * Provided by component reference object measure callback.
+ * Allows to access component layout element position and size.
+ * TODO: Comment arguments...
+ */
+export type TextMeasureCallback = (x: number, y: number, width: number, height: number) => void;
+/**
+ * Text component reference object.
+ * Allows to access text measurement method.
+ */
+export interface TextReference {
+    measure(callback: TextMeasureCallback): void;
+}
+export interface TextProperties extends PropsWithChildren {
+    /**
+     * Allows to select text component in tests.
+     * @default undefined
+     */
+    testId?: string;
+    /**
+     * Allows to control HTML tag to render.
+     * Makes no sense on native platforms.
+     * @see Text.Tag
+     * @default undefined - renders into SPAN element
+     */
+    tag?: TextTag;
+    /**
+     * Inner text will be aligned according to this value.
+     * @see Text.Align
+     * @default Text.Align.LEFT
+     */
+    textAlign?: TextAlign;
+    /**
+     * Text decoration.
+     * @see Text.Decoration
+     * @default Text.Decoration.NONE
+     */
+    textDecoration?: TextDecoration;
+    /**
+     * Themed font family.
+     * @see Text.FontFamily
+     * @default Text.FontFamily.BASE
+     */
+    fontFamily?: TextFontFamily;
+    /**
+     * Themed font weight.
+     * @see Text.FontWeight
+     * @default Text.FontWeight.REGULAR
+     */
+    fontWeight?: TextFontWeight;
+    /**
+     * Themed font size.
+     * @see Text.FontSize
+     * @default Text.FontSize.MD
+     */
+    fontSize?: TextFontSize;
+    /**
+     * Themed line heidht.
+     * @see Text.LineHeight
+     * @default Text.LineHeight.NORMAL
+     */
+    lineHeight?: TextLineHeight;
+    /**
+     * Maximum number of lines to display.
+     * @default undefined
+     */
+    maxLines?: number;
+    /**
+     * Themed or transparent color.
+     * @see Text.Color
+     * @default Text.Color.BASE_800
+     */
+    color?: TextColor;
+    /**
+     * Text opacity.
+     * @see Fraction
+     * @default undefined
+     */
+    opacity?: Fraction;
+}
+export type TextComponent = ForwardRefExoticComponent<PropsWithoutRef<TextProperties> & RefAttributes<TextReference>> & {
+    Tag: Record<keyof typeof TextTag, TextTag>;
+    TextAlign: Record<keyof typeof TextAlign, TextAlign>;
+    TextDecoration: Record<keyof typeof TextDecoration, TextDecoration>;
+    FontFamily: Record<keyof typeof TextFontFamily, TextFontFamily>;
+    FontWeight: Record<keyof typeof TextFontWeight, TextFontWeight>;
+    FontSize: Record<keyof typeof TextFontSize, TextFontSize>;
+    LineHeight: Record<keyof typeof TextLineHeight, TextLineHeight>;
+    Color: Record<keyof typeof TextColor, TextColor>;
+};
+/**
+ * Styled text properties type.
+ * Used to render text component on web.
+ */
+export type TextStyledProperties = {
+    css: {
+        textAlign: 'left' | 'center' | 'right';
+        textDecoration: 'none' | 'underline';
+        fontFamily: string;
+        fontWeight: FontWeight;
+        fontSize: number;
+        lineHeight: number;
+        maxLines: number;
+        color: Color;
+        opacity?: number;
+    };
+};

package/build/components/index.d.ts

@@ -0,0 +1,8 @@
+export { Gradient } from '../components/gradient';
+export type { GradientLinearComponent, GradientLinearProps, GradientObject, GradientStopComponent, GradientStopProps, } from '../components/gradient';
+export { Overlay } from '../components/overlay';
+export type { OverlayComponent, OverlayProps } from '../components/overlay';
+export { View } from '../components/view';
+export type { ViewComponent, ViewLayoutEvent, ViewProps, } from '../components/view';
+export { Text } from './atoms';
+export type { TextComponent, TextProperties, TextReference } from './atoms';

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

@@ -1,3 +1,3 @@
-import type { TextComponent, TextProps } from './text.types';
+import type { TextComponent, TextProps, TextRef } from './text.types';
 export declare const Text: TextComponent;
-export type { TextComponent, TextProps };
+export type { TextComponent, TextProps, TextRef };

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

@@ -1,7 +1,15 @@
 import type { Fraction } from '../../helpers';
 import type { Color, FontWeight } from '../../types';
-import type { FunctionComponent, PropsWithChildren } from 'react';
+import type { ForwardRefExoticComponent, PropsWithChildren, PropsWithoutRef, RefAttributes } from 'react';
 import type { TextAlign, TextColor, TextDecoration, TextFontFamily, TextFontSize, TextFontWeight, TextLineHeight, TextTag } from './constants';
+export type TextMeasureCallback = (x: number, y: number, width: number, height: number) => void;
+/**
+ * Text component reference object.
+ * Allows to access text measurement method.
+ */
+export interface TextRef {
+    measure(callback: TextMeasureCallback): void;
+}
 export interface TextProps extends PropsWithChildren {
     /**
      * Allows to control HTML tag to render.
@@ -64,7 +72,7 @@ export interface TextProps extends PropsWithChildren {
      */
     opacity?: Fraction;
 }
-export type TextComponent = FunctionComponent<TextProps> & {
+export type TextComponent = ForwardRefExoticComponent<PropsWithoutRef<TextProps> & RefAttributes<TextRef>> & {
     Tag: Record<keyof typeof TextTag, TextTag>;
     Align: Record<keyof typeof TextAlign, TextAlign>;
     Decoration: Record<keyof typeof TextDecoration, TextDecoration>;

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

@@ -25,30 +25,30 @@ export declare const COLOR_BORDER_BASE_600 = "rgb(218,218,234)";
 export declare const COLOR_BORDER_BASE_700 = "rgb(216,216,228)";
 export declare const COLOR_BORDER_BASE_800 = "rgb(212,212,216)";
 export declare const COLOR_BORDER_BASE_900 = "rgb(198,198,202)";
-export declare const COLOR_FOREGROUND_BASE_100 = "rgb(102,102,116)";
-export declare const COLOR_FOREGROUND_BASE_200 = "rgb(82,82,92)";
-export declare const COLOR_FOREGROUND_BASE_300 = "rgb(74,74,88)";
-export declare const COLOR_FOREGROUND_BASE_400 = "rgb(63,63,70)";
-export declare const COLOR_FOREGROUND_BASE_500 = "rgb(49,49,56)";
-export declare const COLOR_FOREGROUND_BASE_600 = "rgb(39,39,42)";
-export declare const COLOR_FOREGROUND_BASE_700 = "rgb(30,30,34)";
-export declare const COLOR_FOREGROUND_BASE_800 = "rgb(24,24,27)";
-export declare const COLOR_FOREGROUND_BASE_900 = "rgb(6,6,14)";
-export declare const COLOR_FOREGROUND_INVERSE_100 = "rgb(198,198,202)";
-export declare const COLOR_FOREGROUND_INVERSE_200 = "rgb(212,212,216)";
-export declare const COLOR_FOREGROUND_INVERSE_300 = "rgb(216,216,228)";
-export declare const COLOR_FOREGROUND_INVERSE_400 = "rgb(218,218,234)";
-export declare const COLOR_FOREGROUND_INVERSE_500 = "rgb(224,224,238)";
-export declare const COLOR_FOREGROUND_INVERSE_600 = "rgb(244,244,245)";
-export declare const COLOR_FOREGROUND_INVERSE_700 = "rgb(247,247,249)";
-export declare const COLOR_FOREGROUND_INVERSE_800 = "rgb(249,249,250)";
-export declare const COLOR_FOREGROUND_INVERSE_900 = "rgb(254,254,255)";
-export declare const COLOR_FOREGROUND_FAILURE_100 = "rgb(244,226,226)";
-export declare const COLOR_FOREGROUND_FAILURE_200 = "rgb(234,202,202)";
-export declare const COLOR_FOREGROUND_FAILURE_300 = "rgb(222,165,165)";
-export declare const COLOR_FOREGROUND_FAILURE_400 = "rgb(214,113,113)";
-export declare const COLOR_FOREGROUND_FAILURE_500 = "rgb(202,68,68)";
-export declare const COLOR_FOREGROUND_FAILURE_600 = "rgb(184,38,38)";
-export declare const COLOR_FOREGROUND_FAILURE_700 = "rgb(168,28,28)";
-export declare const COLOR_FOREGROUND_FAILURE_800 = "rgb(153,27,27)";
-export declare const COLOR_FOREGROUND_FAILURE_900 = "rgb(127,29,29)";
+export declare const COLOR_FOREGROUND_BASE_100 = "rgb(200,200,205)";
+export declare const COLOR_FOREGROUND_BASE_200 = "rgb(175,175,180)";
+export declare const COLOR_FOREGROUND_BASE_300 = "rgb(150,150,155)";
+export declare const COLOR_FOREGROUND_BASE_400 = "rgb(125,125,130)";
+export declare const COLOR_FOREGROUND_BASE_500 = "rgb(100,100,105)";
+export declare const COLOR_FOREGROUND_BASE_600 = "rgb(75,75,80)";
+export declare const COLOR_FOREGROUND_BASE_700 = "rgb(50,50,55)";
+export declare const COLOR_FOREGROUND_BASE_800 = "rgb(25,25,30)";
+export declare const COLOR_FOREGROUND_BASE_900 = "rgb(0,0,5)";
+export declare const COLOR_FOREGROUND_INVERSE_100 = "rgb(50,50,55)";
+export declare const COLOR_FOREGROUND_INVERSE_200 = "rgb(75,75,80)";
+export declare const COLOR_FOREGROUND_INVERSE_300 = "rgb(100,100,105)";
+export declare const COLOR_FOREGROUND_INVERSE_400 = "rgb(125,125,130)";
+export declare const COLOR_FOREGROUND_INVERSE_500 = "rgb(150,150,155)";
+export declare const COLOR_FOREGROUND_INVERSE_600 = "rgb(175,175,180)";
+export declare const COLOR_FOREGROUND_INVERSE_700 = "rgb(200,200,205)";
+export declare const COLOR_FOREGROUND_INVERSE_800 = "rgb(225,225,230)";
+export declare const COLOR_FOREGROUND_INVERSE_900 = "rgb(250,250,255)";
+export declare const COLOR_FOREGROUND_FAILURE_100 = "rgb(225,200,200)";
+export declare const COLOR_FOREGROUND_FAILURE_200 = "rgb(220,175,175)";
+export declare const COLOR_FOREGROUND_FAILURE_300 = "rgb(215,150,150)";
+export declare const COLOR_FOREGROUND_FAILURE_400 = "rgb(210,125,125)";
+export declare const COLOR_FOREGROUND_FAILURE_500 = "rgb(205,100,100)";
+export declare const COLOR_FOREGROUND_FAILURE_600 = "rgb(200,75,75)";
+export declare const COLOR_FOREGROUND_FAILURE_700 = "rgb(195,50,50)";
+export declare const COLOR_FOREGROUND_FAILURE_800 = "rgb(190,25,25)";
+export declare const COLOR_FOREGROUND_FAILURE_900 = "rgb(185,0,0)";

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

@@ -144,137 +144,137 @@ export interface ThemeContextValue {
     colorBorderBase900: Color;
     /**
      * Least contrast base foreground color token.
-     * @default rgb(102,102,116)
+     * @default rgb(200,200,205)
      */
     colorForegroundBase100: Color;
     /**
      * Dim base foreground color.
-     * @default rgb(82,82,92)
+     * @default rgb(175,175,180)
      */
     colorForegroundBase200: Color;
     /**
      * Mix of dim and muted base foreground color.
-     * @default rgb(74,74,88)
+     * @default rgb(150,150,155)
      */
     colorForegroundBase300: Color;
     /**
      * Muted base foreground color.
-     * @default rgb(63,63,70)
+     * @default rgb(125,125,130)
      */
     colorForegroundBase400: Color;
     /**
      * Mix of muted and subtle base foreground color.
-     * @default rgb(49,49,56)
+     * @default rgb(100,100,105)
      */
     colorForegroundBase500: Color;
     /**
      * Subtle base foreground color.
-     * @default rgb(39,39,42)
+     * @default rgb(75,75,80)
      */
     colorForegroundBase600: Color;
     /**
      * Mix of subtle and default base foreground color.
-     * @default rgb(30,30,34)
+     * @default rgb(50,50,55)
      */
     colorForegroundBase700: Color;
     /**
      * Base default foreground color.
-     * @default rgb(24,24,27)
+     * @default rgb(25,25,30)
      */
     colorForegroundBase800: Color;
     /**
      * Most contrast base foreground color.
-     * @default rgb(6,6,14)
+     * @default rgb(0,0,5)
      */
     colorForegroundBase900: Color;
     /**
      * Least contrast inverse foreground color.
-     * @default rgb(198,198,202)
+     * @default rgb(50,50,55)
      */
     colorForegroundInverse100: Color;
     /**
      * Dim inverse foreground color.
-     * @default rgb(212,212,216)
+     * @default rgb(75,75,80)
      */
     colorForegroundInverse200: Color;
     /**
      * Mix of dim and muted inverse foreground color.
-     * @default rgb(216,216,228)
+     * @default rgb(100,100,105)
      */
     colorForegroundInverse300: Color;
     /**
      * Muted inverse foreground color.
-     * @default rgb(218,218,234)
+     * @default rgb(125,125,130)
      */
     colorForegroundInverse400: Color;
     /**
      * Mix of muted and subtle inverse foreground color.
-     * @default rgb(224,224,238)
+     * @default rgb(150,150,155)
      */
     colorForegroundInverse500: Color;
     /**
      * Subtle inverse foreground color.
-     * @default rgb(244,244,245)
+     * @default rgb(175,175,180)
      */
     colorForegroundInverse600: Color;
     /**
      * Mix of subtle and default inverse foreground color.
-     * @default rgb(247,247,249)
+     * @default rgb(200,200,205)
      */
     colorForegroundInverse700: Color;
     /**
      * Inverse default foreground color.
-     * @default rgb(249,249,250)
+     * @default rgb(225,225,230)
      */
     colorForegroundInverse800: Color;
     /**
      * Most contrast inverse foreground color.
-     * @default rgb(254,254,255)
+     * @default rgb(250,250,255)
      */
     colorForegroundInverse900: Color;
     /**
      * Least contrast failure foreground color.
-     * @default rgb(254,226,226)
+     * @default rgb(225,200,200)
      */
     colorForegroundFailure100: Color;
     /**
      * Dim failure foreground color.
-     * @default rgb(254,202,202)
+     * @default rgb(220,175,175)
      */
     colorForegroundFailure200: Color;
     /**
      * Mix of dim and muted failure foreground color.
-     * @default rgb(252,165,165)
+     * @default rgb(215,150,150)
      */
     colorForegroundFailure300: Color;
     /**
      * Muted failure foreground color.
-     * @default rgb(248,113,113)
+     * @default rgb(210,125,125)
      */
     colorForegroundFailure400: Color;
     /**
      * Mix of muted and subtle failure foreground color.
-     * @default rgb(239,68,68)
+     * @default rgb(205,100,100)
      */
     colorForegroundFailure500: Color;
     /**
      * Subtle failure foreground color.
-     * @default rgb(220,38,38)
+     * @default rgb(200,75,75)
      */
     colorForegroundFailure600: Color;
     /**
      * Mix of subtle and default failure foreground color.
-     * @default rgb(185,28,28)
+     * @default rgb(195,50,50)
      */
     colorForegroundFailure700: Color;
     /**
      * Failure default foreground color.
-     * @default rgb(153,27,27)
+     * @default rgb(190,25,25)
      */
     colorForegroundFailure800: Color;
     /**
      * Most contrast failure foreground color.
-     * @default rgb(127,29,29)
+     * @default rgb(185,0,0)
      */
     colorForegroundFailure900: Color;
     /**