@ilo-org/react 0.28.5 → 0.28.6

package/lib/cjs/_store/Logo-entry-BtBNFSSE.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),t=require("react"),A=require("./useGlobalSettings-chunk-Cd48T6lS.js"),p=require("./index-chunk-Cxg31gtu.js"),D=({clientHeight:e,clientWidth:r,scrollHeight:n,scrollWidth:o})=>n>e||o>r,J=(e,{maxSize:r=600,startingHeight:n=9,step:o=.5})=>{let s=n,c=!1;for(;!c&&s<r;)e.style.fontSize=`${s}px`,e.style.lineHeight=`${s}px`,c=D(e),c||(s=s+o);return e.style.fontSize="",e.style.lineHeight="",s-o},H=({baseClass:e,className:r,subbrand:n,alt:o,src:s,style:c,size:f="fluid",theme:l="light",...$})=>{const g=t.useRef(null),S=t.useRef(null),L=t.useRef(null),a=t.useRef(null),j=t.useRef(0),v=t.useRef(0),[d,N]=t.useState(!1),[z,k]=t.useState(0),[y,w]=t.useState(0),[E,q]=t.useState(!n),I=t.useRef(new ResizeObserver(i=>{const{height:m}=i[0].contentRect,R=Math.round(m*10)/10;a.current||(a.current=R),Math.abs(R-j.current)>=.1&&(j.current=R,k(R))}));t.useEffect(()=>{n&&d&&y&&q(!0)},[d,y,n]),t.useLayoutEffect(()=>{if(d&&S.current&&g.current){const i=g.current;return I.current.observe(i),()=>I.current.unobserve(i)}},[d]),t.useLayoutEffect(()=>{b()},[d,a.current]),t.useLayoutEffect(()=>{b()},[n]);function b(){if(S.current&&L.current&&a.current){const m=J(S.current,{maxSize:a.current})/a.current;Math.abs(m-v.current)>=.001&&(v.current=m,w(m))}}function B(){N(!0)}const h=!!n,F=f==="fluid",M=!F&&typeof f=="number",x=`${e}--sub-brand`,O=`${e}--size--fluid`,W=`${e}--visibility--hidden`,C=p.classNames(e,r,`${e}--theme--${l}`,{[W]:!E,[O]:F,[x]:h}),G=`${e}--image`,T=`${x}--image`,V=()=>{const i={};return h&&(i["--logo-image-height"]=`${z}px`,i["--logo-font-size"]=`${y*z}px`),M&&(i.width=`${f}px`),{...c,...i}},P=()=>typeof s=="string"?s:s[l];return u.jsxs("figure",{className:C,style:V(),children:[u.jsx("img",{ref:g,alt:o,src:P(),className:p.classNames({[T]:h,[G]:!h}),onLoad:B,...$}),h&&u.jsxs("div",{ref:S,className:`${x}--lock-up`,children:[u.jsx("span",{className:`${x}--lock-up--separator`}),u.jsx("span",{ref:L,children:n})]})]})},K=({className:e,url:r,target:n,style:o,size:s,...c})=>{const{prefix:f}=A.useGlobalSettings(),l=`${f}--logo`,$=`${l}--link`,g=`${l}--size--fluid`;return r?u.jsx("a",{href:r,target:n,className:p.classNames($,e,{[g]:s==="fluid"}),style:o,children:u.jsx(H,{...c,baseClass:l,size:s})}):u.jsx(H,{baseClass:l,className:e,style:o,size:s,...c})};exports.Logo=K;

package/lib/esm/_store/Logo-entry-CNT0VLHB.js

