@yahoo/uds 1.8.1 → 1.9.0
Sign up to get free protection for your applications and to get access to all the features.
package/dist/client/index.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var e=require("../chunk-QELQ6JY6.cjs"),t=require("../chunk-PECN66KD.cjs"),n=require("../chunk-WLOEKYUI.cjs"),i=require("../chunk-J6D4HCFT.cjs"),a=require("@yahoo/uds/fixtures"),o=require("react/jsx-runtime"),
|
|
2
|
+
"use strict";var e=require("../chunk-QELQ6JY6.cjs"),t=require("../chunk-PECN66KD.cjs"),n=require("../chunk-WLOEKYUI.cjs"),i=require("../chunk-J6D4HCFT.cjs"),a=require("@yahoo/uds/fixtures"),o=require("react/jsx-runtime"),r=require("framer-motion"),s=require("react"),c={scale:.7,opacity:0},l={scale:[.7,.7,1],opacity:[0,0,1],transition:{times:[0,.5,1]}},u={icon:l,hide:c,loading:c},d={loading:l,hide:c,icon:c},m=`var(${i.BUTTON_CSS_VAR_MAP.columnGap})`,h=`var(${i.BUTTON_CSS_VAR_MAP.iconSize})`,p={rest:{scale:`var(${i.BUTTON_CSS_VAR_MAP.effects.scale.rest})`},hover:{scale:`var(${i.BUTTON_CSS_VAR_MAP.effects.scale.hover})`},pressed:{scale:`var(${i.BUTTON_CSS_VAR_MAP.effects.scale.pressed})`},withoutIcon:{columnGap:"0px"},withIcon:{columnGap:m}},g={hide:{width:"0px",opacity:0,display:"none"},loading:{width:h,display:"flex",opacity:1},icon:{width:h,display:"flex",opacity:1}},x=({size:e,variant:t})=>{if("outline"===t)switch(e){case"sm":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M7.9 2.7a5.2 5.2 0 1 0 5.2 5.2h1.6a6.8 6.8 0 1 1-6.8-6.8.8.8 0 1 1 0 1.6"})});case"md":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M12 4a8 8 0 1 0 8 8h2c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2a1 1 0 1 1 0 2"})});case"lg":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M16.15 4.3C9.605 4.3 4.3 9.605 4.3 16.15S9.605 28 16.15 28 28 22.695 28 16.15h2.3c0 7.815-6.335 14.15-14.15 14.15S2 23.965 2 16.15 8.335 2 16.15 2a1.15 1.15 0 0 1 0 2.3"})})}if("fill"===t)switch(e){case"sm":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M8 2.9A5.1 5.1 0 1 0 13.1 8h1.8A6.9 6.9 0 1 1 8 1.1a.9.9 0 1 1 0 1.8"})});case"md":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M12.15 4.3A7.85 7.85 0 1 0 20 12.15h2.3c0 5.606-4.544 10.15-10.15 10.15S2 17.756 2 12.15 6.544 2 12.15 2a1.15 1.15 0 0 1 0 2.3"})});case"lg":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M16.35 4.7C9.916 4.7 4.7 9.916 4.7 16.35S9.916 28 16.35 28 28 22.784 28 16.35h2.7c0 7.925-6.425 14.35-14.35 14.35S2 24.275 2 16.35 8.425 2 16.35 2a1.35 1.35 0 1 1 0 2.7"})})}return o.jsx(o.Fragment,{})},f=()=>import("../motionFeatures-THWWLQYC.cjs").then((({domAnimation:e})=>e));/*! © 2024 Yahoo, Inc. UDS v0.0.0-development */function v({reducedMotion:e="user",children:i,layoutVariant:a="subtle",layoutSpeed:c="3",colorVariant:l="smooth",colorSpeed:u="3"}){const d=n.motion[a][c],m=n.motion[l][u],[h,p]=s.useState(d),[g,x]=s.useState(m),v={variant:l,speed:u},j=t.getMotionVar({...v,control:"stiffness"}),b=t.getMotionVar({...v,control:"damping"}),S={variant:a,speed:c},y=t.getMotionVar({...S,control:"stiffness"}),M=t.getMotionVar({...S,control:"damping"});s.useEffect((()=>{const e=getComputedStyle(document.documentElement),t={damping:Number(e.getPropertyValue(M)),stiffness:Number(e.getPropertyValue(y))},n={damping:Number(e.getPropertyValue(b)),stiffness:Number(e.getPropertyValue(j))};p(t),x(n)}),[b,j,M,y]);const C=s.useMemo((()=>({type:"spring",mass:1,...h,layout:h,opacity:g,color:g,borderColor:g,backgroundColor:g})),[g,h]);return o.jsx(r.LazyMotion,{features:f,strict:!0,children:o.jsx(r.MotionConfig,{transition:C,reducedMotion:e,children:i})})}var j=e.createSlot(),b=r.m.create(j),S=s.forwardRef((function({palette:t,variant:n,size:i,startIcon:c,endIcon:l,iconVariant:m,loading:h,disableEffects:f,children:j,asChild:S,className:y,...M},C){const I=s.useRef(null);s.useImperativeHandle(C,(()=>I.current));const N=l?"icon":"hide",w=(({startIcon:e,endIcon:t,loading:n})=>e||t||n?"withIcon":"withoutIcon")({startIcon:c,endIcon:l,loading:h}),V=(({loading:e,startIcon:t})=>e?"loading":t?"icon":"hide")({loading:h,startIcon:c}),z={button:e.getStyles({buttonSize:i,buttonVariant:n,buttonPalette:t,className:e.cx("uds-button","uds-ring","uds-hit-target",h&&"uds-button-loading",f&&"uds-button-without-effects","withIcon"===w&&"uds-button-with-gap",y)}),content:"uds-button-content truncate",iconContainer:"uds-button-icon-container flex overflow-clip",loading:"uds-button-icon start-content animate-spin",start:"uds-button-icon start-content",end:"uds-button-icon end-content"},A=r.useReducedMotion()?"smooth":"subtle",P=s.useMemo((()=>o.jsx(r.m.span,{className:z.iconContainer,initial:!1,variants:g,animate:V,children:o.jsxs(r.AnimatePresence,{initial:!1,mode:"popLayout",children:[h&&o.jsx(r.m.span,{variants:d,initial:"hide",animate:"loading",exit:"hide",children:o.jsx(e.Icon,{size:a.buttonIconSvgSize,name:x,variant:m,color:"current",className:z.loading})},"loading"),c&&!h&&o.jsx(r.m.span,{variants:u,initial:"hide",animate:"icon",exit:"hide",children:o.jsx(e.Icon,{size:a.buttonIconSvgSize,name:c,variant:m,color:"current",className:z.start})},c.name)]})})),[z.iconContainer,z.loading,z.start,V,h,m,c]),T=s.useMemo((()=>o.jsx(r.m.span,{className:z.iconContainer,initial:!1,variants:g,animate:N,children:o.jsx(r.AnimatePresence,{initial:!1,mode:"popLayout",children:l&&o.jsx(r.m.span,{variants:u,initial:"hide",animate:"icon",exit:"hide",children:o.jsx(e.Icon,{size:a.buttonIconSvgSize,name:l,variant:m,color:"current",className:z.start})},l.name)})})),[z.iconContainer,z.start,l,N,m]),_=s.useMemo((()=>f?{...p,rest:{},hover:{},pressed:{}}:p),[f]);return S&&s.isValidElement(j)?o.jsx(v,{layoutSpeed:"3",layoutVariant:A,children:o.jsx(b,{className:z.button,initial:["hide",w],animate:w,variants:_,whileHover:"hover",whileTap:"pressed",...M,children:s.cloneElement(j,j.props,o.jsxs(o.Fragment,{children:[P,o.jsx("span",{className:z.content,children:j.props.children}),T]}))})}):o.jsx(v,{layoutSpeed:"3",layoutVariant:A,children:o.jsxs(r.m.button,{ref:I,className:z.button,initial:["hide",w],animate:w,variants:_,whileHover:"hover",whileTap:"pressed",...M,children:[P,o.jsx("span",{className:z.content,children:j}),T]})})})),y=s.forwardRef((function({palette:t,variant:n,size:i,iconVariant:c,loading:l,disableEffects:m,name:h,className:g,children:f,...j},b){const S=s.useRef(null);s.useImperativeHandle(b,(()=>S.current));const y=s.useMemo((()=>({button:e.getStyles({buttonVariant:n,buttonPalette:t,iconButtonSize:i,className:e.cx("uds-icon-button","uds-button","uds-ring","uds-hit-target",l&&"uds-button-loading",m&&"uds-button-without-effects",g)}),loading:"uds-button-icon start-content animate-spin",icon:"uds-button-icon start-content"})),[t,n,g,m,i,l]),M=r.useReducedMotion(),C=s.useMemo((()=>M?"smooth":"subtle"),[M]),I=s.useMemo((()=>{const{rest:e,hover:t,pressed:n}=p;return m?{rest:{},hover:{},pressed:{}}:{rest:e,hover:t,pressed:n}}),[m]);return o.jsx(v,{layoutSpeed:"3",layoutVariant:C,reducedMotion:m?"always":"user",children:o.jsx(r.m.button,{ref:S,className:y.button,initial:"icon",variants:I,whileHover:"hover",whileTap:"pressed",...j,children:o.jsxs(r.AnimatePresence,{initial:!1,mode:"popLayout",children:[l&&o.jsx(r.m.span,{variants:d,initial:"loading",animate:"loading",exit:"hide",children:o.jsx(e.Icon,{size:a.buttonIconSvgSize,name:x,variant:c,color:"current",className:y.loading})},"loading"),h&&!l&&o.jsx(r.m.span,{variants:u,initial:"icon",animate:"icon",exit:"hide",children:f||o.jsx(e.Icon,{size:a.buttonIconSvgSize,name:h,variant:c,color:"current",className:y.icon})},h.name)]})})})}));
|
|
3
3
|
/*! © 2024 Yahoo, Inc. UDS v0.0.0-development */exports.Button=S,exports.IconButton=y,exports.SpringMotionConfig=v;
|
package/dist/client/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{createSlot as t,getStyles as n,cx as e,Icon as
|
|
3
|
-
var I={scale:.7,opacity:0},V={scale:[.7,.7,1],opacity:[0,0,1],transition:{times:[0,.5,1]}},x={icon:V,hide:I,loading:I},z={loading:V,hide:I,icon:I},M=`var(${r.columnGap})`,P=`var(${r.iconSize})`,j={rest:{scale:`var(${r.effects.scale.rest})`},hover:{scale:`var(${r.effects.scale.hover})`},pressed:{scale:`var(${r.effects.scale.pressed})`},withoutIcon:{columnGap:"0px"},withIcon:{columnGap:M}},G={hide:{width:"0px",opacity:0,display:"none"},loading:{width:P,display:"flex",opacity:1},icon:{width:P,display:"flex",opacity:1}},k=({size:t,variant:n})=>{if("outline"===n)switch(t){case"sm":return c(d,{children:c("path",{fill:"currentColor",d:"M7.9 2.7a5.2 5.2 0 1 0 5.2 5.2h1.6a6.8 6.8 0 1 1-6.8-6.8.8.8 0 1 1 0 1.6"})});case"md":return c(d,{children:c("path",{fill:"currentColor",d:"M12 4a8 8 0 1 0 8 8h2c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2a1 1 0 1 1 0 2"})});case"lg":return c(d,{children:c("path",{fill:"currentColor",d:"M16.15 4.3C9.605 4.3 4.3 9.605 4.3 16.15S9.605 28 16.15 28 28 22.695 28 16.15h2.3c0 7.815-6.335 14.15-14.15 14.15S2 23.965 2 16.15 8.335 2 16.15 2a1.15 1.15 0 0 1 0 2.3"})})}if("fill"===n)switch(t){case"sm":return c(d,{children:c("path",{fill:"currentColor",d:"M8 2.9A5.1 5.1 0 1 0 13.1 8h1.8A6.9 6.9 0 1 1 8 1.1a.9.9 0 1 1 0 1.8"})});case"md":return c(d,{children:c("path",{fill:"currentColor",d:"M12.15 4.3A7.85 7.85 0 1 0 20 12.15h2.3c0 5.606-4.544 10.15-10.15 10.15S2 17.756 2 12.15 6.544 2 12.15 2a1.15 1.15 0 0 1 0 2.3"})});case"lg":return c(d,{children:c("path",{fill:"currentColor",d:"M16.35 4.7C9.916 4.7 4.7 9.916 4.7 16.35S9.916 28 16.35 28 28 22.784 28 16.35h2.7c0 7.925-6.425 14.35-14.35 14.35S2 24.275 2 16.35 8.425 2 16.35 2a1.35 1.35 0 1 1 0 2.7"})})}return c(d,{})},T=()=>import("../motionFeatures-B5UV2GY2.js").then((({domAnimation:t})=>t));function $({reducedMotion:t="user",children:n,layoutVariant:e="subtle",layoutSpeed:
|
|
2
|
+
import{createSlot as t,getStyles as n,cx as e,Icon as i}from"../chunk-FK7UKIGU.js";import{getMotionVar as a}from"../chunk-PSTMMXTR.js";import{motion as o}from"../chunk-YRYDHL65.js";import{BUTTON_CSS_VAR_MAP as r}from"../chunk-33B23P5G.js";import{buttonIconSvgSize as s}from"@yahoo/uds/fixtures";import{jsx as c,jsxs as l,Fragment as d}from"react/jsx-runtime";import{m as u,useReducedMotion as h,AnimatePresence as m,LazyMotion as p,MotionConfig as f}from"framer-motion";import{forwardRef as g,useRef as v,useImperativeHandle as b,useMemo as y,isValidElement as w,cloneElement as N,useState as C,useEffect as S}from"react";/*! © 2024 Yahoo, Inc. UDS v0.0.0-development */
|
|
3
|
+
var I={scale:.7,opacity:0},V={scale:[.7,.7,1],opacity:[0,0,1],transition:{times:[0,.5,1]}},x={icon:V,hide:I,loading:I},z={loading:V,hide:I,icon:I},M=`var(${r.columnGap})`,P=`var(${r.iconSize})`,j={rest:{scale:`var(${r.effects.scale.rest})`},hover:{scale:`var(${r.effects.scale.hover})`},pressed:{scale:`var(${r.effects.scale.pressed})`},withoutIcon:{columnGap:"0px"},withIcon:{columnGap:M}},G={hide:{width:"0px",opacity:0,display:"none"},loading:{width:P,display:"flex",opacity:1},icon:{width:P,display:"flex",opacity:1}},k=({size:t,variant:n})=>{if("outline"===n)switch(t){case"sm":return c(d,{children:c("path",{fill:"currentColor",d:"M7.9 2.7a5.2 5.2 0 1 0 5.2 5.2h1.6a6.8 6.8 0 1 1-6.8-6.8.8.8 0 1 1 0 1.6"})});case"md":return c(d,{children:c("path",{fill:"currentColor",d:"M12 4a8 8 0 1 0 8 8h2c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2a1 1 0 1 1 0 2"})});case"lg":return c(d,{children:c("path",{fill:"currentColor",d:"M16.15 4.3C9.605 4.3 4.3 9.605 4.3 16.15S9.605 28 16.15 28 28 22.695 28 16.15h2.3c0 7.815-6.335 14.15-14.15 14.15S2 23.965 2 16.15 8.335 2 16.15 2a1.15 1.15 0 0 1 0 2.3"})})}if("fill"===n)switch(t){case"sm":return c(d,{children:c("path",{fill:"currentColor",d:"M8 2.9A5.1 5.1 0 1 0 13.1 8h1.8A6.9 6.9 0 1 1 8 1.1a.9.9 0 1 1 0 1.8"})});case"md":return c(d,{children:c("path",{fill:"currentColor",d:"M12.15 4.3A7.85 7.85 0 1 0 20 12.15h2.3c0 5.606-4.544 10.15-10.15 10.15S2 17.756 2 12.15 6.544 2 12.15 2a1.15 1.15 0 0 1 0 2.3"})});case"lg":return c(d,{children:c("path",{fill:"currentColor",d:"M16.35 4.7C9.916 4.7 4.7 9.916 4.7 16.35S9.916 28 16.35 28 28 22.784 28 16.35h2.7c0 7.925-6.425 14.35-14.35 14.35S2 24.275 2 16.35 8.425 2 16.35 2a1.35 1.35 0 1 1 0 2.7"})})}return c(d,{})},T=()=>import("../motionFeatures-B5UV2GY2.js").then((({domAnimation:t})=>t));function $({reducedMotion:t="user",children:n,layoutVariant:e="subtle",layoutSpeed:i="3",colorVariant:r="smooth",colorSpeed:s="3"}){const l=o[e][i],d=o[r][s],[u,h]=C(l),[m,g]=C(d),v={variant:r,speed:s},b=a({...v,control:"stiffness"}),w=a({...v,control:"damping"}),N={variant:e,speed:i},I=a({...N,control:"stiffness"}),V=a({...N,control:"damping"});S((()=>{const t=getComputedStyle(document.documentElement),n={damping:Number(t.getPropertyValue(V)),stiffness:Number(t.getPropertyValue(I))},e={damping:Number(t.getPropertyValue(w)),stiffness:Number(t.getPropertyValue(b))};h(n),g(e)}),[w,b,V,I]);const x=y((()=>({type:"spring",mass:1,...u,layout:u,opacity:m,color:m,borderColor:m,backgroundColor:m})),[m,u]);return c(p,{features:T,strict:!0,children:c(f,{transition:x,reducedMotion:t,children:n})})}var A=t(),H=u.create(A),L=g((function({palette:t,variant:a,size:o,startIcon:r,endIcon:p,iconVariant:f,loading:g,disableEffects:C,children:S,asChild:I,className:V,...M},P){const T=v(null);b(P,(()=>T.current));const A=p?"icon":"hide",L=(({startIcon:t,endIcon:n,loading:e})=>t||n||e?"withIcon":"withoutIcon")({startIcon:r,endIcon:p,loading:g}),B=(({loading:t,startIcon:n})=>t?"loading":n?"icon":"hide")({loading:g,startIcon:r}),E={button:n({buttonSize:o,buttonVariant:a,buttonPalette:t,className:e("uds-button","uds-ring","uds-hit-target",g&&"uds-button-loading",C&&"uds-button-without-effects","withIcon"===L&&"uds-button-with-gap",V)}),content:"uds-button-content truncate",iconContainer:"uds-button-icon-container flex overflow-clip",loading:"uds-button-icon start-content animate-spin",start:"uds-button-icon start-content",end:"uds-button-icon end-content"},U=h()?"smooth":"subtle",Y=y((()=>c(u.span,{className:E.iconContainer,initial:!1,variants:G,animate:B,children:l(m,{initial:!1,mode:"popLayout",children:[g&&c(u.span,{variants:z,initial:"hide",animate:"loading",exit:"hide",children:c(i,{size:s,name:k,variant:f,color:"current",className:E.loading})},"loading"),r&&!g&&c(u.span,{variants:x,initial:"hide",animate:"icon",exit:"hide",children:c(i,{size:s,name:r,variant:f,color:"current",className:E.start})},r.name)]})})),[E.iconContainer,E.loading,E.start,B,g,f,r]),F=y((()=>c(u.span,{className:E.iconContainer,initial:!1,variants:G,animate:A,children:c(m,{initial:!1,mode:"popLayout",children:p&&c(u.span,{variants:x,initial:"hide",animate:"icon",exit:"hide",children:c(i,{size:s,name:p,variant:f,color:"current",className:E.start})},p.name)})})),[E.iconContainer,E.start,p,A,f]),K=y((()=>C?{...j,rest:{},hover:{},pressed:{}}:j),[C]);return I&&w(S)?c($,{layoutSpeed:"3",layoutVariant:U,children:c(H,{className:E.button,initial:["hide",L],animate:L,variants:K,whileHover:"hover",whileTap:"pressed",...M,children:N(S,S.props,l(d,{children:[Y,c("span",{className:E.content,children:S.props.children}),F]}))})}):c($,{layoutSpeed:"3",layoutVariant:U,children:l(u.button,{ref:T,className:E.button,initial:["hide",L],animate:L,variants:K,whileHover:"hover",whileTap:"pressed",...M,children:[Y,c("span",{className:E.content,children:S}),F]})})})),B=g((function({palette:t,variant:a,size:o,iconVariant:r,loading:d,disableEffects:p,name:f,className:g,children:w,...N},C){const S=v(null);b(C,(()=>S.current));const I=y((()=>({button:n({buttonVariant:a,buttonPalette:t,iconButtonSize:o,className:e("uds-icon-button","uds-button","uds-ring","uds-hit-target",d&&"uds-button-loading",p&&"uds-button-without-effects",g)}),loading:"uds-button-icon start-content animate-spin",icon:"uds-button-icon start-content"})),[t,a,g,p,o,d]),V=h(),M=y((()=>V?"smooth":"subtle"),[V]),P=y((()=>{const{rest:t,hover:n,pressed:e}=j;return p?{rest:{},hover:{},pressed:{}}:{rest:t,hover:n,pressed:e}}),[p]);return c($,{layoutSpeed:"3",layoutVariant:M,reducedMotion:p?"always":"user",children:c(u.button,{ref:S,className:I.button,initial:"icon",variants:P,whileHover:"hover",whileTap:"pressed",...N,children:l(m,{initial:!1,mode:"popLayout",children:[d&&c(u.span,{variants:z,initial:"loading",animate:"loading",exit:"hide",children:c(i,{size:s,name:k,variant:r,color:"current",className:I.loading})},"loading"),f&&!d&&c(u.span,{variants:x,initial:"icon",animate:"icon",exit:"hide",children:w||c(i,{size:s,name:f,variant:r,color:"current",className:I.icon})},f.name)]})})})}));
|
|
4
4
|
/*! © 2024 Yahoo, Inc. UDS v0.0.0-development */export{L as Button,B as IconButton,$ as SpringMotionConfig};
|