@verifiedinc-public/shared-ui-elements 12.24.1 → 12.24.2-rc.91

package/dist/components/animation/DiffusiveText/DiffusiveText.d.ts

@@ -0,0 +1,20 @@
+import { MorphTiming } from './morph';
+export type DiffusiveTextTiming = MorphTiming;
+/** The timing `DiffusiveText` uses for anything its `timing` prop leaves out. */
+export declare const defaultDiffusiveTextTiming: DiffusiveTextTiming;
+/** The family `fonts/verified-morph.css` declares. */
+export declare const verifiedMorphFontFamily = "\"Verified Morph\"";
+export type DiffusiveTextProps = {
+    /** `X` an uppercase letter, `x` a lowercase one, `#` a digit; anything else shows as is (`##/##/####`). */
+    template: string;
+    value: string | undefined;
+    /**
+     * Verified Morph's CSS family: `verifiedMorphFontFamily` once the app imports
+     * `@verifiedinc-public/shared-ui-elements/fonts/verified-morph.css`, or the family a framework
+     * font loader (`next/font/local`) gives it.
+     */
+    fontFamily: string;
+    /** Overrides part of `defaultDiffusiveTextTiming`. Read when the scramble starts. */
+    timing?: Partial<DiffusiveTextTiming>;
+};
+export declare function DiffusiveText({ template, value, fontFamily, timing, }: Readonly<DiffusiveTextProps>): React.ReactElement;

package/dist/components/animation/DiffusiveText/DiffusiveText.mjs

@@ -0,0 +1 @@
+"use strict";import{useRef as M,useState as y,useEffect as F}from"react";import{Box as $}from"@mui/material";import{useReducedMotion as E}from"framer-motion";import{createMorph as S}from"./morph.mjs";import{jsx as V}from"react/jsx-runtime";const w={swapMs:40,lockMs:600,monoEaseMs:2e3},d=new Map;function k(s,e){const n=`${s}|${e}`,f=d.get(n);if(f)return f;const o=`${e} 100px ${s}`,t=document.createElement("canvas").getContext("2d"),r=new Map,i=u=>{if(!t)return 1;const m=r.get(u)??t.measureText(u).width;return r.set(u,m),m};return t&&(t.font=o),d.set(n,i),document.fonts&&!document.fonts.check(o)&&document.fonts.load(o).then(()=>{d.get(n)===i&&d.delete(n)}).catch(()=>{}),i}const j='"Verified Morph"';function q({template:s,value:e,fontFamily:n,timing:f}){const o=M(null),t=M(null),r=E(),[i,u]=y(e!==void 0),[m,A]=y(0);i&&e===void 0&&(u(!1),A(a=>a+1)),F(()=>{var a;if(i||r)return;((a=t.current)==null?void 0:a.run)!==m&&(t.current={run:m,morph:S(s,performance.now(),{...w,...f})});const C=o.current?getComputedStyle(o.current).fontWeight:"400";let p=0;const h=T=>{var g;const c=o.current,x=(g=t.current)==null?void 0:g.morph;if(!c||!x)return;const v=x.frame(T,k(n,C));c.firstChild&&(c.firstChild.nodeValue=v.text),c.style.setProperty("--mono",v.mono.toFixed(4)),v.done?(c.style.setProperty("--mono","0"),u(!0)):p=requestAnimationFrame(h)};return p=requestAnimationFrame(h),()=>cancelAnimationFrame(p)},[i,r,s,n,m]),F(()=>{var a;e!==void 0&&((a=t.current)==null||a.morph.arrive(e,performance.now()))},[e]);const l=i||r===!0&&e!==void 0;return V($,{component:"span",ref:o,"aria-hidden":l?void 0:!0,sx:{fontFamily:n,fontVariationSettings:'"MONO" var(--mono, 0)',fontVariantLigatures:"none",verticalAlign:"top","--mono":l||r===!0?0:1,opacity:!l&&r?.3:void 0},children:l?e:s.replaceAll("#","0")})}export{q as DiffusiveText,w as defaultDiffusiveTextTiming,j as verifiedMorphFontFamily};

