@verifiedinc-public/shared-ui-elements 12.8.4 → 12.9.0

package/dist/components/form/PhoneInput.d.ts

@@ -1,11 +1,16 @@
-import { BasePhoneInputProps } from '.';
+import { PrettyPhoneInputProps } from './PrettyPhoneInput';
+export interface PhoneInputProps extends PrettyPhoneInputProps {
+    /**
+     * Whether to render the phone input in a pretty way (animated gradient border). Defaults to false.
+     */
+    pretty?: boolean;
+}
 /**
  * Renders a phone input component.
  *
  * @param props - The props for the phone input component.
  * @param props.pretty - Whether to render the phone input in a pretty way.
+ * @param props.loading - Whether to show the loading indicator. Only the pretty variant renders one.
  * @returns The phone input component.
  */
-export declare function PhoneInput(props: Readonly<BasePhoneInputProps & {
-    pretty?: boolean;
-}>): import("react").JSX.Element;
+export declare function PhoneInput({ pretty, loading, ...props }: Readonly<PhoneInputProps>): React.JSX.Element;

package/dist/components/form/PhoneInput.mjs

@@ -1 +1 @@
-"use strict";import{jsx as o}from"react/jsx-runtime";import{PrettyPhoneInput as t}from"./PrettyPhoneInput.mjs";import{BasePhoneInput as n}from"./BasePhoneInput.mjs";function e(r){return r.pretty?o(t,{...r}):o(n,{...r})}export{e as PhoneInput};
+"use strict";import{BasePhoneInput as e}from"./BasePhoneInput.mjs";import{PrettyPhoneInput as p}from"./PrettyPhoneInput.mjs";import{jsx as r}from"react/jsx-runtime";function a({pretty:t=!1,loading:n,...o}){return t?r(p,{...o,loading:n}):r(e,{...o})}export{a as PhoneInput};

package/dist/components/form/PrettyPhoneInput.d.ts

@@ -1,2 +1,16 @@
 import { BasePhoneInputProps } from './BasePhoneInput';
-export declare function PrettyPhoneInput(props: Readonly<BasePhoneInputProps>): React.JSX.Element;
+export interface PrettyPhoneInputProps extends BasePhoneInputProps {
+    /**
+     * Whether the input is waiting on something (e.g. a lookup triggered by the typed number).
+     * The beam lapping the border speeds up while true so it reads as a loading indicator. Defaults to false.
+     */
+    loading?: boolean;
+}
+/**
+ * Renders the phone input wrapped in a gradient border with a beam of light lapping it at a constant
+ * speed: slowly while idle, quickly while loading.
+ *
+ * @param loading - Whether to show the loading indicator (the beam laps the border quickly). Defaults to false.
+ * @param props - Every other prop is forwarded to `BasePhoneInput`.
+ */
+export declare function PrettyPhoneInput({ loading, ...props }: Readonly<PrettyPhoneInputProps>): React.JSX.Element;

package/dist/components/form/PrettyPhoneInput.mjs

