@fewbox/den-web 0.1.43 → 0.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewbox/den-web",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "main": "index.js",
   "types": "index-web.d.ts",
   "repository": "https://github.com/FewBox/fewbox-den.git",

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,4 +274,4 @@ export declare enum DirectionType {
     TopBottom = "top-bottom",
     LeftRight = "left-right"
 }
-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/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

@@ -13,6 +13,6 @@ declare class VErrorBoundary extends Component<IVErrorBoundaryProps, IVErrorBoun
     constructor(props: IVErrorBoundaryProps);
     static getDerivedStateFromError(error: Error): Partial<IVErrorBoundaryState>;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | 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> | null | undefined;
+    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/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/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;

package/src/components/core.d.ts

@@ -1,9 +1,10 @@
-export { default as Base, IBaseProps, IBaseStates, IBaseReturn, IViewProps } from './Engine/Base';
-export { BreakpointType } from './Layout';
+export { default as Base } from './Engine/Base';
+export type { IBaseProps, IBaseStates, IBaseReturn, IViewProps } from './Engine/Base';
 export { default as VZone, ZoneCategory } from './View/VZone';
-export { default as Display, DisplayCategory, DisplayType } from './Layout/Display';
+export { default as BreakpointDisplay, ScreenSizeType, BreakpointCategory, BreakpointType } from './Layout/Breakpoint';
 export { default as Responsive } from './Layout/Responsive';
-export { FontSizeType, FontWeightType, FontFamilyType, BorderRadiusType, LineHeightType, LetterSpacingType, PaddingType, ViewSizeType, FullColorType, ColorType, getGeneratedClassName } from './Engine';
+export { FontSizeType, FontWeightType, FontFamilyType, BorderRadiusType, BorderStyleType, BorderWidthType, LineHeightType, LetterSpacingType, PaddingType, MarginType, GapType, OpacityType, DisplayType, VisibilityType, CursorType, OverflowType, OverflowXType, OverflowYType, ViewSizeType, ColorType, getGeneratedClassName } from './Engine';
+export type { FullBorderRadiusType, FullBorderStyleType, FullBorderWidthType, FullPaddingType, FullMarginType, FullGapType, FullDisplayType, FullVisibilityType, FullCursorType, FullOverflowType, FullOverflowXType, FullOverflowYType, FullColorType } from './Engine';
 export { default as Dock, DockCategory, DockAlignment } from './Layout/Dock';
 export { default as Position, PositionCategory, PositionType } from './Layout/Position';
 export { default as PositionArea, PositionAreaCategory } from './Layout/PositionArea';
@@ -88,8 +89,10 @@ export { default as VWeek } from './View/VInput/VWeek';
 export { default as VHidden } from './View/VInput/VHidden';
 export { default as VGroup } from './View/VInput/VGroup';
 export { default as VSwitch } from './View/VSwitch';
-export { default as VSelect, ISelectItemData } from './View/VSelect';
-export { default as VDropdown, IDropdownItemData } from './View/VInput/VDropdown';
+export { default as VSelect } from './View/VSelect';
+export type { ISelectItemData } from './View/VSelect';
+export { default as VDropdown } from './View/VInput/VDropdown';
+export type { IDropdownItemData } from './View/VInput/VDropdown';
 export { default as VSvg, SvgCategory } from './View/VSvg';
 export { default as VHyperlink, HyperlinkCategory } from './View/VHyperlink';
 export { default as VImage, ImageCategory } from './View/VImage';
@@ -110,7 +113,7 @@ export { default as VHR } from './View/VHR';
 export { default as VSection } from './View/VSection';
 export { default as VMask } from './View/VMask';
 export { default as VFrame } from './View/VFrame';
-export { default as VTheme, ThemeCategory } from './View/VTheme';
+export { default as VTheme, ThemeCategory, type ThemeVariables } from './View/VTheme';
 export { default as VTooltip, TooltipCategory } from './View/VTooltip';
 export { default as VLoading } from './View/VLoading';
 export { default as VErrorBoundary } from './View/VErrorBoundary';

package/src/components/web.d.ts

@@ -1,9 +1,12 @@
 export * from './core';
 export { default as Debug } from './Debug';
 export { default as VChromeExtensionValidator, ExtensionStatus } from './View/VChromeExtensionValidator';
