@cronocode/react-box 0.3.9 → 0.4.1

package/box.d.ts

@@ -1,173 +1,8 @@
 import React from 'react';
-import { SizeType, ColorType, CursorType, FontSizeType, BaseFontColorType, BaseBgColorType, BaseBorderColorType, BackgroundType, ShadowType, BaseOutlineColorType } from './css.variables';
-import { Hovered } from './types';
+import { BoxStyles } from './types';
 import ClassNameUtils from './utils/className/classNameUtils';
-interface BoxDisplay {
-    display?: 'none' | 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid';
-    inline?: boolean;
-}
-interface BoxSizing {
-    boxSizing?: 'border-box' | 'content-box';
-}
-interface BoxPosition {
-    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
-    inset?: SizeType;
-    top?: SizeType;
-    right?: SizeType;
-    bottom?: SizeType;
-    left?: SizeType;
-}
-declare type BoxSizeValue = 'fit' | 'fit-screen' | 'auto' | 'fit-content' | 'max-content' | 'min-content';
-interface BoxSize {
-    width?: BoxSizeValue;
-    height?: BoxSizeValue;
-    minWidth?: BoxSizeValue;
-    minHeight?: BoxSizeValue;
-    maxWidth?: BoxSizeValue;
-    maxHeight?: BoxSizeValue;
-}
-interface BoxMargin {
-    margin?: SizeType | 'auto';
-    m?: SizeType | 'auto';
-    marginHorizontal?: SizeType | 'auto';
-    mx?: SizeType | 'auto';
-    marginVertical?: SizeType | 'auto';
-    my?: SizeType | 'auto';
-    marginTop?: SizeType | 'auto';
-    mt?: SizeType | 'auto';
-    marginRight?: SizeType | 'auto';
-    mr?: SizeType | 'auto';
-    marginBottom?: SizeType | 'auto';
-    mb?: SizeType | 'auto';
-    marginLeft?: SizeType | 'auto';
-    ml?: SizeType | 'auto';
-}
-declare type BoxBorderAndOutlineStyleType = 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'none' | 'hidden';
-interface BoxOutline {
-    outline?: SizeType;
-    outlineStyle?: BoxBorderAndOutlineStyleType;
-    outlineOffset?: SizeType;
-}
-interface BoxBorder {
-    border?: SizeType;
-    b?: SizeType;
-    borderHorizontal?: SizeType;
-    bx?: SizeType;
-    borderVertical?: SizeType;
-    by?: SizeType;
-    borderTop?: SizeType;
-    bt?: SizeType;
-    borderRight?: SizeType;
-    br?: SizeType;
-    borderBottom?: SizeType;
-    bb?: SizeType;
-    borderLeft?: SizeType;
-    bl?: SizeType;
-    borderStyle?: BoxBorderAndOutlineStyleType;
-    bStyle?: BoxBorderAndOutlineStyleType;
-    borderRadius?: SizeType;
-    bRadius?: SizeType;
-    borderRadiusTop?: SizeType;
-    bRadiusTop?: SizeType;
-    borderRadiusRight?: SizeType;
-    bRadiusRight?: SizeType;
-    borderRadiusBottom?: SizeType;
-    bRadiusBottom?: SizeType;
-    borderRadiusLeft?: SizeType;
-    bRadiusLeft?: SizeType;
-    borderRadiusTopLeft?: SizeType;
-    bRadiusTopLeft?: SizeType;
-    borderRadiusTopRight?: SizeType;
-    bRadiusTopRight?: SizeType;
-    borderRadiusBottomLeft?: SizeType;
-    bRadiusBottomLeft?: SizeType;
-    borderRadiusBottomRight?: SizeType;
-    bRadiusBottomRight?: SizeType;
-}
-interface BoxPadding {
-    padding?: SizeType;
-    p?: SizeType;
-    paddingHorizontal?: SizeType;
-    px?: SizeType;
-    paddingVertical?: SizeType;
-    py?: SizeType;
-    paddingTop?: SizeType;
-    pt?: SizeType;
-    paddingRight?: SizeType;
-    pr?: SizeType;
-    paddingBottom?: SizeType;
-    pb?: SizeType;
-    paddingLeft?: SizeType;
-    pl?: SizeType;
-}
-interface BoxShadow {
-    shadow?: ShadowType;
-}
-interface BoxBackground {
-    bg?: BackgroundType;
-    background?: BackgroundType;
-}
-interface BoxColors {
-    color?: ColorType | BaseFontColorType;
-    colorHover?: ColorType | BaseFontColorType;
-    backgroundColor?: ColorType | BaseBgColorType;
-    bgColor?: ColorType | BaseBgColorType;
-    backgroundColorHover?: ColorType | BaseBgColorType;
-    bgColorHover?: ColorType | BaseBgColorType;
-    borderColor?: ColorType | BaseBorderColorType;
-    bColor?: ColorType | BaseBorderColorType;
-    borderColorHover?: ColorType | BaseBorderColorType;
-    bColorHover?: ColorType | BaseBorderColorType;
-    outlineColor?: ColorType | BaseOutlineColorType;
-    outlineColorHover?: ColorType | BaseOutlineColorType;
-}
-interface BoxCursor {
-    cursor?: CursorType;
-}
-interface BoxZIndex {
-    zIndex?: SizeType;
-}
-interface BoxOverflow {
-    overflow?: 'auto' | 'hidden' | 'scroll' | 'visible';
-    overflowX?: 'auto' | 'hidden' | 'scroll' | 'visible';
-    overflowY?: 'auto' | 'hidden' | 'scroll' | 'visible';
-}
-interface BoxOpacity {
-    opacity?: 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;
-}
-interface BoxFont {
-    fontSize?: FontSizeType;
-    lineHeight?: FontSizeType;
-    fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-    letterSpacing?: SizeType;
-}
-interface BoxText {
-    textDecoration?: 'none' | 'underline';
-    textTransform?: 'none' | 'capitalize' | 'lowercase' | 'uppercase';
-    textAlign?: 'left' | 'right' | 'center';
-}
-interface BoxFlex {
-    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
-    justifyContent?: 'start' | 'end' | 'flex-start' | 'flex-end' | 'center' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
-    alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'start' | 'end' | 'self-start' | 'self-end';
-    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline';
-    flex1?: boolean;
-    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
-    gap?: SizeType;
-    rowGap?: SizeType;
-    columnGap?: SizeType;
-    order?: SizeType;
-    flexGrow?: SizeType;
-    flexShrink?: SizeType;
-    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
-    justifySelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
-}
-interface BoxHover {
-    hover?: boolean;
-}
-declare type BoxStyles = BoxDisplay & BoxSizing & BoxPosition & BoxSize & BoxMargin & BoxOutline & BoxBorder & BoxPadding & BoxShadow & BoxBackground & BoxColors & BoxCursor & BoxZIndex & BoxOverflow & BoxOpacity & BoxFont & BoxText & BoxFlex & BoxHover;
 declare type TagPropsType<TTag extends keyof React.ReactHTML> = Omit<React.ComponentProps<TTag>, 'className' | 'style'>;
