amotify 0.1.60 → 0.2.0

package/dist/fn/TabBar.js

@@ -0,0 +1 @@
+import{b as t,c as l,d as m}from"../chunk-VY3566IV.js";import{jsx as a}from"react/jsx-runtime";import{useEffect as c}from"react";import s from"../atoms/Box";import x from"../atoms/Flex";import v from"./Input";const f=u=>{let i=u,{tabIndex:d,tabs:b,onTabChange:r,componentDidMount:n}=i,p=m(i,["tabIndex","tabs","onTabChange","componentDidMount"]);return c(()=>{n&&n()},[]),a(x,l(t({position:"relative",overflow:"auto",flexWrap:!1},p),{freeCSS:t({zIndex:3,whiteSpace:"nowrap"},p.freeCSS),children:a(s,{margin:[0,"auto"],children:a(v.Segmented.BottomLine,{value:d,fontColor:"inherit",override:"force",gap:0,options:b.map((e,o)=>({value:o,label:e})),onUpdateValidValue:e=>{let o=e.value[0];r&&r(o)}})})}))};export{f as TabBar,f as default};

package/dist/fn/Table/Data.d.ts

@@ -110,10 +110,10 @@ declare namespace Data {
         head: Data.HeadRow;
         rows: Data.BodyRow[];
         noRecords: ReactElement;
-        cellStyles?: TagProperty.Para;
+        cellStyles?: TagProperty.States;
         cellClassName?: string;
         cellStylesCallback?: {
-            (para: TableTypes.StylesCallbackInput): TagProperty.Para;
+            (p: TableTypes.StylesCallbackInput): TagProperty.States;
         };
         onRowClick?: TableTypes.OnRowClick;
         onOrderChanged?: {

package/dist/fn/Table/Data.js

@@ -1 +1 @@
-import{b as s,c as R,d as q}from"../../chunk-VY3566IV.js";import{Fragment as W,jsx as n,jsxs as x}from"react/jsx-runtime";import{useState as F,useEffect as G}from"react";import I from"@mingoo/jsmin";import{useStore as L}from"../../@utils";import B from"../../atoms/Box";import M from"../../atoms/Flex";import K from"../../atoms/FAI";import Y from"../../atoms/Span";import Z from"../../mols/Column";import A from"../../mols/Row";import E from"../Button";import U from"../Sheet";import O from"../Input";import{faArrowUp as ee}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faArrowDown as te}from"@fortawesome/free-solid-svg-icons/faArrowDown";import{faArrowRight as re}from"@fortawesome/free-solid-svg-icons/faArrowRight";import{faFilter as oe}from"@fortawesome/free-solid-svg-icons/faFilter";import P from"./Parts";import ne from"./Wrapper";import{DefaultCellSystemStyles as V}from"./cellStyling";import{TableClasses as m}from"../../@styles/componentClasses";const f={__memoryID:I.uuid.gen(),Header:t=>{let{val_status:e,set_status:r,KeywordFilterRows:i}=s({},t),{order:u,filter:o}=e,[w,S]=u.current,c=[],g=[...e.head];e.checker&&c.push(n(P.TH,R(s(s(R(s({},e.cellStyles),{fontWeight:"2.normal",position:"sticky",top:0,unitWidth:4,padding:0}),V({top:!0,bottom:!e.rows.length,left:!0,right:!e.colLength})),e.cellStylesCallback?e.cellStylesCallback({top:!0,bottom:!e.rows.length,left:!0,right:!e.colLength,rowIndex:0,colIndex:0,isBody:!1,isHeader:!0}):{}),{className:[m("Cell"),e.cellClassName].join(" "),freeCSS:{zIndex:2},children:n(B,{flexCenter:!0,children:n(O.Checker,{label:null,value:!1,onUpdateValidValue:({value:l})=>{let h=e.rows;h.forEach(C=>{C.checked=l}),r(R(s({},e),{rows:h}))}})})})));for(let l=0;l<e.colLength;l++){let h=g[l];if(!h)continue;let C=h.children||h.data,a=u.enabled&&u.column[l],d=o.enabled&&o.column[l],p=a?n(K,{fontSize:"1.mini",fontColor:l==w?"1.clear":"5.translucent",icon:l==w?S=="DESC"?te:ee:re}):null,_=n(W,{});if(d){let k=i.map(T=>{var N;return(N=T[l])==null?void 0:N.data});k=[...new Set(k)].order({direction:"ASC"});let v=o.current[l];if(v){let T=k.filter(y=>!v.includes(y)),N=[];k.forEach(y=>{y&&N.push({value:y,label:n(B,{flexSizing:"auto",children:y})})});let j="BUTTON-"+e.componentID+"-"+l,J=e.componentID+"-"+l,X={sheetID:J,parent:"#"+j,gravityPoint:23,type:"custom",content:x(M,{flexType:"col",border:!0,boxShadow:"3.remark",backgroundColor:"layer.1",borderRadius:1,freeCSS:{minWidth:12*20,maxWidth:12*30},children:[n(Z,{gap:"1/3",overflow:"auto",padding:"2/3",freeCSS:{maxHeight:12*30},children:n(O.Checkbox,{tone:"cloud",icon:!0,value:T,display:"flex",gap:"1/2",override:"force",options:N,hideInput:!0,name:"DTFilter-col-"+l+"-table-"+e.componentID,cellStyles:{flexSizing:"auto",padding:"2/3"},onUpdateValidValue:({value:y})=>{let H=k.filter(Q=>!y.includes(Q)),$=s({},e);$.filter.current[l]=H,r($)}})}),x(A.Separate,{gap:"2/3",padding:"2/3",horizontalAlign:"right",children:[n(E.Button.Border.S,{isRounded:!0,onClick:()=>{U.close(J)},children:"\u9589\u3058\u308B"}),n(E.Button.Prime.S,{color:"theme",isRounded:!0,ssEffectsOnActive:"shrink",onClick:()=>{let y=[];v.length||(y=k);let H=s({},e);H.filter.current[l]=y,r(H)},children:"\u5168\u9078\u629E"})]})]})};U.refresh(X,!0),_=n(B,{className:m("FilterRegion"),children:n(E.Button.Sub.S,{ssSphere:2.5,fontSize:"1.mini",className:m("Filtering_"+!!v.length),id:j,onClick:y=>{y.stopPropagation(),U.open(X)},children:n(K,{icon:oe})})})}}h=R(s(s(s(s({},e.cellStyles),h),V({top:!0,bottom:!e.rows.length,left:l==Number(e.checker),right:l==e.colLength-1})),e.cellStylesCallback?e.cellStylesCallback({top:!0,bottom:!e.rows.length,left:l==Number(e.checker),right:l==e.colLength-1,rowIndex:0,colIndex:l,isBody:!1,isHeader:!0}):{}),{ssPushable:a,className:[m("Cell"),e.cellClassName,h.className].join(" ")}),c.push(n(P.TH,R(s({fontWeight:"2.normal",position:"sticky",top:0},h),{freeCSS:s({zIndex:2},h.freeCSS),onClick:k=>{if(a){let v=s({},e),T=[l,w===l&&S=="ASC"?"DESC":"ASC"];v.order.current=T,r(v),e.onOrderChanged&&e.onOrderChanged(T)}},children:x(M,{flexType:"row-r",flexWrap:!1,height:1,borderRadius:"inherit",flexCenter:!0,children:[_,x(M,{flexSizing:0,position:"relative",borderRadius:"inherit",gap:"1/3",flexWrap:!1,horizontalAlign:"center",children:[p,C]})]})})))}return n(P.Row,{className:[m("Row"),m("HeadRow")].join(" "),children:c})},Body:t=>{let{val_status:e,PageRows:r}=t,i=[];if(r.forEach((u,o)=>{let w=[...u],S=[];e.checker&&S.push(n(P.TH,R(s(s(s({unitWidth:4,padding:0,borderRight:!0},e.cellStyles),V({top:o==0&&!e.head,bottom:o==r.length-1,left:!0,right:!e.colLength})),e.cellStylesCallback?e.cellStylesCallback({top:o==0&&!e.head,bottom:o==r.length-1,left:!0,right:!e.colLength,rowIndex:o,colIndex:0,isBody:!0,isHeader:!1}):{}),{className:[m("Cell"),e.cellClassName].join(" "),children:n(B,{flexCenter:!0,children:n(O.Checker,{label:null,value:u.checked,override:"force",onUpdateValidValue:({value:c})=>{let g=e.rows;g[o].checked=c,t.set_status(R(s({},e),{rows:g}))}})})}))),w.forEach((c,g)=>{if(!c)return;let a=c,{type:l="td"}=a,h=q(a,["type"]);h=R(s(s(s(s({},e.cellStyles),h),V({top:o==0&&!e.head,bottom:o==r.length-1,left:e.checker?!1:g==0,right:g==e.colLength-1})),e.cellStylesCallback?e.cellStylesCallback({top:o==0&&!e.head,bottom:o==r.length-1,left:e.checker?!1:g==0,right:g==e.colLength-1,rowIndex:o,colIndex:g,isBody:!0,isHeader:!1}):{}),{className:[m("Cell"),e.cellClassName,h.className].join(" ")});let C=P[l=="td"?"TD":"TH"];S.push(n(C,s({},h),g))}),i.push(n(P.Row,{className:[m("Row"),m("BodyRow")].join(" "),children:S,onClick:c=>{e.onRowClick&&e.onRowClick(JSON.parse(u.rowID),c)}},o))}),!r.length){let u=n(B,{padding:2,fontColor:"4.thin",freeCSS:{textAlign:"center"},borderTop:"1.thin",children:"\u30C6\u30FC\u30D6\u30EB\u304C\u3042\u308A\u307E\u305B\u3093"});e.noRecords&&(u=n(W,{children:e.noRecords})),i.push(n(P.Row,{className:[m("Row"),m("BodyRow"),m("DataNotFound")].join(" "),children:n(P.TD,{colSpan:e.colLength,className:m("Cell"),children:u})},"dataNotFound"))}return n(W,{children:i})},Core:t=>{let{val_status:e,set_status:r}=t,{searchKeyword:i,filter:u,order:o,paging:w}=e,S=[...e.rows],c=[...e.rows],g=[...e.rows],l=[...e.rows];if(i&&(c=S.filter(a=>(a.__sys4SearchKey||"").match(new RegExp(i,"i"))?1:0),g=[...c],l=[...c]),u.enabled)for(let a=0;a<e.colLength;a++){let d=u.column[a],p=u.current[a];d&&p&&p.length&&(g=g.filter(_=>!p.includes(_[a].data)),l=[...g])}o.enabled&&(g=g.order({direction:o.current[1],keys:[o.current[0],"orderIndex"]}),l=[...g]);{let{currentPageIndex:a,rowLength:d}=w;l=[...l].splice((a-1)*d,d)}let h=f.__memoryID+"_"+e.tableID,C={tableComponentDidMount:!0,totalRows:S.length,pageRows:l.length,filteredRows:g.length,filter:e.filter,order:e.order,paging:e.paging,searchKeyword:e.searchKeyword};return L.update({key:h,value:{status:C,updatePageIndex:a=>{let d=Math.min(Math.max(1,a),e.paging.pageLength),p=s({},e);p.paging.currentPageIndex=d,r(p)},updateRowLength:a=>{let d=s({},e);d.paging={rowLength:a,currentPageIndex:1,pageLength:Math.ceil(g.length/a)},r(d)},updateKeyword:a=>{I.interval.clear("InputSearchTime"),I.interval.standBy("InputSearchTime",200,()=>{let d=s({},e);d.searchKeyword=a,d.paging.currentPageIndex=1,d.filter.current=d.filter.current.map(()=>[]),r(d)})},getRowData:()=>{let a=[...S];return o.enabled&&(a=a.order({direction:o.current[1],keys:[o.current[0],"orderIndex"]})),a.forEach(d=>{d.currentPage=!1,d.filtered=!1}),l.forEach(d=>{let{rowID:p}=d;a.find(_=>_.rowID==p).currentPage=!0}),g.forEach(d=>{let{rowID:p}=d;a.find(_=>_.rowID==p).filtered=!0}),a}}}),G(()=>{let a=f.Propagations[e.tableID]||[];Object.keys(a).forEach(d=>{let p=L.get(d);p!=null&&p.refresh&&p.refresh()})}),n(B,{className:m("TableBase"),children:x(P.Table,{className:m("Table"),children:[n(f.Header,{val_status:e,set_status:r,KeywordFilterRows:c}),n(f.Body,{val_status:e,set_status:r,PageRows:l})]})})},Propagations:{},DataLeveler:t=>{var e,r;return t=s({},t),t.filter=(e=t.filter)!=null?e:!1,t.filter=Array.from({length:t.colLength}).map((i,u)=>{var o;return I.is.boolean(t.filter)?t.filter:(o=t.filter[u])!=null?o:!1}),t.order=(r=t.order)!=null?r:!0,t.order=Array.from({length:t.colLength}).map((i,u)=>{var o;return I.is.boolean(t.order)?t.order:(o=t.order[u])!=null?o:!0}),t=s({checker:!1,searchKeyword:"",filter:!1,order:!0,defaultOrder:[0,"ASC"]},t),t.rows.forEach((i,u)=>{i.rowID=JSON.stringify(i.rowID||u);let o=[];i.forEach((w,S)=>{let{data:c,children:g,orderIndex:l}=w;w.orderIndex=I.is.exist(l)?String(l):String(c),w.children=g||String(c),o.push(String(w.data))}),i.__sys4SearchKey=o.join("/")}),n(f.StateManager,s({eventID:I.uuid.gen()},t))},StateManager:t=>{let{colLength:e,eventID:r,checker:i=!1,searchKeyword:u="",filter:o,order:w,defaultOrder:S=[0,"ASC"],pageRowLength:c=30}=t,[g]=F(I.uuid.gen()),l={tableID:t.tableID||g,componentID:g,colLength:e,checker:i,searchKeyword:u,filter:{enabled:o!==!1,column:o,current:Array.from({length:e},()=>[])},order:{enabled:w!==!1,column:w,current:S},paging:{rowLength:c,pageLength:Math.ceil(t.rows.length/c),currentPageIndex:1},head:t.head,rows:t.rows,noRecords:t.noRecords,cellStyles:t.cellStyles||{},cellClassName:t.cellClassName||"",cellStylesCallback:t.cellStylesCallback,onRowClick:t.onRowClick,onOrderChanged:t.onOrderChanged},[h,C]=F(l),[a,d]=F(t.eventID);return a!=t.eventID&&(d(t.eventID),C(l)),n(f.Core,{val_status:h,set_status:C})}},b={__memoryID:f.__memoryID,useStatus:t=>{var o;let[e]=F(I.uuid.gen()),[r,i]=F(I.uuid.gen()),u=f.__memoryID+"_"+t;return G(()=>(f.Propagations[t]=R(s({},f.Propagations[t]),{[e]:1}),L.set({key:e,value:{refresh:()=>{i(I.uuid.gen())}}}),()=>{delete f.Propagations[t][e]}),[]),((o=L.get(u))==null?void 0:o.status)||{tableComponentDidMount:!1}},getRowData:t=>{let e=L.get(f.__memoryID+"_"+t);if(e!=null&&e.getRowData)return e.getRowData()},setPageIndex:(t,e)=>{let r=L.get(f.__memoryID+"_"+t);r!=null&&r.updatePageIndex&&r.updatePageIndex(e)},setRowLength:(t,e)=>{let r=L.get(f.__memoryID+"_"+t);r!=null&&r.updateRowLength&&r.updateRowLength(e)},setSearchKeyword:(t,e)=>{let r=L.get(f.__memoryID+"_"+t);r!=null&&r.updateKeyword&&r.updateKeyword(e)}},z={SearchInput:t=>{let e=b.useStatus(t.tableID);return e.tableComponentDidMount?n(O.Text.Normal,{placeholder:"\u691C\u7D22...",clearButton:!0,padding:"2/3",paddingRight:3,rightIcon:n(O.Comps.RightIcon,{fontColor:"5.translucent",right:"2/3",children:n(K.Search,{})}),override:"force",value:e.searchKeyword,onUpdateValidValue:({value:r})=>{b.setSearchKeyword(t.tableID,r)}}):null},Info:t=>{let e=b.useStatus(t.tableID);if(!e.tableComponentDidMount)return null;let r=e.filteredRows.ratio(e.totalRows)||0;return x(M,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[n(Y,{fontSize:"4.thirdTitle",fontColor:"theme",children:e.filteredRows.toLocaleString()}),"/ ",e.totalRows.toLocaleString(),"\u4EF6 (",r,"%)"]})},Paging:t=>{let e=b.useStatus(t.tableID);if(!e.tableComponentDidMount)return null;let r=[];for(let i=0;i<e.paging.pageLength;i++)r.push({value:i+1,label:(i+1).toString()});return x(A.Center,{children:[x(A.Center,{gap:"1/2",children:["\u30DA\u30FC\u30B8 :",n(O.Select,{enableUnSelected:!1,padding:["1/3","2/3"],rightIcon:!1,placeholder:"",override:"force",value:e.paging.currentPageIndex,options:r,onUpdateValidValue:({value:i})=>{b.setPageIndex(t.tableID,i)}}),"/ ",e.paging.pageLength]}),x(A.Right,{gap:"1/2",children:[n(E.Button.Sub.R,{ssSphere:3,onClick:()=>{if(e.paging.currentPageIndex==1){b.setPageIndex(t.tableID,e.paging.pageLength);return}b.setPageIndex(t.tableID,e.paging.currentPageIndex-1)},children:n(K.ChevronLeft,{})}),n(E.Button.Sub.R,{ssSphere:3,onClick:()=>{if(e.paging.currentPageIndex==e.paging.pageLength){b.setPageIndex(t.tableID,1);return}b.setPageIndex(t.tableID,e.paging.currentPageIndex+1)},children:n(K.ChevronRight,{})})]})]})},RowLength:t=>{let e=b.useStatus(t.tableID);if(!e.tableComponentDidMount)return null;let r=e.paging.rowLength,i=0,u=t.lengthSelect.map(o=>(i|=+(o==r),{value:o,label:o.toString()}));return i||u.push({value:r,label:r.toString()}),u=u.order({direction:"ASC",keys:["value"]}),x(A.Center,{gap:"1/2",children:["\u4EF6\u6570 :",n(O.Select,{enableUnSelected:!1,rightIcon:!1,placeholder:"\u9078\u629E",override:"force",padding:["1/3","2/3"],value:e.paging.rowLength,options:u,onUpdateValidValue:({value:o})=>{b.setRowLength(t.tableID,o)}})]})}},le=t=>n(ne,R(s({},t),{type:"data",JSXChildren:f.DataLeveler})),D=le;D.__memoryID=f.__memoryID,D.useStatus=b.useStatus,D.getRowData=b.getRowData,D.setPageIndex=b.setPageIndex,D.setRowLength=b.setRowLength,D.setSearchKeyword=b.setSearchKeyword,D.Info=z.Info,D.Paging=z.Paging,D.RowLength=z.RowLength,D.SearchInput=z.SearchInput;export{D as Data,D as default};
+import{b as s,c as R,d as q}from"../../chunk-VY3566IV.js";import{Fragment as W,jsx as o,jsxs as _}from"react/jsx-runtime";import{useState as F,useEffect as G}from"react";import w from"@mingoo/jsmin";import{useStore as k}from"../../@utils";import O from"../../atoms/Box";import M from"../../atoms/Flex";import K from"../../atoms/FAI";import Y from"../../atoms/Span";import Z from"../../mols/Column";import A from"../../mols/Row";import E from"../Button";import U from"../Sheet";import T from"../Input";import{faArrowUp as ee}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faArrowDown as te}from"@fortawesome/free-solid-svg-icons/faArrowDown";import{faArrowRight as re}from"@fortawesome/free-solid-svg-icons/faArrowRight";import{faFilter as ae}from"@fortawesome/free-solid-svg-icons/faFilter";import x from"./Parts";import oe from"./Wrapper";import{DefaultCellSystemStyles as V}from"./cellStyling";import{TableClasses as m}from"../../@styles/componentClasses";const f={__memoryID:w.uuid.gen(),Header:t=>{let{val_status:e,set_status:r,KeywordFilterRows:i}=s({},t),{order:u,filter:a}=e,[S,y]=u.current,h=[],c=[...e.head];e.checker&&h.push(o(x.TH,R(s(s(R(s({},e.cellStyles),{fontWeight:"2.normal",position:"sticky",top:0,unitWidth:4,padding:0}),V({top:!0,bottom:!e.rows.length,left:!0,right:!e.colLength})),e.cellStylesCallback?e.cellStylesCallback({top:!0,bottom:!e.rows.length,left:!0,right:!e.colLength,rowIndex:0,colIndex:0,isBody:!1,isHeader:!0}):{}),{className:[m("Cell"),e.cellClassName].join(" "),freeCSS:{zIndex:2},children:o(O,{flexCenter:!0,children:o(T.Checker,{label:null,value:!1,onUpdateValidValue:({value:n})=>{let g=e.rows;g.forEach(C=>{C.checked=n}),r(R(s({},e),{rows:g}))}})})}),-1));for(let n=0;n<e.colLength;n++){let g=c[n];if(!g)continue;let C=g.children||g.data,l=u.enabled&&u.column[n],d=a.enabled&&a.column[n],p=l?o(K,{fontSize:"1.mini",fontColor:n==S?"1.clear":"5.translucent",icon:n==S?y=="DESC"?te:ee:re}):null,P=o(W,{});if(d){let L=i.map(B=>{var N;return(N=B[n])==null?void 0:N.data});L=[...new Set(L)].order({direction:"ASC"});let v=a.current[n];if(v){let B=L.filter(D=>!v.includes(D)),N=[];L.forEach(D=>{D&&N.push({value:D,label:o(O,{flexSizing:"auto",children:D})})});let j="BUTTON-"+e.componentID+"-"+n,J=e.componentID+"-"+n,X={sheetID:J,parent:"#"+j,gravityPoint:23,type:"custom",content:_(M,{flexType:"col",border:!0,boxShadow:"3.remark",backgroundColor:"layer.1",borderRadius:1,freeCSS:{minWidth:12*20,maxWidth:12*30},children:[o(Z,{gap:"1/3",overflow:"auto",padding:"2/3",freeCSS:{maxHeight:12*30},children:o(T.Checkbox,{tone:"cloud",icon:!0,value:B,display:"flex",gap:"1/2",override:"force",options:N,hideInput:!0,name:"DTFilter-col-"+n+"-table-"+e.componentID,cellStyles:{flexSizing:"auto",padding:"2/3"},onUpdateValidValue:({value:D})=>{let H=L.filter(Q=>!D.includes(Q)),$=s({},e);$.filter.current[n]=H,r($)}})}),_(A.Separate,{gap:"2/3",padding:"2/3",horizontalAlign:"right",children:[o(E.Button.Border.S,{isRounded:!0,onClick:()=>{U.close(J)},children:"\u9589\u3058\u308B"}),o(E.Button.Prime.S,{color:"theme",isRounded:!0,ssEffectsOnActive:"shrink",onClick:()=>{let D=[];v.length||(D=L);let H=s({},e);H.filter.current[n]=D,r(H)},children:"\u5168\u9078\u629E"})]})]})};U.refresh(X,!0),P=o(O,{className:m("FilterRegion"),children:o(E.Button.Sub.S,{ssSphere:2.5,fontSize:"1.mini",className:m("Filtering_"+!!v.length),id:j,onClick:D=>{D.stopPropagation(),U.open(X)},children:o(K,{icon:ae})})})}}g=R(s(s(s(s({},e.cellStyles),g),V({top:!0,bottom:!e.rows.length,left:n==Number(e.checker),right:n==e.colLength-1})),e.cellStylesCallback?e.cellStylesCallback({top:!0,bottom:!e.rows.length,left:n==Number(e.checker),right:n==e.colLength-1,rowIndex:0,colIndex:n,isBody:!1,isHeader:!0}):{}),{ssPushable:l,className:[m("Cell"),e.cellClassName,g.className].join(" ")}),delete g.orderIndex,h.push(o(x.TH,R(s({fontWeight:"2.normal",position:"sticky",top:0},g),{freeCSS:s({zIndex:2},g.freeCSS),onClick:L=>{if(l){let v=s({},e),B=[n,S===n&&y=="ASC"?"DESC":"ASC"];v.order.current=B,r(v),e.onOrderChanged&&e.onOrderChanged(B)}},children:_(M,{flexType:"row-r",flexWrap:!1,height:1,borderRadius:"inherit",flexCenter:!0,children:[P,_(M,{flexSizing:0,position:"relative",borderRadius:"inherit",gap:"1/3",flexWrap:!1,horizontalAlign:"center",children:[p,C]})]})}),n))}return o(x.Row,{className:[m("Row"),m("HeadRow")].join(" "),children:h})},Body:t=>{let{val_status:e,PageRows:r}=t,i=[];if(r.forEach((u,a)=>{let S=[...u],y=[];e.checker&&y.push(o(x.TH,R(s(s(s({unitWidth:4,padding:0,borderRight:!0},e.cellStyles),V({top:a==0&&!e.head,bottom:a==r.length-1,left:!0,right:!e.colLength})),e.cellStylesCallback?e.cellStylesCallback({top:a==0&&!e.head,bottom:a==r.length-1,left:!0,right:!e.colLength,rowIndex:a,colIndex:0,isBody:!0,isHeader:!1}):{}),{className:[m("Cell"),e.cellClassName].join(" "),children:o(O,{flexCenter:!0,children:o(T.Checker,{label:null,value:u.checked,override:"force",onUpdateValidValue:({value:h})=>{let c=e.rows;c[a].checked=h,t.set_status(R(s({},e),{rows:c}))}})})}),-1)),S.forEach((h,c)=>{if(!h)return;let l=h,{type:n="td"}=l,g=q(l,["type"]);g=R(s(s(s(s({},e.cellStyles),g),V({top:a==0&&!e.head,bottom:a==r.length-1,left:e.checker?!1:c==0,right:c==e.colLength-1})),e.cellStylesCallback?e.cellStylesCallback({top:a==0&&!e.head,bottom:a==r.length-1,left:e.checker?!1:c==0,right:c==e.colLength-1,rowIndex:a,colIndex:c,isBody:!0,isHeader:!1}):{}),{className:[m("Cell"),e.cellClassName,g.className].join(" ")}),delete g.orderIndex;let C=x[n=="td"?"TD":"TH"];y.push(o(C,s({},g),c))}),i.push(o(x.Row,{className:[m("Row"),m("BodyRow")].join(" "),children:y,onClick:h=>{e.onRowClick&&e.onRowClick(JSON.parse(u.rowID),h)}},a))}),!r.length){let u=o(O,{padding:2,fontColor:"4.thin",freeCSS:{textAlign:"center"},borderTop:"1.thin",children:"\u30C6\u30FC\u30D6\u30EB\u304C\u3042\u308A\u307E\u305B\u3093"});e.noRecords&&(u=o(W,{children:e.noRecords})),i.push(o(x.Row,{className:[m("Row"),m("BodyRow"),m("DataNotFound")].join(" "),children:o(x.TD,{colSpan:e.colLength,className:m("Cell"),children:u})},"dataNotFound"))}return o(W,{children:i})},Core:t=>{let{val_status:e,set_status:r}=t,{searchKeyword:i,filter:u,order:a,paging:S}=e,y=[...e.rows],h=[...e.rows],c=[...e.rows],n=[...e.rows];if(i&&(h=y.filter(l=>(l.__sys4SearchKey||"").match(new RegExp(i,"i"))?1:0),c=[...h],n=[...h]),u.enabled)for(let l=0;l<e.colLength;l++){let d=u.column[l],p=u.current[l];d&&p&&p.length&&(c=c.filter(P=>!p.includes(P[l].data)),n=[...c])}a.enabled&&(c=c.order({direction:a.current[1],keys:[a.current[0],"orderIndex"]}),n=[...c]);{let{currentPageIndex:l,rowLength:d}=S;n=[...n].splice((l-1)*d,d)}let g=f.__memoryID+"_"+e.tableID,C={tableComponentDidMount:!0,totalRows:y.length,pageRows:n.length,filteredRows:c.length,filter:e.filter,order:e.order,paging:e.paging,searchKeyword:e.searchKeyword};return k.update({[g]:{status:C,updatePageIndex:l=>{let d=Math.min(Math.max(1,l),e.paging.pageLength),p=s({},e);p.paging.currentPageIndex=d,r(p)},updateRowLength:l=>{let d=s({},e);d.paging={rowLength:l,currentPageIndex:1,pageLength:Math.ceil(c.length/l)},r(d)},updateKeyword:l=>{w.interval.clear("InputSearchTime"),w.interval.standBy("InputSearchTime",200,()=>{let d=s({},e);d.searchKeyword=l,d.paging.currentPageIndex=1,d.filter.current=d.filter.current.map(()=>[]),r(d)})},getRowData:()=>{let l=[...y];return a.enabled&&(l=l.order({direction:a.current[1],keys:[a.current[0],"orderIndex"]})),l.forEach(d=>{d.currentPage=!1,d.filtered=!1}),n.forEach(d=>{let{rowID:p}=d;l.find(P=>P.rowID==p).currentPage=!0}),c.forEach(d=>{let{rowID:p}=d;l.find(P=>P.rowID==p).filtered=!0}),l}}}),G(()=>{let l=f.Propagations[e.tableID]||[];Object.keys(l).forEach(d=>{let p=k.get(d);p!=null&&p.refresh&&p.refresh()})}),o(O,{className:m("TableBase"),children:o(x.Table,{className:m("Table"),children:_(x.Body,{children:[o(f.Header,{val_status:e,set_status:r,KeywordFilterRows:h}),o(f.Body,{val_status:e,set_status:r,PageRows:n})]})})})},Propagations:{},DataLeveler:t=>{var e,r;return t=s({},t),t.filter=(e=t.filter)!=null?e:!1,t.filter=Array.from({length:t.colLength}).map((i,u)=>{var a;return w.is.boolean(t.filter)?t.filter:(a=t.filter[u])!=null?a:!1}),t.order=(r=t.order)!=null?r:!0,t.order=Array.from({length:t.colLength}).map((i,u)=>{var a;return w.is.boolean(t.order)?t.order:(a=t.order[u])!=null?a:!0}),t=s({checker:!1,searchKeyword:"",filter:!1,order:!0,defaultOrder:[0,"ASC"]},t),t.rows.forEach((i,u)=>{i.rowID=JSON.stringify(i.rowID||u);let a=[];i.forEach((S,y)=>{let{data:h,children:c,orderIndex:n}=S;S.orderIndex=w.is.exist(n)?String(n):String(h),S.children=c||String(h),a.push(String(S.data))}),i.__sys4SearchKey=a.join("/")}),o(f.StateManager,s({eventID:w.uuid.gen()},t))},StateManager:t=>{let{colLength:e,eventID:r,checker:i=!1,searchKeyword:u="",filter:a,order:S,defaultOrder:y=[0,"ASC"],pageRowLength:h=30}=t,[c]=F(w.uuid.gen()),n={tableID:t.tableID||c,componentID:c,colLength:e,checker:i,searchKeyword:u,filter:{enabled:a!==!1,column:a,current:Array.from({length:e},()=>[])},order:{enabled:S!==!1,column:S,current:y},paging:{rowLength:h,pageLength:Math.ceil(t.rows.length/h),currentPageIndex:1},head:t.head,rows:t.rows,noRecords:t.noRecords,cellStyles:t.cellStyles||{},cellClassName:t.cellClassName||"",cellStylesCallback:t.cellStylesCallback,onRowClick:t.onRowClick,onOrderChanged:t.onOrderChanged},[g,C]=F(n),[l,d]=F(t.eventID);return l!=t.eventID&&(d(t.eventID),C(n)),o(f.Core,{val_status:g,set_status:C})}},b={__memoryID:f.__memoryID,useStatus:t=>{var a;let[e]=F(w.uuid.gen()),[r,i]=F(w.uuid.gen()),u=f.__memoryID+"_"+t;return G(()=>(f.Propagations[t]=R(s({},f.Propagations[t]),{[e]:1}),k.set({[e]:{refresh:()=>{i(w.uuid.gen())}}}),()=>{delete f.Propagations[t][e]}),[]),((a=k.get(u))==null?void 0:a.status)||{tableComponentDidMount:!1}},getRowData:t=>{let e=k.get(f.__memoryID+"_"+t);if(e!=null&&e.getRowData)return e.getRowData()},setPageIndex:(t,e)=>{let r=k.get(f.__memoryID+"_"+t);r!=null&&r.updatePageIndex&&r.updatePageIndex(e)},setRowLength:(t,e)=>{let r=k.get(f.__memoryID+"_"+t);r!=null&&r.updateRowLength&&r.updateRowLength(e)},setSearchKeyword:(t,e)=>{let r=k.get(f.__memoryID+"_"+t);r!=null&&r.updateKeyword&&r.updateKeyword(e)}},z={SearchInput:t=>{let e=b.useStatus(t.tableID);return e.tableComponentDidMount?o(T.Text.Normal,{placeholder:"\u691C\u7D22...",clearButton:!0,padding:"2/3",paddingRight:3,rightIcon:o(T.Comps.RightIcon,{fontColor:"5.translucent",right:"2/3",children:o(K.Search,{})}),override:"force",value:e.searchKeyword,onUpdateValidValue:({value:r})=>{w.interval.clear("InputSearchTime"),w.interval.standBy("InputSearchTime",500,()=>{b.setSearchKeyword(t.tableID,r)})}}):null},Info:t=>{let e=b.useStatus(t.tableID);if(!e.tableComponentDidMount)return null;let r=e.filteredRows.ratio(e.totalRows)||0;return _(M,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[o(Y,{fontSize:"4.thirdTitle",fontColor:"theme",children:e.filteredRows.toLocaleString()}),"/ ",e.totalRows.toLocaleString(),"\u4EF6 (",r,"%)"]})},Paging:t=>{let e=b.useStatus(t.tableID);if(!e.tableComponentDidMount)return null;let r=[];for(let i=0;i<e.paging.pageLength;i++)r.push({value:i+1,label:(i+1).toString()});return _(A.Center,{children:[_(A.Center,{gap:"1/2",children:["\u30DA\u30FC\u30B8 :",o(T.Select,{enableUnSelected:!1,padding:["1/3","2/3"],rightIcon:!1,placeholder:"",override:"force",value:e.paging.currentPageIndex,options:r,onUpdateValidValue:({value:i})=>{b.setPageIndex(t.tableID,i)}}),"/ ",e.paging.pageLength]}),_(A.Right,{gap:"1/2",children:[o(E.Button.Sub.R,{ssSphere:3,onClick:()=>{if(e.paging.currentPageIndex==1){b.setPageIndex(t.tableID,e.paging.pageLength);return}b.setPageIndex(t.tableID,e.paging.currentPageIndex-1)},children:o(K.ChevronLeft,{})}),o(E.Button.Sub.R,{ssSphere:3,onClick:()=>{if(e.paging.currentPageIndex==e.paging.pageLength){b.setPageIndex(t.tableID,1);return}b.setPageIndex(t.tableID,e.paging.currentPageIndex+1)},children:o(K.ChevronRight,{})})]})]})},RowLength:t=>{let e=b.useStatus(t.tableID);if(!e.tableComponentDidMount)return null;let r=e.paging.rowLength,i=0,u=t.lengthSelect.map(a=>(i|=+(a==r),{value:a,label:a.toString()}));return i||u.push({value:r,label:r.toString()}),u=u.order({direction:"ASC",keys:["value"]}),_(A.Center,{gap:"1/2",children:["\u4EF6\u6570 :",o(T.Select,{enableUnSelected:!1,rightIcon:!1,placeholder:"\u9078\u629E",override:"force",padding:["1/3","2/3"],value:e.paging.rowLength,options:u,onUpdateValidValue:({value:a})=>{b.setRowLength(t.tableID,a)}})]})}},ne=t=>o(oe,R(s({},t),{type:"data",JSXChildren:f.DataLeveler})),I=ne;I.__memoryID=f.__memoryID,I.useStatus=b.useStatus,I.getRowData=b.getRowData,I.setPageIndex=b.setPageIndex,I.setRowLength=b.setRowLength,I.setSearchKeyword=b.setSearchKeyword,I.Info=z.Info,I.Paging=z.Paging,I.RowLength=z.RowLength,I.SearchInput=z.SearchInput;export{I as Data,I as default};