-export { default as VGoogleFont, IGoogleTypeface, IGoogleFont, GoogleFontType } from './View/VGoogleFont';
-export { default as GoogleGrant, GoogleGrantCategory, GoogleGrantUXMode, GoogleGrantCode, GoogleGrantToken } from './Auth/GoogleGrant';
+export { default as VGoogleFont, GoogleFontType } from './View/VGoogleFont';
+export type { IGoogleTypeface, IGoogleFont } from './View/VGoogleFont';
+export { default as GoogleGrant, GoogleGrantCategory, GoogleGrantUXMode } from './Auth/GoogleGrant';
+export type { GoogleGrantCode, GoogleGrantToken } from './Auth/GoogleGrant';
 export { default as FigmaSignin } from './Auth/FigmaSignin';
 export { default as GoogleSignin, GoogleSigninUXMode } from './Auth/GoogleSignin';
 export { default as WeComSignin } from './Auth/WeComSignin';
-export { IUserProfile, parseJWT } from './Auth/util';
+export { parseJWT } from './Auth/util';
+export type { IUserProfile } from './Auth/util';

package/src/store/index.d.ts

@@ -1,7 +1,7 @@
-export { default as IList } from './IList';
-export { default as IPaging } from './IPaging';
-export { default as IContinuePaging } from './IContinuePaging';
-export { EnumDictionary } from './EnumDictionary';
+export type { default as IList } from './IList';
+export type { default as IPaging } from './IPaging';
+export type { default as IContinuePaging } from './IContinuePaging';
+export type { EnumDictionary } from './EnumDictionary';
 export type { Json } from './Json';
-export { default as IMetaResponse } from './IMetaResponse';
-export { default as IPayloadResponse } from './IPayloadResponse';
+export type { default as IMetaResponse } from './IMetaResponse';
+export type { default as IPayloadResponse } from './IPayloadResponse';

package/templates/style/_core.scss

@@ -268,6 +268,16 @@ $border-positions: "all", "top", "right", "bottom", "left", "except-top", "excep
         border-color: var(#{v.$var-prefix}color-#{$color}) !important;
     }
 }
+/* placeholder */
+@each $color, $value in v.$colors {
+    .#{$color}-placeholder {
+        &::placeholder,
+        & input::placeholder,
+        & textarea::placeholder {
+            color: var(#{v.$var-prefix}color-#{$color});
+        }
+    }
+}
 /* size */
 @each $font-size, $value in v.$font-sizes {
     .font-size-#{$font-size} {
@@ -286,3 +296,75 @@ $border-positions: "all", "top", "right", "bottom", "left", "except-top", "excep
         font-weight: var(#{v.$var-prefix}font-weight-#{$font-weight});
     }
 }
+/* padding */
+@each $padding, $value in v.$paddings {
+    .padding-#{$padding} {
+        padding: var(#{v.$var-prefix}padding-#{$padding});
+    }
+}
+/* margin */
+@each $margin, $value in v.$margins {
+    .margin-#{$margin} {
+        margin: var(#{v.$var-prefix}margin-#{$margin});
+    }
+}
+/* border style */
+@each $border-style, $value in v.$border-styles {
+    .border-style-#{$border-style} {
+        border-style: var(#{v.$var-prefix}border-style-#{$border-style});
+    }
+}
+/* border width */
+@each $border-width, $value in v.$border-widths {
+    .border-width-#{$border-width} {
+        border-width: var(#{v.$var-prefix}border-width-#{$border-width});
+    }
+}
+/* border radius */
+@each $border-radius, $value in v.$border-radius-sizes {
+    .border-radius-#{$border-radius} {
+        border-radius: var(#{v.$var-prefix}border-radius-#{$border-radius});
+    }
+}
+/* opacity */
+@each $opacity, $value in v.$opacities {
+    .opacity-#{$opacity} {
+        opacity: var(#{v.$var-prefix}opacity-#{$opacity});
+    }
+}
+/* visibility */
+@each $visibility, $value in v.$visibilities {
+    .visibility-#{$visibility} {
+        visibility: var(#{v.$var-prefix}visibility-#{$visibility});
+    }
+}
+/* display */
+@each $display, $value in v.$displays {
+    .display-#{$display} {
+        display: var(#{v.$var-prefix}display-#{$display}) !important;
+    }
+}
+/* overflow */
+@each $overflow, $value in v.$overflows {
+    .overflow-#{$overflow} {
+        overflow: var(#{v.$var-prefix}overflow-#{$overflow});
+    }
+}
+/* overflow-x */
+@each $overflow, $value in v.$overflows {
+    .overflow-x-#{$overflow} {
+        overflow-x: var(#{v.$var-prefix}overflow-x-#{$overflow});
+    }
+}
+/* overflow-y */
+@each $overflow, $value in v.$overflows {
+    .overflow-y-#{$overflow} {
+        overflow-y: var(#{v.$var-prefix}overflow-y-#{$overflow});
+    }
+}
+/* cursor */
+@each $cursor, $value in v.$cursors {
+    .cursor-#{$cursor} {
+        cursor: var(#{v.$var-prefix}cursor-#{$cursor});
+    }
+}