creactive 0.0.79 → 0.0.80

package/build/classic.js.LICENSE.txt

@@ -1,18 +1,3 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/*!
- * The buffer module from node.js, for the browser.
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
-
-/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
 /**
  * @license React
  * react-jsx-runtime.production.min.js

package/build/components/view/constants/index.d.ts

@@ -1,2 +1,3 @@
 export { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewFlexDirection, ViewJustifyContent, } from './flex';
-export { HTMLTag, ViewTag } from './tag';
+export { ViewMarginBottomThemeStyleSheetKey, ViewMarginLeftThemeStyleSheetKey, ViewMarginRightThemeStyleSheetKey, ViewMarginTopThemeStyleSheetKey, ViewPaddingBottomThemeStyleSheetKey, ViewPaddingLeftThemeStyleSheetKey, ViewPaddingRightThemeStyleSheetKey, ViewPaddingTopThemeStyleSheetKey, ViewSpacing, ViewSpacingThemeTokenKey, } from './spacing';
+export { ViewHTMLTag, ViewTag } from './tag';

package/build/components/view/constants/spacing.d.ts

@@ -0,0 +1,144 @@
+/**
+ * View component spacing enumerated contstants.
+ * Allows to control view margin and padding with properties.
+ */
+export declare enum ViewSpacing {
+    X2S = 0,
+    XS = 1,
+    SM = 2,
+    MD = 3,
+    LG = 4,
+    XL = 5,
+    X2L = 6,
+    X3L = 7,
+    X4L = 8,
+    X5L = 9,
+    X6L = 10,
+    X7L = 11
+}
+export declare const ViewMarginTopThemeStyleSheetKey: {
+    0: "marginTopBaseX2S";
+    1: "marginTopBaseXS";
+    2: "marginTopBaseSM";
+    3: "marginTopBaseMD";
+    4: "marginTopBaseLG";
+    5: "marginTopBaseXL";
+    6: "marginTopBaseX2L";
+    7: "marginTopBaseX3L";
+    8: "marginTopBaseX4L";
+    9: "marginTopBaseX5L";
+    10: "marginTopBaseX6L";
+    11: "marginTopBaseX7L";
+};
+export declare const ViewPaddingTopThemeStyleSheetKey: {
+    0: "paddingTopBaseX2S";
+    1: "paddingTopBaseXS";
+    2: "paddingTopBaseSM";
+    3: "paddingTopBaseMD";
+    4: "paddingTopBaseLG";
+    5: "paddingTopBaseXL";
+    6: "paddingTopBaseX2L";
+    7: "paddingTopBaseX3L";
+    8: "paddingTopBaseX4L";
+    9: "paddingTopBaseX5L";
+    10: "paddingTopBaseX6L";
+    11: "paddingTopBaseX7L";
+};
+export declare const ViewMarginLeftThemeStyleSheetKey: {
+    0: "marginLeftBaseX2S";
+    1: "marginLeftBaseXS";
+    2: "marginLeftBaseSM";
+    3: "marginLeftBaseMD";
+    4: "marginLeftBaseLG";
+    5: "marginLeftBaseXL";
+    6: "marginLeftBaseX2L";
+    7: "marginLeftBaseX3L";
+    8: "marginLeftBaseX4L";
+    9: "marginLeftBaseX5L";
+    10: "marginLeftBaseX6L";
+    11: "marginLeftBaseX7L";
+};
+export declare const ViewPaddingLeftThemeStyleSheetKey: {
+    0: "paddingLeftBaseX2S";
+    1: "paddingLeftBaseXS";
+    2: "paddingLeftBaseSM";
+    3: "paddingLeftBaseMD";
+    4: "paddingLeftBaseLG";
+    5: "paddingLeftBaseXL";
+    6: "paddingLeftBaseX2L";
+    7: "paddingLeftBaseX3L";
+    8: "paddingLeftBaseX4L";
+    9: "paddingLeftBaseX5L";
+    10: "paddingLeftBaseX6L";
+    11: "paddingLeftBaseX7L";
+};
+export declare const ViewMarginRightThemeStyleSheetKey: {
+    0: "marginRightBaseX2S";
+    1: "marginRightBaseXS";
+    2: "marginRightBaseSM";
+    3: "marginRightBaseMD";
+    4: "marginRightBaseLG";
+    5: "marginRightBaseXL";
+    6: "marginRightBaseX2L";
+    7: "marginRightBaseX3L";
+    8: "marginRightBaseX4L";
+    9: "marginRightBaseX5L";
+    10: "marginRightBaseX6L";
+    11: "marginRightBaseX7L";
+};
+export declare const ViewPaddingRightThemeStyleSheetKey: {
+    0: "paddingRightBaseX2S";
+    1: "paddingRightBaseXS";
+    2: "paddingRightBaseSM";
+    3: "paddingRightBaseMD";
+    4: "paddingRightBaseLG";
+    5: "paddingRightBaseXL";
+    6: "paddingRightBaseX2L";
+    7: "paddingRightBaseX3L";
+    8: "paddingRightBaseX4L";
+    9: "paddingRightBaseX5L";
+    10: "paddingRightBaseX6L";
+    11: "paddingRightBaseX7L";
+};
+export declare const ViewMarginBottomThemeStyleSheetKey: {
+    0: "marginBottomBaseX2S";
+    1: "marginBottomBaseXS";
+    2: "marginBottomBaseSM";
+    3: "marginBottomBaseMD";
+    4: "marginBottomBaseLG";
+    5: "marginBottomBaseXL";
+    6: "marginBottomBaseX2L";
+    7: "marginBottomBaseX3L";
+    8: "marginBottomBaseX4L";
+    9: "marginBottomBaseX5L";
+    10: "marginBottomBaseX6L";
+    11: "marginBottomBaseX7L";
+};
+export declare const ViewPaddingBottomThemeStyleSheetKey: {
+    0: "paddingBottomBaseX2S";
+    1: "paddingBottomBaseXS";
+    2: "paddingBottomBaseSM";
+    3: "paddingBottomBaseMD";
+    4: "paddingBottomBaseLG";
+    5: "paddingBottomBaseXL";
+    6: "paddingBottomBaseX2L";
+    7: "paddingBottomBaseX3L";
+    8: "paddingBottomBaseX4L";
+    9: "paddingBottomBaseX5L";
+    10: "paddingBottomBaseX6L";
+    11: "paddingBottomBaseX7L";
+};
+export declare const ViewSpacingThemeTokenKey: {
+    0: "spacingBaseX2S";
+    1: "spacingBaseXS";
+    2: "spacingBaseSM";
+    3: "spacingBaseMD";
+    4: "spacingBaseLG";
+    5: "spacingBaseXL";
+    6: "spacingBaseX2L";
+    7: "spacingBaseX3L";
+    8: "spacingBaseX4L";
+    9: "spacingBaseX5L";
+    10: "spacingBaseX6L";
+    11: "spacingBaseX7L";
+};