package/dist/fn/Table/Drag.d.ts

@@ -14,5 +14,5 @@ declare namespace Drag {
         };
     };
 }
-declare const Drag: (para: Drag.Input) => import("react/jsx-runtime").JSX.Element;
+declare const Drag: (p: Drag.Input) => import("react/jsx-runtime").JSX.Element;
 export { Drag, Drag as default };

package/dist/fn/Table/Drag.js

@@ -1 +1 @@
-import{b as r,c as w,e as I}from"../../chunk-VY3566IV.js";import{Fragment as J,jsx as n,jsxs as j}from"react/jsx-runtime";import{useState as k,useEffect as x}from"react";import T from"@mingoo/jsmin";import{$$fromRoot as N,useStore as R}from"../../@utils";import v from"../../atoms/FAI";import M from"../Button";import L from"../Tooltips";import b from"./Parts";import z from"./Wrapper";import{faGripVertical as O}from"@fortawesome/free-solid-svg-icons/faGripVertical";import{DefaultCellSystemStyles as S}from"./cellStyling";import{TableClasses as g}from"../../@styles/componentClasses";const E={HeadRow:e=>{let{cellStyles:t={},cellClassName:m="",cellStylesCallback:a,colLength:s,head:o,rows:i}=e;if(!o)return null;let c=[];for(let p=0;p<s;p++){let u=o[p],D=b[u.type=="th"?"TH":"TD"];c.push(n(D,r(w(r(r(r({},t),S({top:!0,bottom:!i.length,left:p==0,right:p==s-1})),a?a({top:!0,bottom:!i.length,left:p==0,right:p==s-1,rowIndex:0,colIndex:p,isBody:!1,isHeader:!0}):{}),{className:[g("Cell"),m,u.className].join(" ")}),u)))}return n(b.Row,{className:[g("Row"),g("HeadRow")].join(" "),children:c})},BodyRows:e=>{let{cellStyles:t={},cellClassName:m="",cellStylesCallback:a,head:s,rows:o,colLength:i,onOrderChanged:c}=e,[p]=k(T.uuid.gen()),[u,D]=k({rows:o,origin:0,to:NaN}),B=[];if(u.rows.forEach((y,l)=>{let h=[];h.push(n(b.TH,w(r(r(r({padding:0,borderRight:!0},t),S({top:l==0&&!s,bottom:l==o.length-1,left:!0,right:!1})),a?a({top:l==0&&!s,bottom:l==o.length-1,left:!0,right:!1,rowIndex:l,colIndex:0,isBody:!0,isHeader:!1}):{}),{className:[g("Cell"),g("Draggable"),m].join(" "),children:n(M.Button.Clear.R,{className:g("DragableButton"),fontColor:"4.thin",fontSize:"3.paragraph",margin:"auto",tabIndex:-1,ssSphere:3,onMouseDown:d=>{C.Start(d,{id:p,index:l,rows:u.rows,maxLength:o.length})},onTouchStart:d=>{C.Start(d,{id:p,index:l,rows:u.rows,maxLength:o.length})},children:n(v,{icon:O})})}),"DragOrigin")),y.forEach((d,f)=>{d=r({},d);let H=b[d.type=="th"?"TH":"TD"];h.push(n(H,r(w(r(r(r({},t),S({top:!!s&&!s.length,bottom:l==o.length-1,left:!1,right:f==i-2})),a?a({top:!!s&&!s.length,bottom:l==o.length-1,left:!1,right:f==i-2,rowIndex:l,colIndex:f,isBody:!0,isHeader:!1}):{}),{className:[g("Cell"),m,d.className].join(" ")}),d)))}),B.push(n(b.Row,{id:"TableRow-"+p+"-"+l,"data-rowId":l,className:[g("Row"),g("BodyRow")].join(" "),children:h},l))}),!isNaN(u.to)){let{origin:y,to:l}=u,h=[];h.push(n(b.TH,{backgroundColor:"theme.opa.low",padding:0,borderRight:"2.normal",className:[g("Cell"),g("Draggable"),m].join(" "),children:n(v.ArrowRight,{fontColor:"theme"})},"dragButton")),u.rows[y].forEach((f,H)=>{f=r({},f);let $=b[f.type=="th"?"TH":"TD"];h.push(n($,r(w(r(r(r({},t),S({top:!1,bottom:!1,left:!1,right:!1})),a?a({top:!1,bottom:!1,left:!1,right:!1,rowIndex:-1,colIndex:-1,isBody:!0,isHeader:!1}):{}),{className:[g("Cell"),m,f.className].join(" "),backgroundColor:"theme.opa.low"}),f)))}),B.splice(l,0,n(b.Row,{className:[g("Row"),g("Pre")].join(" "),children:h},"preSet"))}return x(()=>{R.set({key:p,value:{swap:(y,l)=>{if(l||l==0){let h=u.rows[y],d=[...u.rows];d.splice(y,1),d.splice(l-(y<l?1:0),0,h),D({rows:d,origin:0,to:NaN}),c(d.map(f=>JSON.parse(f.rowID)))}},preSet:y=>{let{origin:l,index:h}=y;D({rows:u.rows,origin:l,to:h})}}})}),x(()=>()=>{R.delete(p)},[]),n(J,{children:B})},Drag:e=>(e=r({},e),e.colLength=e.colLength+1,e.head&&(e.head=[{children:n(M.Button.Clear.R,{ssSphere:3,fontSize:"3.paragraph",fontColor:"theme",onMouseOver:t=>{L.open({parent:t.currentTarget,content:j(L.Comps.Body,{children:[n(v,{icon:O}),"\u30DC\u30BF\u30F3\u3092\u30C9\u30E9\u30C3\u30B0\u3057\u3066\u9806\u5E8F\u3092\u5909\u66F4"]})})},children:n(v.QuestionCircle,{})}),padding:[0,1],unitWidth:4},...e.head]),e.rows=e.rows.map((t,m)=>(t.rowID=JSON.stringify(t.rowID||m),t)),j(b.Table,{className:g("Table"),children:[n(E.HeadRow,r({},e)),n(E.BodyRows,r({},e))]}))},P=e=>n(z,w(r({type:"drag"},e),{JSXChildren:E.Drag})),C={Start:function(e,t){return I(this,null,function*(){e.stopPropagation(),e.preventDefault();let{id:m,index:a,rows:s,maxLength:o}=t;N("#TableRow-"+m+"-"+a).addClass(g("DraggerOrigin")),T(document).addEvent({eventID:"DragMouseMove",eventType:"mousemove",callback:i=>{C.Move(i,t)},options:{passive:!1}}).addEvent({eventID:"DragTouchMove",eventType:"touchmove",callback:i=>{C.Move(i,t)},options:{passive:!1}}).addEvent({eventID:"DragMouseUp",eventType:"mouseup",callback:i=>{C.End(i,t)}}).addEvent({eventID:"DragTouchEnd",eventType:"touchend",callback:i=>{C.End(i,t)}})})},Move:function(e,t){let{id:m,maxLength:a}=t,s=T.getCursor(e).y-T.getScreenSize().scrollY;for(let o=0;o<a;o++){let i=N("#TableRow-"+m+"-"+o),{top:c,bottom:p,height:u}=i.position();o==0&&s<c?t.insertIndex=0:o===a-1&&p<=s?t.insertIndex=a:s>=c&&s<p&&(t.insertIndex=o+1)}{let{index:o,insertIndex:i}=t,c=R.get(m);c&&c.preSet&&c.preSet({origin:o,index:i})}return e.stopPropagation(),e.preventDefault(),!1},End:function(e,t){let{id:m,index:a,insertIndex:s}=t,o=R.get(m);o&&o.swap&&o.swap(a,s),N("#TableRow-"+m+"-"+a).removeClass(g("DraggerOrigin")),T(document).removeEvent(["DragMouseMove","DragTouchMove","DragMouseUp","DragTouchEnd"])}};export{P as Drag,P as default};
+import{b as a,c as w,e as I}from"../../chunk-VY3566IV.js";import{Fragment as J,jsx as l,jsxs as j}from"react/jsx-runtime";import{useState as k,useEffect as x}from"react";import C from"@mingoo/jsmin";import{$$fromRoot as N,useStore as R}from"../../@utils";import v from"../../atoms/FAI";import M from"../Button";import L from"../Tooltips";import y from"./Parts";import z from"./Wrapper";import{faGripVertical as P}from"@fortawesome/free-solid-svg-icons/faGripVertical";import{DefaultCellSystemStyles as B}from"./cellStyling";import{TableClasses as g}from"../../@styles/componentClasses";const E={HeadRow:e=>{let{cellStyles:t={},cellClassName:m="",cellStylesCallback:s,colLength:n,head:o,rows:p}=e;if(!o)return null;let c=[];for(let i=0;i<n;i++){let u=o[i],D=y[u.type=="th"?"TH":"TD"];c.push(l(D,a(w(a(a(a({},t),B({top:!0,bottom:!p.length,left:i==0,right:i==n-1})),s?s({top:!0,bottom:!p.length,left:i==0,right:i==n-1,rowIndex:0,colIndex:i,isBody:!1,isHeader:!0}):{}),{className:[g("Cell"),m,u.className].join(" ")}),u),i))}return l(y.Row,{className:[g("Row"),g("HeadRow")].join(" "),children:c})},BodyRows:e=>{let{cellStyles:t={},cellClassName:m="",cellStylesCallback:s,head:n,rows:o,colLength:p,onOrderChanged:c}=e,[i]=k(C.uuid.gen()),[u,D]=k({rows:o,origin:0,to:NaN}),S=[];if(u.rows.forEach((b,r)=>{let f=[];f.push(l(y.TH,w(a(a(a({padding:0,borderRight:!0},t),B({top:r==0&&!n,bottom:r==o.length-1,left:!0,right:!1})),s?s({top:r==0&&!n,bottom:r==o.length-1,left:!0,right:!1,rowIndex:r,colIndex:0,isBody:!0,isHeader:!1}):{}),{className:[g("Cell"),g("Draggable"),m].join(" "),children:l(M.Button.Clear.R,{className:g("DragableButton"),fontColor:"4.thin",fontSize:"3.paragraph",margin:"auto",tabIndex:-1,ssSphere:3,onMouseDown:d=>{T.Start(d,{id:i,index:r,rows:u.rows,maxLength:o.length})},onTouchStart:d=>{T.Start(d,{id:i,index:r,rows:u.rows,maxLength:o.length})},children:l(v,{icon:P})})}),"DragOrigin")),b.forEach((d,h)=>{d=a({},d);let H=y[d.type=="th"?"TH":"TD"];f.push(l(H,a(w(a(a(a({},t),B({top:!!n&&!n.length,bottom:r==o.length-1,left:!1,right:h==p-2})),s?s({top:!!n&&!n.length,bottom:r==o.length-1,left:!1,right:h==p-2,rowIndex:r,colIndex:h,isBody:!0,isHeader:!1}):{}),{className:[g("Cell"),m,d.className].join(" ")}),d),h))}),S.push(l(y.Row,{id:"TableRow-"+i+"-"+r,className:[g("Row"),g("BodyRow")].join(" "),children:f},r))}),!isNaN(u.to)){let{origin:b,to:r}=u,f=[];f.push(l(y.TH,{backgroundColor:"theme.opa.low",padding:0,borderRight:"2.normal",className:[g("Cell"),g("Draggable"),m].join(" "),children:l(v.ArrowRight,{fontColor:"theme"})},"dragButton")),u.rows[b].forEach((h,H)=>{h=a({},h);let $=y[h.type=="th"?"TH":"TD"];f.push(l($,a(w(a(a(a({},t),B({top:!1,bottom:!1,left:!1,right:!1})),s?s({top:!1,bottom:!1,left:!1,right:!1,rowIndex:-1,colIndex:-1,isBody:!0,isHeader:!1}):{}),{className:[g("Cell"),m,h.className].join(" "),backgroundColor:"theme.opa.low"}),h)))}),S.splice(r,0,l(y.Row,{className:[g("Row"),g("Pre")].join(" "),children:f},"preSet"))}return x(()=>{R.set({[i]:{swap:(b,r)=>{if(r||r==0){let f=u.rows[b],d=[...u.rows];d.splice(b,1),d.splice(r-(b<r?1:0),0,f),D({rows:d,origin:0,to:NaN}),c(d.map(h=>JSON.parse(h.rowID)))}},preSet:b=>{let{origin:r,index:f}=b;D({rows:u.rows,origin:r,to:f})}}})}),x(()=>()=>{R.delete(i)},[]),l(J,{children:S})},Drag:e=>(e=a({},e),e.colLength=e.colLength+1,e.head&&(e.head=[{children:l(M.Button.Clear.R,{ssSphere:3,fontSize:"3.paragraph",fontColor:"theme",onMouseOver:t=>{L.open({parent:t.currentTarget,content:j(L.Comps.Body,{children:[l(v,{icon:P}),"\u30DC\u30BF\u30F3\u3092\u30C9\u30E9\u30C3\u30B0\u3057\u3066\u9806\u5E8F\u3092\u5909\u66F4"]})})},children:l(v.QuestionCircle,{})}),padding:[0,1],unitWidth:4},...e.head]),e.rows=e.rows.map((t,m)=>(t.rowID=JSON.stringify(t.rowID||m),t)),l(y.Table,{className:g("Table"),children:j(y.Body,{children:[l(E.HeadRow,a({},e)),l(E.BodyRows,a({},e))]})}))},O=e=>l(z,w(a({type:"drag"},e),{JSXChildren:E.Drag})),T={Start:function(e,t){return I(this,null,function*(){e.stopPropagation(),e.preventDefault();let{id:m,index:s,rows:n,maxLength:o}=t;N("#TableRow-"+m+"-"+s).addClass(g("DraggerOrigin")),C(document).addEvent({eventID:"DragMouseMove",eventType:"mousemove",callback:p=>{T.Move(p,t)},options:{passive:!1}}).addEvent({eventID:"DragTouchMove",eventType:"touchmove",callback:p=>{T.Move(p,t)},options:{passive:!1}}).addEvent({eventID:"DragMouseUp",eventType:"mouseup",callback:p=>{T.End(p,t)}}).addEvent({eventID:"DragTouchEnd",eventType:"touchend",callback:p=>{T.End(p,t)}})})},Move:function(e,t){let{id:m,maxLength:s}=t,n=C.getCursor(e).y-C.getScreenSize().scrollY;for(let o=0;o<s;o++){let p=N("#TableRow-"+m+"-"+o),{top:c,bottom:i,height:u}=p.position();o==0&&n<c?t.insertIndex=0:o===s-1&&i<=n?t.insertIndex=s:n>=c&&n<i&&(t.insertIndex=o+1)}{let{index:o,insertIndex:p}=t,c=R.get(m);c&&c.preSet&&c.preSet({origin:o,index:p})}return e.stopPropagation(),e.preventDefault(),!1},End:function(e,t){let{id:m,index:s,insertIndex:n}=t,o=R.get(m);o&&o.swap&&o.swap(s,n),N("#TableRow-"+m+"-"+s).removeClass(g("DraggerOrigin")),C(document).removeEvent(["DragMouseMove","DragTouchMove","DragMouseUp","DragTouchEnd"])}};export{O as Drag,O as default};

