@cronocode/react-box 1.7.9 → 1.8.1

package/box.cjs

@@ -1 +1 @@
-"use strict";const s=require("react"),u=require("./core.cjs");function d(t,n){const{tag:r="div",children:o,props:i,className:f,style:a}=t,m=u.useStyles(t,r==="svg"),v=s.useMemo(()=>u.classNames(m,f).join(" "),[t]),e={...i,className:v};a&&(e.style=a),n&&(e.ref=n);const[y,c]=s.useState(!1),l=typeof o=="function";return l&&(e.onMouseEnter=()=>c(!0),e.onMouseLeave=()=>c(!1)),s.createElement(r,e,l?o({isHover:y}):o)}const g=s.forwardRef(d);module.exports=g;
+"use strict";const s=require("react"),u=require("./core.cjs");function g(t,a){const{tag:n="div",children:o,props:f,className:d,style:c,disabled:r}=t,y=u.useStyles(t,n==="svg"),m=s.useMemo(()=>u.classNames(y,d).join(" "),[t]),e={...f,className:m,disabled:Array.isArray(r)?r[0]:r};c&&(e.style=c),a&&(e.ref=a);const[v,l]=s.useState(!1),i=typeof o=="function";return i&&(e.onMouseEnter=()=>l(!0),e.onMouseLeave=()=>l(!1)),s.createElement(n,e,i?o({isHover:v}):o)}const N=s.forwardRef(g);module.exports=N;

package/box.d.ts

@@ -1,8 +1,8 @@
-import React, { RefAttributes } from 'react';
+import React, { Ref, RefAttributes } from 'react';
 import { BoxStyleProps, ExtractElementFromTag } from './core/types';
 import { ClassNameType } from './core/classNames';
 type AllProps<TTag extends keyof React.JSX.IntrinsicElements> = React.ComponentProps<TTag>;
-type TagPropsType<TTag extends keyof React.JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref'>;
+type TagPropsType<TTag extends keyof React.JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref' | 'disabled'>;
 interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyleProps {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
@@ -12,5 +12,8 @@ interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyle
     className?: ClassNameType;
     style?: React.ComponentProps<TTag>['style'];
 }
+declare function Box<TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag>, ref: Ref<ExtractElementFromTag<TTag>>): React.ReactElement<React.ComponentProps<TTag>, string | React.JSXElementConstructor<any>>;
 declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: Props<TTag> & React.RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;
+export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = React.ComponentProps<typeof Box<TTag>>;
+export type BoxTagProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Required<BoxProps<TTag>>['props'];

package/box.mjs