@@ -0,0 +1,121 @@
+import { jsx as a, jsxs as w } from "react/jsx-runtime";
+import { useRef as l, useState as x, useEffect as P, useLayoutEffect as v } from "react";
+import { u as Q } from "./useGlobalSettings-chunk-BhfWlTcd.js";
+import { c as I } from "./index-chunk-CY3PQDr4.js";
+const U = ({
+  clientHeight: e,
+  clientWidth: s,
+  scrollHeight: n,
+  scrollWidth: i
+}) => n > e || i > s, X = (e, { maxSize: s = 600, startingHeight: n = 9, step: i = 0.5 }) => {
+  let t = n, r = !1;
+  for (; !r && t < s; )
+    e.style.fontSize = `${t}px`, e.style.lineHeight = `${t}px`, r = U(e), r || (t = t + i);
+  return e.style.fontSize = "", e.style.lineHeight = "", t - i;
+}, B = ({
+  baseClass: e,
+  className: s,
+  subbrand: n,
+  alt: i,
+  src: t,
+  style: r,
+  size: f = "fluid",
+  theme: c = "light",
+  ...y
+}) => {
+  const g = l(null), $ = l(null), L = l(null), u = l(null), R = l(0), F = l(0), [d, E] = x(!1), [H, M] = x(0), [z, W] = x(0), [j, C] = x(!n), k = l(
+    new ResizeObserver((o) => {
+      const { height: h } = o[0].contentRect, S = Math.round(h * 10) / 10;
+      u.current || (u.current = S), Math.abs(S - R.current) >= 0.1 && (R.current = S, M(S));
+    })
+  );
+  P(() => {
+    n && d && z && C(!0);
+  }, [d, z, n]), v(() => {
+    if (d && $.current && g.current) {
+      const o = g.current;
+      return k.current.observe(o), () => k.current.unobserve(o);
+    }
+  }, [d]), v(() => {
+    N();
+  }, [d, u.current]), v(() => {
+    N();
+  }, [n]);
+  function N() {
+    if ($.current && L.current && u.current) {
+      const h = X($.current, {
+        maxSize: u.current
+      }) / u.current;
+      Math.abs(h - F.current) >= 1e-3 && (F.current = h, W(h));
+    }
+  }
+  function O() {
+    E(!0);
+  }
+  const m = !!n, b = f === "fluid", V = !b && typeof f == "number", p = `${e}--sub-brand`, G = `${e}--size--fluid`, T = `${e}--visibility--hidden`, q = I(
+    e,
+    s,
+    `${e}--theme--${c}`,
+    {
+      [T]: !j,
+      [G]: b,
+      [p]: m
+    }
+  ), A = `${e}--image`, D = `${p}--image`, J = () => {
+    const o = {};
+    return m && (o["--logo-image-height"] = `${H}px`, o["--logo-font-size"] = `${z * H}px`), V && (o.width = `${f}px`), { ...r, ...o };
+  }, K = () => typeof t == "string" ? t : t[c];
+  return /* @__PURE__ */ w("figure", { className: q, style: J(), children: [
+    /* @__PURE__ */ a(
+      "img",
+      {
+        ref: g,
+        alt: i,
+        src: K(),
+        className: I({
+          [D]: m,
+          [A]: !m
+        }),
+        onLoad: O,
+        ...y
+      }
+    ),
+    m && /* @__PURE__ */ w("div", { ref: $, className: `${p}--lock-up`, children: [
+      /* @__PURE__ */ a("span", { className: `${p}--lock-up--separator` }),
+      /* @__PURE__ */ a("span", { ref: L, children: n })
+    ] })
+  ] });
+}, te = ({
+  className: e,
+  url: s,
+  target: n,
+  style: i,
+  size: t,
+  ...r
+}) => {
+  const { prefix: f } = Q(), c = `${f}--logo`, y = `${c}--link`, g = `${c}--size--fluid`;
+  return s ? /* @__PURE__ */ a(
+    "a",
+    {
+      href: s,
+      target: n,
+      className: I(y, e, {
+        [g]: t === "fluid"
+      }),
+      style: i,
+      children: /* @__PURE__ */ a(B, { ...r, baseClass: c, size: t })
+    }
+  ) : /* @__PURE__ */ a(
+    B,
+    {
+      baseClass: c,
+      className: e,
+      style: i,
+      size: t,
+      ...r
+    }
+  );
+};
+export {
+  te as Logo
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.28.5",
+  "version": "0.28.6",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -75,8 +75,8 @@
     "video.js": "^7.21.2",
     "videojs-youtube": "^3.0.1",
     "@ilo-org/brand-assets": "1.0.1",
-    "@ilo-org/fonts": "2.0.0",
     "@ilo-org/icons-react": "1.0.6",
+    "@ilo-org/fonts": "2.0.0",
     "@ilo-org/styles": "1.11.1"
   },
   "devDependencies": {

package/lib/cjs/_store/Logo-entry-nsoJtWSa.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),V=require("./useGlobalSettings-chunk-Cd48T6lS.js"),R=require("./index-chunk-Cxg31gtu.js"),M=({clientHeight:e,clientWidth:l,scrollHeight:n,scrollWidth:o})=>n>e||o>l,P=(e,{maxSize:l=600,startingHeight:n=9,step:o=.5})=>{let t=n,c=!1;for(;!c&&t<l;)e.style.fontSize=`${t}px`,e.style.lineHeight=`${t}px`,c=M(e),c||(t=t+o);return e.style.fontSize="",e.style.lineHeight="",t-o},I=({baseClass:e,className:l,subbrand:n,alt:o,src:t,style:c,size:f="fluid",theme:u="light",...$})=>{const g=s.useRef(null),h=s.useRef(null),p=s.useRef(null),a=s.useRef(null),[d,N]=s.useState(!1),[L,F]=s.useState(0),[y,b]=s.useState(0),[k,H]=s.useState(!n),j=s.useRef(new ResizeObserver(i=>{const{height:x}=i[0].contentRect;a.current||(a.current=x),F(x)}));s.useEffect(()=>{n&&d&&y&&H(!0)},[d,y,n]),s.useLayoutEffect(()=>{if(d&&h.current&&g.current){const i=g.current;return j.current.observe(i),()=>j.current.unobserve(i)}},[d]),s.useLayoutEffect(()=>{v()},[d,a.current]),s.useLayoutEffect(()=>{v()},[n]);function v(){if(h.current&&p.current&&a.current){const x=P(h.current,{maxSize:a.current})/a.current;b(x)}}function w(){N(!0)}const m=!!n,z=f==="fluid",E=!z&&typeof f=="number",S=`${e}--sub-brand`,q=`${e}--size--fluid`,B=`${e}--visibility--hidden`,O=R.classNames(e,l,`${e}--theme--${u}`,{[B]:!k,[q]:z,[S]:m}),W=`${e}--image`,C=`${S}--image`,G=()=>{const i={};return m&&(i["--logo-image-height"]=`${L}px`,i["--logo-font-size"]=`${y*L}px`),E&&(i.width=`${f}px`),{...c,...i}},T=()=>typeof t=="string"?t:t[u];return r.jsxs("figure",{className:O,style:G(),children:[r.jsx("img",{ref:g,alt:o,src:T(),className:R.classNames({[C]:m,[W]:!m}),onLoad:w,...$}),m&&r.jsxs("div",{ref:h,className:`${S}--lock-up`,children:[r.jsx("span",{className:`${S}--lock-up--separator`}),r.jsx("span",{ref:p,children:n})]})]})},A=({className:e,url:l,target:n,style:o,size:t,...c})=>{const{prefix:f}=V.useGlobalSettings(),u=`${f}--logo`,$=`${u}--link`,g=`${u}--size--fluid`;return l?r.jsx("a",{href:l,target:n,className:R.classNames($,e,{[g]:t==="fluid"}),style:o,children:r.jsx(I,{...c,baseClass:u,size:t})}):r.jsx(I,{baseClass:u,className:e,style:o,size:t,...c})};exports.Logo=A;