package/dist/fn/Table/Normal.d.ts

@@ -12,5 +12,5 @@ declare namespace Normal {
         onRowClick?: TableTypes.OnRowClick;
     };
 }
-declare const Normal: (para: Normal.Input) => import("react/jsx-runtime").JSX.Element;
+declare const Normal: (p: Normal.Input) => import("react/jsx-runtime").JSX.Element;
 export { Normal, Normal as default };

package/dist/fn/Table/Normal.js

@@ -1 +1 @@
-import{b as e,c as f}from"../../chunk-VY3566IV.js";import{Fragment as H,jsx as a,jsxs as B}from"react/jsx-runtime";import w from"./Parts";import d from"./Wrapper";import{DefaultCellSystemStyles as N}from"./cellStyling";import{TableClasses as r}from"../../@styles/componentClasses";const c={HeadRow:l=>{let{cellStyles:s={},cellClassName:i="",cellStylesCallback:n,colLength:y,head:m,rows:h}=l;if(!m)return null;let C=[];return m.forEach((p,t)=>{let o=w[p.type=="th"?"TH":"TD"];C.push(a(o,e(f(e(e(e({},s),N({top:!0,bottom:!h.length,left:t==0,right:t==y-1})),n?n({top:!0,bottom:!h.length,left:t==0,right:t==y-1,rowIndex:0,colIndex:t,isBody:!1,isHeader:!0}):{}),{className:[r("Cell"),i,p.className].join(" ")}),p)))}),a(w.Row,{className:[r("Row"),r("HeadRow")].join(" "),children:C})},BodyRows:l=>{let{cellStyles:s={},cellClassName:i="",cellStylesCallback:n,head:y,rows:m,colLength:h,onRowClick:C}=l,p=[];return m.forEach((t,o)=>{let b=[];t.forEach((R,u)=>{let g=w[R.type=="th"?"TH":"TD"];b.push(a(g,e(f(e(e(e({},s),N({top:o==0&&!y,bottom:o==m.length-1,left:u==0,right:u==h-1})),n?n({top:o==0&&!y,bottom:o==m.length-1,left:u==0,right:u==h-1,rowIndex:o,colIndex:u,isBody:!0,isHeader:!1}):{}),{className:[r("Cell"),i,R.className].join(" ")}),R)))}),p.push(a(w.Row,{className:[r("Row"),r("BodyRow")].join(" "),children:b,onClick:R=>{C&&C(t.rowID,R)}},o))}),a(H,{children:p})},Normal:l=>(l=e({},l),l.rows=l.rows.map((s,i)=>(s.rowID=s.rowID||i,s)),B(w.Table,{className:r("Table"),children:[a(c.HeadRow,e({},l)),a(c.BodyRows,e({},l))]}))},T=l=>a(d,f(e({type:"normal"},l),{JSXChildren:c.Normal}));export{T as Normal,T as default};
+import{b as e,c as f}from"../../chunk-VY3566IV.js";import{Fragment as B,jsx as a,jsxs as k}from"react/jsx-runtime";import i from"./Parts";import d from"./Wrapper";import{DefaultCellSystemStyles as c}from"./cellStyling";import{TableClasses as s}from"../../@styles/componentClasses";const b={HeadRow:l=>{let{cellStyles:r={},cellClassName:n="",cellStylesCallback:h,colLength:C,head:m,rows:R}=l;if(!m)return null;let u=[];return m.forEach((p,t)=>{let o=i[p.type=="th"?"TH":"TD"];u.push(a(o,e(f(e(e(e({},r),c({top:!0,bottom:!R.length,left:t==0,right:t==C-1})),h?h({top:!0,bottom:!R.length,left:t==0,right:t==C-1,rowIndex:0,colIndex:t,isBody:!1,isHeader:!0}):{}),{className:[s("Cell"),n,p.className].join(" ")}),p),t))}),a(i.Row,{className:[s("Row"),s("HeadRow")].join(" "),children:u})},BodyRows:l=>{let{cellStyles:r={},cellClassName:n="",cellStylesCallback:h,head:C,rows:m,colLength:R,onRowClick:u}=l,p=[];return m.forEach((t,o)=>{let T=[];t.forEach((w,y)=>{let g=i[w.type=="th"?"TH":"TD"];T.push(a(g,e(f(e(e(e({},r),c({top:o==0&&!C,bottom:o==m.length-1,left:y==0,right:y==R-1})),h?h({top:o==0&&!C,bottom:o==m.length-1,left:y==0,right:y==R-1,rowIndex:o,colIndex:y,isBody:!0,isHeader:!1}):{}),{className:[s("Cell"),n,w.className].join(" ")}),w),y))}),p.push(a(i.Row,{className:[s("Row"),s("BodyRow")].join(" "),children:T,onClick:w=>{u&&u(t.rowID,w)}},o))}),a(B,{children:p})},Normal:l=>(l=e({},l),l.rows=l.rows.map((r,n)=>(r.rowID=r.rowID||n,r)),a(i.Table,{className:s("Table"),children:k(i.Body,{children:[a(b.HeadRow,e({},l)),a(b.BodyRows,e({},l))]})}))},N=l=>a(d,f(e({type:"normal"},l),{JSXChildren:b.Normal}));export{N as Normal,N as default};