package/dist/components/animation/DiffusiveText/index.d.ts

@@ -0,0 +1 @@
+export * from './DiffusiveText';

package/dist/components/animation/DiffusiveText/morph.d.ts

@@ -0,0 +1,35 @@
+export type MorphTiming = {
+    /** How often a scrambling letter changes, in ms. */
+    swapMs: number;
+    /** Once the value arrives, every letter locks in within this window, in ms, most of them early. */
+    lockMs: number;
+    /** About how long `MONO` takes to ease from monospace toward Lato while waiting, in ms. */
+    monoEaseMs: number;
+};
+declare const sets: {
+    readonly U: "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    readonly L: "abcdefghijklmnopqrstuvwxyz";
+    readonly D: "0123456789";
+};
+type GlyphClass = keyof typeof sets;
+/** A character's class; spaces, punctuation and symbols (`•`) never scramble. */
+export declare function classOf(c: string): GlyphClass | null;
+/** Glyph widths in Lato, for picking lookalikes. */
+export type MeasureWidth = (c: string) => number;
+type Random = () => number;
+/** A plausible fake value in the template's shape: placeholders become random glyphs. */
+export declare function fakeFrom(template: string, random: Random): string[];
+export type MorphFrame = {
+    text: string;
+    mono: number;
+    done: boolean;
+};
+export type Morph = {
+    /** The value arrived at `now` (ms): the text takes its width, and the letters lock in. */
+    arrive: (value: string, now: number) => void;
+    /** The text and `MONO` at `now` (ms); `done` once it shows the value in plain Lato. */
+    frame: (now: number, width: MeasureWidth) => MorphFrame;
+};
+/** Starts scrambling `template` at `start` (ms). */
+export declare function createMorph(template: string, start: number, timing: MorphTiming, random?: Random): Morph;
+export {};

package/dist/components/animation/DiffusiveText/morph.mjs

