xtreme-ui
Version:
Collection of reusable components that can be used in web projects
2 lines (1 loc) • 2.13 kB
JavaScript
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),S=require("react"),o=require("clsx"),v=require("../../base/ActionCard/ActionCard.cjs"),N=require("../../base/Button/Button.cjs"),q=require("../../base/Icon/Icon.cjs"),p=require("../../context/useContext.cjs"),C=require("../../hooks/useScreen.cjs"),b=require("../../../utils/function/common.cjs"),c=require("../../../utils/constants/theme.cjs");require("color-namer");const f=require("../ThemeSelect/ThemeSelect.cjs");;/* empty css */const g=Object.values(c.ThemeColorsPreset),l=S.forwardRef((a,n)=>{const{className:m}=a,{themeScheme:t,setThemeScheme:h,themeColor:d,setThemeColor:u}=p.useXTheme(),r=C.useScreenType({smallMobile:325,mobile:420,tablet:640}),x=o("xtrThemePicker",m);return s.jsxs("div",{ref:n,className:x,role:"region",children:[s.jsx("div",{className:"themeSchemes",role:"radiogroup",children:c.THEME_SCHEME.map(({name:e,icon:i},T)=>s.jsxs(v.ActionCard,{className:o("themeSchemeItem",e,t===e&&"active"),onClick:()=>h(e),children:[s.jsxs("div",{className:"design",children:[s.jsx("div",{className:"navigation",children:Array.from({length:6},($,j)=>s.jsx("div",{className:"navigationItem"},`ThemeScheme-${e}-navigation-${j}`))}),s.jsxs("div",{className:"content",children:[s.jsx("div",{className:"header"}),s.jsx("div",{className:"profile"})]})]}),s.jsxs("div",{className:"footer",children:[s.jsx(q.Icon,{className:"footerIcon",code:t===e?"f058":i,type:"solid"}),s.jsx("span",{className:"footerLabel",children:e})]})]},`ThemeScheme-${e}-${T}`))}),s.jsxs("div",{className:"swatches",role:"radiogroup",children:[g.map((e,i)=>s.jsx(N.Button,{className:"swatchItem",size:r.isLargest?"default":"mini",icon:"f00c",iconType:"solid",style:{"--themeColor":`${e.h} ${e.s}% ${e.l}%`,color:b.isEqual(e,d)?"white":"transparent"},onClick:()=>u(e)},`ThemeColor-${e.h}${e.s}${e.l}-${i}`)),s.jsx(f.ThemeSelect,{withScheme:r.isSmallMobile,withSwatch:r.isSmallMobile,input:r.isLargest||r.isSmallMobile?"textfield":"buttonLabel"})]})]})});l.displayName="ThemePicker";exports.ThemePicker=l;