@yahoo/uds 3.11.1 → 3.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cli/bin/uds-darwin-arm64-baseline +0 -0
- package/cli/bin/uds-linux-arm64 +0 -0
- package/cli/bin/uds-linux-x64-baseline +0 -0
- package/dist/{Input-Fjl8GOP_.d.cts → Input-CVeeUxNU.d.cts} +1 -1
- package/dist/{Input-DFCQ2u9B.d.ts → Input-D8BREuel.d.ts} +1 -1
- package/dist/Input-DpPT9FEx.d.cts +42 -0
- package/dist/Input-Dsf_gO9A.d.ts +42 -0
- package/dist/{Pressable-fG9Ir9i4.d.cts → Pressable-BVo-S6Zr.d.cts} +1 -1
- package/dist/{Pressable-DexnJ2tl.d.ts → Pressable-C8YAmTgO.d.ts} +1 -1
- package/dist/Pressable-CyPTAGE2.d.ts +44 -0
- package/dist/Pressable-DJs75dFs.d.cts +44 -0
- package/dist/{VStack-BLo_GVRR.d.cts → VStack-BuZuyzJQ.d.cts} +1 -1
- package/dist/VStack-Cwnc0X7i.d.cts +112 -0
- package/dist/{VStack-CAmlGQov.d.ts → VStack-FrGTqacI.d.ts} +1 -1
- package/dist/VStack-pKyyirAP.d.ts +112 -0
- package/dist/{chunk-R5VO4HNN.js → chunk-2II4ZFQI.js} +2 -2
- package/dist/chunk-2J7CK77Y.cjs +1 -0
- package/dist/chunk-BJCZ62IT.js +1 -0
- package/dist/chunk-C3Q7Z6UA.js +3 -0
- package/dist/chunk-CW2GDS2H.cjs +1 -0
- package/dist/chunk-EGRAYQGZ.js +2 -0
- package/dist/chunk-FIK5E5XF.cjs +1 -0
- package/dist/chunk-FIY4G5A4.cjs +1 -0
- package/dist/chunk-IVLA3HPE.js +1 -0
- package/dist/chunk-PYXGHSQQ.cjs +2 -0
- package/dist/chunk-RYT7E6ME.js +3 -0
- package/dist/chunk-SYYG6CQE.js +2 -0
- package/dist/chunk-UONN6ZKS.cjs +1 -0
- package/dist/chunk-VAUJIRSN.js +2 -0
- package/dist/{chunk-3OMTBWQH.cjs → chunk-VWZ3EXJ3.cjs} +1 -1
- package/dist/chunk-WNGG5RTE.cjs +3 -0
- package/dist/client/Menu.cjs +1 -1
- package/dist/client/Menu.d.cts +3 -3
- package/dist/client/Menu.d.ts +3 -3
- package/dist/client/Menu.js +2 -2
- package/dist/client/index.cjs +1 -1
- package/dist/client/index.d.cts +3 -3
- package/dist/client/index.d.ts +3 -3
- package/dist/client/index.js +1 -1
- package/dist/fixtures.cjs +13 -3
- package/dist/fixtures.d.cts +3 -2
- package/dist/fixtures.d.ts +3 -2
- package/dist/fixtures.js +11 -2
- package/dist/{index-DkZBPwMK.d.ts → index-BXnKaQUl.d.ts} +1 -1
- package/dist/{index-CzTuVTTj.d.cts → index-C3N2muhC.d.cts} +1 -1
- package/dist/index-Dk7Qj5gp.d.cts +243 -0
- package/dist/index-PeX4hWLQ.d.ts +243 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +6 -6
- package/dist/index.d.ts +6 -6
- package/dist/index.js +1 -1
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/tailwind/plugin.cjs +1 -1
- package/dist/tailwind/plugin.d.cts +5 -10
- package/dist/tailwind/plugin.d.ts +5 -10
- package/dist/tailwind/plugin.js +2 -2
- package/dist/tailwind/utils.cjs +1 -1
- package/dist/tailwind/utils.d.cts +5 -2
- package/dist/tailwind/utils.d.ts +5 -2
- package/dist/tailwind/utils.js +1 -1
- package/dist/tokens/automation/configs.cjs +1 -1
- package/dist/tokens/automation/configs.d.cts +2 -2
- package/dist/tokens/automation/configs.d.ts +2 -2
- package/dist/tokens/automation/configs.js +1 -1
- package/dist/tokens/automation/properties.cjs +1 -1
- package/dist/tokens/automation/properties.d.cts +2 -2
- package/dist/tokens/automation/properties.d.ts +2 -2
- package/dist/tokens/automation/properties.js +1 -1
- package/dist/tokens/index.cjs +1 -1
- package/dist/tokens/index.d.cts +3399 -3399
- package/dist/tokens/index.d.ts +3399 -3399
- package/dist/tokens/index.js +1 -1
- package/dist/tokens/parseTokens.d.cts +1 -1
- package/dist/tokens/parseTokens.d.ts +1 -1
- package/dist/{types-CCP4BG97.d.cts → types-BUzQ4GYD.d.cts} +2018 -2019
- package/dist/{types-CCP4BG97.d.ts → types-BUzQ4GYD.d.ts} +2018 -2019
- package/dist/types-BvOFo15W.d.cts +8 -0
- package/dist/types-BvOFo15W.d.ts +8 -0
- package/dist/types-Che4YX3v.d.cts +10449 -0
- package/dist/types-Che4YX3v.d.ts +10449 -0
- package/package.json +2 -1
- package/dist/chunk-37HUQ2LJ.js +0 -2
- package/dist/chunk-SQ6WOQUJ.cjs +0 -2
package/dist/client/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
1
|
"use client";
|
2
|
-
import{FormLabel as e,InputHelpTextMemo as a,Image as t}from"../chunk-MABGUDH4.js";import{o2 as n,SpringMotionConfig as i,Pressable as o,a as r,o as s,e as l,t as c,e2 as d}from"../chunk-R5VO4HNN.js";export{Pressable,SpringMotionConfig}from"../chunk-R5VO4HNN.js";import{getStyles as u,cx as h,HStack as p,IconSlot as m,createSlot as f,Icon as v,Box as b,Text as y,VStack as g}from"../chunk-UZXPZDSS.js";import{parseDeprecatedButtonPaletteVariant as x}from"../chunk-37HUQ2LJ.js";import{BUTTON_CSS_VAR_MAP as N}from"../chunk-WLUJBM5E.js";import{forwardRef as C,useMemo as V,useRef as w,useImperativeHandle as I,isValidElement as k,cloneElement as S,useId as z,useState as R,useCallback as T,useEffect as P,memo as L,createContext as H,useContext as A}from"react";import{jsxs as M,jsx as $,Fragment as j}from"react/jsx-runtime";import{buttonIconSvgSize as B}from"@yahoo/uds/fixtures";import{m as E,useReducedMotion as O,AnimatePresence as W}from"motion/react";import{isFunction as q}from"lodash-es";export{Menu}from"@yahoo/uds/client/Menu";/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */var D={first:e=>e[0]||"",last:e=>e[e.length-1]||"",firstAndLast:e=>1===e.length?e[0]:`${e[0]}${e[e.length-1]}`,firstTwo:e=>e.slice(0,2).join(""),firstThree:e=>e.slice(0,3).join(""),firstOfEach:e=>e.join("")},F=(e,a="firstAndLast")=>{if(!e)return"";const t=e.trim().split(/\s+/).map((e=>e[0].toUpperCase()));return"function"==typeof a?a(e):D[a](t)},G=(e="md")=>u({avatarSizeRoot:e,flexShrink:"0",textAlign:"center",display:"inline-flex",justifyContent:"center",alignItems:"center",overflow:"visible",className:"truncate"}),U=e=>e?{height:e,width:e}:{},X="primary",J="md",Z={primary:d,secondary:c},Q=({size:e=J,variant:a=X,customSize:t,icon:n,className:i})=>{const o=V((()=>U(t)),[t]),r=V((()=>h(G(e),u({avatarIconVariantRoot:a,overflow:"hidden"}),i)),[i,e,a]),s=V((()=>u({width:"full",height:"full",flexShrink:"0",overflow:"hidden",textAlign:"center",display:"inline-flex",justifyContent:"center",alignItems:"center"})),[]),l=V((()=>({...o,boxSizing:"content-box"})),[o]),c=V((()=>n??Z[a??"primary"]),[n,a]),d=V((()=>u({avatarSizeIcon:e})),[e]);return $(b,{className:r,style:o,children:$(b,{className:s,style:l,children:$(v,{name:c,variant:"fill",color:"current",className:d,"data-testid":"avatar-icon"})})})};Q.displayName="AvatarIcon";var K=({size:e=J,variant:a=X,name:t,initials:n,customSize:i,abbreviationStrategy:o,className:r})=>{const s=V((()=>h(G(e),u({avatarTextVariantRoot:a,overflow:"hidden"}),"truncate",r)),[r,e,a]),l=V((()=>u({width:"full",height:"full",flexShrink:"0",overflow:"hidden",textAlign:"center",display:"inline-flex",justifyContent:"center",alignItems:"center",className:"truncate"})),[]),c=V((()=>U(i)),[i]),d=V((()=>({...c,boxSizing:"content-box"})),[c]);return $(b,{className:s,style:c,children:$(y,{color:"inherit",variant:"inherit",className:l,style:d,"data-testid":"avatar-text",children:n||F(t,o)})})};K.displayName="AvatarText";var Y=({size:e=J,variant:a=X,src:n,srcSet:i,customSize:o,alt:r,imageProps:s,abbreviationStrategy:l,fallback:c,className:d})=>{const[p,m]=R("loading");P((()=>{let e=!0;if(n||i){const a=new Image;a.onload=()=>{e&&m("loaded")},a.onerror=()=>{e&&m("error")},n&&(a.src=n),i&&(a.srcset=i)}else m("error");return()=>{e=!1}}),[n,i]);const f=V((()=>h(G(e),u({avatarImageVariantRoot:a,overflow:"hidden"}),d)),[d,e,a]),v=V((()=>u({width:"full",height:"full",flexShrink:"0",textAlign:"center",display:"inline-flex",justifyContent:"center",alignItems:"center",contentFit:"cover"})),[]),y=V((()=>U(o)),[o]),g=V((()=>({...y,boxSizing:"content-box"})),[y]);if("loaded"===p)return $(b,{className:f,style:y,children:$(t,{src:n,srcSet:i,alt:r,className:v,style:g,...s})});const x={size:e,customSize:o,variant:a};return c||r?$(K,{name:r,initials:c,abbreviationStrategy:l,...x}):$(Q,{...x})};Y.displayName="AvatarImage";var _=e=>$(Y,{...e});_.displayName="Avatar";var ee=C((function({variant:e="primary",size:a="md",minWidth:t,maxWidth:n=200,startIcon:i,endIcon:o,backgroundColor:r,color:s,iconColor:l,borderColor:c,children:d,className:f,...v},b){const y=u({badgeSizeRoot:a,badgeVariantRoot:e,className:h(["uds-badge","uds-badge-variant","uds-badge-size",f])}),g=u({badgeVariantIcon:e,badgeSizeIcon:a,className:h(["uds-badge-iconSize","uds-badge-iconColor"])}),x=V((()=>({...t?{minWidth:`${t}px`}:{},..."full"===n?{}:{maxWidth:`${n}px`},...r?{backgroundColor:r}:{},...c?{borderColor:c}:{},...s?{color:s}:{}})),[r,c,s,n,t]),N=V((()=>({variant:"fill",style:{...l?{color:l}:{}}})),[l]);return M(p,{ref:b,gap:"2",display:"inline-flex",alignItems:"center",className:y,style:x,...v,children:[i&&$(m,{icon:i,iconProps:N,"data-testid":"start-icon",className:g}),$("span",{className:"flex-1 truncate whitespace-nowrap text-center",children:d}),o&&$(m,{icon:o,iconProps:N,"data-testid":"end-icon",className:g})]})}));ee.displayName="Badge";var ae={scale:.7,opacity:0},te={scale:[.7,.7,1],opacity:[0,0,1],transition:{times:[0,.5,1]}},ne={icon:te,hide:ae,loading:ae},ie={loading:te,hide:ae,icon:ae},oe=`var(${N.columnGap})`,re=`var(${N.iconSize})`,se={rest:{scale:`var(${N.effects.scale.rest})`},hover:{scale:`var(${N.effects.scale.hover})`},pressed:{scale:`var(${N.effects.scale.pressed})`},withoutIcon:{columnGap:"0px"},withIcon:{columnGap:oe}},le={hide:{width:"0px",opacity:0,display:"none"},loading:{width:re,display:"flex",opacity:1},icon:{width:re,display:"flex",opacity:1}},ce=C((function({variant:e,size:a,startIcon:t,endIcon:o,iconVariant:r,loading:s,disableEffects:l,children:c,asChild:d,type:p="button",className:b,width:y,...g},N){const C=w(null);I(N,(()=>C.current));const z=V((()=>f()),[]),R=V((()=>E.create(z)),[z]),T=o?"icon":"hide",P=(({startIcon:e,endIcon:a,loading:t})=>e||a||t?"withIcon":"withoutIcon")({startIcon:t,endIcon:o,loading:s}),L=(({loading:e,startIcon:a})=>e?"loading":a?"icon":"hide")({loading:s,startIcon:t}),{palette:H,variant:A}=V((()=>x({flatVariant:e})),[e]),q=V((()=>({button:u({width:y,buttonSize:a,buttonVariant:A,buttonPalette:H,className:h("uds-button","uds-ring","uds-hit-target",s&&"uds-button-loading",l&&"uds-button-without-effects","withIcon"===P&&"uds-button-with-gap",b)}),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"})),[y,a,A,H,b,s,l,P]),D=O()?"smooth":"subtle",F=V((()=>$(E.span,{className:q.iconContainer,initial:!1,variants:le,animate:L,children:M(W,{initial:!1,mode:"popLayout",children:[s&&$(E.span,{variants:ie,initial:"hide",animate:"loading",exit:"hide",children:$(v,{size:B,name:n,variant:r,color:"current",className:q.loading})},"loading"),t&&!s&&$(E.span,{variants:ne,initial:"hide",animate:"icon",exit:"hide",children:$(m,{className:q.start,icon:t,iconProps:{size:B,variant:r,color:"current"}})})]})})),[q.iconContainer,q.loading,q.start,L,s,r,t]),G=V((()=>$(E.span,{className:q.iconContainer,initial:!1,variants:le,animate:T,children:$(W,{initial:!1,mode:"popLayout",children:o&&$(E.span,{variants:ne,initial:"hide",animate:"icon",exit:"hide",children:$(m,{className:q.end,icon:o,iconProps:{size:B,variant:r,color:"current"}})})})})),[q.iconContainer,q.end,o,T,r]),U=V((()=>l?{...se,rest:{},hover:{},pressed:{}}:se),[l]);return d&&k(c)?$(i,{layoutSpeed:"3",layoutVariant:D,children:$(R,{type:p,className:q.button,initial:["hide",P],animate:P,variants:U,whileHover:"hover",whileTap:"pressed",...g,children:S(c,c.props,M(j,{children:[F,$("span",{className:q.content,children:c.props.children}),G]}))})}):$(i,{layoutSpeed:"3",layoutVariant:D,children:M(E.button,{ref:C,type:p,className:q.button,initial:["hide",P],animate:P,variants:U,whileHover:"hover",whileTap:"pressed",...g,children:[F,$("span",{className:q.content,children:c}),G]})})})),de={primary:"alert",secondary:"alert-secondary"},ue=e=>"indeterminate"===e,he=e=>ue(e)?s:l,pe=E.create(b),me={layoutVariant:"smooth",layoutSpeed:"3"},fe={layoutVariant:"veryBouncy",layoutSpeed:"4"},ve=C((function({id:a,checked:t,defaultChecked:n,onChange:o,label:r,labelPosition:s="start",variant:l="primary",size:c="md",reduceMotion:d,disabled:p,required:m,hasError:f,className:b,layerClassNames:y,...g},x){const N=z(),C=a??`uds-input-${N}`,I=w(null),k=void 0!==t,[S,L]=R(k?t:n),[H,A]=R(!1),[j,B]=R(!1),W=V((()=>f?de[l]:l),[f,l]),q=!p&&H,D=!p&&j,F=V((()=>D?.9:q?1.1:1),[D,q]),G=V((()=>S?D?"opacity-55":"opacity-100":"opacity-0"),[S,D]),U=V((()=>({scale:F})),[F]),X=V((()=>j?fe:me),[j]),J=T((e=>{o?.(e),k||L(e.target.checked)}),[k,o]),Z=T((()=>{A(!0)}),[]),Q=T((()=>{A(!1)}),[]),K=T((()=>{B(!0)}),[]),Y=T((()=>{B(!1)}),[]),_=e=>{I.current&&(I.current.indeterminate=ue(e))},ee=d?"always":"user",ae=O()||d?"duration-0":"duration-120";P((()=>{k&&L(t)}),[t,k]),P((()=>{_(S)}),[S]);const te=ue(S)?"indeterminate":S?"checked":"unchecked",ne={root:u({checkboxSizeRoot:c,checkboxVariantRoot:W,checkboxVariantValueRoot:te,display:"flex",flexDirection:"start"===s?"row":"row-reverse",alignItems:"center",className:h({"cursor-pointer":!p,"cursor-default":p,"opacity-50":p},b,y?.root)}),checkbox:u({checkboxSizeCheckbox:c,checkboxVariantCheckbox:W,checkboxVariantValueCheckbox:te,className:h("border","rounded-[4px]","uds-ring","uds-ring-within",ae,"transition-[background-color,border-color,box-shadow]",y?.checkbox)}),check:u({checkboxVariantCheckboxIcon:W,checkboxVariantValueCheckboxIcon:te,className:h("pointer-events-none",G,ae,"transition-opacity")}),htmlCheckbox:h("cursor-[inherit]","absolute","opacity-0","top-1/2","left-1/2","w-[calc(100%+2px)]","h-[calc(100%+2px)]","transform","translate-x-[-50%]","translate-y-[-50%]"),label:h("start"===s?"text-start":"text-end",y?.label)},ie=r?E.label:E.div;return $(i,{reducedMotion:ee,...X,children:M(ie,{className:ne.root,"data-testid":"container",onHoverStart:Z,onHoverEnd:Q,onTapStart:K,onTap:Y,onTapCancel:Y,tabIndex:-1,children:[M(pe,{position:"relative",className:ne.checkbox,alignItems:"center",justifyContent:"center",flex:"none",animate:U,children:[$("input",{type:"checkbox",...g,ref:e=>{I.current=e,_(S),"function"==typeof x?x(e):null!==x&&(x.current=e)},id:C,disabled:p,required:m,"aria-invalid":f,checked:k?!ue(S)&&S:void 0,defaultChecked:k?void 0:n,onChange:J,className:ne.htmlCheckbox}),$(v,{name:he(S),size:"sm",className:ne.check})]}),r&&$(e,{as:"div",variant:"inherit",color:"inherit",required:m,label:r,className:ne.label})]})})}));ve.displayName="Checkbox";var be="primary",ye=C((function({size:e="md",minWidth:a,maxWidth:t=200,startIcon:n,endIcon:i,as:o="div",reduceMotion:r,disabled:s=!1,className:l,layerClassNames:c,children:d,...f},v){const b=O()||r?"duration-0":"duration-120",g=V((()=>({root:u({chipSizeRoot:e,className:h({"pointer-events-none":s,"cursor-default":s,"opacity-50":s},"focus-visible:-outline-offset-2","uds-ring",b,"transition-[background-color,outline-color,box-shadow]",c?.root,l)}),icon:u({chipSizeIcon:e,className:c?.icon})})),[l,b,s,c?.icon,c?.root,e]);return $(p,{asChild:!0,ref:v,display:"inline-flex",alignItems:"center",style:{maxWidth:`${t}px`,...a?{minWidth:`${a}px`}:{}},className:g.root,...f,children:M(o,{disabled:s,children:[n&&$(m,{icon:n,iconProps:{variant:"fill",className:g.icon},"data-testid":"start-icon"}),$(y,{as:"span",className:"truncate whitespace-nowrap",flex:"1",textAlign:"center",color:"current",variant:"inherit",children:d}),i&&$(m,{icon:i,iconProps:{variant:"fill",className:g.icon},"data-testid":"end-icon"})]})})}));ye.displayName="ChipBase";var ge=C((function({variant:e=be,...a},t){const n=V((()=>({root:u({chipLinkVariantRoot:e}),icon:u({chipLinkVariantIcon:e})})),[e]);return $(ye,{as:"button",ref:t,variant:e,layerClassNames:n,...a})}));ge.displayName="ChipButton";var xe=C((function({dismissButtonAriaLabel:e,onDismiss:a,dismissIcon:t,variant:n=be,disabled:i,...s},l){const c=V((()=>({root:u({chipDismissibleVariantRoot:n}),icon:u({chipDismissibleVariantIcon:n})})),[n]),d=T((e=>{e.stopPropagation(),a?.()}),[a]),p={icon:h("uds-chip-dismissible-button","uds-hit-target")};return $(ye,{ref:l,variant:n,disabled:i,tabIndex:-1,endIcon:a=>$(o,{"aria-label":e,className:p.icon,onClick:d,disabled:i,children:$(m,{icon:t??r,iconProps:a,"data-testid":"dismiss-icon"})}),layerClassNames:c,...s})}));xe.displayName="ChipDismissible";var Ne=C((function({variant:e=be,href:a,disabled:t,...n},i){const o=V((()=>({root:u({chipLinkVariantRoot:e}),icon:u({chipLinkVariantIcon:e})})),[e]);return $(ye,{as:"a",ref:i,variant:e,disabled:t,layerClassNames:o,...{...n,href:t?void 0:a}})}));Ne.displayName="ChipLink";var Ce=C((function({isToggled:e=!1,onToggle:a,onClick:t,variant:n=be,...i},o){const r=V((()=>({root:u({chipToggleVariantRoot:n,chipToggleVariantActiveRoot:e?"on":"off"}),icon:u({chipToggleVariantIcon:n})})),[e,n]),s=T((n=>{a?.(!e),t?.(n)}),[e,t,a]);return $(ye,{ref:o,as:"button",variant:n,onClick:s,"aria-pressed":e,layerClassNames:r,...i})}));Ce.displayName="ChipToggle";var Ve=C((function({onClick:e,href:a,linkProps:t,onDismiss:n,onToggle:i,isToggled:o,...r},s){return n?$(xe,{ref:s,onDismiss:n,...r}):i?$(Ce,{ref:s,onToggle:i,isToggled:o,...r}):a?$(Ne,{ref:s,href:a,...r,...t}):$(ge,{ref:s,onClick:e,...r})}));Ve.displayName="Chip";var we=C((function({variant:e,size:a,iconVariant:t,loading:o,disableEffects:r,name:s,type:l="button",htmlName:c,className:d,children:p,...m},f){const b=w(null);I(f,(()=>b.current));const{palette:y,variant:g}=x({flatVariant:e}),N=V((()=>({button:u({buttonVariant:g,buttonPalette:y,iconButtonSize:a,className:h("uds-icon-button","uds-button","uds-ring","uds-hit-target",o&&"uds-button-loading",r&&"uds-button-without-effects",d)}),loading:"uds-button-icon start-content animate-spin",icon:"uds-button-icon start-content"})),[y,g,d,r,a,o]),C=O(),k=V((()=>C?"smooth":"subtle"),[C]),S=V((()=>{const{rest:e,hover:a,pressed:t}=se;return r?{rest:{},hover:{},pressed:{}}:{rest:e,hover:a,pressed:t}}),[r]);return $(i,{layoutSpeed:"3",layoutVariant:k,reducedMotion:r?"always":"user",children:$(E.button,{ref:b,type:l,className:N.button,initial:"icon",variants:S,whileHover:"hover",whileTap:"pressed",name:c,...m,children:M(W,{initial:!1,mode:"popLayout",children:[o&&$(E.span,{variants:ie,initial:"loading",animate:"loading",exit:"hide",children:$(v,{size:B,name:n,variant:t,color:"current",className:N.loading})},"loading"),s&&!o&&$(E.span,{variants:ne,initial:"icon",animate:"icon",exit:"hide",children:p||$(v,{size:B,name:s,variant:t,color:"current",className:N.icon})},s.name)]})})})})),Ie=({children:e,reduceMotion:a,layoutVariant:t})=>{const n=w(null),[o,r]=R("auto");return P((()=>{if(n.current){const e=new ResizeObserver((e=>{r(e[0].contentRect.height)}));return e.observe(n.current),()=>{e.disconnect()}}}),[]),$(i,{reducedMotion:a,layoutSpeed:"4",layoutVariant:t,children:$(E.div,{className:"overflow-hidden",style:{height:o,opacity:0},animate:{height:o,opacity:1},children:$("div",{ref:n,children:e})})})},ke=L((function({helpText:e,helperTextIcon:t,spacingStart:n,spacingTop:i,size:o,isFilled:r,...s}){return e?$(b,{spacingTop:i,spacingStart:n,...s,children:$(a,{startIcon:t,size:o,isFilled:r,children:q(e)?e():e})}):null})),Se=L((function({icon:e,className:a}){return e?$(m,{icon:e,iconProps:{variant:"outline"},className:a}):null})),ze=L((function({icon:e,className:a}){if(!e)return null;return $(m,{icon:e,iconProps:{variant:"outline"},"data-testid":"end-icon",className:a})})),Re=C((function({id:e,label:a,type:t="text",size:n="md",startIcon:i,endIcon:o,helpText:r,helperTextIcon:s,hasError:l,width:c="full",defaultValue:d,required:m,readOnly:f,disabled:v,reduceMotion:y,onChange:x,className:N,...C},V){const k=z(),S=e??`uds-input-${k}`,P=`uds-input-${S}-help-text`,L=w(null);I(V,(()=>L.current));const[H,A]=R(d??""),j=T((e=>{A(e.target.value),x?.(e)}),[x]),B=O()?"smooth":"bouncy",E=y?"always":"user",W=!f&&!v,D={root:u({inputSizeRoot:n,inputVariantRoot:"default",inputVariantValueRoot:H?"filled":"empty",className:h([N,v?"opacity-50":""])}),inputWrapper:h(u({inputSizeInputWrapper:n,inputVariantInputWrapper:"default",inputVariantValueInputWrapper:H?"filled":"empty"}),"min-w-[200px]"),input:u({inputSizeInput:n,inputVariantInput:"default",inputVariantValueInput:H?"filled":"empty",inputVariantInputPlaceholder:"default",inputVariantValueInputPlaceholder:H?"filled":"empty",className:h("grow","uds-hit-target","bg-clip-text","focus:outline-none",W?"cursor-text":"cursor-not-allowed")}),label:h(u({inputSizeLabel:n,inputVariantLabel:"default",inputVariantValueLabel:H?"filled":"empty"})),labelRequired:u({inputVariantLabelRequired:"default",inputVariantValueLabelRequired:H?"filled":"empty"}),startIcon:u({inputSizeStartIcon:n,inputVariantStartIcon:"default",inputVariantValueStartIcon:H?"filled":"empty"}),endIcon:u({inputSizeEndIcon:n,inputVariantEndIcon:"default",inputVariantValueEndIcon:H?"filled":"empty"})};return M(g,{width:c,className:D.root,children:[a&&M(b,{spacingBottom:"2",columnGap:"0.5",alignItems:"flex-end",className:D.label,children:[$("label",{htmlFor:S,children:q(a)?a():a}),m&&$("span",{className:D.labelRequired,children:"*"})]}),M(b,{position:"relative",alignItems:"center",className:D.inputWrapper,children:[$(Se,{icon:i,className:D.startIcon}),$("input",{ref:L,id:S,type:t,value:H,required:m,readOnly:f,disabled:v,"aria-describedby":P,"aria-invalid":l,onChange:j,className:D.input,...C}),o&&$(p,{alignItems:"center",gap:"1",children:$(ze,{icon:o,className:D.endIcon})})]}),$(Ie,{reduceMotion:E,layoutVariant:B,children:$(ke,{id:P,helpText:r,spacingTop:"2",size:n,isFilled:!!H,helperTextIcon:s})})]})}));Re.displayName="Input";var Te=class e{name;value;activeCount=0;#e=new Set;constructor(e){this.name=e}onChange(e){return this.#e.add(e),()=>{this.#e.delete(e)}}setValue(e){this.value=e,this.#e.forEach((a=>a(e)))}static findOrCreate(a,t){let n=a.get(t);return n||(n=new e(t),a.set(t,n)),n}},Pe=H(new Map),Le=e=>{const a=z();return e??`uds-radio-group-${a}`},He={primary:"alert",secondary:"alert-secondary"},Ae=E.create(b),Me={layoutVariant:"smooth",layoutSpeed:"3"},$e={layoutVariant:"veryBouncy",layoutSpeed:"4"},je=C((function({id:a,name:t,label:n,labelPosition:o="start",variant:r="primary",size:s="md",reduceMotion:l,value:c="",checked:d,defaultChecked:p,disabled:m,hasError:f,onChange:v,onFocus:y,onBlur:g,className:x,layerClassNames:N,...C},I){const k=z(),S=a??`uds-radio-${k}`,L=w(null),{name:H,isControlled:j,checked:B,setGroupValue:W}=(({name:e,value:a,checked:t,defaultChecked:n})=>{const i=A(Pe),o=i instanceof Te,r=void 0!==t||o,s=Le(e),l=V((()=>o?i:Te.findOrCreate(i,s)),[i,o,s]),[c,d]=R(l.value),u=l.name??s,h=T((e=>{l.setValue(e),r||d(e)}),[r,l]);return P((()=>l.onChange(d)),[l]),P((()=>{!0===t&&h(a)}),[t,a,h]),P((()=>{if(o)return;const e=Te.findOrCreate(i,u);return e.activeCount+=1,i.set(u,e),()=>{const e=i.get(u);e&&(e.activeCount-=1,0===e.activeCount&&i.delete(u))}}),[i,o,u]),{name:u,isControlled:r,checked:r&&!o?t:void 0!==c?a===c:n??!1,setGroupValue:h}})({name:t,value:c,checked:d,defaultChecked:p}),[q,D]=R(!1),[F,G]=R(!1),U=V((()=>f?He[r]:r),[f,r]),X=V((()=>!m&&q),[m,q]),J=V((()=>!m&&!B&&F),[B,m,F]),Z=V((()=>J?.9:X?1.1:1),[X,J]),Q=V((()=>B?J?"opacity-55":"opacity-100":"opacity-0"),[B,J]),K=V((()=>!m&&(J&&!B||X&&B)),[B,m,X,J]),Y=V((()=>({scale:Z})),[Z]),_=V((()=>F?$e:Me),[F]),ee=T((e=>{W(e.target.value),v?.(e)}),[v,W]),ae=T((e=>{y?.(e)}),[y]),te=T((e=>{g?.(e)}),[g]),ne=T((()=>{D(!0)}),[]),ie=T((()=>{D(!1)}),[]),oe=T((()=>{G(!0)}),[]),re=T((()=>{G(!1)}),[]),se=l?"always":"user",le=O()||l?"duration-0":"duration-120",ce={root:u({radioSizeRoot:s,radioVariantValueRoot:B?"checked":"unchecked",radioVariantRoot:U,display:"flex",flexDirection:"start"===o?"row":"row-reverse",alignItems:"center",className:h([{"cursor-pointer":!m,"cursor-default":m,"opacity-50":m},x,N?.root])}),radio:u({radioSizeRadio:s,radioVariantRadio:U,radioVariantValueRadio:B?"checked":"unchecked",className:h(["border","uds-ring","uds-ring-within",le,"transition-[background-color,border-color]","transition-shadow",N?.radio])}),radioCircle:u({radioVariantRadioCircle:U,radioVariantValueRadioCircle:B?"checked":"unchecked",className:h(["pointer-events-none","w-[8px]","h-[8px]",Q,le,"transition-opacity"])}),htmlRadio:h("cursor-[inherit]","absolute","opacity-0","top-1/2","left-1/2","w-[calc(100%+2px)]","h-[calc(100%+2px)]","transform","translate-x-[-50%]","translate-y-[-50%]"),label:h("start"===o?"text-start":"text-end",N?.label)},de=n?E.label:E.div;return $(i,{reducedMotion:se,..._,children:M(de,{className:ce.root,"data-testid":"container",onHoverStart:ne,onHoverEnd:ie,onTapStart:oe,onTap:re,onTapCancel:re,tabIndex:-1,children:[M(Ae,{position:"relative",borderRadius:"full",alignItems:"center",justifyContent:"center",flex:"none",className:ce.radio,animate:Y,insetShadow:K?"lg-invert":"none",children:[$("input",{type:"radio",...C,ref:e=>{L.current=e,"function"==typeof I?I(e):null!==I&&(I.current=e)},onFocus:ae,onBlur:te,id:S,name:H,value:c,disabled:m,"aria-invalid":f,onChange:ee,...j?{checked:B}:{defaultChecked:p},className:ce.htmlRadio}),$(b,{borderRadius:"full",className:ce.radioCircle})]}),n&&$(e,{as:"div",variant:"inherit",color:"inherit",label:n,className:ce.label})]})})}));je.displayName="Radio";var Be=f(),Ee=class extends Te{onChangeCb;isControlled;constructor(e,a){super(e),this.isControlled=a}setValue(e,a=!1){this.isControlled&&!a?this.onChangeCb?.(e):super.setValue(e)}},Oe=C((function({asChild:e,name:a,value:t,defaultValue:n,onChange:i,...o},r){const s=void 0!==t,l=Le(a),c=V((()=>{const e=new Ee(l,s);return e.value=s?t:n,e}),[n,s,l,t]);P((()=>{c.onChangeCb=i}),[i,c]),P((()=>{s&&c.setValue(t,!0)}),[s,c,t]),P((()=>c.onChange((e=>i?.(e)))),[i,c]);const d=e?Be:"div";return $(Pe.Provider,{value:c,children:$(d,{role:"radiogroup",ref:r,...o})})}));Oe.displayName="RadioGroupProvider";var We={md:{isOnX:20},sm:{isOnX:12}},qe=E.create(b),De={layoutVariant:"bouncy",layoutSpeed:"4"},Fe=C((function({id:a,isOn:t,defaultIsOn:n,onChange:o,label:r,labelPosition:s="start",size:l="md",onIcon:c,offIcon:d,reduceMotion:p,disabled:f,required:v,onFocus:y,onBlur:g,className:x,layerClassNames:N,...C},I){const k=z(),S=a??`uds-input-${k}`,L=w(null),H=void 0!==t,[A,j]=R(H?t:n),[B,W]=R(!1),q=V((()=>!f&&B),[f,B]),{isOnX:D}=We[l],F=V((()=>({initial:{scale:1,x:A?D:0},animate:{scale:q?1.05:1,x:A?D:0}})),[q,A,D]),G=T((e=>{o?.(e),H||j(e.target.checked)}),[H,o]),U=T((e=>{y?.(e)}),[y]),X=T((e=>{g?.(e)}),[g]),J=T((()=>{W(!0)}),[]),Z=T((()=>{W(!1)}),[]),Q=p?"always":"user",K=O()||p?"duration-0":"duration-120";P((()=>{H&&j(t)}),[t,H]);const Y={root:u({switchSizeRoot:l,switchVariantRoot:"default",switchVariantActiveRoot:A?"on":"off",display:"flex",flexDirection:"start"===s?"row":"row-reverse",alignItems:"center",className:h("group",{"cursor-pointer":!f,"cursor-default":f,"opacity-50":f},N?.root,x)}),switch:u({switchVariantSwitch:"default",switchSizeSwitch:l,switchVariantActiveSwitch:A?"on":"off",borderRadius:"full",position:"relative",alignItems:"center",className:h("uds-ring","uds-ring-within",K,"transition-[background-color,box-shadow]",N?.switch)}),handle:u({switchSizeHandle:l,className:h("relative","pointer-events-none","rounded-full","overflow-hidden",N?.handle)}),handleCircle:u({switchVariantActiveHandle:A?"on":"off",switchVariantHandle:"default",className:h("absolute","top-0","left-0","right-0","bottom-0","opacity-95 group-hover:opacity-100",K,"transition-[background-color,box-shadow,opacity]")}),handleIcon:u({switchSizeHandleIcon:l,switchVariantHandleIcon:"default",switchVariantActiveHandleIcon:A?"on":"off",className:h("absolute","opacity-0","top-1/2","left-1/2","transform","translate-x-[-50%]","translate-y-[-50%]",K,"transition-opacity")}),htmlCheckbox:h("cursor-[inherit]","absolute","opacity-0","top-1/2","left-1/2","w-[calc(100%+2px)]","h-[calc(100%+2px)]","transform","translate-x-[-50%]","translate-y-[-50%]"),label:h("start"===s?"text-start":"text-end",N?.label)},_=r?E.label:E.div;return $(i,{reducedMotion:Q,...De,children:M(_,{className:Y.root,"data-testid":"container",onHoverStart:J,onHoverEnd:Z,tabIndex:-1,children:[M(qe,{className:Y.switch,children:[$("input",{type:"checkbox",...C,ref:e=>{L.current=e,"function"==typeof I?I(e):null!==I&&(I.current=e)},onFocus:U,onBlur:X,id:S,disabled:f,required:v,checked:H?A:void 0,defaultChecked:H?void 0:n,onChange:G,className:Y.htmlCheckbox,style:{}}),M(qe,{className:Y.handle,...F,children:[$(b,{className:Y.handleCircle}),c&&$(m,{icon:c,iconProps:{variant:"fill",size:"sm"},"data-testid":"on-icon",className:h(Y.handleIcon,A?"opacity-100":"opacity-0")}),d&&$(m,{icon:d,iconProps:{variant:"fill",size:"sm"},"data-testid":"off-icon",className:h(Y.handleIcon,A?"opacity-0":"opacity-100")})]})]}),r&&$(e,{as:"div",variant:"inherit",color:"inherit",required:v,label:r,className:Y.label})]})})}));Fe.displayName="Switch";export{_ as Avatar,Q as AvatarIcon,Y as AvatarImage,K as AvatarText,ee as Badge,ce as Button,ve as Checkbox,Ve as Chip,ge as ChipButton,xe as ChipDismissible,Ne as ChipLink,Ce as ChipToggle,we as IconButton,Re as Input,je as Radio,Oe as RadioGroupProvider,Fe as Switch};
|
2
|
+
import{FormLabel as e,InputHelpTextMemo as a,Image as t}from"../chunk-MABGUDH4.js";import{o2 as n,SpringMotionConfig as i,Pressable as o,a as r,o as s,e as l,t as c,e2 as d}from"../chunk-C3Q7Z6UA.js";export{Pressable,SpringMotionConfig}from"../chunk-C3Q7Z6UA.js";import{getStyles as u,cx as h,HStack as p,IconSlot as m,createSlot as f,Icon as v,Box as b,Text as y,VStack as g}from"../chunk-UZXPZDSS.js";import{parseDeprecatedButtonPaletteVariant as x}from"../chunk-VAUJIRSN.js";import{BUTTON_CSS_VAR_MAP as N}from"../chunk-WLUJBM5E.js";import{forwardRef as C,useMemo as w,useRef as V,useImperativeHandle as I,isValidElement as k,cloneElement as S,useId as z,useState as R,useCallback as T,useEffect as P,memo as A,createContext as L,useContext as M}from"react";import{jsxs as $,jsx as j,Fragment as H}from"react/jsx-runtime";import{buttonIconSvgSize as B}from"@yahoo/uds/fixtures";import{m as E,useReducedMotion as W,AnimatePresence as q}from"motion/react";import{isFunction as O}from"lodash-es";export{Menu}from"@yahoo/uds/client/Menu";/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */var D={first:e=>e[0]||"",last:e=>e[e.length-1]||"",firstAndLast:e=>1===e.length?e[0]:`${e[0]}${e[e.length-1]}`,firstTwo:e=>e.slice(0,2).join(""),firstThree:e=>e.slice(0,3).join(""),firstOfEach:e=>e.join("")},F=(e,a="firstAndLast")=>{if(!e)return"";const t=e.trim().split(/\s+/).map((e=>e[0].toUpperCase()));return"function"==typeof a?a(e):D[a](t)},G=(e="md")=>u({avatarSizeRoot:e,flexShrink:"0",textAlign:"center",display:"inline-flex",justifyContent:"center",alignItems:"center",overflow:"visible",className:"truncate"}),U=e=>e?{height:e,width:e}:{},X="primary",Z="md",J={primary:d,secondary:c},Q=({size:e=Z,variant:a=X,customSize:t,icon:n,className:i})=>{const o=w((()=>U(t)),[t]),r=w((()=>h(G(e),u({avatarIconVariantRoot:a,overflow:"hidden"}),i)),[i,e,a]),s=w((()=>u({width:"full",height:"full",flexShrink:"0",overflow:"hidden",textAlign:"center",display:"inline-flex",justifyContent:"center",alignItems:"center"})),[]),l=w((()=>({...o,boxSizing:"content-box"})),[o]),c=w((()=>n??J[a??"primary"]),[n,a]),d=w((()=>u({avatarSizeIcon:e})),[e]);return j(b,{className:r,style:o,children:j(b,{className:s,style:l,children:j(v,{name:c,variant:"fill",color:"current",className:d,"data-testid":"avatar-icon"})})})};Q.displayName="AvatarIcon";var K=({size:e=Z,variant:a=X,name:t,initials:n,customSize:i,abbreviationStrategy:o,className:r})=>{const s=w((()=>h(G(e),u({avatarTextVariantRoot:a,overflow:"hidden"}),"truncate",r)),[r,e,a]),l=w((()=>u({width:"full",height:"full",flexShrink:"0",overflow:"hidden",textAlign:"center",display:"inline-flex",justifyContent:"center",alignItems:"center",className:"truncate"})),[]),c=w((()=>U(i)),[i]),d=w((()=>({...c,boxSizing:"content-box"})),[c]);return j(b,{className:s,style:c,children:j(y,{color:"inherit",variant:"inherit",className:l,style:d,"data-testid":"avatar-text",children:n||F(t,o)})})};K.displayName="AvatarText";var Y=({size:e=Z,variant:a=X,src:n,srcSet:i,customSize:o,alt:r,imageProps:s,abbreviationStrategy:l,fallback:c,className:d})=>{const[p,m]=R("loading");P((()=>{let e=!0;if(n||i){const a=new Image;a.onload=()=>{e&&m("loaded")},a.onerror=()=>{e&&m("error")},n&&(a.src=n),i&&(a.srcset=i)}else m("error");return()=>{e=!1}}),[n,i]);const f=w((()=>h(G(e),u({avatarImageVariantRoot:a,overflow:"hidden"}),d)),[d,e,a]),v=w((()=>u({width:"full",height:"full",flexShrink:"0",textAlign:"center",display:"inline-flex",justifyContent:"center",alignItems:"center",contentFit:"cover"})),[]),y=w((()=>U(o)),[o]),g=w((()=>({...y,boxSizing:"content-box"})),[y]);if("loaded"===p)return j(b,{className:f,style:y,children:j(t,{src:n,srcSet:i,alt:r,className:v,style:g,...s})});const x={size:e,customSize:o,variant:a};return c||r?j(K,{name:r,initials:c,abbreviationStrategy:l,...x}):j(Q,{...x})};Y.displayName="AvatarImage";var _=e=>j(Y,{...e});_.displayName="Avatar";var ee=C((function({variant:e="primary",size:a="md",minWidth:t,maxWidth:n=200,startIcon:i,endIcon:o,backgroundColor:r,color:s,iconColor:l,borderColor:c,children:d,className:f,...v},b){const y=u({badgeSizeRoot:a,badgeVariantRoot:e,className:h(["uds-badge","uds-badge-variant","uds-badge-size",f])}),g=u({badgeVariantIcon:e,badgeSizeIcon:a,className:h(["uds-badge-iconSize","uds-badge-iconColor"])}),x=w((()=>({...t?{minWidth:`${t}px`}:{},..."full"===n?{}:{maxWidth:`${n}px`},...r?{backgroundColor:r}:{},...c?{borderColor:c}:{},...s?{color:s}:{}})),[r,c,s,n,t]),N=w((()=>({variant:"fill",style:{...l?{color:l}:{}}})),[l]);return $(p,{ref:b,gap:"2",display:"inline-flex",alignItems:"center",className:y,style:x,...v,children:[i&&j(m,{icon:i,iconProps:N,"data-testid":"start-icon",className:g}),j("span",{className:"flex-1 truncate whitespace-nowrap text-center",children:d}),o&&j(m,{icon:o,iconProps:N,"data-testid":"end-icon",className:g})]})}));ee.displayName="Badge";var ae={scale:.7,opacity:0},te={scale:[.7,.7,1],opacity:[0,0,1],transition:{times:[0,.5,1]}},ne={icon:te,hide:ae,loading:ae},ie={loading:te,hide:ae,icon:ae},oe=`var(${N.columnGap})`,re=`var(${N.iconSize})`,se={rest:{scale:`var(${N.effects.scale.rest})`},hover:{scale:`var(${N.effects.scale.hover})`},pressed:{scale:`var(${N.effects.scale.pressed})`},withoutIcon:{columnGap:"0px"},withIcon:{columnGap:oe}},le={hide:{width:"0px",opacity:0,display:"none"},loading:{width:re,display:"flex",opacity:1},icon:{width:re,display:"flex",opacity:1}},ce=C((function({variant:e,size:a,startIcon:t,endIcon:o,iconVariant:r,loading:s,disableEffects:l,children:c,asChild:d,type:p="button",className:b,width:y,...g},N){const C=V(null);I(N,(()=>C.current));const z=w((()=>f()),[]),R=w((()=>E.create(z)),[z]),T=o?"icon":"hide",P=(({startIcon:e,endIcon:a,loading:t})=>e||a||t?"withIcon":"withoutIcon")({startIcon:t,endIcon:o,loading:s}),A=(({loading:e,startIcon:a})=>e?"loading":a?"icon":"hide")({loading:s,startIcon:t}),{palette:L,variant:M}=w((()=>x({flatVariant:e})),[e]),O=w((()=>({button:u({width:y,buttonSize:a,buttonVariant:M,buttonPalette:L,className:h("uds-button","uds-ring","uds-hit-target",s&&"uds-button-loading",l&&"uds-button-without-effects","withIcon"===P&&"uds-button-with-gap",b)}),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"})),[y,a,M,L,b,s,l,P]),D=W()?"smooth":"subtle",F=w((()=>j(E.span,{className:O.iconContainer,initial:!1,variants:le,animate:A,children:$(q,{initial:!1,mode:"popLayout",children:[s&&j(E.span,{variants:ie,initial:"hide",animate:"loading",exit:"hide",children:j(v,{size:B,name:n,variant:r,color:"current",className:O.loading})},"loading"),t&&!s&&j(E.span,{variants:ne,initial:"hide",animate:"icon",exit:"hide",children:j(m,{className:O.start,icon:t,iconProps:{size:B,variant:r,color:"current"}})})]})})),[O.iconContainer,O.loading,O.start,A,s,r,t]),G=w((()=>j(E.span,{className:O.iconContainer,initial:!1,variants:le,animate:T,children:j(q,{initial:!1,mode:"popLayout",children:o&&j(E.span,{variants:ne,initial:"hide",animate:"icon",exit:"hide",children:j(m,{className:O.end,icon:o,iconProps:{size:B,variant:r,color:"current"}})})})})),[O.iconContainer,O.end,o,T,r]),U=w((()=>l?{...se,rest:{},hover:{},pressed:{}}:se),[l]);return d&&k(c)?j(i,{layoutSpeed:"3",layoutVariant:D,children:j(R,{type:p,className:O.button,initial:["hide",P],animate:P,variants:U,whileHover:"hover",whileTap:"pressed",...g,children:S(c,c.props,$(H,{children:[F,j("span",{className:O.content,children:c.props.children}),G]}))})}):j(i,{layoutSpeed:"3",layoutVariant:D,children:$(E.button,{ref:C,type:p,className:O.button,initial:["hide",P],animate:P,variants:U,whileHover:"hover",whileTap:"pressed",...g,children:[F,j("span",{className:O.content,children:c}),G]})})})),de={primary:"alert",secondary:"alert-secondary"},ue=e=>"indeterminate"===e,he=e=>ue(e)?s:l,pe=E.create(b),me={layoutVariant:"smooth",layoutSpeed:"3"},fe={layoutVariant:"veryBouncy",layoutSpeed:"4"},ve=C((function({id:a,checked:t,defaultChecked:n,onChange:o,label:r,labelPosition:s="start",variant:l="primary",size:c="md",reduceMotion:d,disabled:p,required:m,hasError:f,className:b,layerClassNames:y,...g},x){const N=z(),C=a??`uds-input-${N}`,I=V(null),k=void 0!==t,[S,A]=R(k?t:n),[L,M]=R(!1),[H,B]=R(!1),q=w((()=>f?de[l]:l),[f,l]),O=!p&&L,D=!p&&H,F=w((()=>D?.9:O?1.1:1),[D,O]),G=w((()=>S?D?"opacity-55":"opacity-100":"opacity-0"),[S,D]),U=w((()=>({scale:F})),[F]),X=w((()=>H?fe:me),[H]),Z=T((e=>{o?.(e),k||A(e.target.checked)}),[k,o]),J=T((()=>{M(!0)}),[]),Q=T((()=>{M(!1)}),[]),K=T((()=>{B(!0)}),[]),Y=T((()=>{B(!1)}),[]),_=e=>{I.current&&(I.current.indeterminate=ue(e))},ee=d?"always":"user",ae=W()||d?"duration-0":"duration-120";P((()=>{k&&A(t)}),[t,k]),P((()=>{_(S)}),[S]);const te=ue(S)?"indeterminate":S?"checked":"unchecked",ne={root:u({checkboxSizeRoot:c,checkboxVariantRoot:q,checkboxVariantValueRoot:te,display:"flex",flexDirection:"start"===s?"row":"row-reverse",alignItems:"center",className:h({"cursor-pointer":!p,"cursor-default":p,"opacity-50":p},b,y?.root)}),checkbox:u({checkboxSizeCheckbox:c,checkboxVariantCheckbox:q,checkboxVariantValueCheckbox:te,className:h("border","rounded-[4px]","uds-ring","uds-ring-within",ae,"transition-[background-color,border-color,box-shadow]",y?.checkbox)}),check:u({checkboxVariantCheckboxIcon:q,checkboxVariantValueCheckboxIcon:te,className:h("pointer-events-none",G,ae,"transition-opacity")}),htmlCheckbox:h("cursor-[inherit]","absolute","opacity-0","top-1/2","left-1/2","w-[calc(100%+2px)]","h-[calc(100%+2px)]","transform","translate-x-[-50%]","translate-y-[-50%]"),label:h("start"===s?"text-start":"text-end",y?.label)},ie=r?E.label:E.div;return j(i,{reducedMotion:ee,...X,children:$(ie,{className:ne.root,"data-testid":"container",onHoverStart:J,onHoverEnd:Q,onTapStart:K,onTap:Y,onTapCancel:Y,tabIndex:-1,children:[$(pe,{position:"relative",className:ne.checkbox,alignItems:"center",justifyContent:"center",flex:"none",animate:U,children:[j("input",{type:"checkbox",...g,ref:e=>{I.current=e,_(S),"function"==typeof x?x(e):null!==x&&(x.current=e)},id:C,disabled:p,required:m,"aria-invalid":f,checked:k?!ue(S)&&S:void 0,defaultChecked:k?void 0:n,onChange:Z,className:ne.htmlCheckbox}),j(v,{name:he(S),size:"sm",className:ne.check})]}),r&&j(e,{as:"div",variant:"inherit",color:"inherit",required:m,label:r,className:ne.label})]})})}));ve.displayName="Checkbox";var be="primary",ye=C((function({size:e="md",minWidth:a,maxWidth:t=200,startIcon:n,endIcon:i,as:o="div",reduceMotion:r,disabled:s=!1,className:l,layerClassNames:c,children:d,...f},v){const b=W()||r?"duration-0":"duration-120",g=w((()=>({root:u({chipSizeRoot:e,className:h({"pointer-events-none":s,"cursor-default":s,"opacity-50":s},"focus-visible:-outline-offset-2","uds-ring",b,"transition-[background-color,outline-color,box-shadow]",c?.root,l)}),icon:u({chipSizeIcon:e,className:c?.icon})})),[l,b,s,c?.icon,c?.root,e]);return j(p,{asChild:!0,ref:v,display:"inline-flex",alignItems:"center",style:{maxWidth:`${t}px`,...a?{minWidth:`${a}px`}:{}},className:g.root,...f,children:$(o,{disabled:s,children:[n&&j(m,{icon:n,iconProps:{variant:"fill",className:g.icon},"data-testid":"start-icon"}),j(y,{as:"span",className:"truncate whitespace-nowrap",flex:"1",textAlign:"center",color:"current",variant:"inherit",children:d}),i&&j(m,{icon:i,iconProps:{variant:"fill",className:g.icon},"data-testid":"end-icon"})]})})}));ye.displayName="ChipBase";var ge=C((function({variant:e=be,...a},t){const n=w((()=>({root:u({chipLinkVariantRoot:e}),icon:u({chipLinkVariantIcon:e})})),[e]);return j(ye,{as:"button",ref:t,variant:e,layerClassNames:n,...a})}));ge.displayName="ChipButton";var xe=C((function({dismissButtonAriaLabel:e,onDismiss:a,dismissIcon:t,variant:n=be,disabled:i,...s},l){const c=w((()=>({root:u({chipDismissibleVariantRoot:n}),icon:u({chipDismissibleVariantIcon:n})})),[n]),d=T((e=>{e.stopPropagation(),a?.()}),[a]),p={icon:h("uds-chip-dismissible-button","uds-hit-target")};return j(ye,{ref:l,variant:n,disabled:i,tabIndex:-1,endIcon:a=>j(o,{"aria-label":e,className:p.icon,onClick:d,disabled:i,children:j(m,{icon:t??r,iconProps:a,"data-testid":"dismiss-icon"})}),layerClassNames:c,...s})}));xe.displayName="ChipDismissible";var Ne=C((function({variant:e=be,href:a,disabled:t,...n},i){const o=w((()=>({root:u({chipLinkVariantRoot:e}),icon:u({chipLinkVariantIcon:e})})),[e]);return j(ye,{as:"a",ref:i,variant:e,disabled:t,layerClassNames:o,...{...n,href:t?void 0:a}})}));Ne.displayName="ChipLink";var Ce=C((function({isToggled:e=!1,onToggle:a,onClick:t,variant:n=be,...i},o){const r=w((()=>({root:u({chipToggleVariantRoot:n,chipToggleVariantActiveRoot:e?"on":"off"}),icon:u({chipToggleVariantIcon:n})})),[e,n]),s=T((n=>{a?.(!e),t?.(n)}),[e,t,a]);return j(ye,{ref:o,as:"button",variant:n,onClick:s,"aria-pressed":e,layerClassNames:r,...i})}));Ce.displayName="ChipToggle";var we=C((function({onClick:e,href:a,linkProps:t,onDismiss:n,onToggle:i,isToggled:o,...r},s){return n?j(xe,{ref:s,onDismiss:n,...r}):i?j(Ce,{ref:s,onToggle:i,isToggled:o,...r}):a?j(Ne,{ref:s,href:a,...r,...t}):j(ge,{ref:s,onClick:e,...r})}));we.displayName="Chip";var Ve=C((function({variant:e,size:a,iconVariant:t,loading:o,disableEffects:r,name:s,type:l="button",htmlName:c,className:d,children:p,...m},f){const b=V(null);I(f,(()=>b.current));const{palette:y,variant:g}=x({flatVariant:e}),N=w((()=>({button:u({buttonVariant:g,buttonPalette:y,iconButtonSize:a,className:h("uds-icon-button","uds-button","uds-ring","uds-hit-target",o&&"uds-button-loading",r&&"uds-button-without-effects",d)}),loading:"uds-button-icon start-content animate-spin",icon:"uds-button-icon start-content"})),[y,g,d,r,a,o]),C=W(),k=w((()=>C?"smooth":"subtle"),[C]),S=w((()=>{const{rest:e,hover:a,pressed:t}=se;return r?{rest:{},hover:{},pressed:{}}:{rest:e,hover:a,pressed:t}}),[r]);return j(i,{layoutSpeed:"3",layoutVariant:k,reducedMotion:r?"always":"user",children:j(E.button,{ref:b,type:l,className:N.button,initial:"icon",variants:S,whileHover:"hover",whileTap:"pressed",name:c,...m,children:$(q,{initial:!1,mode:"popLayout",children:[o&&j(E.span,{variants:ie,initial:"loading",animate:"loading",exit:"hide",children:j(v,{size:B,name:n,variant:t,color:"current",className:N.loading})},"loading"),s&&!o&&j(E.span,{variants:ne,initial:"icon",animate:"icon",exit:"hide",children:p||j(v,{size:B,name:s,variant:t,color:"current",className:N.icon})},s.name)]})})})})),Ie=({children:e,reduceMotion:a,layoutVariant:t})=>{const n=V(null),[o,r]=R("auto");return P((()=>{if(n.current){const e=new ResizeObserver((e=>{r(e[0].contentRect.height)}));return e.observe(n.current),()=>{e.disconnect()}}}),[]),j(i,{reducedMotion:a,layoutSpeed:"4",layoutVariant:t,children:j(E.div,{className:"overflow-hidden",style:{height:o,opacity:0},animate:{height:o,opacity:1},children:j("div",{ref:n,children:e})})})},ke=A((function({helpText:e,helperTextIcon:t,spacingStart:n,spacingTop:i,size:o,isFilled:r,...s}){return e?j(b,{spacingTop:i,spacingStart:n,...s,children:j(a,{startIcon:t,size:o,isFilled:r,children:O(e)?e():e})}):null})),Se=A((function({icon:e,className:a}){return e?j(m,{icon:e,iconProps:{variant:"outline"},className:a}):null})),ze=A((function({icon:e,className:a}){if(!e)return null;return j(m,{icon:e,iconProps:{variant:"outline"},"data-testid":"end-icon",className:a})})),Re=C((function({id:e,label:a,type:t="text",size:n="md",startIcon:i,endIcon:o,helpText:r,helperTextIcon:s,hasError:l,width:c="full",defaultValue:d,required:m,readOnly:f,disabled:v,reduceMotion:y,onChange:x,className:N,...C},w){const k=z(),S=e??`uds-input-${k}`,P=`uds-input-${S}-help-text`,A=V(null);I(w,(()=>A.current));const[L,M]=R(d??""),H=T((e=>{M(e.target.value),x?.(e)}),[x]),B=W()?"smooth":"bouncy",E=y?"always":"user",q=!f&&!v,D={root:u({inputSizeRoot:n,inputVariantRoot:"default",inputVariantValueRoot:L?"filled":"empty",className:h([N,v?"opacity-50":""])}),inputWrapper:h(u({inputSizeInputWrapper:n,inputVariantInputWrapper:"default",inputVariantValueInputWrapper:L?"filled":"empty"}),"min-w-[200px]"),input:u({inputSizeInput:n,inputVariantInput:"default",inputVariantValueInput:L?"filled":"empty",inputVariantInputPlaceholder:"default",inputVariantValueInputPlaceholder:L?"filled":"empty",className:h("grow","uds-hit-target","bg-clip-text","focus:outline-none",q?"cursor-text":"cursor-not-allowed")}),label:h(u({inputSizeLabel:n,inputVariantLabel:"default",inputVariantValueLabel:L?"filled":"empty"})),labelRequired:u({inputVariantLabelRequired:"default",inputVariantValueLabelRequired:L?"filled":"empty"}),startIcon:u({inputSizeStartIcon:n,inputVariantStartIcon:"default",inputVariantValueStartIcon:L?"filled":"empty"}),endIcon:u({inputSizeEndIcon:n,inputVariantEndIcon:"default",inputVariantValueEndIcon:L?"filled":"empty"})};return $(g,{width:c,className:D.root,children:[a&&$(b,{spacingBottom:"2",columnGap:"0.5",alignItems:"flex-end",className:D.label,children:[j("label",{htmlFor:S,children:O(a)?a():a}),m&&j("span",{className:D.labelRequired,children:"*"})]}),$(b,{position:"relative",alignItems:"center",className:D.inputWrapper,children:[j(Se,{icon:i,className:D.startIcon}),j("input",{ref:A,id:S,type:t,value:L,required:m,readOnly:f,disabled:v,"aria-describedby":P,"aria-invalid":l,onChange:H,className:D.input,...C}),o&&j(p,{alignItems:"center",gap:"1",children:j(ze,{icon:o,className:D.endIcon})})]}),j(Ie,{reduceMotion:E,layoutVariant:B,children:j(ke,{id:P,helpText:r,spacingTop:"2",size:n,isFilled:!!L,helperTextIcon:s})})]})}));Re.displayName="Input";var Te=class e{name;value;activeCount=0;#e=new Set;constructor(e){this.name=e}onChange(e){return this.#e.add(e),()=>{this.#e.delete(e)}}setValue(e){this.value=e,this.#e.forEach((a=>a(e)))}static findOrCreate(a,t){let n=a.get(t);return n||(n=new e(t),a.set(t,n)),n}},Pe=L(new Map),Ae=e=>{const a=z();return e??`uds-radio-group-${a}`},Le={primary:"alert",secondary:"alert-secondary"},Me=E.create(b),$e={layoutVariant:"smooth",layoutSpeed:"3"},je={layoutVariant:"veryBouncy",layoutSpeed:"4"},He=C((function({id:a,name:t,label:n,labelPosition:o="start",variant:r="primary",size:s="md",reduceMotion:l,value:c="",checked:d,defaultChecked:p,disabled:m,hasError:f,onChange:v,onFocus:y,onBlur:g,className:x,layerClassNames:N,...C},I){const k=z(),S=a??`uds-radio-${k}`,A=V(null),{name:L,isControlled:H,checked:B,setGroupValue:q}=(({name:e,value:a,checked:t,defaultChecked:n})=>{const i=M(Pe),o=i instanceof Te,r=void 0!==t||o,s=Ae(e),l=w((()=>o?i:Te.findOrCreate(i,s)),[i,o,s]),[c,d]=R(l.value),u=l.name??s,h=T((e=>{l.setValue(e),r||d(e)}),[r,l]);return P((()=>l.onChange(d)),[l]),P((()=>{!0===t&&h(a)}),[t,a,h]),P((()=>{if(o)return;const e=Te.findOrCreate(i,u);return e.activeCount+=1,i.set(u,e),()=>{const e=i.get(u);e&&(e.activeCount-=1,0===e.activeCount&&i.delete(u))}}),[i,o,u]),{name:u,isControlled:r,checked:r&&!o?t:void 0!==c?a===c:n??!1,setGroupValue:h}})({name:t,value:c,checked:d,defaultChecked:p}),[O,D]=R(!1),[F,G]=R(!1),U=w((()=>f?Le[r]:r),[f,r]),X=w((()=>!m&&O),[m,O]),Z=w((()=>!m&&!B&&F),[B,m,F]),J=w((()=>Z?.9:X?1.1:1),[X,Z]),Q=w((()=>B?Z?"opacity-55":"opacity-100":"opacity-0"),[B,Z]),K=w((()=>!m&&(Z&&!B||X&&B)),[B,m,X,Z]),Y=w((()=>({scale:J})),[J]),_=w((()=>F?je:$e),[F]),ee=T((e=>{q(e.target.value),v?.(e)}),[v,q]),ae=T((e=>{y?.(e)}),[y]),te=T((e=>{g?.(e)}),[g]),ne=T((()=>{D(!0)}),[]),ie=T((()=>{D(!1)}),[]),oe=T((()=>{G(!0)}),[]),re=T((()=>{G(!1)}),[]),se=l?"always":"user",le=W()||l?"duration-0":"duration-120",ce={root:u({radioSizeRoot:s,radioVariantValueRoot:B?"checked":"unchecked",radioVariantRoot:U,display:"flex",flexDirection:"start"===o?"row":"row-reverse",alignItems:"center",className:h([{"cursor-pointer":!m,"cursor-default":m,"opacity-50":m},x,N?.root])}),radio:u({radioSizeRadio:s,radioVariantRadio:U,radioVariantValueRadio:B?"checked":"unchecked",className:h(["border","uds-ring","uds-ring-within",le,"transition-[background-color,border-color]","transition-shadow",N?.radio])}),radioCircle:u({radioVariantRadioCircle:U,radioVariantValueRadioCircle:B?"checked":"unchecked",className:h(["pointer-events-none","w-[8px]","h-[8px]",Q,le,"transition-opacity"])}),htmlRadio:h("cursor-[inherit]","absolute","opacity-0","top-1/2","left-1/2","w-[calc(100%+2px)]","h-[calc(100%+2px)]","transform","translate-x-[-50%]","translate-y-[-50%]"),label:h("start"===o?"text-start":"text-end",N?.label)},de=n?E.label:E.div;return j(i,{reducedMotion:se,..._,children:$(de,{className:ce.root,"data-testid":"container",onHoverStart:ne,onHoverEnd:ie,onTapStart:oe,onTap:re,onTapCancel:re,tabIndex:-1,children:[$(Me,{position:"relative",borderRadius:"full",alignItems:"center",justifyContent:"center",flex:"none",className:ce.radio,animate:Y,insetShadow:K?"lg-invert":"none",children:[j("input",{type:"radio",...C,ref:e=>{A.current=e,"function"==typeof I?I(e):null!==I&&(I.current=e)},onFocus:ae,onBlur:te,id:S,name:L,value:c,disabled:m,"aria-invalid":f,onChange:ee,...H?{checked:B}:{defaultChecked:p},className:ce.htmlRadio}),j(b,{borderRadius:"full",className:ce.radioCircle})]}),n&&j(e,{as:"div",variant:"inherit",color:"inherit",label:n,className:ce.label})]})})}));He.displayName="Radio";var Be=f(),Ee=class extends Te{onChangeCb;isControlled;constructor(e,a){super(e),this.isControlled=a}setValue(e,a=!1){this.isControlled&&!a?this.onChangeCb?.(e):super.setValue(e)}},We=C((function({asChild:e,name:a,value:t,defaultValue:n,onChange:i,...o},r){const s=void 0!==t,l=Ae(a),c=w((()=>{const e=new Ee(l,s);return e.value=s?t:n,e}),[n,s,l,t]);P((()=>{c.onChangeCb=i}),[i,c]),P((()=>{s&&c.setValue(t,!0)}),[s,c,t]),P((()=>c.onChange((e=>i?.(e)))),[i,c]);const d=e?Be:"div";return j(Pe.Provider,{value:c,children:j(d,{role:"radiogroup",ref:r,...o})})}));We.displayName="RadioGroupProvider";var qe={md:{isOnX:20},sm:{isOnX:12}},Oe=E.create(b),De={layoutVariant:"bouncy",layoutSpeed:"4"},Fe=C((function({id:a,isOn:t,defaultIsOn:n,onChange:o,label:r,labelPosition:s="start",size:l="md",onIcon:c,offIcon:d,reduceMotion:p,disabled:f,required:v,onFocus:y,onBlur:g,className:x,layerClassNames:N,...C},I){const k=z(),S=a??`uds-input-${k}`,A=V(null),L=void 0!==t,[M,H]=R(L?t:n),[B,q]=R(!1),O=w((()=>!f&&B),[f,B]),{isOnX:D}=qe[l],F=w((()=>({initial:{scale:1,x:M?D:0},animate:{scale:O?1.05:1,x:M?D:0}})),[O,M,D]),G=T((e=>{o?.(e),L||H(e.target.checked)}),[L,o]),U=T((e=>{y?.(e)}),[y]),X=T((e=>{g?.(e)}),[g]),Z=T((()=>{q(!0)}),[]),J=T((()=>{q(!1)}),[]),Q=p?"always":"user",K=W()||p?"duration-0":"duration-120";P((()=>{L&&H(t)}),[t,L]);const Y={root:u({switchSizeRoot:l,switchVariantRoot:"default",switchVariantActiveRoot:M?"on":"off",display:"flex",flexDirection:"start"===s?"row":"row-reverse",alignItems:"center",className:h("group",{"cursor-pointer":!f,"cursor-default":f,"opacity-50":f},N?.root,x)}),switch:u({switchVariantSwitch:"default",switchSizeSwitch:l,switchVariantActiveSwitch:M?"on":"off",borderRadius:"full",position:"relative",alignItems:"center",className:h("uds-ring","uds-ring-within",K,"transition-[background-color,box-shadow]",N?.switch)}),handle:u({switchSizeHandle:l,className:h("relative","pointer-events-none","rounded-full","overflow-hidden",N?.handle)}),handleCircle:u({switchVariantActiveHandle:M?"on":"off",switchVariantHandle:"default",className:h("absolute","top-0","left-0","right-0","bottom-0","opacity-95 group-hover:opacity-100",K,"transition-[background-color,box-shadow,opacity]")}),handleIcon:u({switchSizeHandleIcon:l,switchVariantHandleIcon:"default",switchVariantActiveHandleIcon:M?"on":"off",className:h("absolute","opacity-0","top-1/2","left-1/2","transform","translate-x-[-50%]","translate-y-[-50%]",K,"transition-opacity")}),htmlCheckbox:h("cursor-[inherit]","absolute","opacity-0","top-1/2","left-1/2","w-[calc(100%+2px)]","h-[calc(100%+2px)]","transform","translate-x-[-50%]","translate-y-[-50%]"),label:h("start"===s?"text-start":"text-end",N?.label)},_=r?E.label:E.div;return j(i,{reducedMotion:Q,...De,children:$(_,{className:Y.root,"data-testid":"container",onHoverStart:Z,onHoverEnd:J,tabIndex:-1,children:[$(Oe,{className:Y.switch,children:[j("input",{type:"checkbox",...C,ref:e=>{A.current=e,"function"==typeof I?I(e):null!==I&&(I.current=e)},onFocus:U,onBlur:X,id:S,disabled:f,required:v,checked:L?M:void 0,defaultChecked:L?void 0:n,onChange:G,className:Y.htmlCheckbox,style:{}}),$(Oe,{className:Y.handle,...F,children:[j(b,{className:Y.handleCircle}),c&&j(m,{icon:c,iconProps:{variant:"fill",size:"sm"},"data-testid":"on-icon",className:h(Y.handleIcon,M?"opacity-100":"opacity-0")}),d&&j(m,{icon:d,iconProps:{variant:"fill",size:"sm"},"data-testid":"off-icon",className:h(Y.handleIcon,M?"opacity-0":"opacity-100")})]})]}),r&&j(e,{as:"div",variant:"inherit",color:"inherit",required:v,label:r,className:Y.label})]})})}));Fe.displayName="Switch";export{_ as Avatar,Q as AvatarIcon,Y as AvatarImage,K as AvatarText,ee as Badge,ce as Button,ve as Checkbox,we as Chip,ge as ChipButton,xe as ChipDismissible,Ne as ChipLink,Ce as ChipToggle,Ve as IconButton,Re as Input,He as Radio,We as RadioGroupProvider,Fe as Switch};
|
package/dist/fixtures.cjs
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.
|
4
|
-
exports.alwaysPaletteAliases = exports.avatarShapes = exports.avatarSizes = exports.backgroundColors = exports.backgroundPaletteColors = exports.badgeSizes = exports.badgeVariants = exports.borderRadii = exports.borderRadiusRamp = exports.borderWidthRamp = exports.borderWidths = exports.breakpoints = exports.buttonClassNames = exports.buttonColorProperties = exports.buttonIconSvgSize = exports.buttonKinds = exports.buttonMotionEffects = exports.buttonMotionProperties = exports.buttonPalettes = exports.buttonSizeProperties = exports.buttonSizes = exports.buttonStates = exports.buttonVariants = exports.buttonVariantsFlat = exports.buttonVariantsPrimary = exports.buttonVariantsSecondary = exports.buttonVariantsTertiary = exports.checkboxSizes = void 0;
|
3
|
+
exports.chipSizes = exports.chipVariants = exports.colorModes = exports.fontAliases = exports.fontIds = exports.fontSizeRamp = exports.fontUrls = exports.fontWeights = exports.foregroundColors = exports.foregroundPaletteColors = exports.hueSteps = exports.hues = exports.iconButtonClassNames = exports.iconButtonSizes = exports.iconSizes = exports.iconVariants = exports.inputSizes = exports.lineColors = exports.lineHeightRamp = exports.linePaletteColors = exports.motionSpringConfig = exports.motionSpringConfigOptions = exports.motionVariantSpeeds = exports.motionVariants = exports.palette = exports.regionModes = exports.scaleEffectMap = exports.scaleModes = exports.shadowColors = exports.shadowOffsetMap = exports.shadowOffsets = exports.shadowOpacities = exports.shadowOpacityMap = exports.shadowPaletteColors = exports.shadowSpreadRadii = exports.shadowSpreadRadiusMap = exports.shadowVariants = exports.shadowVariantsInvert = exports.shadowVariantsWithInvert = exports.spacingAliases = exports.spacingMap = exports.spectrumColors = exports.switchSizes = exports.tailwindColorsAsUds = exports.textDecorationLines = exports.textProperties = exports.textTransforms = exports.textVariants = exports.tshirtSizes = exports.typographyStyleProperties = void 0;
|
4
|
+
exports.alwaysPaletteAliases = exports.avatarShapes = exports.avatarSizes = exports.backgroundColors = exports.backgroundPaletteColors = exports.badgeSizes = exports.badgeVariants = exports.borderRadii = exports.borderRadiusRamp = exports.borderWidthRamp = exports.borderWidths = exports.breakpoints = exports.buttonClassNames = exports.buttonColorProperties = exports.buttonIconSvgSize = exports.buttonKinds = exports.buttonMotionEffects = exports.buttonMotionProperties = exports.buttonPalettes = exports.buttonSizeProperties = exports.buttonSizes = exports.buttonStates = exports.buttonVariants = exports.buttonVariantsFlat = exports.buttonVariantsPrimary = exports.buttonVariantsSecondary = exports.buttonVariantsTertiary = exports.checkboxSizes = exports.checkboxVariants = void 0;
|
5
5
|
exports.sortPalette = sortPalette;
|
6
6
|
// ../../node_modules/lodash-es/_freeGlobal.js
|
7
7
|
var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
|
@@ -1737,6 +1737,16 @@ var textDecorationLines = [
|
|
1737
1737
|
"underline"
|
1738
1738
|
];
|
1739
1739
|
exports.textDecorationLines = textDecorationLines;
|
1740
|
+
var typographyStyleProperties = [
|
1741
|
+
"fontFamily",
|
1742
|
+
"fontSize",
|
1743
|
+
"fontWeight",
|
1744
|
+
"lineHeight",
|
1745
|
+
"textTransform",
|
1746
|
+
"fontSlant",
|
1747
|
+
"fontWidth"
|
1748
|
+
];
|
1749
|
+
exports.typographyStyleProperties = typographyStyleProperties;
|
1740
1750
|
var fontAliases = [
|
1741
1751
|
"sans",
|
1742
1752
|
"sans-alt",
|
@@ -2870,7 +2880,7 @@ var buttonMotionProperties = [
|
|
2870
2880
|
"trimLeft",
|
2871
2881
|
"trimRight",
|
2872
2882
|
"matchAll",
|
2873
|
-
"__@iterator@
|
2883
|
+
"__@iterator@69",
|
2874
2884
|
"at"
|
2875
2885
|
];
|
2876
2886
|
exports.buttonMotionProperties = buttonMotionProperties;
|
package/dist/fixtures.d.cts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { AvatarSize, BackgroundPaletteAlias, BadgeSize, BadgeVariant, BorderWidth, ButtonClassName, ButtonColorProperty, ButtonKind, ButtonMotionEffect, ButtonPalette, ButtonSize, ButtonState, ButtonVariant, ButtonVariantFlat, CheckboxSize, CheckboxVariant, ChipSize, ChipVariant, ColorMode, FontAlias, FontFamilyCDNUrl, FontWeightDescriptive, ForegroundPaletteAlias, Hue, HueStep, IconButtonClassName, IconButtonSize, IconSize, IconVariant, InputSize, LinePaletteAlias, MotionSpringConfigOptions, MotionVariant, MotionVariantSpeed, PaletteValue, RegionMode, ScaleEffectMap, ScaleMode, ShadowColor, ShadowOffset, ShadowPaletteAlias, ShadowSpreadRadius, ShadowVariant, SpacingAlias, SwitchSize, TextDecorationLine, TextProperty, TextTransform, TextVariant, TShirtSize } from '@yahoo/uds/tokens';
|
1
|
+
import type { AvatarSize, BackgroundPaletteAlias, BadgeSize, BadgeVariant, BorderWidth, ButtonClassName, ButtonColorProperty, ButtonKind, ButtonMotionEffect, ButtonPalette, ButtonSize, ButtonState, ButtonVariant, ButtonVariantFlat, CheckboxSize, CheckboxVariant, ChipSize, ChipVariant, ColorMode, FontAlias, FontFamilyCDNUrl, FontWeightDescriptive, ForegroundPaletteAlias, Hue, HueStep, IconButtonClassName, IconButtonSize, IconSize, IconVariant, InputSize, LinePaletteAlias, MotionSpringConfigOptions, MotionVariant, MotionVariantSpeed, PaletteValue, RegionMode, ScaleEffectMap, ScaleMode, ShadowColor, ShadowOffset, ShadowPaletteAlias, ShadowSpreadRadius, ShadowVariant, SpacingAlias, SwitchSize, TextDecorationLine, TextProperty, TextTransform, TextVariant, TShirtSize, TypographyStyleProperty } from '@yahoo/uds/tokens';
|
2
2
|
declare const breakpoints: (keyof import("@yahoo/uds/tokens").BreakpointsConfig)[];
|
3
3
|
declare const colorModes: ColorMode[];
|
4
4
|
declare const scaleModes: ScaleMode[];
|
@@ -26,6 +26,7 @@ declare function sortPalette<T extends Record<string, PaletteValue>>(palette: T,
|
|
26
26
|
declare const textVariants: TextVariant[];
|
27
27
|
declare const textProperties: TextProperty[];
|
28
28
|
declare const textDecorationLines: TextDecorationLine[];
|
29
|
+
declare const typographyStyleProperties: TypographyStyleProperty[];
|
29
30
|
declare const fontAliases: FontAlias[];
|
30
31
|
declare const fontIds: ("centra-no2" | "inter" | "roboto-mono" | "yahoo-sans" | "yahoo-sans-cr4" | "yahoo-product-sans" | "yahoo-product-sans-extended" | "yahoo-sans-condensed" | "yahoo-serif-display" | "yahoo-serif-text")[];
|
31
32
|
declare const fontUrls: FontFamilyCDNUrl[];
|
@@ -116,4 +117,4 @@ declare const chipVariants: ChipVariant[];
|
|
116
117
|
declare const chipSizes: ChipSize[];
|
117
118
|
declare const badgeVariants: BadgeVariant[];
|
118
119
|
declare const badgeSizes: BadgeSize[];
|
119
|
-
export { alwaysPaletteAliases, avatarShapes, avatarSizes, backgroundColors, backgroundPaletteColors, badgeSizes, badgeVariants, borderRadii, borderRadiusRamp, borderWidthRamp, borderWidths, breakpoints, buttonClassNames, buttonColorProperties, buttonIconSvgSize, buttonKinds, buttonMotionEffects, buttonMotionProperties, buttonPalettes, buttonSizeProperties, buttonSizes, buttonStates, buttonVariants, buttonVariantsFlat, buttonVariantsPrimary, buttonVariantsSecondary, buttonVariantsTertiary, checkboxSizes, checkboxVariants, chipSizes, chipVariants, colorModes, fontAliases, fontIds, fontSizeRamp, fontUrls, fontWeights, foregroundColors, foregroundPaletteColors, hues, hueSteps, iconButtonClassNames, iconButtonSizes, iconSizes, iconVariants, inputSizes, lineColors, lineHeightRamp, linePaletteColors, motionSpringConfig, motionSpringConfigOptions, motionVariants, motionVariantSpeeds, palette, regionModes, scaleEffectMap, scaleModes, shadowColors, shadowOffsetMap, shadowOffsets, shadowOpacities, shadowOpacityMap, shadowPaletteColors, shadowSpreadRadii, shadowSpreadRadiusMap, shadowVariants, shadowVariantsInvert, shadowVariantsWithInvert, sortPalette, spacingAliases, spacingMap, spectrumColors, switchSizes, tailwindColorsAsUds, textDecorationLines, textProperties, textTransforms, textVariants, tshirtSizes, };
|
120
|
+
export { alwaysPaletteAliases, avatarShapes, avatarSizes, backgroundColors, backgroundPaletteColors, badgeSizes, badgeVariants, borderRadii, borderRadiusRamp, borderWidthRamp, borderWidths, breakpoints, buttonClassNames, buttonColorProperties, buttonIconSvgSize, buttonKinds, buttonMotionEffects, buttonMotionProperties, buttonPalettes, buttonSizeProperties, buttonSizes, buttonStates, buttonVariants, buttonVariantsFlat, buttonVariantsPrimary, buttonVariantsSecondary, buttonVariantsTertiary, checkboxSizes, checkboxVariants, chipSizes, chipVariants, colorModes, fontAliases, fontIds, fontSizeRamp, fontUrls, fontWeights, foregroundColors, foregroundPaletteColors, hues, hueSteps, iconButtonClassNames, iconButtonSizes, iconSizes, iconVariants, inputSizes, lineColors, lineHeightRamp, linePaletteColors, motionSpringConfig, motionSpringConfigOptions, motionVariants, motionVariantSpeeds, palette, regionModes, scaleEffectMap, scaleModes, shadowColors, shadowOffsetMap, shadowOffsets, shadowOpacities, shadowOpacityMap, shadowPaletteColors, shadowSpreadRadii, shadowSpreadRadiusMap, shadowVariants, shadowVariantsInvert, shadowVariantsWithInvert, sortPalette, spacingAliases, spacingMap, spectrumColors, switchSizes, tailwindColorsAsUds, textDecorationLines, textProperties, textTransforms, textVariants, tshirtSizes, typographyStyleProperties, };
|
package/dist/fixtures.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { AvatarSize, BackgroundPaletteAlias, BadgeSize, BadgeVariant, BorderWidth, ButtonClassName, ButtonColorProperty, ButtonKind, ButtonMotionEffect, ButtonPalette, ButtonSize, ButtonState, ButtonVariant, ButtonVariantFlat, CheckboxSize, CheckboxVariant, ChipSize, ChipVariant, ColorMode, FontAlias, FontFamilyCDNUrl, FontWeightDescriptive, ForegroundPaletteAlias, Hue, HueStep, IconButtonClassName, IconButtonSize, IconSize, IconVariant, InputSize, LinePaletteAlias, MotionSpringConfigOptions, MotionVariant, MotionVariantSpeed, PaletteValue, RegionMode, ScaleEffectMap, ScaleMode, ShadowColor, ShadowOffset, ShadowPaletteAlias, ShadowSpreadRadius, ShadowVariant, SpacingAlias, SwitchSize, TextDecorationLine, TextProperty, TextTransform, TextVariant, TShirtSize } from '@yahoo/uds/tokens';
|
1
|
+
import type { AvatarSize, BackgroundPaletteAlias, BadgeSize, BadgeVariant, BorderWidth, ButtonClassName, ButtonColorProperty, ButtonKind, ButtonMotionEffect, ButtonPalette, ButtonSize, ButtonState, ButtonVariant, ButtonVariantFlat, CheckboxSize, CheckboxVariant, ChipSize, ChipVariant, ColorMode, FontAlias, FontFamilyCDNUrl, FontWeightDescriptive, ForegroundPaletteAlias, Hue, HueStep, IconButtonClassName, IconButtonSize, IconSize, IconVariant, InputSize, LinePaletteAlias, MotionSpringConfigOptions, MotionVariant, MotionVariantSpeed, PaletteValue, RegionMode, ScaleEffectMap, ScaleMode, ShadowColor, ShadowOffset, ShadowPaletteAlias, ShadowSpreadRadius, ShadowVariant, SpacingAlias, SwitchSize, TextDecorationLine, TextProperty, TextTransform, TextVariant, TShirtSize, TypographyStyleProperty } from '@yahoo/uds/tokens';
|
2
2
|
declare const breakpoints: (keyof import("@yahoo/uds/tokens").BreakpointsConfig)[];
|
3
3
|
declare const colorModes: ColorMode[];
|
4
4
|
declare const scaleModes: ScaleMode[];
|
@@ -26,6 +26,7 @@ declare function sortPalette<T extends Record<string, PaletteValue>>(palette: T,
|
|
26
26
|
declare const textVariants: TextVariant[];
|
27
27
|
declare const textProperties: TextProperty[];
|
28
28
|
declare const textDecorationLines: TextDecorationLine[];
|
29
|
+
declare const typographyStyleProperties: TypographyStyleProperty[];
|
29
30
|
declare const fontAliases: FontAlias[];
|
30
31
|
declare const fontIds: ("centra-no2" | "inter" | "roboto-mono" | "yahoo-sans" | "yahoo-sans-cr4" | "yahoo-product-sans" | "yahoo-product-sans-extended" | "yahoo-sans-condensed" | "yahoo-serif-display" | "yahoo-serif-text")[];
|
31
32
|
declare const fontUrls: FontFamilyCDNUrl[];
|
@@ -116,4 +117,4 @@ declare const chipVariants: ChipVariant[];
|
|
116
117
|
declare const chipSizes: ChipSize[];
|
117
118
|
declare const badgeVariants: BadgeVariant[];
|
118
119
|
declare const badgeSizes: BadgeSize[];
|
119
|
-
export { alwaysPaletteAliases, avatarShapes, avatarSizes, backgroundColors, backgroundPaletteColors, badgeSizes, badgeVariants, borderRadii, borderRadiusRamp, borderWidthRamp, borderWidths, breakpoints, buttonClassNames, buttonColorProperties, buttonIconSvgSize, buttonKinds, buttonMotionEffects, buttonMotionProperties, buttonPalettes, buttonSizeProperties, buttonSizes, buttonStates, buttonVariants, buttonVariantsFlat, buttonVariantsPrimary, buttonVariantsSecondary, buttonVariantsTertiary, checkboxSizes, checkboxVariants, chipSizes, chipVariants, colorModes, fontAliases, fontIds, fontSizeRamp, fontUrls, fontWeights, foregroundColors, foregroundPaletteColors, hues, hueSteps, iconButtonClassNames, iconButtonSizes, iconSizes, iconVariants, inputSizes, lineColors, lineHeightRamp, linePaletteColors, motionSpringConfig, motionSpringConfigOptions, motionVariants, motionVariantSpeeds, palette, regionModes, scaleEffectMap, scaleModes, shadowColors, shadowOffsetMap, shadowOffsets, shadowOpacities, shadowOpacityMap, shadowPaletteColors, shadowSpreadRadii, shadowSpreadRadiusMap, shadowVariants, shadowVariantsInvert, shadowVariantsWithInvert, sortPalette, spacingAliases, spacingMap, spectrumColors, switchSizes, tailwindColorsAsUds, textDecorationLines, textProperties, textTransforms, textVariants, tshirtSizes, };
|
120
|
+
export { alwaysPaletteAliases, avatarShapes, avatarSizes, backgroundColors, backgroundPaletteColors, badgeSizes, badgeVariants, borderRadii, borderRadiusRamp, borderWidthRamp, borderWidths, breakpoints, buttonClassNames, buttonColorProperties, buttonIconSvgSize, buttonKinds, buttonMotionEffects, buttonMotionProperties, buttonPalettes, buttonSizeProperties, buttonSizes, buttonStates, buttonVariants, buttonVariantsFlat, buttonVariantsPrimary, buttonVariantsSecondary, buttonVariantsTertiary, checkboxSizes, checkboxVariants, chipSizes, chipVariants, colorModes, fontAliases, fontIds, fontSizeRamp, fontUrls, fontWeights, foregroundColors, foregroundPaletteColors, hues, hueSteps, iconButtonClassNames, iconButtonSizes, iconSizes, iconVariants, inputSizes, lineColors, lineHeightRamp, linePaletteColors, motionSpringConfig, motionSpringConfigOptions, motionVariants, motionVariantSpeeds, palette, regionModes, scaleEffectMap, scaleModes, shadowColors, shadowOffsetMap, shadowOffsets, shadowOpacities, shadowOpacityMap, shadowPaletteColors, shadowSpreadRadii, shadowSpreadRadiusMap, shadowVariants, shadowVariantsInvert, shadowVariantsWithInvert, sortPalette, spacingAliases, spacingMap, spectrumColors, switchSizes, tailwindColorsAsUds, textDecorationLines, textProperties, textTransforms, textVariants, tshirtSizes, typographyStyleProperties, };
|
package/dist/fixtures.js
CHANGED
@@ -1711,6 +1711,15 @@ var textDecorationLines = [
|
|
1711
1711
|
"none",
|
1712
1712
|
"underline"
|
1713
1713
|
];
|
1714
|
+
var typographyStyleProperties = [
|
1715
|
+
"fontFamily",
|
1716
|
+
"fontSize",
|
1717
|
+
"fontWeight",
|
1718
|
+
"lineHeight",
|
1719
|
+
"textTransform",
|
1720
|
+
"fontSlant",
|
1721
|
+
"fontWidth"
|
1722
|
+
];
|
1714
1723
|
var fontAliases = [
|
1715
1724
|
"sans",
|
1716
1725
|
"sans-alt",
|
@@ -2808,7 +2817,7 @@ var buttonMotionProperties = [
|
|
2808
2817
|
"trimLeft",
|
2809
2818
|
"trimRight",
|
2810
2819
|
"matchAll",
|
2811
|
-
"__@iterator@
|
2820
|
+
"__@iterator@69",
|
2812
2821
|
"at"
|
2813
2822
|
];
|
2814
2823
|
var buttonMotionEffects = [
|
@@ -2954,4 +2963,4 @@ var badgeSizes = [
|
|
2954
2963
|
"lg",
|
2955
2964
|
"xs"
|
2956
2965
|
];
|
2957
|
-
export { tshirtSizes, textVariants, textTransforms, textProperties, textDecorationLines, tailwindColorsAsUds, switchSizes, spectrumColors, spacingMap, spacingAliases, sortPalette, shadowVariantsWithInvert, shadowVariantsInvert, shadowVariants, shadowSpreadRadiusMap, shadowSpreadRadii, shadowPaletteColors, shadowOpacityMap, shadowOpacities, shadowOffsets, shadowOffsetMap, shadowColors, scaleModes, scaleEffectMap, regionModes, palette, motionVariants, motionVariantSpeeds, motionSpringConfigOptions, motionSpringConfig, linePaletteColors, lineHeightRamp, lineColors, inputSizes, iconVariants, iconSizes, iconButtonSizes, iconButtonClassNames, hues, hueSteps, foregroundPaletteColors, foregroundColors, fontWeights, fontUrls, fontSizeRamp, fontIds, fontAliases, colorModes, chipVariants, chipSizes, checkboxVariants, checkboxSizes, buttonVariantsTertiary, buttonVariantsSecondary, buttonVariantsPrimary, buttonVariantsFlat, buttonVariants, buttonStates, buttonSizes, buttonSizeProperties, buttonPalettes, buttonMotionProperties, buttonMotionEffects, buttonKinds, buttonIconSvgSize, buttonColorProperties, buttonClassNames, breakpoints, borderWidths, borderWidthRamp, borderRadiusRamp, borderRadii, badgeVariants, badgeSizes, backgroundPaletteColors, backgroundColors, avatarSizes, avatarShapes, alwaysPaletteAliases };
|
2966
|
+
export { typographyStyleProperties, tshirtSizes, textVariants, textTransforms, textProperties, textDecorationLines, tailwindColorsAsUds, switchSizes, spectrumColors, spacingMap, spacingAliases, sortPalette, shadowVariantsWithInvert, shadowVariantsInvert, shadowVariants, shadowSpreadRadiusMap, shadowSpreadRadii, shadowPaletteColors, shadowOpacityMap, shadowOpacities, shadowOffsets, shadowOffsetMap, shadowColors, scaleModes, scaleEffectMap, regionModes, palette, motionVariants, motionVariantSpeeds, motionSpringConfigOptions, motionSpringConfig, linePaletteColors, lineHeightRamp, lineColors, inputSizes, iconVariants, iconSizes, iconButtonSizes, iconButtonClassNames, hues, hueSteps, foregroundPaletteColors, foregroundColors, fontWeights, fontUrls, fontSizeRamp, fontIds, fontAliases, colorModes, chipVariants, chipSizes, checkboxVariants, checkboxSizes, buttonVariantsTertiary, buttonVariantsSecondary, buttonVariantsPrimary, buttonVariantsFlat, buttonVariants, buttonStates, buttonSizes, buttonSizeProperties, buttonPalettes, buttonMotionProperties, buttonMotionEffects, buttonKinds, buttonIconSvgSize, buttonColorProperties, buttonClassNames, breakpoints, borderWidths, borderWidthRamp, borderRadiusRamp, borderRadii, badgeVariants, badgeSizes, backgroundPaletteColors, backgroundColors, avatarSizes, avatarShapes, alwaysPaletteAliases };
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as properties from '@yahoo/uds/fixtures';
|
2
|
-
import { f as ShadowPreset, b as UniversalTokensConfig } from './types-
|
2
|
+
import { f as ShadowPreset, b as UniversalTokensConfig } from './types-BUzQ4GYD.js';
|
3
3
|
|
4
4
|
type DispatchContext = {
|
5
5
|
componentName: string;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as properties from '@yahoo/uds/fixtures';
|
2
|
-
import { f as ShadowPreset, b as UniversalTokensConfig } from './types-
|
2
|
+
import { f as ShadowPreset, b as UniversalTokensConfig } from './types-BUzQ4GYD.cjs';
|
3
3
|
|
4
4
|
type DispatchContext = {
|
5
5
|
componentName: string;
|
@@ -0,0 +1,243 @@
|
|
1
|
+
import * as properties from '@yahoo/uds/fixtures';
|
2
|
+
import { f as ShadowPreset, b as UniversalTokensConfig } from './types-Che4YX3v.cjs';
|
3
|
+
|
4
|
+
type DispatchContext = {
|
5
|
+
componentName: string;
|
6
|
+
subComponentName?: string;
|
7
|
+
propertyKey: string;
|
8
|
+
layer: string;
|
9
|
+
};
|
10
|
+
interface ConfigurableProperty<T extends AllPossibleProperties, CVR = unknown> {
|
11
|
+
name: string;
|
12
|
+
cssProperties: string | string[];
|
13
|
+
twThemePath: (selected: T, value: string) => string;
|
14
|
+
possibleFixtures: T[];
|
15
|
+
extendedProperties?: ExtendablePropertiesName[] | ((context: DispatchContext) => ExtendablePropertiesName[] | undefined | false);
|
16
|
+
customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string) => string;
|
17
|
+
concatenate?: boolean;
|
18
|
+
concatenationDelimiter?: string;
|
19
|
+
}
|
20
|
+
declare const publicProperties: {
|
21
|
+
readonly backgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
22
|
+
readonly borderWidth: ConfigurableProperty<"spacingAliases" | "borderWidths", unknown>;
|
23
|
+
readonly borderRadius: ConfigurableProperty<"borderRadii", unknown>;
|
24
|
+
readonly borderColor: ConfigurableProperty<"linePaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
25
|
+
readonly fontFamily: ConfigurableProperty<"textVariants", unknown>;
|
26
|
+
readonly fontSize: ConfigurableProperty<"textVariants", unknown>;
|
27
|
+
readonly lineHeight: ConfigurableProperty<"textVariants", unknown>;
|
28
|
+
readonly textTransform: ConfigurableProperty<"textVariants", unknown>;
|
29
|
+
readonly padding: ConfigurableProperty<"spacingAliases", unknown>;
|
30
|
+
readonly gap: ConfigurableProperty<"spacingAliases", unknown>;
|
31
|
+
readonly color: ConfigurableProperty<"foregroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
32
|
+
readonly fontWeight: ConfigurableProperty<"textVariants", unknown>;
|
33
|
+
readonly iconSize: ConfigurableProperty<"iconSizes", unknown>;
|
34
|
+
readonly spacingHorizontal: ConfigurableProperty<"spacingAliases", unknown>;
|
35
|
+
readonly spacingVertical: ConfigurableProperty<"spacingAliases", unknown>;
|
36
|
+
readonly textVariant: ConfigurableProperty<"textVariants", unknown>;
|
37
|
+
readonly textDecorationLine: ConfigurableProperty<"textDecorationLines", unknown>;
|
38
|
+
readonly shadow: ConfigurableProperty<"shadowVariants", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
|
39
|
+
readonly insetShadow: ConfigurableProperty<"shadowVariantsWithInvert", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
|
40
|
+
readonly height: ConfigurableProperty<"spacingAliases", unknown>;
|
41
|
+
readonly width: ConfigurableProperty<"spacingAliases", unknown>;
|
42
|
+
};
|
43
|
+
declare const configurableProperties: {
|
44
|
+
outlineWidth: ConfigurableProperty<"spacingAliases" | "borderWidths", unknown>;
|
45
|
+
outlineColor: ConfigurableProperty<"linePaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
46
|
+
insetOutlineOffset: ConfigurableProperty<"spacingAliases" | "borderWidths", unknown>;
|
47
|
+
solidOutline: ConfigurableProperty<never, unknown>;
|
48
|
+
backgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
49
|
+
borderWidth: ConfigurableProperty<"spacingAliases" | "borderWidths", unknown>;
|
50
|
+
borderRadius: ConfigurableProperty<"borderRadii", unknown>;
|
51
|
+
borderColor: ConfigurableProperty<"linePaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
52
|
+
fontFamily: ConfigurableProperty<"textVariants", unknown>;
|
53
|
+
fontSize: ConfigurableProperty<"textVariants", unknown>;
|
54
|
+
lineHeight: ConfigurableProperty<"textVariants", unknown>;
|
55
|
+
textTransform: ConfigurableProperty<"textVariants", unknown>;
|
56
|
+
padding: ConfigurableProperty<"spacingAliases", unknown>;
|
57
|
+
gap: ConfigurableProperty<"spacingAliases", unknown>;
|
58
|
+
color: ConfigurableProperty<"foregroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
59
|
+
fontWeight: ConfigurableProperty<"textVariants", unknown>;
|
60
|
+
iconSize: ConfigurableProperty<"iconSizes", unknown>;
|
61
|
+
spacingHorizontal: ConfigurableProperty<"spacingAliases", unknown>;
|
62
|
+
spacingVertical: ConfigurableProperty<"spacingAliases", unknown>;
|
63
|
+
textVariant: ConfigurableProperty<"textVariants", unknown>;
|
64
|
+
textDecorationLine: ConfigurableProperty<"textDecorationLines", unknown>;
|
65
|
+
shadow: ConfigurableProperty<"shadowVariants", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
|
66
|
+
insetShadow: ConfigurableProperty<"shadowVariantsWithInvert", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
|
67
|
+
height: ConfigurableProperty<"spacingAliases", unknown>;
|
68
|
+
width: ConfigurableProperty<"spacingAliases", unknown>;
|
69
|
+
};
|
70
|
+
type ExtendablePropertiesName = keyof typeof configurableProperties;
|
71
|
+
type ConfigurablePropertiesName = keyof typeof publicProperties;
|
72
|
+
interface SelectedConfigurableProperty<C extends ConfigurablePropertiesName, O extends string, T extends (typeof publicProperties)[C]['possibleFixtures'] = (typeof publicProperties)[C]['possibleFixtures'], V extends readonly (readonly string[])[] = readonly (readonly string[])[]> {
|
73
|
+
label: string;
|
74
|
+
name: C;
|
75
|
+
typeOfFixture: T;
|
76
|
+
values: V;
|
77
|
+
pseudoStates?: PossibleStates[];
|
78
|
+
supportsCustom?: boolean;
|
79
|
+
defaults: {
|
80
|
+
[K in O]: V[number][number];
|
81
|
+
};
|
82
|
+
}
|
83
|
+
|
84
|
+
type AllPossibleProperties = Exclude<keyof typeof properties, 'iconButtonClassNames' | 'iconButtonSize' | 'iconButtonStates' | 'buttonClassNames' | 'buttonColorProperties' | 'buttonIconSvgSize' | 'buttonKinds' | 'buttonMotionEffects' | 'buttonMotionProperties' | 'buttonPalettes' | 'buttonSizeProperties' | 'buttonSizes' | 'buttonStates' | 'buttonVariants'> | 'shadowVariantConfig';
|
85
|
+
type PossibleStates = 'hover' | 'pressed' | 'focused' | 'invalid' | 'focus-within' | 'focused-keyboard' | 'visited' | 'readonly' | 'disabled' | 'invalid&hover' | 'invalid&pressed';
|
86
|
+
type PossibleStatesWithRest = 'rest' | PossibleStates;
|
87
|
+
interface LayerConfig {
|
88
|
+
label: string;
|
89
|
+
properties: Readonly<Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>>;
|
90
|
+
pseudoSelector?: string;
|
91
|
+
}
|
92
|
+
interface ComponentStateConfig {
|
93
|
+
label: string;
|
94
|
+
options: string[];
|
95
|
+
layers: {
|
96
|
+
root: LayerConfig;
|
97
|
+
} & Record<string, LayerConfig>;
|
98
|
+
}
|
99
|
+
interface SubComponentConfig {
|
100
|
+
label: string;
|
101
|
+
description: string;
|
102
|
+
overrideComponentName?: string;
|
103
|
+
variants: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
|
104
|
+
}
|
105
|
+
interface VariantConfig<O extends string = string> {
|
106
|
+
label: string;
|
107
|
+
description: string;
|
108
|
+
isConfigurable: boolean;
|
109
|
+
default: O;
|
110
|
+
options: readonly O[];
|
111
|
+
}
|
112
|
+
interface VariantConfigWithProperties<O extends string = string> extends VariantConfig<O> {
|
113
|
+
layers: {
|
114
|
+
root: LayerConfig;
|
115
|
+
} & Record<string, LayerConfig>;
|
116
|
+
}
|
117
|
+
interface VariantConfigWithComponentStates<O extends string = string> extends VariantConfig<O> {
|
118
|
+
componentStates?: Readonly<Record<string, ComponentStateConfig>>;
|
119
|
+
}
|
120
|
+
interface ComponentConfig {
|
121
|
+
label: string;
|
122
|
+
description: string;
|
123
|
+
overrideComponentName?: string;
|
124
|
+
subComponents?: Record<string, SubComponentConfig>;
|
125
|
+
variants?: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
|
126
|
+
}
|
127
|
+
type AutoComponents = Omit<UniversalTokensConfig, 'colorMode' | 'font' | 'scaleMode' | 'version' | 'motion' | 'button' | 'iconButton' | 'shadow' | 'breakpoints' | 'typography' | 'globalDefaults'>;
|
128
|
+
type AutoComponentName = keyof AutoComponents;
|
129
|
+
type AllVariantKeys = {
|
130
|
+
[K in keyof AutoComponents]: {
|
131
|
+
[V in keyof AutoComponents[K]['defaults']]: V;
|
132
|
+
}[keyof AutoComponents[K]['defaults']];
|
133
|
+
}[keyof AutoComponents];
|
134
|
+
|
135
|
+
type ThemeFn = (path: string) => string;
|
136
|
+
type SchemaStateValue<T = any> = {
|
137
|
+
type: string;
|
138
|
+
valueType: 'alias' | 'custom';
|
139
|
+
value: T;
|
140
|
+
};
|
141
|
+
declare const statePseudoMapDocsMode: Record<PossibleStates | 'rest', string>;
|
142
|
+
declare function findFixtureType(property: SelectedConfigurableProperty<ConfigurablePropertiesName, string>, variantKey: string): string;
|
143
|
+
declare function toMinimalDbConfigObject<C extends ComponentConfig>(config: C): any;
|
144
|
+
declare function generateClassName({ componentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, subComponentName, stateKey, stateValue, }: {
|
145
|
+
componentName: string;
|
146
|
+
variantKey: string;
|
147
|
+
variantValue?: string;
|
148
|
+
layer: string;
|
149
|
+
layerOptionalPseudoSelector?: string;
|
150
|
+
subComponentName?: string;
|
151
|
+
stateKey?: string;
|
152
|
+
stateValue?: string;
|
153
|
+
}): string;
|
154
|
+
declare function generateDeclaration({ componentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, subComponentName, stateKey, stateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions, }: {
|
155
|
+
componentName: string;
|
156
|
+
variantKey: string;
|
157
|
+
variantValue: string;
|
158
|
+
layer: string;
|
159
|
+
layerOptionalPseudoSelector?: string;
|
160
|
+
subComponentName?: string;
|
161
|
+
stateKey?: string;
|
162
|
+
stateValue?: string;
|
163
|
+
schema: unknown;
|
164
|
+
propertyKey: string;
|
165
|
+
originalPropertyDefinition: SelectedConfigurableProperty<ConfigurablePropertiesName, any>;
|
166
|
+
theme: ThemeFn;
|
167
|
+
currentStyles: Readonly<Record<string, Record<string, string>>>;
|
168
|
+
previewOptions?: {
|
169
|
+
generatePseudoStateClassModifier?: boolean;
|
170
|
+
forcePseudoState?: boolean;
|
171
|
+
};
|
172
|
+
}): Record<string, Record<string, string>>;
|
173
|
+
declare function generateStyles<C extends ComponentConfig>(config: C, schema: any, theme: ThemeFn, previewOptions?: {
|
174
|
+
generatePseudoStateClassModifier: boolean;
|
175
|
+
forcePseudoState: boolean;
|
176
|
+
}): Record<string, Record<string, string>>;
|
177
|
+
declare function createConfigurableProperty<C extends ConfigurablePropertiesName, O extends string, T extends (typeof configurableProperties)[C]['possibleFixtures'], V extends readonly (readonly string[])[] = readonly (readonly string[])[]>(prop: {
|
178
|
+
name: C;
|
179
|
+
typeOfFixture: T;
|
180
|
+
values: V;
|
181
|
+
defaults: {
|
182
|
+
[K in O]: V[number][number];
|
183
|
+
};
|
184
|
+
label: string;
|
185
|
+
pseudoStates?: PossibleStates[];
|
186
|
+
supportsCustom?: boolean;
|
187
|
+
}): SelectedConfigurableProperty<C, O, T, V>;
|
188
|
+
/**
|
189
|
+
* @deprecated use the new functions instead
|
190
|
+
*/
|
191
|
+
declare function createVariantConfig<O extends string, T extends Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, O>>>(config: {
|
192
|
+
label: string;
|
193
|
+
description: string;
|
194
|
+
isConfigurable: boolean;
|
195
|
+
default: O;
|
196
|
+
options: readonly O[];
|
197
|
+
properties: T;
|
198
|
+
}): VariantConfig<O>;
|
199
|
+
declare function createComponentStateConfig(config: {
|
200
|
+
label: string;
|
201
|
+
options: string[];
|
202
|
+
layers: {
|
203
|
+
root: LayerConfig;
|
204
|
+
} & Record<string, LayerConfig>;
|
205
|
+
}): ComponentStateConfig;
|
206
|
+
declare function createVariantConfigWithProperties(config: {
|
207
|
+
label: string;
|
208
|
+
description: string;
|
209
|
+
isConfigurable: boolean;
|
210
|
+
default: string;
|
211
|
+
options: readonly string[];
|
212
|
+
layers: {
|
213
|
+
root: LayerConfig;
|
214
|
+
} & Record<string, LayerConfig>;
|
215
|
+
}): VariantConfigWithProperties;
|
216
|
+
declare function createVariantConfigWithComponentStates(config: {
|
217
|
+
label: string;
|
218
|
+
description: string;
|
219
|
+
isConfigurable: boolean;
|
220
|
+
default: string;
|
221
|
+
options: readonly string[];
|
222
|
+
componentStates: Record<string, ComponentStateConfig>;
|
223
|
+
}): VariantConfigWithComponentStates;
|
224
|
+
declare function createComponentStates(config: {
|
225
|
+
label: string;
|
226
|
+
options: string[];
|
227
|
+
layers: {
|
228
|
+
root: LayerConfig;
|
229
|
+
} & Record<string, LayerConfig>;
|
230
|
+
}): ComponentStateConfig;
|
231
|
+
declare function createLayerConfig(config: {
|
232
|
+
label: string;
|
233
|
+
pseudoSelector?: string;
|
234
|
+
properties: Readonly<Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>>;
|
235
|
+
}): LayerConfig;
|
236
|
+
declare function createSubComponentConfig(config: {
|
237
|
+
label: string;
|
238
|
+
description: string;
|
239
|
+
overrideComponentName?: string;
|
240
|
+
variants: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
|
241
|
+
}): SubComponentConfig;
|
242
|
+
|
243
|
+
export { type AllPossibleProperties as A, type ConfigurablePropertiesName as C, type ExtendablePropertiesName as E, type LayerConfig as L, type PossibleStates as P, type SelectedConfigurableProperty as S, type VariantConfig as V, type PossibleStatesWithRest as a, type ComponentStateConfig as b, configurableProperties as c, type SubComponentConfig as d, type VariantConfigWithProperties as e, type VariantConfigWithComponentStates as f, type ComponentConfig as g, type AutoComponents as h, type AutoComponentName as i, type AllVariantKeys as j, type SchemaStateValue as k, findFixtureType as l, generateClassName as m, generateDeclaration as n, generateStyles as o, createConfigurableProperty as p, createVariantConfig as q, createComponentStateConfig as r, statePseudoMapDocsMode as s, toMinimalDbConfigObject as t, createVariantConfigWithProperties as u, createVariantConfigWithComponentStates as v, createComponentStates as w, createLayerConfig as x, createSubComponentConfig as y };
|