package/lib/esm/_store/Logo-entry-CYL-mIHC.js

@@ -1,121 +0,0 @@
-import { jsx as u, jsxs as H } from "react/jsx-runtime";
-import { useRef as m, useState as S, useEffect as J, useLayoutEffect as v } from "react";
-import { u as K } from "./useGlobalSettings-chunk-BhfWlTcd.js";
-import { c as z } from "./index-chunk-CY3PQDr4.js";
-const M = ({
-  clientHeight: e,
-  clientWidth: s,
-  scrollHeight: n,
-  scrollWidth: i
-}) => n > e || i > s, P = (e, { maxSize: s = 600, startingHeight: n = 9, step: i = 0.5 }) => {
-  let t = n, r = !1;
-  for (; !r && t < s; )
-    e.style.fontSize = `${t}px`, e.style.lineHeight = `${t}px`, r = M(e), r || (t = t + i);
-  return e.style.fontSize = "", e.style.lineHeight = "", t - i;
-}, N = ({
-  baseClass: e,
-  className: s,
-  subbrand: n,
-  alt: i,
-  src: t,
-  style: r,
-  size: f = "fluid",
-  theme: l = "light",
-  ...x
-}) => {
-  const a = m(null), h = m(null), L = m(null), c = m(null), [g, w] = S(!1), [I, B] = S(0), [y, b] = S(0), [E, W] = S(!n), R = m(
-    new ResizeObserver((o) => {
-      const { height: p } = o[0].contentRect;
-      c.current || (c.current = p), B(p);
-    })
-  );
-  J(() => {
-    n && g && y && W(!0);
-  }, [g, y, n]), v(() => {
-    if (g && h.current && a.current) {
-      const o = a.current;
-      return R.current.observe(o), () => R.current.unobserve(o);
-    }
-  }, [g]), v(() => {
-    F();
-  }, [g, c.current]), v(() => {
-    F();
-  }, [n]);
-  function F() {
-    if (h.current && L.current && c.current) {
-      const p = P(h.current, {
-        maxSize: c.current
-      }) / c.current;
-      b(p);
-    }
-  }
-  function j() {
-    w(!0);
-  }
-  const d = !!n, k = f === "fluid", C = !k && typeof f == "number", $ = `${e}--sub-brand`, O = `${e}--size--fluid`, V = `${e}--visibility--hidden`, G = z(
-    e,
-    s,
-    `${e}--theme--${l}`,
-    {
-      [V]: !E,
-      [O]: k,
-      [$]: d
-    }
-  ), T = `${e}--image`, q = `${$}--image`, A = () => {
-    const o = {};
-    return d && (o["--logo-image-height"] = `${I}px`, o["--logo-font-size"] = `${y * I}px`), C && (o.width = `${f}px`), { ...r, ...o };
-  }, D = () => typeof t == "string" ? t : t[l];
-  return /* @__PURE__ */ H("figure", { className: G, style: A(), children: [
-    /* @__PURE__ */ u(
-      "img",
-      {
-        ref: a,
-        alt: i,
-        src: D(),
-        className: z({
-          [q]: d,
-          [T]: !d
-        }),
-        onLoad: j,
-        ...x
-      }
-    ),
-    d && /* @__PURE__ */ H("div", { ref: h, className: `${$}--lock-up`, children: [
-      /* @__PURE__ */ u("span", { className: `${$}--lock-up--separator` }),
-      /* @__PURE__ */ u("span", { ref: L, children: n })
-    ] })
-  ] });
-}, Z = ({
-  className: e,
-  url: s,
-  target: n,
-  style: i,
-  size: t,
-  ...r
-}) => {
-  const { prefix: f } = K(), l = `${f}--logo`, x = `${l}--link`, a = `${l}--size--fluid`;
-  return s ? /* @__PURE__ */ u(
-    "a",
-    {
-      href: s,
-      target: n,
-      className: z(x, e, {
-        [a]: t === "fluid"
-      }),
-      style: i,
-      children: /* @__PURE__ */ u(N, { ...r, baseClass: l, size: t })
-    }
-  ) : /* @__PURE__ */ u(
-    N,
-    {
-      baseClass: l,
-      className: e,
-      style: i,
-      size: t,
-      ...r
-    }
-  );
-};
-export {
-  Z as Logo
-};