@ilo-org/react 0.28.5 → 0.28.7

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/lib/styles/components/logo.css

@@ -1 +1 @@
-.ilo--logo--visibility--hidden{visibility:hidden}.ilo--logo--size--fluid{height:auto;width:100%}.ilo--logo--theme--light{--logo-theme-color:var(--ilo-color-blue)}.ilo--logo--theme--dark{--logo-theme-color:var(--ilo-color-white)}.ilo--logo--link{all:unset;cursor:pointer}.ilo--logo--image{height:100%;width:100%}.ilo--logo--sub-brand{--lockup-height:calc(var(--logo-image-height)*0.703);--lockup-bottom-offset:calc(var(--lockup-height)*0.05);align-items:center;color:var(--logo-theme-color);display:inline-flex;font-family:var(--ilo-fonts-display);font-size:var(--logo-font-size);font-weight:700;justify-content:flex-start;line-height:var(--logo-font-size)}.ilo--logo--sub-brand--image{height:100%;width:50%}.ilo--logo--sub-brand--lock-up{align-items:center;bottom:var(--lockup-bottom-offset);display:flex;flex-flow:row nowrap;height:var(--lockup-height);justify-content:flex-start;position:relative;width:50%}.ilo--logo--sub-brand--lock-up--separator{display:inline-block;height:100%;line-height:0;overflow-y:hidden;padding:0 calc(var(--logo-image-height)*.25)}.ilo--logo--sub-brand--lock-up--separator:before{border-right:calc(var(--logo-image-height)*.033) solid var(--logo-theme-color);content:"";display:inline-block;height:100%;position:relative;width:0}
+.ilo--logo{display:flex}.ilo--logo--visibility--hidden{visibility:hidden}.ilo--logo--size--fluid{height:auto;width:100%}.ilo--logo--theme--light{--logo-theme-color:var(--ilo-color-blue)}.ilo--logo--theme--dark{--logo-theme-color:var(--ilo-color-white)}.ilo--logo--link{all:unset;cursor:pointer}.ilo--logo--image{height:100%;width:100%}.ilo--logo--sub-brand{--lockup-height:calc(var(--logo-image-height)*0.703);--lockup-bottom-offset:calc(var(--lockup-height)*0.05);align-items:center;color:var(--logo-theme-color);display:inline-flex;font-family:var(--ilo-fonts-display);font-size:var(--logo-font-size);font-weight:700;justify-content:flex-start;line-height:var(--logo-font-size)}.ilo--logo--sub-brand--image{height:100%;width:60%}.ilo--logo--sub-brand--lock-up{align-items:center;bottom:var(--lockup-bottom-offset);display:flex;flex-flow:row nowrap;height:var(--lockup-height);justify-content:flex-start;position:relative;width:40%}.ilo--logo--sub-brand--lock-up--separator{display:inline-block;height:100%;line-height:0;overflow-y:hidden;padding:0 calc(var(--logo-image-height)*.25)}.ilo--logo--sub-brand--lock-up--separator:before{border-right:calc(var(--logo-image-height)*.033) solid var(--logo-theme-color);content:"";display:inline-block;height:100%;position:relative;width:0}