@@ -1,12 +1,12 @@
-import v, { forwardRef as d, useMemo as y, useState as g } from "react";
-import { u as p, c as N } from "./core.mjs";
-function x(s, o) {
-  const { tag: a = "div", children: t, props: l, className: u, style: n } = s, f = p(s, a === "svg"), i = y(() => N(f, u).join(" "), [s]), e = { ...l, className: i };
+import y, { forwardRef as v, useMemo as g, useState as p } from "react";
+import { u as N, c as x } from "./core.mjs";
+function H(s, o) {
+  const { tag: r = "div", children: t, props: i, className: u, style: n, disabled: a } = s, f = N(s, r === "svg"), m = g(() => x(f, u).join(" "), [s]), e = { ...i, className: m, disabled: Array.isArray(a) ? a[0] : a };
   n && (e.style = n), o && (e.ref = o);
-  const [m, r] = g(!1), c = typeof t == "function";
-  return c && (e.onMouseEnter = () => r(!0), e.onMouseLeave = () => r(!1)), v.createElement(a, e, c ? t({ isHover: m }) : t);
+  const [d, l] = p(!1), c = typeof t == "function";
+  return c && (e.onMouseEnter = () => l(!0), e.onMouseLeave = () => l(!1)), y.createElement(r, e, c ? t({ isHover: d }) : t);
 }
-const S = d(x);
+const $ = v(H);
 export {
-  S as default
+  $ as default
 };

package/components/baseSvg.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import Box from '../box';
+import { BoxTagProps } from '../box';
 import { BoxSvgStyles } from '../core/types';
 import { ClassNameType } from '../core/classNames';
-type SvgTagProps = Required<React.ComponentProps<typeof Box<'svg'>>>['props'];
-type BoxSvgTagProps = Omit<SvgTagProps, 'viewBox' | 'width' | 'height'>;
+type BoxSvgTagProps = Omit<BoxTagProps<'svg'>, 'viewBox' | 'width' | 'height'>;
 interface Props extends BoxSvgStyles {
     children?: React.ReactNode | ((props: {
         isHover: boolean;

package/components/button.cjs

@@ -1 +1 @@
-"use strict";const r=require("react/jsx-runtime"),n=require("react"),s=require("../box.cjs"),u=require("../utils.cjs");require("../core.cjs");const i=["type","onClick","disabled"];function c(t,e){const o=u.ObjectUtils.buildProps(t,i);return r.jsx(s,{ref:e,tag:"button",component:"button",...o})}const b=n.forwardRef(c);module.exports=b;
+"use strict";const r=require("react/jsx-runtime"),n=require("react"),s=require("../box.cjs"),u=require("../utils.cjs");require("../core.cjs");const i=["type","onClick"];function c(t,e){const o=u.ObjectUtils.buildProps(t,i);return r.jsx(s,{ref:e,tag:"button",component:"button",...o})}const b=n.forwardRef(c);module.exports=b;

package/components/button.d.ts

@@ -2,7 +2,7 @@
 import Box from '../box';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'button'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
-declare const tagProps: readonly ["type", "onClick", "disabled"];
+declare const tagProps: readonly ["type", "onClick"];
 type TagPropsType = (typeof tagProps)[number];
 type ButtonTagProps = Omit<BoxTagProps, TagPropsType>;
 type ButtonType = Required<React.ComponentProps<'button'>>['type'];

package/components/button.mjs

@@ -1,14 +1,14 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import s from "../box.mjs";
-import { O as i } from "../utils.mjs";
+import m from "../box.mjs";
+import { O as s } from "../utils.mjs";
 import "../core.mjs";
-const m = ["type", "onClick", "disabled"];
+const i = ["type", "onClick"];
 function e(o, t) {
-  const r = i.buildProps(o, m);
-  return /* @__PURE__ */ n(s, { ref: t, tag: "button", component: "button", ...r });
+  const r = s.buildProps(o, i);
+  return /* @__PURE__ */ n(m, { ref: t, tag: "button", component: "button", ...r });
 }
-const d = p(e);
+const l = p(e);
 export {
-  d as default
+  l as default
 };

package/components/checkbox.cjs

@@ -1 +1 @@
-"use strict";const e=require("react/jsx-runtime"),s=require("react"),t=require("../box.cjs"),c=require("../utils.cjs"),u=require("./flex.cjs");require("../core.cjs");const l=["name","onInput","onChange","disabled","autoFocus","readOnly","required","value","checked","defaultChecked"];function d(n,r){const{native:o}=n,i=c.ObjectUtils.buildProps(n,l,{type:"checkbox"});return e.jsxs(u,{inline:!0,position:"relative",children:[e.jsx(t,{ref:r,tag:"input",component:"checkbox",...i,appearance:o?void 0:"none"}),!o&&e.jsx(t,{position:"absolute",pointerEvents:"none",children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",viewBox:"0 0 20 20",children:e.jsx("g",{fill:"none",fillRule:"evenodd",children:e.jsx("path",{stroke:"#000",strokeLinecap:"round",strokeLinejoin:"round",d:"M6 10.15L8.5 13 14 7"})})})})]})}const a=s.forwardRef(d);module.exports=a;
+"use strict";const u=require("react/jsx-runtime"),c=require("react"),i=require("../box.cjs"),s=require("../utils.cjs");require("../core.cjs");const a=["name","onInput","onChange","autoFocus","readOnly","required","value","checked","defaultChecked"];function l(o,e){const{indeterminate:n}=o,r=s.ObjectUtils.buildProps(o,a,{type:"checkbox"}),t=c.useRef(null);return c.useEffect(()=>{e&&typeof e!="function"&&e.current?e.current.indeterminate=!!n:t.current&&(t.current.indeterminate=!!n)},[e,t,n]),u.jsx(i,{tag:"input",ref:e||t,component:"checkbox",...r})}const d=c.forwardRef(l);module.exports=d;

package/components/checkbox.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import Box from '../box';
-type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
-type BoxTagProps = Required<BoxProps>['props'];
-declare const tagProps: readonly ["name", "onInput", "onChange", "disabled", "autoFocus", "readOnly", "required", "value", "checked", "defaultChecked"];
+import { BoxTagProps, BoxProps } from '../box';
+declare const tagProps: readonly ["name", "onInput", "onChange", "autoFocus", "readOnly", "required", "value", "checked", "defaultChecked"];
 type TagPropsType = (typeof tagProps)[number];
-type CheckboxTagProps = Omit<BoxTagProps, TagPropsType | 'type'>;
-interface Props extends Omit<BoxProps, 'props'> {
+type CheckboxProps = Omit<BoxProps<'input'>, 'tag' | 'props'>;
+type CheckboxTagProps = Omit<BoxTagProps<'input'>, TagPropsType | 'type'>;
+interface Props extends CheckboxProps {
     name?: string;
     props?: CheckboxTagProps;
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -16,7 +15,7 @@ interface Props extends Omit<BoxProps, 'props'> {
     required?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
-    native?: boolean;
+    indeterminate?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/checkbox.mjs

@@ -1,29 +1,16 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import t from "../box.mjs";
-import { O as a } from "../utils.mjs";
-import d from "./flex.mjs";
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as i, useRef as u, useEffect as a } from "react";
+import s from "../box.mjs";
+import { O as m } from "../utils.mjs";
 import "../core.mjs";
-const l = [
-  "name",
-  "onInput",
-  "onChange",
-  "disabled",
-  "autoFocus",
-  "readOnly",
-  "required",
-  "value",
-  "checked",
-  "defaultChecked"
-];
-function p(o, r) {
-  const { native: n } = o, i = a.buildProps(o, l, { type: "checkbox" });
-  return /* @__PURE__ */ c(d, { inline: !0, position: "relative", children: [
-    /* @__PURE__ */ e(t, { ref: r, tag: "input", component: "checkbox", ...i, appearance: n ? void 0 : "none" }),
-    !n && /* @__PURE__ */ e(t, { position: "absolute", pointerEvents: "none", children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ e("path", { stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 10.15L8.5 13 14 7" }) }) }) })
-  ] });
+const f = ["name", "onInput", "onChange", "autoFocus", "readOnly", "required", "value", "checked", "defaultChecked"];
+function p(n, e) {
+  const { indeterminate: t } = n, c = m.buildProps(n, f, { type: "checkbox" }), o = u(null);
+  return a(() => {
+    e && typeof e != "function" && e.current ? e.current.indeterminate = !!t : o.current && (o.current.indeterminate = !!t);
+  }, [e, o, t]), /* @__PURE__ */ r(s, { tag: "input", ref: e || o, component: "checkbox", ...c });
 }
-const v = s(p);
+const k = i(p);
 export {
-  v as default
+  k as default
 };

package/components/flex.mjs

@@ -1,12 +1,12 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
 import n from "../box.mjs";
 import "../core.mjs";
 function l(o, r) {
   const { inline: e, ...t } = o;
-  return /* @__PURE__ */ i(n, { ref: r, display: e ? "inline-flex" : "flex", ...t });
+  return /* @__PURE__ */ f(n, { ref: r, display: e ? "inline-flex" : "flex", ...t });
 }
-const a = f(l);
+const a = i(l);
 export {
   a as default
 };

package/components/radioButton.cjs

@@ -1 +1 @@
-"use strict";const r=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),i=require("../utils.cjs");require("../core.cjs");const s=["name","onInput","onChange","disabled","value","autoFocus","readOnly","required","checked","defaultChecked"];function c(e,t){const o=i.ObjectUtils.buildProps(e,s,{type:"radio"});return r.jsx(u,{ref:t,tag:"input",component:"radioButton",...o})}const a=n.forwardRef(c);module.exports=a;
+"use strict";const r=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),i=require("../utils.cjs");require("../core.cjs");const s=["name","onInput","onChange","value","autoFocus","readOnly","required","checked","defaultChecked"];function c(e,t){const o=i.ObjectUtils.buildProps(e,s,{type:"radio"});return r.jsx(u,{ref:t,tag:"input",component:"radioButton",...o})}const a=n.forwardRef(c);module.exports=a;

package/components/radioButton.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import Box from '../box';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
-declare const tagProps: readonly ["name", "onInput", "onChange", "disabled", "value", "autoFocus", "readOnly", "required", "checked", "defaultChecked"];
+declare const tagProps: readonly ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "required", "checked", "defaultChecked"];
 type TagPropsType = (typeof tagProps)[number];
 type RadioButtonTagProps = Omit<BoxTagProps, TagPropsType | 'type'>;
 interface Props extends Omit<BoxProps, 'props'> {

package/components/radioButton.mjs

@@ -3,23 +3,12 @@ import { forwardRef as n } from "react";
 import a from "../box.mjs";
 import { O as i } from "../utils.mjs";
 import "../core.mjs";
-const d = [
-  "name",
-  "onInput",
-  "onChange",
-  "disabled",
-  "value",
-  "autoFocus",
-  "readOnly",
-  "required",
-  "checked",
-  "defaultChecked"
-];
-function u(o, t) {
-  const r = i.buildProps(o, d, { type: "radio" });
+const u = ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "required", "checked", "defaultChecked"];
+function p(o, t) {
+  const r = i.buildProps(o, u, { type: "radio" });
   return /* @__PURE__ */ e(a, { ref: t, tag: "input", component: "radioButton", ...r });
 }
-const l = n(u);
+const l = n(p);
 export {
   l as default
 };

package/components/textarea.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),o=require("react"),a=require("../box.cjs"),s=require("../utils.cjs");require("../core.cjs");const u=["name","onInput","onChange","placeholder","disabled","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly","required"];function i(e,t){const r=s.ObjectUtils.buildProps(e,u);return n.jsx(a,{ref:t,tag:"textarea",component:"textarea",...r})}const c=o.forwardRef(i);module.exports=c;
+"use strict";const n=require("react/jsx-runtime"),o=require("react"),a=require("../box.cjs"),s=require("../utils.cjs");require("../core.cjs");const u=["name","onInput","onChange","placeholder","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly","required"];function c(e,t){const r=s.ObjectUtils.buildProps(e,u);return n.jsx(a,{ref:t,tag:"textarea",component:"textarea",...r})}const i=o.forwardRef(c);module.exports=i;

package/components/textarea.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import Box from '../box';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'textarea'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
-declare const tagProps: readonly ["name", "onInput", "onChange", "placeholder", "disabled", "value", "defaultValue", "rows", "cols", "autoFocus", "maxLength", "minLength", "readOnly", "required"];
+declare const tagProps: readonly ["name", "onInput", "onChange", "placeholder", "value", "defaultValue", "rows", "cols", "autoFocus", "maxLength", "minLength", "readOnly", "required"];
 type TagPropsType = (typeof tagProps)[number];
 type TextareaTagProps = Omit<BoxTagProps, TagPropsType>;
 interface Props extends Omit<BoxProps, 'props'> {

package/components/textarea.mjs

@@ -1,14 +1,13 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
 import n from "../box.mjs";
-import { O as s } from "../utils.mjs";
+import { O as m } from "../utils.mjs";
 import "../core.mjs";
-const m = [
+const s = [
   "name",
   "onInput",
   "onChange",
   "placeholder",
-  "disabled",
   "value",
   "defaultValue",
   "rows",
@@ -19,11 +18,11 @@ const m = [
   "readOnly",
   "required"
 ];
-function p(t, e) {
-  const o = s.buildProps(t, m);
-  return /* @__PURE__ */ r(n, { ref: e, tag: "textarea", component: "textarea", ...o });
+function p(t, o) {
+  const e = m.buildProps(t, s);
+  return /* @__PURE__ */ r(n, { ref: o, tag: "textarea", component: "textarea", ...e });
 }
-const f = a(p);
+const x = a(p);
 export {
-  f as default
+  x as default
 };

package/components/textbox.cjs

@@ -1 +1 @@
-"use strict";const o=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),s=require("../utils.cjs");require("../core.cjs");const i=["name","onInput","onChange","type","placeholder","disabled","defaultValue","autoFocus","readOnly","required","value","pattern"];function a(e,t){const r=s.ObjectUtils.buildProps(e,i);return o.jsx(u,{ref:t,tag:"input",component:"textbox",...r})}const c=n.forwardRef(a);module.exports=c;
+"use strict";const o=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),s=require("../utils.cjs");require("../core.cjs");const i=["name","onInput","onChange","type","placeholder","defaultValue","autoFocus","readOnly","required","value","pattern"];function c(e,t){const r=s.ObjectUtils.buildProps(e,i);return o.jsx(u,{ref:t,tag:"input",component:"textbox",...r})}const a=n.forwardRef(c);module.exports=a;

package/components/textbox.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import Box from '../box';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
-declare const tagProps: readonly ["name", "onInput", "onChange", "type", "placeholder", "disabled", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
+declare const tagProps: readonly ["name", "onInput", "onChange", "type", "placeholder", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
 type TagPropsType = (typeof tagProps)[number];
 type TextboxTagProps = Omit<BoxTagProps, TagPropsType>;
 type TextboxType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';

package/components/textbox.mjs

@@ -3,13 +3,12 @@ import { forwardRef as n } from "react";
 import a from "../box.mjs";
 import { O as p } from "../utils.mjs";
 import "../core.mjs";
-const s = [
+const u = [
   "name",
   "onInput",
   "onChange",
   "type",
   "placeholder",
-  "disabled",
   "defaultValue",
   "autoFocus",
   "readOnly",
@@ -17,11 +16,11 @@ const s = [
   "value",
   "pattern"
 ];
-function u(o, t) {
-  const e = p.buildProps(o, s);
+function m(o, t) {
+  const e = p.buildProps(o, u);
   return /* @__PURE__ */ r(a, { ref: t, tag: "input", component: "textbox", ...e });
 }
-const x = n(u);
+const c = n(m);
 export {
-  x as default
+  c as default
 };

package/core/boxStyles.d.ts

@@ -1182,6 +1182,10 @@ export declare const boxThemeStyles: {
         cssNames: string[];
         formatValue: (key: string, value: string | number | boolean) => string;
     };
+    backgroundImage: {
+        cssNames: string[];
+        formatValue: (key: string, value: string | number | boolean) => string;
+    };
     color: {
         cssNames: string[];
         formatValue: (key: string, value: string | number | boolean) => string;
@@ -1211,8 +1215,10 @@ export declare const svgThemeStyles: {
         formatSelector: typeof BoxStylesFormatters.ClassName.svg;
     };
 };
-export declare const pseudoClassSuffixes: readonly ["H", "F", "A"];
+export declare const pseudoClassSuffixes: readonly ["H", "F", "A", "Checked", "Indeterminate", "Valid", "Invalid", "Required", "Optional"];
+export declare const pseudoClassSuffixesExtended: readonly ["H", "F", "A", "Checked", "Indeterminate", "Valid", "Invalid", "Required", "Optional", "Disabled"];
 export type PseudoClassSuffix = (typeof pseudoClassSuffixes)[number];
+export type PseudoClassSuffixExtended = (typeof pseudoClassSuffixesExtended)[number];
 export declare const pseudoClassClassName: {
     hover: {
         className: string;

package/core/theme.d.ts

@@ -1,36 +1,35 @@
 import { BoxStyleProps } from './types';
-export interface ThemeStyles {
-    styles: BoxStyleProps;
-    disabled?: BoxStyleProps;
+import { BoxThemeProps } from './types';
+export interface ThemeStyles<T> {
+    styles: T;
 }
-export interface ThemeComponentStyles {
-    styles: BoxStyleProps;
-    disabled?: BoxStyleProps;
+export interface ThemeComponentStyles<T = BoxStyleProps> extends ThemeStyles<T> {
     themes?: {
-        [name: string]: ThemeStyles;
+        [name: string]: ThemeStyles<T>;
     };
     children?: {
-        [name: string]: ThemeComponentStyles;
+        [name: string]: ThemeComponentStyles<T>;
     };
 }
-export interface ThemeSetup {
+export interface ThemeSetup<T = BoxStyleProps> {
     components?: {
-        [name: string]: ThemeComponentStyles;
+        [name: string]: ThemeComponentStyles<T>;
     };
-    button?: ThemeComponentStyles;
-    textbox?: ThemeComponentStyles;
-    textarea?: ThemeComponentStyles;
-    checkbox?: ThemeComponentStyles;
-    radioButton?: ThemeComponentStyles;
+    button?: ThemeComponentStyles<T>;
+    textbox?: ThemeComponentStyles<T>;
+    textarea?: ThemeComponentStyles<T>;
+    checkbox?: ThemeComponentStyles<T>;
+    radioButton?: ThemeComponentStyles<T>;
 }
 interface BoxAugmentedProps {
     colors: Record<string, string>;
     shadows: Record<string, string>;
     backgrounds: Record<string, string>;
+    backgroundImages: Record<string, string>;
 }
 declare namespace Theme {
-    let Styles: ThemeSetup;
-    function setup(styles: ThemeSetup): void;
+    let Styles: ThemeSetup<BoxStyleProps>;
+    function setup(styles: ThemeSetup<BoxThemeProps>): void;
     function setupAugmentedProps(props: BoxAugmentedProps, options?: {
         namespacePath?: string;
     }): {

package/core/types.d.ts

@@ -1,16 +1,10 @@
 /// <reference types="react" />
-import { StyleItem, aliases, boxStyles } from './boxStyles';
+import { PseudoClassSuffix, StyleItem, aliases, boxStyles } from './boxStyles';
 import { ThemeComponentProps } from './useTheme';
 export type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
 export type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
-export type Hovered<T> = {
-    [K in keyof T as K extends string ? `${K}H` : never]: T[K];
-};
-export type Focused<T> = {
-    [K in keyof T as K extends string ? `${K}F` : never]: T[K];
-};
-export type Activated<T> = {
-    [K in keyof T as K extends string ? `${K}A` : never]: T[K];
+export type PseudoClass<T, TSuffix extends PseudoClassSuffix> = {
+    [K in keyof T as K extends string ? `${K}${TSuffix}` : never]: T[K];
 };
 export declare namespace Augmented {
     interface BoxProps {
@@ -21,16 +15,24 @@ export declare namespace Augmented {
 type BoxStyles<T extends Record<string, StyleItem>> = {
     [K in keyof T]?: T[K]['values1']['values'][number] | T[K]['values2']['values'][number] | T[K]['values3']['values'][number];
 };
-type BoxNormalStyles = BoxStyles<typeof boxStyles> & BoxStyles<typeof aliases>;
+type BoxNormalStyles = BoxStyles<typeof boxStyles> & BoxStyles<typeof aliases> & Augmented.BoxProps;
 interface BoxPseudoClasses {
     hover?: boolean;
     focus?: boolean;
 }
-export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & Hovered<BoxNormalStyles> & Focused<BoxNormalStyles> & Activated<BoxNormalStyles> & ThemeComponentProps & Augmented.BoxProps;
+interface BoxPseudoClasses2 {
+    disabled?: boolean | [boolean, BoxNormalStyles];
+}
+type BoxPseudoClassStyles = PseudoClass<BoxNormalStyles, 'H'> & PseudoClass<BoxNormalStyles, 'F'> & PseudoClass<BoxNormalStyles, 'A'> & PseudoClass<BoxNormalStyles, 'Checked'> & PseudoClass<BoxNormalStyles, 'Indeterminate'> & PseudoClass<BoxNormalStyles, 'Valid'> & PseudoClass<BoxNormalStyles, 'Invalid'> & PseudoClass<BoxNormalStyles, 'Required'> & PseudoClass<BoxNormalStyles, 'Optional'>;
+interface BoxThemePseudoClassProps {
+    disabled?: BoxNormalStyles;
+}
+export type BoxThemeProps = BoxNormalStyles & BoxThemePseudoClassProps & BoxPseudoClassStyles;
+export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & BoxPseudoClasses2 & BoxPseudoClassStyles & ThemeComponentProps;
 interface SvgNormalStyles {
     rotate?: BoxNormalStyles['rotate'];
     flip?: BoxNormalStyles['flip'];
     transitionDuration?: BoxNormalStyles['transitionDuration'];
 }
-export type BoxSvgStyles = SvgNormalStyles & Hovered<SvgNormalStyles> & Focused<SvgNormalStyles> & Activated<SvgNormalStyles> & ThemeComponentProps & Augmented.SvgProps;
+export type BoxSvgStyles = SvgNormalStyles & PseudoClass<SvgNormalStyles, 'H'> & PseudoClass<SvgNormalStyles, 'F'> & PseudoClass<SvgNormalStyles, 'A'> & PseudoClass<SvgNormalStyles, 'Checked'> & PseudoClass<SvgNormalStyles, 'Indeterminate'> & PseudoClass<SvgNormalStyles, 'Valid'> & PseudoClass<SvgNormalStyles, 'Invalid'> & PseudoClass<SvgNormalStyles, 'Required'> & PseudoClass<SvgNormalStyles, 'Optional'> & ThemeComponentProps & Augmented.SvgProps;
 export {};

package/core/useTheme.d.ts

@@ -3,7 +3,6 @@ import { BoxStyleProps } from './types';
 type ReservedComponentName = Exclude<string, keyof Omit<ThemeSetup, 'components'>>;
 export interface ThemeComponentProps {
     clean?: boolean;
-    disabled?: boolean;
     component?: ReservedComponentName;
     theme?: string;
 }