@@ -1,64 +1,32 @@
-"use strict";import{useTheme as g,keyframes as n,Box as p}from"@mui/material";import{alpha as c,darken as l}from"../../utils/color/index.mjs";import{BasePhoneInput as b}from"./BasePhoneInput.mjs";import{jsx as a}from"react/jsx-runtime";function m(t){const o=g(),e=t.error?o.palette.error.main:o.palette.primary.main,r=c(l(e,10),.4),i=o.palette.background.paper,d=n`
-    0% {
-      transform: rotate(0deg);
-    }
-    20% {
-      transform: rotate(80deg);
-    }
-    25% {
-      transform: rotate(90deg);
-    }
-    45% {
-      transform: rotate(170deg);
-    }
-    50% {
-      transform: rotate(180deg);
-    }
-    70% {
-      transform: rotate(260deg);
-    }
-    75% {
-      transform: rotate(270deg);
-    }
-    95% {
-      transform: rotate(350deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  `,u=n`
-    0% {
-      background-size: 100% 100%;
-    }
-    50% {
-      background-size: 110% 110%;
-    }
-    100% {
-      background-size: 100% 100%;
-    }
-  `,s=n`
-    0% {
-      background-position: 0% 0%;
-    }
-    25% {
-      background-position: 100% 100%;
-    }
-    50% {
-      background-position: 100% 100%;
-    }
-    75% {
-      background-position: 100% 100%;
-    }
-    100% {
-      background-position: 0% 0%;
-    }
-  `;return a(p,{width:"100%",sx:{position:"relative",zIndex:0,"& label.MuiFormLabel-root":{background:i},"& .MuiOutlinedInput-root":{position:"relative",overflow:"hidden","&::before":{content:'""',position:"absolute",width:"calc(100% + 8px)",aspectRatio:1,left:-4,zIndex:-1,background:`conic-gradient(
-              from 45deg,
-              ${e} 0deg, 
-              ${e} 60deg, 
-              ${r} 95deg,
-              rgba(255,255,255,1) 105deg,
-              ${r} 115deg,
-              ${e} 150deg, 
-              ${e} 360deg
-            )`,animation:`${d} 8s linear infinite, ${u} 3s linear infinite, ${s} 12s linear infinite`,backgroundOrigin:"border-box",backgroundPosition:"center",backgroundSize:"100% 100%"}},"& .MuiOutlinedInput-notchedOutline":{border:"none",zIndex:-1,m:.25,top:0,"&::before":{content:'""',position:"absolute",inset:0,backgroundColor:i,zIndex:-1},"& legend":{display:"none"}},"& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":{border:"none"},"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":{border:"none"}},children:a(b,{...t})})}export{m as PrettyPhoneInput};
+"use strict";import{useRef as v,useState as C,useEffect as g}from"react";import{useTheme as R,Box as T,keyframes as h}from"@mui/material";import{alpha as j,darken as B}from"../../utils/color/index.mjs";import{BasePhoneInput as E}from"./BasePhoneInput.mjs";import{jsx as y}from"react/jsx-runtime";const V=8,q=.8,m="--ppi-progress",O=160,I=36,w={start:-O/2,"start-shoulder":-I/2,core:0,"end-shoulder":I/2,end:O/2},A=h`
+  from {
+    ${m}: 0;
+  }
+  to {
+    ${m}: 1;
+  }
+`,D=h`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`,x=new WeakSet;function F(e){const o=e.ownerDocument,n=o.defaultView;if(!n||typeof n.CSS>"u"||typeof n.CSS.registerProperty!="function")return!1;if(x.has(o))return!0;try{n.CSS.registerProperty({name:m,syntax:"<number>",inherits:!1,initialValue:"0"})}catch(t){if(t.name!=="InvalidModificationError")return!1}return x.add(o),!0}function L(e){const o=w[e],n=`var(--ppi-d-${e})`,t="var(--ppi-p)",d={[`--ppi-d-${e}`]:`calc(var(${m}) * ${t} ${o<0?"-":"+"} ${Math.abs(o)})`,[`--ppi-x-${e}`]:`clamp(-1 * var(--ppi-a), abs(mod(${n} + ${t} * 0.75, ${t}) - ${t} / 2) - ${t} / 4, var(--ppi-a))`,[`--ppi-y-${e}`]:`clamp(-1 * var(--ppi-b), ${t} / 4 - abs(mod(${n}, ${t}) - ${t} / 2), var(--ppi-b))`,[`--ppi-t-${e}`]:`atan2(var(--ppi-x-${e}), -1 * var(--ppi-y-${e}))`};return e!=="start"&&(d[`--ppi-s-${e}`]=`mod(var(--ppi-t-${e}) - var(--ppi-t-start), 360deg)`),d}const G={"--ppi-a":"calc(var(--ppi-w) / 2)","--ppi-b":"calc(var(--ppi-h) / 2)","--ppi-p":"calc(4 * (var(--ppi-a) + var(--ppi-b)))",...Object.assign({},...Object.keys(w).map(L))};function N({loading:e=!1,...o}){const n=R(),t=v(null),[d,S]=C(!1),a=e?q:V,$=v(a),i=o.error?n.palette.error.main:n.palette.primary.main,c=j(B(i,10),.4),b=n.palette.background.paper;g(()=>{const r=t.current;r&&S(F(r))},[]),g(()=>{const r=t.current,u=r?.querySelector(".MuiOutlinedInput-root"),p=r?.ownerDocument.defaultView;if(!r||!u||!p||typeof p.ResizeObserver>"u")return;const s=new p.ResizeObserver(()=>{const{width:l,height:f}=u.getBoundingClientRect();r.style.setProperty("--ppi-w",String(l)),r.style.setProperty("--ppi-h",String(f))});return s.observe(u),()=>{s.disconnect()}},[]),g(()=>{var r;const u=$.current;$.current=a;const p=(r=t.current)==null?void 0:r.querySelector(".MuiOutlinedInput-root");if(!(u===a||!p||typeof p.getAnimations!="function"))for(const s of p.getAnimations({subtree:!0})){const l=s.effect;if(l?.pseudoElement!=="::before"||typeof s.currentTime!="number")continue;const f=u*1e3,z=s.currentTime%f/f;s.currentTime=z*a*1e3}},[a]);const k=`conic-gradient(
+    from var(--ppi-t-start),
+    ${i} 0deg,
+    ${c} var(--ppi-s-start-shoulder),
+    rgba(255,255,255,1) var(--ppi-s-core),
+    ${c} var(--ppi-s-end-shoulder),
+    ${i} var(--ppi-s-end),
+    ${i} 360deg
+  )`,M=`conic-gradient(
+    from 45deg,
+    ${i} 0deg,
+    ${i} 60deg,
+    ${c} 95deg,
+    rgba(255,255,255,1) 105deg,
+    ${c} 115deg,
+    ${i} 150deg,
+    ${i} 360deg
+  )`,P=d?{...G,background:k,animation:`${A} ${a}s linear infinite`}:{background:M,animation:`${D} ${a}s linear infinite`};return y(T,{ref:t,width:"100%","aria-busy":e||void 0,sx:{position:"relative",zIndex:0,"--ppi-w":"320","--ppi-h":"56","& label.MuiFormLabel-root":{background:b},"& .MuiOutlinedInput-root":{position:"relative",overflow:"hidden","&::before":{content:'""',position:"absolute",width:"calc(100% + 8px)",aspectRatio:1,left:-4,zIndex:-1,backgroundOrigin:"border-box",backgroundPosition:"center",backgroundSize:"100% 100%",...P}},"& .MuiOutlinedInput-notchedOutline":{border:"none",zIndex:-1,m:.25,top:0,"&::before":{content:'""',position:"absolute",inset:0,backgroundColor:b,zIndex:-1},"& legend":{display:"none"}},"& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":{border:"none"},"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":{border:"none"}},children:y(E,{...o})})}export{N as PrettyPhoneInput};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "12.8.4",
+  "version": "12.9.0",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": false,