@yahoo/uds 3.59.0-beta.1 → 3.59.0

package/dist/client/index.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";var e=require("../chunk-W4J7ZS6U.cjs"),t=require("../chunk-TN3TGUL4.cjs"),a=require("../chunk-UQJ7WV2P.cjs"),n=require("../chunk-FP76653E.cjs"),o=require("../chunk-5R7POUAI.cjs"),i=require("../chunk-QLETZKZI.cjs"),s=require("../chunk-4UB6EIVI.cjs"),r=require("../chunk-DE7HKKF7.cjs"),c=require("../chunk-V7E46T44.cjs"),l=require("../chunk-QLXJH36U.cjs"),u=require("react"),d=require("react/jsx-runtime"),p=require("@yahoo/uds/fixtures"),m=require("motion/react"),h=require("@yahoo/uds/client/Menu"),x=l.__toESM(r.require_isFunction(),1),f={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("")},b=(e,t="firstAndLast")=>{if(!e)return"";if((0,x.default)(t))return t(e);const a=e.trim().split(/\s+/).map(e=>e[0].toUpperCase());return f[t](a)},g=(e="md",t)=>{const{className:a,...n}=t??{};return i.getStyles({avatarSizeRoot:e,...n,className:i.cx("shrink-0","text-center","inline-flex","justify-center","items-center","overflow-visible","truncate",a)})},y=e=>{const t=e?{height:e,width:e}:{};return{root:t,contents:{...t,boxSizing:"content-box"}}},v="primary",S="md",I={primary:t.e2,secondary:t.t},N=({size:e=S,variant:t=v,customSize:a,icon:n,slotProps:o,className:s,...r})=>{const c=u.useMemo(()=>({root:g(e,{avatarIconVariantRoot:t,overflow:"hidden",className:i.cx("overflow-hidden",s)}),iconContainer:i.cx("w-full","h-full","shrink-0","overflow-hidden","text-center","inline-flex","justify-center","items-center"),icon:i.getStyles({avatarSizeIcon:e})}),[s,e,t]),l=u.useMemo(()=>y(a),[a]),p=n??I[t??"primary"];return d.jsx(i.Box,{className:c.root,style:l.root,...r,children:d.jsx(i.Box,{className:c.iconContainer,style:l.contents,children:d.jsx(i.IconSlot,{icon:p,iconProps:{variant:"fill",color:"current",...o?.icon},className:c.icon})})})};/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */N.displayName="AvatarIcon";var C=({size:e=S,variant:t=v,name:a,initials:n,customSize:o,abbreviationStrategy:s,className:r,slotProps:c,...l})=>{const p=u.useMemo(()=>({root:g(e,{avatarTextVariantRoot:t,className:i.cx("overflow-hidden","truncate",r)}),text:i.cx("w-full","h-full","shrink-0","overflow-hidden","text-center","inline-flex","justify-center","items-center","truncate")}),[r,e,t]),m=u.useMemo(()=>y(o),[o]);return d.jsx(i.Box,{className:p.root,style:m.root,...l,children:d.jsx(i.Text,{color:"inherit",variant:"inherit",className:p.text,style:m.contents,...c?.text,children:n||b(a,s)})})};C.displayName="AvatarText";var j=({size:t=S,variant:a=v,src:n,srcSet:o,customSize:s,alt:r,abbreviationStrategy:c,fallback:l,className:p,imageProps:m,slotProps:h,...x})=>{const[f,b]=u.useState("loading");u.useEffect(()=>{let e=!0;if(n||o){const t=new Image;t.onload=()=>{e&&b("loaded")},t.onerror=()=>{e&&b("error")},n&&(t.src=n),o&&(t.srcset=o)}else b("error");return()=>{e=!1}},[n,o]);const I=u.useMemo(()=>({root:g(t,{avatarImageVariantRoot:a,className:i.cx("overflow-hidden",p)}),contents:i.cx("w-full","h-full","shrink-0","text-center","inline-flex","justify-center","items-center","object-cover")}),[p,t,a]),j=u.useMemo(()=>y(s),[s]);if("loaded"===f)return d.jsx(i.Box,{className:I.root,style:j.root,children:d.jsx(e.Image,{src:n,srcSet:o,alt:r,className:I.contents,style:j.contents,...m,...h?.image})});const k={...x,size:t,customSize:s,variant:a};return l||r?d.jsx(C,{name:r,initials:l,abbreviationStrategy:c,slotProps:{text:h?.text},...k}):d.jsx(N,{...k,slotProps:{icon:h?.icon}})};j.displayName="AvatarImage";var k=e=>d.jsx(j,{...e});k.displayName="Avatar";var w=u.forwardRef(function({variant:e="primary",size:t="md",minWidth:n,maxWidth:o=200,startIcon:s,endIcon:r,backgroundColor:c,color:l,iconColor:p,borderColor:m,children:h,className:x,...f},b){const g=i.getStyles({badgeSizeRoot:t,badgeVariantRoot:e,className:i.cx(["uds-badge","uds-badge-variant","uds-badge-size",x])}),y=i.getStyles({badgeVariantIcon:e,badgeSizeIcon:t,className:i.cx(["uds-badge-iconSize","uds-badge-iconColor"])}),v=u.useMemo(()=>({...n?{minWidth:`${n}px`}:{},..."full"===o?{}:{maxWidth:`${o}px`},...c?{backgroundColor:c}:{},...m?{borderColor:m}:{},...l?{color:l}:{}}),[c,m,l,o,n]),S=u.useMemo(()=>({variant:"fill",style:{...p?{color:p}:{}}}),[p]);return d.jsxs(a.HStack,{ref:b,gap:"2",display:"inline-flex",alignItems:"center",className:g,style:v,...f,children:[s&&d.jsx(i.IconSlot,{icon:s,iconProps:S,"data-testid":"start-icon",className:y}),d.jsx("span",{className:"flex-1 truncate whitespace-nowrap text-center",children:h}),r&&d.jsx(i.IconSlot,{icon:r,iconProps:S,"data-testid":"end-icon",className:y})]})});w.displayName="Badge";var V={scale:.7,opacity:0},R={scale:[.7,.7,1],opacity:[0,0,1],transition:{times:[0,.5,1]}},M={icon:R,hide:V,loading:V},P={loading:R,hide:V,icon:V},z=`var(${c.BUTTON_CSS_VAR_MAP.columnGap})`,T=`var(${c.BUTTON_CSS_VAR_MAP.iconSize})`,B={rest:{scale:`var(${c.BUTTON_CSS_VAR_MAP.effects.scale.rest})`},hover:{scale:`var(${c.BUTTON_CSS_VAR_MAP.effects.scale.hover})`},pressed:{scale:`var(${c.BUTTON_CSS_VAR_MAP.effects.scale.pressed})`},withoutIcon:{columnGap:"0px"},withIcon:{columnGap:z}},E={hide:{width:"0px",opacity:0,display:"none"},loading:{width:T,display:"flex",opacity:1},icon:{width:T,display:"flex",opacity:1}},H=u.forwardRef(function({variant:e,size:a,startIcon:n,endIcon:r,iconVariant:c,loading:l,disableEffects:h,children:x,asChild:f,type:b="button",className:g,width:y,...v},S){const I=u.useRef(null);u.useImperativeHandle(S,()=>I.current);const N=u.useMemo(()=>i.createSlot(),[]),C=u.useMemo(()=>m.m.create(N),[N]),j=r?"icon":"hide",k=(({startIcon:e,endIcon:t,loading:a})=>e||t||a?"withIcon":"withoutIcon")({startIcon:n,endIcon:r,loading:l}),w=(({loading:e,startIcon:t})=>e?"loading":t?"icon":"hide")({loading:l,startIcon:n}),{palette:V,variant:R}=u.useMemo(()=>s.parseDeprecatedButtonPaletteVariant({flatVariant:e}),[e]),z=u.useMemo(()=>({button:i.getStyles({width:y,buttonSize:a,buttonVariant:R,buttonPalette:V,className:i.cx("uds-button","uds-ring","uds-hit-target",l&&"uds-button-loading",h&&"uds-button-without-effects","withIcon"===k&&"uds-button-with-gap",g)}),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,R,V,g,l,h,k]),T=m.useReducedMotion()?"smooth":"subtle",H=u.useMemo(()=>d.jsx(m.m.span,{className:z.iconContainer,initial:!1,variants:E,animate:w,children:d.jsxs(m.AnimatePresence,{initial:!1,mode:"popLayout",children:[l&&d.jsx(m.m.span,{variants:P,initial:"hide",animate:"loading",exit:"hide",children:d.jsx(i.Icon,{size:p.buttonIconSvgSize,name:t.o2,variant:c,color:"current",className:z.loading})},"loading"),n&&!l&&d.jsx(m.m.span,{variants:M,initial:"hide",animate:"icon",exit:"hide",children:d.jsx(i.IconSlot,{className:z.start,icon:n,iconProps:{size:p.buttonIconSvgSize,variant:c,color:"current"}})})]})}),[z.iconContainer,z.loading,z.start,w,l,c,n]),A=u.useMemo(()=>d.jsx(m.m.span,{className:z.iconContainer,initial:!1,variants:E,animate:j,children:d.jsx(m.AnimatePresence,{initial:!1,mode:"popLayout",children:r&&d.jsx(m.m.span,{variants:M,initial:"hide",animate:"icon",exit:"hide",children:d.jsx(i.IconSlot,{className:z.end,icon:r,iconProps:{size:p.buttonIconSvgSize,variant:c,color:"current"}})})})}),[z.iconContainer,z.end,r,j,c]),O=u.useMemo(()=>h?{...B,rest:{},hover:{},pressed:{}}:B,[h]);return f&&u.isValidElement(x)?d.jsx(o.SpringMotionConfig,{layoutSpeed:"3",layoutVariant:T,children:d.jsx(C,{type:b,className:z.button,initial:["hide",k],animate:k,variants:O,whileHover:"hover",whileTap:"pressed",...v,children:u.cloneElement(x,x.props,d.jsxs(d.Fragment,{children:[H,d.jsx("span",{className:z.content,children:x.props.children}),A]}))})}):d.jsx(o.SpringMotionConfig,{layoutSpeed:"3",layoutVariant:T,children:d.jsxs(m.m.button,{ref:I,type:b,className:z.button,initial:["hide",k],animate:k,variants:O,whileHover:"hover",whileTap:"pressed",...v,children:[H,d.jsx("span",{className:z.content,children:x}),A]})})});H.displayName="Button";var A={primary:"alert",secondary:"alert-secondary"},O=e=>"indeterminate"===e,q=e=>O(e)?t.o:t.e,L=m.m.create(i.Box),_={layoutVariant:"smooth",layoutSpeed:"3"},F={layoutVariant:"veryBouncy",layoutSpeed:"4"},$=u.forwardRef(function({id:e,checked:t,defaultChecked:a,onChange:s,label:r,labelPosition:c="start",variant:l="primary",size:p="md",reduceMotion:h,disabled:x,required:f,hasError:b,className:g,layerClassNames:y,...v},S){const I=u.useId(),N=e??`uds-input-${I}`,C=u.useRef(null),j=void 0!==t,[k,w]=u.useState(j?t:a),[V,R]=u.useState(!1),[M,P]=u.useState(!1),z=u.useMemo(()=>b?A[l]:l,[b,l]),T=!x&&V,B=!x&&M,E=u.useMemo(()=>B?.9:T?1.1:1,[B,T]),H=u.useMemo(()=>k?B?"opacity-55":"opacity-100":"opacity-0",[k,B]),$=u.useMemo(()=>({scale:E}),[E]),W=u.useMemo(()=>M?F:_,[M]),D=u.useCallback(e=>{s?.(e),j||w(e.target.checked)},[j,s]),U=u.useCallback(()=>{R(!0)},[]),G=u.useCallback(()=>{R(!1)},[]),X=u.useCallback(()=>{P(!0)},[]),J=u.useCallback(()=>{P(!1)},[]),K=e=>{C.current&&(C.current.indeterminate=O(e))},Q=h?"always":"user",Z=m.useReducedMotion()||h?"duration-0":"duration-120";u.useEffect(()=>{j&&w(t)},[t,j]),u.useEffect(()=>{K(k)},[k]);const Y=O(k)?"indeterminate":k?"checked":"unchecked",ee={root:i.getStyles({checkboxSizeRoot:p,checkboxVariantRoot:z,checkboxVariantValueRoot:Y,display:"flex",flexDirection:"start"===c?"row":"row-reverse",alignItems:"center",className:i.cx({"cursor-pointer":!x,"cursor-default":x,"opacity-50":x},g,y?.root)}),checkbox:i.getStyles({checkboxSizeCheckbox:p,checkboxVariantCheckbox:z,checkboxVariantValueCheckbox:Y,className:i.cx("border","rounded-[4px]","uds-ring","uds-ring-within",Z,"transition-[background-color,border-color,box-shadow]",y?.checkbox)}),check:i.getStyles({checkboxVariantCheckboxIcon:z,checkboxVariantValueCheckboxIcon:Y,className:i.cx("pointer-events-none",H,Z,"transition-opacity")}),htmlCheckbox:i.cx("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:i.cx("start"===c?"text-start":"text-end",y?.label)},te=r?m.m.label:m.m.div;return d.jsx(o.SpringMotionConfig,{reducedMotion:Q,...W,children:d.jsxs(te,{className:ee.root,"data-testid":"container",onHoverStart:U,onHoverEnd:G,onTapStart:X,onTap:J,onTapCancel:J,tabIndex:-1,children:[d.jsxs(L,{position:"relative",className:ee.checkbox,alignItems:"center",justifyContent:"center",flex:"none",animate:$,children:[d.jsx("input",{type:"checkbox",tabIndex:0,...v,ref:e=>{C.current=e,K(k),"function"==typeof S?S(e):null!==S&&(S.current=e)},id:N,disabled:x,required:f,"aria-invalid":b,checked:j?!O(k)&&k:void 0,defaultChecked:j?void 0:a,onChange:D,className:ee.htmlCheckbox}),d.jsx(i.Icon,{name:q(k),size:"sm",className:ee.check})]}),r&&d.jsx(n.FormLabel,{as:"div",variant:"inherit",color:"inherit",required:f,label:r,className:ee.label})]})})});$.displayName="Checkbox";var W=(e,t,a="overwriteOriginal")=>{const n=Array.from(new Set([...Object.keys(e??{}),...Object.keys(t??{})]));return Object.fromEntries(n.map(n=>{const o=e?.[n],s=t?.[n];return o&&!s?[n,o]:s&&!o?[n,s]:"className"===n?[n,i.cx(o,s)]:"keepOriginal"===a?[n,o]:[n,s]}))},D=(e,t,a="overwriteOriginal")=>{if(!e)return t;const n=Array.from(new Set([...Object.keys(e),...Object.keys(t)]));return Object.fromEntries(n.map(n=>{const o=e[n],i=t[n];return[n,W(o,i,a)]}))},U="primary",G=u.forwardRef(function({size:e="md",minWidth:t,maxWidth:n=200,startIcon:o,endIcon:s,as:r="div",reduceMotion:c,disabled:l=!1,className:p,slotProps:h,children:x,...f},b){const g=m.useReducedMotion()||c?"duration-0":"duration-120",{className:y,...v}=h?.text??{},{className:S,...I}=h?.startIcon??{},{className:N,...C}=h?.endIcon??{},j=u.useMemo(()=>({root:i.getStyles({chipSizeRoot:e,className:i.cx({"pointer-events-none":l,"cursor-default":l,"opacity-50":l},"inline-flex","items-center","focus-visible:-outline-offset-2","uds-ring",g,"transition-[background-color,outline-color,box-shadow]",p)}),text:i.cx("truncate","whitespace-nowrap","text-center","flex-1",y),icon:i.getStyles({chipSizeIcon:e})}),[p,g,l,e,y]),k=u.useMemo(()=>({root:{maxWidth:`${n}px`,...t?{minWidth:`${t}px`}:{}}}),[n,t]);return d.jsx(a.HStack,{asChild:!0,ref:b,className:j.root,style:k.root,...f,children:d.jsxs(r,{disabled:l,children:[o&&d.jsx(i.IconSlot,{icon:o,iconProps:{variant:"fill",className:i.cx(j.icon,S),...I}}),d.jsx(i.Text,{as:"span",color:"current",variant:"inherit",className:j.text,...v,children:x}),s&&d.jsx(i.IconSlot,{icon:s,iconProps:{variant:"fill",className:i.cx(j.icon,N),...C}})]})})});G.displayName="ChipBase";var X=u.forwardRef(function({variant:e=U,slotProps:t,className:a,...n},o){const s=u.useMemo(()=>({root:i.getStyles({chipLinkVariantRoot:e,className:a}),icon:i.getStyles({chipLinkVariantIcon:e})}),[a,e]),r=D(t,{startIcon:{className:s.icon},endIcon:{className:s.icon}});return d.jsx(G,{as:"button",ref:o,tabIndex:0,className:s.root,slotProps:r,...n})});X.displayName="ChipButton";var J=u.forwardRef(function({dismissButtonAriaLabel:e,onDismiss:a,dismissIcon:n,variant:o=U,disabled:s,slotProps:r,className:c,...l},p){const m=u.useMemo(()=>({root:i.getStyles({chipDismissibleVariantRoot:o,className:c}),icon:i.getStyles({chipDismissibleVariantIcon:o}),iconPressable:i.cx("uds-chip-dismissible-button","uds-hit-target")}),[c,o]),h=u.useCallback(e=>{e.stopPropagation(),a?.()},[a]),x=D(r,{startIcon:{className:m.icon},endIcon:{className:m.icon}});return d.jsx(G,{ref:p,disabled:s,tabIndex:-1,endIcon:a=>d.jsx(t.Pressable,{"aria-label":e,className:m.iconPressable,onClick:h,disabled:s,children:d.jsx(i.IconSlot,{icon:n??t.a,iconProps:a})}),className:m.root,slotProps:x,...l})});J.displayName="ChipDismissible";var K=u.forwardRef(function({variant:e=U,href:t,disabled:a,slotProps:n,className:o,...s},r){const c=u.useMemo(()=>({root:i.getStyles({chipLinkVariantRoot:e,className:o}),icon:i.getStyles({chipLinkVariantIcon:e})}),[o,e]),l=D(n,{startIcon:{className:c.icon},endIcon:{className:c.icon}});return d.jsx(G,{as:"a",ref:r,disabled:a,className:c.root,slotProps:l,tabIndex:0,...{...s,href:a?void 0:t}})});K.displayName="ChipLink";var Q=u.forwardRef(function({isToggled:e=!1,onToggle:t,onClick:a,variant:n=U,slotProps:o,className:s,role:r="checkbox",...c},l){const p=u.useMemo(()=>({root:i.getStyles({chipToggleVariantRoot:n,chipToggleVariantActiveRoot:e?"on":"off",className:s}),icon:i.getStyles({chipToggleVariantIcon:n})}),[s,e,n]),m=u.useCallback(n=>{t?.(!e),a?.(n)},[e,a,t]),h=D(o,{startIcon:{className:p.icon},endIcon:{className:p.icon}}),x="checkbox"===r||"switch"===r;return d.jsx(G,{ref:l,as:"button",role:r,"aria-checked":x?e:void 0,onClick:m,className:p.root,slotProps:h,tabIndex:0,...c})});Q.displayName="ChipToggle";var Z=u.forwardRef(function({onClick:e,href:t,linkProps:a,onDismiss:n,onToggle:o,isToggled:i,slotProps:s,...r},c){const{anchor:l,...u}=s??{};return n?d.jsx(J,{ref:c,onDismiss:n,slotProps:u,...r}):o?d.jsx(Q,{ref:c,onToggle:o,isToggled:i,slotProps:u,...r}):t?d.jsx(K,{ref:c,href:t,slotProps:u,...r,...a,...l}):d.jsx(X,{ref:c,onClick:e,slotProps:u,...r})});Z.displayName="Chip";var Y=u.forwardRef(function({variant:e,size:a,iconVariant:n,loading:r,disableEffects:c,name:l,type:h="button",htmlName:x,className:f,children:b,...g},y){const v=u.useRef(null);u.useImperativeHandle(y,()=>v.current);const{palette:S,variant:I}=s.parseDeprecatedButtonPaletteVariant({flatVariant:e}),N=u.useMemo(()=>({button:i.getStyles({buttonVariant:I,buttonPalette:S,iconButtonSize:a,className:i.cx("uds-icon-button","uds-button","uds-ring","uds-hit-target",r&&"uds-button-loading",c&&"uds-button-without-effects",f)}),loading:"uds-button-icon start-content animate-spin",icon:"uds-button-icon start-content"}),[S,I,f,c,a,r]),C=m.useReducedMotion(),j=u.useMemo(()=>C?"smooth":"subtle",[C]),k=u.useMemo(()=>{const{rest:e,hover:t,pressed:a}=B;return c?{rest:{},hover:{},pressed:{}}:{rest:e,hover:t,pressed:a}},[c]);return d.jsx(o.SpringMotionConfig,{layoutSpeed:"3",layoutVariant:j,reducedMotion:c?"always":"user",children:d.jsx(m.m.button,{ref:v,type:h,className:N.button,initial:"icon",variants:k,whileHover:"hover",whileTap:"pressed",name:x,...g,children:d.jsxs(m.AnimatePresence,{initial:!1,mode:"popLayout",children:[r&&d.jsx(m.m.span,{variants:P,initial:"loading",animate:"loading",exit:"hide",children:d.jsx(i.Icon,{size:p.buttonIconSvgSize,name:t.o2,variant:n,color:"current",className:N.loading})},"loading"),l&&!r&&d.jsx(m.m.span,{variants:M,initial:"icon",animate:"icon",exit:"hide",children:b||d.jsx(i.Icon,{size:p.buttonIconSvgSize,name:l,variant:n,color:"current",className:N.icon})},l.name)]})})})});Y.displayName="IconButton";var ee=l.__toESM(r.require_isFunction(),1),te=({children:e,reduceMotion:t,layoutVariant:a})=>{const n=u.useRef(null),[i,s]=u.useState("auto");return u.useEffect(()=>{if(n.current){const e=new ResizeObserver(e=>{s(e[0].contentRect.height)});return e.observe(n.current),()=>{e.disconnect()}}},[]),d.jsx(o.SpringMotionConfig,{reducedMotion:t,layoutSpeed:"4",layoutVariant:a,children:d.jsx(m.m.div,{className:"overflow-hidden",style:{height:i,opacity:0},animate:{height:i,opacity:1},children:d.jsx("div",{ref:n,children:e})})})};function ae({startIcon:e,endIcon:t,iconProps:n,children:o,size:s,isFilled:r,...c}){const l={helperText:i.cx(i.getStyles({inputSizeHelperText:s,inputVariantHelperText:"default",inputVariantValueHelperText:r?"filled":"empty"})),helperIcon:i.getStyles({inputSizeHelperIcon:s,inputVariantHelperIcon:"default",inputVariantValueHelperIcon:r?"filled":"empty"})},u={variant:"outline",...n};return d.jsxs(a.HStack,{gap:"1",alignItems:"center",...c,children:[e&&d.jsx(i.IconSlot,{icon:e,...u,iconProps:n,className:l.helperIcon}),d.jsx("span",{className:l.helperText,children:o}),t&&d.jsx(i.IconSlot,{icon:t,...u,iconProps:n,className:l.helperIcon})]})}te.displayName="AnimateHeightChange",ae.displayName="InputHelpTextInternal";var ne=u.memo(ae),oe=u.memo(function({helpText:e,helperTextIcon:t,spacingStart:a,spacingTop:n,size:o,isFilled:s,...r}){return e?d.jsx(i.Box,{spacingTop:n,spacingStart:a,...r,children:d.jsx(ne,{startIcon:t,size:o,isFilled:s,children:(0,ee.default)(e)?e():e})}):null}),ie=u.memo(function({icon:e,className:t,iconProps:a}){return e?d.jsx(i.IconSlot,{icon:e,iconProps:{variant:"outline",...a},className:t}):null}),se=u.memo(function({icon:e,className:t,iconProps:a}){return e?d.jsx(i.IconSlot,{icon:e,iconProps:{variant:"outline",...a},className:t}):null}),re=u.forwardRef(function({id:e,label:t,type:n="text",size:o="md",startIcon:s,endIcon:r,helpText:c,helperTextIcon:l,hasError:p,width:h="full",defaultValue:x,required:f,readOnly:b,disabled:g,reduceMotion:y,onChange:v,slotProps:S,className:I,...N},C){const j=u.useId(),k=e??`uds-input-${j}`,w=`uds-input-${k}-help-text`,{className:V,...R}=S?.input??{},{className:M,...P}=S?.inputWrapper??{},z=u.useRef(null);u.useImperativeHandle(C,()=>z.current);const[T,B]=u.useState(x??""),E=u.useCallback(e=>{B(e.target.value),v?.(e)},[v]),H=m.useReducedMotion()?"smooth":"bouncy",A=y?"always":"user",O=!b&&!g,q={root:i.getStyles({inputSizeRoot:o,inputVariantRoot:"default",inputVariantValueRoot:T?"filled":"empty",className:i.cx([I,g?"opacity-50":""])}),inputWrapper:i.cx(i.getStyles({inputSizeInputWrapper:o,inputVariantInputWrapper:"default",inputVariantValueInputWrapper:T?"filled":"empty"}),"min-w-[200px]",M),input:i.getStyles({inputSizeInput:o,inputVariantInput:"default",inputVariantValueInput:T?"filled":"empty",inputVariantInputPlaceholder:"default",inputVariantValueInputPlaceholder:T?"filled":"empty",className:i.cx("grow","uds-hit-target","bg-clip-text","focus:outline-none",O?"cursor-text":"cursor-not-allowed",V)}),label:i.cx(i.getStyles({inputSizeLabel:o,inputVariantLabel:"default",inputVariantValueLabel:T?"filled":"empty"})),labelRequired:i.getStyles({inputVariantLabelRequired:"default",inputVariantValueLabelRequired:T?"filled":"empty"}),startIcon:i.getStyles({inputSizeStartIcon:o,inputVariantStartIcon:"default",inputVariantValueStartIcon:T?"filled":"empty"}),endIcon:i.getStyles({inputSizeEndIcon:o,inputVariantEndIcon:"default",inputVariantValueEndIcon:T?"filled":"empty"})};return d.jsxs(a.VStack,{width:h,className:q.root,children:[t&&d.jsxs(i.Box,{spacingBottom:"2",columnGap:"0.5",alignItems:"flex-end",className:q.label,children:[d.jsx("label",{htmlFor:k,children:(0,ee.default)(t)?t():t}),f&&d.jsx("span",{className:q.labelRequired,children:"*"})]}),d.jsxs(i.Box,{position:"relative",alignItems:"center",...P,className:q.inputWrapper,children:[d.jsx(ie,{icon:s,className:q.startIcon,iconProps:S?.startIcon}),d.jsx("input",{ref:z,id:k,type:n,value:T,required:f,readOnly:b,disabled:g,"aria-describedby":w,"aria-invalid":p,onChange:E,className:q.input,...N,...R}),r&&d.jsx(a.HStack,{alignItems:"center",gap:"1",children:d.jsx(se,{icon:r,className:q.endIcon,iconProps:S?.endIcon})})]}),d.jsx(te,{reduceMotion:A,layoutVariant:H,children:d.jsx(oe,{id:w,helpText:c,spacingTop:"2",size:o,isFilled:!!T,helperTextIcon:l})})]})});re.displayName="Input";var ce=({size:e="md",isFilled:t,...a})=>{const n={root:i.getStyles({inputSizeRoot:e,inputVariantRoot:"default",inputVariantValueRoot:t?"filled":"empty"})};return d.jsx(i.Box,{asChild:!0,spacingTop:"2",className:n.root,children:d.jsx(ne,{size:e,isFilled:t,...a})})};ce.displayName="InputHelpText";var le=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(t=>t(e))}static findOrCreate(t,a){let n=t.get(a);return n||(n=new e(a),t.set(a,n)),n}},ue=u.createContext(new Map),de=e=>{const t=u.useId();return e??`uds-radio-group-${t}`},pe={primary:"alert",secondary:"alert-secondary"},me=m.m.create(i.Box),he={layoutVariant:"smooth",layoutSpeed:"3"},xe={layoutVariant:"veryBouncy",layoutSpeed:"4"},fe=u.forwardRef(function({id:e,name:t,label:a,labelPosition:s="start",variant:r="primary",size:c="md",reduceMotion:l,value:p="",checked:h,defaultChecked:x,disabled:f,hasError:b,onChange:g,onFocus:y,onBlur:v,className:S,layerClassNames:I,...N},C){const j=u.useId(),k=e??`uds-radio-${j}`,w=u.useRef(null),{name:V,isControlled:R,checked:M,setGroupValue:P}=(({name:e,value:t,checked:a,defaultChecked:n})=>{const o=u.useContext(ue),i=o instanceof le,s=void 0!==a||i,r=de(e),c=u.useMemo(()=>i?o:le.findOrCreate(o,r),[o,i,r]),[l,d]=u.useState(c.value),p=c.name??r,m=u.useCallback(e=>{c.setValue(e),s||d(e)},[s,c]);return u.useEffect(()=>c.onChange(d),[c]),u.useEffect(()=>{!0===a&&m(t)},[a,t,m]),u.useEffect(()=>{if(i)return;const e=le.findOrCreate(o,p);return e.activeCount+=1,o.set(p,e),()=>{const e=o.get(p);e&&(e.activeCount-=1,0===e.activeCount&&o.delete(p))}},[o,i,p]),{name:p,isControlled:s,checked:s&&!i?a:void 0!==l?t===l:n??!1,setGroupValue:m}})({name:t,value:p,checked:h,defaultChecked:x}),[z,T]=u.useState(!1),[B,E]=u.useState(!1),H=u.useMemo(()=>b?pe[r]:r,[b,r]),A=u.useMemo(()=>!f&&z,[f,z]),O=u.useMemo(()=>!f&&!M&&B,[M,f,B]),q=u.useMemo(()=>O?.9:A?1.1:1,[A,O]),L=u.useMemo(()=>M?O?"opacity-55":"opacity-100":"opacity-0",[M,O]),_=u.useMemo(()=>!f&&(O&&!M||A&&M),[M,f,A,O]),F=u.useMemo(()=>({scale:q}),[q]),$=u.useMemo(()=>B?xe:he,[B]),W=u.useCallback(e=>{P(e.target.value),g?.(e)},[g,P]),D=u.useCallback(e=>{y?.(e)},[y]),U=u.useCallback(e=>{v?.(e)},[v]),G=u.useCallback(()=>{T(!0)},[]),X=u.useCallback(()=>{T(!1)},[]),J=u.useCallback(()=>{E(!0)},[]),K=u.useCallback(()=>{E(!1)},[]),Q=l?"always":"user",Z=m.useReducedMotion()||l?"duration-0":"duration-120",Y={root:i.getStyles({radioSizeRoot:c,radioVariantValueRoot:M?"checked":"unchecked",radioVariantRoot:H,display:"flex",flexDirection:"start"===s?"row":"row-reverse",alignItems:"center",className:i.cx([{"cursor-pointer":!f,"cursor-default":f,"opacity-50":f},S,I?.root])}),radio:i.getStyles({radioSizeRadio:c,radioVariantRadio:H,radioVariantValueRadio:M?"checked":"unchecked",className:i.cx(["border","uds-ring","uds-ring-within",Z,"transition-[background-color,border-color]","transition-shadow",I?.radio])}),radioCircle:i.getStyles({radioVariantRadioCircle:H,radioVariantValueRadioCircle:M?"checked":"unchecked",className:i.cx(["pointer-events-none","w-[8px]","h-[8px]",L,Z,"transition-opacity"])}),htmlRadio:i.cx("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:i.cx("start"===s?"text-start":"text-end",I?.label)},ee=a?m.m.label:m.m.div;return d.jsx(o.SpringMotionConfig,{reducedMotion:Q,...$,children:d.jsxs(ee,{className:Y.root,"data-testid":"container",onHoverStart:G,onHoverEnd:X,onTapStart:J,onTap:K,onTapCancel:K,tabIndex:-1,children:[d.jsxs(me,{position:"relative",borderRadius:"full",alignItems:"center",justifyContent:"center",flex:"none",className:Y.radio,animate:F,insetShadow:_?"lg-invert":"none",children:[d.jsx("input",{type:"radio",tabIndex:0,...N,ref:e=>{w.current=e,"function"==typeof C?C(e):null!==C&&(C.current=e)},onFocus:D,onBlur:U,id:k,name:V,value:p,disabled:f,"aria-invalid":b,onChange:W,...R?{checked:M}:{defaultChecked:x},className:Y.htmlRadio}),d.jsx(i.Box,{borderRadius:"full",className:Y.radioCircle})]}),a&&d.jsx(n.FormLabel,{as:"div",variant:"inherit",color:"inherit",label:a,className:Y.label})]})})});fe.displayName="Radio";var be=i.createSlot(),ge=class extends le{onChangeCb;isControlled;constructor(e,t){super(e),this.isControlled=t}setValue(e,t=!1){this.isControlled&&!t?this.onChangeCb?.(e):super.setValue(e)}},ye=u.forwardRef(function({asChild:e,name:t,value:a,defaultValue:n,onChange:o,...i},s){const r=void 0!==a,c=de(t),l=u.useMemo(()=>{const e=new ge(c,r);return e.value=r?a:n,e},[n,r,c,a]);u.useEffect(()=>{l.onChangeCb=o},[o,l]),u.useEffect(()=>{r&&l.setValue(a,!0)},[r,l,a]),u.useEffect(()=>l.onChange(e=>o?.(e)),[o,l]);const p=e?be:"div";return d.jsx(ue.Provider,{value:l,children:d.jsx(p,{role:"radiogroup",ref:s,...i})})});ye.displayName="RadioGroupProvider";var ve={md:{isOnX:20},sm:{isOnX:12}},Se=m.m.create(i.Box),Ie={layoutVariant:"bouncy",layoutSpeed:"4"},Ne=u.forwardRef(function({id:e,isOn:t,defaultIsOn:a,onChange:s,label:r,labelPosition:c="start",size:l="md",onIcon:p,offIcon:h,reduceMotion:x,disabled:f,required:b,onFocus:g,onBlur:y,className:v,layerClassNames:S,...I},N){const C=u.useId(),j=e??`uds-input-${C}`,k=u.useRef(null),w=void 0!==t,[V,R]=u.useState(w?t:a),[M,P]=u.useState(!1),z=u.useMemo(()=>!f&&M,[f,M]),{isOnX:T}=ve[l],B=u.useMemo(()=>({initial:{scale:1,x:V?T:0},animate:{scale:z?1.05:1,x:V?T:0}}),[z,V,T]),E=u.useCallback(e=>{s?.(e),w||R(e.target.checked)},[w,s]),H=u.useCallback(e=>{g?.(e)},[g]),A=u.useCallback(e=>{y?.(e)},[y]),O=u.useCallback(()=>{P(!0)},[]),q=u.useCallback(()=>{P(!1)},[]),L=x?"always":"user",_=m.useReducedMotion()||x?"duration-0":"duration-120";u.useEffect(()=>{w&&R(t)},[t,w]);const F={root:i.getStyles({switchSizeRoot:l,switchVariantRoot:"default",switchVariantActiveRoot:V?"on":"off",display:"flex",flexDirection:"start"===c?"row":"row-reverse",alignItems:"center",className:i.cx("group",{"cursor-pointer":!f,"cursor-default":f,"opacity-50":f},S?.root,v)}),switch:i.getStyles({switchVariantSwitch:"default",switchSizeSwitch:l,switchVariantActiveSwitch:V?"on":"off",borderRadius:"full",position:"relative",alignItems:"center",className:i.cx("uds-ring","uds-ring-within",_,"transition-[background-color,box-shadow]",S?.switch)}),handle:i.getStyles({switchSizeHandle:l,className:i.cx("relative","pointer-events-none","rounded-full","overflow-hidden",S?.handle)}),handleCircle:i.getStyles({switchVariantActiveHandle:V?"on":"off",switchVariantHandle:"default",className:i.cx("absolute","top-0","left-0","right-0","bottom-0","opacity-95 group-hover:opacity-100",_,"transition-[background-color,box-shadow,opacity]")}),handleIcon:i.getStyles({switchSizeHandleIcon:l,switchVariantHandleIcon:"default",switchVariantActiveHandleIcon:V?"on":"off",className:i.cx("absolute","opacity-0","top-1/2","left-1/2","transform","translate-x-[-50%]","translate-y-[-50%]",_,"transition-opacity")}),htmlCheckbox:i.cx("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:i.cx("start"===c?"text-start":"text-end",S?.label)},$=r?m.m.label:m.m.div;return d.jsx(o.SpringMotionConfig,{reducedMotion:L,...Ie,children:d.jsxs($,{className:F.root,"data-testid":"container",onHoverStart:O,onHoverEnd:q,tabIndex:-1,children:[d.jsxs(Se,{className:F.switch,children:[d.jsx("input",{type:"checkbox",tabIndex:0,...I,ref:e=>{k.current=e,"function"==typeof N?N(e):null!==N&&(N.current=e)},onFocus:H,onBlur:A,id:j,disabled:f,required:b,checked:w?V:void 0,defaultChecked:w?void 0:a,onChange:E,className:F.htmlCheckbox,style:{}}),d.jsxs(Se,{className:F.handle,...B,children:[d.jsx(i.Box,{className:F.handleCircle}),p&&d.jsx(i.IconSlot,{icon:p,iconProps:{variant:"fill",size:"sm"},"data-testid":"on-icon",className:i.cx(F.handleIcon,V?"opacity-100":"opacity-0")}),h&&d.jsx(i.IconSlot,{icon:h,iconProps:{variant:"fill",size:"sm"},"data-testid":"off-icon",className:i.cx(F.handleIcon,V?"opacity-0":"opacity-100")})]})]}),r&&d.jsx(n.FormLabel,{as:"div",variant:"inherit",color:"inherit",required:b,label:r,className:F.label})]})})});Ne.displayName="Switch",Object.defineProperty(exports,"Pressable",{enumerable:!0,get:function(){return t.Pressable}}),Object.defineProperty(exports,"SpringMotionConfig",{enumerable:!0,get:function(){return o.SpringMotionConfig}}),Object.defineProperty(exports,"Menu",{enumerable:!0,get:function(){return h.Menu}}),exports.Avatar=k,exports.AvatarIcon=N,exports.AvatarImage=j,exports.AvatarText=C,exports.Badge=w,exports.Button=H,exports.Checkbox=$,exports.Chip=Z,exports.ChipButton=X,exports.ChipDismissible=J,exports.ChipLink=K,exports.ChipToggle=Q,exports.IconButton=Y,exports.Input=re,exports.InputHelpText=ce,exports.Radio=fe,exports.RadioGroupProvider=ye,exports.Switch=Ne;

package/dist/client/index.d.cts

@@ -0,0 +1,534 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { cZ as UniversalAvatarIconProps, x as IconPropsWithSVGProps, d0 as UniversalAvatarTextProps, c_ as UniversalAvatarImageProps, y as ImagePropsWithImgProps, d1 as UniversalBadgeProps, d2 as UniversalButtonProps, d3 as UniversalCheckboxProps, d4 as UniversalChipBaseProps, d8 as UniversalChipProps, d5 as UniversalChipButtonProps, d6 as UniversalChipDismissibleProps, d7 as UniversalChipLinkProps, d9 as UniversalChipToggleProps, da as UniversalIconButtonProps, de as UniversalInputProps, dc as UniversalIconSlot, dg as UniversalRadioProps, df as UniversalRadioGroupProps, b$ as MotionVariant, c0 as MotionVariantSpeed, c as UniversalSwitchProps } from '../types-gGaZxCMr.cjs';
+import { a as TextProps } from '../Text-CJRvqui_.cjs';
+import * as react from 'react';
+import react__default, { ForwardRefExoticComponent, InputHTMLAttributes, PropsWithChildren } from 'react';
+import { HTMLMotionProps, MotionConfigProps, LazyFeatureBundle } from 'motion/react';
+import { B as BoxProps } from '../Box-BWU5UmHC.cjs';
+export { a as Pressable, P as PressableProps } from '../Pressable-5JJUWRN1.cjs';
+export { Menu, MenuContentProps, MenuDividerProps, MenuItemCheckboxProps, MenuItemProps, MenuPlacement, MenuProviderProps, MenuTriggerProps } from '@yahoo/uds/client/Menu';
+import '@yahoo/uds-icons/types';
+import 'type-fest';
+
+type DataAttributes$4 = {
+    [name: `data-${string}`]: string;
+};
+interface AvatarIconProps extends UniversalAvatarIconProps {
+    /** Props to be passed into various slots within the component. */
+    slotProps?: {
+        icon?: Partial<IconPropsWithSVGProps & DataAttributes$4>;
+    };
+}
+/**
+ * **AvatarIcon Component**
+ *
+ * Renders an Avatar with an icon representation.
+ *
+ * @param props - Props for icon variant.
+ * @returns The AvatarIcon element.
+ */
+declare const AvatarIcon: {
+    ({ size, variant, customSize, icon, slotProps, className, ...props }: AvatarIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type DataAttributes$3 = {
+    [name: `data-${string}`]: string;
+};
+interface AvatarTextProps extends UniversalAvatarTextProps {
+    /** Props to be passed into various slots within the component. */
+    slotProps?: {
+        text?: Partial<TextProps & DataAttributes$3>;
+    };
+}
+/**
+ * **AvatarText Component**
+ *
+ * Renders an Avatar with text (initials) representation.
+ *
+ * @param props - Props for text variant.
+ * @returns The AvatarText element.
+ */
+declare const AvatarText: {
+    ({ size, variant, name, initials, customSize, abbreviationStrategy, className, slotProps, ...props }: AvatarTextProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type DataAttributes$2 = {
+    [name: `data-${string}`]: string;
+};
+interface AvatarImageProps extends UniversalAvatarImageProps {
+    /** Props to be passed into various slots within the component. */
+    slotProps?: {
+        image?: Partial<Omit<ImagePropsWithImgProps, 'src' | 'srcSet' | 'alt' | 'className' | 'height' | 'width'> & DataAttributes$2>;
+    } & AvatarIconProps['slotProps'] & AvatarTextProps['slotProps'];
+}
+/**
+ * **AvatarImage Component**
+ *
+ * Renders an Avatar with an image. If the image fails to load, it falls back first to
+ * a text representation (if a name or initials are provided) and then to an icon.
+ *
+ * @param props - Props for image variant.
+ * @returns The AvatarImage element.
+ */
+declare const AvatarImage: {
+    ({ size, variant, src, srcSet, customSize, alt, abbreviationStrategy, fallback, className, imageProps, slotProps, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type AvatarProps = AvatarImageProps;
+/**
+ * **👤 Avatar Component**
+ *
+ * @description The avatar component visually represents a person or an organization within an interface. It helps users quickly identify individuals or entities through images, icons, or text. Commonly used in user profiles, comments, and activity feeds, avatars create a recognizable and consistent visual identity across the system. With standardized sizes, variants, and configurable options, the component ensures flexibility while maintaining design cohesion and accessibility.
+ * @usage The Avatar component should be used whenever you need to visually represent a user's identity in your application. This includes places like profile headers, user lists, chat messages, and comment sections. It's ideal for providing a consistent visual cue for users, whether by displaying a profile image, generating initials from a name, or falling back to a default icon when no image is available.
+ * @param props - Combined Avatar props.
+ * @returns The Avatar element.
+ * @componentType Client component
+ * @example ```tsx
+ * import { Avatar } from '@yahoo/uds';
+ *
+ * <Avatar
+ *    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"
+ *    alt="Jane Doe"
+ *    fallback="J"
+ * />
+ * ```
+ *
+ */
+declare const Avatar: {
+    (props: AvatarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type HtmlDivProps$5 = react__default.HTMLAttributes<HTMLDivElement>;
+interface BadgeProps extends HtmlDivProps$5, UniversalBadgeProps {
+}
+/**
+ * **⚙️️ A badge.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Badges show notifications, counts, or status information on navigation items and icons.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/badge Badge Docs} for more info
+ *
+ * @usage
+ * - ???
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Badge } from "@yahoo/uds";
+ *
+ * <Badge>Label</Badge>
+ *```
+ *
+ * @related [Chip](https://uds.build/docs/components/chip).
+ **/
+declare const Badge: react__default.ForwardRefExoticComponent<BadgeProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type HtmlButtonProps$1 = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<react__default.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+interface ButtonProps extends HtmlButtonProps$1, UniversalButtonProps {
+}
+/**
+ * **🖲️ A button element that can be used to trigger an action**
+ *
+ * @componentType Client component
+ *
+ * @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.
+ *
+ * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Button, HStack } from "@yahoo/uds";
+ *
+ * export function Demo() {
+ *   return (
+ *     <HStack gap="2">
+ *       <Button onClick={console.log}>Save</Button>
+ *       <Button variant="secondary" onClick={console.log}>Cancel</Button>
+ *     </HStack>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Buttons should be used to clearly indicate and initiate actions that users can take.
+ *
+ * @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
+ **/
+declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
+
+type NativeInputProps$3 = Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color'>;
+interface CheckboxProps extends NativeInputProps$3, UniversalCheckboxProps {
+    layerClassNames?: {
+        root?: string;
+        checkbox?: string;
+        label?: string;
+    };
+}
+/**
+ * **⚙️️ An checkbox.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A checkbox component allows users to select one or multiple options from a set. It represents a binary state, typically as checked or unchecked, and optionally includes a third "indeterminate" state to indicate partial selection.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+ *
+ * @usage
+ * - Forms: checkbox
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Checkbox } from "@yahoo/uds";
+ *
+ * <Checkbox label="Name" required />
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
+ **/
+declare const Checkbox: react__default.ForwardRefExoticComponent<CheckboxProps & react__default.RefAttributes<HTMLInputElement>>;
+
+type HtmlDivProps$4 = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+type DataAttributes$1 = {
+    [name: `data-${string}`]: string;
+};
+interface ChipBaseProps extends HtmlDivProps$4, Omit<UniversalChipBaseProps, 'variant'> {
+    /** Props to be passed into various slots within the component. */
+    slotProps?: {
+        startIcon?: Partial<IconPropsWithSVGProps & DataAttributes$1>;
+        endIcon?: Partial<IconPropsWithSVGProps & DataAttributes$1>;
+        text?: Partial<TextProps & DataAttributes$1>;
+    };
+}
+
+type HtmlDivProps$3 = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+interface ChipProps extends UniversalChipProps, HtmlDivProps$3 {
+    slotProps?: ChipBaseProps['slotProps'] & {
+        anchor: Omit<react__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;
+    };
+}
+/**
+ * **⚙️️ A chip.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Chips help people make selections, filter content, link out to other spaces or trigger actions. These actions are contextually driven and are not persistent across the product experiences differing them from buttons.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/chip Chip Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Chip } from "@yahoo/uds";
+ *
+ * <Chip>Label</Chip>
+ *```
+ *
+ * @related [Badge](https://uds.build/docs/components/badge), [Link](https://uds.build/docs/components/link).
+ **/
+declare const Chip: react__default.ForwardRefExoticComponent<ChipProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type HtmlDivProps$2 = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+interface ChipButtonProps extends HtmlDivProps$2, Omit<UniversalChipButtonProps, 'type'> {
+    slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipButton: react__default.ForwardRefExoticComponent<ChipButtonProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type HtmlDivProps$1 = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+interface ChipDismissibleProps extends HtmlDivProps$1, Omit<UniversalChipDismissibleProps, 'type'> {
+    slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipDismissible: react__default.ForwardRefExoticComponent<ChipDismissibleProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type HtmlAnchorProps = Omit<react__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'type'>;
+interface ChipLinkProps extends HtmlAnchorProps, Omit<UniversalChipLinkProps, 'type'> {
+    slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipLink: react__default.ForwardRefExoticComponent<ChipLinkProps & react__default.RefAttributes<HTMLAnchorElement>>;
+
+type HtmlDivProps = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children' | 'label' | 'onToggle'>;
+interface ChipToggleProps extends UniversalChipToggleProps, HtmlDivProps {
+    slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipToggle: react__default.ForwardRefExoticComponent<ChipToggleProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
+interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
+}
+/**
+ * **⚙️️ An icon button element that can be used to trigger an action**
+ *
+ * @componentType Client component
+ *
+ * @description An icon button is essentially an interactive icon. They should be used to display an icon which, when clicked, allows the user to trigger an action. Icon buttons provide additional features such hover states, focus states, and pressable functionality.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/icon-button IconButton Docs} for more info
+ *
+ * @usage
+ * - When you need a button that is represented by an icon rather than text. This is useful in compact spaces, toolbars, or when the action is commonly understood through a visual symbol.
+ * - If you need a button that is used to trigger a non-critical action.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { IconButton } from "@yahoo/uds";
+ * import { AddFolder } from "@yahoo/uds-icons";
+ *
+ * <IconButton name={AddFolder} variant="primary" />
+ * ```
+ *
+ * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
+ *
+ **/
+declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+type HtmlInputProps = React.InputHTMLAttributes<HTMLInputElement> & HTMLMotionProps<'input'>;
+type NativeInputProps$2 = Omit<HtmlInputProps, 'height' | 'size' | 'width' | 'color' | 'required'>;
+type DataAttributes = {
+    [name: `data-${string}`]: string;
+};
+interface InputProps extends NativeInputProps$2, UniversalInputProps {
+    /** The type of the input element. Reduced set of options from the HTML input type attribute.
+     * @default 'text'
+     */
+    type?: Exclude<NativeInputProps$2['type'], 'button' | 'checkbox' | 'color' | 'file' | 'radio' | 'range' | 'reset' | 'submit' | 'search'>;
+    /** Props to be passed into various slots within the component. */
+    slotProps?: {
+        input?: Partial<InputHTMLAttributes<HTMLInputElement> & DataAttributes>;
+        inputWrapper?: Partial<BoxProps & DataAttributes>;
+        startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+        endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    };
+}
+/**
+ * **📦 An input that allows users to enter text and collect data.**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * An input field is a component that takes text typed into it. It can also serve as a way to display a selection and trigger a dropdown menu. Inputs are interactive elements that users can click, tap, or otherwise engage with to collect data and open dropdowns, or both.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
+ *
+ * @usage
+ * - Forms: For collecting data like names, emails, passwords, etc. (e.g., sign-up, login, or contact forms).
+ * - Search Bars: Allowing users to enter search queries to find content.
+ * - Filters/Settings: When users need to specify preferences, like selecting a date or adjusting a number value.
+ * - Feedback/Comments: Letting users leave reviews, comments, or feedback.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Input } from "@yahoo/uds";
+ *
+ * <Input label="Name" placeholder="Enter your name" required />
+ *```
+ *
+ * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
+ **/
+declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+interface InputHelpTextInternalProps extends PropsWithChildren {
+    /** Icon to render at the start of the content */
+    startIcon?: UniversalIconSlot;
+    /** Icon to render at the end of the content */
+    endIcon?: UniversalIconSlot;
+    /**
+     * Props to pass to the start/end icon. If color is not provided, the icons
+     * will inherit the color from the `color` prop.
+     */
+    iconProps?: Pick<IconPropsWithSVGProps, 'color' | 'size' | 'variant'>;
+    size?: InputProps['size'];
+    isFilled?: boolean;
+}
+
+type InputHelpTextProps = InputHelpTextInternalProps;
+/**
+ * **📦 A component that displays helper text for input fields.**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A component that displays helper text for input fields.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
+ *
+ * @usage
+ * - Help text that isn't tied to a specific Input.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { InputHelpText } from "@yahoo/uds";
+ *
+ * <InputHelpText>
+ *   This is some helper text for the input field.
+ * </InputHelpText>
+ *```
+ *
+ * @related [Input](https://uds.build/docs/components/input).
+ **/
+declare const InputHelpText: {
+    ({ size, isFilled, ...props }: InputHelpTextProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type NativeInputProps$1 = Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
+interface RadioProps extends NativeInputProps$1, UniversalRadioProps {
+    layerClassNames?: {
+        root?: string;
+        radio?: string;
+        label?: string;
+    };
+}
+/**
+ * **⚙️️ A Radio.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A radio component allows users to select one or multiple options from a set. Unlike checkbox, radio buttons cannot have multiple selected in a form, allowing only 1 selection in a group. It represents a binary state, typically as selected or unselected.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+ *
+ * @usage
+ * - Forms: Radio
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Radio } from "@yahoo/uds";
+ *
+ * <Radio label="Name" />
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/Radio).
+ **/
+declare const Radio: react__default.ForwardRefExoticComponent<RadioProps & react__default.RefAttributes<HTMLInputElement>>;
+
+type NativeDivProps = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;
+interface RadioGroupProviderProps extends UniversalRadioGroupProps, NativeDivProps {
+}
+/**
+ * **⚙️️ A RadioGroup that improves accessibility and provides a central component for state manangement.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Provides a radio group
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+ *
+ * @usage
+ * - Forms: RadioGroup
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { RadioGroup } from "@yahoo/uds";
+ *
+ * <RadioGroup name="items" value="1">
+ *   <Radio value="1" label="One" />
+ *   <Radio value="2" label="Two" />
+ * </RadioGroup>
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/radio).
+ **/
+declare const RadioGroupProvider: react__default.ForwardRefExoticComponent<RadioGroupProviderProps & react__default.RefAttributes<HTMLDivElement>>;
+
+interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | 'reducedMotion'> {
+    /**
+     * The layout variant to use for the motion config.
+     * @default 'subtle'
+     */
+    layoutVariant?: MotionVariant;
+    /**
+     * The layout speed to use for the motion config.
+     * @default '3'
+     */
+    layoutSpeed?: MotionVariantSpeed;
+    /**
+     * The color variant to use for the motion config.
+     * @default 'smooth'
+     */
+    colorVariant?: MotionVariant;
+    /**
+     * The color speed to use for the motion config.
+     * @default '3'
+     */
+    colorSpeed?: MotionVariantSpeed;
+    /**
+     * A lazy feature bundle to load additional features.
+     * This is useful for reducing bundle size by loading only the necessary features.
+     */
+    loadFeatures?: LazyFeatureBundle;
+}
+/**
+ * **🎬 Spring Motion Config to define motion animations for all UDS components**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * The SpringConfig component provides a way to configure the spring animations for the entire application.
+ * This component provides a way to use uds motion configs with Framer Motion.
+ */
+declare function SpringMotionConfig({ children, reducedMotion, loadFeatures, layoutVariant, layoutSpeed, colorVariant, colorSpeed, }: SpringMotionConfigProps): string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+declare namespace SpringMotionConfig {
+    var displayName: string;
+}
+
+type NativeInputProps = Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
+interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
+    layerClassNames?: {
+        root?: string;
+        switch?: string;
+        handle?: string;
+        label?: string;
+    };
+}
+/**
+ * **⚙️️ An switch.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
+ *
+ * @usage
+ * - Forms: switch
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Switch } from "@yahoo/uds";
+ *
+ * <Switch label="Name" required />
+ *```
+ *
+ * @related [Checkbox](https://uds.build/docs/components/checkbox).
+ **/
+declare const Switch: react__default.ForwardRefExoticComponent<SwitchProps & react__default.RefAttributes<HTMLInputElement>>;
+
+export { Avatar, AvatarIcon, type AvatarIconProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarText, type AvatarTextProps, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipButton, type ChipButtonProps, ChipDismissible, type ChipDismissibleProps, ChipLink, type ChipLinkProps, type ChipProps, ChipToggle, type ChipToggleProps, IconButton, type IconButtonProps, Input, InputHelpText, type InputHelpTextProps, type InputProps, Radio, RadioGroupProvider, type RadioGroupProviderProps, type RadioProps, SpringMotionConfig, type SpringMotionConfigProps, Switch, type SwitchProps };