package/dist/fn/Table/Wrapper.d.ts

@@ -3,7 +3,7 @@ import { TableTypes } from '.';
 declare namespace Wrapper {
     type Input = TableTypes.UniInput & {
         type: TableTypes.Types;
-        JSXChildren: (para: any) => JSX.Element;
+        JSXChildren: (p: any) => JSX.Element;
     };
 }
 declare const Wrapper: React.FC<Wrapper.Input>;

package/dist/fn/Table/Wrapper.js

@@ -1 +1 @@
-import{b as t,c as n,d as s}from"../../chunk-VY3566IV.js";import{jsx as a}from"react/jsx-runtime";import f from"@mingoo/jsmin";import{GenerateClassName as u}from"../../@utils";import C from"../../atoms/Box";import{DefaultCellStyles as c}from"./cellStyling";import{TableClasses as l}from"../../@styles/componentClasses";const y=e=>{let{JSXChildren:i}=e;(!e.tone||e.tone=="auto")&&(e.tone="border",e.type=="drag"&&(e.tone="rowBorder"));let o=n(t({tableID:e.tableID||f.uuid.gen(),tone:e.tone},e),{cellStyles:t(t({},c(e.type,e.tone)),e.cellStyles)});e.tone!="plain"&&(o.backgroundColor=o.backgroundColor||"layer.1",o.borderRadius=o.borderRadius||"1.tone.primary");let r=u(o),{className:m,style:p}=r,b=s(r,["className","style"]),d=[m,l("Wrap"),l("TableType_"+e.type),l("RowClickable_"+!!o.onRowClick)].join(" ");return a(C,{className:d,style:p,children:a(i,t({},b))})};export{y as Wrapper,y as default};
+import{b as o,c as l,d as p}from"../../chunk-VY3566IV.js";import{jsx as s}from"react/jsx-runtime";import u from"@mingoo/jsmin";import{GenerateClassName as C}from"../../@utils";import c from"../../atoms/Box";import{DefaultCellStyles as T}from"./cellStyling";import{TableClasses as r}from"../../@styles/componentClasses";const n=y=>{let e=o({},y),{JSXChildren:i}=e;(!e.tone||e.tone=="auto")&&(e.tone="border",e.type=="drag"&&(e.tone="rowBorder"));let t=l(o({tableID:e.tableID||u.uuid.gen(),tone:e.tone},e),{cellStyles:o(o({},T(e.type,e.tone)),e.cellStyles)});e.tone!="plain"&&(t.backgroundColor=t.backgroundColor||"layer.1",t.borderRadius=t.borderRadius||"1.tone.primary");let a=C(t),{className:m,style:b}=a,d=p(a,["className","style"]),f=[m,r("Wrap"),r("TableType_"+e.type),r("RowClickable_"+!!t.onRowClick)].join(" ");return s(c,{className:f,style:b,children:s(i,o({},d))})};export{n as Wrapper,n as default};

package/dist/fn/Table/cellStyling.d.ts

@@ -1,9 +1,9 @@
 import { TagProperty } from '../../@declaration';
 import { TableTypes } from '.';
-export declare const DefaultCellStyles: (type: TableTypes.Types, tone: TableTypes.Tones) => TagProperty.Para;
+export declare const DefaultCellStyles: (type: TableTypes.Types, tone: TableTypes.Tones) => TagProperty.States;
 export declare const DefaultCellSystemStyles: (args: {
     top: boolean;
     bottom: boolean;
     left: boolean;
     right: boolean;
-}) => TagProperty.Para;
+}) => TagProperty.States;

package/dist/fn/Table/cellStyling.js

@@ -1 +1 @@
-import{b as o}from"../../chunk-VY3566IV.js";const d=(r,e)=>{if(e=="plain")return{};let t={};return r=="drag"&&(t.padding=1),["border","rowBorder","cellBorder"].includes(e)&&(t.borderBottom="2.normal"),["border","cellBorder"].includes(e)&&(t.borderRight="2.normal"),o({padding:"3/4",backgroundColor:"layer.1",transition:"short",textAlign:"center"},t)},b=r=>{let e={};return r.right&&(e.borderRight="unset"),r.top&&(r.left&&(e.borderTopLeftRadius="inherit"),r.right&&(e.borderTopRightRadius="inherit")),r.bottom&&(e.borderBottom="unset",r.left&&(e.borderBottomLeftRadius="inherit"),r.right&&(e.borderBottomRightRadius="inherit")),e};export{d as DefaultCellStyles,b as DefaultCellSystemStyles};
+import{b as o}from"../../chunk-VY3566IV.js";const a=(t,e)=>{if(e=="plain")return{};let r={};return t=="drag"&&(r.padding=1),["border","rowBorder","cellBorder"].includes(e)&&(r.borderBottom="2.normal"),["border","cellBorder"].includes(e)&&(r.borderRight="2.normal"),o({padding:"3/4",backgroundColor:"layer.1",transition:"short",textAlign:"center"},r)},b=t=>{let e={};return t.right&&(e.borderRight="unset"),t.top&&(t.left&&(e.borderTopLeftRadius="inherit"),t.right&&(e.borderTopRightRadius="inherit")),t.bottom&&(e.borderBottom="unset",t.left&&(e.borderBottomLeftRadius="inherit"),t.right&&(e.borderBottomRightRadius="inherit")),e};export{a as DefaultCellStyles,b as DefaultCellSystemStyles};

package/dist/fn/Table/index.d.ts

