@cronocode/react-box 1.2.3 → 1.2.5

package/box.mjs

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

package/buildHelpers/mixins/boxStyles.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    boxStyles: (_mixin: any) => {};
+};
+export default _default;

package/buildHelpers/mixins/svgStyles.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    svgStyles: (_mixin: any) => {};
+};
+export default _default;

package/buildHelpers/plugins/moduleCssPlugin.d.ts

@@ -0,0 +1,2 @@
+import { PluginOption } from 'vite';
+export default function moduleCssPlugin(jsonCache: Record<string, Record<string, string>>): PluginOption;

package/components/baseSvg.mjs

@@ -1,22 +1,2 @@
-import H, { useState as g } from "react";
-import { C as w, t as G } from "../utils/utils.mjs";
-const a = { base: "cGH", rotate0: "cGI", rotateH0: "cGJ", hovertrue: "_h", rotate90: "cGK", rotateH90: "cGL", rotate180: "cGM", rotateH180: "cGN", rotate270: "cGO", rotateH270: "cGP", flipxAxis: "cGQ", flipHxAxis: "cGR", flipyAxis: "cGS", flipHyAxis: "cGT", rotateF0: "cGU", focustrue: "_f", rotateF90: "cGV", rotateF180: "cGW", rotateF270: "cGX", flipFxAxis: "cGY", flipFyAxis: "cGZ" };
-function F(c) {
-  const { children: e, props: p, className: r, style: x, viewBox: m, width: u, height: h } = c, t = r ? w.classNames(r, a.base) : [a.base];
-  Object.entries(c).forEach(([o, n]) => {
-    const f = a[o + n];
-    f ? t.push(f) : o in G && t.push(`${G[o]}${n}`);
-  });
-  const s = {
-    ...p,
-    style: { ...x, width: u, height: h },
-    className: t.join(" "),
-    viewBox: m || "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none"
-  }, [v, i] = g(!1), l = typeof e == "function";
-  return l && (s.onMouseEnter = () => i(!0), s.onMouseLeave = () => i(!1)), H.createElement("svg", s, l ? e({ isHover: v }) : e);
-}
-export {
-  F as default
-};
+import "react";
+import "../utils/utils.mjs";

package/components/buttonCore.mjs

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

package/components/checkboxCore.mjs

@@ -1,10 +1,10 @@
 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 { forwardRef as p } from "react";
+import a from "../box.mjs";
+import { O as i } from "../utils/utils.mjs";
 import "../box.module.css.mjs";
