@cronocode/react-box 1.6.4 → 1.6.5

package/components/dox.cjs

@@ -3,5 +3,5 @@ html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${a.doxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
-.${a.svgClassName}{width: 1.5rem;transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
-`,n=new L.IdentityFactory,v=Object.keys(t),o=b();let d=!1;const g=v.reduce((u,l)=>(u[l]=new Set,u),{});function x(u,l){if(u in t)return f(u,l);if(u in H)return H[u].className;if(u in T)return f(u,l)}a.get=x;function S(){if(d){console.info("%c💬Flush Dox Styles","color: #00ffff");let u=h([r]);u=h(u,"H"),u=h(u,"F"),u=h(u,"A"),o.innerHTML=u.join(""),d=!1}}a.flush=S;function f(u,l){var m;g[u].has(l)||(d=!0,g[u].add(l));const i=V(u,l),c=((m=i.formatClassName)==null?void 0:m.call(i,u,l))??`${u}${l}`;return`-${n.getIdentity(c)}`}function h(u,l){return Object.entries(g).filter(([c])=>{var m;return((m=t[c])==null?void 0:m.pseudoSuffix)===l}).reduce((c,[m,O])=>(O.forEach(k=>{var R;const p=V(m,k),N=`.${f(m,k)}`;let $=[];l?l==="H"?$=[...i(`${N}:hover`,p),...i(`.${H.hover.className}:hover>${N}`,p)]:l==="F"?$=[...i(`${N}:focus-within`,p),...i(`.${H.focus.className}:focus-within>${N}`,p)]:l==="A"&&($=i(`${N}:active`,p)):$=i(N,p);const A=((R=p.formatValue)==null?void 0:R.call(p,m,k))??k,B=t[m].cssNames.map(F=>`${F}:${A};`).join("");c.push(`${$.join(",")}{${B}}`)}),c),u);function i(c,m){return m.formatSelector?m.formatSelector(c):[c]}}function V(u,l){const i=t[u];return i.isThemeStyle?i:i.values1.values.includes(l)?i.values1:i.values2.values.includes(l)?i.values2:i.values3}function b(){const u="crono-styles";let l=document.getElementById(u);return l||(l=document.createElement("style"),l.setAttribute("id",u),l.setAttribute("type","text/css"),document.head.insertBefore(l,document.head.firstChild)),l}})(w||(w={}));function P(a,r){const n=I.useTheme(a);return y.useLayoutEffect(w.flush,[a]),y.useMemo(()=>{const v=[r?w.svgClassName:w.doxClassName],o=n?{...C(n),...C(a)}:C(a);return Object.entries(o).forEach(([d,g])=>{v.push(w.get(d,g))}),v},[a,n])}function C(a){const r={...a};return Object.keys(r).forEach(v=>{const o=z[v];o&&(o.key in r||(r[o.key]=r[v]),delete r[v])}),r}function q(a,r){const{tag:n,children:v,props:o,className:d,style:g}=a,x=P(a,n==="svg"),S=y.useMemo(()=>L.ClassNameUtils.classNames(d,x).join(" "),[a]),f={...o,className:S};g&&(f.style=g),r&&(f.ref=r);const[h,V]=y.useState(!1),b=typeof v=="function";return b&&(f.onMouseEnter=()=>V(!0),f.onMouseLeave=()=>V(!1)),y.createElement(n||"div",f,b?v({isHover:h}):v)}const W=y.forwardRef(q);exports.default=W;
+.${a.svgClassName}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
+`,n=new L.IdentityFactory,v=Object.keys(t),o=b();let d=!1;const g=v.reduce((u,l)=>(u[l]=new Set,u),{});function x(u,l){if(u in t)return f(u,l);if(u in H)return H[u].className;if(u in T)return f(u,l)}a.get=x;function S(){if(d){console.info("%c💬Flush Dox Styles","color: #00ffff");let u=h([r]);u=h(u,"H"),u=h(u,"F"),u=h(u,"A"),o.innerHTML=u.join(""),d=!1}}a.flush=S;function f(u,l){var m;g[u].has(l)||(d=!0,g[u].add(l));const i=V(u,l),c=((m=i.formatClassName)==null?void 0:m.call(i,u,l))??`${u}${l}`;return`-${n.getIdentity(c)}`}function h(u,l){return Object.entries(g).filter(([c])=>{var m;return((m=t[c])==null?void 0:m.pseudoSuffix)===l}).reduce((c,[m,O])=>(O.forEach(k=>{var R;const p=V(m,k),N=`.${f(m,k)}`;let $=[];l?l==="H"?$=[...i(`${N}:hover`,p),...i(`.${H.hover.className}:hover>${N}`,p)]:l==="F"?$=[...i(`${N}:focus-within`,p),...i(`.${H.focus.className}:focus-within>${N}`,p)]:l==="A"&&($=i(`${N}:active`,p)):$=i(N,p);const A=((R=p.formatValue)==null?void 0:R.call(p,m,k))??k,B=t[m].cssNames.map(F=>`${F}:${A};`).join("");c.push(`${$.join(",")}{${B}}`)}),c),u);function i(c,m){return m.formatSelector?m.formatSelector(c):[c]}}function V(u,l){const i=t[u];return i.isThemeStyle?i:i.values1.values.includes(l)?i.values1:i.values2.values.includes(l)?i.values2:i.values3}function b(){const u="crono-styles";let l=document.getElementById(u);return l||(l=document.createElement("style"),l.setAttribute("id",u),l.setAttribute("type","text/css"),document.head.insertBefore(l,document.head.firstChild)),l}})(w||(w={}));function P(a,r){const n=I.useTheme(a);return y.useLayoutEffect(w.flush,[a]),y.useMemo(()=>{const v=[r?w.svgClassName:w.doxClassName],o=n?{...C(n),...C(a)}:C(a);return Object.entries(o).forEach(([d,g])=>{v.push(w.get(d,g))}),v},[a,n])}function C(a){const r={...a};return Object.keys(r).forEach(v=>{const o=z[v];o&&(o.key in r||(r[o.key]=r[v]),delete r[v])}),r}function q(a,r){const{tag:n="div",children:v,props:o,className:d,style:g}=a,x=P(a,n==="svg"),S=y.useMemo(()=>L.ClassNameUtils.classNames(d,x).join(" "),[a]),f={...o,className:S};g&&(f.style=g),r&&(f.ref=r);const[h,V]=y.useState(!1),b=typeof v=="function";return b&&(f.onMouseEnter=()=>V(!0),f.onMouseLeave=()=>V(!1)),y.createElement(n,f,b?v({isHover:h}):v)}const W=y.forwardRef(q);exports.default=W;