@@ -18,13 +18,13 @@ export declare namespace TableTypes {
         tableID?: string;
         tone?: Tones;
         colLength: number;
-        cellStyles?: TagProperty.Para;
+        cellStyles?: TagProperty.States;
         cellClassName?: string;
         cellStylesCallback?: {
-            (para: StylesCallbackInput): TagProperty.Para;
+            (p: StylesCallbackInput): TagProperty.States;
         };
         className?: string;
-    } & TagProperty.Para;
+    } & TagProperty.States;
     type OnRowClick = {
         (rowIDOrIndex: any, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
     };

package/dist/fn/Table/index.js

@@ -1 +1 @@
-import"../../chunk-VY3566IV.js";import r from"./Parts";import o from"./Normal";import a from"./Drag";import p from"./Data";var t;(e=>(e.Normal=o,e.Data=p,e.Drag=a,e.Parts=r))(t||(t={}));export{t as Table,t as default};
+import"../../chunk-VY3566IV.js";import o from"./Parts";import r from"./Normal";import a from"./Drag";import p from"./Data";var t;(e=>(e.Normal=r,e.Data=p,e.Drag=a,e.Parts=o))(t||(t={}));export{t as Table,t as default};

package/dist/fn/Tooltips.d.ts

@@ -6,7 +6,7 @@ import Sheet from './Sheet';
 declare namespace Tooltips {
     type Methods = {
         __memoryID: string;
-        open(para: Input): void;
+        open(p: Input): void;
         close(tipsID: string): void;
         closeALL(): void;
         Comps: {

package/dist/fn/index.d.ts

@@ -1,10 +1,15 @@
+export * from './RootViewController';
+export * from './Plate';
+export * from './PageViewController';
+export * from './SwipeView';
+export * from './TabBar';
 export * from './Effect';
 export * from './Button';
 export * from './Input';
-export * from './Layout';
 export * from './Table';
 export * from './Sheet';
 export * from './Snackbar';
 export * from './Loader';
 export * from './Tooltips';
 export * from './Cropper';
+export * from './PageNotFound';

package/dist/fn/index.js

@@ -1 +1 @@
-export*from"./Effect";export*from"./Button";export*from"./Input";export*from"./Layout";export*from"./Table";export*from"./Sheet";export*from"./Snackbar";export*from"./Loader";export*from"./Tooltips";export*from"./Cropper";
+export*from"./RootViewController";export*from"./Plate";export*from"./PageViewController";export*from"./SwipeView";export*from"./TabBar";export*from"./Effect";export*from"./Button";export*from"./Input";export*from"./Table";export*from"./Sheet";export*from"./Snackbar";export*from"./Loader";export*from"./Tooltips";export*from"./Cropper";export*from"./PageNotFound";

package/dist/index.d.ts

@@ -10,6 +10,11 @@ export * from './temps';
 import * as fn from './fn';
 export * from './fn';
 declare const amotify: {
+    RootViewController: fn.RootViewController.Methods;
+    Plate: utils.React.FC<fn.Plate.Input>;
+    PageViewController: utils.React.FC<fn.PageViewController.Input>;
+    SwipeView: (p: fn.SwipeView.Input) => import("react/jsx-runtime").JSX.Element;
+    TabBar: utils.React.FC<fn.TabBar.Input>;
     Effect: {
         Ripple: import("./fn/Effect/Ripple").Ripple.Methods;
         Pudding: import("./fn/Effect/Pudding").Pudding.Methods;
@@ -18,13 +23,13 @@ declare const amotify: {
     };
     Button: fn.Button.Seed;
     Input: typeof fn.Input;
-    Layout: typeof fn.Layout;
     Table: typeof fn.Table;
     Sheet: fn.Sheet.Methods;
     Snackbar: fn.Snackbar.Methods;
     Loader: fn.Loader.Methods;
     Tooltips: fn.Tooltips.Methods;
     Cropper: fn.Cropper.Methods;
+    PageNotFound: utils.React.FC<fn.PageNotFound.Input>;
     DesignBook: () => import("react/jsx-runtime").JSX.Element;
     Accordion: mols.Accordion.Methods;
     Column: utils.React.FC<atoms.Flex.Input>;
@@ -45,8 +50,14 @@ declare const amotify: {
     Config: utils.Config.Methods;
     useStore: utils.useStore.Methods;
     useRecycle: utils.useRecycle.Methods;
+    useRouterEffect: (p: {
+        pathname: string;
+        beforeCB?: ((pathName: string) => void) | undefined;
+        afterCB?: ((pathName: string) => void) | undefined;
+        afterFirstCB?: ((pathName: string) => void) | undefined;
+    }) => void;
     collectForm: utils.collectForm.FN;
-    pageTransit: utils.pageTransit.Methods;
+    pageRouter: utils.pageRouter.Methods;
     ColorObjects: {
         key: utils.ThemeColor;
         isBrand: boolean;
@@ -391,10 +402,10 @@ declare const amotify: {
             isAvocado: boolean;
         };
     };
-    ReadStyleSet: <T>(para: T) => T;
-    GenerateClassName: <T_1>(para: T_1) => T_1;
+    ReadStyleSet: <T>(p: T) => T;
+    GenerateClassName: <T_1>(p: T_1) => T_1;
     React: typeof utils.React;
-    LaunchReactApp: (para: utils.LaunchReactApp.Input) => void;
+    LaunchReactApp: (p: utils.LaunchReactApp.Input) => import("react/jsx-runtime").JSX.Element;
     $$fromRoot: (args: any) => import("@mingoo/jsmin").default.Chains;
 };
-export { amotify, amotify as default, };
+export { amotify, amotify as default };

package/dist/mols/Accordion.js

@@ -1 +1 @@
-import{b as g,d as H}from"../chunk-VY3566IV.js";import{jsx as y}from"react/jsx-runtime";import{useState as m,useEffect as w,useRef as R}from"react";import a from"@mingoo/jsmin";import{$$fromRoot as r,useStore as l}from"../@utils";import{Box as A}from"../atoms/Box";import{AccordionClasses as I}from"../@styles/componentClasses";const _=o=>{o=g({},o);let v=o,{accordionID:t="",slideAnimation:x="fast",defaultOpen:f=!1,override:D=!1}=v,C=H(v,["accordionID","slideAnimation","defaultOpen","override"]),[d]=m(a.uuid.gen()),[p]=m(a.uuid.gen()),[s,c]=m(f);s!=f&&D&&c(f);const h=R(!1);return w(()=>{let n=r('[data-accordion-content-id="'+p+'"]')[0];if(n){let i=n.offsetHeight,e=0;x=="fast"?(e=i/1e3,e=Math.max(e,.2)):x=="slow"&&(e=i/300),r("#"+d).css({transition:e+"s"})}},[]),w(()=>{let n=r("#"+d),i=r('[data-accordion-content-id="'+p+'"]')[0];if(h.current){if(i){let e=i.offsetHeight;a.is.exist(e)&&(s?n.css({maxHeight:e+1+"px"}).await(200).css({maxHeight:"unset",overflow:o.overflow||"unset"}):n.css({maxHeight:e+1+"px"}).await(100).css({maxHeight:"0px",overflow:"hidden"}))}}else if(h.current=!0,i){let e=i.offsetHeight;a.is.exist(e)&&(s?n.css({maxHeight:e+1+"px"}).await(200).css({maxHeight:"unset",overflow:o.overflow||"unset"}):n.css({maxHeight:"0px",overflow:"hidden"}))}},[s]),t&&l.set({key:"Accordion-"+t,value:{open:()=>{c(!0)},close:()=>{c(!1)},toggle:()=>{c(!s)}}}),y(A,{className:[I("Wrap"),I("Open_"+s)].join(" "),id:d,children:y(A,g({"data-accordion-content-id":p},C))})},u=_;u.fn={open:o=>{let t=l.get("Accordion-"+o);!t||t.open()},close:o=>{let t=l.get("Accordion-"+o);!t||t.close()},toggle:o=>{let t=l.get("Accordion-"+o);!t||t.toggle()}};export{u as Accordion,u as default};
+import{b as g,d as H}from"../chunk-VY3566IV.js";import{jsx as D}from"react/jsx-runtime";import{useState as m,useEffect as w,useRef as R}from"react";import c from"@mingoo/jsmin";import{$$fromRoot as r,useStore as l}from"../@utils";import{Box as A}from"../atoms/Box";import{AccordionClasses as I}from"../@styles/componentClasses";const _=o=>{o=g({},o);let v=o,{accordionID:t="",slideAnimation:x="fast",defaultOpen:f=!1,override:y=!1}=v,C=H(v,["accordionID","slideAnimation","defaultOpen","override"]),[d]=m(c.uuid.gen()),[p]=m(c.uuid.gen()),[s,a]=m(f);s!=f&&y&&a(f);const h=R(!1);return w(()=>{let n=r('[data-accordion-content-id="'+p+'"]')[0];if(n){let i=n.offsetHeight,e=0;x=="fast"?(e=i/1e3,e=Math.max(e,.2)):x=="slow"&&(e=i/300),r("#"+d).css({transition:e+"s"})}},[]),w(()=>{let n=r("#"+d),i=r('[data-accordion-content-id="'+p+'"]')[0];if(h.current){if(i){let e=i.offsetHeight;c.is.exist(e)&&(s?n.css({maxHeight:e+1+"px"}).await(200).css({maxHeight:"unset",overflow:o.overflow||"unset"}):n.css({maxHeight:e+1+"px"}).await(100).css({maxHeight:"0px",overflow:"hidden"}))}}else if(h.current=!0,i){let e=i.offsetHeight;c.is.exist(e)&&(s?n.css({maxHeight:e+1+"px"}).await(200).css({maxHeight:"unset",overflow:o.overflow||"unset"}):n.css({maxHeight:"0px",overflow:"hidden"}))}},[s]),t&&l.set({["Accordion-"+t]:{open:()=>{a(!0)},close:()=>{a(!1)},toggle:()=>{a(!s)}}}),D(A,{className:[I("Wrap"),I("Open_"+s)].join(" "),id:d,children:D(A,g({"data-accordion-content-id":p},C))})},u=_;u.fn={open:o=>{let t=l.get("Accordion-"+o);!t||t.open()},close:o=>{let t=l.get("Accordion-"+o);!t||t.close()},toggle:o=>{let t=l.get("Accordion-"+o);!t||t.toggle()}};export{u as Accordion,u as default};

package/dist/mols/List.js

@@ -1 +1 @@
-import{b as e,c as t,d as r}from"../chunk-VY3566IV.js";import{jsx as a}from"react/jsx-runtime";import{Flex as p}from"../atoms/Flex";const s=n=>{let o=n,{rows:i,rowStyles:c}=o,m=r(o,["rows","rowStyles"]),y=i.map(f=>{let l=f,{children:u}=l,w=r(l,["children"]);return a(p,t(e(e({},c),w),{children:u}))});return a(p,t(e({},m),{flexType:"col",children:y}))};export{s as List,s as default};
+import{b as e,c as t,d as r}from"../chunk-VY3566IV.js";import{jsx as a}from"react/jsx-runtime";import{Flex as p}from"../atoms/Flex";const s=n=>{let o=n,{rows:i,rowStyles:y}=o,c=r(o,["rows","rowStyles"]),m=i.map((f,u)=>{let l=f,{children:w}=l,h=r(l,["children"]);return a(p,t(e(e({},y),h),{children:w}),u)});return a(p,t(e({},c),{flexType:"col",children:m}))};export{s as List,s as default};

package/dist/mols/Text.js

@@ -1 +1 @@
-import{b as e,c as n}from"../chunk-VY3566IV.js";import{jsx as o}from"react/jsx-runtime";import{Box as p}from"../atoms/Box";import{Span as a}from"../atoms/Span";const i={Title:t=>o(p,e({fontSize:"6.title",fontWeight:"3.semiBold"},t)),SubTitle:t=>o(p,e({fontSize:"5.subTitle",fontWeight:"3.semiBold"},t)),ThirdTitle:t=>o(p,e({fontSize:"4.thirdTitle",fontWeight:"3.semiBold"},t)),Paragraph:t=>o(p,e({fontSize:"3.paragraph",fontWeight:"3.semiBold"},t)),Normal:t=>o(p,e({},t)),Description:t=>o(p,n(e({},t),{freeCSS:e({whiteSpace:"pre-wrap"},t.freeCSS)})),Supplement:t=>o(p,e({fontSize:"1.mini"},t)),NowrapSpan:t=>o(a,n(e({},t),{freeCSS:e({whiteSpace:"nowrap"},t.freeCSS)}))};export{i as Text,i as default};
+import{b as e,c as n}from"../chunk-VY3566IV.js";import{jsx as o}from"react/jsx-runtime";import{Box as p}from"../atoms/Box";import{Span as i}from"../atoms/Span";const a={Title:t=>o(p,e({fontSize:"6.title",fontWeight:"3.semiBold"},t)),SubTitle:t=>o(p,e({fontSize:"5.subTitle",fontWeight:"3.semiBold"},t)),ThirdTitle:t=>o(p,e({fontSize:"4.thirdTitle",fontWeight:"3.semiBold"},t)),Paragraph:t=>o(p,e({fontSize:"3.paragraph",fontWeight:"3.semiBold"},t)),Normal:t=>o(p,e({},t)),Description:t=>o(p,n(e({},t),{freeCSS:e({whiteSpace:"pre-wrap"},t.freeCSS)})),Supplement:t=>o(p,e({fontSize:"1.mini"},t)),NowrapSpan:t=>o(i,n(e({},t),{freeCSS:e({whiteSpace:"nowrap"},t.freeCSS)}))};export{a as Text,a as default};

package/dist/temps/designBook.d.ts

@@ -1,4 +1,2 @@
-declare namespace DesignBook {
-}
 declare const DesignBook: () => import("react/jsx-runtime").JSX.Element;
 export { DesignBook, DesignBook as default };

package/dist/temps/designBook.js

@@ -1,8 +1,8 @@
-import{e as I}from"../chunk-VY3566IV.js";import{Fragment as d,jsx as e,jsxs as t}from"react/jsx-runtime";import S from"react";import w from"@mingoo/jsmin";import{Config as G}from"../@utils";import{Box as o,Span as V,Grid as p,Flex as c,FAI as g,Img as T,Logo as l,Placeholder as U}from"../atoms";import{List as v,LinkifyText as q,Accordion as H,Row as B,Column as h,Text as n}from"../mols";import{Layout as k,Table as m,Input as i,Button as r,Sheet as O,Snackbar as z,Tooltips as F,Loader as C,Effect as Y,Cropper as J}from"../fn";const W={_:()=>t(d,{children:[e(W.DarkMode,{}),e(W.ThemeColor,{})]}),DarkMode:()=>t(B.Separate,{children:[e(o,{isSemiBoldFont:!0,fontSize:"4.thirdTitle",children:"Dark Mode"}),e(c,{gap:2,children:e(i.Segmented.Border,{value:G.get().darkMode,textAlign:"left",options:[{value:"light",label:"Light"},{value:"dark",label:"Dark"},{value:"dim",label:"Dim"},{value:"auto",label:"Auto"}],flexCenter:!0,onUpdateValidValue:({value:a})=>{let u=a[0];G.update.darkMode(u)}})})]}),ThemeColor:()=>{const a=x=>{G.update.themeColor(x)};let u=[];const s=["comun","leaf","heart","droplet","brick","flower","lip","wine","theater","bat","poizon","eggplant","ufo","alien","tombstone","ninja","moon","rain","unicorn","axe","gem","soap","drizzle","building","fish","icicles","water","tree1","tree2","tree3","battery","seedle","greenTea","oak","salad","cloudy","lemon","angel","parasol","pizza","thunder","latte","island","shovel","coffee","carrot","cactus","volcano","choco","industry","gun","galaxy","line","twitter","amazon","facebook","android","slackBlue","slackGreen","slackRed","slackYellow","slackBase","googleBlue","googleGreen","googleYellow","googleRed"];for(let x of s)u.push(e(r.Button.Prime.R,{padding:[1,1.5],fontColor:"white",borderRadius:"1.tone.primary",textAlign:"left",backgroundColor:x,onClick:()=>{a(x)},children:e(n.Supplement,{children:x.toCapital()})}));return t(B.Separate,{children:[e(n.SubTitle,{children:"ThemeColor"}),e(p,{gridCols:5,gap:"1/3",children:u})]})}},R={_:()=>t(d,{children:[t(c,{gap:1,flexChilds:"even",flexNewLine:!0,children:[e(o,{padding:2,ssCardBox:!0,flexCenter:!0,children:"Hello"}),e(o,{padding:2,ssCardBox:"border",flexCenter:!0,children:"Hello"}),e(o,{padding:2,ssCardBox:"cloud",flexCenter:!0,children:"Hello"})]}),t(c,{gap:1,children:[e(o,{flexCenter:!0,children:e(U,{unitWidth:6,unitHeight:6,children:"Placeholder",isRounded:!0})}),t(p,{gridCols:3,gap:1,flexSizing:"auto",children:[e(o,{backgroundColor:"layer.1",padding:2}),e(o,{backgroundColor:"layer.2",padding:2}),e(o,{backgroundColor:"layer.3",padding:2}),e(o,{backgroundColor:"layer.4",padding:2}),e(o,{backgroundColor:"layer.5",padding:2}),e(o,{backgroundColor:"layer.6",padding:2})]}),t(p,{gridCols:3,gap:"1/2",flexSizing:"auto",ssCardBox:!0,children:[e(o,{flexCenter:!0,fontColor:"1.clear",children:"FontColor1"}),e(o,{flexCenter:!0,fontColor:"2.normal",children:"FontColor2"}),e(o,{flexCenter:!0,fontColor:"3.blur",children:"FontColor3"}),e(o,{flexCenter:!0,fontColor:"4.thin",children:"FontColor4"}),e(o,{flexCenter:!0,fontColor:"5.translucent",children:"FontColor5"})]})]}),e(R.Fonts,{}),e(R.Box,{}),e(R.Flex,{}),e(R.Grid,{}),e(R.Others,{})]}),Fonts:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Font"}),t(o,{overflow:"auto",padding:1,children:[e(n.Description,{padding:1,children:`<Box
+import{e as I}from"../chunk-VY3566IV.js";import{Fragment as d,jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as D,useEffect as V}from"react";import R from"@mingoo/jsmin";import{Config as A}from"../@utils";import{Box as o,Span as U,Grid as g,Flex as c,FAI as x,Img as f,Logo as l,Placeholder as q}from"../atoms";import{List as S,LinkifyText as Y,Accordion as M,Row as B,Column as h,Text as n}from"../mols";import{PageViewController as J,SwipeView as K,TabBar as j,Plate as _,Table as m,Input as i,Button as r,Sheet as G,Snackbar as y,Tooltips as z,Loader as w,Effect as X,Cropper as $}from"../fn";const O={_:()=>t(d,{children:[e(O.DarkMode,{}),e(O.ThemeColor,{})]}),DarkMode:()=>t(B.Separate,{children:[e(o,{isSemiBoldFont:!0,fontSize:"4.thirdTitle",children:"Dark Mode"}),e(c,{gap:2,children:e(i.Segmented.Border,{value:A.get().darkMode,textAlign:"left",options:[{value:"light",label:"Light"},{value:"dark",label:"Dark"},{value:"dim",label:"Dim"},{value:"auto",label:"Auto"}],flexCenter:!0,onUpdateValidValue:({value:a})=>{let u=a[0];A.update.darkMode(u)}})})]}),ThemeColor:()=>{const a=p=>{A.update.themeColor(p)};let u=[];const s=["comun","leaf","heart","droplet","brick","flower","lip","wine","theater","bat","poizon","eggplant","ufo","alien","tombstone","ninja","moon","rain","unicorn","axe","gem","soap","drizzle","building","fish","icicles","water","tree1","tree2","tree3","battery","seedle","greenTea","oak","salad","cloudy","lemon","angel","parasol","pizza","thunder","latte","island","shovel","coffee","carrot","cactus","volcano","choco","industry","gun","galaxy","line","twitter","amazon","facebook","android","slackBlue","slackGreen","slackRed","slackYellow","slackBase","googleBlue","googleGreen","googleYellow","googleRed"];for(let p of s)u.push(e(r.Button.Prime.R,{padding:[1,1.5],fontColor:"white",borderRadius:"1.tone.primary",textAlign:"left",backgroundColor:p,onClick:()=>{a(p)},children:e(n.Supplement,{children:p.toCapital()})},p));return t(B.Separate,{children:[e(n.SubTitle,{children:"ThemeColor"}),e(g,{gridCols:5,gap:"1/3",children:u})]})}},T={_:()=>t(d,{children:[t(c,{gap:1,flexChilds:"even",flexNewLine:!0,children:[e(o,{padding:2,ssCardBox:!0,flexCenter:!0,children:"Hello"}),e(o,{padding:2,ssCardBox:"border",flexCenter:!0,children:"Hello"}),e(o,{padding:2,ssCardBox:"cloud",flexCenter:!0,children:"Hello"})]}),t(c,{gap:1,children:[e(o,{flexCenter:!0,children:e(q,{unitWidth:6,unitHeight:6,children:"Placeholder",isRounded:!0})}),t(g,{gridCols:3,gap:1,flexSizing:"auto",children:[e(o,{backgroundColor:"layer.1",padding:2}),e(o,{backgroundColor:"layer.2",padding:2}),e(o,{backgroundColor:"layer.3",padding:2}),e(o,{backgroundColor:"layer.4",padding:2}),e(o,{backgroundColor:"layer.5",padding:2}),e(o,{backgroundColor:"layer.6",padding:2})]}),t(g,{gridCols:3,gap:"1/2",flexSizing:"auto",ssCardBox:!0,children:[e(o,{flexCenter:!0,fontColor:"1.clear",children:"FontColor1"}),e(o,{flexCenter:!0,fontColor:"2.normal",children:"FontColor2"}),e(o,{flexCenter:!0,fontColor:"3.blur",children:"FontColor3"}),e(o,{flexCenter:!0,fontColor:"4.thin",children:"FontColor4"}),e(o,{flexCenter:!0,fontColor:"5.translucent",children:"FontColor5"})]})]}),e(T.Fonts,{}),e(T.Box,{}),e(T.Flex,{}),e(T.Grid,{}),e(T.Others,{})]}),Fonts:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Font"}),t(o,{overflow:"auto",padding:1,children:[e(n.Description,{padding:1,children:`<Box
   fontSize={ 0 ~ 8 }
 >
   some text
-</Box>`}),e(v,{rowStyles:{flexType:"col",borderBottom:!0,padding:1,flexWrap:!1,gap:"1/2"},rows:[{children:t(d,{children:["\u30FB Landing",t(o,{fontSize:"7.landing",isSemiBoldFont:!0,children:["Visualize Your ",e(V,{fontColor:"theme",children:"Colors"})," On a Real Website"]})]})},{children:t(d,{children:["\u30FB Title",e(o,{fontSize:"6.title",children:"\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u56FD\u6C11\u8CA0\u62C5\u7387\u3092\u516C\u8868\u3057\u307E\u3059"})]})},{children:t(d,{children:["\u30FB SubTitle",e(o,{fontSize:"5.subTitle",children:"\u652F\u6255\u3044\u3092\u53D7\u3051\u4ED8\u3051\u308B"})]})},{children:t(d,{children:["\u30FB ThirdTitle",e(o,{fontSize:"4.thirdTitle",children:"\u79DF\u7A0E\u8CA0\u62C5\u7387\u3068\u793E\u4F1A\u4FDD\u969C\u8CA0\u62C5\u7387\u3092\u5408\u8A08\u3057\u305F\u56FD\u6C11\u8CA0\u62C5\u7387\u306B\u3064\u3044\u3066\u3001\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u898B\u901A\u3057\u3092\u63A8\u8A08\u3057\u307E\u3057\u305F\u306E\u3067\u3001\u516C\u8868\u3057\u307E\u3059\u3002"})]})},{children:t(d,{children:["\u30FB Paragraph",e(n.Description,{fontSize:"3.paragraph",children:e(q,{text:`
+</Box>`}),e(S,{rowStyles:{flexType:"col",borderBottom:!0,padding:1,flexWrap:!1,gap:"1/2"},rows:[{children:t(d,{children:["\u30FB Landing",t(o,{fontSize:"7.landing",isSemiBoldFont:!0,children:["Visualize Your ",e(U,{fontColor:"theme",children:"Colors"})," On a Real Website"]})]})},{children:t(d,{children:["\u30FB Title",e(o,{fontSize:"6.title",children:"\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u56FD\u6C11\u8CA0\u62C5\u7387\u3092\u516C\u8868\u3057\u307E\u3059"})]})},{children:t(d,{children:["\u30FB SubTitle",e(o,{fontSize:"5.subTitle",children:"\u652F\u6255\u3044\u3092\u53D7\u3051\u4ED8\u3051\u308B"})]})},{children:t(d,{children:["\u30FB ThirdTitle",e(o,{fontSize:"4.thirdTitle",children:"\u79DF\u7A0E\u8CA0\u62C5\u7387\u3068\u793E\u4F1A\u4FDD\u969C\u8CA0\u62C5\u7387\u3092\u5408\u8A08\u3057\u305F\u56FD\u6C11\u8CA0\u62C5\u7387\u306B\u3064\u3044\u3066\u3001\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u898B\u901A\u3057\u3092\u63A8\u8A08\u3057\u307E\u3057\u305F\u306E\u3067\u3001\u516C\u8868\u3057\u307E\u3059\u3002"})]})},{children:t(d,{children:["\u30FB Paragraph",e(n.Description,{fontSize:"3.paragraph",children:e(Y,{text:`
 This article discusses performance best practices for fonts.
 There are a variety of ways in which web fonts impact performance`})})]})},{children:t(d,{children:["\u30FB Normal",e(o,{fontSize:"2.normal",children:"\u52B9\u7387\u7684\u3067\u6301\u7D9A\u53EF\u80FD\u306A\u8CA1\u653F\u3078\u306E\u8EE2\u63DB\u3092\u56F3\u308A\u3001\u3053\u306E\u8CA1\u653F\u69CB\u9020\u3092\u5404\u822C\u306E\u69CB\u9020\u6539\u9769\u3068\u3068\u3082\u306B\u63A8\u9032\u3059\u308B\u3053\u3068\u3067\u3001\u6C11\u9593\u9700\u8981\u4E3B\u5C0E\u306E\u6301\u7D9A\u7684\u7D4C\u6E08\u6210\u9577\u306E\u5B9F\u73FE\u3092\u76EE\u6307\u3057\u307E\u3059\u3002 \u5C11\u5B50\u30FB\u9AD8\u9F62\u5316\u3001\u56FD\u969B\u5316\u306A\u3069\u7D4C\u6E08\u793E\u4F1A\u306E\u69CB\u9020\u5909\u5316\u306B\u5BFE\u5FDC\u3067\u304D\u308B21\u4E16\u7D00\u306E\u3042\u308B\u3079\u304D\u7A0E\u5236\u3092\u304D\u305A\u304D\u307E\u3059\u3002 \u8CA1\u653F\u6295\u878D\u8CC7\u306F\u3001\u884C\u8CA1\u653F\u6539\u9769\u306E\u8DA3\u65E8\u3092\u8E0F\u307E\u3048\u3001\u6C11\u9593\u3067\u306F\u3067\u304D\u306A\u3044\u5206\u91CE\u30FB\u4E8B\u696D\u306A\u3069\u306B\u91CD\u70B9\u5316\u3092\u884C\u3044\u3001\u771F\u306B\u653F\u7B56\u7684\u306B\u5FC5\u8981\u306A\u8CC7\u91D1\u9700\u8981\u306B\u306F\u7684\u78BA\u306B\u5BFE\u5FDC\u3057\u307E\u3059\u3002 \u91D1\u878D\u5E81\u3068\u5354\u529B\u3057\u3001\u91D1\u878D\u306E\u30BB\u30FC\u30D5\u30C6\u30A3\u30CD\u30C3\u30C8\u3092\u6574\u5099\u3057\u3001\u91D1\u878D\u5371\u6A5F\u306B\u7D20\u65E9\u304F\u5BFE\u5FDC\u3059\u308B\u306A\u3069\u3001\u91D1\u878D\u30B7\u30B9\u30C6\u30E0\u306E\u5B89\u5B9A\u306E\u78BA\u4FDD\u3092\u76EE\u6307\u3057\u307E\u3059\u3002 \u56FD\u969B\u7684\u306A\u5354\u529B\u7B49\u306B\u7A4D\u6975\u7684\u306B\u53D6\u308A\u7D44\u3080\u3053\u3068\u306B\u3088\u308A\u3001\u56FD\u969B\u901A\u8CA8\u30B7\u30B9\u30C6\u30E0\u306E\u5B89\u5B9A\u30FB\u56FD\u969B\u8CBF\u6613\u306E\u79E9\u5E8F\u3042\u308B\u767A\u5C55\u3092\u76EE\u6307\u3057\u307E\u3059\u3002"})]})},{children:t(d,{children:["\u30FB Mini",e(o,{fontSize:"1.mini",children:"Copyright \xA9 Ministry of Finance Japan. All Rights Reserved."})]})}]})]})]}),Box:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Box"}),e(o,{padding:1,overflow:"auto",children:e(m.Normal,{ssCardBox:!1,tone:"cellBorder",borderRadius:0,height:1,colLength:2,head:!1,rows:[[{children:e(n.Description,{children:`<Box>
 helloWorld!!
@@ -39,7 +39,7 @@ flexChilds={ 'auto' }
 <Box children={ 'GridBox4' } />
 <Box children={ 'GridBox5' } />
 <Box children={ 'GridBox6' } />
-</Grid>`})},{children:t(p,{gridCols:3,gap:1,children:[e(o,{border:!0,padding:1,backgroundColor:"layer.1",children:"GridBox1"}),e(o,{border:!0,padding:1,backgroundColor:"layer.2",children:"GridBox2"}),e(o,{border:!0,padding:1,backgroundColor:"layer.3",children:"GridBox3"}),e(o,{border:!0,padding:1,backgroundColor:"layer.4",children:"GridBox4"}),e(o,{border:!0,padding:1,backgroundColor:"layer.5",children:"GridBox5"}),e(o,{border:!0,padding:1,backgroundColor:"layer.6",children:"GridBox6"})]})}]]})})]}),Others:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Others"}),e(o,{padding:1,overflow:"auto",children:e(m.Normal,{ssCardBox:!1,colLength:2,tone:"cellBorder",height:1,borderRadius:0,head:!1,rows:[[{children:e(d,{children:e(n.Description,{children:`
+</Grid>`})},{children:t(g,{gridCols:3,gap:1,children:[e(o,{border:!0,padding:1,backgroundColor:"layer.1",children:"GridBox1"}),e(o,{border:!0,padding:1,backgroundColor:"layer.2",children:"GridBox2"}),e(o,{border:!0,padding:1,backgroundColor:"layer.3",children:"GridBox3"}),e(o,{border:!0,padding:1,backgroundColor:"layer.4",children:"GridBox4"}),e(o,{border:!0,padding:1,backgroundColor:"layer.5",children:"GridBox5"}),e(o,{border:!0,padding:1,backgroundColor:"layer.6",children:"GridBox6"})]})}]]})})]}),Others:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Others"}),e(o,{padding:1,overflow:"auto",children:e(m.Normal,{ssCardBox:!1,colLength:2,tone:"cellBorder",height:1,borderRadius:0,head:!1,rows:[[{children:e(d,{children:e(n.Description,{children:`
 <Button.Label
 htmlFor='testAccordion'
 type='sub'
@@ -53,27 +53,27 @@ children={
     in Accordion Element
   </>
 }
-/>`})})},{children:t(d,{children:[e(r.Label.Sub.R,{children:"ToggleButton",onClick:()=>{H.fn.toggle("testAccordion")}}),e(H,{accordionID:"testAccordion",defaultOpen:!0,children:"in Accordion Element"})]})}],[{children:e(n.Description,{children:`
+/>`})})},{children:t(d,{children:[e(r.Label.Sub.R,{children:"ToggleButton",onClick:()=>{M.fn.toggle("testAccordion")}}),e(M,{accordionID:"testAccordion",defaultOpen:!0,children:"in Accordion Element"})]})}],[{children:e(n.Description,{children:`
 <Img
 maxheight={ 8 }
 maxWidth={ 8 }
 src='...'
 alt='noImage'
 />
-                        `})},{children:e(T,{src:l.Images.defaultIcon("user"),alt:"noImage",freeCSS:{maxHeight:12*8,maxWidth:12*8}})}]]})})]})},f={_:()=>t(d,{children:[e(f.Comun,{}),e(f.Mingoo,{}),e(f.Google,{}),e(f.Facebook,{}),e(f.Line,{}),e(f.Twitter,{})]}),Comun:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Comun"}),e(o,{padding:1,overflow:"auto",children:t(h,{padding:2,children:[t(B.Left,{gap:2,children:[e(l.Brands.ComunIcon,{size:"S"}),e(l.Brands.ComunIcon,{size:"R"}),e(l.Brands.ComunIcon,{size:"L"}),e(l.Brands.ComunIcon,{size:"2L"}),e(l.Brands.ComunIcon,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunTitle,{size:"S"}),e(l.Brands.ComunTitle,{size:"R"}),e(l.Brands.ComunTitle,{size:"L"}),e(l.Brands.ComunTitle,{size:"2L"}),e(l.Brands.ComunTitle,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunLogoH,{size:"S"}),e(l.Brands.ComunLogoH,{size:"R"}),e(l.Brands.ComunLogoH,{size:"L"}),e(l.Brands.ComunLogoH,{size:"2L"}),e(l.Brands.ComunLogoH,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunLogoV,{size:"S"}),e(l.Brands.ComunLogoV,{size:"R"}),e(l.Brands.ComunLogoV,{size:"L"}),e(l.Brands.ComunLogoV,{size:"2L"}),e(l.Brands.ComunLogoV,{size:"3L"})]})]})})]}),Mingoo:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Mingoo"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.MingooIcon,{size:"S"}),e(l.Brands.MingooIcon,{size:"R"}),e(l.Brands.MingooIcon,{size:"L"}),e(l.Brands.MingooIcon,{size:"2L"}),e(l.Brands.MingooIcon,{size:"3L"})]})})]}),Google:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Google"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Google,{size:"S"}),e(l.Brands.Google,{size:"R"}),e(l.Brands.Google,{size:"L"}),e(l.Brands.Google,{size:"2L"}),e(l.Brands.Google,{size:"3L"})]})})]}),Facebook:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Facebook"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Facebook,{size:"S"}),e(l.Brands.Facebook,{size:"R"}),e(l.Brands.Facebook,{size:"L"}),e(l.Brands.Facebook,{size:"2L"}),e(l.Brands.Facebook,{size:"3L"})]})})]}),Line:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"LINE"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.LINE,{size:"S"}),e(l.Brands.LINE,{size:"R"}),e(l.Brands.LINE,{size:"L"}),e(l.Brands.LINE,{size:"2L"}),e(l.Brands.LINE,{size:"3L"})]})})]}),Twitter:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Twitter"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Twitter,{size:"S"}),e(l.Brands.Twitter,{size:"R"}),e(l.Brands.Twitter,{size:"L"}),e(l.Brands.Twitter,{size:"2L"}),e(l.Brands.Twitter,{size:"3L"})]})})]})},L={_:()=>t(d,{children:[e(L.Ripple,{}),e(L.Variables,{}),e(L.Tooltips,{}),e(L.Snackbar,{})]}),Ripple:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Ripple"}),t(h,{padding:2,children:[e(n.Description,{children:`<Element
+                        `})},{children:e(f,{src:l.Images.defaultIcon("user"),alt:"noImage",freeCSS:{maxHeight:12*8,maxWidth:12*8}})}]]})})]})},C={_:()=>t(d,{children:[e(C.Comun,{}),e(C.Mingoo,{}),e(C.Google,{}),e(C.Facebook,{}),e(C.Line,{}),e(C.Twitter,{})]}),Comun:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Comun"}),e(o,{padding:1,overflow:"auto",children:t(h,{padding:2,children:[t(B.Left,{gap:2,children:[e(l.Brands.ComunIcon,{size:"S"}),e(l.Brands.ComunIcon,{size:"R"}),e(l.Brands.ComunIcon,{size:"L"}),e(l.Brands.ComunIcon,{size:"2L"}),e(l.Brands.ComunIcon,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunTitle,{size:"S"}),e(l.Brands.ComunTitle,{size:"R"}),e(l.Brands.ComunTitle,{size:"L"}),e(l.Brands.ComunTitle,{size:"2L"}),e(l.Brands.ComunTitle,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunLogoH,{size:"S"}),e(l.Brands.ComunLogoH,{size:"R"}),e(l.Brands.ComunLogoH,{size:"L"}),e(l.Brands.ComunLogoH,{size:"2L"}),e(l.Brands.ComunLogoH,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunLogoV,{size:"S"}),e(l.Brands.ComunLogoV,{size:"R"}),e(l.Brands.ComunLogoV,{size:"L"}),e(l.Brands.ComunLogoV,{size:"2L"}),e(l.Brands.ComunLogoV,{size:"3L"})]})]})})]}),Mingoo:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Mingoo"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.MingooIcon,{size:"S"}),e(l.Brands.MingooIcon,{size:"R"}),e(l.Brands.MingooIcon,{size:"L"}),e(l.Brands.MingooIcon,{size:"2L"}),e(l.Brands.MingooIcon,{size:"3L"})]})})]}),Google:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Google"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Google,{size:"S"}),e(l.Brands.Google,{size:"R"}),e(l.Brands.Google,{size:"L"}),e(l.Brands.Google,{size:"2L"}),e(l.Brands.Google,{size:"3L"})]})})]}),Facebook:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Facebook"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Facebook,{size:"S"}),e(l.Brands.Facebook,{size:"R"}),e(l.Brands.Facebook,{size:"L"}),e(l.Brands.Facebook,{size:"2L"}),e(l.Brands.Facebook,{size:"3L"})]})})]}),Line:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"LINE"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.LINE,{size:"S"}),e(l.Brands.LINE,{size:"R"}),e(l.Brands.LINE,{size:"L"}),e(l.Brands.LINE,{size:"2L"}),e(l.Brands.LINE,{size:"3L"})]})})]}),Twitter:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Twitter"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Twitter,{size:"S"}),e(l.Brands.Twitter,{size:"R"}),e(l.Brands.Twitter,{size:"L"}),e(l.Brands.Twitter,{size:"2L"}),e(l.Brands.Twitter,{size:"3L"})]})})]})},v={_:()=>t(d,{children:[e(v.Ripple,{}),e(v.Variables,{}),e(v.Tooltips,{}),e(v.Snackbar,{})]}),Ripple:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Ripple"}),t(h,{padding:2,children:[e(n.Description,{children:`<Element
   ssEffectsOnActive={ 'ripple.( cloud | theme | nega | posi | warn )' }
 />`}),t(B.Center,{children:[e(r.Button.Prime.R,{ssEffectsOnActive:["ripple.white"],children:"White"}),e(r.Button.Border.R,{ssEffectsOnActive:["ripple.cloud"],children:"Cloud"}),e(r.Button.Border.R,{children:"Theme",ssEffectsOnActive:["ripple.theme"]})]})]})]}),Variables:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Effects"}),t(h,{padding:2,children:[e(n.Description,{children:`<Button
     ssEffectsOnActive={ 'shrink' }
-/>`}),e(B.Left,{children:e(r.Button.Prime.R,{onClick:()=>{C.fn.mini.active("testLoadingKey"),setTimeout(()=>{C.fn.stopALL()},5e3)},children:t(B.Center,{gap:0,children:[e(C.White.S,{loaderID:"testLoadingKey",marginRight:1}),e(o,{textAlign:"left",children:"Launch Mini Loader"})]})})}),t(B.Left,{children:[e(r.Button.Border.R,{children:"Shrink",ssEffectsOnActive:"shrink"}),e(r.Button.Border.R,{children:"Pudding",ssEffectsOnActive:"pudding"}),e(r.Button.Border.R,{children:"Expand",ssEffectsOnActive:"expand"}),e(r.Button.Border.R,{children:"corner Loader",onClick:()=>{C.fn.corner.active(),setTimeout(()=>{C.fn.corner.stop()},3e3)}}),e(r.Button.Border.R,{children:"top Loader",onClick:()=>{C.fn.top.active(),setTimeout(()=>{C.fn.top.stop()},7e3)}})]})]})]}),Tooltips:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"ToolTips"}),e(p,{gridCols:5,gap:1,padding:2,children:Array.from({length:25}).map((a,u)=>t(r.Button.Border.R,{padding:2,onMouseOver:s=>{let x=w.uuid.gen();F.open({tipsID:"tips-"+(u+1)+"---"+x,parent:s.currentTarget,gravityPoint:u+1,padding:0,content:e(F.Comps.Body,{children:u},u)})},children:["GravityPoint",u+1]}))})]}),Snackbar:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Snackbars"}),t(B.Center,{padding:2,children:[e(r.Button.Prime.R,{onClick:()=>{z.add({children:"hello World!!"})},children:"Add Normal Snackbar"}),e(r.Button.Prime.R,{onClick:()=>{z.add({secondsToClose:30,children:t(B.Separate,{verticalAlign:"baseline",paddingLeft:"2/3",children:["\u4E88\u7D04\u6642\u9593\u304C\u66F4\u65B0\u3055\u308C\u307E\u3057\u305F",e(r.Button.Clear.S,{color:"white",fontColor:"posi",children:"\u5143\u306B\u623B\u3059"})]})})},children:"Notices"}),e(r.Button.Prime.R,{onClick:()=>{let a=w.uuid.gen();z.add({snackID:a,children:t(h,{padding:1,children:[t(B.Left,{verticalAlign:"top",children:[e(T,{src:l.Images.defaultIcon("user"),ssSphere:4}),e(n.Description,{children:`Some Text
+/>`}),e(B.Left,{children:e(r.Button.Prime.R,{onClick:()=>{w.fn.mini.active("testLoadingKey"),setTimeout(()=>{w.fn.stopALL()},5e3)},children:t(B.Center,{gap:0,children:[e(w.White.S,{loaderID:"testLoadingKey",marginRight:1}),e(o,{textAlign:"left",children:"Launch Mini Loader"})]})})}),t(B.Left,{children:[e(r.Button.Border.R,{children:"Shrink",ssEffectsOnActive:"shrink"}),e(r.Button.Border.R,{children:"Pudding",ssEffectsOnActive:"pudding"}),e(r.Button.Border.R,{children:"Expand",ssEffectsOnActive:"expand"}),e(r.Button.Border.R,{children:"corner Loader",onClick:()=>{w.fn.corner.active(),setTimeout(()=>{w.fn.corner.stop()},3e3)}})]})]})]}),Tooltips:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"ToolTips"}),e(g,{gridCols:5,gap:1,padding:2,children:Array.from({length:25}).map((a,u)=>e(r.Button.Border.R,{onMouseOver:s=>{let p=R.uuid.gen();z.open({tipsID:"tips-"+(u+1)+"---"+p,parent:s.currentTarget,gravityPoint:u+1,padding:0,content:e(z.Comps.Body,{children:u},u)})},children:u+1},u))})]}),Snackbar:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Snackbars"}),t(B.Center,{padding:2,children:[e(r.Button.Prime.R,{onClick:()=>{y.add({children:"hello World!!"})},children:"Add Normal Snackbar"}),e(r.Button.Prime.R,{onClick:()=>{y.add({secondsToClose:30,children:t(B.Separate,{verticalAlign:"baseline",paddingLeft:"2/3",children:["\u4E88\u7D04\u6642\u9593\u304C\u66F4\u65B0\u3055\u308C\u307E\u3057\u305F",e(r.Button.Clear.S,{color:"white",fontColor:"posi",children:"\u5143\u306B\u623B\u3059"})]})})},children:"Notices"}),e(r.Button.Prime.R,{onClick:()=>{let a=R.uuid.gen();y.add({snackID:a,children:t(h,{padding:1,children:[t(B.Left,{verticalAlign:"top",children:[e(f,{src:l.Images.defaultIcon("user"),ssSphere:4}),e(n.Description,{children:`Some Text
 Some Text
-Some Text`})]}),t(B.Separate,{children:[e(r.Button.Sub.S,{color:"white",onClick:()=>{z.remove(a)},children:"\u9589\u3058\u308B"}),e(r.Anchor.Prime.S,{href:"",children:"\u8A73\u7D30"})]})]})})},children:"Message"})]})]})},P={_:()=>t(d,{children:[e(P.Types,{}),e(P.Tone,{}),e(P.Segmented,{})]}),Tone:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Tone"}),e(o,{padding:1,overflow:"auto",children:t(p,{gridCols:2,gap:2,children:[t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBPrime"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Prime.R,{color:"theme",children:"theme"}),e(r.Button.Prime.R,{color:"coffee",children:"posi"}),e(r.Button.Prime.R,{color:"ninja",children:"nega"}),e(r.Button.Prime.R,{color:"droplet",children:"warn"}),e(r.Button.Prime.R,{color:"googleBlue",children:"mono"}),e(r.Button.Prime.R,{color:"poizon",children:"pozion"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBSub"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Sub.R,{color:"theme",children:"theme"}),e(r.Button.Sub.R,{color:"posi",children:"posi"}),e(r.Button.Sub.R,{color:"nega",children:"nega"}),e(r.Button.Sub.R,{color:"warn",children:"warn"}),e(r.Button.Sub.R,{color:"cloud",children:"cloud"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.Sub.R,{color:"white",children:"white"}),e(r.Button.Sub.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBClear"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Clear.R,{color:"theme",children:"theme"}),e(r.Button.Clear.R,{color:"posi",children:"posi"}),e(r.Button.Clear.R,{color:"nega",children:"nega"}),e(r.Button.Clear.R,{color:"warn",children:"warn"}),e(r.Button.Clear.R,{color:"cloud",children:"cloud"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.Clear.R,{color:"white",children:"white"}),e(r.Button.Clear.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBFillToBorder"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.FillToBorder.R,{color:"theme",children:"theme"}),e(r.Button.FillToBorder.R,{color:"posi",children:"posi"}),e(r.Button.FillToBorder.R,{color:"nega",children:"nega"}),e(r.Button.FillToBorder.R,{color:"warn",children:"warn"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.FillToBorder.R,{color:"white",children:"white"}),e(r.Button.FillToBorder.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBBorderToFill"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.BorderToFill.R,{color:"theme",fontColor:"nega",children:e(o,{children:"theme"})}),e(r.Button.BorderToFill.R,{color:"posi",children:"posi"}),e(r.Button.BorderToFill.R,{color:"nega",children:"nega"}),e(r.Button.BorderToFill.R,{color:"warn",children:"warn"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.BorderToFill.R,{color:"white",children:"white"}),e(r.Button.BorderToFill.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBOthers"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Border.R,{children:"Border"}),e(r.Button.Normal.R,{children:"Normal"}),e(r.Button.Link,{children:"Link"}),e(r.Button.Plain,{children:"Plain"})]})]})]})})]}),Types:()=>t(c,{gap:2,flexChilds:"auto",children:[t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBButton"}),e(o,{padding:1,overflow:"auto",children:e(v,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Button.Prime ... />"}),e(o,{children:e(r.Button.Prime.R,{children:"Button.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Button.Sub ... />"}),e(o,{children:e(r.Button.Sub.R,{children:"Button.Sub AAAA"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Button.Border ... />"}),e(o,{children:e(r.Button.Border.R,{children:"Button.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBLabel"}),e(o,{padding:1,overflow:"auto",children:e(v,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Label.Prime ... />"}),e(o,{children:e(r.Label.Prime.R,{children:"Label.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Label.Sub ... />"}),e(o,{children:e(r.Label.Sub.R,{children:"Label.Sub"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Label.Border ... />"}),e(o,{children:e(r.Label.Border.R,{children:"Label.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBAnchor"}),e(o,{padding:1,overflow:"auto",children:e(v,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Anchor.Prime ... />"}),e(o,{children:e(r.Anchor.Prime.R,{href:"",children:"Anchor.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Anchor.Sub ... />"}),e(o,{children:e(r.Anchor.Sub.R,{href:"",children:"Anchor.Sub"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Anchor.Border ... />"}),e(o,{children:e(r.Anchor.Border.R,{href:"",children:"Anchor.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBSizes"}),t(p,{gridCols:2,padding:1,gap:2,children:[e(o,{flexCenter:!0,children:e(r.Button.Prime.XS,{children:'size="XS"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.S,{children:'size="S"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.R,{children:'size="R"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.L,{children:'size="L"'})})]})]})]}),Segmented:()=>t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"Segmented"}),t(c,{overflow:"auto",gap:2,padding:3,children:[e(i.Segmented.Auto,{tone:"cloud",value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]}),e(i.Segmented.Cloud,{value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]}),e(i.Segmented.Cloud2,{value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]}),e(i.Segmented.Cloud3,{value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]}),e(i.Segmented.Border,{value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]}),e(i.Segmented.Border2,{value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]}),e(i.Segmented.BottomLine,{value:1,options:[{value:0,label:"Takana"},{value:1,label:"Mentai"},{value:2,label:"Mayo"},{value:3,label:"Gyudon"}]})]})]})},K=()=>{const a={Basic:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"TextInput"}),t(o,{padding:1,children:[t(B.Separate,{marginBottom:2,children:[e(n.Description,{children:`<Input.Text
+Some Text`})]}),t(B.Separate,{children:[e(r.Button.Sub.S,{color:"white",onClick:()=>{y.remove(a)},children:"\u9589\u3058\u308B"}),e(r.Anchor.Prime.S,{href:"",children:"\u8A73\u7D30"})]})]})})},children:"Message"})]})]})},F={_:()=>t(d,{children:[e(F.Types,{}),e(F.Tone,{}),e(F.Segmented,{})]}),Tone:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Tone"}),e(o,{padding:1,overflow:"auto",children:t(g,{gridCols:2,gap:2,children:[t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBPrime"}),t(g,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Prime.R,{color:"theme",children:"theme"}),e(r.Button.Prime.R,{color:"coffee",children:"posi"}),e(r.Button.Prime.R,{color:"ninja",children:"nega"}),e(r.Button.Prime.R,{color:"droplet",children:"warn"}),e(r.Button.Prime.R,{color:"googleBlue",children:"mono"}),e(r.Button.Prime.R,{color:"poizon",children:"pozion"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBSub"}),t(g,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Sub.R,{color:"theme",children:"theme"}),e(r.Button.Sub.R,{color:"posi",children:"posi"}),e(r.Button.Sub.R,{color:"nega",children:"nega"}),e(r.Button.Sub.R,{color:"warn",children:"warn"}),e(r.Button.Sub.R,{color:"cloud",children:"cloud"})]}),t(g,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.Sub.R,{color:"white",children:"white"}),e(r.Button.Sub.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBClear"}),t(g,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Clear.R,{color:"theme",children:"theme"}),e(r.Button.Clear.R,{color:"posi",children:"posi"}),e(r.Button.Clear.R,{color:"nega",children:"nega"}),e(r.Button.Clear.R,{color:"warn",children:"warn"}),e(r.Button.Clear.R,{color:"cloud",children:"cloud"})]}),t(g,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.Clear.R,{color:"white",children:"white"}),e(r.Button.Clear.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBFillToBorder"}),t(g,{gridCols:3,gap:1,padding:1,children:[e(r.Button.FillToBorder.R,{color:"theme",children:"theme"}),e(r.Button.FillToBorder.R,{color:"posi",children:"posi"}),e(r.Button.FillToBorder.R,{color:"nega",children:"nega"}),e(r.Button.FillToBorder.R,{color:"warn",children:"warn"})]}),t(g,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.FillToBorder.R,{color:"white",children:"white"}),e(r.Button.FillToBorder.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBBorderToFill"}),t(g,{gridCols:3,gap:1,padding:1,children:[e(r.Button.BorderToFill.R,{color:"theme",fontColor:"nega",children:e(o,{children:"theme"})}),e(r.Button.BorderToFill.R,{color:"posi",children:"posi"}),e(r.Button.BorderToFill.R,{color:"nega",children:"nega"}),e(r.Button.BorderToFill.R,{color:"warn",children:"warn"})]}),t(g,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.BorderToFill.R,{color:"white",children:"white"}),e(r.Button.BorderToFill.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBOthers"}),t(g,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Border.R,{children:"Border"}),e(r.Button.Normal.R,{children:"Normal"}),e(r.Button.Link,{children:"Link"}),e(r.Button.Plain,{children:"Plain"})]})]})]})})]}),Types:()=>t(c,{gap:2,flexChilds:"auto",children:[t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBButton"}),e(o,{padding:1,overflow:"auto",children:e(S,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Button.Prime ... />"}),e(o,{children:e(r.Button.Prime.R,{children:"Button.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Button.Sub ... />"}),e(o,{children:e(r.Button.Sub.R,{children:"Button.Sub AAAA"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Button.Border ... />"}),e(o,{children:e(r.Button.Border.R,{children:"Button.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBLabel"}),e(o,{padding:1,overflow:"auto",children:e(S,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Label.Prime ... />"}),e(o,{children:e(r.Label.Prime.R,{children:"Label.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Label.Sub ... />"}),e(o,{children:e(r.Label.Sub.R,{children:"Label.Sub"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Label.Border ... />"}),e(o,{children:e(r.Label.Border.R,{children:"Label.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBAnchor"}),e(o,{padding:1,overflow:"auto",children:e(S,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Anchor.Prime ... />"}),e(o,{children:e(r.Anchor.Prime.R,{href:"",children:"Anchor.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Anchor.Sub ... />"}),e(o,{children:e(r.Anchor.Sub.R,{href:"",children:"Anchor.Sub"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Anchor.Border ... />"}),e(o,{children:e(r.Anchor.Border.R,{href:"",children:"Anchor.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBSizes"}),t(g,{gridCols:2,padding:1,gap:2,children:[e(o,{flexCenter:!0,children:e(r.Button.Prime.XS,{children:'size="XS"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.S,{children:'size="S"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.R,{children:'size="R"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.L,{children:'size="L"'})})]})]})]}),Segmented:()=>t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"Segmented"}),t(c,{overflow:"auto",gap:2,padding:3,children:[e(i.Segmented.Auto,{tone:"cloud",value:1,options:[{value:0,label:e(x.AngleLeft,{})},{value:1,label:e(x.AngleRight,{})},{value:2,label:e(x.AngleUp,{})},{value:3,label:e(x.AngleDown,{})}]}),e(i.Segmented.Cloud,{value:1,options:[{value:0,label:e(x.AngleLeft,{})},{value:1,label:e(x.AngleRight,{})},{value:2,label:e(x.AngleUp,{})},{value:3,label:e(x.AngleDown,{})}]}),e(i.Segmented.Cloud2,{value:1,options:[{value:0,label:e(x.AngleLeft,{})},{value:1,label:e(x.AngleRight,{})},{value:2,label:e(x.AngleUp,{})},{value:3,label:e(x.AngleDown,{})}]}),e(i.Segmented.Cloud3,{value:1,options:[{value:0,label:e(x.AngleLeft,{})},{value:1,label:e(x.AngleRight,{})},{value:2,label:e(x.AngleUp,{})},{value:3,label:e(x.AngleDown,{})}]}),e(i.Segmented.Border,{value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]}),e(i.Segmented.Border2,{value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]}),e(i.Segmented.BottomLine,{value:1,options:[{value:0,label:"Takana"},{value:1,label:"Mentai"},{value:2,label:"Mayo"},{value:3,label:"Gyudon"}]})]})]})},Q=()=>{const a={Basic:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"TextInput"}),t(o,{padding:1,children:[t(B.Separate,{marginBottom:2,children:[e(n.Description,{children:`<Input.Text
     required
     value={ 'hello React!!' }
   />`}),t(h,{gap:"1/2",children:[t(o,{children:["testInputLabel ",e(i.Comps.RequiredSign,{})]}),e(i.Text.Normal,{required:!0,value:"helloReact"})]})]}),t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Text.Email",e(i.Text.Email,{autoComplete:"off",name:"emailInput",value:"******@gmail.com"})]}),t(o,{children:["Input.Text.Number",e(i.Text.Number,{value:"324"})]}),t(o,{children:["Input.Text.Tel",e(i.Text.Tel,{value:"080-6995-2229"})]}),t(o,{children:["Input.Text.Money.JPY",e(i.Text.Money.JPY,{value:"3000"})]}),t(o,{children:["Input.Text.Url",e(i.Text.Url,{value:"http://google.com"})]}),t(o,{children:["Input.Text.Postal",t(B.Right,{children:[e(o,{flexSizing:0,children:e(i.Text.Postal,{override:"force"})}),e(r.Button.Border.R,{onClick:()=>I(void 0,null,function*(){}),children:"\u73FE\u5728\u5730\u3092\u53D6\u5F97"})]}),e(o,{id:"postalResult",padding:1,textAlign:"left"})]}),t(o,{children:["Input.Text.Password",e(i.Text.Password,{value:"onigiriUmai"})]}),t(o,{flexNewLine:!0,children:["Input.TextArea",e(i.TextArea,{value:`text1
   text2
   text3
   text4
-  text5`,rows:5})]})]})]})]})}),Time:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Time Input"}),e(o,{padding:1,children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Time.Clock",e(i.Time.Clock,{})]}),t(o,{children:["Input.Time.Date",e(i.Time.Date,{})]}),t(o,{children:["Input.Time.Week",e(i.Time.Week,{})]}),t(o,{children:["Input.Time.Month",e(i.Time.Month,{})]}),t(o,{children:["Input.Time.Year",e(i.Time.Year,{})]}),t(o,{children:["Input.Time.Periods.Date",e(i.Time.Periods.Date,{})]}),t(o,{children:["Input.Time.Periods.Month",e(i.Time.Periods.Month,{})]}),t(o,{children:["Input.Time.DateWareki",e(i.Time.DateWareki,{})]}),t(o,{children:["Input.Time.picker",e(i.Select,{id:"timePicker",options:[{value:"clock",label:"clock"},{value:"date",label:"date"},{value:"week",label:"week"},{value:"month",label:"month"},{value:"year",label:"year"},{value:"dates",label:"dates"},{value:"months",label:"months"},{value:"dateWareki",label:"dateWareki"}],onUpdateValidValue:({value:u})=>{i.Time.fn.picker.launch({parent:"#timePicker",restrict:u,defaultValue:"",onValueUpdate:s=>{console.log(s)}})}})]})]})})]})}),List:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Radio & Checkbox Input"}),e(o,{padding:1,children:t(h,{children:[t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Radio",e(i.Radio,{value:[1],options:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3"},{value:4,label:"option4"},{value:5,label:"option5"}]})]}),t(o,{children:["Input.Checkbox",e(i.Checkbox,{value:[2,"3"],options:[{value:"1",label:"option1"},{value:"2",label:"option2"},{value:"3",label:"option3"}]})]})]}),t(h,{children:[e(n.Paragraph,{children:"Tones"}),t(c,{gap:2,flexChilds:"auto",children:[e(i.Radio,{tone:"plain",value:[1],gap:1,options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"normal",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"cloud",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"border",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"vivid",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]})]})]})]})})]})}),Select:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Select,Search,Chips Input"}),e(o,{padding:1,children:e(h,{children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Select",e(i.Select,{required:!0,value:3,options:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3a"},{value:4,label:"option4"}]})]}),t(o,{children:["Input.Search",e(i.Search,{required:!0,defaultOptions:[{value:1,label:"1"},{value:{value1:2,value2:3},label:"Object"},{value:3,label:"3"},{value:101,label:"101"},{value:102,label:"102"}],onDynamicSearch:(...u)=>I(void 0,null,function*(){let s=[];for(let x=0;x<100;x++)s.push({value:x,label:String(x)});return{options:s}})})]}),t(o,{flexNewLine:!0,children:["Input.Chips",e(i.Chips,{limit:5,value:[{value:"option3",label:"option3"}],onUpdateValidValue:({value:u})=>{console.log(u)},defaultOptions:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3"},{value:4,label:"option4"}]})]})]})})})]})}),Variables:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Variables"}),e(o,{padding:1,children:e(h,{children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.File",e(i.Filer,{limit:3})]}),t(o,{children:["Input.Switch",t(c,{gap:2,children:[e(i.Switch,{}),e(i.Switch,{appearance:"applely",color:"icicles",value:!0}),e(i.Switch,{appearance:"applely",icon:e(g.Check,{}),color:"warn",value:!0})]})]}),t(o,{flexNewLine:!0,children:["Input.Slider",e(i.Slider,{color:"battery",name:"sliderInput",value:40,step:10,min:0,max:100})]})]})})})]})})};return e(d,{children:e(k.Plate,{size:"L",children:t(p,{gap:2,gridCols:2,children:[e(a.Basic,{}),e(a.Select,{}),e(a.Time,{}),e(a.List,{}),e(a.Variables,{})]})})})},j=()=>{const a=u=>{let s="testModal2";O.open({type:u,sheetID:s,size:"S",padding:2,content:t(O.Comps.Body,{padding:1,children:[e(o,{padding:2,minHeight:"viewHeight",children:"Content"}),e(B.Right,{children:e(r.Button.Prime.R,{onClick:()=>{O.close(s)},children:"\u9589\u3058\u308B"})})]})})};return t(d,{children:[t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"CardBox"}),e(o,{padding:1,overflow:"auto",children:e(n.Description,{children:`<Box ssCardBox>
+  text5`,rows:5})]})]})]})]})}),Time:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Time Input"}),e(o,{padding:1,children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Time.Clock",e(i.Time.Clock,{})]}),t(o,{children:["Input.Time.Date",e(i.Time.Date,{})]}),t(o,{children:["Input.Time.Week",e(i.Time.Week,{})]}),t(o,{children:["Input.Time.Month",e(i.Time.Month,{})]}),t(o,{children:["Input.Time.Year",e(i.Time.Year,{})]}),t(o,{children:["Input.Time.Periods.Date",e(i.Time.Periods.Date,{})]}),t(o,{children:["Input.Time.Periods.Month",e(i.Time.Periods.Month,{})]}),t(o,{children:["Input.Time.DateWareki",e(i.Time.DateWareki,{})]}),t(o,{children:["Input.Time.picker",e(i.Select,{id:"timePicker",options:[{value:"clock",label:"clock"},{value:"date",label:"date"},{value:"week",label:"week"},{value:"month",label:"month"},{value:"year",label:"year"},{value:"dates",label:"dates"},{value:"months",label:"months"},{value:"dateWareki",label:"dateWareki"}],onUpdateValidValue:({value:u})=>{i.Time.fn.picker.launch({parent:"#timePicker",restrict:u,defaultValue:"",onValueUpdate:s=>{console.log(s)}})}})]})]})})]})}),List:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Radio & Checkbox Input"}),e(o,{padding:1,children:t(h,{children:[t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Radio",e(i.Radio,{value:[1],options:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3"},{value:4,label:"option4"},{value:5,label:"option5"}]})]}),t(o,{children:["Input.Checkbox",e(i.Checkbox,{value:[2,"3"],options:[{value:"1",label:"option1"},{value:"2",label:"option2"},{value:"3",label:"option3"}]})]})]}),t(h,{children:[e(n.Paragraph,{children:"Tones"}),t(c,{gap:2,flexChilds:"auto",children:[e(i.Radio,{tone:"plain",value:[1],gap:1,options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"normal",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"cloud",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"border",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"vivid",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]})]})]})]})})]})}),Select:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Select,Search,Chips Input"}),e(o,{padding:1,children:e(h,{children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Select",e(i.Select,{required:!0,value:3,options:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3a"},{value:4,label:"option4"}]})]}),t(o,{children:["Input.Search",e(i.Search,{required:!0,defaultOptions:[{value:1,label:"1"},{value:{value1:2,value2:3},label:"Object"},{value:3,label:"3"},{value:101,label:"101"},{value:102,label:"102"}],onDynamicSearch:(...u)=>I(void 0,null,function*(){let s=[];for(let p=0;p<100;p++)s.push({value:p,label:String(p)});return{options:s}})})]}),t(o,{flexNewLine:!0,children:["Input.Chips",e(i.Chips,{limit:5,value:[{value:"option3",label:"option3"}],onUpdateValidValue:({value:u})=>{console.log(u)},defaultOptions:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3"},{value:4,label:"option4"}]})]})]})})})]})}),Variables:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Variables"}),e(o,{padding:1,children:e(h,{children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.File",e(i.Filer,{limit:3})]}),t(o,{children:["Input.Switch",t(c,{gap:2,children:[e(i.Switch,{}),e(i.Switch,{appearance:"applely",color:"icicles",value:!0}),e(i.Switch,{appearance:"applely",icon:e(x.Check,{}),color:"warn",value:!0})]})]}),t(o,{flexNewLine:!0,children:["Input.Slider",e(i.Slider,{color:"battery",name:"sliderInput",value:40,step:10,min:0,max:100})]})]})})})]})})};return e(d,{children:e(_,{size:"L",children:t(g,{gap:2,gridCols:2,children:[e(a.Basic,{}),e(a.Select,{}),e(a.Time,{}),e(a.List,{}),e(a.Variables,{})]})})})},Z=()=>{const a=u=>{let s="testModal2";G.open({type:u,sheetID:s,size:"S",padding:2,content:t(G.Comps.Body,{padding:1,children:[e(o,{padding:2,children:"Content"}),e(B.Right,{children:e(r.Button.Prime.R,{onClick:()=>{G.close(s)},children:"\u9589\u3058\u308B"})})]})})};return t(d,{children:[t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"CardBox"}),e(o,{padding:1,overflow:"auto",children:e(n.Description,{children:`<Box ssCardBox>
   <Box>
     Header
   </Box>
@@ -91,9 +91,9 @@ Some Text`})]}),t(B.Separate,{children:[e(r.Button.Sub.S,{color:"white",onClick:
       content: RightSideReactComponent
     }
   ] }
-/>`})}),e(o,{padding:2,overflow:"auto",children:e(v,{border:!0,rowStyles:{padding:1,borderBottom:!0},rows:[{children:t(d,{children:[e(o,{children:"Title1"}),e(o,{children:e(o,{children:"Content1"})})]}),horizontalAlign:"between"},{children:t(d,{children:[e(o,{flexGrid:1,children:"Title2"}),e(o,{flexGrid:2,children:e(o,{children:"Content2"})})]})},{children:t(d,{children:[e(o,{children:"Title3"}),e(o,{children:e(o,{children:"Content3"})})]}),flexType:"col"},{children:e(d,{children:e(o,{children:e(o,{children:"Content4"})})}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Sheet"}),e(o,{padding:1,overflow:"auto",children:e(n.Description,{children:`Sheet.open( {
+/>`})}),e(o,{padding:2,overflow:"auto",children:e(S,{border:!0,rowStyles:{padding:1,borderBottom:!0},rows:[{children:t(d,{children:[e(o,{children:"Title1"}),e(o,{children:e(o,{children:"Content1"})})]}),horizontalAlign:"between"},{children:t(d,{children:[e(o,{flexGrid:1,children:"Title2"}),e(o,{flexGrid:2,children:e(o,{children:"Content2"})})]})},{children:t(d,{children:[e(o,{children:"Title3"}),e(o,{children:e(o,{children:"Content3"})})]}),flexType:"col"},{children:e(d,{children:e(o,{children:e(o,{children:"Content4"})})}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Sheet"}),e(o,{padding:1,overflow:"auto",children:e(n.Description,{children:`Sheet.open( {
   sheetID: 'sheetID',
   header: ReactElement | React.FC< { modalClose } >,
   body: ReactElement | React.FC< { modalClose } >,
   footer: ReactElement | React.FC< { modalClose } >
-} );`})}),t(h,{padding:2,children:[e(o,{flexCenter:!0,children:t(p,{gridCols:3,gap:1,children:[e(r.Button.Border.R,{onClick:()=>{a("normal.topLeft")},children:"Top Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.topCenter")},children:"Top Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.topRight")},children:"Top Right"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleLeft")},children:"Middle Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleCenter")},children:"Middle Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleRight")},children:"Middle Right"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomLeft")},children:"Bottom Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomCenter")},children:"Bottom Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomRight")},children:"Bottom Right"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.left")},children:"Drawer Left"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.bottom")},children:"Drawer Bottom"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.right")},children:"Drawer Right"}),e(r.Button.Border.R,{onClick:u=>{F.open({tipsID:"test40",content:e(o,{padding:1,border:!0,borderRadius:2,backgroundColor:"dark",fontColor:"white",children:"Content"}),parent:u.target})},children:"Open Tooltips"})]})}),t(B.Center,{children:["Image Picker",e(T,{src:l.Images.defaultIcon("user"),unitWidth:6,unitHeight:6,showExpand:!0})]})]})]})]})},D={_:()=>e(d,{children:t(h,{children:[e(D.Data,{}),e(D.Normal,{}),e(D.Drag,{}),e(D.Spread,{})]})}),Normal:()=>{let a=[];for(var u=0;u<10;u++){let s=[{children:"head_"+u},{children:"data_"+u},{children:"data_"+u}];a.push(s)}return t(d,{children:[e(o,{fontSize:"5.subTitle",children:"Table.Normal"}),e(m.Normal,{colLength:3,head:[{children:"head1"},{children:"head2"},{children:"head3"}],rows:a,ssCardBox:!0,onRowClick:s=>{console.log(s)}})]})},Drag:()=>{let a=[];for(var u=0;u<4;u++){let s=[{children:"head_"+u},{children:"data_"+u},{children:"data_"+u}];s.rowID="rowID-"+u,a.push(s)}return t(d,{children:[e(o,{fontSize:"5.subTitle",children:"Table.Drag"}),e(m.Drag,{colLength:3,head:[{children:"head1"},{children:"head2"},{children:"head3"}],rows:a,ssCardBox:!0,onOrderChanged:s=>{console.log(s)}})]})},Data:()=>{let a=[];for(var u=0;u<100;u++){let x=Math.round(Math.random()*50+1),y=Math.round(Math.random()*50+1),A=Math.round(Math.random()*50+1),b="name_"+x,E="data_"+y,M="data_"+A,N=[{type:"th",children:u+":"+b,data:b,orderIndex:u},{type:"td",children:E,data:E},{type:"td",children:M,data:M}];a.push(N)}a[1].checked=!0,a[4].checked=!0,a[10].checked=!0;let s="testDataTable";return t(d,{children:[t(c,{horizontalAlign:"between",children:[e(o,{fontSize:"5.subTitle",children:"Table.Data"}),t(c,{gap:"1/2",backgroundColor:"theme",borderRadius:"1.tone.primary",overflow:"hidden",fontColor:"white",children:[e(r.Button.Clear.R,{color:"white",children:"SubmitButton"}),e(o,{flexSizing:"none",unitWidth:"1/4",backgroundColor:"layer.4.opa.middle",isRounded:!0,margin:["2/3",0]}),e(r.Button.Clear.R,{padding:[0,1],color:"white",onClick:x=>{F.open({tipsID:w.uuid.gen(),parent:x.target,gravityPoint:24,close_option:{aroundClick:!0,parentBlur:!1},content:e(d,{children:t(h,{gap:0,padding:["2/3",0],backgroundColor:"layer.1",borderRadius:2,boxShadow:"0.normal",overflow:"hidden",children:[e(r.Button.Clear.S,{borderRadius:0,borderBottom:"1.thin",children:"\u3059\u3079\u3066\u3092\u51FA\u529B"}),e(r.Button.Clear.S,{borderRadius:0,borderBottom:"1.thin",children:"\u3053\u306E\u30DA\u30FC\u30B8\u306E\u307F\u51FA\u529B"}),e(r.Button.Clear.S,{borderRadius:0,children:"\u30C1\u30A7\u30C3\u30AF\u3057\u305F\u884C\u306E\u307F\u51FA\u529B"})]})})})},children:e(g.EllipsisV,{})})]})]}),t(B.Separate,{verticalAlign:"bottom",children:[t(B.Left,{verticalAlign:"bottom",children:[e(m.Data.SearchInput,{tableID:s}),e(m.Data.Info,{tableID:s})]}),t(B.Right,{verticalAlign:"unset",children:[e(m.Data.RowLength,{tableID:s,lengthSelect:[30,50,100]}),e(m.Data.Paging,{tableID:s})]})]}),e(m.Data,{tableID:s,colLength:3,head:[{data:"head1"},{data:"head2"},{data:"head3"}],rows:a,pageRowLength:30,ssCardBox:!0,filter:[!0],checker:!0})]})},Spread:()=>e(d,{children:e(o,{fontSize:"5.subTitle",children:"Table.Spread"})})},X=()=>{let[a,u]=S.useState(""),[s,x]=S.useState(""),[y,A]=S.useState("");return e(d,{children:t(o,{children:[t(r.Button.Prime.R,{onClick:()=>{J.open({use:"square",develops:[{size:"S"},{size:"R"},{size:"L"}],onProcessFinished:b=>I(void 0,null,function*(){u(yield b[0].toDataUrl()),x(yield b[1].toDataUrl()),A(yield b[2].toDataUrl())})})},children:[e(g.Image,{})," \u30A4\u30E1\u30FC\u30B8\u3092\u9078\u629E"]}),t(c,{verticalAlign:"top",gap:1,children:[a&&e(T,{isRounded:!0,src:a,alt:"",showExpand:!0,freeCSS:{maxWidth:12*12}}),s&&e(T,{style:{maxWidth:24*12},src:s,alt:"",showExpand:!0}),y&&e(T,{style:{maxWidth:24*12},src:y,alt:"",showExpand:!0}),e(k.SwipeView,{border:!0,borderWidth:3,margin:[3,"auto"],freeCSS:{width:12*10},slideIndex:1,options:{loop:!0,onSlideCallback:b=>{}},slides:[e(o,{backgroundColor:"nega",padding:3,flexCenter:!0,children:"test1"}),e(o,{backgroundColor:"posi",padding:3,flexCenter:!0,children:"test2"}),e(o,{backgroundColor:"warn",padding:3,flexCenter:!0,children:"test3"}),e(o,{backgroundColor:"theme",padding:3,flexCenter:!0,children:"test4"})]})]})]})})},_=()=>{let[a,u]=S.useState(Number(w.queryParams.get().ti)||0);return S.useEffect(()=>{w.queryParams.set({key:"ti",value:a})},[a]),e(d,{children:t(h,{gap:0,minHeight:"contentHeight",backgroundColor:"layer.1",children:[e(k.TabBar,{borderBottom:!0,position:"sticky",backgroundColor:"layer.1",top:"topBase",tabIndex:a,tabs:["Profiles","Basic","Buttons","Inputs","Styling","Effection","Tables","Croppie","PlayGround","Logo"],onTabChange:s=>{localStorage.setItem("designTabHeader",String(s)),u(s)},UnderBreakPointStyles:{position:"static",top:0}}),e(o,{flexSizing:0,position:"relative",freeCSS:{zIndex:1},children:e(k.PageViewController,{viewIndex:a,views:[e(W._,{}),e(R._,{}),e(P._,{}),e(K,{}),e(j,{}),e(L._,{}),e(D._,{}),e(X,{}),e(f._,{})],wrapper:s=>e(Y.FadeIn,{animationTime:200,children:e(k.Plate,{children:e(c,{gap:2,padding:2,flexWrap:!0,flexChilds:"auto",children:s})})},a)})})]})})};export{_ as DesignBook,_ as default};
+} );`})}),t(h,{padding:2,children:[e(o,{flexCenter:!0,children:t(g,{gridCols:3,gap:1,children:[e(r.Button.Border.R,{onClick:()=>{a("normal.topLeft")},children:"Top Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.topCenter")},children:"Top Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.topRight")},children:"Top Right"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleLeft")},children:"Middle Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleCenter")},children:"Middle Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleRight")},children:"Middle Right"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomLeft")},children:"Bottom Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomCenter")},children:"Bottom Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomRight")},children:"Bottom Right"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.left")},children:"Drawer Left"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.bottom")},children:"Drawer Bottom"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.right")},children:"Drawer Right"}),e(r.Button.Border.R,{onClick:u=>{z.open({tipsID:"test40",content:e(o,{padding:1,border:!0,borderRadius:2,backgroundColor:"dark",fontColor:"white",children:"Content"}),parent:u.target})},children:"Open Tooltips"})]})}),t(B.Center,{children:["Image Picker",e(f,{src:l.Images.defaultIcon("user"),unitWidth:6,unitHeight:6,showExpand:!0})]})]})]})]})},k={_:()=>e(d,{children:t(h,{children:[e(k.Normal,{}),e(k.Data,{}),e(k.Drag,{}),e(k.Spread,{})]})}),Normal:()=>{let a=[];for(var u=0;u<10;u++){let s=[{children:"head_"+u},{children:"data_"+u},{children:"data_"+u}];a.push(s)}return t(d,{children:[e(o,{fontSize:"5.subTitle",children:"Table.Normal"}),e(m.Normal,{colLength:3,head:[{children:"head1"},{children:"head2"},{children:"head3"}],rows:a,ssCardBox:!0,onRowClick:s=>{console.log(s)}})]})},Drag:()=>{let a=[];for(var u=0;u<4;u++){let s=[{children:"head_"+u},{children:"data_"+u},{children:"data_"+u}];s.rowID="rowID-"+u,a.push(s)}return t(d,{children:[e(o,{fontSize:"5.subTitle",children:"Table.Drag"}),e(m.Drag,{colLength:3,head:[{children:"head1"},{children:"head2"},{children:"head3"}],rows:a,ssCardBox:!0,onOrderChanged:s=>{console.log(s)}})]})},Data:()=>{let a=[];for(var u=0;u<100;u++){let p=Math.round(Math.random()*50+1),L=Math.round(Math.random()*50+1),P=Math.round(Math.random()*50+1),b="name_"+p,W="data_"+L,E="data_"+P,N=[{type:"th",children:u+":"+b,data:b,orderIndex:u},{type:"td",children:W,data:W},{type:"td",children:E,data:E}];a.push(N)}a[1].checked=!0,a[4].checked=!0,a[10].checked=!0;let s="testDataTable";return t(d,{children:[t(c,{horizontalAlign:"between",children:[e(o,{fontSize:"5.subTitle",children:"Table.Data"}),t(c,{gap:"1/2",backgroundColor:"theme",borderRadius:"1.tone.primary",overflow:"hidden",fontColor:"white",children:[e(r.Button.Clear.R,{color:"white",children:"SubmitButton"}),e(o,{flexSizing:"none",unitWidth:"1/4",backgroundColor:"layer.4.opa.middle",isRounded:!0,margin:["2/3",0]}),e(r.Button.Clear.R,{padding:[0,1],color:"white",onClick:p=>{z.open({tipsID:R.uuid.gen(),parent:p.target,gravityPoint:24,close_option:{aroundClick:!0,parentBlur:!1},content:e(d,{children:t(h,{gap:0,padding:["2/3",0],backgroundColor:"layer.1",borderRadius:2,boxShadow:"0.normal",overflow:"hidden",children:[e(r.Button.Clear.S,{borderRadius:0,borderBottom:"1.thin",children:"\u3059\u3079\u3066\u3092\u51FA\u529B"}),e(r.Button.Clear.S,{borderRadius:0,borderBottom:"1.thin",children:"\u3053\u306E\u30DA\u30FC\u30B8\u306E\u307F\u51FA\u529B"}),e(r.Button.Clear.S,{borderRadius:0,children:"\u30C1\u30A7\u30C3\u30AF\u3057\u305F\u884C\u306E\u307F\u51FA\u529B"})]})})})},children:e(x.EllipsisV,{})})]})]}),t(B.Separate,{verticalAlign:"bottom",children:[t(B.Left,{verticalAlign:"bottom",children:[e(m.Data.SearchInput,{tableID:s}),e(m.Data.Info,{tableID:s})]}),t(B.Right,{verticalAlign:"unset",children:[e(m.Data.RowLength,{tableID:s,lengthSelect:[30,50,100]}),e(m.Data.Paging,{tableID:s})]})]}),e(m.Data,{tableID:s,colLength:3,head:[{data:"head1"},{data:"head2"},{data:"head3"}],rows:a,pageRowLength:30,ssCardBox:!0,filter:[!0],checker:!0})]})},Spread:()=>e(d,{children:e(o,{fontSize:"5.subTitle",children:"Table.Spread"})})},ee=()=>{let[a,u]=D(""),[s,p]=D(""),[L,P]=D("");return e(d,{children:t(o,{children:[t(r.Button.Prime.R,{onClick:()=>{$.open({use:"square",develops:[{size:"S"},{size:"R"},{size:"L"}],onProcessFinished:b=>I(void 0,null,function*(){u(yield b[0].toDataUrl()),p(yield b[1].toDataUrl()),P(yield b[2].toDataUrl())})})},children:[e(x.Image,{})," \u30A4\u30E1\u30FC\u30B8\u3092\u9078\u629E"]}),t(c,{verticalAlign:"top",gap:1,children:[a&&e(f,{isRounded:!0,src:a,alt:"",showExpand:!0,freeCSS:{maxWidth:12*12}}),s&&e(f,{style:{maxWidth:24*12},src:s,alt:"",showExpand:!0}),L&&e(f,{style:{maxWidth:24*12},src:L,alt:"",showExpand:!0}),e(K,{border:!0,borderWidth:3,margin:[3,"auto"],freeCSS:{width:12*10},slideIndex:1,options:{loop:!0,onSlideCallback:b=>{}},slides:[e(o,{backgroundColor:"nega",padding:3,flexCenter:!0,children:"test1"}),e(o,{backgroundColor:"posi",padding:3,flexCenter:!0,children:"test2"}),e(o,{backgroundColor:"warn",padding:3,flexCenter:!0,children:"test3"}),e(o,{backgroundColor:"theme",padding:3,flexCenter:!0,children:"test4"})]})]})]})})},H=()=>{let[a,u]=D(Number(R.queryParams.get().ti)||0);return V(()=>{R.queryParams.set({ti:String(a)})},[a]),e(d,{children:t(h,{gap:0,minHeight:"contentHeight",backgroundColor:"layer.1",children:[e(j,{borderBottom:!0,position:"sticky",backgroundColor:"layer.1",top:"topBase",tabIndex:a,tabs:["Profiles","Basic","Buttons","Inputs","Styling","Effection","Tables","Croppie","PlayGround","Logo"],onTabChange:s=>{localStorage.setItem("designTabHeader",String(s)),u(s)},UnderBreakPointStyles:{position:"static",top:0}}),e(o,{flexSizing:0,position:"relative",freeCSS:{zIndex:1},children:e(J,{viewIndex:a,views:[e(O._,{}),e(T._,{}),e(F._,{}),e(Q,{}),e(Z,{}),e(v._,{}),e(k._,{}),e(ee,{}),e(C._,{})],wrapper:s=>e(X.FadeIn,{animationTime:200,children:e(_,{children:e(c,{gap:2,padding:2,flexWrap:!0,flexChilds:"auto",children:s})})},a)})})]})})};export{H as DesignBook,H as default};