package/build/components/view/constants/tag.d.ts

@@ -16,7 +16,7 @@ export declare enum ViewTag {
  * Mapping tags to its string constants.
  * This is used to render correct HTML tags in web.
  */
-export declare const HTMLTag: {
+export declare const ViewHTMLTag: {
     0: "div";
     1: "figure";
     2: "figcaption";

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

@@ -1,44 +1,97 @@
 import type { FunctionComponent, PropsWithChildren } from 'react';
-import type { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewFlexDirection, ViewJustifyContent, ViewTag } from './constants';
+import type { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewFlexDirection, ViewJustifyContent, ViewSpacing, ViewTag } from './constants';
 export interface ViewProps extends PropsWithChildren {
     /**
      * Allows to control HTML tag to render.
      * Makes no sense on native platforms.
+     * @see View.Tag
      * @default View.Tag.DIV
      */
     tag?: ViewTag;
     /**
      * Flex direction of the component.
      * Defines the main axis along which children are laid out.
+     * @see View.FlexDirection
      * @default View.FlexDirection.COLUMN
      */
     flexDirection?: ViewFlexDirection;
     /**
      * Controls spacing between and around items.
      * Defines how children are distributed along the main axis.
+     * @see View.JustifyContent
      * @default View.JustifyContent.FLEX_START
      */
     justifyContent?: ViewJustifyContent;
     /**
      * Defines how children are aligned along the cross axis.
      * Affects the alignment of items perpendicular to the main axis.
+     * @see View.AlignItems
      * @default View.AlignItems.STRETCH
      */
     alignItems?: ViewAlignItems;
     /**
      * Overrides the cross-axis alignment for a single child.
      * Takes precedence over the container's align items property value.
+     * @see View.AlignItems
      * @default undefined
      */
     alignSelf?: ViewAlignSelf;
     /**
      * Only applies when there is wrapping in the container.
      * Defines how multiple lines are spaced along the cross axis.
+     * @see View.AlignContent
      * @default View.AlignContent.FLEX_START
      */
     alignContent?: ViewAlignContent;
+    /**
+     * Top outer spacing.
+     * @see View.Spacing
+     * @default undefined
+     */
+    marginTop?: ViewSpacing;
+    /**
+     * Top inner spacing.
+     * @see View.Spacing
+     * @default undefined
+     */
+    paddingTop?: ViewSpacing;
+    /**
+     * Left outer spacing.
+     * @see View.Spacing
+     * @default undefined
+     */
+    marginLeft?: ViewSpacing;
+    /**
+     * Left inner spacing.
+     * @see View.Spacing
+     * @default undefined
+     */
+    paddingLeft?: ViewSpacing;
+    /**
+     * Right outer spacing.
+     * @see View.Spacing
+     * @default undefined
+     */
+    marginRight?: ViewSpacing;
+    /**
+     * Right inner spacing.
+     * @see View.Spacing
+     * @default undefined
+     */
+    paddingRight?: ViewSpacing;
+    /**
+     * Bottom outer spacing.
+     * @see View.Spacing
+     * @default undefined
+     */
+    marginBottom?: ViewSpacing;
+    /**
+     * Bottom inner spacing.
+     * @see View.Spacing
+     * @default undefined
+     */
+    paddingBottom?: ViewSpacing;
 }
-export type StyledViewProps = Pick<ViewProps, 'flexDirection' | 'justifyContent' | 'alignItems' | 'alignSelf' | 'alignContent'>;
 export type ViewComponent = FunctionComponent<ViewProps> & {
     Tag: Record<keyof typeof ViewTag, ViewTag>;
     FlexDirection: Record<keyof typeof ViewFlexDirection, ViewFlexDirection>;
@@ -46,4 +99,15 @@ export type ViewComponent = FunctionComponent<ViewProps> & {
     AlignItems: Record<keyof typeof ViewAlignItems, ViewAlignItems>;
     AlignSelf: Record<keyof typeof ViewAlignSelf, ViewAlignSelf>;
     AlignContent: Record<keyof typeof ViewAlignContent, ViewAlignContent>;
+    Spacing: Record<keyof typeof ViewSpacing, ViewSpacing>;
+};
+export type StyledViewProps = Pick<ViewProps, 'flexDirection' | 'justifyContent' | 'alignItems' | 'alignSelf' | 'alignContent'> & {
+    marginTop?: number;
+    paddingTop?: number;
+    marginLeft?: number;
+    paddingLeft?: number;
+    marginRight?: number;
+    paddingRight?: number;
+    marginBottom?: number;
+    paddingBottom?: number;
 };

package/build/constants/index.d.ts

@@ -1 +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, 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, 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';
+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, 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, 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, SPACING_BASE_LG, SPACING_BASE_MD, SPACING_BASE_SM, SPACING_BASE_X2L, SPACING_BASE_X2S, SPACING_BASE_X3L, SPACING_BASE_X4L, SPACING_BASE_X5L, SPACING_BASE_X6L, SPACING_BASE_X7L, SPACING_BASE_XL, SPACING_BASE_XS, } from '../constants/theme';

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

@@ -1,3 +1,4 @@
 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, 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 { 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 { SPACING_BASE_LG, SPACING_BASE_MD, SPACING_BASE_SM, SPACING_BASE_X2L, SPACING_BASE_X2S, SPACING_BASE_X3L, SPACING_BASE_X4L, SPACING_BASE_X5L, SPACING_BASE_X6L, SPACING_BASE_X7L, SPACING_BASE_XL, SPACING_BASE_XS, } from './spacing';
 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/spacing.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Base spacing theme constants.
+ * Supposed to be used for paddings, margins, gaps and etc.
+ */
+export declare const SPACING_BASE_X2S = 2;
+export declare const SPACING_BASE_XS = 4;
+export declare const SPACING_BASE_SM = 6;
+export declare const SPACING_BASE_MD = 8;
+export declare const SPACING_BASE_LG = 10;
+export declare const SPACING_BASE_XL = 12;
+export declare const SPACING_BASE_X2L = 14;
+export declare const SPACING_BASE_X3L = 16;
+export declare const SPACING_BASE_X4L = 20;
+export declare const SPACING_BASE_X5L = 24;
+export declare const SPACING_BASE_X6L = 28;
+export declare const SPACING_BASE_X7L = 32;

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

@@ -264,6 +264,66 @@ export interface ThemeContextValue {
      * Suitable for text elements that need a lot of breathing room.
      */
     lineHeightBaseLoose: number;
+    /**
+     * Base 2 times extra-small spacing token.
+     * Rarely used – best for tight icon/text gaps or hairline adjustments.
+     */
+    spacingBaseX2S: number;
+    /**
+     * Extra-small base spacing token.
+     * Ideal for compact elements like tag paddings or small icon separation.
+     */
+    spacingBaseXS: number;
+    /**
+     * Small base spacing token.
+     * Great for dense layouts, or minor gaps.
+     */
+    spacingBaseSM: number;
+    /**
+     * Base medium spacing token.
+     * Good default for most components like cards, inputs, or buttons.
+     */
+    spacingBaseMD: number;
+    /**
+     * Large base spacing token.
+     * Nice for separating grouped elements or setting consistent gaps.
+     */
+    spacingBaseLG: number;
+    /**
+     * Extra-large base spacing token.
+     * Useful between sections or to give components more breathing.
+     */
+    spacingBaseXL: number;
+    /**
+     * Base 2 times extra-large spacing token.
+     * Fits well in modals or larger layout divisions.
+     */
+    spacingBaseX2L: number;
+    /**
+     * Base 3 times extra-large spacing token.
+     * Helps emphasize hierarchy between layout blocks.
+     */
+    spacingBaseX3L: number;
+    /**
+     * Base 4 times extra-large spacing token.
+     * Ideal for responsive paddings, section and outer margins.
+     */
+    spacingBaseX4L: number;
+    /**
+     * Base 5 times extra-large spacing token.
+     * Great for container paddings, grid gaps, or large components.
+     */
+    spacingBaseX5L: number;
+    /**
+     * Base 6 times extra-large spacing token.
+     * Works well in modal layouts or for generous top-level spacing.
+     */
+    spacingBaseX6L: number;
+    /**
+     * Base 7 times extra-large spacing token.
+     * Used for large layout sections or when significant whitespace is needed.
+     */
+    spacingBaseX7L: number;
 }
 export type ThemeContextProviderProps = PropsWithChildren<Partial<ThemeContextValue>>;
 export type ThemeContextProviderComponent = FunctionComponent<ThemeContextProviderProps>;