@fewbox/den-web 0.1.42 → 0.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewbox/den-web",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "main": "index.js",
   "types": "index-web.d.ts",
   "repository": "https://github.com/FewBox/fewbox-den.git",
@@ -19,4 +19,4 @@
     "react-dom": "^19.2.0",
     "jwt-decode": "^4.0.0"
   }
-}
+}

package/scripts/copy-templates.js

@@ -26,4 +26,4 @@ const rootdir = path.dirname(__filename);
 const projectRoot = process.env.INIT_CWD || process.cwd();
 const templateDir = path.join(rootdir, '../templates');
 
-copyFolderAsync(templateDir, projectRoot);
+copyFolderAsync(templateDir, projectRoot);

package/scripts/generate-packages.js

@@ -0,0 +1,41 @@
+const { readFileSync, writeFileSync, mkdirSync } = require('fs');
+const { join } = require('path');
+
+const root = join(__dirname, '..');
+
+const config = JSON.parse(readFileSync(join(root, 'packages', 'variants.json'), 'utf8'));
+const { common, npm: npmConfig, variants } = config;
+
+const registries = ['github', 'npm'];
+
+for (const registry of registries) {
+  for (const [variant, variantConfig] of Object.entries(variants)) {
+    const pkg = {
+      name: variantConfig.name,
+      version: common.version,
+      main: common.main,
+      types: variantConfig.types,
+      repository: common.repository,
+      author: common.author,
+      license: common.license,
+      type: common.type,
+    };
+
+    if (variantConfig.hasPostinstall) {
+      pkg.scripts = { postinstall: 'node scripts/copy-templates.js' };
+    }
+
+    if (registry === 'npm') {
+      pkg.publishConfig = npmConfig.publishConfig;
+    }
+
+    const basePeerDeps = variantConfig.overridePeerDependencies ? {} : { ...common.peerDependencies };
+    pkg.peerDependencies = { ...basePeerDeps, ...variantConfig.extraPeerDependencies };
+
+    const dir = join(root, 'packages', registry, variant);
+    mkdirSync(dir, { recursive: true });
+    writeFileSync(join(dir, 'package.json'), JSON.stringify(pkg, null, 2) + '\n');
+  }
+}
+
+console.log('Generated package.json files for all variants and registries.');

package/src/components/Engine/Base/index.d.ts

