@cronocode/react-box 1.2.7 → 1.3.2

package/theme.d.ts

@@ -1,25 +1,34 @@
 import { BoxStyles } from './types';
+export interface ThemeStyles {
+    styles: BoxStyles;
+    disabled?: BoxStyles;
+}
+export interface ThemeComponentStyles {
+    styles: BoxStyles;
+    disabled?: BoxStyles;
+    themes?: {
+        [name: string]: ThemeStyles;
+    };
+}
+export interface ThemeSetup {
+    components?: {
+        [name: string]: ThemeComponentStyles;
+    };
+    button?: ThemeComponentStyles;
+    textbox?: ThemeComponentStyles;
+    textarea?: ThemeComponentStyles;
+    checkbox?: ThemeComponentStyles;
+    radioButton?: ThemeComponentStyles;
+}
 declare namespace Theme {
-    export interface ThemeComponentProps {
-        clean?: boolean;
-        disabled?: boolean;
-        theme?: string;
-    }
-    interface Styles {
-        styles: BoxStyles;
-        disabled?: BoxStyles;
-    }
-    export interface ThemeStyles extends Styles {
-        themes?: {
-            [name: string]: Styles;
-        };
-    }
-    export interface ThemeComponentStyles {
-        textbox?: ThemeStyles;
-    }
-    export let Styles: ThemeComponentStyles;
-    export function setup(styles: ThemeComponentStyles): void;
-    export {};
+    function setup(styles: ThemeSetup): void;
 }
 export default Theme;
-export declare function useTheme(component: keyof Theme.ThemeComponentStyles, props: Theme.ThemeComponentProps): BoxStyles;
+type ReservedComponentName = Exclude<string, keyof Omit<ThemeSetup, 'components'>>;
+export interface ThemeComponentProps {
+    clean?: boolean;
+    disabled?: boolean;
+    component?: ReservedComponentName;
+    theme?: string;
+}
+export declare function useTheme(props: ThemeComponentProps): BoxStyles;

package/theme.mjs

@@ -1,27 +1,27 @@
-import { useMemo as m } from "react";
-var r;
-((t) => {
-  t.Styles = {};
-  function n(l) {
-    t.Styles = l;
+import { useMemo as c } from "react";
+let m = {};
+var u;
+((l) => {
+  function s(n) {
+    m = n;
   }
-  t.setup = n;
-})(r || (r = {}));
-const y = r;
-function f(t, n) {
-  const { clean: l, disabled: i, theme: s } = n;
-  return m(() => {
-    var d, a;
-    if (l)
+  l.setup = s;
+})(u || (u = {}));
+const h = u;
+function p(l) {
+  const { clean: s, disabled: n, theme: t, component: o } = l;
+  return c(() => {
+    var i, d, a;
+    if (s)
       return {};
-    let e = r.Styles[t];
+    let e = m[o] ?? ((i = m.components) == null ? void 0 : i[o]);
     if (!e)
       return {};
-    let u = s ? { ...e.styles, ...(d = e.themes) == null ? void 0 : d[s].styles } : e.styles;
-    return i ? s ? { ...u, ...e.disabled, ...(a = e.themes) == null ? void 0 : a[s].disabled } : { ...u, ...e.disabled } : u;
-  }, [t, l, i, s]);
+    let r = t ? { ...e.styles, ...(d = e.themes) == null ? void 0 : d[t].styles } : e.styles;
+    return n ? t ? { ...r, ...e.disabled, ...(a = e.themes) == null ? void 0 : a[t].disabled } : { ...r, ...e.disabled } : r;
+  }, [o, s, n, t]);
 }
 export {
-  y as default,
-  f as useTheme
+  h as default,
+  p as useTheme
 };

package/types.d.ts

@@ -40,6 +40,8 @@ export declare const styleVariables: {
     transition: readonly ["none"];
     background: readonly ["none"];
     userSelect: readonly ["none"];
+    appearance: readonly ["none"];
+    pointerEvents: readonly ["none"];
 };
 type GapType = (typeof styleVariables.gap)[number];
 type BoxSizeValue = (typeof styleVariables.sizeSpecialValues)[number];
@@ -59,6 +61,8 @@ type BorderAndOutlineStyleType = (typeof styleVariables.borderAndOutlineStyles)[
 type TransitionType = (typeof styleVariables.transition)[number];
 type BackgroundType = (typeof styleVariables.background)[number];
 type UserSelectType = (typeof styleVariables.userSelect)[number];
+type AppearanceType = (typeof styleVariables.appearance)[number];
+type PointerEventsType = (typeof styleVariables.pointerEvents)[number];
 interface BoxPseudoClasses {
     hover?: boolean;
     focus?: boolean;
@@ -70,7 +74,7 @@ interface BoxDisplay {
 interface BoxSizing {
     boxSizing?: (typeof styleVariables.boxSizing)[number];
 }
-interface BoxPosition {
+export interface BoxPosition {
     position?: (typeof styleVariables.position)[number];
     inset?: SizeType;
     top?: SizeType;
@@ -210,7 +214,13 @@ interface BoxTransition {
 interface BoxUserSelect {
     userSelect?: UserSelectType;
 }
-type BoxNormalStyles = BoxPseudoClasses & BoxDisplay & BoxSizing & BoxPosition & BoxSize & BoxMargin & BoxPadding & BoxBorder & BoxShadow & BoxBackground & BoxColors & BoxCursor & BoxZIndex & BoxOverflow & BoxOpacity & BoxFont & BoxText & BoxFlex & BoxOutline & BoxTransition & BoxUserSelect;
+interface BoxAppearance {
+    appearance?: AppearanceType;
+}
+interface BoxPointerEvents {
+    pointerEvents?: PointerEventsType;
+}
+type BoxNormalStyles = BoxPseudoClasses & BoxDisplay & BoxSizing & BoxPosition & BoxSize & BoxMargin & BoxPadding & BoxBorder & BoxShadow & BoxBackground & BoxColors & BoxCursor & BoxZIndex & BoxOverflow & BoxOpacity & BoxFont & BoxText & BoxFlex & BoxOutline & BoxTransition & BoxUserSelect & BoxAppearance & BoxPointerEvents;
 export type BoxStyles = BoxNormalStyles & Hovered<BoxNormalStyles> & Focused<BoxNormalStyles> & Activated<BoxNormalStyles>;
 export declare const themeClasses: Partial<Record<keyof BoxStyles, string>>;
 export declare const themeSvgClasses: Partial<Record<keyof SvgStyles, string>>;