-function i(o, e) {
-  const [r, t] = c.moveToTagProps(
+function m(o, e) {
+  const [r, t] = i.moveToTagProps(
     o,
     "name",
     "onInput",
@@ -17,9 +17,6 @@ function i(o, e) {
     "checked",
     "defaultChecked"
   );
-  return /* @__PURE__ */ n(p, { ref: e, tag: "input", inline: !0, ...t, props: { ...o.props, ...r, type: "checkbox" } });
+  return /* @__PURE__ */ n(a, { ref: e, tag: "input", inline: !0, ...t, props: { ...o.props, ...r, type: "checkbox" } });
 }
-const l = a(i);
-export {
-  l as default
-};
+p(m);

package/components/flex.mjs

@@ -1,12 +1,5 @@
-import { jsx as t } from "react/jsx-runtime";
-import r from "../box.mjs";
+import "react/jsx-runtime";
+import "../box.mjs";
 import "react";
 import "../box.module.css.mjs";
 import "../utils/utils.mjs";
-function x(i) {
-  const { inline: o } = i;
-  return /* @__PURE__ */ t(r, { display: o ? "inline-flex" : "flex", ...i });
-}
-export {
-  x as default
-};

package/components/formAsync.mjs

@@ -1,16 +1,5 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useRef as p, useCallback as u } from "react";
-import a from "../box.mjs";
-import { F as c } from "../utils/utils.mjs";
+import "react/jsx-runtime";
+import "react";
+import "../box.mjs";
+import "../utils/utils.mjs";
 import "../box.module.css.mjs";
-function S(o) {
-  const { onSubmit: m, props: n } = o, r = p(null), s = u((t) => {
-    t.preventDefault();
-    const f = c.getFormEntries(r.current);
-    m(f, t);
-  }, []), e = { ...n, onSubmit: s, ref: r };
-  return /* @__PURE__ */ i(a, { tag: "form", ...o, props: e });
-}
-export {
-  S as default
-};

package/components/radioButtonCore.mjs

@@ -1,10 +1,10 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as a } 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(
+function m(o, r) {
+  const [e, t] = p.moveToTagProps(
     o,
     "name",
     "onInput",
@@ -17,9 +17,6 @@ function u(o, r) {
     "checked",
     "defaultChecked"
   );
-  return /* @__PURE__ */ a(i, { ref: r, tag: "input", inline: !0, ...e, props: { ...o.props, ...t, type: "radio" } });
+  return /* @__PURE__ */ n(i, { ref: r, tag: "input", inline: !0, ...t, props: { ...o.props, ...e, type: "radio" } });
 }
-const l = n(u);
-export {
-  l as default
-};
+a(m);

package/components/textareaCore.mjs

@@ -1,11 +1,11 @@
 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 m from "../box.mjs";
+import { O as i } from "../utils/utils.mjs";
 import "../box.module.css.mjs";
-function p(e, o) {
-  const [r, t] = m.moveToTagProps(
-    e,
+function p(o, r) {
+  const [e, t] = i.moveToTagProps(
+    o,
     "name",
     "onInput",
     "onChange",
@@ -21,9 +21,6 @@ function p(e, o) {
     "readOnly",
     "required"
   );
-  return /* @__PURE__ */ a(s, { ref: o, tag: "textarea", inline: !0, ...t, props: { ...e.props, ...r } });
+  return /* @__PURE__ */ a(m, { ref: r, tag: "textarea", inline: !0, ...t, props: { ...o.props, ...e } });
 }
-const c = n(p);
-export {
-  c as default
-};
+n(p);

package/components/textbox.mjs

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

package/components/textboxCore.mjs

@@ -1,10 +1,10 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
+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 { O as i } from "../utils/utils.mjs";
 import "../box.module.css.mjs";
-function i(o, e) {
-  const [t, r] = s.moveToTagProps(
+function m(o, r) {
+  const [e, t] = i.moveToTagProps(
     o,
     "name",
     "onInput",
@@ -20,9 +20,6 @@ function i(o, e) {
     "required",
     "step"
   );
-  return /* @__PURE__ */ a(n, { ref: e, tag: "input", inline: !0, ...r, props: { ...o.props, ...t } });
+  return /* @__PURE__ */ p(n, { ref: r, tag: "input", inline: !0, ...t, props: { ...o.props, ...e } });
 }
-const x = p(i);
-export {
-  x as default
-};
+a(m);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "main": "./box.mjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",
@@ -11,6 +11,11 @@
       "types": "./box.d.ts"
     },
     "./style.css": "./style.css",
+    "./theme": {
+      "import": "./theme.mjs",
+      "require": "./theme.mjs",
+      "types": "./theme.d.ts"
+    },
     "./components/*": {
       "import": "./components/*.mjs",
       "require": "./components/*.mjs",
@@ -42,23 +47,23 @@
   "description": "",
   "devDependencies": {
     "@cronocode/identity-factory": "^0.0.6",
-    "@rollup/pluginutils": "^5.0.2",
-    "@types/node": "^18.15.7",
+    "@rollup/pluginutils": "^5.0.4",
+    "@types/node": "^20.6.0",
     "@types/postcss-mixins": "^9.0.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^3.1.0",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.21",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.4",
+    "autoprefixer": "^10.4.15",
+    "postcss": "^8.4.29",
     "postcss-each": "^1.1.0",
     "postcss-mixins": "^9.0.4",
     "postcss-nested": "^6.0.1",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^2.8.7",
-    "react": "^18.1.0",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.2.1",
-    "vite-plugin-dts": "^2.1.0"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.5.3"
   }
 }

package/{components → src/components}/buttonCore.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import Box from '../box';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'button'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];

package/{components → src/components}/flex.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import Box from '../box';
 import { Activated, Focused, Hovered } from '../types';
 type BoxProps = React.ComponentProps<typeof Box>;
@@ -13,5 +14,5 @@ interface FlexStylesShortCuts {
     js?: BoxProps['justifySelf'];
 }
 type Props = BoxProps & FlexStylesShortCuts & Hovered<FlexStylesShortCuts> & Focused<FlexStylesShortCuts> & Activated<FlexStylesShortCuts>;
-export default function Flex(props: Props): JSX.Element;
+export default function Flex(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/{components → src/components}/formAsync.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import Box from '../box';
 type BoxProps = React.ComponentProps<typeof Box<'form'>>;
 type BoxTagProps = Required<BoxProps>['props'];
@@ -6,5 +7,5 @@ interface Props<T> extends Omit<BoxProps, 'props' | 'tag'> {
     props?: FormAsyncTagProps;
     onSubmit: (obj: T, e: React.FormEvent<HTMLFormElement>) => void;
 }
-export default function FormAsync<T>(props: Props<T>): JSX.Element;
+export default function FormAsync<T>(props: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/textbox.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import Box from '../box';
+import Theme from '../theme';
+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"];
+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';
+interface Props extends Omit<BoxProps, 'props'>, Theme.ThemeComponentProps {
+    name?: string;
+    props?: TextboxTagProps;
+    onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
+    type?: TextboxType;
+    placeholder?: string;
+    value?: string | number;
+    defaultValue?: string | number;
+    pattern?: string;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    step?: number | string;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/src/theme.d.ts

@@ -0,0 +1,25 @@
+import { BoxStyles } from './types';
+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 useTheme(component: keyof ThemeComponentStyles, props: ThemeComponentProps): BoxStyles;
+    export {};
+}
+export default Theme;