@unicity/design-system/dist/TextSize-DvNcsDtU.cjs

A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support

var __defProp=Object.defineProperty;var __name=(target,value)=>__defProp(target,"name",{value,configurable:!0});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const index=require("./index-2aYpps03.cjs"),React=require("react"),material=require("@mui/material"),iconsMaterial=require("@mui/icons-material"),reactI18next=require("react-i18next"),TextSize=__name(({compact=!1,onEvent})=>{const{t}=reactI18next.useTranslation(),{settings,updateSettings}=index.useTheme(),fontSize=settings.fontSize,{resolvedMode}=index.useTheme(),accessibilityMode=settings.accessibilityMode,[overrideState,setOverrideState]=React.useState({isActive:!1,scale:1,overrideCount:0,excludedElements:0}),[popoverOpen,setPopoverOpen]=React.useState(!1),[anchorEl,setAnchorEl]=React.useState(null);React.useEffect(()=>index.fontOverrideService.subscribe(setOverrideState),[]);const logEvent=__name(data=>{onEvent?.(data)},"logEvent"),getPercentageFromSliderValue=__name(sliderValue=>{const basePercentages=[87.5,100,112.5,125],categoryIndex=Math.floor(sliderValue/5),stepInCategory=sliderValue%5;if(categoryIndex>=basePercentages.length-1)return 125;const startPercentage=basePercentages[categoryIndex],stepSize=(basePercentages[categoryIndex+1]-startPercentage)/5;return startPercentage+stepInCategory*stepSize},"getPercentageFromSliderValue"),currentSliderValue=__name(scale=>{const percentage=scale*100;return percentage<=87.5?0:percentage<=100?Math.round((percentage-87.5)/2.5):percentage<=112.5?Math.round(5+(percentage-100)/2.5):percentage<=125?Math.round(10+(percentage-112.5)/2.5):15},"getSliderValueFromScale")(fontSize.scale),currentPercentage=Math.round(fontSize.scale*100),getCategoryFromSliderValue=__name(sliderValue=>{const categoryIndex=Math.floor(sliderValue/5),categories=[t("text_size.size_labels.small"),t("text_size.size_labels.medium"),t("text_size.size_labels.large"),t("text_size.size_labels.extra_large")];return categories[Math.min(categoryIndex,categories.length-1)]||categories[categories.length-1]},"getCategoryFromSliderValue"),getPercentageForLevel=__name(level=>({small:87.5,medium:100,large:112.5,"extra-large":125})[level],"getPercentageForLevel"),isDarkModeHighContrast=resolvedMode==="dark"&&accessibilityMode==="high-contrast";return index.jsxs(index.Box,{children:[index.jsxs(index.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",borderColor:"divider",borderRadius:1,backgroundColor:"background.paper",mb:3,gap:1.5},children:[index.jsx(index.Box,{sx:__name(theme=>({p:.75,borderRadius:1,backgroundColor:"primary.main",color:"primary.contrastText",display:"flex",alignItems:"center",justifyContent:"center","& .MuiSvgIcon-root":{fill:`${theme.palette.primary.contrastText} !important`,color:`${theme.palette.primary.contrastText} !important`,filter:isDarkModeHighContrast?"brightness(0)":resolvedMode==="dark"?"brightness(0) invert(0)":"brightness(0) invert(1)"}}),"sx"),children:index.jsx(iconsMaterial.FontDownload,{fontSize:"small"})}),index.jsxs(index.Box,{sx:{flex:1},children:[index.jsx(index.Typography,{sx:{fontSize:"calc(14px * var(--unicity-font-scale, 1))",fontWeight:600},children:t("text_size.title")}),index.jsx(index.Typography,{sx:{fontSize:"calc(12px * var(--unicity-font-scale, 1))",color:"text.secondary",mt:.25},children:t("text_size.description")})]}),index.jsx(index.IconButton,{size:"small",sx:{alignSelf:"flex-start"},onClick:__name(event=>{setAnchorEl(event.currentTarget),setPopoverOpen(!popoverOpen)},"onClick"),children:index.jsx(iconsMaterial.Info,{fontSize:"small"})}),index.jsx(material.Popover,{open:popoverOpen,anchorEl,onClose:__name(()=>{setPopoverOpen(!1),setAnchorEl(null)},"onClose"),anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"},sx:{"& .MuiPopover-paper":{mt:1,maxWidth:300}},children:index.jsx(material.Paper,{sx:{p:1.5,backgroundColor:"grey.800",color:"common.white",fontSize:"0.75rem",borderRadius:1,boxShadow:3},children:index.jsx(index.Typography,{variant:"body2",sx:{color:"inherit",fontSize:"inherit"},children:t("text_size.tooltip")})})})]}),index.jsx(index.Box,{sx:{p:3,border:"1px solid",borderColor:"divider",borderRadius:1,backgroundColor:"background.paper",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.08)",mb:3,paddingBottom:"50px"},children:index.jsxs(index.Box,{px:1,mb:0,children:[index.jsx(index.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:index.jsxs(index.Box,{sx:{display:"flex",flexDirection:"column",gap:.5},children:[index.jsxs(index.Typography,{variant:"body2",fontWeight:600,sx:{color:"primary.main"},children:["Current Size: ",currentPercentage,"% (",getCategoryFromSliderValue(currentSliderValue),")"]}),index.jsxs(index.Typography,{variant:"caption",sx:{color:"text.secondary",fontSize:"0.7rem"},children:["Scale: ",fontSize.scale.toFixed(3)," ",overrideState.isActive?"• Override Active":"• Override Inactive"]})]})}),index.jsx(index.Slider,{value:currentSliderValue,onChange:__name(newValue=>{const sliderValue=newValue,newPercentage=getPercentageFromSliderValue(sliderValue),newScale=newPercentage/100,closestLevel=newScale<=.9375?"small":newScale<=1.0625?"medium":newScale<=1.1875?"large":"extra-large";logEvent({type:"font_size_change",value:newScale,percentage:newPercentage,level:closestLevel,sliderValue}),updateSettings({...settings,fontSize:{level:closestLevel,scale:newScale}})},"onChange"),min:0,max:15,step:1,marks:[0,5,10,15].map(value=>{const category=getCategoryFromSliderValue(value);return{value,label:category}}),valueLabelDisplay:"off",sx:{"& .MuiSlider-mark":{backgroundColor:"text.secondary",height:16,width:2,opacity:.5,"&.MuiSlider-markActive":{backgroundColor:"primary.main",opacity:1}},"& .MuiSlider-markLabel":{marginTop:1,textAlign:"center",fontSize:{xs:"0.55rem",sm:"0.65rem",md:"0.75rem"},fontWeight:500,whiteSpace:"nowrap",'&[data-index="0"]':{transform:"translateX(0%)",textAlign:"left"},'&[data-index="3"]':{transform:"translateX(-100%)",textAlign:"right"}}}}),index.jsx(index.Box,{sx:{position:"relative",px:1,mt:-1,mb:1},children:[0,5,10,15].map((value,index$1)=>{const percentage=Math.round(getPercentageFromSliderValue(value)),markPosition=value/15*100;return index.jsx(index.Box,{sx:{position:"absolute",left:`${markPosition}%`,transform:index$1===0?"translateX(0%)":index$1===3?"translateX(-100%)":"translateX(-50%)",top:"10px"},children:index.jsxs(index.Box,{sx:{display:"inline-block",backgroundColor:"primary.main",color:"primary.contrastText",borderRadius:"12px",px:1,py:.25,fontSize:{xs:"0.55rem",sm:"0.65rem",md:"0.75rem"},fontWeight:600,minWidth:"32px",textAlign:"center",boxShadow:"0 2px 4px rgba(0,0,0,0.1)"},children:[percentage,"%"]})},value)})})]})}),!compact&&index.jsxs(index.Box,{mt:2,p:2,children:[index.jsxs(index.Typography,{sx:{fontSize:"var(--unicity-font-12px, 12px)"},children:[t("text_size.preview")," & ",t("common.guidelines")]}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("text_size.interface_elements")}),index.jsx(index.Box,{sx:{display:"flex",flexDirection:"column",gap:2,p:2,backgroundColor:"background.paper",border:"1px solid",borderColor:"divider",borderRadius:1},children:index.jsxs(index.Box,{children:[index.jsx(index.Typography,{variant:"h4",sx:{mb:1,color:"text.primary"},children:t("text_size.heading_text")}),index.jsx(index.Typography,{variant:"h6",sx:{mb:1,color:"text.primary"},children:t("text_size.subheading_text")}),index.jsx(index.Typography,{variant:"body1",sx:{mb:1,color:"text.primary"},children:t("text_size.body_text")}),index.jsx(index.Typography,{variant:"caption",sx:{color:"text.secondary"},children:t("text_size.caption_text")})]})})]}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("text_size.reading_sample")}),index.jsxs(index.Box,{sx:{p:2,backgroundColor:"background.paper",border:"1px solid",borderColor:"divider",borderRadius:1},children:[index.jsxs(index.Typography,{variant:"body1",sx:{lineHeight:1.6,mb:1},children:[index.jsx("strong",{children:t("text_size.sample_article")})," ",t("text_size.sample_paragraph")]}),index.jsxs(index.Typography,{variant:"body2",sx:{color:"text.secondary"},children:[t("text_size.current_font_size"),": ",fontSize.level]})]})]}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("text_size.text_samples")}),index.jsx(index.Box,{sx:{display:"grid",gridTemplateColumns:{xs:"1fr",sm:"1fr 1fr"},gap:1.5},children:["small","medium","large","extra-large"].map((level,index$1)=>{const isActive=fontSize.level===level;return index.jsxs(index.Box,{sx:{p:1.5,border:"1px solid",borderColor:isActive?"primary.main":"divider",borderRadius:1,backgroundColor:isActive?"primary.50":"background.paper",opacity:isActive?1:.7},children:[index.jsxs(index.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:.5},children:[index.jsx(index.Typography,{variant:"caption",color:"textSecondary",fontWeight:500,children:t(level==="small"?"text_size.size_labels.small":level==="medium"?"text_size.size_labels.medium":level==="large"?"text_size.size_labels.large":"text_size.size_labels.extra_large")}),index.jsxs(index.Typography,{variant:"caption",sx:{fontWeight:600,color:isActive?"primary.main":"text.disabled",fontSize:"0.7rem"},children:[getPercentageForLevel(level),"%"]})]}),index.jsxs(index.Typography,{sx:{lineHeight:1.4,fontSize:`calc(12px * ${[.875,1,1.125,1.25][index$1]}) !important`},children:[t("text_size.sample_text")," (",level,")"]})]},level)})})]}),index.jsxs(index.Box,{mb:2,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("layout_interaction.guidelines")}),index.jsxs(index.Box,{sx:{pl:1},children:[fontSize.level==="small"&&index.jsx(index.Alert,{severity:"warning",sx:{mb:1,display:"flex",alignItems:"center"},children:index.jsx(index.Typography,{variant:"body2",children:t("text_size.small_warning")})}),(fontSize.level==="large"||fontSize.level==="extra-large")&&index.jsx(index.Alert,{severity:"success",sx:{mb:1,display:"flex",alignItems:"center"},children:index.jsx(index.Typography,{variant:"body2",children:t("text_size.large_success")})}),fontSize.level==="medium"&&index.jsx(index.Alert,{severity:"info",sx:{mb:1,display:"flex",alignItems:"center"},children:index.jsx(index.Typography,{variant:"body2",children:t("text_size.standard_info")})}),index.jsxs(index.Typography,{variant:"caption",color:"textSecondary",children:[index.jsxs("strong",{children:[t("text_size.size_guidelines"),":"]}),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("text_size.size_labels.small"),":"]})," ",t("text_size.small_guideline"),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("text_size.size_labels.medium"),":"]})," ",t("text_size.medium_guideline"),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("text_size.size_labels.large"),":"]})," ",t("text_size.large_guideline"),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("text_size.size_labels.extra_large"),":"]})," ",t("text_size.extra_large_guideline")]})]})]}),index.jsxs(index.Typography,{variant:"caption",color:"textSecondary",sx:{display:"block"},children:[index.jsxs("strong",{children:[t("text_size.current_setting"),":"]})," ",fontSize.level," •",index.jsxs("strong",{children:[t("common.accessibility"),":"]})," ",fontSize.level==="small"?t("layout_interaction.accessibility_basic"):fontSize.level==="medium"?t("layout_interaction.accessibility_standard"):t("layout_interaction.accessibility_enhanced")]})]})]})},"TextSize");exports.TextSize=TextSize;exports.default=TextSize;