creactive 0.0.95 → 0.0.97

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

@@ -1,141 +1,141 @@
 export declare const useThemeStyleSheet: () => {
     colorBackgroundBase100: {
-        backgroundColor: import("..").Color;
+        backgroundColor: import("../../..").Color;
     };
     colorBackgroundBase200: {
-        backgroundColor: import("..").Color;
+        backgroundColor: import("../../..").Color;
     };
     colorBackgroundBase300: {
-        backgroundColor: import("..").Color;
+        backgroundColor: import("../../..").Color;
     };
     colorBackgroundBase400: {
-        backgroundColor: import("..").Color;
+        backgroundColor: import("../../..").Color;
     };
     colorBackgroundBase500: {
-        backgroundColor: import("..").Color;
+        backgroundColor: import("../../..").Color;
     };
     colorBackgroundBase600: {
-        backgroundColor: import("..").Color;
+        backgroundColor: import("../../..").Color;
     };
     colorBackgroundBase700: {
-        backgroundColor: import("..").Color;
+        backgroundColor: import("../../..").Color;
     };
     colorBackgroundBase800: {
-        backgroundColor: import("..").Color;
+        backgroundColor: import("../../..").Color;
     };
     colorBackgroundBase900: {
-        backgroundColor: import("..").Color;
+        backgroundColor: import("../../..").Color;
     };
     colorBorderBase100: {
-        borderColor: import("..").Color;
+        borderColor: import("../../..").Color;
     };
     colorBorderBase200: {
-        borderColor: import("..").Color;
+        borderColor: import("../../..").Color;
     };
     colorBorderBase300: {
-        borderColor: import("..").Color;
+        borderColor: import("../../..").Color;
     };
     colorBorderBase400: {
-        borderColor: import("..").Color;
+        borderColor: import("../../..").Color;
     };
     colorBorderBase500: {
-        borderColor: import("..").Color;
+        borderColor: import("../../..").Color;
     };
     colorBorderBase600: {
-        borderColor: import("..").Color;
+        borderColor: import("../../..").Color;
     };
     colorBorderBase700: {
-        borderColor: import("..").Color;
+        borderColor: import("../../..").Color;
     };
     colorBorderBase800: {
-        borderColor: import("..").Color;
+        borderColor: import("../../..").Color;
     };
     colorBorderBase900: {
-        borderColor: import("..").Color;
+        borderColor: import("../../..").Color;
     };
     colorForegroundBase100: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundBase200: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundBase300: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundBase400: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundBase500: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundBase600: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundBase700: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundBase800: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundBase900: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundInverse100: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundInverse200: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundInverse300: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundInverse400: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundInverse500: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundInverse600: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundInverse700: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundInverse800: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     colorForegroundInverse900: {
-        color: import("..").Color;
+        color: import("../../..").Color;
     };
     fontFamilyBase: {
         fontFamily: string;
     };
     fontWeightBaseThin: {
-        fontWeight: import("..").FontWeight;
+        fontWeight: import("../../..").FontWeight;
     };
     fontWeightBaseExtraLight: {
-        fontWeight: import("..").FontWeight;
+        fontWeight: import("../../..").FontWeight;
     };
     fontWeightBaseLight: {
-        fontWeight: import("..").FontWeight;
+        fontWeight: import("../../..").FontWeight;
     };
     fontWeightBaseRegular: {
-        fontWeight: import("..").FontWeight;
+        fontWeight: import("../../..").FontWeight;
     };
     fontWeightBaseMedium: {
-        fontWeight: import("..").FontWeight;
+        fontWeight: import("../../..").FontWeight;
     };
     fontWeightBaseSemibold: {
-        fontWeight: import("..").FontWeight;
+        fontWeight: import("../../..").FontWeight;
     };
     fontWeightBaseBold: {
-        fontWeight: import("..").FontWeight;
+        fontWeight: import("../../..").FontWeight;
     };
     fontWeightBaseExtraBold: {
-        fontWeight: import("..").FontWeight;
+        fontWeight: import("../../..").FontWeight;
     };
     fontWeightBaseBlack: {
-        fontWeight: import("..").FontWeight;
+        fontWeight: import("../../..").FontWeight;
     };
     fontSizeBaseX2S: {
         fontSize: number;
@@ -167,6 +167,102 @@ export declare const useThemeStyleSheet: () => {
     fontSizeBaseX5L: {
         fontSize: number;
     };
+    marginTopBaseX6S: {
+        marginTop: number;
+    };
+    paddingTopBaseX6S: {
+        paddingTop: number;
+    };
+    marginLeftBaseX6S: {
+        marginLeft: number;
+    };
+    paddingLeftBaseX6S: {
+        paddingLeft: number;
+    };
+    marginRightBaseX6S: {
+        marginRight: number;
+    };
+    paddingRightBaseX6S: {
+        paddingRight: number;
+    };
+    marginBottomBaseX6S: {
+        marginBottom: number;
+    };
+    paddingBottomBaseX6S: {
+        paddingBottom: number;
+    };
+    marginTopBaseX5S: {
+        marginTop: number;
+    };
+    paddingTopBaseX5S: {
+        paddingTop: number;
+    };
+    marginLeftBaseX5S: {
+        marginLeft: number;
+    };
+    paddingLeftBaseX5S: {
+        paddingLeft: number;
+    };
+    marginRightBaseX5S: {
+        marginRight: number;
+    };
+    paddingRightBaseX5S: {
+        paddingRight: number;
+    };
+    marginBottomBaseX5S: {
+        marginBottom: number;
+    };
+    paddingBottomBaseX5S: {
+        paddingBottom: number;
+    };
+    marginTopBaseX4S: {
+        marginTop: number;
+    };
+    paddingTopBaseX4S: {
+        paddingTop: number;
+    };
+    marginLeftBaseX4S: {
+        marginLeft: number;
+    };
+    paddingLeftBaseX4S: {
+        paddingLeft: number;
+    };
+    marginRightBaseX4S: {
+        marginRight: number;
+    };
+    paddingRightBaseX4S: {
+        paddingRight: number;
+    };
+    marginBottomBaseX4S: {
+        marginBottom: number;
+    };
+    paddingBottomBaseX4S: {
+        paddingBottom: number;
+    };
+    marginTopBaseX3S: {
+        marginTop: number;
+    };
+    paddingTopBaseX3S: {
+        paddingTop: number;
+    };
+    marginLeftBaseX3S: {
+        marginLeft: number;
+    };
+    paddingLeftBaseX3S: {
+        paddingLeft: number;
+    };
+    marginRightBaseX3S: {
+        marginRight: number;
+    };
+    paddingRightBaseX3S: {
+        paddingRight: number;
+    };
+    marginBottomBaseX3S: {
+        marginBottom: number;
+    };
+    paddingBottomBaseX3S: {
+        paddingBottom: number;
+    };
     marginTopBaseX2S: {
         marginTop: number;
     };
@@ -431,30 +527,6 @@ export declare const useThemeStyleSheet: () => {
     paddingBottomBaseX6L: {
         paddingBottom: number;
     };
-    marginTopBaseX7L: {
-        marginTop: number;
-    };
-    paddingTopBaseX7L: {
-        paddingTop: number;
-    };
-    marginLeftBaseX7L: {
-        marginLeft: number;
-    };
-    paddingLeftBaseX7L: {
-        paddingLeft: number;
-    };
-    marginRightBaseX7L: {
-        marginRight: number;
-    };
-    paddingRightBaseX7L: {
-        paddingRight: number;
-    };
-    marginBottomBaseX7L: {
-        marginBottom: number;
-    };
-    paddingBottomBaseX7L: {
-        paddingBottom: number;
-    };
     borderWidthBaseSM: {
         borderWidth: number;
     };

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

@@ -1,2 +1,3 @@
+export { useThemeStyleSheet } from './hooks';
 export { ThemeContextProvider, useThemeContext } from './theme';
 export type { ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, } from './theme.types';

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

@@ -188,212 +188,250 @@ export interface ThemeContextValue {
      */
     colorForegroundInverse900: Color;
     /**
-     * Base font family token.
-     * Supposed to be used by most components.
-     * If you don't known what font family to use - use this one.
+     * Base font family.
+     * @see FONT_FAMILY_BASE
      */
     fontFamilyBase: string;
     /**
-     * Base thin font weight token.
-     * Ideal for very delicate and decorative, large, elegant hero text.
+     * Base thin font weight.
+     * @see FONT_WEIGHT_BASE_THIN
+     * @default 100
      */
     fontWeightBaseThin: FontWeight;
     /**
-     * Base extra-light font weight token.
-     * Use for large, airy headings or subtle interface elements.
-     * Slightly more readable than extra-thin, but still decorative.
+     * Base extra-light font weight.
+     * @see FONT_WEIGHT_BASE_EXTRALIGHT
+     * @default 200
      */
     fontWeightBaseExtraLight: FontWeight;
     /**
-     * Base light font weight token.
-     * Suitable for subheadings, muted captions, and soft labels.
+     * Base light font weight.
+     * @see FONT_WEIGHT_BASE_LIGHT
+     * @default 300
      */
     fontWeightBaseLight: FontWeight;
     /**
-     * Base regular font weight token.
-     * For the most common text elements in your interface.
-     * When unsure about font weight, this is the default option.
+     * Base regular font weight.
+     * @see FONT_WEIGHT_BASE_REGULAR
+     * @default 400
      */
     fontWeightBaseRegular: FontWeight;
     /**
-     * Base medium font weight token.
-     * Suitable for labels, buttons, and small subheadings.
-     * Slightly emphasized, providing better readability.
+     * Base medium font weight.
+     * @see FONT_WEIGHT_BASE_MEDIUM
+     * @default 500
      */
     fontWeightBaseMedium: FontWeight;
     /**
-     * Base semi-bold font weight token.
-     * Provides stronger emphasis without being overwhelming.
-     * Ideal for section headers, emphasized text, and card titles.
+     * Base semi-bold font weight.
+     * @see FONT_WEIGHT_BASE_SEMIBOLD
+     * @default 600
      */
     fontWeightBaseSemibold: FontWeight;
     /**
-     * Base bold font weight token.
-     * For high emphasis on important elements.
-     * Use for main headings and strong call-to-action buttons.
+     * Base bold font weight.
+     * @see FONT_WEIGHT_BASE_BOLD
+     * @default 700
      */
     fontWeightBaseBold: FontWeight;
     /**
-     * Extra-bold font weight token.
-     * Perfect for promo banners and large impactful headings.
+     * Extra-bold font weight.
+     * @see FONT_WEIGHT_BASE_EXTRABOLD
+     * @default 800
      */
     fontWeightBaseExtraBold: FontWeight;
     /**
-     * Base black font weight token.
-     * Extreme emphasis for rare, dramatic cases.
-     * Great for headlines in posters and highly attention-grabbing elements.
+     * Base black font weight.
+     * @see FONT_WEIGHT_BASE_BLACK
+     * @default 900
      */
     fontWeightBaseBlack: FontWeight;
     /**
-     * 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.
+     * Base 2 times extra-small font size.
+     * @see FONT_SIZE_BASE_X2S
+     * @default 12
      */
     fontSizeBaseX2S: number;
     /**
-     * Base extra-small font size token.
-     * Suitable for subtitles or the smallest readable text, for example.
+     * Base extra-small font size.
+     * @see FONT_SIZE_BASE_XS
+     * @default 14
      */
     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.
+     * Base small font size.
+     * @see FONT_SIZE_BASE_SM
+     * @default 16
      */
     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.
+     * Base medium font size.
+     * @see FONT_SIZE_BASE_MD
+     * @default 18
      */
     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.
+     * Base large font size.
+     * @see FONT_SIZE_BASE_LG
+     * @default 20
      */
     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.
+     * Base extra-large font size.
+     * @see FONT_SIZE_BASE_XL
+     * @default 24
      */
     fontSizeBaseXL: number;
     /**
-     * Base 2 times extra-large font size token.
-     * Typically used for second-level page titles.
+     * Base 2 times extra-large font size.
+     * @see FONT_SIZE_BASE_X2L
+     * @default 30
      */
     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.
+     * Base 3 times extra-large font size.
+     * @see FONT_SIZE_BASE_X3L
+     * @default 36
      */
     fontSizeBaseX3L: number;
     /**
-     * Base 4 times extra-large font size token.
-     * Ideal for huge text labels and captions.
+     * Base 4 times extra-large font size.
+     * @see FONT_SIZE_BASE_X4L
+     * @default 48
      */
     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.
+     * Base 5 times extra-large font size.
+     * @see FONT_SIZE_BASE_X5L
+     * @default 60
      */
     fontSizeBaseX5L: number;
     /**
-     * Base none line height token.
-     * Use for elements with no line height, like buttons, badges, and tags.
+     * Base none line height.
+     * @see LINE_HEIGHT_BASE_NONE
+     * @default 1
      */
     lineHeightBaseNone: number;
     /**
-     * Base tight line height token.
-     * For compact text elements with closely packed lines.
+     * Base tight line height.
+     * @see LINE_HEIGHT_BASE_TIGHT
+     * @default 1.25
      */
     lineHeightBaseTight: number;
     /**
-     * Base snug line height token.
-     * Ideal for compact text that still needs some breathing room.
+     * Base snug line height.
+     * @see LINE_HEIGHT_BASE_SNUG
+     * @default 1.375
      */
     lineHeightBaseSnug: number;
     /**
-     * Base normal line height token.
-     * Standard line height for most text elements.
-     * Use for general content in your interface.
+     * Base normal line height.
+     * @see LINE_HEIGHT_BASE_NORMAL
+     * @default 1.5
      */
     lineHeightBaseNormal: number;
     /**
-     * Base relaxed line height token.
-     * Provides more space between lines.
-     * Ideal for body text or large blocks of content.
+     * Base relaxed line height.
+     * @see LINE_HEIGHT_BASE_RELAXED
+     * @default 1.625
      */
     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.
+     * Base loose line height.
+     * @see LINE_HEIGHT_BASE_LOOSE
+     * @default 2
      */
     lineHeightBaseLoose: number;
     /**
-     * Base 2 times extra-small spacing token.
-     * Rarely used – best for tight icon/text gaps or hairline adjustments.
+     * Base 6 times extra-small spacing.
+     * @see SPACING_BASE_X6S
+     * @default 2
+     */
+    spacingBaseX6S: number;
+    /**
+     * Base 5 times extra-small spacing.
+     * @see SPACING_BASE_X5S
+     * @default 4
+     */
+    spacingBaseX5S: number;
+    /**
+     * Base 4 times extra-small spacing.
+     * @see SPACING_BASE_X4S
+     * @default 6
+     */
+    spacingBaseX4S: number;
+    /**
+     * Base 3 times extra-small spacing.
+     * @see SPACING_BASE_X3S
+     * @default 8
+     */
+    spacingBaseX3S: number;
+    /**
+     * Base 2 times extra-small spacing.
+     * @see SPACING_BASE_X2S
+     * @default 10
      */
     spacingBaseX2S: number;
     /**
-     * Extra-small base spacing token.
-     * Ideal for compact elements like tag paddings or small icon separation.
+     * Base extra-small spacing.
+     * @see SPACING_BASE_XS
+     * @default 12
      */
     spacingBaseXS: number;
     /**
-     * Small base spacing token.
-     * Great for dense layouts, or minor gaps.
+     * Base small spacing.
+     * @see SPACING_BASE_SM
+     * @default 14
      */
     spacingBaseSM: number;
     /**
-     * Base medium spacing token.
-     * Good default for most components like cards, inputs, or buttons.
+     * Base medium spacing.
+     * @see SPACING_BASE_MD
+     * @default 16
      */
     spacingBaseMD: number;
     /**
-     * Large base spacing token.
-     * Nice for separating grouped elements or setting consistent gaps.
+     * Base large spacing.
+     * @see SPACING_BASE_LG
+     * @default 18
      */
     spacingBaseLG: number;
     /**
-     * Extra-large base spacing token.
-     * Useful between sections or to give components more breathing.
+     * Base extra-large spacing.
+     * @see SPACING_BASE_XL
+     * @default 20
      */
     spacingBaseXL: number;
     /**
-     * Base 2 times extra-large spacing token.
-     * Fits well in modals or larger layout divisions.
+     * Base 2 times extra-large spacing.
+     * @see SPACING_BASE_X2L
+     * @default 24
      */
     spacingBaseX2L: number;
     /**
-     * Base 3 times extra-large spacing token.
-     * Helps emphasize hierarchy between layout blocks.
+     * Base 3 times extra-large spacing.
+     * @see SPACING_BASE_X3L
+     * @default 28
      */
     spacingBaseX3L: number;
     /**
-     * Base 4 times extra-large spacing token.
-     * Ideal for responsive paddings, section and outer margins.
+     * Base 4 times extra-large spacing.
+     * @see SPACING_BASE_X4L
+     * @default 32
      */
     spacingBaseX4L: number;
     /**
-     * Base 5 times extra-large spacing token.
-     * Great for container paddings, grid gaps, or large components.
+     * Base 5 times extra-large spacing.
+     * @see SPACING_BASE_X5L
+     * @default 36
      */
     spacingBaseX5L: number;
     /**
-     * Base 6 times extra-large spacing token.
-     * Works well in modal layouts or for generous top-level spacing.
+     * Base 6 times extra-large spacing.
+     * @see SPACING_BASE_X6L
+     * @default 40
      */
     spacingBaseX6L: number;
-    /**
-     * Base 7 times extra-large spacing token.
-     * Used for large layout sections or when significant whitespace is needed.
-     */
-    spacingBaseX7L: number;
     /**
      * Small base border width token.
      * @default 0.5