creactive 0.0.35 → 0.0.37

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

@@ -0,0 +1,17 @@
+/**
+ * Supported text color constants.
+ * Part of theme colors, suitable for text coloring.
+ * Some extra constants like transparent for example are also included.
+ */
+export declare enum TextColor {
+    TRANSPARENT = 0,
+    FOREGROUND_100 = 1,
+    FOREGROUND_200 = 2,
+    FOREGROUND_300 = 3,
+    FOREGROUND_400 = 4,
+    FOREGROUND_500 = 5,
+    FOREGROUND_600 = 6,
+    FOREGROUND_700 = 7,
+    FOREGROUND_800 = 8,
+    FOREGROUND_900 = 9
+}

package/build/{default/components → components}/text/constants/font.d.ts

@@ -1,22 +1,21 @@
 /**
- * Supported text font weights enum.
+ * Supported by text component font weights enum.
  * Should be used to control the weight of the text.
- * This enum is not exported, use Text.FontWeight to access available types.
  */
 export declare enum TextFontWeight {
     THIN = 0,
     EXTRA_LIGHT = 1,
     LIGHT = 2,
     REGULAR = 3,
-    SEMIBOLD = 4,
-    BOLD = 5,
-    EXTRA_BOLD = 6,
-    BLACK = 7
+    MEDIUM = 4,
+    SEMIBOLD = 5,
+    BOLD = 6,
+    EXTRA_BOLD = 7,
+    BLACK = 8
 }
 /**
  * Supported text font sizes enum.
  * Should be used to control the size of the text.
- * This enum is not exported, use Text.FontSize to access available types.
  */
 export declare enum TextFontSize {
     X2S = 0,

package/build/{web/components → components}/text/constants/index.d.ts

@@ -1,3 +1,5 @@
+export { TextColor } from './color';
 export { TextFontSize, TextFontWeight } from './font';
 export { TextRole } from './role';
+export { TextAlign, TextLineHeight } from './text';
 export { TEXT_TYPE_HEADING, TextType } from './type';

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

@@ -0,0 +1,21 @@
+/**
+ * Text align enum supported by compoent.
+ * Allows to control text alignment if required.
+ */
+export declare enum TextAlign {
+    LEFT = 0,
+    CENTER = 1,
+    RIGHT = 2
+}
+/**
+ * Available text line height enum.
+ * Should be used to control the line height of the text.
+ */
+export declare enum TextLineHeight {
+    NONE = 0,
+    TIGHT = 1,
+    SNUG = 2,
+    NORMAL = 3,
+    RELAXED = 4,
+    LOOSE = 5
+}

package/build/{web/components → components}/text/constants/type.d.ts

@@ -1,7 +1,6 @@
 /**
  * Supported specific text types enum.
  * Responsible for text appearance, accessibility and semantics.
- * This enum is not exported, use Text.Type to access available types.
  */
 export declare enum TextType {
     H1 = 0,
@@ -15,6 +14,6 @@ export declare enum TextType {
 /**
  * Types, that are considered as heading types.
  * We convert them into heading text role.
- * With This types we also use aria-levels
+ * This types comes with aria-level attribute.
  */
 export declare const TEXT_TYPE_HEADING: TextType[];

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

@@ -0,0 +1,53 @@
+import type { FunctionComponent, PropsWithChildren } from 'react';
+import type { TextAlign, TextColor, TextFontSize, TextFontWeight, TextLineHeight, TextType } from './constants';
+export interface TextProps extends PropsWithChildren {
+    /**
+     * Specific text type if required.
+     * Affects appearance, accessibility and semantics.
+     * Allows to control HTML element, that will be to rendered.
+     * @default undefined - renders into DIV element
+     */
+    type?: TextType;
+    /**
+     * Text component align control property.
+     * Inner text will be aligned according to this value.
+     * @default Text.Align.LEFT
+     */
+    align?: TextAlign;
+    /**
+     * Font weight property.
+     * Changes font weight, depending on theme.
+     * Uses base font weight tokens for mapping.
+     * @default Text.FontWeight.REGULAR
+     */
+    fontWeight?: TextFontWeight;
+    /**
+     * Specific text size if required.
+     * Will change text size, depending on theme.
+     * Uses base font size tokens for mapping.
+     * @default Text.FontSize.MD
+     */
+    fontSize?: TextFontSize;
+    /**
+     * Text line height property.
+     * Depends on configured theme token.
+     * Calculates using base font size and base line height ratio.
+     * @default Text.LineHeight.NONE
+     */
+    lineHeight?: TextLineHeight;
+    /**
+     * Specifying text color property.
+     * Allows to change color, depending on theme.
+     * Theme independent colors and values may be also available.
+     * @default Text.Color.FOREGROUND_800
+     */
+    color?: TextColor;
+}
+export type TextComponent = FunctionComponent<TextProps> & {
+    Type: Record<keyof typeof TextType, TextType>;
+    Align: Record<keyof typeof TextAlign, TextAlign>;
+    FontWeight: Record<keyof typeof TextFontWeight, TextFontWeight>;
+    FontSize: Record<keyof typeof TextFontSize, TextFontSize>;
+    LineHeight: Record<keyof typeof TextLineHeight, TextLineHeight>;
+    Color: Record<keyof typeof TextColor, TextColor>;
+};

package/build/constants/index.d.ts

@@ -0,0 +1 @@
+export { 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, FONT_FAMILY_BASE, 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_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, LINE_HEIGHT_BASE_LOOSE, LINE_HEIGHT_BASE_NONE, LINE_HEIGHT_BASE_NORMAL, LINE_HEIGHT_BASE_RELAXED, LINE_HEIGHT_BASE_SNUG, LINE_HEIGHT_BASE_TIGHT, } from '../constants/theme';

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

@@ -0,0 +1,13 @@
+/**
+ * Base foreground color constants.
+ * Use it for coloring text, icons and etc.
+ */
+export declare const COLOR_FOREGROUND_BASE_100 = "rgb(244,244,245)";
+export declare const COLOR_FOREGROUND_BASE_200 = "rgb(228,228,231)";
+export declare const COLOR_FOREGROUND_BASE_300 = "rgb(212,212,216)";
+export declare const COLOR_FOREGROUND_BASE_400 = "rgb(159,159,169)";
+export declare const COLOR_FOREGROUND_BASE_500 = "rgb(113,113,123)";
+export declare const COLOR_FOREGROUND_BASE_600 = "rgb(82,82,92)";
+export declare const COLOR_FOREGROUND_BASE_700 = "rgb(63,63,70)";
+export declare const COLOR_FOREGROUND_BASE_800 = "rgb(39,39,42)";
+export declare const COLOR_FOREGROUND_BASE_900 = "rgb(24,24,27)";

package/build/{web/constants → constants}/theme/font.d.ts

@@ -14,6 +14,7 @@ export declare const FONT_WEIGHT_BASE_THIN = 100;
 export declare const FONT_WEIGHT_BASE_EXTRALIGHT = 200;
 export declare const FONT_WEIGHT_BASE_LIGHT = 300;
 export declare const FONT_WEIGHT_BASE_REGULAR = 400;
+export declare const FONT_WEIGHT_BASE_MEDIUM = 500;
 export declare const FONT_WEIGHT_BASE_SEMIBOLD = 600;
 export declare const FONT_WEIGHT_BASE_BOLD = 700;
 export declare const FONT_WEIGHT_BASE_EXTRABOLD = 800;

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

@@ -0,0 +1,3 @@
+export { 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, } from './color';
+export { FONT_FAMILY_BASE, 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_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 { LINE_HEIGHT_BASE_LOOSE, LINE_HEIGHT_BASE_NONE, LINE_HEIGHT_BASE_NORMAL, LINE_HEIGHT_BASE_RELAXED, LINE_HEIGHT_BASE_SNUG, LINE_HEIGHT_BASE_TIGHT, } from './text';

package/build/constants/theme/text.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Base text line height constants.
+ * Supposed to be used for styling text.
+ * It seems like we wont need an extra set of line heights.
+ * But we named them as base just in case also..
+ */
+export declare const LINE_HEIGHT_BASE_NONE = 1;
+export declare const LINE_HEIGHT_BASE_TIGHT = 1.25;
+export declare const LINE_HEIGHT_BASE_SNUG = 1.375;
+export declare const LINE_HEIGHT_BASE_NORMAL = 1.5;
+export declare const LINE_HEIGHT_BASE_RELAXED = 1.625;
+export declare const LINE_HEIGHT_BASE_LOOSE = 2;

package/build/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeContextProvider, useThemeContext } from '../contexts/theme';
+export type { ThemeColorRGB, ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, ThemeFontWeight, } from '../contexts/theme';

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

@@ -0,0 +1,2 @@
+export { ThemeContextProvider, useThemeContext } from './theme';
+export type { ThemeColorRGB, ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, ThemeFontWeight, } from './theme.types';

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

@@ -0,0 +1,219 @@
+import type { FunctionComponent, PropsWithChildren } from 'react';
+/**
+ * Theme RGB color type.
+ * Should be used to specify theme colors.
+ * Number instead of 0-255 union to avoid too complex union type.
+ */
+export type ThemeColorRGB = `rgb(${number},${number},${number})`;
+/**
+ * Theme font weight type.
+ * Should be used to specify theme font weight.
+ */
+export type ThemeFontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+/**
+ * Theme context value interface.
+ * Contains all theme tokens you may need.
+ * This tokens are used inside components for styling.
+ * This tokens can be also accesed via theme context outside.
+ */
+export interface ThemeContextValue {
+    /**
+     * Base foreground 100 color token.
+     * The least contrast color in the foreground palette.
+     * You are supposed to use it for almost invisible elements.
+     */
+    colorForegroundBase100: ThemeColorRGB;
+    /**
+     * Base foreground 200 color token.
+     * Still supposed to be almost invisible.
+     * Can be used to create som ierarchy illusion maybe.
+     */
+    colorForegroundBase200: ThemeColorRGB;
+    /**
+     * Base foreground 300 color token.
+     * For slightly readable text or elements.
+     */
+    colorForegroundBase300: ThemeColorRGB;
+    /**
+     * Base foreground 400 color token.
+     * A kind of secondary color for secondary elements.
+     * If your secondary element has two levels this color is for the second one.
+     */
+    colorForegroundBase400: ThemeColorRGB;
+    /**
+     * Base foreground 500 color token.
+     * Also good for secondary elements on less contrast background.
+     */
+    colorForegroundBase500: ThemeColorRGB;
+    /**
+     * Base foreground 600 color token.
+     * Ideal for secondary elements and less important text.
+     */
+    colorForegroundBase600: ThemeColorRGB;
+    /**
+     * Base foreground 700 color token.
+     * For default elements, placed on more contrast background.
+     * Is also suitable for just a little bit less contrast elements.
+     */
+    colorForegroundBase700: ThemeColorRGB;
+    /**
+     * Base foreground 800 color token.
+     * Used as default value for text component.
+     * Ideal for high-contrast text and key elements.
+     */
+    colorForegroundBase800: ThemeColorRGB;
+    /**
+     * Base foreground 900 color token.
+     * Almost the same sense as 800, but for less contrast backgrounds.
+     */
+    colorForegroundBase900: ThemeColorRGB;
+    /**
+     * Base font family token.
+     * Supposed to be used by most components.
+     * If you don't known what font family to use - use this one.
+     */
+    fontFamilyBase: string;
+    /**
+     * Base thin font weight token.
+     * Ideal for very delicate and decorative, large, elegant hero text.
+     */
+    fontWeightBaseThin: ThemeFontWeight;
+    /**
+     * Base extra-light font weight token.
+     * Use for large, airy headings or subtle interface elements.
+     * Slightly more readable than extra-thin, but still decorative.
+     */
+    fontWeightBaseExtraLight: ThemeFontWeight;
+    /**
+     * Base light font weight token.
+     * Suitable for subheadings, muted captions, and soft labels.
+     */
+    fontWeightBaseLight: ThemeFontWeight;
+    /**
+     * Base regular font weight token.
+     * For the most common text elements in your interface.
+     * When unsure about font weight, this is the default option.
+     */
+    fontWeightBaseRegular: ThemeFontWeight;
+    /**
+     * Base medium font weight token.
+     * Suitable for labels, buttons, and small subheadings.
+     * Slightly emphasized, providing better readability.
+     */
+    fontWeightBaseMedium: ThemeFontWeight;
+    /**
+     * Base semi-bold font weight token.
+     * Provides stronger emphasis without being overwhelming.
+     * Ideal for section headers, emphasized text, and card titles.
+     */
+    fontWeightBaseSemibold: ThemeFontWeight;
+    /**
+     * Base bold font weight token.
+     * For high emphasis on important elements.
+     * Use for main headings and strong call-to-action buttons.
+     */
+    fontWeightBaseBold: ThemeFontWeight;
+    /**
+     * Extra-bold font weight token.
+     * Perfect for promo banners and large impactful headings.
+     */
+    fontWeightBaseExtraBold: ThemeFontWeight;
+    /**
+     * Base black font weight token.
+     * Extreme emphasis for rare, dramatic cases.
+     * Great for headlines in posters and highly attention-grabbing elements.
+     */
+    fontWeightBaseBlack: ThemeFontWeight;
+    /**
+     * Base 2 times extra-small font size token.
+     * Use this size for tiny text elements like captions.
+     * It represents the smallest readable text in your interface.
+     */
+    fontSizeBaseX2S: number;
+    /**
+     * Base extra-small font size token.
+     * Suitable for subtitles or the smallest readable text, for example.
+     */
+    fontSizeBaseXS: number;
+    /**
+     * Base small font size token.
+     * Can be used for smaller labels or captions among medium text.
+     * Also suitable for titles in smaller 2x small text.
+     */
+    fontSizeBaseSM: number;
+    /**
+     * Base medium font size token.
+     * Intended for most text elements.
+     * If unsure about which font size to use, this is the default option.
+     */
+    fontSizeBaseMD: number;
+    /**
+     * Base large font size token.
+     * Suitable for fourth-level page titles.
+     * Can also be used for larger labels or captions among medium text.
+     */
+    fontSizeBaseLG: number;
+    /**
+     * Base extra-large font size token.
+     * Ideal for third-level page titles.
+     * Can also be used for larger labels or captions within medium text.
+     */
+    fontSizeBaseXL: number;
+    /**
+     * Base 2 times extra-large font size token.
+     * Typically used for second-level page titles.
+     */
+    fontSizeBaseX2L: number;
+    /**
+     * Base 3 times extra-large font size token.
+     * Designed for first-level page titles.
+     * Can also be used for labels or captions within huge text.
+     */
+    fontSizeBaseX3L: number;
+    /**
+     * Base 4 times extra-large font size token.
+     * Ideal for huge text labels and captions.
+     */
+    fontSizeBaseX4L: number;
+    /**
+     * Base 5 times extra-large font size token.
+     * Use this size for enormous text elements like hero titles.
+     * It should be the largest font size in your interface.
+     */
+    fontSizeBaseX5L: number;
+    /**
+     * Base none line height token.
+     * Use for elements with no line height, like buttons, badges, and tags.
+     */
+    lineHeightBaseNone: number;
+    /**
+     * Base tight line height token.
+     * For compact text elements with closely packed lines.
+     */
+    lineHeightBaseTight: number;
+    /**
+     * Base snug line height token.
+     * Ideal for compact text that still needs some breathing room.
+     */
+    lineHeightBaseSnug: number;
+    /**
+     * Base normal line height token.
+     * Standard line height for most text elements.
+     * Use for general content in your interface.
+     */
+    lineHeightBaseNormal: number;
+    /**
+     * Base relaxed line height token.
+     * Provides more space between lines.
+     * Ideal for body text or large blocks of content.
+     */
+    lineHeightBaseRelaxed: number;
+    /**
+     * Base loose line height token.
+     * Very spacious and airy, great for large headings.
+     * Suitable for text elements that need a lot of breathing room.
+     */
+    lineHeightBaseLoose: number;
+}
+export type ThemeContextProviderProps = PropsWithChildren<Partial<ThemeContextValue>>;
+export type ThemeContextProviderComponent = FunctionComponent<ThemeContextProviderProps>;

package/build/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useThemeStyleSheet } from './use-theme-style-sheet';

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

@@ -0,0 +1,89 @@
+export declare const useThemeStyleSheet: () => {
+    colorForegroundBase100: {
+        color: `rgb(${number},${number},${number})`;
+    };
+    colorForegroundBase200: {
+        color: `rgb(${number},${number},${number})`;
+    };
+    colorForegroundBase300: {
+        color: `rgb(${number},${number},${number})`;
+    };
+    colorForegroundBase400: {
+        color: `rgb(${number},${number},${number})`;
+    };
+    colorForegroundBase500: {
+        color: `rgb(${number},${number},${number})`;
+    };
+    colorForegroundBase600: {
+        color: `rgb(${number},${number},${number})`;
+    };
+    colorForegroundBase700: {
+        color: `rgb(${number},${number},${number})`;
+    };
+    colorForegroundBase800: {
+        color: `rgb(${number},${number},${number})`;
+    };
+    colorForegroundBase900: {
+        color: `rgb(${number},${number},${number})`;
+    };
+    fontFamilyBase: {
+        fontFamily: string;
+    };
+    fontWeightBaseThin: {
+        fontWeight: import("../contexts/theme").ThemeFontWeight;
+    };
+    fontWeightBaseExtraLight: {
+        fontWeight: import("../contexts/theme").ThemeFontWeight;
+    };
+    fontWeightBaseLight: {
+        fontWeight: import("../contexts/theme").ThemeFontWeight;
+    };
+    fontWeightBaseRegular: {
+        fontWeight: import("../contexts/theme").ThemeFontWeight;
+    };
+    fontWeightBaseMedium: {
+        fontWeight: import("../contexts/theme").ThemeFontWeight;
+    };
+    fontWeightBaseSemibold: {
+        fontWeight: import("../contexts/theme").ThemeFontWeight;
+    };
+    fontWeightBaseBold: {
+        fontWeight: import("../contexts/theme").ThemeFontWeight;
+    };
+    fontWeightBaseExtraBold: {
+        fontWeight: import("../contexts/theme").ThemeFontWeight;
+    };
+    fontWeightBaseBlack: {
+        fontWeight: import("../contexts/theme").ThemeFontWeight;
+    };
+    fontSizeBaseX2S: {
+        fontSize: number;
+    };
+    fontSizeBaseXS: {
+        fontSize: number;
+    };
+    fontSizeBaseSM: {
+        fontSize: number;
+    };
+    fontSizeBaseMD: {
+        fontSize: number;
+    };
+    fontSizeBaseLG: {
+        fontSize: number;
+    };
+    fontSizeBaseXL: {
+        fontSize: number;
+    };
+    fontSizeBaseX2L: {
+        fontSize: number;
+    };
+    fontSizeBaseX3L: {
+        fontSize: number;
+    };
+    fontSizeBaseX4L: {
+        fontSize: number;
+    };
+    fontSizeBaseX5L: {
+        fontSize: number;
+    };
+};

package/build/{web/index.d.ts → index.d.ts}

@@ -6,6 +6,7 @@ export { Text } from './components/text';
 export type { TextComponent, TextProps } from './components/text';
 export { FONT_FAMILY_BASE } from './constants/theme';
 export { ThemeContextProvider, useThemeContext } from './contexts/theme';
-export type { ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, ThemeFontWeight, } from './contexts/theme';
+export type { ThemeColorRGB, ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, ThemeFontWeight, } from './contexts/theme';
 export { renderStyle } from './helpers/style';
 export type { RenderStyleHelper } from './helpers/style';
+export { useThemeStyleSheet } from './hooks/use-theme-style-sheet';