package/components/dox.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefAttributes } from 'react';
 import ClassNameUtils from '../utils/className/classNameUtils';
 import { DoxStyleProps } from './dox/doxStyles';
 type AllProps<TTag extends keyof JSX.IntrinsicElements> = React.ComponentProps<TTag>;
@@ -12,5 +12,5 @@ interface Props<TTag extends keyof JSX.IntrinsicElements> extends DoxStyleProps
     className?: ClassNameUtils.ClassNameType;
     style?: React.ComponentProps<TTag>['style'];
 }
-declare const _default: <TTag extends keyof JSX.IntrinsicElements = "div">(props: Props<TTag>) => JSX.Element;
+declare const _default: <TTag extends keyof JSX.IntrinsicElements = "div">(props: Props<TTag> & React.RefAttributes<ExtractElementType<JSX.IntrinsicElements[TTag]>>) => JSX.Element;
 export default _default;

package/components/dox.mjs

@@ -916,7 +916,7 @@ html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${a.doxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
-.${a.svgClassName}{width: 1.5rem;transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
+.${a.svgClassName}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
 `, n = new P(), v = Object.keys(t), o = b();
   let d = !1;
   const g = v.reduce((u, l) => (u[l] = /* @__PURE__ */ new Set(), u), {});
@@ -992,10 +992,10 @@ function H(a) {
   }), r;
 }
 function Y(a, r) {
-  const { tag: n, children: v, props: o, className: d, style: g } = a, y = X(a, n === "svg"), x = E(() => M.classNames(d, y).join(" "), [a]), f = { ...o, className: x };
+  const { tag: n = "div", children: v, props: o, className: d, style: g } = a, y = X(a, n === "svg"), x = E(() => M.classNames(d, y).join(" "), [a]), f = { ...o, className: x };
   g && (f.style = g), r && (f.ref = r);
   const [h, V] = D(!1), b = typeof v == "function";
-  return b && (f.onMouseEnter = () => V(!0), f.onMouseLeave = () => V(!1)), F.createElement(n || "div", f, b ? v({ isHover: h }) : v);
+  return b && (f.onMouseEnter = () => V(!0), f.onMouseLeave = () => V(!1)), F.createElement(n, f, b ? v({ isHover: h }) : v);
 }
 const ee = _(Y);
 export {

package/components/doxSvg.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("./dox.cjs");require("react");require("../utils/utils.cjs");require("../theme.cjs");function g(e){const{props:t,style:r,width:s,height:o,viewBox:i="0 0 24 24",className:u}=e;return n.jsx(l.default,{tag:"svg",className:u,...e,props:{...t,viewBox:i,xmlns:"http://www.w3.org/2000/svg",fill:"none"},style:{...r,width:s,height:o}})}exports.default=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),g=require("react"),c=require("./dox.cjs");require("../utils/utils.cjs");require("../theme.cjs");function a(e,r){const{viewBox:t="0 0 24 24",width:o="1.5rem",height:s,props:i,...n}=e;return u.jsx(c.default,{tag:"svg",ref:r,props:{...i,viewBox:t,width:o,height:s,xmlns:"http://www.w3.org/2000/svg",fill:"none"},...n})}const d=g.forwardRef(a);exports.default=d;

package/components/doxSvg.d.ts

@@ -1,19 +1,18 @@
-import React from 'react';
+import Dox from './dox';
 import ClassNameUtils from '../utils/className/classNameUtils';
 import { DoxSvgStyles } from './dox/doxStyles';
-type AllSvgProps = React.SVGProps<SVGElement>;
-type SvgPropsType = Omit<AllSvgProps, 'className' | 'style' | 'width' | 'height'>;
-type SvgStyleType = Omit<React.CSSProperties, 'width' | 'height'>;
+type SvgTagProps = Required<React.ComponentProps<typeof Dox<'svg'>>>['props'];
+type DoxSvgTagProps = Omit<SvgTagProps, 'viewBox' | 'width' | 'height'>;
 interface Props extends DoxSvgStyles {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
     }) => React.ReactNode);
-    props?: SvgPropsType;
-    style?: SvgStyleType;
+    props?: DoxSvgTagProps;
+    style?: React.ComponentProps<'svg'>['style'];
     className?: ClassNameUtils.ClassNameType;
     viewBox?: string;
     width?: string;
     height?: string;
 }
-export default function DoxSvg(props: Props): JSX.Element;
-export {};
+declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
+export default _default;

package/components/doxSvg.mjs

@@ -1,21 +1,21 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
 import g from "./dox.mjs";
-import "react";
 import "../utils/utils.mjs";
 import "../theme.mjs";
-function f(t) {
-  const { props: o, style: r, width: s, height: i, viewBox: p = "0 0 24 24", className: e } = t;
-  return /* @__PURE__ */ m(
+function n(o, r) {
+  const { viewBox: t = "0 0 24 24", width: p = "1.5rem", height: s, props: i, ...m } = o;
+  return /* @__PURE__ */ e(
     g,
     {
       tag: "svg",
-      className: e,
-      ...t,
-      props: { ...o, viewBox: p, xmlns: "http://www.w3.org/2000/svg", fill: "none" },
-      style: { ...r, width: s, height: i }
+      ref: r,
+      props: { ...i, viewBox: t, width: p, height: s, xmlns: "http://www.w3.org/2000/svg", fill: "none" },
+      ...m
     }
   );
 }
+const h = f(n);
 export {
-  f as default
+  h as default
 };

package/package.json

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