amotify 0.1.31 → 0.1.32

package/dist/fn/Input/Time/Picker.js

@@ -1 +1,1457 @@
-import{b as f,c as T}from"../../../chunk-VY3566IV.js";import{Fragment as $,jsx as i,jsxs as y}from"react/jsx-runtime";import{createElement as P}from"react";import{useState as w,useEffect as z,useRef as Y}from"react";import{$$ as c}from"../../../@utils/_";import C from"../../../atoms/Box";import N from"../../../atoms/FAI";import B from"../../../atoms/Flex";import _ from"../../../atoms/Grid";import M from"../../../mols/Row";import x from"../../../mols/Column";import O from"../../../mols/Text";import v from"../../Button";import H from"../../Tooltips";import R from"../Select";import{List as F}from"../List";import{InputTimeClasses as g}from"../../../@styles/componentClasses/_";let A=r=>{var t,a;let e=[],d=Number((t=r==null?void 0:r.min)!=null?t:1900),o=Number((a=r==null?void 0:r.max)!=null?a:c.Time().addYear(10).year);for(let m=d;m<=o;m++)e.unshift({value:m,label:[m,...c.transformer.wareki(m).value].join(" - ")});return e};const L=r=>{let{restrict:e,era:d="year",defaultValue:o=""}=r;r=f({},r),r.tipsID=r.tipsID||c.uuid.gen();const t=Y(!1);let[a,m]=w((()=>{var s,p;if(e=="clock"){let l=String(o).split(/[^\d]/);l[0]||(l=[0,0]);let u=Number(l[0]),h=Number(l[1]);return{modifiedType:"init",hour:u,minutes:h}}else if(e=="date"){let[l,u,h]=(s=String(o))==null?void 0:s.split(/\D/);return(c.is.nullish(l)||c.is.nullish(u)||c.is.nullish(h))&&([l,u,h]=c.Time().toFormat("%Y-%M-%D").split("-")),{modifiedType:"init",year:Number(l),month:Number(u),date:Number(h)}}else if(e!="week"){if(e=="month"){let[l,u]=String(o).split(/\D/);return(c.is.nullish(l)||c.is.nullish(u))&&([l,u]=c.Time().toFormat("%Y-%M").split("-")),{modifiedType:"init",year:Number(l),month:Number(u)}}else if(e=="year"){let[l]=String(o).split(/\D/);return c.is.nullish(l)&&([l]=c.Time().toFormat("%Y").split("-")),{modifiedType:"init",year:Number(l)}}else if(e=="dateWareki"){let[l,u,h]=(p=String(o))==null?void 0:p.split(/\D/);return(c.is.nullish(l)||c.is.nullish(u)||c.is.nullish(h))&&([l,u,h]=c.Time().toFormat("%Y-%M-%D").split("-")),{modifiedType:"init",era:d||"year",year:Number(l),month:Number(u),date:Number(h)}}}return{}})());z(()=>{if(t.current){if(a.modifiedType=="update"){let s="",p=d||"year";if(e=="clock"){let{hour:l,minutes:u}=a;s=[l.zeroEmbed(2),u.zeroEmbed(2)].join("/")}else if(e=="date"){let{year:l,month:u,date:h}=a;s=[l,u.zeroEmbed(2),h.zeroEmbed(2)].join("/")}else if(e!="week"){if(e=="month"){let{year:l,month:u}=a;s=[l,u.zeroEmbed(2)].join("/")}else if(e=="year"){let{year:l}=a;s=String(l)}else if(e=="dateWareki"){let{year:l,month:u,date:h,era:S}=a;p=S,s=[l,u.zeroEmbed(2),h.zeroEmbed(2)].join("/")}}r.onValueUpdate(s,p)}}else t.current=!0},[a]);let n=T(f({},r),{val_value:a,set_value:m});return i(C,{backgroundColor:"1.layer.base",borderRadius:"2.tone.secondary",boxShadow:"1.remark",border:!0,overflow:"hidden",children:i(C,{overflow:"auto",className:g(e.toCapital()+"Base"),children:e=="clock"?i(k.Clock._,f({},n)):e=="date"?i(k.Date._,f({},n)):e=="week"?"":e=="month"?i(k.Month._,f({},n)):e=="year"?i(k.Year._,f({},n)):e=="dates"||e=="months"?"":e=="dateWareki"?i(k.DateWareki._,f({},n)):i($,{})})})},k={Clock:{_:r=>{let{min:e,max:d,onValueUpdate:o,tipsID:t,val_value:a,set_value:m}=r,[n,s]=w(a.hour>12?2:1),[p,l]=w(Number(localStorage.getItem("timePickerUnit")||5));z(()=>{localStorage.setItem("timePickerUnit",String(p))},[p]);let{hour:u,minutes:h}=a;return y(x,{padding:1,children:[y(B,{flexType:"row",flexWrap:!1,gap:1,className:g("Body"),children:[y(x,{className:g("DesignSide"),flexSizing:0,children:[i(C,{className:g("ClockUiBase"),padding:[1,"2/3"],flexCenter:!0,children:y(C,{className:g("ClockUi"),backgroundColor:"tcOpLow",isRounded:!0,position:"relative",children:[i(C,{position:"absolute",backgroundColor:"theme",unitWidth:"1/12",className:[g("Needle"),g("hour")].join(" "),freeCSS:{transform:`rotate(${u*30+h/2}deg)`}}),i(C,{position:"absolute",backgroundColor:"theme",unitWidth:"1/12",className:[g("Needle"),g("minute")].join(" "),freeCSS:{transform:`rotate(${h*6}deg)`}})]})}),i(F.Radio,{tone:"plain",icon:!0,value:[n],options:[{value:1,label:"AM"},{value:2,label:"PM"}],flexType:"col",gap:0,cellStyles:{padding:"1/2",horizontalAlign:"between",gap:"1/3"},tabIndex:-1,onUpdateValidValue:({value:S})=>{let D=a.hour%12+(S==2?12:0);s(S),m({modifiedType:"update",hour:D,minutes:a.minutes})}}),i(C,{borderTop:!0,margin:[0,1]}),i(F.Radio,{tone:"plain",icon:!0,value:[p],options:[{value:1,label:"/ 1\u5206"},{value:2,label:"/ 2\u5206"},{value:5,label:"/ 5\u5206"}],flexType:"col",gap:0,cellStyles:{padding:"1/2",horizontalAlign:"between",gap:"1/3"},tabIndex:-1,onUpdateValidValue:({value:S})=>{l(S)}})]}),y(x,{children:[y(C,{flexCenter:!0,fontSize:"3.paragraph",isSemiBoldFont:!0,children:[a.hour.zeroEmbed(2)," : ",a.minutes.zeroEmbed(2)]}),y(B,{flexWrap:!1,borderRadius:"1.tone.primary",boxShadow:"0.remark.inset",flexChilds:"even",freeCSS:{minWidth:12*12},padding:["1/3",0],children:[i(x,{gap:0,overflow:"auto",padding:"2/3",borderRight:!0,freeCSS:{maxHeight:12*22},children:k.Clock.Hours({onClick:S=>{let V=S+(n==2?12:0);m({modifiedType:"update",hour:V,minutes:a.minutes})},min:e,max:d,ampm:n})}),i(x,{gap:0,overflow:"auto",padding:"2/3",freeCSS:{maxHeight:12*22},children:k.Clock.Minutes({onClick:S=>{m({modifiedType:"update",hour:a.hour,minutes:S})},min:e,max:d,unit:p})})]})]})]}),i(k.Variables.Footer,{tipsID:t,onValueUpdate:o})]})},Hours:r=>{let e=[];for(let d=0;d<12;d++){let o=r.ampm==2?d+12:d,t=!1;{let a=Number(String(o*100).replace(/\D/ig,""));if(r.min&&Number(String(r.min).replace(/\D/ig,""))>a&&(t=!0),r.max){let m=Number(String(r.max).replace(/\D/ig,""));a>m&&(t=!0)}}e.push(i(v.Button.Normal.R,{isLocked:t,borderBottom:!0,borderRadius:0,padding:["1/2",1],freeCSS:{whiteSpace:"nowrap"},tabIndex:-1,onClick:()=>{r.onClick(d)},children:o.zeroEmbed(2)},d))}return e},Minutes:r=>{let e=[];for(let d=0;d<60/r.unit;d++){let o=d*r.unit;e.push(i(v.Button.Normal.R,{borderBottom:!0,borderRadius:0,padding:["1/2",1],freeCSS:{whiteSpace:"nowrap"},tabIndex:-1,onClick:()=>{r.onClick(o)},children:o.zeroEmbed(2)},o))}return e}},Date:{_:r=>{let{min:e,max:d,onValueUpdate:o,tipsID:t,val_value:a,set_value:m}=r,{year:n,month:s,date:p}=a;return y(x,{padding:1,children:[y(B,{horizontalAlign:"between",verticalAlign:"center",flexWrap:!1,children:[y(B,{verticalAlign:"bottom",horizontalAlign:"left",gap:"2/3",flexWrap:!1,children:[i(R,{override:"force",enableUnSelected:!1,value:n,options:A(),border:"1.thin",padding:["1/3","2/3"],paddingRight:2,rightIconStyles:{right:"1/3"},onUpdateValidValue:({value:l})=>{m({modifiedType:"update",year:Number(l),month:s,date:p})}}),i(R,{override:"force",enableUnSelected:!1,value:s,options:(()=>{let l=[];for(let u=1;u<=12;u++)l.push({value:u,label:String(u),displayLabel:String(u)+"\u6708"});return l})(),placeholder:"",border:"1.thin",padding:["1/3","2/3"],paddingRight:2,rightIconStyles:{right:"1/3"},onUpdateValidValue:({value:l})=>{m({modifiedType:"update",year:n,month:Number(l),date:p})}})]}),i(k.Variables.ShiftButtons,{callback:l=>{let u=s+l,h=n;l==-1?(u<=0&&h--,u=u||12):s==12&&h++,m({modifiedType:"update",year:h,month:u,date:a.date})}})]}),i(C,{borderTop:!0}),i(C,{children:k.Date.MonthCalendar({min:e,max:d,year:a.year,month:a.month,current:[a.year,a.month,a.date],callback:l=>{let[u,h,S]=l;m({modifiedType:"update",year:u,month:h,date:S})}})}),i(k.Variables.Footer,{tipsID:t,onValueUpdate:o})]})},MonthCalendar:r=>{let{min:e,max:d,year:o,month:t,current:a,callback:m}=r,n=c.Time(),s=c.Time([o,t.zeroEmbed(2),"01"].join("/")),p=s.getLastDayOfTheMonth(),l=c.Time(s).addMonth(-1).getLastDayOfTheMonth().date,u=[],h=[],S=[],V=[],D={padding:0,unitWidth:3,unitHeight:3,flexCenter:!0,borderRadius:"3.tone.tertiary"};for(var b=0;b<7;b++)u.push(P(C,T(f({className:[g("CalendarDay"),g("Legend")].join(" ")},D),{key:b}),["\u65E5","\u6708","\u706B","\u6C34","\u6728","\u91D1","\u571F"][b]));for(var b=0;b<s.weekday;b++)h.unshift(P(C,T(f({className:[g("CalendarDay"),g("Dummy")].join(" "),fontColor:"4.thin"},D),{key:b}),l-b));for(var b=1;b<=p.date;b++){let U=b,j=o==n.year&&t==n.month&&b==n.date,I=!1;{let E=Number(String([o,t.zeroEmbed(2),b.zeroEmbed(2)].join("/")).replace(/\D/ig,""));if(r.min&&Number(String(r.min).replace(/\D/ig,""))>E&&(I=!0),r.max){let W=Number(String(r.max).replace(/\D/ig,""));E>W&&(I=!0)}}S.push(P(v.Button.Clear.R,T(f({className:[g("CalendarDay"),g("isToday_"+j)].join(" ")},D),{onClick:()=>{m([o,t,U])},tabIndex:-1,key:U,isLocked:I,fontColor:"1.clear",ssEffectsOnActive:"shrink",padding:0,flexCenter:!0,borderRadius:"sphere",children:b})))}for(var b=1;b<7-p.weekday;b++)V.push(P(C,T(f({className:[g("CalendarDay"),g("Dummy")].join(" "),fontColor:"4.thin"},D),{key:b}),b));return y(_,{gridCols:7,gap:"1/3",children:[u,h,S,V]})}},Month:{_:r=>{let{min:e,max:d,onValueUpdate:o,tipsID:t,val_value:a,set_value:m}=r,{year:n,month:s}=a;return y(x,{padding:1,children:[y(M.Separate,{gap:0,children:[i(M.Center,{verticalAlign:"bottom",gap:"2/3",children:i(R,{enableUnSelected:!1,value:n,options:A(),override:"force",border:"1.thin",padding:["1/3","2/3"],paddingRight:2,rightIconStyles:{right:"1/3"},onUpdateValidValue:({value:p})=>{m({modifiedType:"update",year:Number(p),month:s})}})}),i(k.Variables.ShiftButtons,{callback:p=>{let l=Math.min(Math.max(n+p,1900),2100);m({modifiedType:"update",year:l,month:s})}})]}),i(C,{borderTop:!0}),k.Month.Months({min:e,max:d,year:a.year,callback:p=>{let[l,u]=p;m({modifiedType:"update",year:l,month:u})}}),i(k.Variables.Footer,{tipsID:t,onValueUpdate:o})]})},Months:r=>{let{year:e,callback:d}=r,o=c.Time(),t=[];for(let a=1;a<=12;a++){let m=e==o.year&&a==o.month,n=!1;{let p=Number(String([e,a.zeroEmbed(2)].join("/")).replace(/\D/ig,""));if(r.min&&Number(String(r.min).replace(/\D/ig,""))>p&&(n=!0),r.max){let l=Number(String(r.max).replace(/\D/ig,""));p>l&&(n=!0)}}let s=[g("Cell"),m?g("isThisMonth"):""].join(" ");t.push(y(v.Button.Clear.R,{className:s,isLocked:n,fontColor:"2.normal",padding:["2/3",1],ssEffectsOnActive:"shrink",onClick:()=>{d([e,a])},children:[a," \u6708"]},e+"-"+a))}return i(_,{gridCols:4,gap:"2/3",children:t})}},Year:{_:r=>{let{min:e,max:d,onValueUpdate:o,tipsID:t,val_value:a,set_value:m}=r,{year:n}=a;return y(x,{padding:1,children:[i(R,{enableUnSelected:!1,value:n||c.Time().year,override:"force",options:A({min:e,max:d}),onUpdateValidValue:({value:s})=>{m({modifiedType:"update",year:Number(s)})}}),i(k.Variables.Footer,{tipsID:t,onValueUpdate:o,onSubmit:()=>{m({modifiedType:"update",year:Number(n||c.Time().year)})}})]})}},DateWareki:{_:r=>{let{min:e,max:d,onValueUpdate:o,tipsID:t,val_value:a,set_value:m}=r,{era:n,year:s,month:p,date:l}=a,u={val_value:a,set_value:m};return y(C,{children:[y(M.Left,{verticalAlign:"unset",borderBottom:!0,gap:0,children:[i(k.DateWareki.EraSelect,f({},u)),i(C,{borderRight:!0}),i(k.DateWareki.Calendar,f({},u))]}),i(C,{padding:1,children:i(k.Variables.Footer,{tipsID:t,onValueUpdate:o})})]})},EraSelect:r=>{let{val_value:e,set_value:d}=r,o={padding:["1/2",1.5],fontColor:"3.blur"},t={backgroundColor:"cloud",fontColor:"2.normal",isSemiBoldFont:!0};return y(x,{gap:0,padding:1,children:[i(v.Button.Clear.R,T(f({color:"cloud"},o),{isActiveStyles:t,isActive:e.era=="year",onClick:()=>{let a=c.Time();d({modifiedType:"update",era:"year",year:a.year,month:a.month,date:a.date})},children:"\u897F\u66A6"})),i(v.Button.Clear.R,T(f({color:"cloud"},o),{isActiveStyles:t,isActive:e.era=="reiwa",onClick:()=>{let a=c.Time();d({modifiedType:"update",era:"reiwa",year:a.year,month:a.month,date:a.date})},children:"\u4EE4\u548C"})),i(v.Button.Clear.R,T(f({color:"cloud"},o),{isActiveStyles:t,isActive:e.era=="heisei",onClick:()=>{d({modifiedType:"update",era:"heisei",year:2019,month:1,date:1})},children:"\u5E73\u6210"})),i(v.Button.Clear.R,T(f({color:"cloud"},o),{isActiveStyles:t,isActive:e.era=="shouwa",onClick:()=>{d({modifiedType:"update",era:"shouwa",year:1989,month:1,date:1})},children:"\u662D\u548C"})),i(v.Button.Clear.R,T(f({color:"cloud"},o),{isActiveStyles:t,isActive:e.era=="taisho",onClick:()=>{d({modifiedType:"update",era:"taisho",year:1926,month:1,date:1})},children:"\u5927\u6B63"})),i(v.Button.Clear.R,T(f({color:"cloud"},o),{isActiveStyles:t,isActive:e.era=="meiji",onClick:()=>{d({modifiedType:"update",era:"meiji",year:1912,month:1,date:1})},children:"\u660E\u6CBB"}))]})},Calendar:r=>{let{val_value:e,set_value:d}=r,o=[];if(e.era=="year")for(let t=1900;t<2100;t++)o.unshift({value:t,label:t+"\u5E74"});else if(e.era=="reiwa"){let t=c.Time().year-2018;for(let a=1;a<=t+10;a++)o.unshift({value:2019+a-1,label:"\u4EE4\u548C"+(a==1?"\u5143":a)+"\u5E74"})}else if(e.era=="heisei")for(let t=1;t<=31;t++)o.unshift({value:1989+t-1,label:"\u5E73\u6210"+(t==1?"\u5143":t)+"\u5E74"});else if(e.era=="shouwa")for(let t=1;t<=64;t++)o.unshift({value:1926+t-1,label:"\u662D\u548C"+(t==1?"\u5143":t)+"\u5E74"});else if(e.era=="taisho")for(let t=1;t<=15;t++)o.unshift({value:1912+t-1,label:"\u5927\u6B63"+(t==1?"\u5143":t)+"\u5E74"});else if(e.era=="meiji")for(let t=1;t<=45;t++)o.unshift({value:1868+t-1,label:"\u660E\u6CBB"+(t==1?"\u5143":t)+"\u5E74"});return y(x,{padding:1,children:[y(M.Separate,{children:[i(R,{tone:"cloud",enableUnSelected:!1,override:"force",border:"1.thin",padding:["1/3","2/3"],paddingRight:2,rightIconStyles:{right:"1/3"},options:o,value:e.year,onUpdateValidValue:({value:t})=>{d(T(f({},e),{modifiedType:"update",year:Number(t)}))}}),y(M.Center,{gap:"1/3",children:[i(v.Button.Clear.S,{ssSphere:2,onClick:()=>{let t=e.month-1;d({modifiedType:"update",era:e.era,year:t==0?e.year-1:e.year,month:t==0?12:t,date:1})},children:i(N.ChevronLeft,{})}),i(R,{tone:"cloud",enableUnSelected:!1,override:"force",border:"1.thin",padding:["1/3","2/3"],paddingRight:2,rightIconStyles:{right:"1/3"},options:[{value:1,label:"1\u6708"},{value:2,label:"2\u6708"},{value:3,label:"3\u6708"},{value:4,label:"4\u6708"},{value:5,label:"5\u6708"},{value:6,label:"6\u6708"},{value:7,label:"7\u6708"},{value:8,label:"8\u6708"},{value:9,label:"9\u6708"},{value:10,label:"10\u6708"},{value:11,label:"11\u6708"},{value:12,label:"12\u6708"}],value:e.month,onUpdateValidValue:({value:t})=>{d({modifiedType:"update",era:e.era,year:e.year,month:Number(t),date:1})}}),i(v.Button.Clear.S,{ssSphere:2,onClick:()=>{let t=e.month+1;d({modifiedType:"update",era:e.era,year:t==13?e.year+1:e.year,month:t==13?1:t,date:1})},children:i(N.ChevronRight,{})})]})]}),i(k.DateWareki.MonthCell,f({},r))]},e.era)},MonthCell:r=>{let{val_value:e,set_value:d}=r,o=c.Time([e.year.zeroEmbed(4),e.month.zeroEmbed(2),e.date.zeroEmbed(2)].join("/"));if(!o.validate)return;let t=o.getFirstDayOfTheMonth().weekday,a=o.getLastDayOfTheMonth(),m=[];for(let n=0;n<7;n++)m.push(i(O.Supplement,{flexCenter:!0,fontColor:n==0?"googleRed":n==6?"googleBlue":"3.blur",children:c.transformer.weekday.shortJP(n)}));for(let n=0;n<t;n++){let s=c.Time(o).getFirstDayOfTheMonth().addDate(n-t);m.push(i(v.Button.Sub.R,{color:"cloud",border:"1.thin",ssSquare:3,opacity:"middle",onClick:p=>{p.preventDefault(),p.stopPropagation(),d({modifiedType:"update",era:e.era,year:s.year,month:s.month,date:s.date})},children:s.date}))}for(let n=1;n<=a.date;n++){let s=c.Time(o).setDate(n);m.push(i(v.Button.Border.R,{ssSquare:3,onClick:()=>{d({modifiedType:"update",era:e.era,year:s.year,month:s.month,date:s.date})},children:s.date}))}for(let n=0;n<7-a.weekday-1;n++){let s=c.Time(o).addMonth(1).setDate(1).addDate(n);m.push(i(v.Button.Sub.R,{color:"cloud",border:"1.thin",ssSquare:3,opacity:"middle",onClick:p=>{p.preventDefault(),p.stopPropagation(),d({modifiedType:"update",era:e.era,year:s.year,month:s.month,date:s.date})},children:s.date}))}return i(_,{gridCols:7,gap:"1/4",children:m})}},Variables:{Footer:r=>y(B,{flexWrap:!1,gap:1,flexChilds:"even",freeCSS:{whiteSpace:"nowrap"},children:[y(v.Button.Border.R,{onClick:()=>{r.onValueUpdate("")},tabIndex:-1,flexSizing:"none",padding:["2/3",1],children:[i(N.Times,{})," \u524A\u9664"]}),i(v.Button.Prime.R,{flexSizing:"auto",onClick:()=>{r.onSubmit&&r.onSubmit(),H.close(r.tipsID)},tabIndex:-1,children:"\u6C7A\u5B9A",padding:["2/3",1]})]}),ShiftButtons:r=>y(B,{flexWrap:!1,gap:"1/3",children:[i(v.Button.Clear.R,T(f({className:g("LeftButton"),tabIndex:-1,right:0},k.Variables.ShiftButtonStyles),{onClick:()=>{r.callback(-1)},children:i(N.ChevronLeft,{})})),i(v.Button.Clear.R,T(f({className:g("RightButton"),tabIndex:-1,left:0},k.Variables.ShiftButtonStyles),{onClick:()=>{r.callback(1)},children:i(N.ChevronRight,{})}))]}),ShiftButtonStyles:{flexCenter:!0,padding:0,unitWidth:3,unitHeight:3,borderRadius:"sphere",position:"relative"}}};export{L as Picker,L as default};
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-JJ3PEWPN.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import {
+  useState,
+  useEffect,
+  useRef
+} from "react";
+import {
+  $$
+} from "../../../@utils/_";
+import Box from "../../../atoms/Box";
+import FAI from "../../../atoms/FAI";
+import Flex from "../../../atoms/Flex";
+import Grid from "../../../atoms/Grid";
+import Row from "../../../mols/Row";
+import Column from "../../../mols/Column";
+import Text from "../../../mols/Text";
+import Button from "../../Button";
+import Tooltips from "../../Tooltips";
+import Select from "../Select";
+import { List } from "../List";
+import { InputTimeClasses } from "../../../@styles/componentClasses/_";
+let YearOptions = (params) => {
+  var _a, _b;
+  let Years = [];
+  let minYear = Number((_a = params == null ? void 0 : params.min) != null ? _a : 1900);
+  let maxYear = Number((_b = params == null ? void 0 : params.max) != null ? _b : $$.Time().addYear(10).year);
+  for (let year = minYear; year <= maxYear; year++) {
+    Years.unshift({
+      value: year,
+      label: [year, ...$$.transformer.wareki(year).value].join(" - ")
+      // displayLabel: year + '年'
+    });
+  }
+  return Years;
+};
+const Picker = (params) => {
+  let {
+    restrict,
+    era = "year",
+    defaultValue = ""
+  } = params;
+  params = __spreadValues({}, params);
+  params.tipsID = params.tipsID || $$.uuid.gen();
+  const mounted = useRef(false);
+  let [val_value, set_value] = useState((() => {
+    var _a, _b;
+    if (restrict == "clock") {
+      let partValues = String(defaultValue).split(/[^\d]/);
+      if (!partValues[0])
+        partValues = [0, 0];
+      let hour = Number(partValues[0]);
+      let minutes = Number(partValues[1]);
+      return {
+        modifiedType: "init",
+        hour,
+        minutes
+      };
+    } else if (restrict == "date") {
+      let [year, month, date] = (_a = String(defaultValue)) == null ? void 0 : _a.split(/\D/);
+      if ($$.is.nullish(year) || $$.is.nullish(month) || $$.is.nullish(date)) {
+        [year, month, date] = $$.Time().toFormat("%Y-%M-%D").split("-");
+      }
+      return {
+        modifiedType: "init",
+        year: Number(year),
+        month: Number(month),
+        date: Number(date)
+      };
+    } else if (restrict == "week") {
+    } else if (restrict == "month") {
+      let [year, month] = String(defaultValue).split(/\D/);
+      if ($$.is.nullish(year) || $$.is.nullish(month)) {
+        [year, month] = $$.Time().toFormat("%Y-%M").split("-");
+      }
+      return {
+        modifiedType: "init",
+        year: Number(year),
+        month: Number(month)
+      };
+    } else if (restrict == "year") {
+      let [year] = String(defaultValue).split(/\D/);
+      if ($$.is.nullish(year)) {
+        [year] = $$.Time().toFormat("%Y").split("-");
+      }
+      return {
+        modifiedType: "init",
+        year: Number(year)
+      };
+    } else if (restrict == "dateWareki") {
+      let [year, month, date] = (_b = String(defaultValue)) == null ? void 0 : _b.split(/\D/);
+      if ($$.is.nullish(year) || $$.is.nullish(month) || $$.is.nullish(date)) {
+        [year, month, date] = $$.Time().toFormat("%Y-%M-%D").split("-");
+      }
+      return {
+        modifiedType: "init",
+        era: era || "year",
+        year: Number(year),
+        month: Number(month),
+        date: Number(date)
+      };
+    }
+    return {};
+  })());
+  useEffect(() => {
+    if (mounted.current) {
+      if (val_value.modifiedType == "update") {
+        let sendValue = "";
+        let sendEra = era || "year";
+        if (restrict == "clock") {
+          let { hour, minutes } = val_value;
+          sendValue = [
+            hour.zeroEmbed(2),
+            minutes.zeroEmbed(2)
+          ].join("/");
+        } else if (restrict == "date") {
+          let { year, month, date } = val_value;
+          sendValue = [
+            year,
+            month.zeroEmbed(2),
+            date.zeroEmbed(2)
+          ].join("/");
+        } else if (restrict == "week") {
+        } else if (restrict == "month") {
+          let { year, month } = val_value;
+          sendValue = [
+            year,
+            month.zeroEmbed(2)
+          ].join("/");
+        } else if (restrict == "year") {
+          let { year } = val_value;
+          sendValue = String(year);
+        } else if (restrict == "dateWareki") {
+          let {
+            year,
+            month,
+            date,
+            era: era2
+          } = val_value;
+          sendEra = era2;
+          sendValue = [
+            year,
+            month.zeroEmbed(2),
+            date.zeroEmbed(2)
+          ].join("/");
+        }
+        params.onValueUpdate(sendValue, sendEra);
+      }
+    } else {
+      mounted.current = true;
+    }
+  }, [val_value]);
+  let Params = __spreadProps(__spreadValues({}, params), {
+    val_value,
+    set_value
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      backgroundColor: "1.layer.base",
+      borderRadius: "2.tone.secondary",
+      boxShadow: "1.remark",
+      border: true,
+      overflow: "hidden",
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          overflow: "auto",
+          className: InputTimeClasses(restrict.toCapital() + "Base"),
+          children: restrict == "clock" ? /* @__PURE__ */ jsx(Comps.Clock._, __spreadValues({}, Params)) : restrict == "date" ? /* @__PURE__ */ jsx(Comps.Date._, __spreadValues({}, Params)) : restrict == "week" ? "" : restrict == "month" ? /* @__PURE__ */ jsx(Comps.Month._, __spreadValues({}, Params)) : restrict == "year" ? /* @__PURE__ */ jsx(Comps.Year._, __spreadValues({}, Params)) : restrict == "dates" ? "" : restrict == "months" ? "" : restrict == "dateWareki" ? /* @__PURE__ */ jsx(Comps.DateWareki._, __spreadValues({}, Params)) : /* @__PURE__ */ jsx(Fragment, {})
+        }
+      )
+    }
+  );
+};
+const Comps = {
+  Clock: {
+    _: (params) => {
+      let {
+        min,
+        max,
+        onValueUpdate,
+        tipsID,
+        val_value,
+        set_value
+      } = params;
+      let [val_ampm, set_ampm] = useState(val_value.hour > 12 ? 2 : 1);
+      let [val_unit, set_unit] = useState(Number(localStorage.getItem("timePickerUnit") || 5));
+      useEffect(() => {
+        localStorage.setItem("timePickerUnit", String(val_unit));
+      }, [val_unit]);
+      let { hour, minutes } = val_value;
+      return /* @__PURE__ */ jsxs(
+        Column,
+        {
+          padding: 1,
+          children: [
+            /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                flexType: "row",
+                flexWrap: false,
+                gap: 1,
+                className: InputTimeClasses("Body"),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Column,
+                    {
+                      className: InputTimeClasses("DesignSide"),
+                      flexSizing: 0,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            className: InputTimeClasses("ClockUiBase"),
+                            padding: [1, "2/3"],
+                            flexCenter: true,
+                            children: /* @__PURE__ */ jsxs(
+                              Box,
+                              {
+                                className: InputTimeClasses("ClockUi"),
+                                backgroundColor: "tcOpLow",
+                                isRounded: true,
+                                position: "relative",
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    Box,
+                                    {
+                                      position: "absolute",
+                                      backgroundColor: "theme",
+                                      unitWidth: "1/12",
+                                      className: [
+                                        InputTimeClasses("Needle"),
+                                        InputTimeClasses("hour")
+                                      ].join(" "),
+                                      freeCSS: {
+                                        transform: `rotate(${hour * 30 + minutes / 2}deg)`
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    Box,
+                                    {
+                                      position: "absolute",
+                                      backgroundColor: "theme",
+                                      unitWidth: "1/12",
+                                      className: [
+                                        InputTimeClasses("Needle"),
+                                        InputTimeClasses("minute")
+                                      ].join(" "),
+                                      freeCSS: {
+                                        transform: `rotate(${minutes * 6}deg)`
+                                      }
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          List.Radio,
+                          {
+                            tone: "plain",
+                            icon: true,
+                            value: [val_ampm],
+                            options: [
+                              { value: 1, label: "AM" },
+                              { value: 2, label: "PM" }
+                            ],
+                            flexType: "col",
+                            gap: 0,
+                            cellStyles: {
+                              padding: "1/2",
+                              horizontalAlign: "between",
+                              gap: "1/3"
+                            },
+                            tabIndex: -1,
+                            onUpdateValidValue: ({ value }) => {
+                              let prevHour = val_value.hour % 12;
+                              let Hour = prevHour + (value == 2 ? 12 : 0);
+                              set_ampm(value);
+                              set_value({
+                                modifiedType: "update",
+                                hour: Hour,
+                                minutes: val_value.minutes
+                              });
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Box, { borderTop: true, margin: [0, 1] }),
+                        /* @__PURE__ */ jsx(
+                          List.Radio,
+                          {
+                            tone: "plain",
+                            icon: true,
+                            value: [val_unit],
+                            options: [
+                              { value: 1, label: "/ 1\u5206" },
+                              { value: 2, label: "/ 2\u5206" },
+                              { value: 5, label: "/ 5\u5206" }
+                            ],
+                            flexType: "col",
+                            gap: 0,
+                            cellStyles: {
+                              padding: "1/2",
+                              horizontalAlign: "between",
+                              gap: "1/3"
+                            },
+                            tabIndex: -1,
+                            onUpdateValidValue: ({ value }) => {
+                              set_unit(value);
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Column, { children: [
+                    /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        flexCenter: true,
+                        fontSize: "3.paragraph",
+                        isSemiBoldFont: true,
+                        children: [
+                          val_value.hour.zeroEmbed(2),
+                          " : ",
+                          val_value.minutes.zeroEmbed(2)
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Flex,
+                      {
+                        flexWrap: false,
+                        borderRadius: "1.tone.primary",
+                        boxShadow: "0.remark.inset",
+                        flexChilds: "even",
+                        freeCSS: {
+                          minWidth: 12 * 12
+                        },
+                        padding: ["1/3", 0],
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Column,
+                            {
+                              gap: 0,
+                              overflow: "auto",
+                              padding: "2/3",
+                              borderRight: true,
+                              freeCSS: {
+                                maxHeight: 12 * 22
+                              },
+                              children: Comps.Clock.Hours({
+                                onClick: (index) => {
+                                  let Hour = index + (val_ampm == 2 ? 12 : 0);
+                                  set_value({
+                                    modifiedType: "update",
+                                    hour: Hour,
+                                    minutes: val_value.minutes
+                                  });
+                                },
+                                min,
+                                max,
+                                ampm: val_ampm
+                              })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Column,
+                            {
+                              gap: 0,
+                              overflow: "auto",
+                              padding: "2/3",
+                              freeCSS: {
+                                maxHeight: 12 * 22
+                              },
+                              children: Comps.Clock.Minutes({
+                                onClick: (index) => {
+                                  set_value({
+                                    modifiedType: "update",
+                                    hour: val_value.hour,
+                                    minutes: index
+                                  });
+                                },
+                                min,
+                                max,
+                                unit: val_unit
+                              })
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Comps.Variables.Footer,
+              {
+                tipsID,
+                onValueUpdate
+              }
+            )
+          ]
+        }
+      );
+    },
+    Hours: (params) => {
+      let list = [];
+      for (let index = 0; index < 12; index++) {
+        let labelIndex = params.ampm == 2 ? index + 12 : index;
+        let Disabled = false;
+        {
+          let VAL = Number(String(labelIndex * 100).replace(/\D/ig, ""));
+          if (params.min) {
+            let MIN = Number(String(params.min).replace(/\D/ig, ""));
+            if (MIN > VAL)
+              Disabled = true;
+          }
+          if (params.max) {
+            let MAX = Number(String(params.max).replace(/\D/ig, ""));
+            if (VAL > MAX)
+              Disabled = true;
+          }
+        }
+        list.push(/* @__PURE__ */ jsx(
+          Button.Button.Normal.R,
+          {
+            isLocked: Disabled,
+            borderBottom: true,
+            borderRadius: 0,
+            padding: ["1/2", 1],
+            freeCSS: { whiteSpace: "nowrap" },
+            tabIndex: -1,
+            onClick: () => {
+              params.onClick(index);
+            },
+            children: labelIndex.zeroEmbed(2)
+          },
+          index
+        ));
+      }
+      return list;
+    },
+    Minutes: (params) => {
+      let list = [];
+      for (let index = 0; index < 60 / params.unit; index++) {
+        let Value = index * params.unit;
+        list.push(/* @__PURE__ */ jsx(
+          Button.Button.Normal.R,
+          {
+            borderBottom: true,
+            borderRadius: 0,
+            padding: ["1/2", 1],
+            freeCSS: { whiteSpace: "nowrap" },
+            tabIndex: -1,
+            onClick: () => {
+              params.onClick(Value);
+            },
+            children: Value.zeroEmbed(2)
+          },
+          Value
+        ));
+      }
+      return list;
+    }
+  },
+  Date: {
+    _: (params) => {
+      let {
+        min,
+        max,
+        onValueUpdate,
+        tipsID,
+        val_value,
+        set_value
+      } = params;
+      let { year, month, date } = val_value;
+      return /* @__PURE__ */ jsxs(
+        Column,
+        {
+          padding: 1,
+          children: [
+            /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                horizontalAlign: "between",
+                verticalAlign: "center",
+                flexWrap: false,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      verticalAlign: "bottom",
+                      horizontalAlign: "left",
+                      gap: "2/3",
+                      flexWrap: false,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Select,
+                          {
+                            override: "force",
+                            enableUnSelected: false,
+                            value: year,
+                            options: YearOptions(),
+                            border: "1.thin",
+                            padding: ["1/3", "2/3"],
+                            paddingRight: 2,
+                            rightIconStyles: {
+                              right: "1/3"
+                            },
+                            onUpdateValidValue: ({ value }) => {
+                              set_value({
+                                modifiedType: "update",
+                                year: Number(value),
+                                month,
+                                date
+                              });
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Select,
+                          {
+                            override: "force",
+                            enableUnSelected: false,
+                            value: month,
+                            options: (() => {
+                              let options = [];
+                              for (let i = 1; i <= 12; i++) {
+                                options.push({
+                                  value: i,
+                                  label: String(i),
+                                  displayLabel: String(i) + "\u6708"
+                                });
+                              }
+                              return options;
+                            })(),
+                            placeholder: "",
+                            border: "1.thin",
+                            padding: ["1/3", "2/3"],
+                            paddingRight: 2,
+                            rightIconStyles: {
+                              right: "1/3"
+                            },
+                            onUpdateValidValue: ({ value }) => {
+                              set_value({
+                                modifiedType: "update",
+                                year,
+                                month: Number(value),
+                                date
+                              });
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Comps.Variables.ShiftButtons,
+                    {
+                      callback: (dir) => {
+                        let newMonth = month + dir;
+                        let newYear = year;
+                        if (dir == -1) {
+                          if (newMonth <= 0)
+                            newYear--;
+                          newMonth = newMonth || 12;
+                        } else {
+                          if (month == 12)
+                            newYear++;
+                        }
+                        set_value({
+                          modifiedType: "update",
+                          year: newYear,
+                          month: newMonth,
+                          date: val_value.date
+                        });
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { borderTop: true }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                children: Comps.Date.MonthCalendar({
+                  min,
+                  max,
+                  year: val_value.year,
+                  month: val_value.month,
+                  current: [val_value.year, val_value.month, val_value.date],
+                  callback: (val) => {
+                    let [year2, month2, date2] = val;
+                    set_value({
+                      modifiedType: "update",
+                      year: year2,
+                      month: month2,
+                      date: date2
+                    });
+                  }
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Comps.Variables.Footer,
+              {
+                tipsID,
+                onValueUpdate
+              }
+            )
+          ]
+        }
+      );
+    },
+    MonthCalendar: (params) => {
+      let {
+        min,
+        max,
+        year,
+        month,
+        current,
+        callback
+      } = params;
+      let today = $$.Time();
+      let firstDate = $$.Time([year, month.zeroEmbed(2), "01"].join("/"));
+      let lastDate = firstDate.getLastDayOfTheMonth();
+      let lastMonthLastDay = $$.Time(firstDate).addMonth(-1).getLastDayOfTheMonth().date;
+      let legends = [], lastMonthLastishDates = [], thisMonthDates = [], nextMonthFirstishDates = [];
+      let commonStyle = {
+        padding: 0,
+        unitWidth: 3,
+        unitHeight: 3,
+        flexCenter: true,
+        borderRadius: "3.tone.tertiary"
+      };
+      for (var i = 0; i < 7; i++) {
+        legends.push(/* @__PURE__ */ createElement(
+          Box,
+          __spreadProps(__spreadValues({
+            className: [
+              InputTimeClasses("CalendarDay"),
+              InputTimeClasses("Legend")
+            ].join(" ")
+          }, commonStyle), {
+            key: i
+          }),
+          ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"][i]
+        ));
+      }
+      for (var i = 0; i < firstDate.weekday; i++) {
+        lastMonthLastishDates.unshift(/* @__PURE__ */ createElement(
+          Box,
+          __spreadProps(__spreadValues({
+            className: [
+              InputTimeClasses("CalendarDay"),
+              InputTimeClasses("Dummy")
+            ].join(" "),
+            fontColor: "4.thin"
+          }, commonStyle), {
+            key: i
+          }),
+          lastMonthLastDay - i
+        ));
+      }
+      for (var i = 1; i <= lastDate.date; i++) {
+        let idx = i;
+        let isToday = year == today.year && month == today.month && i == today.date;
+        let isLocked = false;
+        {
+          let VAL = Number(String([year, month.zeroEmbed(2), i.zeroEmbed(2)].join("/")).replace(/\D/ig, ""));
+          if (params.min) {
+            let MIN = Number(String(params.min).replace(/\D/ig, ""));
+            if (MIN > VAL)
+              isLocked = true;
+          }
+          if (params.max) {
+            let MAX = Number(String(params.max).replace(/\D/ig, ""));
+            if (VAL > MAX)
+              isLocked = true;
+          }
+        }
+        thisMonthDates.push(/* @__PURE__ */ createElement(
+          Button.Button.Clear.R,
+          __spreadProps(__spreadValues({
+            className: [
+              InputTimeClasses("CalendarDay"),
+              InputTimeClasses("isToday_" + isToday)
+            ].join(" ")
+          }, commonStyle), {
+            onClick: () => {
+              callback([year, month, idx]);
+            },
+            tabIndex: -1,
+            key: idx,
+            isLocked,
+            fontColor: "1.clear",
+            ssEffectsOnActive: "shrink",
+            padding: 0,
+            flexCenter: true,
+            borderRadius: "sphere",
+            children: i
+          })
+        ));
+      }
+      for (var i = 1; i < 7 - lastDate.weekday; i++) {
+        nextMonthFirstishDates.push(/* @__PURE__ */ createElement(
+          Box,
+          __spreadProps(__spreadValues({
+            className: [
+              InputTimeClasses("CalendarDay"),
+              InputTimeClasses("Dummy")
+            ].join(" "),
+            fontColor: "4.thin"
+          }, commonStyle), {
+            key: i
+          }),
+          i
+        ));
+      }
+      return /* @__PURE__ */ jsxs(
+        Grid,
+        {
+          gridCols: 7,
+          gap: "1/3",
+          children: [
+            legends,
+            lastMonthLastishDates,
+            thisMonthDates,
+            nextMonthFirstishDates
+          ]
+        }
+      );
+    }
+  },
+  Month: {
+    _: (params) => {
+      let {
+        min,
+        max,
+        onValueUpdate,
+        tipsID,
+        val_value,
+        set_value
+      } = params;
+      let { year, month } = val_value;
+      return /* @__PURE__ */ jsxs(
+        Column,
+        {
+          padding: 1,
+          children: [
+            /* @__PURE__ */ jsxs(Row.Separate, { gap: 0, children: [
+              /* @__PURE__ */ jsx(
+                Row.Center,
+                {
+                  verticalAlign: "bottom",
+                  gap: "2/3",
+                  children: /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      enableUnSelected: false,
+                      value: year,
+                      options: YearOptions(),
+                      override: "force",
+                      border: "1.thin",
+                      padding: ["1/3", "2/3"],
+                      paddingRight: 2,
+                      rightIconStyles: {
+                        right: "1/3"
+                      },
+                      onUpdateValidValue: ({ value }) => {
+                        set_value({
+                          modifiedType: "update",
+                          year: Number(value),
+                          month
+                        });
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Comps.Variables.ShiftButtons,
+                {
+                  callback: (dir) => {
+                    let newYear = Math.min(Math.max(year + dir, 1900), 2100);
+                    set_value({
+                      modifiedType: "update",
+                      year: newYear,
+                      month
+                    });
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Box, { borderTop: true }),
+            Comps.Month.Months({
+              min,
+              max,
+              year: val_value.year,
+              callback: (val) => {
+                let [year2, month2] = val;
+                set_value({
+                  modifiedType: "update",
+                  year: year2,
+                  month: month2
+                });
+              }
+            }),
+            /* @__PURE__ */ jsx(
+              Comps.Variables.Footer,
+              {
+                tipsID,
+                onValueUpdate
+              }
+            )
+          ]
+        }
+      );
+    },
+    Months: (params) => {
+      let {
+        year,
+        callback
+      } = params;
+      let Today = $$.Time();
+      let Months = [];
+      for (let index = 1; index <= 12; index++) {
+        let isThisMonth = year == Today.year && index == Today.month;
+        let isLocked = false;
+        {
+          let VAL = Number(String([year, index.zeroEmbed(2)].join("/")).replace(/\D/ig, ""));
+          if (params.min) {
+            let MIN = Number(String(params.min).replace(/\D/ig, ""));
+            if (MIN > VAL)
+              isLocked = true;
+          }
+          if (params.max) {
+            let MAX = Number(String(params.max).replace(/\D/ig, ""));
+            if (VAL > MAX)
+              isLocked = true;
+          }
+        }
+        let ClassName = [
+          InputTimeClasses("Cell"),
+          isThisMonth ? InputTimeClasses("isThisMonth") : ""
+        ].join(" ");
+        Months.push(/* @__PURE__ */ jsxs(
+          Button.Button.Clear.R,
+          {
+            className: ClassName,
+            isLocked,
+            fontColor: "2.normal",
+            padding: ["2/3", 1],
+            ssEffectsOnActive: "shrink",
+            onClick: () => {
+              callback([year, index]);
+            },
+            children: [
+              index,
+              " \u6708"
+            ]
+          },
+          year + "-" + index
+        ));
+      }
+      return /* @__PURE__ */ jsx(
+        Grid,
+        {
+          gridCols: 4,
+          gap: "2/3",
+          children: Months
+        }
+      );
+    }
+  },
+  Year: {
+    _: (params) => {
+      let {
+        min,
+        max,
+        onValueUpdate,
+        tipsID,
+        val_value,
+        set_value
+      } = params;
+      let { year } = val_value;
+      return /* @__PURE__ */ jsxs(
+        Column,
+        {
+          padding: 1,
+          children: [
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                enableUnSelected: false,
+                value: year || $$.Time().year,
+                override: "force",
+                options: YearOptions({ min, max }),
+                onUpdateValidValue: ({ value }) => {
+                  set_value({
+                    modifiedType: "update",
+                    year: Number(value)
+                  });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Comps.Variables.Footer,
+              {
+                tipsID,
+                onValueUpdate,
+                onSubmit: () => {
+                  set_value({
+                    modifiedType: "update",
+                    year: Number(year || $$.Time().year)
+                  });
+                }
+              }
+            )
+          ]
+        }
+      );
+    }
+  },
+  DateWareki: {
+    _: (params) => {
+      let {
+        min,
+        max,
+        onValueUpdate,
+        tipsID,
+        val_value,
+        set_value
+      } = params;
+      let {
+        era,
+        year,
+        month,
+        date
+      } = val_value;
+      let Params = {
+        val_value,
+        set_value
+      };
+      return /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsxs(
+          Row.Left,
+          {
+            verticalAlign: "unset",
+            borderBottom: true,
+            gap: 0,
+            children: [
+              /* @__PURE__ */ jsx(Comps.DateWareki.EraSelect, __spreadValues({}, Params)),
+              /* @__PURE__ */ jsx(Box, { borderRight: true }),
+              /* @__PURE__ */ jsx(Comps.DateWareki.Calendar, __spreadValues({}, Params))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            padding: 1,
+            children: /* @__PURE__ */ jsx(
+              Comps.Variables.Footer,
+              {
+                tipsID,
+                onValueUpdate
+              }
+            )
+          }
+        )
+      ] });
+    },
+    EraSelect: (params) => {
+      let {
+        val_value,
+        set_value
+      } = params;
+      let styles = {
+        padding: ["1/2", 1.5],
+        fontColor: "3.blur"
+      };
+      let isActiveStyles = {
+        backgroundColor: "cloud",
+        fontColor: "2.normal",
+        isSemiBoldFont: true
+      };
+      return /* @__PURE__ */ jsxs(
+        Column,
+        {
+          gap: 0,
+          padding: 1,
+          children: [
+            /* @__PURE__ */ jsx(
+              Button.Button.Clear.R,
+              __spreadProps(__spreadValues({
+                color: "cloud"
+              }, styles), {
+                isActiveStyles,
+                isActive: val_value.era == "year",
+                onClick: () => {
+                  let today = $$.Time();
+                  set_value({
+                    modifiedType: "update",
+                    era: "year",
+                    year: today.year,
+                    month: today.month,
+                    date: today.date
+                  });
+                },
+                children: "\u897F\u66A6"
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Clear.R,
+              __spreadProps(__spreadValues({
+                color: "cloud"
+              }, styles), {
+                isActiveStyles,
+                isActive: val_value.era == "reiwa",
+                onClick: () => {
+                  let today = $$.Time();
+                  set_value({
+                    modifiedType: "update",
+                    era: "reiwa",
+                    year: today.year,
+                    month: today.month,
+                    date: today.date
+                  });
+                },
+                children: "\u4EE4\u548C"
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Clear.R,
+              __spreadProps(__spreadValues({
+                color: "cloud"
+              }, styles), {
+                isActiveStyles,
+                isActive: val_value.era == "heisei",
+                onClick: () => {
+                  set_value({
+                    modifiedType: "update",
+                    era: "heisei",
+                    year: 2019,
+                    month: 1,
+                    date: 1
+                  });
+                },
+                children: "\u5E73\u6210"
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Clear.R,
+              __spreadProps(__spreadValues({
+                color: "cloud"
+              }, styles), {
+                isActiveStyles,
+                isActive: val_value.era == "shouwa",
+                onClick: () => {
+                  set_value({
+                    modifiedType: "update",
+                    era: "shouwa",
+                    year: 1989,
+                    month: 1,
+                    date: 1
+                  });
+                },
+                children: "\u662D\u548C"
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Clear.R,
+              __spreadProps(__spreadValues({
+                color: "cloud"
+              }, styles), {
+                isActiveStyles,
+                isActive: val_value.era == "taisho",
+                onClick: () => {
+                  set_value({
+                    modifiedType: "update",
+                    era: "taisho",
+                    year: 1926,
+                    month: 1,
+                    date: 1
+                  });
+                },
+                children: "\u5927\u6B63"
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Clear.R,
+              __spreadProps(__spreadValues({
+                color: "cloud"
+              }, styles), {
+                isActiveStyles,
+                isActive: val_value.era == "meiji",
+                onClick: () => {
+                  set_value({
+                    modifiedType: "update",
+                    era: "meiji",
+                    year: 1912,
+                    month: 1,
+                    date: 1
+                  });
+                },
+                children: "\u660E\u6CBB"
+              })
+            )
+          ]
+        }
+      );
+    },
+    Calendar: (params) => {
+      let {
+        val_value,
+        set_value
+      } = params;
+      let yearOptions = [];
+      if (val_value.era == "year") {
+        for (let i = 1900; i < 2100; i++)
+          yearOptions.unshift({ value: i, label: i + "\u5E74" });
+      } else if (val_value.era == "reiwa") {
+        let thisReiwaYear = $$.Time().year - 2018;
+        for (let i = 1; i <= thisReiwaYear + 10; i++)
+          yearOptions.unshift({ value: 2019 + i - 1, label: "\u4EE4\u548C" + (i == 1 ? "\u5143" : i) + "\u5E74" });
+      } else if (val_value.era == "heisei") {
+        for (let i = 1; i <= 31; i++)
+          yearOptions.unshift({ value: 1989 + i - 1, label: "\u5E73\u6210" + (i == 1 ? "\u5143" : i) + "\u5E74" });
+      } else if (val_value.era == "shouwa") {
+        for (let i = 1; i <= 64; i++)
+          yearOptions.unshift({ value: 1926 + i - 1, label: "\u662D\u548C" + (i == 1 ? "\u5143" : i) + "\u5E74" });
+      } else if (val_value.era == "taisho") {
+        for (let i = 1; i <= 15; i++)
+          yearOptions.unshift({ value: 1912 + i - 1, label: "\u5927\u6B63" + (i == 1 ? "\u5143" : i) + "\u5E74" });
+      } else if (val_value.era == "meiji") {
+        for (let i = 1; i <= 45; i++)
+          yearOptions.unshift({ value: 1868 + i - 1, label: "\u660E\u6CBB" + (i == 1 ? "\u5143" : i) + "\u5E74" });
+      }
+      return /* @__PURE__ */ jsxs(
+        Column,
+        {
+          padding: 1,
+          children: [
+            /* @__PURE__ */ jsxs(Row.Separate, { children: [
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  tone: "cloud",
+                  enableUnSelected: false,
+                  override: "force",
+                  border: "1.thin",
+                  padding: ["1/3", "2/3"],
+                  paddingRight: 2,
+                  rightIconStyles: { right: "1/3" },
+                  options: yearOptions,
+                  value: val_value.year,
+                  onUpdateValidValue: ({ value }) => {
+                    set_value(__spreadProps(__spreadValues({}, val_value), {
+                      modifiedType: "update",
+                      year: Number(value)
+                    }));
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Row.Center,
+                {
+                  gap: "1/3",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Button.Button.Clear.S,
+                      {
+                        ssSphere: 2,
+                        onClick: () => {
+                          let nextMonth = val_value.month - 1;
+                          set_value({
+                            modifiedType: "update",
+                            era: val_value.era,
+                            year: nextMonth == 0 ? val_value.year - 1 : val_value.year,
+                            month: nextMonth == 0 ? 12 : nextMonth,
+                            date: 1
+                          });
+                        },
+                        children: /* @__PURE__ */ jsx(FAI.ChevronLeft, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        tone: "cloud",
+                        enableUnSelected: false,
+                        override: "force",
+                        border: "1.thin",
+                        padding: ["1/3", "2/3"],
+                        paddingRight: 2,
+                        rightIconStyles: { right: "1/3" },
+                        options: [
+                          { value: 1, label: "1\u6708" },
+                          { value: 2, label: "2\u6708" },
+                          { value: 3, label: "3\u6708" },
+                          { value: 4, label: "4\u6708" },
+                          { value: 5, label: "5\u6708" },
+                          { value: 6, label: "6\u6708" },
+                          { value: 7, label: "7\u6708" },
+                          { value: 8, label: "8\u6708" },
+                          { value: 9, label: "9\u6708" },
+                          { value: 10, label: "10\u6708" },
+                          { value: 11, label: "11\u6708" },
+                          { value: 12, label: "12\u6708" }
+                        ],
+                        value: val_value.month,
+                        onUpdateValidValue: ({ value }) => {
+                          set_value({
+                            modifiedType: "update",
+                            era: val_value.era,
+                            year: val_value.year,
+                            month: Number(value),
+                            date: 1
+                          });
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button.Button.Clear.S,
+                      {
+                        ssSphere: 2,
+                        onClick: () => {
+                          let nextMonth = val_value.month + 1;
+                          set_value({
+                            modifiedType: "update",
+                            era: val_value.era,
+                            year: nextMonth == 13 ? val_value.year + 1 : val_value.year,
+                            month: nextMonth == 13 ? 1 : nextMonth,
+                            date: 1
+                          });
+                        },
+                        children: /* @__PURE__ */ jsx(FAI.ChevronRight, {})
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Comps.DateWareki.MonthCell, __spreadValues({}, params))
+          ]
+        },
+        val_value.era
+      );
+    },
+    MonthCell: (params) => {
+      let {
+        val_value,
+        set_value
+      } = params;
+      let targetDate = $$.Time([
+        val_value.year.zeroEmbed(4),
+        val_value.month.zeroEmbed(2),
+        val_value.date.zeroEmbed(2)
+      ].join("/"));
+      if (!targetDate.validate)
+        return;
+      let weekdayOfFirstDay = targetDate.getFirstDayOfTheMonth().weekday;
+      let lastDayOfTheMonth = targetDate.getLastDayOfTheMonth();
+      let Cells = [];
+      for (let i = 0; i < 7; i++) {
+        Cells.push(/* @__PURE__ */ jsx(
+          Text.Supplement,
+          {
+            flexCenter: true,
+            fontColor: i == 0 ? "googleRed" : i == 6 ? "googleBlue" : "3.blur",
+            children: $$.transformer.weekday.shortJP(i)
+          }
+        ));
+      }
+      for (let i = 0; i < weekdayOfFirstDay; i++) {
+        let date = $$.Time(targetDate).getFirstDayOfTheMonth().addDate(i - weekdayOfFirstDay);
+        Cells.push(/* @__PURE__ */ jsx(
+          Button.Button.Sub.R,
+          {
+            color: "cloud",
+            border: "1.thin",
+            ssSquare: 3,
+            opacity: "middle",
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              set_value({
+                modifiedType: "update",
+                era: val_value.era,
+                year: date.year,
+                month: date.month,
+                date: date.date
+              });
+            },
+            children: date.date
+          }
+        ));
+      }
+      for (let i = 1; i <= lastDayOfTheMonth.date; i++) {
+        let date = $$.Time(targetDate).setDate(i);
+        Cells.push(/* @__PURE__ */ jsx(
+          Button.Button.Border.R,
+          {
+            ssSquare: 3,
+            onClick: () => {
+              set_value({
+                modifiedType: "update",
+                era: val_value.era,
+                year: date.year,
+                month: date.month,
+                date: date.date
+              });
+            },
+            children: date.date
+          }
+        ));
+      }
+      for (let i = 0; i < 7 - lastDayOfTheMonth.weekday - 1; i++) {
+        let date = $$.Time(targetDate).addMonth(1).setDate(1).addDate(i);
+        Cells.push(/* @__PURE__ */ jsx(
+          Button.Button.Sub.R,
+          {
+            color: "cloud",
+            border: "1.thin",
+            ssSquare: 3,
+            opacity: "middle",
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              set_value({
+                modifiedType: "update",
+                era: val_value.era,
+                year: date.year,
+                month: date.month,
+                date: date.date
+              });
+            },
+            children: date.date
+          }
+        ));
+      }
+      return /* @__PURE__ */ jsx(
+        Grid,
+        {
+          gridCols: 7,
+          gap: "1/4",
+          children: Cells
+        }
+      );
+    }
+  },
+  Variables: {
+    Footer: (params) => {
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          flexWrap: false,
+          gap: 1,
+          flexChilds: "even",
+          freeCSS: {
+            whiteSpace: "nowrap"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Button.Button.Border.R,
+              {
+                onClick: () => {
+                  params.onValueUpdate("");
+                },
+                tabIndex: -1,
+                flexSizing: "none",
+                padding: ["2/3", 1],
+                children: [
+                  /* @__PURE__ */ jsx(FAI.Times, {}),
+                  " \u524A\u9664"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Prime.R,
+              {
+                flexSizing: "auto",
+                onClick: () => {
+                  params.onSubmit && params.onSubmit();
+                  Tooltips.close(params.tipsID);
+                },
+                tabIndex: -1,
+                children: "\u6C7A\u5B9A",
+                padding: ["2/3", 1]
+              }
+            )
+          ]
+        }
+      );
+    },
+    ShiftButtons: (params) => {
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          flexWrap: false,
+          gap: "1/3",
+          children: [
+            /* @__PURE__ */ jsx(
+              Button.Button.Clear.R,
+              __spreadProps(__spreadValues({
+                className: InputTimeClasses("LeftButton"),
+                tabIndex: -1,
+                right: 0
+              }, Comps.Variables.ShiftButtonStyles), {
+                onClick: () => {
+                  params.callback(-1);
+                },
+                children: /* @__PURE__ */ jsx(FAI.ChevronLeft, {})
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Clear.R,
+              __spreadProps(__spreadValues({
+                className: InputTimeClasses("RightButton"),
+                tabIndex: -1,
+                left: 0
+              }, Comps.Variables.ShiftButtonStyles), {
+                onClick: () => {
+                  params.callback(1);
+                },
+                children: /* @__PURE__ */ jsx(FAI.ChevronRight, {})
+              })
+            )
+          ]
+        }
+      );
+    },
+    ShiftButtonStyles: {
+      flexCenter: true,
+      padding: 0,
+      unitWidth: 3,
+      unitHeight: 3,
+      borderRadius: "sphere",
+      position: "relative"
+    }
+  }
+};
+export {
+  Picker,
+  Picker as default
+};