UNPKG

xtreme-ui

Version:

Collection of reusable components that can be used in web projects

github.com/itzzritik/XtremeUI

itzzritik/XtremeUI

4 lines (3 loc) • 2.6 kB
1
2
3
4
import{r as T,d as N,j as s,e as g,$ as j,T as S}from"./iframe-5Rr_RUeM.js";import{c as l}from"./clsx-B-dksMZM.js";import{A as v}from"./ActionCard-D7rPA0nK.js";import{B as y}from"./Button-DvCW9M4Z.js";import{u as _}from"./useScreen-BR45ve_F.js";import{i as $}from"./common-DNLsa6ye.js";import{T as C}from"./ThemeSelect-BMdwr2zu.js";import"./preload-helper-PPVm8Dsz.js";import"./ProgressBar-0sEm0xuH.js";import"./ColorPopper-KBShkTdt.js";import"./floating-ui.dom-BTmOqyi9.js";import"./index-BVe1xG5r.js";import"./index-ypbSTjMK.js";import"./ColorPicker-WGXTk78b.js";import"./objectWithoutPropertiesLoose-DXv8YDMk.js";import"./Textfield-JZRQAuDu.js";const b=Object.values(S),o=T.forwardRef((i,c)=>{const{className:n}=i,{themeScheme:m,setThemeScheme:d,themeColor:h,setThemeColor:p}=N(),a=_({smallMobile:325,mobile:420,tablet:640}),u=l("xtrThemePicker",n);return s.jsxs("section",{ref:c,className:u,children:[s.jsx("div",{className:"themeSchemes",role:"radiogroup",children:g.map(({name:e,icon:t},f)=>s.jsxs(v,{className:l("themeSchemeItem",e,m===e&&"active"),onClick:()=>d(e),children:[s.jsxs("div",{className:"design",children:[s.jsx("div",{className:"navigation",children:Array.from({length:6},(E,x)=>s.jsx("div",{className:"navigationItem"},`ThemeScheme-${e}-navigation-${x}`))}),s.jsxs("div",{className:"content",children:[s.jsx("div",{className:"header"}),s.jsx("div",{className:"profile"})]})]}),s.jsxs("div",{className:"footer",children:[s.jsx(j,{className:"footerIcon",code:m===e?"f058":t,type:"solid"}),s.jsx("span",{className:"footerLabel",children:e})]})]},`ThemeScheme-${e}-${f}`))}),s.jsxs("div",{className:"swatches",role:"radiogroup",children:[b.map((e,t)=>s.jsx(y,{className:"swatchItem",size:a.isLargest?"default":"mini",icon:"f00c",iconType:"solid",style:{"--themeColor":`${e.h} ${e.s}% ${e.l}%`,color:$(e,h)?"white":"transparent"},onClick:()=>p(e)},`ThemeColor-${e.h}${e.s}${e.l}-${t}`)),s.jsx(C,{withScheme:a.isSmallMobile,withSwatch:a.isSmallMobile,input:a.isLargest||a.isSmallMobile?"textfield":"buttonLabel"})]})]})});o.displayName="ThemePicker";try{o.displayName="ThemePicker",o.__docgenInfo={description:"",displayName:"ThemePicker",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}}}}}catch{}const F={title:"Layouts/Theme Picker",component:o,tags:["autodocs"],argTypes:{className:{control:!1}},args:{}},r={args:{}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{ args: {} }`,...r.parameters?.docs?.source}}};const G=["Default"];export{r as Default,G as __namedExportsOrder,F as default};