@cronocode/react-box 1.1.4 → 1.1.5

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

package/components/uncontrolledRadioButtonCore.d.ts

@@ -16,5 +16,5 @@ interface Props extends Omit<BoxProps, 'props'> {
     required?: boolean;
     defaultChecked?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "b" | "br" | "p" | "style" | "className" | "hover" | "focus" | "display" | "inline" | "boxSizing" | "position" | "inset" | "top" | "right" | "bottom" | "left" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "margin" | "m" | "marginHorizontal" | "mx" | "marginVertical" | "my" | "marginTop" | "mt" | "marginRight" | "mr" | "marginBottom" | "mb" | "marginLeft" | "ml" | "padding" | "paddingHorizontal" | "px" | "paddingVertical" | "py" | "paddingTop" | "pt" | "paddingRight" | "pr" | "paddingBottom" | "pb" | "paddingLeft" | "pl" | "border" | "borderHorizontal" | "bx" | "borderVertical" | "by" | "borderTop" | "bt" | "borderRight" | "borderBottom" | "bb" | "borderLeft" | "bl" | "borderStyle" | "borderRadius" | "borderRadiusTop" | "borderRadiusRight" | "borderRadiusBottom" | "borderRadiusLeft" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomLeft" | "borderRadiusBottomRight" | "shadow" | "background" | "bg" | "color" | "backgroundColor" | "bgColor" | "borderColor" | "outlineColor" | "cursor" | "zIndex" | "overflow" | "overflowX" | "overflowY" | "opacity" | "fontSize" | "lineHeight" | "fontWeight" | "letterSpacing" | "textDecoration" | "textTransform" | "textAlign" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "flex1" | "flexDirection" | "gap" | "rowGap" | "columnGap" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifySelf" | "outline" | "outlineStyle" | "outlineOffset" | "transition" | "hoverH" | "focusH" | "displayH" | "inlineH" | "boxSizingH" | "positionH" | "insetH" | "topH" | "rightH" | "bottomH" | "leftH" | "widthH" | "heightH" | "minWidthH" | "minHeightH" | "maxWidthH" | "maxHeightH" | "marginH" | "mH" | "marginHorizontalH" | "mxH" | "marginVerticalH" | "myH" | "marginTopH" | "mtH" | "marginRightH" | "mrH" | "marginBottomH" | "mbH" | "marginLeftH" | "mlH" | "paddingH" | "pH" | "paddingHorizontalH" | "pxH" | "paddingVerticalH" | "pyH" | "paddingTopH" | "ptH" | "paddingRightH" | "prH" | "paddingBottomH" | "pbH" | "paddingLeftH" | "plH" | "borderH" | "bH" | "borderHorizontalH" | "bxH" | "borderVerticalH" | "byH" | "borderTopH" | "btH" | "borderRightH" | "brH" | "borderBottomH" | "bbH" | "borderLeftH" | "blH" | "borderStyleH" | "borderRadiusH" | "borderRadiusTopH" | "borderRadiusRightH" | "borderRadiusBottomH" | "borderRadiusLeftH" | "borderRadiusTopLeftH" | "borderRadiusTopRightH" | "borderRadiusBottomLeftH" | "borderRadiusBottomRightH" | "shadowH" | "backgroundH" | "bgH" | "colorH" | "backgroundColorH" | "bgColorH" | "borderColorH" | "outlineColorH" | "cursorH" | "zIndexH" | "overflowH" | "overflowXH" | "overflowYH" | "opacityH" | "fontSizeH" | "lineHeightH" | "fontWeightH" | "letterSpacingH" | "textDecorationH" | "textTransformH" | "textAlignH" | "flexWrapH" | "justifyContentH" | "alignItemsH" | "alignContentH" | "flex1H" | "flexDirectionH" | "gapH" | "rowGapH" | "columnGapH" | "orderH" | "flexGrowH" | "flexShrinkH" | "alignSelfH" | "justifySelfH" | "outlineH" | "outlineStyleH" | "outlineOffsetH" | "transitionH" | "hoverF" | "focusF" | "displayF" | "inlineF" | "boxSizingF" | "positionF" | "insetF" | "topF" | "rightF" | "bottomF" | "leftF" | "widthF" | "heightF" | "minWidthF" | "minHeightF" | "maxWidthF" | "maxHeightF" | "marginF" | "mF" | "marginHorizontalF" | "mxF" | "marginVerticalF" | "myF" | "marginTopF" | "mtF" | "marginRightF" | "mrF" | "marginBottomF" | "mbF" | "marginLeftF" | "mlF" | "paddingF" | "pF" | "paddingHorizontalF" | "pxF" | "paddingVerticalF" | "pyF" | "paddingTopF" | "ptF" | "paddingRightF" | "prF" | "paddingBottomF" | "pbF" | "paddingLeftF" | "plF" | "borderF" | "bF" | "borderHorizontalF" | "bxF" | "borderVerticalF" | "byF" | "borderTopF" | "btF" | "borderRightF" | "brF" | "borderBottomF" | "bbF" | "borderLeftF" | "blF" | "borderStyleF" | "borderRadiusF" | "borderRadiusTopF" | "borderRadiusRightF" | "borderRadiusBottomF" | "borderRadiusLeftF" | "borderRadiusTopLeftF" | "borderRadiusTopRightF" | "borderRadiusBottomLeftF" | "borderRadiusBottomRightF" | "shadowF" | "backgroundF" | "bgF" | "colorF" | "backgroundColorF" | "bgColorF" | "borderColorF" | "outlineColorF" | "cursorF" | "zIndexF" | "overflowF" | "overflowXF" | "overflowYF" | "opacityF" | "fontSizeF" | "lineHeightF" | "fontWeightF" | "letterSpacingF" | "textDecorationF" | "textTransformF" | "textAlignF" | "flexWrapF" | "justifyContentF" | "alignItemsF" | "alignContentF" | "flex1F" | "flexDirectionF" | "gapF" | "rowGapF" | "columnGapF" | "orderF" | "flexGrowF" | "flexShrinkF" | "alignSelfF" | "justifySelfF" | "outlineF" | "outlineStyleF" | "outlineOffsetF" | "transitionF" | "hoverA" | "focusA" | "displayA" | "inlineA" | "boxSizingA" | "positionA" | "insetA" | "topA" | "rightA" | "bottomA" | "leftA" | "widthA" | "heightA" | "minWidthA" | "minHeightA" | "maxWidthA" | "maxHeightA" | "marginA" | "mA" | "marginHorizontalA" | "mxA" | "marginVerticalA" | "myA" | "marginTopA" | "mtA" | "marginRightA" | "mrA" | "marginBottomA" | "mbA" | "marginLeftA" | "mlA" | "paddingA" | "pA" | "paddingHorizontalA" | "pxA" | "paddingVerticalA" | "pyA" | "paddingTopA" | "ptA" | "paddingRightA" | "prA" | "paddingBottomA" | "pbA" | "paddingLeftA" | "plA" | "borderA" | "bA" | "borderHorizontalA" | "bxA" | "borderVerticalA" | "byA" | "borderTopA" | "btA" | "borderRightA" | "brA" | "borderBottomA" | "bbA" | "borderLeftA" | "blA" | "borderStyleA" | "borderRadiusA" | "borderRadiusTopA" | "borderRadiusRightA" | "borderRadiusBottomA" | "borderRadiusLeftA" | "borderRadiusTopLeftA" | "borderRadiusTopRightA" | "borderRadiusBottomLeftA" | "borderRadiusBottomRightA" | "shadowA" | "backgroundA" | "bgA" | "colorA" | "backgroundColorA" | "bgColorA" | "borderColorA" | "outlineColorA" | "cursorA" | "zIndexA" | "overflowA" | "overflowXA" | "overflowYA" | "opacityA" | "fontSizeA" | "lineHeightA" | "fontWeightA" | "letterSpacingA" | "textDecorationA" | "textTransformA" | "textAlignA" | "flexWrapA" | "justifyContentA" | "alignItemsA" | "alignContentA" | "flex1A" | "flexDirectionA" | "gapA" | "rowGapA" | "columnGapA" | "orderA" | "flexGrowA" | "flexShrinkA" | "alignSelfA" | "justifySelfA" | "outlineA" | "outlineStyleA" | "outlineOffsetA" | "transitionA" | "children" | "tag" | "props" | "name" | "defaultChecked" | "placeholder" | "onChange" | "onInput" | "autoFocus" | "disabled" | "value" | "readOnly" | "required"> & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/uncontrolledTextareaCore.d.ts

@@ -19,5 +19,5 @@ interface Props extends Omit<BoxProps, 'props'> {
     readOnly?: boolean;
     required?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLTextAreaElement>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "b" | "br" | "p" | "style" | "className" | "hover" | "focus" | "display" | "inline" | "boxSizing" | "position" | "inset" | "top" | "right" | "bottom" | "left" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "margin" | "m" | "marginHorizontal" | "mx" | "marginVertical" | "my" | "marginTop" | "mt" | "marginRight" | "mr" | "marginBottom" | "mb" | "marginLeft" | "ml" | "padding" | "paddingHorizontal" | "px" | "paddingVertical" | "py" | "paddingTop" | "pt" | "paddingRight" | "pr" | "paddingBottom" | "pb" | "paddingLeft" | "pl" | "border" | "borderHorizontal" | "bx" | "borderVertical" | "by" | "borderTop" | "bt" | "borderRight" | "borderBottom" | "bb" | "borderLeft" | "bl" | "borderStyle" | "borderRadius" | "borderRadiusTop" | "borderRadiusRight" | "borderRadiusBottom" | "borderRadiusLeft" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomLeft" | "borderRadiusBottomRight" | "shadow" | "background" | "bg" | "color" | "backgroundColor" | "bgColor" | "borderColor" | "outlineColor" | "cursor" | "zIndex" | "overflow" | "overflowX" | "overflowY" | "opacity" | "fontSize" | "lineHeight" | "fontWeight" | "letterSpacing" | "textDecoration" | "textTransform" | "textAlign" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "flex1" | "flexDirection" | "gap" | "rowGap" | "columnGap" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifySelf" | "outline" | "outlineStyle" | "outlineOffset" | "transition" | "hoverH" | "focusH" | "displayH" | "inlineH" | "boxSizingH" | "positionH" | "insetH" | "topH" | "rightH" | "bottomH" | "leftH" | "widthH" | "heightH" | "minWidthH" | "minHeightH" | "maxWidthH" | "maxHeightH" | "marginH" | "mH" | "marginHorizontalH" | "mxH" | "marginVerticalH" | "myH" | "marginTopH" | "mtH" | "marginRightH" | "mrH" | "marginBottomH" | "mbH" | "marginLeftH" | "mlH" | "paddingH" | "pH" | "paddingHorizontalH" | "pxH" | "paddingVerticalH" | "pyH" | "paddingTopH" | "ptH" | "paddingRightH" | "prH" | "paddingBottomH" | "pbH" | "paddingLeftH" | "plH" | "borderH" | "bH" | "borderHorizontalH" | "bxH" | "borderVerticalH" | "byH" | "borderTopH" | "btH" | "borderRightH" | "brH" | "borderBottomH" | "bbH" | "borderLeftH" | "blH" | "borderStyleH" | "borderRadiusH" | "borderRadiusTopH" | "borderRadiusRightH" | "borderRadiusBottomH" | "borderRadiusLeftH" | "borderRadiusTopLeftH" | "borderRadiusTopRightH" | "borderRadiusBottomLeftH" | "borderRadiusBottomRightH" | "shadowH" | "backgroundH" | "bgH" | "colorH" | "backgroundColorH" | "bgColorH" | "borderColorH" | "outlineColorH" | "cursorH" | "zIndexH" | "overflowH" | "overflowXH" | "overflowYH" | "opacityH" | "fontSizeH" | "lineHeightH" | "fontWeightH" | "letterSpacingH" | "textDecorationH" | "textTransformH" | "textAlignH" | "flexWrapH" | "justifyContentH" | "alignItemsH" | "alignContentH" | "flex1H" | "flexDirectionH" | "gapH" | "rowGapH" | "columnGapH" | "orderH" | "flexGrowH" | "flexShrinkH" | "alignSelfH" | "justifySelfH" | "outlineH" | "outlineStyleH" | "outlineOffsetH" | "transitionH" | "hoverF" | "focusF" | "displayF" | "inlineF" | "boxSizingF" | "positionF" | "insetF" | "topF" | "rightF" | "bottomF" | "leftF" | "widthF" | "heightF" | "minWidthF" | "minHeightF" | "maxWidthF" | "maxHeightF" | "marginF" | "mF" | "marginHorizontalF" | "mxF" | "marginVerticalF" | "myF" | "marginTopF" | "mtF" | "marginRightF" | "mrF" | "marginBottomF" | "mbF" | "marginLeftF" | "mlF" | "paddingF" | "pF" | "paddingHorizontalF" | "pxF" | "paddingVerticalF" | "pyF" | "paddingTopF" | "ptF" | "paddingRightF" | "prF" | "paddingBottomF" | "pbF" | "paddingLeftF" | "plF" | "borderF" | "bF" | "borderHorizontalF" | "bxF" | "borderVerticalF" | "byF" | "borderTopF" | "btF" | "borderRightF" | "brF" | "borderBottomF" | "bbF" | "borderLeftF" | "blF" | "borderStyleF" | "borderRadiusF" | "borderRadiusTopF" | "borderRadiusRightF" | "borderRadiusBottomF" | "borderRadiusLeftF" | "borderRadiusTopLeftF" | "borderRadiusTopRightF" | "borderRadiusBottomLeftF" | "borderRadiusBottomRightF" | "shadowF" | "backgroundF" | "bgF" | "colorF" | "backgroundColorF" | "bgColorF" | "borderColorF" | "outlineColorF" | "cursorF" | "zIndexF" | "overflowF" | "overflowXF" | "overflowYF" | "opacityF" | "fontSizeF" | "lineHeightF" | "fontWeightF" | "letterSpacingF" | "textDecorationF" | "textTransformF" | "textAlignF" | "flexWrapF" | "justifyContentF" | "alignItemsF" | "alignContentF" | "flex1F" | "flexDirectionF" | "gapF" | "rowGapF" | "columnGapF" | "orderF" | "flexGrowF" | "flexShrinkF" | "alignSelfF" | "justifySelfF" | "outlineF" | "outlineStyleF" | "outlineOffsetF" | "transitionF" | "hoverA" | "focusA" | "displayA" | "inlineA" | "boxSizingA" | "positionA" | "insetA" | "topA" | "rightA" | "bottomA" | "leftA" | "widthA" | "heightA" | "minWidthA" | "minHeightA" | "maxWidthA" | "maxHeightA" | "marginA" | "mA" | "marginHorizontalA" | "mxA" | "marginVerticalA" | "myA" | "marginTopA" | "mtA" | "marginRightA" | "mrA" | "marginBottomA" | "mbA" | "marginLeftA" | "mlA" | "paddingA" | "pA" | "paddingHorizontalA" | "pxA" | "paddingVerticalA" | "pyA" | "paddingTopA" | "ptA" | "paddingRightA" | "prA" | "paddingBottomA" | "pbA" | "paddingLeftA" | "plA" | "borderA" | "bA" | "borderHorizontalA" | "bxA" | "borderVerticalA" | "byA" | "borderTopA" | "btA" | "borderRightA" | "brA" | "borderBottomA" | "bbA" | "borderLeftA" | "blA" | "borderStyleA" | "borderRadiusA" | "borderRadiusTopA" | "borderRadiusRightA" | "borderRadiusBottomA" | "borderRadiusLeftA" | "borderRadiusTopLeftA" | "borderRadiusTopRightA" | "borderRadiusBottomLeftA" | "borderRadiusBottomRightA" | "shadowA" | "backgroundA" | "bgA" | "colorA" | "backgroundColorA" | "bgColorA" | "borderColorA" | "outlineColorA" | "cursorA" | "zIndexA" | "overflowA" | "overflowXA" | "overflowYA" | "opacityA" | "fontSizeA" | "lineHeightA" | "fontWeightA" | "letterSpacingA" | "textDecorationA" | "textTransformA" | "textAlignA" | "flexWrapA" | "justifyContentA" | "alignItemsA" | "alignContentA" | "flex1A" | "flexDirectionA" | "gapA" | "rowGapA" | "columnGapA" | "orderA" | "flexGrowA" | "flexShrinkA" | "alignSelfA" | "justifySelfA" | "outlineA" | "outlineStyleA" | "outlineOffsetA" | "transitionA" | "children" | "tag" | "props" | "name" | "defaultValue" | "placeholder" | "onChange" | "onInput" | "autoFocus" | "disabled" | "maxLength" | "minLength" | "readOnly" | "required" | "cols" | "rows"> & React.RefAttributes<HTMLTextAreaElement>>;
 export default _default;

package/package.json

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

package/utils/object/objectUtils.d.ts

@@ -0,0 +1,4 @@
+declare namespace ObjectUtils {
+    function moveToTagProps<T extends Object, TKey extends keyof T>(props: T, ...keys: TKey[]): Record<TKey, T[TKey]>[];
+}
+export default ObjectUtils;

package/utils/utils.mjs

@@ -1,4 +1,4 @@
-const g = [
+const p = [
   "shadow",
   "shadowH",
   "shadowA",
@@ -24,57 +24,69 @@ const g = [
   "outlineColorH",
   "outlineColorA"
 ];
-var a;
-((h) => {
-  function l(...d) {
-    return d.reduce((e, t) => t ? typeof t == "string" ? (e.push(t), e) : Array.isArray(t) ? (e.push(...l(...t)), e) : (Object.entries(t).forEach(([o, s]) => {
-      s && e.push(o);
-    }), e) : e, []);
+var g;
+((l) => {
+  function i(...u) {
+    return u.reduce((s, o) => o ? typeof o == "string" ? (s.push(o), s) : Array.isArray(o) ? (s.push(...i(...o)), s) : (Object.entries(o).forEach(([t, e]) => {
+      e && s.push(t);
+    }), s) : s, []);
   }
-  h.classNames = l;
-})(a || (a = {}));
-const C = a;
+  l.classNames = i;
+})(g || (g = {}));
+const C = g;
+var h;
+((l) => {
+  function i(u, ...s) {
+    const o = { ...u }, t = {};
+    return s.forEach((e) => {
+      e in o && (t[e] = o[e], delete o[e]);
+    }), [t, o];
+  }
+  l.moveToTagProps = i;
+})(h || (h = {}));
+const A = h;
 var b;
-((h) => {
-  function l(e) {
-    const t = Array.from(e.elements).reduce((o, s) => {
-      const r = s.name;
-      return r && (o[r] || (o[r] = []), o[r].push(s)), o;
+((l) => {
+  function i(s) {
+    const o = Array.from(s.elements).reduce((t, e) => {
+      const r = e.name;
+      return r && (t[r] || (t[r] = []), t[r].push(e)), t;
     }, {});
-    return Object.entries(t).reduce((o, [s, r]) => {
+    return Object.entries(o).reduce((t, [e, r]) => {
       if (r.length === 1) {
         const c = r[0];
-        d(o, s, c.type === "checkbox" || c.type === "radio" ? c.checked : c.value);
+        u(t, e, c.type === "checkbox" || c.type === "radio" ? c.checked : c.value);
       } else {
-        const c = r.reduce((i, n) => (n.type === "checkbox" || n.type === "radio" ? n.checked && i.push(n.value) : i.push(n.value), i), []);
-        d(o, s, c);
+        const c = r.reduce((d, n) => (n.type === "checkbox" || n.type === "radio" ? n.checked && d.push(n.value) : d.push(n.value), d), []);
+        u(t, e, c);
       }
-      return o;
+      return t;
     }, {});
   }
-  h.getFormEntries = l;
-  function d(e, t, o) {
-    if (t.includes(".")) {
-      const s = t.split(".");
-      let r = e;
-      s.forEach((c, i) => {
-        if (s.length > i + 1) {
+  l.getFormEntries = i;
+  function u(s, o, t) {
+    if (o.includes(".")) {
+      const e = o.split(".");
+      let r = s;
+      e.forEach((c, d) => {
+        if (e.length > d + 1) {
           const n = c.match(/^(.+)\[(\d)\]$/);
           if (n) {
-            const [, u, f] = n;
-            r[u] = r[u] || [], r[u][f] = r[u][f] || {}, r = r[u][f];
+            const [, a, f] = n;
+            r[a] = r[a] || [], r[a][f] = r[a][f] || {}, r = r[a][f];
           } else
             r[c] = r[c] || {}, r = r[c];
         } else
-          r[c] = o;
+          r[c] = t;
       });
     } else
-      e[t] = o;
+      s[o] = t;
   }
 })(b || (b = {}));
-const p = b;
+const H = b;
 export {
   C,
-  p as F,
-  g as t
+  H as F,
+  A as O,
+  p as t
 };

package/components/uncontrolledCheckboxCore.mjs

@@ -1,27 +0,0 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import x from "../box.mjs";
-import "../box.module.css.mjs";
-import "../utils/utils.mjs";
-function C(o, e) {
-  const { props: r, name: t, disabled: n, placeholder: a, value: p, onInput: c, onChange: l, autoFocus: u, readOnly: d, required: i, defaultChecked: s } = o, m = {
-    ...r,
-    type: "checkbox",
-    name: t,
-    disabled: n,
-    placeholder: a,
-    onInput: c,
-    onChange: l,
-    value: p,
-    autoFocus: u,
-    readOnly: d,
-    required: i,
-    defaultChecked: s,
-    ref: e
-  };
-  return /* @__PURE__ */ f(x, { tag: "input", inline: !0, ...o, props: m });
-}
-const P = h(C);
-export {
-  P as default
-};

package/components/uncontrolledTextboxCore.mjs

@@ -1,40 +0,0 @@
-import { jsx as x } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import b from "../box.mjs";
-import "../box.module.css.mjs";
-import "../utils/utils.mjs";
-function y(o, t) {
-  const {
-    props: e,
-    name: r,
-    type: n,
-    disabled: p,
-    placeholder: a,
-    defaultValue: l,
-    onInput: u,
-    onChange: i,
-    autoFocus: s,
-    readOnly: d,
-    required: m,
-    step: c
-  } = o, f = {
-    ...e,
-    type: n || "text",
-    name: r,
-    disabled: p,
-    placeholder: a,
-    onInput: u,
-    onChange: i,
-    defaultValue: l,
-    autoFocus: s,
-    readOnly: d,
-    required: m,
-    step: c,
-    ref: t
-  };
-  return /* @__PURE__ */ x(b, { tag: "input", inline: !0, ...o, props: f });
-}
-const j = g(y);
-export {
-  j as default
-};