@itcase/ui 1.8.93 → 1.8.95

package/dist/types/components/Logo/Logo.d.ts

@@ -1,8 +1,4 @@
-import type { LogoConfig } from './Logo.interface';
+import type { LogoConfig, LogoProps } from './Logo.interface';
 declare const logoConfig: LogoConfig;
-declare const Logo: import("react").ForwardRefExoticComponent<{
-    imageSrc?: string;
-    src?: string;
-    svgSrc?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+declare const Logo: import("react").ForwardRefExoticComponent<Omit<LogoProps, "ref"> & import("react").RefAttributes<unknown>>;
 export { Logo, logoConfig };

package/dist/types/components/Response/Response.d.ts

@@ -1,8 +1,4 @@
-import type { ResponseConfig } from './Response.interface';
+import type { ResponseConfig, ResponseProps } from './Response.interface';
 declare const responseConfig: ResponseConfig;
-declare const Response: import("react").ForwardRefExoticComponent<{
-    imageSrc?: string;
-    src?: string;
-    svgSrc?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+declare const Response: import("react").ForwardRefExoticComponent<Omit<ResponseProps, "ref"> & import("react").RefAttributes<unknown>>;
 export { Response, responseConfig };

package/dist/types/components/SVGContent/SVGContent.d.ts

@@ -1,6 +1,3 @@
-declare const SVGContent: import("react").ForwardRefExoticComponent<{
-    imageSrc?: string;
-    src?: string;
-    svgSrc?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+import type { SVGContentProps } from './SVGContent.interface';
+declare const SVGContent: import("react").ForwardRefExoticComponent<Omit<SVGContentProps, "ref"> & import("react").RefAttributes<unknown>>;
 export { SVGContent };

package/dist/types/components/Tile/Tile.appearance.d.ts

@@ -1,2 +1,60 @@
-import { TileAppearanceType } from './Tile.interface';
-export declare const tileAppearance: TileAppearanceType;
+export declare const tileAppearance: {
+    solid?: import("./Tile.interface").TileAppearanceProps | undefined;
+    outlined?: import("./Tile.interface").TileAppearanceProps | undefined;
+    full?: import("./Tile.interface").TileAppearanceProps | undefined;
+    ghost?: import("./Tile.interface").TileAppearanceProps | undefined;
+    accentPrimary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    accentQuaternary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    accentSecondary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    accentTertiary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    dangerPrimary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    dangerQuaternary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    dangerSecondary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    dangerTertiary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    disabledPrimary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    disabledQuaternary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    disabledSecondary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    disabledTertiary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    errorPrimary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    errorQuaternary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    errorSecondary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    errorTertiary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    extraPrimary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    extraQuaternary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    extraSecondary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    extraTertiary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    infoPrimary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    infoQuaternary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    infoSecondary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    infoTertiary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    specialPrimary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    specialQuaternary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    specialSecondary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    specialTertiary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    successPrimary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    successQuaternary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    successSecondary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    successTertiary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    surfacePrimary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    surfaceQuaternary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    surfaceSecondary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    surfaceTertiary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    warningPrimary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    warningQuaternary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    warningSecondary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    warningTertiary?: import("./Tile.interface").TileAppearanceProps | undefined;
+    circular?: import("./Tile.interface").TileAppearanceProps | undefined;
+    geometric?: import("./Tile.interface").TileAppearanceProps | undefined;
+    rounded?: import("./Tile.interface").TileAppearanceProps | undefined;
+    roundedL?: import("./Tile.interface").TileAppearanceProps | undefined;
+    roundedM?: import("./Tile.interface").TileAppearanceProps | undefined;
+    roundedS?: import("./Tile.interface").TileAppearanceProps | undefined;
+    roundedXL?: import("./Tile.interface").TileAppearanceProps | undefined;
+    sizeXXS?: import("./Tile.interface").TileAppearanceProps | undefined;
+    sizeXS?: import("./Tile.interface").TileAppearanceProps | undefined;
+    sizeS?: import("./Tile.interface").TileAppearanceProps | undefined;
+    sizeM?: import("./Tile.interface").TileAppearanceProps | undefined;
+    sizeL?: import("./Tile.interface").TileAppearanceProps | undefined;
+    sizeXL?: import("./Tile.interface").TileAppearanceProps | undefined;
+    sizeXXL?: import("./Tile.interface").TileAppearanceProps | undefined;
+};

package/dist/types/components/Tile/Tile.interface.d.ts

@@ -1,45 +1,57 @@
 import { CSSProperties, ReactNode } from 'react';
-import { AlignDirectionProps, AlignProps, AppearanceKeysDefault, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, DirectionProps, FillProps, ShapeProps, SizeProps, TextAlignProps, TextColorProps, TextSizeProps, TextWeightProps, TextWrapProps, TitleSizeProps } from '@itcase/types';
+import { AlignProps, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, DirectionProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, FillSizeProps, IconSizeProps, ItemFillProps, ShapeProps, ShapeStrengthProps, SizeProps, TextAlignProps, TextColorProps, TextSizeProps, TextWeightProps, TextWrapProps, TitleSizeProps } from '@itcase/types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
-export interface TileThemeColor {
-    [key: number | string | symbol]: any;
+type TileAppearanceProps = {
+    badgeAppearanceSize?: AppearanceSizeKey;
+    badgeShape?: ShapeProps;
+    badgeSize?: SizeProps;
+    badgeTextColor?: TextColorProps;
+    badgeTextSize?: TextSizeProps;
     borderColor?: BorderColorProps;
+    borderColorHover?: BorderColorHoverProps;
+    borderType?: BorderTypeProps;
+    borderWidth?: BorderWidthProps;
+    descTextColor?: TextColorProps;
+    descTextSize?: TextSizeProps;
+    descTextWrap?: TextWrapProps;
+    direction?: DirectionProps;
     fill?: FillProps;
+    fillActive?: FillActiveProps;
+    fillActiveHover?: FillActiveHoverProps;
+    fillDisabled?: FillProps;
+    fillHover?: FillHoverProps;
+    iconAppearance?: CompositeAppearanceKey;
+    iconFill?: FillProps;
+    iconFillIcon?: ItemFillProps;
+    iconFillSize?: FillSizeProps;
+    iconShape?: ShapeProps;
+    iconSize?: IconSizeProps;
     shape?: ShapeProps;
+    shapeStrength?: ShapeStrengthProps;
+    size?: SizeProps;
     textColor?: TextColorProps;
     textSize?: TextSizeProps;
     titleTextColor?: TextColorProps;
     titleTextSize?: TitleSizeProps;
-}
-type AppearanceKeys = AppearanceKeysDefault & {};
-export type TileAppearanceType = {
-    [key in AppearanceKeys]?: TileThemeColor;
 };
-export interface TileConfig {
-    [key: number | string | symbol]: any;
-    appearance: TileAppearanceType | undefined;
-    setAppearance: (newComponent: TileAppearanceType) => void;
-}
-export interface TileProps extends TileThemeColor, StyleAttributes {
-    [key: number | string | symbol]: any;
+type TileProps = StyleAttributes & TileAppearanceProps & {
     after?: ReactNode;
     align?: AlignProps;
-    alignDirection?: AlignDirectionProps;
-    appearance?: AppearanceKeys;
+    appearance?: CompositeAppearanceKey;
     badge?: string;
     badgeAppearance?: AppearanceKeysDefault;
-    badgeSize?: SizeProps;
-    badgeTextColor?: TextColorProps;
-    badgeTextSize?: TextSizeProps;
+    badgeValue?: string;
     before?: ReactNode;
-    borderColorHover?: BorderColorHoverProps;
-    borderType?: BorderTypeProps;
-    borderWidth?: BorderWidthProps;
     children?: ReactNode;
     className?: string;
+    dataTestId?: string;
+    dataTour?: string;
+    desc?: string;
     direction?: DirectionProps;
-    reverse?: boolean;
-    size?: string;
+    icon?: string;
+    iconSrc?: string;
+    isSkeleton?: boolean;
+    onClick?: () => void;
     style?: CSSProperties;
     text?: string;
     textWrap?: TextWrapProps;
@@ -48,7 +60,13 @@ export interface TileProps extends TileThemeColor, StyleAttributes {
     titleTextWeight?: TextWeightProps;
     titleTextWrap?: TextWrapProps;
     type?: string;
-    isSkeleton: boolean;
-    onClick?: () => void;
-}
-export {};
+};
+type TileAppearanceKey = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizeKey | AppearanceStyleKey;
+type TileAppearance = {
+    [key in TileAppearanceKey]?: TileAppearanceProps;
+};
+type TileConfig = {
+    appearance: TileAppearance;
+    setAppearance: (appearanceConfig: TileAppearance) => void;
+};
+export type { TileAppearanceProps, TileAppearance, TileConfig, TileProps };

package/dist/types/components/Tile/appearance/tileShape.d.ts

@@ -1,25 +1,3 @@
-declare const tileAppearanceShape: {
-    circular: {
-        shape: string;
-    };
-    rounded: {
-        shape: string;
-    };
-    roundedS: {
-        shape: string;
-        shapeStrength: string;
-    };
-    roundedM: {
-        shape: string;
-        shapeStrength: string;
-    };
-    roundedL: {
-        shape: string;
-        shapeStrength: string;
-    };
-    roundedXL: {
-        shape: string;
-        shapeStrength: string;
-    };
-};
+import type { TileAppearance } from '../Tile.interface';
+declare const tileAppearanceShape: TileAppearance;
 export { tileAppearanceShape };

package/dist/types/components/Tile/appearance/tileSize.d.ts

@@ -1,51 +1,3 @@
-declare const tileAppearanceSize: {
-    sizeXL: {
-        size: string;
-        titleTextSize: string;
-        descTextSize: string;
-        badgeAppearanceSize: string;
-        iconFillSize: string;
-        iconSize: string;
-    };
-    sizeL: {
-        size: string;
-        titleTextSize: string;
-        descTextSize: string;
-        badgeAppearanceSize: string;
-        iconFillSize: string;
-        iconSize: string;
-    };
-    sizeM: {
-        size: string;
-        titleTextSize: string;
-        descTextSize: string;
-        badgeAppearanceSize: string;
-        iconFillSize: string;
-        iconSize: string;
-    };
-    sizeS: {
-        size: string;
-        titleTextSize: string;
-        descTextSize: string;
-        badgeAppearanceSize: string;
-        iconFillSize: string;
-        iconSize: string;
-    };
-    sizeXS: {
-        size: string;
-        titleTextSize: string;
-        descTextSize: string;
-        badgeAppearanceSize: string;
-        iconFillSize: string;
-        iconSize: string;
-    };
-    sizeXXS: {
-        size: string;
-        titleTextSize: string;
-        descTextSize: string;
-        badgeAppearanceSize: string;
-        iconFillSize: string;
-        iconSize: string;
-    };
-};
+import type { TileAppearance } from '../Tile.interface';
+declare const tileAppearanceSize: TileAppearance;
 export { tileAppearanceSize };

package/dist/types/components/Tile/appearance/tileStyle.d.ts

@@ -1,14 +1,3 @@
-declare const tileAppearanceStyle: {
-    solid: {
-        borderColor: string;
-    };
-    outlined: {
-        fill: string;
-    };
-    full: {};
-    ghost: {
-        fill: string;
-        borderColor: string;
-    };
-};
+import type { TileAppearance } from '../Tile.interface';
+declare const tileAppearanceStyle: TileAppearance;
 export { tileAppearanceStyle };

package/dist/types/components/Tile/appearance/tileSurface.d.ts

@@ -1,39 +1,3 @@
-declare const tileAppearanceSurface: {
-    surfacePrimary: {
-        fill: string;
-        fillHover: string;
-        titleTextColor: string;
-        descTextColor: string;
-        borderColor: string;
-        badgeAppearance: string;
-        iconFillIcon: string;
-    };
-    surfaceSecondary: {
-        fill: string;
-        fillHover: string;
-        titleTextColor: string;
-        descTextColor: string;
-        borderColor: string;
-        badgeAppearance: string;
-        iconFillIcon: string;
-    };
-    surfaceTertiary: {
-        fill: string;
-        fillHover: string;
-        titleTextColor: string;
-        descTextColor: string;
-        borderColor: string;
-        badgeAppearance: string;
-        iconFillIcon: string;
-    };
-    surfaceQuaternary: {
-        fill: string;
-        fillHover: string;
-        titleTextColor: string;
-        descTextColor: string;
-        borderColor: string;
-        badgeAppearance: string;
-        iconFillIcon: string;
-    };
-};
+import type { TileAppearance } from '../Tile.interface';
+declare const tileAppearanceSurface: TileAppearance;
 export { tileAppearanceSurface };

package/dist/types/hoc/urlWithAssetPrefix.d.ts

@@ -1,8 +1,9 @@
-import React, { type ComponentType } from 'react';
+import React, { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, type ComponentType } from 'react';
 type UrlWithAssetPrefixProps = {
     imageSrc?: string;
+    placeholderUrl?: string;
     src?: string;
     svgSrc?: string;
 };
-declare const urlWithAssetPrefix: (WrappedComponent: ComponentType<UrlWithAssetPrefixProps>) => React.ForwardRefExoticComponent<UrlWithAssetPrefixProps & React.RefAttributes<HTMLDivElement>>;
+declare const urlWithAssetPrefix: <P extends UrlWithAssetPrefixProps, R = unknown>(WrappedComponent: ComponentType<P> | ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<R>>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
 export { urlWithAssetPrefix };

package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.d.ts

@@ -1,3 +1,8 @@
-import type { AppearanceConfig, ComponentProps, DevicePropsGenerator } from './useDevicePropsGenerator.interface';
-declare function useDevicePropsGenerator(componentProps: ComponentProps, appearanceConfig?: AppearanceConfig): DevicePropsGenerator;
+import { KebabCase, WithClassKeys } from 'src/types';
+import type { AppearanceConfig, ComponentProps, GeneratorGetClassParams as GP } from './useDevicePropsGenerator.interface';
+declare function useDevicePropsGenerator<Props extends ComponentProps>(componentProps: Props, appearanceConfig?: AppearanceConfig): Props & {
+    getProp(propKey: string): string;
+    getClassName<K extends keyof Props, P extends GP | undefined = undefined>(propKey: K, params?: P): ReturnGetClassName<Props, K, P>;
+} & WithClassKeys<Props>;
+type ReturnGetClassName<Props, K extends keyof Props, Params = undefined> = Params extends undefined ? NonNullable<Props[K]> extends string ? KebabCase<NonNullable<Props[K]>> : string : Props[K];
 export { useDevicePropsGenerator };

package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.interface.d.ts

@@ -11,13 +11,4 @@ interface GeneratorGetClassParams {
     prefix?: string;
     replace?: [RegExp, string];
 }
-type GetClass = (propsKey: keyof ComponentProps, params?: GeneratorGetClassParams) => string;
-interface DevicePropsGenerator {
-    [key: string]: string;
-    /**
-     * Function to create class from props or appearance config by passing key and prefix(optional)
-     * @return string: `${prefix}${formattedPropsValue}.toLowerCase()` like "border-color_item-primary"
-     */
-    getClass: GetClass;
-}
-export type { ComponentProps, AppearanceConfig, GeneratorGetClassParams, DevicePropsGenerator, };
+export type { ComponentProps, AppearanceConfig, GeneratorGetClassParams };

package/dist/types/hooks/useStyles/styleAttributes.interface.d.ts

@@ -1,148 +1,124 @@
 import type * as CSS from 'csstype';
-import { OverflowProps, TextAlignProps } from '@itcase/types';
+import { HeightProps, ResizeModeProps, WidthProps } from '@itcase/types';
 export interface StyleAttributes {
     /**
      * Layout
      */
-    alignContent?: string;
-    alignItems?: string;
-    alignSelf?: string;
+    alignContent?: CSS.Property.AlignContent;
+    alignItems?: CSS.Property.AlignItems;
+    alignSelf?: CSS.Property.AlignSelf;
     aspectRatio?: CSS.Property.AspectRatio;
     /**
      * Filter
      */
-    backdropFilter?: string;
+    backdropFilter?: CSS.Property.BackdropFilter;
     /**
      * View
      */
-    background?: string;
-    backgroundColor?: string;
-    border?: string;
-    borderBottomColor?: string;
-    borderBottomEndRadius?: string;
-    borderBottomLeftRadius?: string;
-    borderBottomRightRadius?: string;
-    borderBottomStartRadius?: string;
-    borderBottomWidth?: string;
-    borderCurve?: string;
-    borderEndColor?: string;
-    borderEndWidth?: string;
-    borderLeftColor?: string;
-    borderLeftWidth?: string;
-    borderRadius?: string;
-    borderRightColor?: string;
-    borderRightWidth?: string;
-    borderStartColor?: string;
-    borderStartWidth?: string;
-    borderStyle?: string;
-    borderTopColor?: string;
-    borderTopEndRadius?: string;
-    borderTopLeftRadius?: string;
-    borderTopRightRadius?: string;
-    borderTopStartRadius?: string;
-    borderTopWidth?: string;
-    bottom?: string;
+    background?: CSS.Property.Background;
+    backgroundColor?: CSS.Property.BackgroundColor;
+    border?: CSS.Property.Border;
+    borderBottomColor?: CSS.Property.BorderColor;
+    borderBottomLeftRadius?: CSS.Property.BorderBottomLeftRadius;
+    borderBottomRightRadius?: CSS.Property.BorderBottomRightRadius;
+    borderBottomWidth?: CSS.Property.BorderBottomWidth;
+    borderLeftColor?: CSS.Property.BorderColor;
+    borderLeftWidth?: CSS.Property.BorderLeftWidth;
+    borderRadius?: CSS.Property.BorderRadius;
+    borderRightColor?: CSS.Property.BorderColor;
+    borderRightWidth?: CSS.Property.BorderRightWidth;
+    borderStyle?: CSS.Property.BorderStyle;
+    borderTopColor?: CSS.Property.BorderColor;
+    borderTopLeftRadius?: CSS.Property.BorderTopLeftRadius;
+    borderTopRightRadius?: CSS.Property.BorderTopRightRadius;
+    borderTopWidth?: CSS.Property.BorderTopWidth;
+    bottom?: CSS.Property.Bottom;
     /**
      * Text
      */
-    color?: string;
-    columnGap?: string;
-    columnWidth?: string;
-    cursor?: string;
+    color?: CSS.Property.Color;
+    columnGap?: CSS.Property.ColumnGap;
+    columnWidth?: CSS.Property.ColumnWidth;
+    cursor?: CSS.Property.Cursor;
     display?: CSS.Property.Display;
-    end?: string;
     flex?: CSS.Property.Flex;
     flexBasis?: CSS.Property.FlexBasis;
     flexDirection?: CSS.Property.FlexDirection;
     flexShrink?: CSS.Property.FlexShrink;
     flexWrap?: CSS.Property.FlexWrap;
-    fontFamily?: string;
-    fontSize?: string;
+    fontFamily?: CSS.Property.FontFamily;
+    fontSize?: CSS.Property.FontSize;
     fontStyle?: CSS.Property.FontStyle;
-    fontVariant?: string;
+    fontVariant?: CSS.Property.FontVariant;
     fontWeight?: CSS.Property.FontWeight;
-    gap?: string;
+    gap?: CSS.Property.Gap;
     /**
      * Grid
      */
-    gridArea?: string;
-    gridAutoColumns?: string;
-    gridAutoFlow?: string;
-    gridAutoRows?: string;
-    gridColumn?: string;
-    gridColumnGap?: string;
-    gridRow?: string;
-    gridRowGap?: string;
-    gridTemplate?: string;
-    gridTemplateAreas?: string;
-    gridTemplateColumns?: string;
-    gridTemplateRows?: string;
-    height?: string;
-    left?: string;
-    letterSpacing?: string;
-    lineHeight?: string;
-    margin?: string;
-    marginBottom?: string;
-    marginEnd?: string;
-    marginHorizontal?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    marginStart?: string;
-    marginTop?: string;
-    marginVertical?: string;
-    maxHeight?: string;
-    maxWidth?: string;
-    minHeight?: string;
-    minWidth?: string;
+    gridArea?: CSS.Property.GridArea;
+    gridAutoColumns?: CSS.Property.GridAutoColumns;
+    gridAutoFlow?: CSS.Property.GridAutoFlow;
+    gridAutoRows?: CSS.Property.GridAutoRows;
+    gridColumn?: CSS.Property.GridColumn;
+    gridColumnGap?: CSS.Property.GridColumnGap;
+    gridRow?: CSS.Property.GridRow;
+    gridRowGap?: CSS.Property.GridRowGap;
+    gridTemplate?: CSS.Property.GridTemplate;
+    gridTemplateAreas?: CSS.Property.GridTemplateAreas;
+    gridTemplateColumns?: CSS.Property.GridTemplateColumns;
+    gridTemplateRows?: CSS.Property.GridTemplateRows;
+    height?: CSS.Property.Height | HeightProps;
+    left?: CSS.Property.Left;
+    letterSpacing?: CSS.Property.LetterSpacing;
+    lineHeight?: CSS.Property.LineHeight;
+    margin?: CSS.Property.Margin;
+    marginBottom?: CSS.Property.MarginBottom;
+    marginHorizontal?: CSS.Property.Margin;
+    marginLeft?: CSS.Property.MarginLeft;
+    marginRight?: CSS.Property.MarginRight;
+    marginTop?: CSS.Property.MarginTop;
+    marginVertical?: CSS.Property.Margin;
+    maxHeight?: CSS.Property.MaxHeight;
+    maxWidth?: CSS.Property.MaxWidth;
+    minHeight?: CSS.Property.MinHeight;
+    minWidth?: CSS.Property.MinWidth;
     /**
      * Image
      */
     objectFit?: CSS.Property.ObjectFit;
     objectPosition?: CSS.Property.ObjectPosition;
-    opacity?: string;
+    opacity?: CSS.Property.Opacity;
     order?: CSS.Property.Order;
-    overflow?: OverflowProps;
+    overflow?: CSS.Property.Overflow;
     overlayColor?: string;
-    padding?: string;
-    paddingBottom?: string;
-    paddingEnd?: string;
-    paddingHorizontal?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    paddingStart?: string;
-    paddingTop?: string;
-    paddingVertical?: string;
-    position?: string;
-    resizeMode?: string;
-    right?: string;
-    rowGap?: string;
-    /**
-     * Shadow
-     */
-    shadowColor?: string;
-    shadowOffset?: string;
-    shadowOpacity?: string;
-    shadowRadius?: string;
-    start?: string;
-    textAlign?: TextAlignProps;
+    padding?: CSS.Property.Padding;
+    paddingBottom?: CSS.Property.PaddingBottom;
+    paddingEnd?: CSS.Property.Padding;
+    paddingHorizontal?: CSS.Property.Padding;
+    paddingLeft?: CSS.Property.PaddingLeft;
+    paddingRight?: CSS.Property.PaddingRight;
+    paddingStart?: CSS.Property.Padding;
+    paddingTop?: CSS.Property.PaddingTop;
+    paddingVertical?: CSS.Property.Padding;
+    position?: CSS.Property.Position;
+    resizeMode?: ResizeModeProps;
+    right?: CSS.Property.Right;
+    rowGap?: CSS.Property.RowGap;
+    textAlign?: CSS.Property.TextAlign;
     textDecorationColor?: string;
     textDecorationLine?: string;
-    textDecorationStyle?: string;
-    textShadowColor?: string;
-    textShadowOffset?: string;
-    textShadowRadius?: string;
+    textDecorationStyle?: CSS.Property.TextDecorationStyle;
     textTransform?: CSS.Property.TextTransform;
-    tintColor?: string;
-    top?: string;
+    top?: CSS.Property.Top;
     /**
      * Transform
      */
     transform?: CSS.Property.Transform;
     verticalAlign?: CSS.Property.VerticalAlign;
     whiteSpace?: CSS.Property.WhiteSpace;
-    width?: string;
+    width?: CSS.Property.Width | WidthProps;
     writingMode?: CSS.Property.WritingMode;
-    zIndex?: string;
+    zIndex?: CSS.Property.ZIndex;
 }
 type WrappedInterface<T> = {
     [P in keyof T as `${P & string}Wrapper`]: T[P];

package/dist/types/types/index.d.ts

@@ -0,0 +1 @@
+export * from './utils';

package/dist/types/types/utils.d.ts

@@ -0,0 +1,9 @@
+export type ExactlyOne<K extends PropertyKey, V> = {
+    [P in K]: Partial<Record<Exclude<K, P>, never>> & {
+        [Q in P]: V;
+    };
+}[K];
+export type WithClassKeys<T> = T & {
+    [K in keyof T & string as `${K}Class`]: NonNullable<T[K]> extends string ? KebabCase<T[K]> | undefined : string | undefined;
+};
+export type KebabCase<S> = S extends string ? S extends `${infer F}${infer R}` ? R extends Uncapitalize<R> ? `${Lowercase<F>}${KebabCase<R>}` : `${Lowercase<F>}-${KebabCase<Uncapitalize<R>>}` : Lowercase<S> : never;