@@ -1,4 +1,4 @@
-import { DirectionType, FullColorType, PseudoType, FullFontSizeType, FontWeightType } from '..';
+import { DirectionType, FullColorType, PseudoType, FullFontSizeType, FontWeightType, FullBorderRadiusType, FullBorderStyleType, FullBorderWidthType, FullPaddingType, FullMarginType, OpacityType, FullDisplayType, FullVisibilityType, FullCursorType, FullOverflowType, FullOverflowXType, FullOverflowYType } from '..';
 import { Property } from 'csstype';
 export type TLength = (string & {}) | 0;
 export interface IViewProps {
@@ -16,28 +16,28 @@ export interface IViewProps {
     pseudoBackgroundColor?: FullColorType;
     pseudoBorderColor?: FullColorType;
     pseudoBorderDirection?: DirectionType;
-    display?: Property.Display;
-    visibility?: Property.Visibility;
+    borderRadius?: FullBorderRadiusType;
+    borderStyle?: FullBorderStyleType;
+    borderWidth?: FullBorderWidthType;
+    padding?: FullPaddingType;
+    margin?: FullMarginType;
+    opacity?: OpacityType;
+    display?: FullDisplayType;
+    visibility?: FullVisibilityType;
+    cursor?: FullCursorType;
+    overflow?: FullOverflowType;
     zIndex?: Property.ZIndex;
     fontFamily?: Property.FontFamily;
-    borderWidth?: Property.BorderWidth<TLength>;
-    borderRadius?: Property.BorderRadius<TLength>;
-    borderStyle?: Property.BorderStyle;
-    padding?: Property.Padding<TLength>;
-    margin?: Property.Margin<TLength>;
     height?: Property.Height<TLength>;
     width?: Property.Width<TLength>;
     minHeight?: Property.Width<TLength>;
     minWidth?: Property.Width<TLength>;
     maxHeight?: Property.Width<TLength>;
     maxWidth?: Property.Width<TLength>;
-    opacity?: Property.Opacity;
     letterSpacing?: Property.LetterSpacing<TLength>;
     lineHeight?: Property.LineHeight<TLength>;
-    cursor?: Property.Cursor;
-    overflow?: Property.Overflow;
-    overflowX?: Property.OverflowX;
-    overflowY?: Property.OverflowY;
+    overflowX?: FullOverflowXType;
+    overflowY?: FullOverflowYType;
     selfShrink?: Property.FlexShrink;
     selfGrow?: Property.FlexGrow;
     selfBasis?: Property.FlexBasis;

package/src/components/Engine/index.d.ts

@@ -1,3 +1,4 @@
+import { Property } from "csstype";
 export declare enum ColorType {
     Font = "font",
     Body = "body",
@@ -67,16 +68,167 @@ export declare enum LineHeightType {
     Default = "line-height"
 }
 export declare enum PaddingType {
-    Default = "padding"
+    Default = "padding",
+    Normal = "padding-normal",
+    ExtraSmall = "padding-extra-small",
+    Small = "padding-small",
+    Large = "padding-large",
+    ExtraLarge = "padding-extra-large"
 }
+export type FullPaddingType = PaddingType | string;
+export declare enum MarginType {
+    Default = "margin",
+    Normal = "margin-normal",
+    ExtraSmall = "margin-extra-small",
+    Small = "margin-small",
+    Large = "margin-large",
+    ExtraLarge = "margin-extra-large"
+}
+export type FullMarginType = MarginType | string;
+export declare enum GapType {
+    Default = "gap",
+    Normal = "gap-normal",
+    ExtraSmall = "gap-extra-small",
+    Small = "gap-small",
+    Large = "gap-large",
+    ExtraLarge = "gap-extra-large"
+}
+export type FullGapType = GapType | Property.Gap;
 export declare enum LetterSpacingType {
     Default = "letter-spacing"
 }
 export declare enum BorderRadiusType {
     Default = "border-radius",
-    Fixed = "border-radius-fixed",
+    Normal = "border-radius-normal",
+    ExtraSmall = "border-radius-extra-small",
+    Small = "border-radius-small",
+    Large = "border-radius-large",
+    ExtraLarge = "border-radius-extra-large",
     Max = "border-radius-max"
 }
+export type FullBorderRadiusType = BorderRadiusType | string;
+export declare enum BorderStyleType {
+    None = "border-style-none",
+    Solid = "border-style-solid",
+    Dashed = "border-style-dashed",
+    Dotted = "border-style-dotted",
+    Double = "border-style-double",
+    Groove = "border-style-groove",
+    Ridge = "border-style-ridge",
+    Inset = "border-style-inset",
+    Outset = "border-style-outset",
+    Hidden = "border-style-hidden"
+}
+export type FullBorderStyleType = BorderStyleType | string;
+export declare enum BorderWidthType {
+    Default = "border-width",
+    Normal = "border-width-normal",
+    ExtraSmall = "border-width-extra-small",
+    Small = "border-width-small",
+    Large = "border-width-large",
+    ExtraLarge = "border-width-extra-large"
+}
+export type FullBorderWidthType = BorderWidthType | string;
+export declare enum VisibilityType {
+    Visible = "visibility-visible",
+    Hidden = "visibility-hidden",
+    Collapse = "visibility-collapse"
+}
+export type FullVisibilityType = VisibilityType | string;
+export declare enum DisplayType {
+    None = "display-none",
+    Block = "display-block",
+    Inline = "display-inline",
+    InlineBlock = "display-inline-block",
+    Flex = "display-flex",
+    InlineFlex = "display-inline-flex",
+    Grid = "display-grid",
+    InlineGrid = "display-inline-grid",
+    Table = "display-table",
+    TableRow = "display-table-row",
+    TableCell = "display-table-cell",
+    Contents = "display-contents",
+    FlowRoot = "display-flow-root"
+}
+export type FullDisplayType = DisplayType | string;
+export declare enum CursorType {
+    Auto = "cursor-auto",
+    Default = "cursor-default",
+    None = "cursor-none",
+    ContextMenu = "cursor-context-menu",
+    Help = "cursor-help",
+    Pointer = "cursor-pointer",
+    Progress = "cursor-progress",
+    Wait = "cursor-wait",
+    Cell = "cursor-cell",
+    Crosshair = "cursor-crosshair",
+    Text = "cursor-text",
+    VerticalText = "cursor-vertical-text",
+    Alias = "cursor-alias",
+    Copy = "cursor-copy",
+    Move = "cursor-move",
+    NoDrop = "cursor-no-drop",
+    NotAllowed = "cursor-not-allowed",
+    Grab = "cursor-grab",
+    Grabbing = "cursor-grabbing",
+    AllScroll = "cursor-all-scroll",
+    ColResize = "cursor-col-resize",
+    RowResize = "cursor-row-resize",
+    NResize = "cursor-n-resize",
+    EResize = "cursor-e-resize",
+    SResize = "cursor-s-resize",
+    WResize = "cursor-w-resize",
+    NeResize = "cursor-ne-resize",
+    NwResize = "cursor-nw-resize",
+    SeResize = "cursor-se-resize",
+    SwResize = "cursor-sw-resize",
+    EwResize = "cursor-ew-resize",
+    NsResize = "cursor-ns-resize",
+    NeswResize = "cursor-nesw-resize",
+    NwseResize = "cursor-nwse-resize",
+    ZoomIn = "cursor-zoom-in",
+    ZoomOut = "cursor-zoom-out"
+}
+export type FullCursorType = CursorType | string;
+export declare enum OverflowType {
+    Visible = "overflow-visible",
+    Hidden = "overflow-hidden",
+    Scroll = "overflow-scroll",
+    Auto = "overflow-auto",
+    Clip = "overflow-clip"
+}
+export type FullOverflowType = OverflowType | string;
+export declare enum OverflowXType {
+    Visible = "overflow-x-visible",
+    Hidden = "overflow-x-hidden",
+    Scroll = "overflow-x-scroll",
+    Auto = "overflow-x-auto",
+    Clip = "overflow-x-clip"
+}
+export type FullOverflowXType = OverflowXType | string;
+export declare enum OverflowYType {
+    Visible = "overflow-y-visible",
+    Hidden = "overflow-y-hidden",
+    Scroll = "overflow-y-scroll",
+    Auto = "overflow-y-auto",
+    Clip = "overflow-y-clip"
+}
+export type FullOverflowYType = OverflowYType | string;
+export declare enum OpacityType {
+    _0 = "opacity-0",
+    _10 = "opacity-10",
+    _20 = "opacity-20",
+    _25 = "opacity-25",
+    _30 = "opacity-30",
+    _40 = "opacity-40",
+    _50 = "opacity-50",
+    _60 = "opacity-60",
+    _70 = "opacity-70",
+    _75 = "opacity-75",
+    _80 = "opacity-80",
+    _90 = "opacity-90",
+    _100 = "opacity-100"
+}
 export declare enum ViewSizeType {
     Ellipse = "v-ellipse-size",
     Rectangle = "v-rectangle-size",
@@ -122,91 +274,4 @@ export declare enum DirectionType {
     TopBottom = "top-bottom",
     LeftRight = "left-right"
 }
-export declare enum ComponentType {
-    Flex = "Flex",
-    FlexItem = "FlexItem",
-    Position = "Position",
-    PositionArea = "PositionArea",
-    SBaseline = "SBaseline",
-    SBottom = "SBottom",
-    SLeft = "SLeft",
-    SMiddle = "SMiddle",
-    SCenter = "SCenter",
-    SRight = "SRight",
-    SStretch = "SStretch",
-    STop = "STop",
-    X = "X",
-    XAround = "XAround",
-    XAutoBoth = "XAutoBoth",
-    XAutoCenter = "XAutoCenter",
-    XAutoLeft = "XAutoLeft",
-    XAutoLefts = "XAutoLefts",
-    XAutoRight = "XAutoRight",
-    XAutoRights = "XAutoRights",
-    XBetween = "XBetween",
-    XCenter = "XCenter",
-    XCustom = "XCustom",
-    XCustomBoth = "XCustomBoth",
-    XEvenly = "XEvenly",
-    XLeft = "XLeft",
-    XRight = "XRight",
-    XWrap = "XWrap",
-    XWrapAround = "XWrapAround",
-    XWrapBetween = "XWrapBetween",
-    XWrapBottom = "XWrapBottom",
-    XWrapEvenly = "XWrapEvenly",
-    XWrapMiddle = "XWrapMiddle",
-    XWrapTop = "XWrapTop",
-    Y = "Y",
-    YAround = "YAround",
-    YBetween = "YBetween",
-    YBottom = "YBottom",
-    YEvenly = "YEvenly",
-    YMiddle = "YMiddle",
-    YTop = "YTop",
-    VEllipse = "VEllipse",
-    VLine = "VLine",
-    VRectangle = "VRectangle",
-    VAvatar = "VAvatar",
-    VBlock = "VBlock",
-    VBoundary = "VBoundary",
-    VButton = "VButton",
-    VCard = "VCard",
-    VCardMedia = "VCardMedia",
-    VCardSocial = "VCardSocial",
-    VCardWindow = "VCardWindow",
-    VChromeExtensionValidator = "VChromeExtensionValidator",
-    VCodePreview = "VCodePreview",
-    VDesigner = "VDesigner",
-    VDynamic = "VDynamic",
-    VBackground = "VBackground",
-    VForm = "VForm",
-    VImage = "VImage",
-    VCheckBox = "VCheckBox",
-    VColor = "VColor",
-    VDate = "VDate",
-    VDatetimeLocal = "VDatetimeLocal",
-    VEmail = "VEmail",
-    VFile = "VFile",
-    VMonth = "VMonth",
-    VNumber = "VNumber",
-    VPassword = "VPassword",
-    VRadio = "VRadio",
-    VRange = "VRange",
-    VSearch = "VSearch",
-    VSubmit = "VSubmit",
-    VTel = "VTel",
-    VTextBox = "VTextBox",
-    VTime = "VTime",
-    VUrl = "VUrl",
-    VWeek = "VWeek",
-    VLabel = "VLabel",
-    VLink = "VLink",
-    VPhoto = "VPhoto",
-    VShadow = "VShadow",
-    VStack = "VStack",
-    VSvg = "VSvg",
-    VText = "VText",
-    VTooltip = "VTooltip"
-}
-export declare const getGeneratedClassName: (className: string, isDefaultValue: boolean | undefined, sizeType?: FullFontSizeType, isAutoSize?: boolean, weightType?: FontWeightType, frontColorType?: FullColorType, backgroundColorType?: FullColorType, borderColorType?: FullColorType, borderDirection?: DirectionType, pseudoType?: PseudoType, pseudoFrontColor?: FullColorType, pseudoBackgroundColor?: FullColorType, pseudoBorderColor?: FullColorType, pseudoBorderDirection?: DirectionType) => string;
+export declare const getGeneratedClassName: (className: string, isDefaultValue: boolean | undefined, sizeType?: FullFontSizeType, isAutoSize?: boolean, weightType?: FontWeightType, frontColorType?: FullColorType, backgroundColorType?: FullColorType, borderColorType?: FullColorType, borderDirection?: DirectionType, pseudoType?: PseudoType, pseudoFrontColor?: FullColorType, pseudoBackgroundColor?: FullColorType, pseudoBorderColor?: FullColorType, pseudoBorderDirection?: DirectionType, borderRadius?: FullBorderRadiusType, borderStyle?: FullBorderStyleType, borderWidth?: FullBorderWidthType, padding?: FullPaddingType, margin?: FullMarginType, opacityType?: OpacityType, display?: FullDisplayType, visibility?: FullVisibilityType, cursor?: FullCursorType, overflow?: FullOverflowType, overflowX?: FullOverflowXType, overflowY?: FullOverflowYType) => string;

package/src/components/Layout/Breakpoint/index.d.ts

@@ -0,0 +1,25 @@
+import { IBaseProps } from '../../Engine/Base';
+export declare enum ScreenSizeType {
+    ExtraSmall = "extra-small",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    ExtraLarge = "extra-large",
+    ExtraExtraLarge = "extra-extra-large"
+}
+export declare enum BreakpointCategory {
+    Visible = "visiable",
+    Hidden = "hidden"
+}
+export declare enum BreakpointType {
+    Only = "only",
+    Up = "up",
+    Down = "down"
+}
+export interface IBreakpointDisplayProps extends IBaseProps {
+    category: BreakpointCategory;
+    type?: BreakpointType;
+    breakpoint?: ScreenSizeType | ScreenSizeType[];
+}
+declare const BreakpointDisplay: (props: IBreakpointDisplayProps) => React.JSX.Element;
+export default BreakpointDisplay;

package/src/components/Layout/Dock/index.d.ts

@@ -1,4 +1,4 @@
-import { IBaseProps, IBaseStates } from '../../Engine/Base';
+import { IBaseProps } from '../../Engine/Base';
 import { Property } from 'csstype';
 export declare enum DockCategory {
     Top = "top",
@@ -35,8 +35,5 @@ export type IDockProps = ({
 } | {
     category: NonAlignmentCategory;
 }) & IDockBaseProps;
-export interface IDockStates extends IBaseStates {
-    isMounted: boolean;
-}
 declare const Dock: (props: IDockProps) => React.JSX.Element;
 export default Dock;

package/src/components/Layout/Flex/index.d.ts

@@ -1,4 +1,5 @@
 import { IBaseProps } from '../../Engine/Base';
+import { FullGapType } from '../../Engine';
 export declare enum FlexDirectionType {
     Row = "row",
     RowReverse = "row-reverse",
@@ -39,7 +40,7 @@ export interface IFlexProps extends IBaseProps<'div'> {
     justifyContent?: FlexJustifyContentType;
     alignItems?: FlexAlignItemsType;
     alignContent?: FlexAlignContentType;
-    gap?: string;
+    gap?: FullGapType;
 }
 declare const Flex: (props: IFlexProps) => React.JSX.Element;
 export default Flex;

package/src/components/Layout/Responsive/index.d.ts

@@ -1,6 +1,6 @@
-import { BreakpointType } from '..';
+import { ScreenSizeType } from "../Breakpoint";
 export interface IResponsiveProps {
-    breakpointType?: BreakpointType;
+    breakpointType?: ScreenSizeType;
     desktop: React.JSX.Element;
     mobile: React.JSX.Element;
 }

package/src/components/Layout/XBase/index.d.ts

@@ -1,5 +1,6 @@
 import { Property } from 'csstype';
 import { IBaseProps } from '../../Engine/Base';
+import { FullGapType } from '../../Engine';
 import { FlexAlignContentType, FlexJustifyContentType, FlexWrapType } from '../Flex';
 import { FlexItemAlignSelfType } from '../FlexItem';
 export declare enum XCrossType {
@@ -10,7 +11,7 @@ export declare enum XCrossType {
     Baseline = "baseline"
 }
 export interface IXBaseProps extends IBaseProps {
-    gap?: string;
+    gap?: FullGapType;
     cross?: XCrossType;
     itemsShrink?: Property.FlexShrink;
 }

package/src/components/Layout/YBase/index.d.ts

@@ -1,5 +1,6 @@
 import { Property } from 'csstype';
 import { IBaseProps } from '../../Engine/Base';
+import { FullGapType } from '../../Engine';
 import { FlexAlignContentType, FlexWrapType, FlexJustifyContentType } from '../Flex';
 import { FlexItemAlignSelfType } from '../FlexItem';
 export declare enum YCrossType {
@@ -10,7 +11,7 @@ export declare enum YCrossType {
     Stretch = "stretch"
 }
 export interface IYBaseProps extends IBaseProps {
-    gap?: string;
+    gap?: FullGapType;
     cross?: YCrossType;
     itemsShrink?: Property.FlexShrink;
 }

package/src/components/View/VAnimation/index.d.ts

@@ -77,8 +77,8 @@ export declare enum AnimationCategory {
     RotateOutUpRight = "animate__rotateOutUpRight",
     Hinge = "animate__hinge",
     JackInTheBox = "animate__jackInTheBox",
-    RollIn = "animate__zoomIn",
-    RollOut = "animate__zoomIn",
+    RollIn = "animate__rollIn",
+    RollOut = "animate__rollOut",
     ZoomIn = "animate__zoomIn",
     ZoomInDown = "animate__zoomInDown",
     ZoomInLeft = "animate__zoomInLeft",

package/src/components/View/VAvatar/index.d.ts

@@ -1,6 +1,5 @@
 import { IBaseProps } from '../../Engine/Base';
 import { ColorType } from '../../Engine';
-import './index.scss';
 export interface IVAvatarProps extends IBaseProps {
     avatar: string | React.JSX.Element;
     badge?: string | React.JSX.Element;

package/src/components/View/VErrorBoundary/index.d.ts

@@ -0,0 +1,18 @@
+import { Component, ErrorInfo } from 'react';
+export interface IVErrorBoundaryProps {
+    children: React.ReactNode;
+    fallback?: React.ReactNode | ((error: Error, errorInfo: ErrorInfo) => React.ReactNode);
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+interface IVErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+}
+declare class VErrorBoundary extends Component<IVErrorBoundaryProps, IVErrorBoundaryState> {
+    constructor(props: IVErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<IVErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export default VErrorBoundary;

package/src/components/View/VForm/index.d.ts

@@ -5,9 +5,8 @@ export declare enum HandleSubmitCategory {
 }
 export interface IVFormProps extends IBaseProps<'form'> {
     handleSubmitCategory?: HandleSubmitCategory;
-    handleSubmit: (json: any) => void;
-    handleValidateError?: (input: HTMLInputElement) => void;
-    errorColor?: string;
+    handleSubmit: (data: any) => void;
+    handleValidateError?: (invalidInputs: HTMLInputElement[]) => void;
 }
 declare const VForm: (props: IVFormProps) => React.JSX.Element;
 export default VForm;

package/src/components/View/VImage/index.d.ts

@@ -9,5 +9,5 @@ export declare enum ImageCategory {
 export interface IVImageProps extends IBaseProps<'img'> {
     category?: ImageCategory;
 }
-declare const VImage: (props: IVImageProps) => React.JSX.Element;
-export default VImage;
+declare const _default: import("react").MemoExoticComponent<(props: IVImageProps) => React.JSX.Element>;
+export default _default;

package/src/components/View/VInput/VRange/index.d.ts

@@ -1,3 +1,4 @@
+import { Property } from "csstype";
 import { IBaseInputProps } from "..";
 import { ColorType } from "../../../Engine";
 export type TLength = (string & {}) | 0;
@@ -5,6 +6,7 @@ export interface IVRangeProps extends IBaseInputProps {
     thumbColor: ColorType;
     thumbBorderColor: ColorType;
     trackColor: ColorType;
+    trackHeight?: Property.Height<TLength>;
 }
 declare const VRange: (props: IVRangeProps) => React.JSX.Element;
 export default VRange;

package/src/components/View/VInput/index.d.ts

@@ -1,9 +1,9 @@
-import { IBaseProps, TLength } from "../../Engine/Base";
-import { FontSizeType } from "../../Engine";
+import { IBaseProps } from "../../Engine/Base";
+import { FontSizeType, FullColorType, FullGapType, FullPaddingType } from "../../Engine";
 import { LabelCategory } from "../VLabel";
-import { Property } from 'csstype';
 export interface IBaseInputProps extends IBaseProps<'input'> {
     ref?: React.Ref<HTMLInputElement>;
+    gap?: FullGapType;
     type?: React.HTMLInputTypeAttribute | undefined;
     label?: string;
     icon?: React.JSX.Element;
@@ -13,9 +13,10 @@ export interface IBaseInputProps extends IBaseProps<'input'> {
     isValueShow?: boolean;
     valueSize?: FontSizeType;
     valueCategory?: LabelCategory;
-    valuePadding?: Property.Padding<TLength>;
+    valuePadding?: FullPaddingType;
     inputStyle?: React.CSSProperties;
     inputClassName?: string;
+    placeholderColor?: FullColorType;
     overWrite?: (inputRef: React.RefObject<HTMLInputElement | null>) => React.JSX.Element;
     renderOptions?: (inputRef: React.RefObject<HTMLInputElement | null>) => React.JSX.Element;
 }

package/src/components/View/VLabel/index.d.ts

@@ -53,4 +53,5 @@ export type IVLabelProps<C extends LabelCategory = LabelCategory.Span> = IBasePr
     caption: string | React.JSX.Element;
 };
 declare const VLabel: <C extends LabelCategory>(props: IVLabelProps<C>) => React.JSX.Element;
-export default VLabel;
+declare const _default: typeof VLabel;
+export default _default;

package/src/components/View/VSvg/index.d.ts

@@ -11,5 +11,5 @@ export interface IVSvgProps extends IBaseProps {
     onMouseEnter?: React.MouseEventHandler<any>;
     onMouseLeave?: React.MouseEventHandler<any>;
 }
-declare const VSvg: (props: IVSvgProps) => React.JSX.Element;
-export default VSvg;
+declare const _default: import("react").MemoExoticComponent<(props: IVSvgProps) => React.JSX.Element>;
+export default _default;

package/src/components/View/VTextArea/index.d.ts

@@ -1,9 +1,11 @@
 import { IBaseProps, IBaseStates } from '../../Engine/Base';
+import { FullColorType } from '../../Engine';
 export interface IVTextAreaProps extends IBaseProps<'textarea'> {
     ref?: React.Ref<HTMLTextAreaElement>;
     icon?: React.JSX.Element;
     valueHook?: string;
     setStateHook?: (value: string) => void;
+    placeholderColor?: FullColorType;
 }
 export interface IVTextAreaStates extends IBaseStates {
     value?: string | ReadonlyArray<string> | number | undefined;

package/src/components/View/VTheme/index.d.ts

@@ -1,6 +1,11 @@
 import { BorderRadiusType, ColorType, FontFamilyType, FontSizeType, FontWeightType, LetterSpacingType, LineHeightType, PaddingType, ViewSizeType } from '../../Engine';
 import { IBaseProps } from '../../Engine/Base';
-export interface Theme<C extends string, FS extends string, FW extends string, FF extends string, BR extends string, LH extends string, LS extends string, P extends string, VS extends string> {
+type DefaultColors = ColorType.Font | ColorType.Body | ColorType.White | ColorType.Black | ColorType.Light | ColorType.Light75 | ColorType.Light50 | ColorType.Light25 | ColorType.Dark | ColorType.Dark75 | ColorType.Dark50 | ColorType.Dark25 | ColorType.Primary | ColorType.Primary75 | ColorType.Primary50 | ColorType.Primary25 | ColorType.Secondary | ColorType.Secondary75 | ColorType.Secondary50 | ColorType.Secondary25 | ColorType.Tertiary | ColorType.Tertiary75 | ColorType.Tertiary50 | ColorType.Tertiary25 | ColorType.Info | ColorType.Info75 | ColorType.Info50 | ColorType.Info25 | ColorType.Success | ColorType.Success75 | ColorType.Success50 | ColorType.Success25 | ColorType.Warning | ColorType.Warning75 | ColorType.Warning50 | ColorType.Warning25 | ColorType.Error | ColorType.Error75 | ColorType.Error50 | ColorType.Error25 | ColorType.Border | ColorType.Border75 | ColorType.Border50 | ColorType.Border25 | ColorType.Placeholder | ColorType.Placeholder75 | ColorType.Placeholder50 | ColorType.Placeholder25;
+type DefaultFontSizes = FontSizeType.AutoExtraLarge | FontSizeType.AutoExtraSmall | FontSizeType.AutoLarge | FontSizeType.AutoNormal | FontSizeType.AutoSmall | FontSizeType.Default | FontSizeType.ExtraLarge | FontSizeType.ExtraSmall | FontSizeType.Large | FontSizeType.Normal | FontSizeType.Small;
+type DefaultFontWeights = FontWeightType.Black | FontWeightType.Bold | FontWeightType.ExtraBold | FontWeightType.ExtraLight | FontWeightType.Light | FontWeightType.Medium | FontWeightType.Regular | FontWeightType.SemiBold | FontWeightType.Thin;
+type DefaultBorderRadius = BorderRadiusType.Default | BorderRadiusType.Normal | BorderRadiusType.ExtraSmall | BorderRadiusType.Small | BorderRadiusType.Large | BorderRadiusType.ExtraLarge | BorderRadiusType.Max;
+type DefaultViewSizes = ViewSizeType.Ellipse | ViewSizeType.Image | ViewSizeType.Rectangle | ViewSizeType.Svg | ViewSizeType.Window;
+export interface ThemeVariables<C extends string = DefaultColors, FS extends string = DefaultFontSizes, FW extends string = DefaultFontWeights, FF extends string = FontFamilyType.Default, BR extends string = DefaultBorderRadius, LH extends string = LineHeightType.Default, LS extends string = LetterSpacingType.Default, P extends string = PaddingType.Default, VS extends string = DefaultViewSizes> {
     colors: {
         [key in C]: string;
     };
@@ -36,7 +41,7 @@ export declare enum ThemeCategory {
 export interface IVThemeProps extends IBaseProps {
     category?: ThemeCategory;
     area?: string;
-    theme: Theme<ColorType.Font | ColorType.Body | ColorType.White | ColorType.Black | ColorType.Light | ColorType.Light75 | ColorType.Light50 | ColorType.Light25 | ColorType.Dark | ColorType.Dark75 | ColorType.Dark50 | ColorType.Dark25 | ColorType.Primary | ColorType.Primary75 | ColorType.Primary50 | ColorType.Primary25 | ColorType.Secondary | ColorType.Secondary75 | ColorType.Secondary50 | ColorType.Secondary25 | ColorType.Tertiary | ColorType.Tertiary75 | ColorType.Tertiary50 | ColorType.Tertiary25 | ColorType.Info | ColorType.Info75 | ColorType.Info50 | ColorType.Info25 | ColorType.Success | ColorType.Success75 | ColorType.Success50 | ColorType.Success25 | ColorType.Warning | ColorType.Warning75 | ColorType.Warning50 | ColorType.Warning25 | ColorType.Error | ColorType.Error75 | ColorType.Error50 | ColorType.Error25 | ColorType.Border | ColorType.Border75 | ColorType.Border50 | ColorType.Border25 | ColorType.Placeholder | ColorType.Placeholder75 | ColorType.Placeholder50 | ColorType.Placeholder25, FontSizeType.AutoExtraLarge | FontSizeType.AutoExtraSmall | FontSizeType.AutoLarge | FontSizeType.AutoNormal | FontSizeType.AutoSmall | FontSizeType.Default | FontSizeType.ExtraLarge | FontSizeType.ExtraSmall | FontSizeType.Large | FontSizeType.Normal | FontSizeType.Small, FontWeightType.Black | FontWeightType.Bold | FontWeightType.ExtraBold | FontWeightType.ExtraLight | FontWeightType.Light | FontWeightType.Medium | FontWeightType.Regular | FontWeightType.SemiBold | FontWeightType.Thin, FontFamilyType.Default, BorderRadiusType.Default | BorderRadiusType.Fixed | BorderRadiusType.Max, LineHeightType.Default, LetterSpacingType.Default, PaddingType.Default, ViewSizeType.Ellipse | ViewSizeType.Image | ViewSizeType.Rectangle | ViewSizeType.Svg | ViewSizeType.Window>;
+    variables: ThemeVariables;
 }
 declare const VTheme: React.FC<IVThemeProps>;
 export default VTheme;