-interface Props<TTag extends keyof React.ReactHTML> extends BoxStyles, Hovered<BoxStyles> {
+interface Props<TTag extends keyof React.ReactHTML> extends BoxStyles {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
     }) => React.ReactNode);
@@ -179,7 +14,6 @@ interface Props<TTag extends keyof React.ReactHTML> extends BoxStyles, Hovered<B
 export default function Box<TTag extends keyof React.ReactHTML = 'div'>(props: Props<TTag>): React.DetailedReactHTMLElement<{
     style: React.ComponentProps<TTag>["style"] | undefined;
     className: string;
-    hidden?: React.ComponentProps<TTag>["hidden"] | undefined;
     slot?: React.ComponentProps<TTag>["slot"] | undefined;
     title?: React.ComponentProps<TTag>["title"] | undefined;
     color?: React.ComponentProps<TTag>["color"] | undefined;
@@ -195,6 +29,7 @@ export default function Box<TTag extends keyof React.ReactHTML = 'div'>(props: P
     contextMenu?: React.ComponentProps<TTag>["contextMenu"] | undefined;
     dir?: React.ComponentProps<TTag>["dir"] | undefined;
     draggable?: React.ComponentProps<TTag>["draggable"] | undefined;
+    hidden?: React.ComponentProps<TTag>["hidden"] | undefined;
     id?: React.ComponentProps<TTag>["id"] | undefined;
     lang?: React.ComponentProps<TTag>["lang"] | undefined;
     placeholder?: React.ComponentProps<TTag>["placeholder"] | undefined;