@cronocode/react-box 1.1.4 → 1.1.6

package/box.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { BoxStyles } from './types';
 import ClassNameUtils from './utils/className/classNameUtils';
-declare type TagPropsType<TTag extends keyof React.ReactHTML> = Omit<React.ComponentProps<TTag>, 'className' | 'style'>;
+declare type AllProps<TTag extends keyof React.ReactHTML> = React.ComponentProps<TTag>;
+declare type TagPropsType<TTag extends keyof React.ReactHTML> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref'>;
 interface Props<TTag extends keyof React.ReactHTML> extends BoxStyles {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
@@ -10,266 +11,7 @@ interface Props<TTag extends keyof React.ReactHTML> extends BoxStyles {
     props?: TagPropsType<TTag>;
     style?: React.ComponentProps<TTag>['style'];
     className?: ClassNameUtils.ClassNameType;
+    ref?: Ref<HTMLElement>;
 }
-export default function Box<TTag extends keyof React.ReactHTML = 'div'>(props: Props<TTag>): React.DetailedReactHTMLElement<{
-    style: React.ComponentProps<TTag>["style"] | undefined;
-    className: string;
-    slot?: React.ComponentProps<TTag>["slot"] | undefined;
-    title?: React.ComponentProps<TTag>["title"] | undefined;
-    color?: React.ComponentProps<TTag>["color"] | undefined;
-    children?: React.ComponentProps<TTag>["children"] | undefined;
-    ref?: React.ComponentProps<TTag>["ref"] | undefined;
-    key?: React.ComponentProps<TTag>["key"] | undefined;
-    defaultChecked?: React.ComponentProps<TTag>["defaultChecked"] | undefined;
-    defaultValue?: React.ComponentProps<TTag>["defaultValue"] | undefined;
-    suppressContentEditableWarning?: React.ComponentProps<TTag>["suppressContentEditableWarning"] | undefined;
-    suppressHydrationWarning?: React.ComponentProps<TTag>["suppressHydrationWarning"] | undefined;
-    accessKey?: React.ComponentProps<TTag>["accessKey"] | undefined;
-    contentEditable?: React.ComponentProps<TTag>["contentEditable"] | undefined;
-    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;
-    nonce?: React.ComponentProps<TTag>["nonce"] | undefined;
-    placeholder?: React.ComponentProps<TTag>["placeholder"] | undefined;
-    spellCheck?: React.ComponentProps<TTag>["spellCheck"] | undefined;
-    tabIndex?: React.ComponentProps<TTag>["tabIndex"] | undefined;
-    translate?: React.ComponentProps<TTag>["translate"] | undefined;
-    radioGroup?: React.ComponentProps<TTag>["radioGroup"] | undefined;
-    role?: React.ComponentProps<TTag>["role"] | undefined;
-    about?: React.ComponentProps<TTag>["about"] | undefined;
-    datatype?: React.ComponentProps<TTag>["datatype"] | undefined;
-    inlist?: React.ComponentProps<TTag>["inlist"] | undefined;
-    prefix?: React.ComponentProps<TTag>["prefix"] | undefined;
-    property?: React.ComponentProps<TTag>["property"] | undefined;
-    resource?: React.ComponentProps<TTag>["resource"] | undefined;
-    typeof?: React.ComponentProps<TTag>["typeof"] | undefined;
-    vocab?: React.ComponentProps<TTag>["vocab"] | undefined;
-    autoCapitalize?: React.ComponentProps<TTag>["autoCapitalize"] | undefined;
-    autoCorrect?: React.ComponentProps<TTag>["autoCorrect"] | undefined;
-    autoSave?: React.ComponentProps<TTag>["autoSave"] | undefined;
-    itemProp?: React.ComponentProps<TTag>["itemProp"] | undefined;
-    itemScope?: React.ComponentProps<TTag>["itemScope"] | undefined;
-    itemType?: React.ComponentProps<TTag>["itemType"] | undefined;
-    itemID?: React.ComponentProps<TTag>["itemID"] | undefined;
-    itemRef?: React.ComponentProps<TTag>["itemRef"] | undefined;
-    results?: React.ComponentProps<TTag>["results"] | undefined;
-    security?: React.ComponentProps<TTag>["security"] | undefined;
-    unselectable?: React.ComponentProps<TTag>["unselectable"] | undefined;
-    inputMode?: React.ComponentProps<TTag>["inputMode"] | undefined;
-    is?: React.ComponentProps<TTag>["is"] | undefined;
-    'aria-activedescendant'?: React.ComponentProps<TTag>["aria-activedescendant"] | undefined;
-    'aria-atomic'?: React.ComponentProps<TTag>["aria-atomic"] | undefined;
-    'aria-autocomplete'?: React.ComponentProps<TTag>["aria-autocomplete"] | undefined;
-    'aria-busy'?: React.ComponentProps<TTag>["aria-busy"] | undefined;
-    'aria-checked'?: React.ComponentProps<TTag>["aria-checked"] | undefined;
-    'aria-colcount'?: React.ComponentProps<TTag>["aria-colcount"] | undefined;
-    'aria-colindex'?: React.ComponentProps<TTag>["aria-colindex"] | undefined;
-    'aria-colspan'?: React.ComponentProps<TTag>["aria-colspan"] | undefined;
-    'aria-controls'?: React.ComponentProps<TTag>["aria-controls"] | undefined;
-    'aria-current'?: React.ComponentProps<TTag>["aria-current"] | undefined;
-    'aria-describedby'?: React.ComponentProps<TTag>["aria-describedby"] | undefined;
-    'aria-details'?: React.ComponentProps<TTag>["aria-details"] | undefined;
-    'aria-disabled'?: React.ComponentProps<TTag>["aria-disabled"] | undefined;
-    'aria-dropeffect'?: React.ComponentProps<TTag>["aria-dropeffect"] | undefined;
-    'aria-errormessage'?: React.ComponentProps<TTag>["aria-errormessage"] | undefined;
-    'aria-expanded'?: React.ComponentProps<TTag>["aria-expanded"] | undefined;
-    'aria-flowto'?: React.ComponentProps<TTag>["aria-flowto"] | undefined;
-    'aria-grabbed'?: React.ComponentProps<TTag>["aria-grabbed"] | undefined;
-    'aria-haspopup'?: React.ComponentProps<TTag>["aria-haspopup"] | undefined;
-    'aria-hidden'?: React.ComponentProps<TTag>["aria-hidden"] | undefined;
-    'aria-invalid'?: React.ComponentProps<TTag>["aria-invalid"] | undefined;
-    'aria-keyshortcuts'?: React.ComponentProps<TTag>["aria-keyshortcuts"] | undefined;
-    'aria-label'?: React.ComponentProps<TTag>["aria-label"] | undefined;
-    'aria-labelledby'?: React.ComponentProps<TTag>["aria-labelledby"] | undefined;
-    'aria-level'?: React.ComponentProps<TTag>["aria-level"] | undefined;
-    'aria-live'?: React.ComponentProps<TTag>["aria-live"] | undefined;
-    'aria-modal'?: React.ComponentProps<TTag>["aria-modal"] | undefined;
-    'aria-multiline'?: React.ComponentProps<TTag>["aria-multiline"] | undefined;
-    'aria-multiselectable'?: React.ComponentProps<TTag>["aria-multiselectable"] | undefined;
-    'aria-orientation'?: React.ComponentProps<TTag>["aria-orientation"] | undefined;
-    'aria-owns'?: React.ComponentProps<TTag>["aria-owns"] | undefined;
-    'aria-placeholder'?: React.ComponentProps<TTag>["aria-placeholder"] | undefined;
-    'aria-posinset'?: React.ComponentProps<TTag>["aria-posinset"] | undefined;
-    'aria-pressed'?: React.ComponentProps<TTag>["aria-pressed"] | undefined;
-    'aria-readonly'?: React.ComponentProps<TTag>["aria-readonly"] | undefined;
-    'aria-relevant'?: React.ComponentProps<TTag>["aria-relevant"] | undefined;
-    'aria-required'?: React.ComponentProps<TTag>["aria-required"] | undefined;
-    'aria-roledescription'?: React.ComponentProps<TTag>["aria-roledescription"] | undefined;
-    'aria-rowcount'?: React.ComponentProps<TTag>["aria-rowcount"] | undefined;
-    'aria-rowindex'?: React.ComponentProps<TTag>["aria-rowindex"] | undefined;
-    'aria-rowspan'?: React.ComponentProps<TTag>["aria-rowspan"] | undefined;
-    'aria-selected'?: React.ComponentProps<TTag>["aria-selected"] | undefined;
-    'aria-setsize'?: React.ComponentProps<TTag>["aria-setsize"] | undefined;
-    'aria-sort'?: React.ComponentProps<TTag>["aria-sort"] | undefined;
-    'aria-valuemax'?: React.ComponentProps<TTag>["aria-valuemax"] | undefined;
-    'aria-valuemin'?: React.ComponentProps<TTag>["aria-valuemin"] | undefined;
-    'aria-valuenow'?: React.ComponentProps<TTag>["aria-valuenow"] | undefined;
-    'aria-valuetext'?: React.ComponentProps<TTag>["aria-valuetext"] | undefined;
-    dangerouslySetInnerHTML?: React.ComponentProps<TTag>["dangerouslySetInnerHTML"] | undefined;
-    onCopy?: React.ComponentProps<TTag>["onCopy"] | undefined;
-    onCopyCapture?: React.ComponentProps<TTag>["onCopyCapture"] | undefined;
-    onCut?: React.ComponentProps<TTag>["onCut"] | undefined;
-    onCutCapture?: React.ComponentProps<TTag>["onCutCapture"] | undefined;
-    onPaste?: React.ComponentProps<TTag>["onPaste"] | undefined;
-    onPasteCapture?: React.ComponentProps<TTag>["onPasteCapture"] | undefined;
-    onCompositionEnd?: React.ComponentProps<TTag>["onCompositionEnd"] | undefined;
-    onCompositionEndCapture?: React.ComponentProps<TTag>["onCompositionEndCapture"] | undefined;
-    onCompositionStart?: React.ComponentProps<TTag>["onCompositionStart"] | undefined;
-    onCompositionStartCapture?: React.ComponentProps<TTag>["onCompositionStartCapture"] | undefined;
-    onCompositionUpdate?: React.ComponentProps<TTag>["onCompositionUpdate"] | undefined;
-    onCompositionUpdateCapture?: React.ComponentProps<TTag>["onCompositionUpdateCapture"] | undefined;
-    onFocus?: React.ComponentProps<TTag>["onFocus"] | undefined;
-    onFocusCapture?: React.ComponentProps<TTag>["onFocusCapture"] | undefined;
-    onBlur?: React.ComponentProps<TTag>["onBlur"] | undefined;
-    onBlurCapture?: React.ComponentProps<TTag>["onBlurCapture"] | undefined;
-    onChange?: React.ComponentProps<TTag>["onChange"] | undefined;
-    onChangeCapture?: React.ComponentProps<TTag>["onChangeCapture"] | undefined;
-    onBeforeInput?: React.ComponentProps<TTag>["onBeforeInput"] | undefined;
-    onBeforeInputCapture?: React.ComponentProps<TTag>["onBeforeInputCapture"] | undefined;
-    onInput?: React.ComponentProps<TTag>["onInput"] | undefined;
-    onInputCapture?: React.ComponentProps<TTag>["onInputCapture"] | undefined;
-    onReset?: React.ComponentProps<TTag>["onReset"] | undefined;
-    onResetCapture?: React.ComponentProps<TTag>["onResetCapture"] | undefined;
-    onSubmit?: React.ComponentProps<TTag>["onSubmit"] | undefined;
-    onSubmitCapture?: React.ComponentProps<TTag>["onSubmitCapture"] | undefined;
-    onInvalid?: React.ComponentProps<TTag>["onInvalid"] | undefined;
-    onInvalidCapture?: React.ComponentProps<TTag>["onInvalidCapture"] | undefined;
-    onLoad?: React.ComponentProps<TTag>["onLoad"] | undefined;
-    onLoadCapture?: React.ComponentProps<TTag>["onLoadCapture"] | undefined;
-    onError?: React.ComponentProps<TTag>["onError"] | undefined;
-    onErrorCapture?: React.ComponentProps<TTag>["onErrorCapture"] | undefined;
-    onKeyDown?: React.ComponentProps<TTag>["onKeyDown"] | undefined;
-    onKeyDownCapture?: React.ComponentProps<TTag>["onKeyDownCapture"] | undefined;
-    onKeyPress?: React.ComponentProps<TTag>["onKeyPress"] | undefined;
-    onKeyPressCapture?: React.ComponentProps<TTag>["onKeyPressCapture"] | undefined;
-    onKeyUp?: React.ComponentProps<TTag>["onKeyUp"] | undefined;
-    onKeyUpCapture?: React.ComponentProps<TTag>["onKeyUpCapture"] | undefined;
-    onAbort?: React.ComponentProps<TTag>["onAbort"] | undefined;
-    onAbortCapture?: React.ComponentProps<TTag>["onAbortCapture"] | undefined;
-    onCanPlay?: React.ComponentProps<TTag>["onCanPlay"] | undefined;
-    onCanPlayCapture?: React.ComponentProps<TTag>["onCanPlayCapture"] | undefined;
-    onCanPlayThrough?: React.ComponentProps<TTag>["onCanPlayThrough"] | undefined;
-    onCanPlayThroughCapture?: React.ComponentProps<TTag>["onCanPlayThroughCapture"] | undefined;
-    onDurationChange?: React.ComponentProps<TTag>["onDurationChange"] | undefined;
-    onDurationChangeCapture?: React.ComponentProps<TTag>["onDurationChangeCapture"] | undefined;
-    onEmptied?: React.ComponentProps<TTag>["onEmptied"] | undefined;
-    onEmptiedCapture?: React.ComponentProps<TTag>["onEmptiedCapture"] | undefined;
-    onEncrypted?: React.ComponentProps<TTag>["onEncrypted"] | undefined;
-    onEncryptedCapture?: React.ComponentProps<TTag>["onEncryptedCapture"] | undefined;
-    onEnded?: React.ComponentProps<TTag>["onEnded"] | undefined;
-    onEndedCapture?: React.ComponentProps<TTag>["onEndedCapture"] | undefined;
-    onLoadedData?: React.ComponentProps<TTag>["onLoadedData"] | undefined;
-    onLoadedDataCapture?: React.ComponentProps<TTag>["onLoadedDataCapture"] | undefined;
-    onLoadedMetadata?: React.ComponentProps<TTag>["onLoadedMetadata"] | undefined;
-    onLoadedMetadataCapture?: React.ComponentProps<TTag>["onLoadedMetadataCapture"] | undefined;
-    onLoadStart?: React.ComponentProps<TTag>["onLoadStart"] | undefined;
-    onLoadStartCapture?: React.ComponentProps<TTag>["onLoadStartCapture"] | undefined;
-    onPause?: React.ComponentProps<TTag>["onPause"] | undefined;
-    onPauseCapture?: React.ComponentProps<TTag>["onPauseCapture"] | undefined;
-    onPlay?: React.ComponentProps<TTag>["onPlay"] | undefined;
-    onPlayCapture?: React.ComponentProps<TTag>["onPlayCapture"] | undefined;
-    onPlaying?: React.ComponentProps<TTag>["onPlaying"] | undefined;
-    onPlayingCapture?: React.ComponentProps<TTag>["onPlayingCapture"] | undefined;
-    onProgress?: React.ComponentProps<TTag>["onProgress"] | undefined;
-    onProgressCapture?: React.ComponentProps<TTag>["onProgressCapture"] | undefined;
-    onRateChange?: React.ComponentProps<TTag>["onRateChange"] | undefined;
-    onRateChangeCapture?: React.ComponentProps<TTag>["onRateChangeCapture"] | undefined;
-    onResize?: React.ComponentProps<TTag>["onResize"] | undefined;
-    onResizeCapture?: React.ComponentProps<TTag>["onResizeCapture"] | undefined;
-    onSeeked?: React.ComponentProps<TTag>["onSeeked"] | undefined;
-    onSeekedCapture?: React.ComponentProps<TTag>["onSeekedCapture"] | undefined;
-    onSeeking?: React.ComponentProps<TTag>["onSeeking"] | undefined;
-    onSeekingCapture?: React.ComponentProps<TTag>["onSeekingCapture"] | undefined;
-    onStalled?: React.ComponentProps<TTag>["onStalled"] | undefined;
-    onStalledCapture?: React.ComponentProps<TTag>["onStalledCapture"] | undefined;
-    onSuspend?: React.ComponentProps<TTag>["onSuspend"] | undefined;
-    onSuspendCapture?: React.ComponentProps<TTag>["onSuspendCapture"] | undefined;
-    onTimeUpdate?: React.ComponentProps<TTag>["onTimeUpdate"] | undefined;
-    onTimeUpdateCapture?: React.ComponentProps<TTag>["onTimeUpdateCapture"] | undefined;
-    onVolumeChange?: React.ComponentProps<TTag>["onVolumeChange"] | undefined;
-    onVolumeChangeCapture?: React.ComponentProps<TTag>["onVolumeChangeCapture"] | undefined;
-    onWaiting?: React.ComponentProps<TTag>["onWaiting"] | undefined;
-    onWaitingCapture?: React.ComponentProps<TTag>["onWaitingCapture"] | undefined;
-    onAuxClick?: React.ComponentProps<TTag>["onAuxClick"] | undefined;
-    onAuxClickCapture?: React.ComponentProps<TTag>["onAuxClickCapture"] | undefined;
-    onClick?: React.ComponentProps<TTag>["onClick"] | undefined;
-    onClickCapture?: React.ComponentProps<TTag>["onClickCapture"] | undefined;
-    onContextMenu?: React.ComponentProps<TTag>["onContextMenu"] | undefined;
-    onContextMenuCapture?: React.ComponentProps<TTag>["onContextMenuCapture"] | undefined;
-    onDoubleClick?: React.ComponentProps<TTag>["onDoubleClick"] | undefined;
-    onDoubleClickCapture?: React.ComponentProps<TTag>["onDoubleClickCapture"] | undefined;
-    onDrag?: React.ComponentProps<TTag>["onDrag"] | undefined;
-    onDragCapture?: React.ComponentProps<TTag>["onDragCapture"] | undefined;
-    onDragEnd?: React.ComponentProps<TTag>["onDragEnd"] | undefined;
-    onDragEndCapture?: React.ComponentProps<TTag>["onDragEndCapture"] | undefined;
-    onDragEnter?: React.ComponentProps<TTag>["onDragEnter"] | undefined;
-    onDragEnterCapture?: React.ComponentProps<TTag>["onDragEnterCapture"] | undefined;
-    onDragExit?: React.ComponentProps<TTag>["onDragExit"] | undefined;
-    onDragExitCapture?: React.ComponentProps<TTag>["onDragExitCapture"] | undefined;
-    onDragLeave?: React.ComponentProps<TTag>["onDragLeave"] | undefined;
-    onDragLeaveCapture?: React.ComponentProps<TTag>["onDragLeaveCapture"] | undefined;
-    onDragOver?: React.ComponentProps<TTag>["onDragOver"] | undefined;
-    onDragOverCapture?: React.ComponentProps<TTag>["onDragOverCapture"] | undefined;
-    onDragStart?: React.ComponentProps<TTag>["onDragStart"] | undefined;
-    onDragStartCapture?: React.ComponentProps<TTag>["onDragStartCapture"] | undefined;
-    onDrop?: React.ComponentProps<TTag>["onDrop"] | undefined;
-    onDropCapture?: React.ComponentProps<TTag>["onDropCapture"] | undefined;
-    onMouseDown?: React.ComponentProps<TTag>["onMouseDown"] | undefined;
-    onMouseDownCapture?: React.ComponentProps<TTag>["onMouseDownCapture"] | undefined;
-    onMouseEnter?: React.ComponentProps<TTag>["onMouseEnter"] | undefined;
-    onMouseLeave?: React.ComponentProps<TTag>["onMouseLeave"] | undefined;
-    onMouseMove?: React.ComponentProps<TTag>["onMouseMove"] | undefined;
-    onMouseMoveCapture?: React.ComponentProps<TTag>["onMouseMoveCapture"] | undefined;
-    onMouseOut?: React.ComponentProps<TTag>["onMouseOut"] | undefined;
-    onMouseOutCapture?: React.ComponentProps<TTag>["onMouseOutCapture"] | undefined;
-    onMouseOver?: React.ComponentProps<TTag>["onMouseOver"] | undefined;
-    onMouseOverCapture?: React.ComponentProps<TTag>["onMouseOverCapture"] | undefined;
-    onMouseUp?: React.ComponentProps<TTag>["onMouseUp"] | undefined;
-    onMouseUpCapture?: React.ComponentProps<TTag>["onMouseUpCapture"] | undefined;
-    onSelect?: React.ComponentProps<TTag>["onSelect"] | undefined;
-    onSelectCapture?: React.ComponentProps<TTag>["onSelectCapture"] | undefined;
-    onTouchCancel?: React.ComponentProps<TTag>["onTouchCancel"] | undefined;
-    onTouchCancelCapture?: React.ComponentProps<TTag>["onTouchCancelCapture"] | undefined;
-    onTouchEnd?: React.ComponentProps<TTag>["onTouchEnd"] | undefined;
-    onTouchEndCapture?: React.ComponentProps<TTag>["onTouchEndCapture"] | undefined;
-    onTouchMove?: React.ComponentProps<TTag>["onTouchMove"] | undefined;
-    onTouchMoveCapture?: React.ComponentProps<TTag>["onTouchMoveCapture"] | undefined;
-    onTouchStart?: React.ComponentProps<TTag>["onTouchStart"] | undefined;
-    onTouchStartCapture?: React.ComponentProps<TTag>["onTouchStartCapture"] | undefined;
-    onPointerDown?: React.ComponentProps<TTag>["onPointerDown"] | undefined;
-    onPointerDownCapture?: React.ComponentProps<TTag>["onPointerDownCapture"] | undefined;
-    onPointerMove?: React.ComponentProps<TTag>["onPointerMove"] | undefined;
-    onPointerMoveCapture?: React.ComponentProps<TTag>["onPointerMoveCapture"] | undefined;
-    onPointerUp?: React.ComponentProps<TTag>["onPointerUp"] | undefined;
-    onPointerUpCapture?: React.ComponentProps<TTag>["onPointerUpCapture"] | undefined;
-    onPointerCancel?: React.ComponentProps<TTag>["onPointerCancel"] | undefined;
-    onPointerCancelCapture?: React.ComponentProps<TTag>["onPointerCancelCapture"] | undefined;
-    onPointerEnter?: React.ComponentProps<TTag>["onPointerEnter"] | undefined;
-    onPointerEnterCapture?: React.ComponentProps<TTag>["onPointerEnterCapture"] | undefined;
-    onPointerLeave?: React.ComponentProps<TTag>["onPointerLeave"] | undefined;
-    onPointerLeaveCapture?: React.ComponentProps<TTag>["onPointerLeaveCapture"] | undefined;
-    onPointerOver?: React.ComponentProps<TTag>["onPointerOver"] | undefined;
-    onPointerOverCapture?: React.ComponentProps<TTag>["onPointerOverCapture"] | undefined;
-    onPointerOut?: React.ComponentProps<TTag>["onPointerOut"] | undefined;
-    onPointerOutCapture?: React.ComponentProps<TTag>["onPointerOutCapture"] | undefined;
-    onGotPointerCapture?: React.ComponentProps<TTag>["onGotPointerCapture"] | undefined;
-    onGotPointerCaptureCapture?: React.ComponentProps<TTag>["onGotPointerCaptureCapture"] | undefined;
-    onLostPointerCapture?: React.ComponentProps<TTag>["onLostPointerCapture"] | undefined;
-    onLostPointerCaptureCapture?: React.ComponentProps<TTag>["onLostPointerCaptureCapture"] | undefined;
-    onScroll?: React.ComponentProps<TTag>["onScroll"] | undefined;
-    onScrollCapture?: React.ComponentProps<TTag>["onScrollCapture"] | undefined;
-    onWheel?: React.ComponentProps<TTag>["onWheel"] | undefined;
-    onWheelCapture?: React.ComponentProps<TTag>["onWheelCapture"] | undefined;
-    onAnimationStart?: React.ComponentProps<TTag>["onAnimationStart"] | undefined;
-    onAnimationStartCapture?: React.ComponentProps<TTag>["onAnimationStartCapture"] | undefined;
-    onAnimationEnd?: React.ComponentProps<TTag>["onAnimationEnd"] | undefined;
-    onAnimationEndCapture?: React.ComponentProps<TTag>["onAnimationEndCapture"] | undefined;
-    onAnimationIteration?: React.ComponentProps<TTag>["onAnimationIteration"] | undefined;
-    onAnimationIterationCapture?: React.ComponentProps<TTag>["onAnimationIterationCapture"] | undefined;
-    onTransitionEnd?: React.ComponentProps<TTag>["onTransitionEnd"] | undefined;
-    onTransitionEndCapture?: React.ComponentProps<TTag>["onTransitionEndCapture"] | undefined;
-}, HTMLWebViewElement>;
-export {};
+declare const _default: <TTag extends keyof React.ReactHTML = "div">(props: Props<TTag>) => JSX.Element;
+export default _default;

package/box.mjs

@@ -1,15 +1,18 @@
-import x, { useState as N } from "react";
+import x, { forwardRef as N, useState as v } from "react";
 import { c as a } from "./box.module.css.mjs";
 import { C as b, t as g } from "./utils/utils.mjs";
-function H(c) {
-  const { tag: m, children: s, props: u, className: n, style: p } = c, e = n ? b.classNames(n, a.box) : [a.box];
-  Object.entries(c).forEach(([o, i]) => {
-    const f = a[o + i];
-    f ? e.push(f) : g.includes(o) && e.push(`${o}${i}`);
+function C(c, n) {
+  const { tag: p, children: e, props: d, className: r, style: l } = c, t = r ? b.classNames(r, a.box) : [a.box];
+  Object.entries(c).forEach(([o, m]) => {
+    const u = a[o + m];
+    u ? t.push(u) : g.includes(o) && t.push(`${o}${m}`);
   });
-  const d = m || "div", t = { ...u, style: p, className: e.join(" ") }, [h, r] = N(!1), l = typeof s == "function";
-  return l && (t.onMouseEnter = () => r(!0), t.onMouseLeave = () => r(!1)), x.createElement(d, t, l ? s({ isHover: h }) : s);
+  const s = { ...d, className: t.join(" ") };
+  l && (s.style = l), n && (s.ref = n);
+  const [h, f] = v(!1), i = typeof e == "function";
+  return i && (s.onMouseEnter = () => f(!0), s.onMouseLeave = () => f(!1)), x.createElement(p || "div", s, i ? e({ isHover: h }) : e);
 }
+const j = N(C);
 export {
-  H as default
+  j as default
 };

package/components/buttonCore.d.ts

@@ -1,5 +1,5 @@
 import Box from '../box';
-declare type BoxProps = React.ComponentProps<typeof Box<'button'>>;
+declare type BoxProps = Omit<React.ComponentProps<typeof Box<'button'>>, 'ref' | 'tag'>;
 declare type BoxTagProps = Required<BoxProps>['props'];
 declare type ButtonTagProps = Omit<BoxTagProps, 'type' | 'onClick' | 'disabled'>;
 declare type ButtonType = Required<React.ComponentProps<'button'>>['type'];
@@ -9,5 +9,5 @@ interface Props extends Omit<BoxProps, 'props'> {
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     disabled?: boolean;
 }
-export default function ButtonCore(props: Props): JSX.Element;
-export {};
+declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
+export default _default;

package/components/buttonCore.mjs

@@ -1,12 +1,13 @@
-import { jsx as s } from "react/jsx-runtime";
-import u from "../box.mjs";
-import "react";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import i from "../box.mjs";
+import { O as s } from "../utils/utils.mjs";
 import "../box.module.css.mjs";
-import "../utils/utils.mjs";
-function l(t) {
-  const { tag: o, type: r, onClick: n, disabled: p, props: e } = t, i = { ...e, type: r || "button", onClick: n, disabled: p };
-  return /* @__PURE__ */ s(u, { tag: o || "button", cursor: "pointer", inline: !0, ...t, props: i });
+function m(o, r) {
+  const [t, e] = s.moveToTagProps(o, "type", "onClick", "disabled");
+  return /* @__PURE__ */ n(i, { ref: r, tag: "button", cursor: "pointer", inline: !0, ...e, props: { ...o.props, ...t } });
 }
+const b = p(m);
 export {
-  l as default
+  b as default
 };

package/components/{uncontrolledCheckboxCore.d.ts → checkboxCore.d.ts}

@@ -1,19 +1,19 @@
 import React from 'react';
 import Box from '../box';
-declare type BoxProps = React.ComponentProps<typeof Box<'input'>>;
+declare type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
 declare type BoxTagProps = Required<BoxProps>['props'];
-declare type UncontrolledCheckboxCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'value' | 'autoFocus' | 'readOnly' | 'required' | 'defaultChecked'>;
+declare type CheckboxCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'value' | 'autoFocus' | 'readOnly' | 'required' | 'checked' | 'defaultChecked'>;
 interface Props extends Omit<BoxProps, 'props'> {
-    name: string;
-    props?: UncontrolledCheckboxCoreTagProps;
+    name?: string;
+    props?: CheckboxCoreTagProps;
     onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
     onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
-    placeholder?: string;
     disabled?: boolean;
     value?: string | number;
     autoFocus?: boolean;
     readOnly?: boolean;
     required?: boolean;
+    checked?: boolean;
     defaultChecked?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;

package/components/checkboxCore.mjs

@@ -0,0 +1,25 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import p from "../box.mjs";
+import { O as c } from "../utils/utils.mjs";
+import "../box.module.css.mjs";
+function i(o, e) {
+  const [r, t] = c.moveToTagProps(
+    o,
+    "name",
+    "onInput",
+    "onChange",
+    "disabled",
+    "value",
+    "autoFocus",
+    "readOnly",
+    "required",
+    "checked",
+    "defaultChecked"
+  );
+  return /* @__PURE__ */ n(p, { ref: e, tag: "input", inline: !0, ...t, props: { ...o.props, ...r, type: "checkbox" } });
+}
+const l = a(i);
+export {
+  l as default
+};

package/components/{uncontrolledRadioButtonCore.d.ts → radioButtonCore.d.ts}

@@ -1,19 +1,19 @@
 import React from 'react';
 import Box from '../box';
-declare type BoxProps = React.ComponentProps<typeof Box<'input'>>;
+declare type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
 declare type BoxTagProps = Required<BoxProps>['props'];
-declare type UncontrolledRadioButtonCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'value' | 'autoFocus' | 'readOnly' | 'required' | 'defaultChecked'>;
+declare type RadioButtonCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'value' | 'autoFocus' | 'readOnly' | 'required' | 'checked' | 'defaultChecked'>;
 interface Props extends Omit<BoxProps, 'props'> {
-    name: string;
-    props?: UncontrolledRadioButtonCoreTagProps;
+    name?: string;
+    props?: RadioButtonCoreTagProps;
     onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
     onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
-    placeholder?: string;
     disabled?: boolean;
     value?: string | number;
     autoFocus?: boolean;
     readOnly?: boolean;
     required?: boolean;
+    checked?: boolean;
     defaultChecked?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;

package/components/radioButtonCore.mjs

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import i from "../box.mjs";
+import { O as p } from "../utils/utils.mjs";
+import "../box.module.css.mjs";
+function u(o, r) {
+  const [t, e] = p.moveToTagProps(
+    o,
+    "name",
+    "onInput",
+    "onChange",
+    "disabled",
+    "value",
+    "autoFocus",
+    "readOnly",
+    "required",
+    "checked",
+    "defaultChecked"
+  );
+  return /* @__PURE__ */ a(i, { ref: r, tag: "input", inline: !0, ...e, props: { ...o.props, ...t, type: "radio" } });
+}
+const l = n(u);
+export {
+  l as default
+};

package/components/{uncontrolledTextareaCore.d.ts → textareaCore.d.ts}

@@ -1,16 +1,17 @@
 import React from 'react';
 import Box from '../box';
-declare type BoxProps = React.ComponentProps<typeof Box<'textarea'>>;
+declare type BoxProps = Omit<React.ComponentProps<typeof Box<'textarea'>>, 'ref' | 'tag'>;
 declare type BoxTagProps = Required<BoxProps>['props'];
-declare type UncontrolledTextareaCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'placeholder' | 'disabled' | 'defaultValue' | 'rows' | 'cols' | 'autoFocus' | 'maxLength' | 'minLength' | 'readOnly' | 'required'>;
+declare type TextareaCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'placeholder' | 'disabled' | 'value' | 'defaultValue' | 'rows' | 'cols' | 'autoFocus' | 'maxLength' | 'minLength' | 'readOnly' | 'required'>;
 interface Props extends Omit<BoxProps, 'props'> {
-    name: string;
-    props?: UncontrolledTextareaCoreTagProps;
+    name?: string;
+    props?: TextareaCoreTagProps;
     onInput?: (e: React.FormEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.FormEvent<HTMLTextAreaElement>) => void;
     placeholder?: string;
     disabled?: boolean;
-    defaultValue?: string | number;
+    value?: string;
+    defaultValue?: string;
     rows?: number;
     cols?: number;
     autoFocus?: boolean;

package/components/textareaCore.mjs

@@ -0,0 +1,29 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import s from "../box.mjs";
+import { O as m } from "../utils/utils.mjs";
+import "../box.module.css.mjs";
+function p(e, o) {
+  const [r, t] = m.moveToTagProps(
+    e,
+    "name",
+    "onInput",
+    "onChange",
+    "placeholder",
+    "disabled",
+    "value",
+    "defaultValue",
+    "rows",
+    "cols",
+    "autoFocus",
+    "maxLength",
+    "minLength",
+    "readOnly",
+    "required"
+  );
+  return /* @__PURE__ */ a(s, { ref: o, tag: "textarea", inline: !0, ...t, props: { ...e.props, ...r } });
+}
+const c = n(p);
+export {
+  c as default
+};

package/components/{uncontrolledTextboxCore.d.ts → textboxCore.d.ts}

@@ -1,18 +1,20 @@
 import React from 'react';
 import Box from '../box';
-declare type BoxProps = React.ComponentProps<typeof Box<'input'>>;
+declare type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
 declare type BoxTagProps = Required<BoxProps>['props'];
-declare type UncontrolledTextboxCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'defaultValue' | 'autoFocus' | 'readOnly' | 'required'>;
-declare type UncontrolledTextboxCoreType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+declare type TextboxCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'defaultValue' | 'autoFocus' | 'readOnly' | 'required' | 'value' | 'pattern'>;
+declare type TextboxCoreType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 interface Props extends Omit<BoxProps, 'props'> {
-    name: string;
-    props?: UncontrolledTextboxCoreTagProps;
+    name?: string;
+    props?: TextboxCoreTagProps;
     onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
     onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
-    type?: UncontrolledTextboxCoreType;
+    type?: TextboxCoreType;
     placeholder?: string;
     disabled?: boolean;
+    value?: string | number;
     defaultValue?: string | number;
+    pattern?: string;
     autoFocus?: boolean;
     readOnly?: boolean;
     required?: boolean;

package/components/textboxCore.mjs

@@ -0,0 +1,28 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import n from "../box.mjs";
+import { O as s } from "../utils/utils.mjs";
+import "../box.module.css.mjs";
+function i(o, e) {
+  const [t, r] = s.moveToTagProps(
+    o,
+    "name",
+    "onInput",
+    "onChange",
+    "type",
+    "placeholder",
+    "disabled",
+    "value",
+    "defaultValue",
+    "pattern",
+    "autoFocus",
+    "readOnly",
+    "required",
+    "step"
+  );
+  return /* @__PURE__ */ a(n, { ref: e, tag: "input", inline: !0, ...r, props: { ...o.props, ...t } });
+}
+const x = p(i);
+export {
+  x as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "main": "./box.mjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",