amotify/dist/fn/Input/Switch.js

UI Component for React,NextJS,esbuild

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