@undp/design-system-react/dist/SegmentedControl.cjs

React based design system for UNDP

Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./utils-Dd9-5CFr.cjs"),t=require("./dist-BZMXZCSu.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=t.t(`inline-flex rounded-base bg-surface`,{variants:{variant:{normal:`border-2 border-foreground bg-background`,light:`border-0`},size:{sm:``,base:``},rounded:{base:`rounded-base`,sm:`rounded-sm`,md:`rounded-md`,lg:`rounded-lg`,xl:`rounded-xl`,"2xl":`rounded-2xl`,full:`rounded-full`}},compoundVariants:[{variant:`normal`,size:`sm`,class:`p-0`},{variant:`normal`,size:`base`,class:`p-0`},{variant:`light`,size:`sm`,class:`p-[3px]`},{variant:`light`,size:`base`,class:`p-[5px]`}],defaultVariants:{size:`base`,variant:`normal`,rounded:`base`}}),a=t.t(`disabled:opacity-disabled disabled:cursor-not-allowed`,{variants:{variant:{normal:``,light:``},color:{primary:``,secondary:``,tertiary:``,quaternary:``,foreground:``},rounded:{base:`rounded-base`,sm:`rounded-sm`,md:`rounded-md`,lg:`rounded-lg`,xl:`rounded-xl`,"2xl":`rounded-2xl`,full:`rounded-full`}},compoundVariants:[{variant:`normal`,color:`primary`,class:`bg-primary text-content-reverse`},{variant:`normal`,color:`secondary`,class:`bg-secondary text-content-reverse`},{variant:`normal`,color:`tertiary`,class:`bg-tertiary text-content-reverse`},{variant:`normal`,color:`quaternary`,class:`bg-quaternary text-content-primary`},{variant:`normal`,color:`foreground`,class:`font-bold bg-foreground text-content-reverse`},{variant:`light`,color:`primary`,class:`font-bold bg-background text-primary`},{variant:`light`,color:`secondary`,class:`font-bold bg-background text-secondary`},{variant:`light`,color:`tertiary`,class:`font-bold bg-background text-tertiary`},{variant:`light`,color:`quaternary`,class:`font-bold bg-background text-quaternary`},{variant:`light`,color:`foreground`,class:`font-bold bg-background text-foreground`}],defaultVariants:{color:`primary`,rounded:`base`,variant:`normal`}}),o=t.t(`text-content-primary hover:bg-surface-hover disabled:hover:bg-transparent disabled:hover:text-inherit disabled:cursor-not-allowed disabled:opacity-25`,{variants:{variant:{normal:``,light:``},color:{primary:``,secondary:``,tertiary:``,quaternary:``,foreground:``},rounded:{base:`rounded-base`,sm:`rounded-sm`,md:`rounded-md`,lg:`rounded-lg`,xl:`rounded-xl`,"2xl":`rounded-2xl`,full:`rounded-full`}},compoundVariants:[{variant:`normal`,color:`primary`,class:`hover:bg-primary-light`},{variant:`normal`,color:`secondary`,class:`hover:bg-secondary-light`},{variant:`normal`,color:`tertiary`,class:`hover:bg-tertiary-light`},{variant:`normal`,color:`quaternary`,class:`hover:bg-quaternary-hover`},{variant:`normal`,color:`foreground`,class:`hover:bg-surface-hover`},{variant:`light`,color:`primary`,class:`hover:text-primary disabled:hover:text-inherit`},{variant:`light`,color:`secondary`,class:`hover:text-secondary disabled:hover:text-inherit`},{variant:`light`,color:`tertiary`,class:`hover:text-tertiary disabled:hover:text-inherit`},{variant:`light`,color:`quaternary`,class:`hover:text-quaternary disabled:hover:text-inherit`},{variant:`light`,color:`foreground`,class:`hover:text-foreground disabled:hover:text-inherit`}],defaultVariants:{color:`primary`,rounded:`base`,variant:`normal`}});function s(t){let{options:s,defaultValue:c,onValueChange:l,className:u,size:d,variant:f,color:p,value:m,disabled:h,rounded:g,buttonStyle:_,classNames:v}=t,[y,b]=(0,n.useState)(m||c||s[0].value),x=e=>{b(e),l?.(e)},S=(0,n.useEffectEvent)(e=>{b(e||c||s[0].value)});return(0,n.useEffect)(()=>{S(m)},[m]),(0,r.jsx)(`div`,{className:e.t(i({size:d,variant:f,rounded:g}),u,v?.control),children:s.map(t=>(0,r.jsx)(`button`,{disabled:h||t.disabled,type:`button`,onClick:()=>x(t.value),className:e.t(`rounded-sm px-4 py-2 text-sm transition-all duration-200`,y===t.value?a({color:p,rounded:g,variant:f}):o({color:p,rounded:g,variant:f}),v?.items,y===t.value&&v?.active),style:_?.items||y===t.value&&_?.active?{..._?.items||{},...y===t.value?_?.active:{}}:void 0,children:t.label},t.value))})}exports.SegmentedControl=s;
//# sourceMappingURL=SegmentedControl.cjs.map