@@ -0,0 +1 @@
+"use strict";const C={U:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",L:"abcdefghijklmnopqrstuvwxyz",D:"0123456789"},D={X:"U",x:"L","#":"D"};function E(t){return/\d/.test(t)?"D":t.toLowerCase()!==t.toUpperCase()?t===t.toUpperCase()?"U":"L":null}const F=new WeakMap,q={waiting:.06,arrived:.02};function y(t,r,n,a){const o=t+r+a,l=q[a];let s=F.get(n);s||(s=new Map,F.set(n,s));const f=s.get(o);if(f)return f;const i=n(t),g=[...C[r]].sort((u,k)=>Math.abs(n(u)-i)-Math.abs(n(k)-i)),h=g.filter(u=>Math.abs(n(u)-i)<=i*l);let c=h;return a==="waiting"&&h.length<3?c=g.slice(0,3):h.length===0&&(c=[t]),s.set(o,c),c}const O=(t,r)=>t[Math.floor(r()*t.length)];function W(t,r){return[...t].map(n=>{const a=D[n];return a?O(C[a],r):n})}function N(t,r,n,a){for(let o=0;o<a;o+=4){const l=Math.min(4,a-o)/1e3;t.v+=(n*n*(r-t.x)-2*n*t.v)*l,t.x+=t.v*l}}function R(t,r,n,a=Math.random){const o=W(t,a),l=[...t].map(e=>D[e]??null),s=[...o],{swapMs:f,lockMs:i,monoEaseMs:g}=n,h=4400/g,c=o.map(()=>r+a()*f),u={x:1,v:0};let k=r,w=null;const L=(e,m,p,x,U)=>((s[e]===void 0||x>=c[e])&&(s[e]=O(y(m,p,U,w?"arrived":"waiting"),a),c[e]=x+f*(.7+.6*a())),s[e]);return{arrive(e,m){const p=[...e];s.length=0,c.length=0,w={at:m,real:p,lock:p.map(()=>a()**2*i)}},frame(e,m){if(!w)return N(u,.1,h,Math.min(50,Math.max(0,e-k))),k=e,{text:o.map((M,d)=>{const v=l[d];return v?L(d,M,v,e,m):M}).join(""),mono:u.x,done:!1};const{at:p,real:x,lock:U}=w,X=e-p;let j=!1;const b=x.map((M,d)=>{const v=E(M);return!v||X>=U[d]?M:(j=!0,L(d,M,v,e,m))});return j?{text:b.join(""),mono:0,done:!1}:{text:x.join(""),mono:0,done:!0}}}}export{E as classOf,R as createMorph,W as fakeFrom};

package/dist/components/animation/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Counter';
 export * from './motions';
 export * from './AnimatedHeight';
+export * from './DiffusiveText';

package/dist/components/animation/index.mjs

@@ -1 +1 @@
-"use strict";import{Counter as o}from"./Counter.mjs";import{MotionBox as t,MotionButton as a,MotionStack as i,MotionTableCell as n,MotionTableRow as s,MotionTbody as M,MotionTypography as e}from"./motions.mjs";import{AnimateHeight as r}from"./AnimatedHeight.mjs";export{r as AnimateHeight,o as Counter,t as MotionBox,a as MotionButton,i as MotionStack,n as MotionTableCell,s as MotionTableRow,M as MotionTbody,e as MotionTypography};
+"use strict";import{Counter as o}from"./Counter.mjs";import{MotionBox as i,MotionButton as a,MotionStack as t,MotionTableCell as s,MotionTableRow as e,MotionTbody as n,MotionTypography as r}from"./motions.mjs";import{AnimateHeight as f}from"./AnimatedHeight.mjs";import{DiffusiveText as M,defaultDiffusiveTextTiming as m,verifiedMorphFontFamily as T}from"./DiffusiveText/DiffusiveText.mjs";export{f as AnimateHeight,o as Counter,M as DiffusiveText,i as MotionBox,a as MotionButton,t as MotionStack,s as MotionTableCell,e as MotionTableRow,n as MotionTbody,r as MotionTypography,m as defaultDiffusiveTextTiming,T as verifiedMorphFontFamily};

package/fonts/verified-morph.css

@@ -0,0 +1,100 @@
+/* Verified Morph: Lato 2.0 with a MONO axis (1 = every letter the same width, 0 = exactly Lato). Latin, upright, 100-900. Lato is under the SIL Open Font License. */
+@font-face {
+  font-family: 'Verified Morph';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('./VerifiedMorph-Hairline-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD, U+0300-036F;
+}
+@font-face {
+  font-family: 'Verified Morph';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url('./VerifiedMorph-Thin-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD, U+0300-036F;
+}
+@font-face {
+  font-family: 'Verified Morph';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('./VerifiedMorph-Light-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD, U+0300-036F;
+}
+@font-face {
+  font-family: 'Verified Morph';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./VerifiedMorph-Regular-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD, U+0300-036F;
+}
+@font-face {
+  font-family: 'Verified Morph';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./VerifiedMorph-Medium-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD, U+0300-036F;
+}
+@font-face {
+  font-family: 'Verified Morph';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./VerifiedMorph-Semibold-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD, U+0300-036F;
+}
+@font-face {
+  font-family: 'Verified Morph';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./VerifiedMorph-Bold-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD, U+0300-036F;
+}
+@font-face {
+  font-family: 'Verified Morph';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('./VerifiedMorph-Heavy-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD, U+0300-036F;
+}
+@font-face {
+  font-family: 'Verified Morph';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('./VerifiedMorph-Black-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD, U+0300-036F;
+}

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "12.24.1",
+  "version": "12.24.2-rc.91",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "keywords": [],
   "author": "VerifiedInc",
   "engines": {
@@ -13,7 +15,8 @@
   "main": "/dist/index.mjs",
   "types": "/dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "fonts"
   ],
   "exports": {
     ".": {
@@ -55,7 +58,8 @@
     "./utils/*": {
       "types": "./dist/utils/*/index.d.ts",
       "import": "./dist/utils/*/index.mjs"
-    }
+    },
+    "./fonts/verified-morph.css": "./fonts/verified-morph.css"
   },
   "scripts": {
     "test": "npm run vitest",