@cronocode/react-box 0.0.6 → 0.1.0

package/{dist/box.d.ts → box.d.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SizeType, ColorType, CursorType, FontSizeType } from './css.variables';
+import ClassNameUtils from './utils/className/classNameUtils';
 interface BoxDisplay {
     display?: 'none' | 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid';
 }
@@ -18,50 +19,91 @@ interface BoxSize {
     minHeight?: BoxSizeValue;
     maxWidth?: BoxSizeValue;
     maxHeight?: BoxSizeValue;
+    inlineWidth?: string;
+    inlineHeight?: string;
+    inlineMinWidth?: string;
+    inlineMinHeight?: string;
+    inlineMaxWidth?: string;
+    inlineMaxHeight?: string;
 }
 interface BoxMargin {
+    margin?: SizeType;
     m?: SizeType;
+    marginHorizontal?: SizeType;
     mx?: SizeType;
+    marginVertical?: SizeType;
     my?: SizeType;
+    marginTop?: SizeType;
     mt?: SizeType;
+    marginRight?: SizeType;
     mr?: SizeType;
+    marginBottom?: SizeType;
     mb?: SizeType;
+    marginLeft?: SizeType;
     ml?: 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?: 'solid' | 'dashed' | 'dotted' | 'double';
     bStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
+    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 BoxColors {
     color?: ColorType;
     colorHover?: ColorType;
+    backgroundColor?: ColorType;
     bgColor?: ColorType;
+    backgroundColorHover?: ColorType;
     bgColorHover?: ColorType;
+    borderColor?: ColorType;
     bColor?: ColorType;
+    borderColorHover?: ColorType;
     bColorHover?: ColorType;
 }
 interface BoxLineHeightSize {
@@ -111,10 +153,18 @@ interface Props<TTag extends keyof React.ReactHTML> extends BoxDisplay, BoxPosit
     }) => React.ReactNode);
     tag?: TTag;
     props?: React.ComponentProps<TTag>;
-    className?: string;
+    className?: ClassNameUtils.ClassNameType;
 }
 export default function Box<TTag extends keyof React.ReactHTML = 'div'>(boxProps: Props<TTag>): React.DetailedReactHTMLElement<{
     className: string;
+    style: {
+        width: string | undefined;
+        height: string | undefined;
+        minWidth: string | undefined;
+        minHeight: string | undefined;
+        maxWidth: string | undefined;
+        maxHeight: string | undefined;
+    };
     ref?: string | ((instance: HTMLObjectElement | null) => void) | React.RefObject<HTMLObjectElement> | ((instance: HTMLProgressElement | null) => void) | React.RefObject<HTMLProgressElement> | ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | ((instance: HTMLAreaElement | null) => void) | React.RefObject<HTMLAreaElement> | ((instance: HTMLAudioElement | null) => void) | React.RefObject<HTMLAudioElement> | ((instance: HTMLBaseElement | null) => void) | React.RefObject<HTMLBaseElement> | ((instance: HTMLQuoteElement | null) => void) | React.RefObject<HTMLQuoteElement> | ((instance: HTMLBodyElement | null) => void) | React.RefObject<HTMLBodyElement> | ((instance: HTMLBRElement | null) => void) | React.RefObject<HTMLBRElement> | ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | ((instance: HTMLCanvasElement | null) => void) | React.RefObject<HTMLCanvasElement> | ((instance: HTMLTableColElement | null) => void) | React.RefObject<HTMLTableColElement> | ((instance: HTMLDataElement | null) => void) | React.RefObject<HTMLDataElement> | ((instance: HTMLDataListElement | null) => void) | React.RefObject<HTMLDataListElement> | ((instance: HTMLModElement | null) => void) | React.RefObject<HTMLModElement> | ((instance: HTMLDetailsElement | null) => void) | React.RefObject<HTMLDetailsElement> | ((instance: HTMLDialogElement | null) => void) | React.RefObject<HTMLDialogElement> | ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | ((instance: HTMLDListElement | null) => void) | React.RefObject<HTMLDListElement> | ((instance: HTMLEmbedElement | null) => void) | React.RefObject<HTMLEmbedElement> | ((instance: HTMLFieldSetElement | null) => void) | React.RefObject<HTMLFieldSetElement> | ((instance: HTMLFormElement | null) => void) | React.RefObject<HTMLFormElement> | ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | ((instance: HTMLHeadElement | null) => void) | React.RefObject<HTMLHeadElement> | ((instance: HTMLHRElement | null) => void) | React.RefObject<HTMLHRElement> | ((instance: HTMLHtmlElement | null) => void) | React.RefObject<HTMLHtmlElement> | ((instance: HTMLIFrameElement | null) => void) | React.RefObject<HTMLIFrameElement> | ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | ((instance: HTMLLabelElement | null) => void) | React.RefObject<HTMLLabelElement> | ((instance: HTMLLegendElement | null) => void) | React.RefObject<HTMLLegendElement> | ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | ((instance: HTMLLinkElement | null) => void) | React.RefObject<HTMLLinkElement> | ((instance: HTMLMapElement | null) => void) | React.RefObject<HTMLMapElement> | ((instance: HTMLMetaElement | null) => void) | React.RefObject<HTMLMetaElement> | ((instance: HTMLMeterElement | null) => void) | React.RefObject<HTMLMeterElement> | ((instance: HTMLOListElement | null) => void) | React.RefObject<HTMLOListElement> | ((instance: HTMLOptGroupElement | null) => void) | React.RefObject<HTMLOptGroupElement> | ((instance: HTMLOptionElement | null) => void) | React.RefObject<HTMLOptionElement> | ((instance: HTMLOutputElement | null) => void) | React.RefObject<HTMLOutputElement> | ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | ((instance: HTMLParamElement | null) => void) | React.RefObject<HTMLParamElement> | ((instance: HTMLPreElement | null) => void) | React.RefObject<HTMLPreElement> | ((instance: HTMLSlotElement | null) => void) | React.RefObject<HTMLSlotElement> | ((instance: HTMLScriptElement | null) => void) | React.RefObject<HTMLScriptElement> | ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | ((instance: HTMLSourceElement | null) => void) | React.RefObject<HTMLSourceElement> | ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | ((instance: HTMLStyleElement | null) => void) | React.RefObject<HTMLStyleElement> | ((instance: HTMLTableElement | null) => void) | React.RefObject<HTMLTableElement> | ((instance: HTMLTemplateElement | null) => void) | React.RefObject<HTMLTemplateElement> | ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement> | ((instance: HTMLTableDataCellElement | null) => void) | React.RefObject<HTMLTableDataCellElement> | ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | ((instance: HTMLTableHeaderCellElement | null) => void) | React.RefObject<HTMLTableHeaderCellElement> | ((instance: HTMLTimeElement | null) => void) | React.RefObject<HTMLTimeElement> | ((instance: HTMLTitleElement | null) => void) | React.RefObject<HTMLTitleElement> | ((instance: HTMLTableRowElement | null) => void) | React.RefObject<HTMLTableRowElement> | ((instance: HTMLTrackElement | null) => void) | React.RefObject<HTMLTrackElement> | ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | ((instance: HTMLVideoElement | null) => void) | React.RefObject<HTMLVideoElement> | ((instance: HTMLWebViewElement | null) => void) | React.RefObject<HTMLWebViewElement> | null | undefined;
     key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
@@ -132,7 +182,6 @@ export default function Box<TTag extends keyof React.ReactHTML = 'div'>(boxProps
     placeholder?: string | undefined;
     slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: React.CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
     translate?: "yes" | "no" | undefined;