amotify/dist/fn/Input/Switch.js

UI Component for React,NextJS,esbuild

import{b as a,c as i,d as D}from"../../chunk-C5N2D3ZX.js";import{jsx as t,jsxs as N}from"react/jsx-runtime";import{UUID as V}from"jmini";import{useState as F}from"react";import u from"../../atoms/Box";import{Row as U}from"../../mols";import{Label as W}from"../Button";import{OptionalInputWrapper as A,BoxWrapper as P,CoreEffects as M}from"./core";import{InputSwitchClasses as f}from"../../@styles/componentClasses";function H(e){let{value:o,states:n}=e,{required:R}=n,l=[];return R&&!o&&l.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!l.filter(({type:m})=>m=="invalid").length,notice:l}}const O=e=>{let k=e,{componentID:o,color:n="posi",required:R,form:l,id:m,enableFormSubmit:z,checkValidationAtFirst:q,onChange:w,onKeyDown:x,onValidate:K,onUpdateValue:$,onUpdateValidValue:G,size:C="regular",value:B="",icon:v="",isApply:s=!1}=k,E=D(k,["componentID","color","required","form","id","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","size","value","icon","isApply"]),[r,S]=F({componentID:e.componentID||"",dataValue:B,eventType:"init",eventID:V()}),[b,T]=F({ok:!1,notice:[]}),p=!!r.dataValue;M.CommonEffects({type:"switch",states:e,val_status:r,set_status:S,val_validate:b,set_validate:T,SystemValidation:H});let h="middle",g=5,I=3;return s&&(I=4),N(P,{val_status:r,set_status:S,val_validate:b,states:e,children:[t(u,a({htmlTag:"input",type:"checkbox","data-component-id":r.componentID,checked:r.dataValue,className:f("Input"),id:m,onKeyDown:c=>{x&&x(c),z&&M.SubmitForm(c,l)},onChange:c=>{let{checked:L}=c.target;b.ok&&T({ok:!1,notice:[]}),S(_=>i(a({},_),{dataValue:L,eventType:"update",eventID:V()})),w&&w(c)}},E)),t(W.Plain,{tabIndex:-1,htmlFor:m,padding:"1/4",transition:h,borderRadius:"1.tone.primary",className:f("Label"),children:t(u,i(a({},s?{padding:"1/4",isRounded:!0,backgroundColor:p?n:"layer.3"}:{}),{children:N(U.Center,{unitHeight:C=="small"?2:C=="regular"?2.5:C=="large"?3:0,position:"relative",freeCSS:{aspectRatio:(g+I)/g},children:[!s&&t(u,{position:"absolute",backgroundColor:p?n:"layer.5",isRounded:!0,transition:h,width:1,opacity:"middle",className:f("Bar"),freeCSS:{height:"40%"}}),t(u,{position:"absolute",top:0,backgroundColor:!s&&p?n:"white",transition:h,isRounded:!0,flexCenter:!0,boxShadow:"1.remark",className:f("Dot"),freeCSS:{height:"100%",aspectRatio:"1",left:p?`calc(${I.ratio(g+I)}%)`:0},children:v&&t(u,{transition:h,flexCenter:!0,fontColor:p?s?n:"white":"6.clear",children:v})})]})}))})]})},y=e=>{let o=a({},e);return o.value=!!o.value,o.color=o.color||"theme",t(A,{componentID:o.componentID,children:O,states:o})},d=y;d.S=e=>t(y,i(a({},e),{size:"small"})),d.R=e=>t(y,i(a({},e),{size:"regular"})),d.L=e=>t(y,i(a({},e),{size:"large"}));export{d as Switch,d as default};