amotify 0.2.278 → 0.2.279

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

@@ -0,0 +1,142 @@
+import { ReactElement, StyleProps } from '../../@declares';
+import React from 'react';
+declare namespace DataGrid {
+    type customTableHTMLAttributes<T> = Omit<React.TableHTMLAttributes<T>, 'border'>;
+    type Table = StyleProps.BasicElement & customTableHTMLAttributes<HTMLTableElement>;
+    type TableHead = StyleProps.BasicElement & customTableHTMLAttributes<HTMLTableSectionElement>;
+    type TableBody = StyleProps.BasicElement & customTableHTMLAttributes<HTMLTableSectionElement>;
+    type TR = StyleProps.BasicElement & React.HTMLAttributes<HTMLTableRowElement>;
+    type TableCell = StyleProps.BasicElement & React.ThHTMLAttributes<HTMLTableCellElement>;
+    type RowID = string | number;
+    type SortType = -1 | 0 | 1;
+    type Tones = 'border' | 'border.vertical' | 'border.horizontal' | 'plain';
+    type CellPosition = {
+        rowIdx: number;
+        colIdx: number;
+        isTopCell: boolean;
+        isBottomCell: boolean;
+        isLeftCell: boolean;
+        isRightCell: boolean;
+        isHeader: boolean;
+        isBody: boolean;
+    };
+    type Cell = TableCell & {
+        type?: 'th' | 'td';
+        data: string | number;
+        label?: ReactElement;
+        sortKey?: string | number;
+    };
+    namespace Cell {
+        type Head = Cell & {
+            /**
+             * default true
+             */
+            sortable?: SortType;
+            defSort?: SortType;
+            filterable?: boolean;
+            checkable?: boolean | 'body' | 'head';
+            draggable?: boolean;
+        };
+        type Body = Cell & {};
+    }
+    type RowMeta = {
+        row_id?: RowID;
+        isSelected?: boolean;
+        isFilterMatched?: boolean;
+        isVisible?: boolean;
+        __sys_searchkey?: string;
+    };
+    namespace Row {
+        type Head = Cell.Head[];
+        type Body = Cell.Body[] & RowMeta & {
+            onRowClick?(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+        };
+    }
+    type Input = {
+        tone?: Tones;
+        datagridID?: string;
+        colLength?: number;
+        maxRow?: number;
+        header?: Row.Head;
+        body: Row.Body[];
+        defaultSearchKey?: string;
+        cellStyles?: StyleProps.PropsNFreeCSS;
+        cellClassName?: string;
+        onCellStyles?(props: CellPosition, def: StyleProps.PropsNFreeCSS): StyleProps.PropsNFreeCSS;
+        className?: string;
+        onNoRecordsRender?: ReactElement;
+        onRowClick?(rowId: RowID, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+        onCellClick?(opt: CellPosition, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+        onSorted?(sort: [number, SortType]): void;
+        onSelected?(selected: RowID[]): void;
+    } & StyleProps.States;
+    type Config = {
+        datagridID: string;
+        colLength: number;
+        head: Row.Head;
+        body: Row.Body[];
+        checker: boolean[];
+        filter: boolean[] & Config.FilterMeta;
+        sort: SortType[] & Config.Sort.Meta;
+        dragger: number;
+        paging: {
+            rows: number;
+            total: number;
+            current: number;
+        };
+    };
+    namespace Config {
+        namespace Sort {
+            type Meta = {
+                col: number;
+                dir: SortType;
+            };
+        }
+        type FilterMeta = {
+            keyword: string;
+            current: (string[])[];
+        };
+    }
+    type Props = {
+        input: Input;
+        val_config: Config;
+        set_config: React.Dispatch<React.SetStateAction<Config>>;
+    };
+    type PartsDeligation = {
+        val_config: Config;
+        set_config: React.Dispatch<React.SetStateAction<Config>>;
+    };
+    namespace Methods {
+        type Component = React.FC<DataGrid.Input>;
+        type FNs = {
+            genBodyRow(cells: Cell.Body[], meta?: RowMeta): Row.Body;
+            getData(datagridID: string): Row.Body[];
+            Table: React.FC<Table>;
+            Head: React.FC<TableHead>;
+            Body: React.FC<TableBody>;
+            Row: React.FC<TR>;
+            TH: React.FC<TableCell>;
+            TD: React.FC<TableCell>;
+            RightIndicator: Cell;
+            SearchInput: React.FC<{
+                datagridID: string;
+                onChange(keyword: string): void;
+            }>;
+            Info: React.FC<{
+                datagridID: string;
+            }>;
+            Paging: React.FC<{
+                datagridID: string;
+            }>;
+            RowLength: React.FC<{
+                datagridID: string;
+                lengthSelect: number[];
+            }>;
+        };
+    }
+    type Methods = Methods.Component & Methods.FNs;
+}
+export declare const DefaultCellStyles: (tone: DataGrid.Tones) => StyleProps.States;
+export declare const onDefaultCellStyles: (args: DataGrid.CellPosition, prev: StyleProps.States) => StyleProps.Properties;
+declare const DataGrid: DataGrid.Methods;
+export { DataGrid, DataGrid as default };

package/dist/fn/DataGrid/index.js

@@ -0,0 +1 @@
+import{b as a,c}from"../../chunk-C5N2D3ZX.js";import{jsx as r,jsxs as R}from"react/jsx-runtime";import m,{useStore as M,UUID as I}from"jmini";import{useState as L,useEffect as P}from"react";import{useRefresh as y}from"../../@utils";import{Box as S,Flex as v,FAI as C,Span as B}from"../../atoms";import{Literal as H,Row as x}from"../../mols";import{Button as w}from"../Button";import u from"../Input";import{TableClasses as F}from"../../@styles/componentClasses";const E=e=>{if(e=="plain")return{};let o={};return m.isOneOf(e,"border","border.horizontal")&&(o.borderBottom="2.normal"),m.isOneOf(e,"border","border.vertical")&&(o.borderRight="2.normal"),a({padding:"1/2",backgroundColor:"layer.1",transition:"short",textAlign:"center"},o)},ee=(e,o)=>{let t=a({},o);return e.isRightCell&&(t.borderRight="unset"),e.isTopCell&&(e.isLeftCell&&(t.borderTopLeftRadius="inherit"),e.isRightCell&&(t.borderTopRightRadius="inherit")),e.isBottomCell&&(t.borderBottom="unset",e.isLeftCell&&(t.borderBottomLeftRadius="inherit"),e.isRightCell&&(t.borderBottomRightRadius="inherit")),t},T={index:e=>r(f.Table,{className:F("Table"),children:R(f.Body,{children:[r(T.Header,a({},e)),r(T.Body,a({},e))]})}),Header:e=>{let{val_config:o}=e;return r(f.Row,{children:o.head.map(t=>r(f.TH,{children:t.label||t.data},t.sortKey||t.data))})},Body:e=>r(f.Row,{})},G=e=>{console.log(e),e=c(a({datagridID:I(),tone:"border",header:[],colLength:0,borderRadius:"1.tone.primary",backgroundColor:"layer.1"},e),{cellStyles:a(a({},E(e.tone||"border")),e.cellStyles)});let o=e.header||[],[t,g]=L(m.scope(()=>{var i,p,d,b,D;let n={datagridID:e.datagridID||I(),colLength:(p=(i=e.colLength)!=null?i:o.length)!=null?p:0,head:o,body:e.body||[],checker:o.map(l=>!!(l!=null&&l.checkable)),filter:Object.assign(o.map(l=>!!(l!=null&&l.filterable)),{keyword:e.defaultSearchKey||"",current:[]}),sort:Object.assign(o.map(l=>{var h;return(h=l.sortable)!=null?h:1}),{col:0,dir:1}),dragger:-1,paging:{rows:100,total:1,current:1}};{let l=(d=o==null?void 0:o.filter(h=>h.defSort))==null?void 0:d[0];l&&(n.sort.col=(b=o.indexOf(l))!=null?b:-1,n.sort.dir=(D=l==null?void 0:l.sortable)!=null?D:1)}return o.forEach((l,h)=>{l!=null&&l.draggable&&(n.dragger=h)}),n}));P(()=>{},[]);let s={input:e,val_config:t,set_config:g};return r(T.index,a({},s))},k={genBodyRow:(e,o)=>Object.assign(e,o),getData:e=>{var o,t;return((t=(o=M.get(e))==null?void 0:o.getRowData)==null?void 0:t.call(o))||[]},Table:e=>r(S,c(a({htmlTag:"table"},e),{border:e.border})),Head:e=>r(S,a({htmlTag:"thead"},e)),Body:e=>r(S,a({htmlTag:"tbody"},e)),Row:e=>r(S,a({htmlTag:"tr"},e)),TH:e=>r(S,a({htmlTag:"th"},e)),TD:e=>r(S,a({htmlTag:"td"},e)),RightIndicator:{type:"td",unitWidth:3,data:"",label:r(C.AngleRight,{fontColor:"theme",fontSize:"4.thirdTitle"})},SearchInput:e=>{let o=y.catch(e.datagridID);if(!o)return null;let{val_config:t,set_config:g}=o;return r(u.TextField,{label:"\u691C\u7D22...",clearButton:!0,padding:"2/3",paddingRight:3,rightIcon:r(u.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:r(C.Search,{})}),value:t.filter.keyword,onUpdateValidValue:s=>{e.onChange(s),m.interval.once(()=>{g(n=>c(a({},n),{paging:c(a({},n.paging),{current:1}),filter:c(a({},n.filter),{keyword:s,current:Array.from({length:n.colLength},()=>[])})}))},200,"InputSearchTime")}})},Info:e=>{let o=y.catch(e.datagridID);if(!o)return null;let{val_config:t}=o,g=t.body.filter(n=>n.isFilterMatched).length,s=g.ratio(t.paging.total)||0;return R(v,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[r(B,{fontSize:"4.thirdTitle",fontColor:"theme",children:g.toLocaleString()}),"/ ",t.paging.total.toLocaleString(),"\u4EF6 (",s,"%)"]})},Paging:e=>{let o=y.catch(e.datagridID);if(!o)return null;let{val_config:t,set_config:g}=o,s=[];for(let i=0;i<t.paging.total;i++)s.push({value:i+1,label:(i+1).toString()});const n=i=>{let p=Math.min(Math.max(1,i),t.paging.total),d=a({},t);d.paging.current=p,g(b=>c(a({},b),{paging:c(a({},b.paging),{current:p})}))};return r(u.Select,{emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0,leftIcon:r(u.LeftIcon,{freeCSS:{left:2,pointerEvents:"all"},children:r(w.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(t.paging.current==1){n(t.paging.total);return}n(t.paging.current-1)},children:r(C.ChevronLeft,{})})}),rightIcon:r(u.RightIcon,{freeCSS:{right:2,pointerEvents:"all"},children:r(w.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(t.paging.current==t.paging.total){n(1);return}n(t.paging.current+1)},children:r(C.ChevronRight,{})})}),options:s.map(i=>({value:i.value,label:R(x.Left,{gap:"1/3",verticalAlign:"baseline",children:[i.label,R(H,{fontColor:"4.thin",fontSize:"0.xs",children:["/ ",t.paging.total]})]})})),value:t.paging.current,onUpdateValidValue:i=>{n(i)}})},RowLength:e=>{let o=y.catch(e.datagridID);if(!o)return null;let{val_config:t,set_config:g}=o,s=t.body.filter(d=>d.isFilterMatched).length,n=t.paging.rows,i=0,p=e.lengthSelect.map(d=>(i|=+(d==n),{value:d,label:d.toString()}));return i||p.push({value:n,label:n.toString()}),r(x.Center,{gap:"1/2",children:r(u.Select,{emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{freeCSS:{minWidth:12*9}},pickerPosition:4,value:t.paging.rows,leftIcon:r(u.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",freeCSS:{left:6},children:"\u8868\u793A"}),rightIcon:r(u.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",freeCSS:{right:6},children:"\u4EF6"}),options:p.toASC("value"),onUpdateValidValue:d=>{g(b=>c(a({},b),{paging:{rows:Number(d),current:1,total:Math.ceil(s/Number(d))}}))}})})}},f=Object.assign(G,k);export{f as DataGrid,E as DefaultCellStyles,f as default,ee as onDefaultCellStyles};

package/dist/fn/Input/Autocomplete.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StyleTags, ReactElement } from '../../@declares';
+import { StyleProps, ReactElement } from '../../@declares';
 import { Records } from 'jmini';
 import { InputTypes } from '.';
 declare namespace Autocomplete {
@@ -24,7 +24,7 @@ declare namespace Autocomplete {
         onDynamicSearchOptionsDelay?: number;
         onSelectorRender?(p: onSelectorRenderProps<T>): React.JSX.Element;
         onSelectedRender?(p: onSelectedRenderProps<T>): React.JSX.Element;
-        pickerStyles?: StyleTags.PropsNFreeCSS;
+        pickerStyles?: StyleProps.PropsNFreeCSS;
         pickerPosition?: 1 | 2 | 3 | 4;
     };
     type Value<T = any> = T extends infer V ? V : string | number | boolean | Records | void | null;

package/dist/fn/Input/Autocomplete.js

@@ -1 +1 @@
-import{b as l,c as f,d as G,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as N,jsx as u,jsxs as T}from"react/jsx-runtime";import{useState as A,useEffect as F,useRef as ne}from"react";import a,{UUID as v}from"jmini";import{Config as oe}from"../../@utils";import{Box as X,Span as ie,FAI as B,Column as q}from"../../atoms";import{Literal as K,Row as M}from"../../mols";import{Button as $}from"../Button";import{Loader as le}from"../Loader";import{Sheet as ae}from"../Sheet";import{OptionalInputWrapper as re,BoxWrapper as se,CoreEffects as z,DefaultBoxishStyles as ue}from"./core";import{InputAutocompleteClasses as L}from"../../@styles/componentClasses";import{InputLabel as ce}from"./Label";import{RightIcon as Q}from".";function pe(t){let{value:e,states:i}=t,{required:s,options:d,min:m,max:o}=i;m=m||0,o=o||65535;let n=[],p=e.filter(h=>h!==null).length;return s&&(p||n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),p<m&&n.push({type:"invalid",label:m+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),p>o&&n.push({type:"invalid",label:o+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!n.filter(({type:h})=>h=="invalid").length,notice:n}}const R={InitOptions:t=>{let e=[];return t.forEach(i=>{if(!i)return;let{type:s,label:d,value:m,searchValue:o}=i,n=o||a.isString(d)&&d||""||a.isString(m)&&m||a.Stringify(m||"")||"";a.isNullish(d)&&(d=String(m)),e.push(f(l({id:v(8)},i),{searchValue:n,type:s||"selector",label:d,value:m}))}),e},FilterSelectableOptions:(t,e,i)=>{let s=t;return i||(s=t.filter(d=>(d==null?void 0:d.type)!="label")),a.scope(()=>{if(!e)return;let d=e.toLower().replace(/ /g,"");s=s.filter(m=>(m.searchValue||"").toLower().replace(/ /g,"").includes(d))}),s},Button:t=>{let{rootStates:e,val_keyword:i,set_keyword:s,val_optionFocused:d,set_optionFocused:m,val_status:o,set_status:n}=t,J=e,{tone:p,required:h,form:O,className:r,multiSelect:c,enableFormSubmit:y,checkValidationAtFirst:S,onValidate:g,onValidateDelay:I,onUpdateValue:C,onUpdateValidValue:x,onUserAction:P,value:E="",options:_,leftIndicator:D,rightIndicator:k,leftIcon:de,rightIcon:fe,componentId:me,status_id:Se,wrapStyles:ve,emptySelect:ye,searchInputPlaceholder:he,onSelectedRender:ge,onSelectorRender:Ie,pickerStyles:be,pickerPosition:Oe,onDynamicSearchOptions:ke,onDynamicSearchOptionsDelay:_e}=J,V=G(J,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","searchInputPlaceholder","onSelectedRender","onSelectorRender","pickerStyles","pickerPosition","onDynamicSearchOptions","onDynamicSearchOptionsDelay"]),W="SearchInput_"+e.componentId;return F(()=>{var b;if(e.disabled||!o.isPickerOpen||a.isExist(d))return;let w=R.FilterSelectableOptions(t.val_options,i,!1);m(((b=w[0])==null?void 0:b.id)||"")},[i]),F(()=>{if(o.eventType!="init"&&o.eventType!="override"&&e.max==o.rawValue.length){s(""),n(w=>f(l({},w),{eventID:v(8),isPickerOpen:!1}));return}},[o.rawValue]),F(()=>{let w="autocomplete-click-"+e.componentId;if(!o.isPickerOpen){a(document).removeEvent([w]);return}a('[data-input-origin="'+e.componentId+'"]')&&a(document).addEvent({eventID:w,eventType:"mousedown",callback:U=>{let j=a(U.target),Z=!!a(j).parent("."+L("Core")).length,ee=!!a(j).parent("."+L("Selector")).length;Z||ee||n(te=>f(l({},te),{eventID:v(8),isFocusing:!1,isPickerOpen:!1}))},options:{passive:!1}})},[o.isPickerOpen]),T(N,{children:[u(X,f(l({tabIndex:-1},V),{"data-disabled":e.disabled,"data-show-validation":z.isShowValidation(o,!!S),"data-component-id":o.componentId,"data-input-origin":o.componentId,"data-focus":o.isFocusing||o.isPickerOpen,className:[r,L("Core")].join(" "),onClick:w=>{if(V!=null&&V.onClick&&(V==null||V.onClick(w)),e.disabled)return;let b=document.activeElement;(b==null?void 0:b.id)!=W&&(oe.get().isTouchDevice||a("#"+W).focus()),n(U=>f(l({},U),{eventID:v(8),isPickerOpen:!0,isFocusing:!0}))},onKeyDown:w=>{let b=document.activeElement;(b==null?void 0:b.id)!=W&&(w.preventDefault(),a("#"+W).focus())},children:T(M.Left,{gap:0,children:[u(ie,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),T(M.Left,{flexWrap:!0,flexSizing:0,gap:"1/2",verticalAlign:"unset",freeCSS:{letterSpacing:".5px"},children:[u(R.Selected,l({},t)),u(R.SearchInput,l({},t))]}),o.rawValue.length>1&&u($.Clear,{tabIndex:-1,color:"nega",fontColor:"4.thin",ssSphere:2,onClick:w=>{n(b=>f(l({},b),{eventType:"update",eventID:v(8),rawValue:[]}))},children:u(B.X,{})})]})})),u(R.Picker,l({},t))]})},SearchInput:t=>{let{rootStates:e,val_status:i,set_status:s}=t;if(e.disabled)return null;let d=!!i.isFocusing||!!i.isPickerOpen||!!i.rawValue.length;i.isFocusing||e.multiSelect||i.rawValue.length&&(d=!1);let m=e.searchInputPlaceholder||"\u691C\u7D22...";return u(X,{htmlTag:"input",id:"SearchInput_"+e.componentId,"data-input-value-shallow":i.componentId,placeholder:m,opacity:d?"max":"trans",transition:"middle",flexSizing:0,fontSize:"inherit",border:"0.trans",backgroundColor:"trans",isRounded:!0,padding:[0,"2/3"],value:t.val_keyword,className:[L("SearchInput"),d&&L("isActive")].join(" "),freeCSS:{outline:"none",minWidth:12*4},onFocus:o=>{s(n=>f(l({},n),{eventID:v(8),isFocusing:!0,isPickerOpen:!0}))},onBlur:o=>H(void 0,null,function*(){s(n=>f(l({},n),{eventID:v(8),isFocusing:!1}))}),onCompositionStart:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!0}))},onCompositionEnd:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!1}))},onKeyDown:o=>{let{key:n,metaKey:p,ctrlKey:h}=o,O=p||h;n=="Escape"?s(r=>f(l({},r),{eventID:v(12),isPickerOpen:!1})):n=="Tab"?s(r=>f(l({},r),{eventID:v(8),isFocusing:!1,isPickerOpen:!1})):n==" "?a.scope(()=>{i.isPickerOpen||t.val_keyword||(o.preventDefault(),s(r=>f(l({},r),{eventID:v(8),isPickerOpen:!0})))}):n=="Backspace"?a.scope(()=>{if(t.val_keyword)return;let r=[...t.val_status.rawValue];r.pop(),O&&(r=[]),s(c=>f(l({},c),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1}))}):n=="Enter"&&a.scope(()=>{if(i.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!i.isPickerOpen){s(y=>f(l({},y),{eventID:v(8),isPickerOpen:!0}));return}if(!t.val_optionFocused)return;let r=t.val_options.find(y=>(y==null?void 0:y.id)==t.val_optionFocused);if(!r)return;let{value:c}=r;s(y=>{let S=[...y.rawValue];return a.scope(()=>{if(c===null)return S=[];y.rawValue.includes(c)?S=S.filter(I=>I!==c):e.multiSelect?S.push(c):S=[c]}),f(l({},y),{rawValue:S,eventType:"update",eventID:v(8),isInspected:!1})}),t.set_optionsModified(!0),t.set_keyword("")}),a.scope(()=>{if(!a.isOneOf(n,"ArrowDown","ArrowUp"))return;if(o.preventDefault(),!i.isPickerOpen){s(g=>f(l({},g),{eventID:v(8),isPickerOpen:!0}));return}let r=n=="ArrowDown"?1:-1,c=R.FilterSelectableOptions(t.val_options,t.val_keyword),y=c.length-1,S=null;a.scope(()=>{var I,C,x,P,E,_,D;let g=c.findIndex(k=>(k==null?void 0:k.id)==t.val_optionFocused);if(g==-1){S=(I=c[0])==null?void 0:I.id;return}if(r==1){if(S=(C=c[0])==null?void 0:C.id,O){S=(x=c[y])==null?void 0:x.id;return}if(g==-1||g==y)return;S=(P=c[g+1])==null?void 0:P.id}else{if(S=(E=c[y])==null?void 0:E.id,O){S=(_=c[0])==null?void 0:_.id;return}if(g==-1||g==0)return;S=(D=c[g-1])==null?void 0:D.id}}),t.set_optionFocused(S)}),e.enableFormSubmit&&z.SubmitForm(o,t.rootStates.form)},onChange:o=>{let p=o.target.value;t.set_keyword(p),t.set_optionFocused(""),p&&s(h=>f(l({},h),{eventID:v(8),isPickerOpen:!0}))}},"searchInput")},Picker:t=>{var n;let{rootStates:e,val_status:i}=t,[s,d]=A("idle");F(()=>{if(!e.onDynamicSearchOptions||!i.isPickerOpen)return;if(t.val_optionsModified)return t.set_optionsModified(!1);if(i.isComposing)return;d("fetch");let p="autocomplete-search-"+e.componentId;t.set_optionFocused(""),a.interval.once(()=>H(void 0,null,function*(){var r;let h=yield e.onDynamicSearchOptions(t.val_keyword);d("idle");let O=R.InitOptions(h||[]);t.set_options(O),t.set_optionFocused(((r=O[0])==null?void 0:r.id)||"")}),e.onDynamicSearchOptionsDelay||500,p)},[t.val_keyword,i.isComposing]),F(()=>{let p=a(`[data-selector-id="${i.componentId}"]`)[0];if(!p)return;let h=a(`[data-autocomplete-input-value="${t.val_optionFocused}"]`)[0];h&&(p.scrollTop=h.offsetTop-24)},[t.val_optionFocused]);let m=R.FilterSelectableOptions(t.val_options,e.onDynamicSearchOptions?"":t.val_keyword,!0),o={};{let p=e.pickerPosition||0;a.isOneOf(p,1,2)?o.bottom="100%":a.isOneOf(p,3,4)&&(o.top="100%"),a.isOneOf(p,1,3)?o.left=0:a.isOneOf(p,2,4)&&(o.right=0)}return i.isPickerOpen?u(X,f(l({position:"absolute",padding:"1/3"},o),{freeCSS:l({minWidth:"75%",zIndex:1e3},o.freeCSS),children:u(ae.Body,f(l({className:L("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,tabIndex:-1,boxShadow:"1.normal",overflow:"auto","data-selector-id":i.componentId},e.pickerStyles),{freeCSS:l({maxHeight:12*24},(n=e.pickerStyles)==null?void 0:n.freeCSS),children:T(q,{gap:"1/12",padding:[1,0],children:[s=="fetch"&&u(M.Center,{padding:"1/2",children:u(le.Theme.R,{showInitial:!0})}),s!="fetch"&&T(N,{children:[!m.length&&u(K.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),m.map((p,h)=>{if(!p)return null;let{type:O,value:r}=p,c=t.val_optionFocused==p.id,y=i.rawValue.includes(r),S=e.onSelectorRender;return u(q,{"data-autocomplete-input-value":p.id,children:u(S,{option:p,isFocused:c,isSelected:y,onAdd:()=>{t.set_status(g=>{let I=[...g.rawValue];return a.scope(()=>{if(r===null)return I=[];if(g.rawValue.includes(r)){I=I.filter(x=>x!==r);return}e.multiSelect?I.push(r):I=[r]}),f(l({},g),{rawValue:I,eventType:"update",eventID:v(8),isFocusing:e.max!=I.length,isInspected:!1})})},onKeyDown:g=>{let{key:I}=g;I=="Tab"&&(t.set_optionFocused(""),t.set_status(C=>f(l({},C),{eventID:v(8),isPickerOpen:!1,isFocusing:!1})))}})},p.id)})]})]})}))})):null},Selected:t=>{let{rootStates:e,val_status:i,set_status:s,val_optionsDict:d}=t,m=[];return i.rawValue.forEach(o=>{let n=d[a.Stringify(o)];if(!n)return;let p=e.onSelectedRender,h=(n==null?void 0:n.selectedLabel)||(n==null?void 0:n.label);(n==null?void 0:n.value)===null&&(h=""),m.push(u(q,{position:"relative",flexCenter:!0,freeCSS:{userSelect:"none"},children:u(p,{value:n==null?void 0:n.value,label:h,onRemove:O=>{if(e.disabled)return;let r=[...i.rawValue];r=r.filter(c=>c!==o),s(c=>f(l({},c),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1,isFocusing:e.max!=r.length,isPickerOpen:!0}))}})},a.Stringify(n==null?void 0:n.value)||v(8)))}),u(N,{children:m})},Core:t=>{var x,P,E;let{value:e}=t,[i,s]=A(!1),[d,m]=A(""),[o,n]=A(t.options),[p,h]=A(((x=t.options.find(_=>{var D;return(_==null?void 0:_.value)===((D=t.value)==null?void 0:D[0])}))==null?void 0:x.id)||((P=t.options[0])==null?void 0:P.id)||""),[O,r]=A({}),[c,y]=A(z.DefaultStatus(t.componentId,e)),S=ne(!1);F(()=>{i||(S.current?n(t.options):S.current=!0)},[a.Stringify((E=t.options)==null?void 0:E.map(_=>_.value))]),F(()=>{if(!o.length)return;let _=[...o],D=l({},O);_.forEach(k=>{(k==null?void 0:k.type)!="label"&&(D[a.Stringify(k==null?void 0:k.value)]=k)}),r(D)},[o]);let g={rootStates:t,val_options:o,set_options:n,val_optionFocused:p,set_optionFocused:h,val_optionsDict:O,set_optionsDict:r,val_optionsModified:i,set_optionsModified:s,val_keyword:d,set_keyword:m,val_status:c,set_status:y},I=!!t.multiSelect;z.CommonEffects({type:I?"autocomplete.multi":"autocomplete.single",states:t,val_status:c,set_status:y,SystemValidation:pe});let C=c.rawValue.length&&c.rawValue[0]!==null||c.isPickerOpen||c.isFocusing;return T(se,{val_status:c,set_status:y,states:t,children:[u(ce,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:C}),u(R.Button,l({},g))]})}},Y=t=>{let e=l({},t);return e=f(l({value:[],min:0,max:65535,multiSelect:!0,emptySelect:!0,onSelectorRender:i=>{var s;return i.option?((s=i.option)==null?void 0:s.type)=="label"?u(N,{children:i.option.label}):u($.Sub.S,{color:"cloud",tabIndex:-1,backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["2/3",1.5],isActive:i.isFocused,isActiveStyles:{backgroundColor:"cloud"},onClick:i.onAdd,onKeyDown:i.onKeyDown,children:T(M.Left,{gap:"1/2",children:[i.isSelected&&u(B.Check,{fontColor:"theme"}),u(K.Supplement,{transition:"short",children:i.option.label})]})}):null},onSelectedRender:i=>T(M.Left,{ssCardBox:!0,borderRadius:"1.tone.primary",fontSize:"1.mini",padding:"1/3",gap:0,children:[u(K,{padding:[0,"1/2"],children:i.label}),u($.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,ssSphere:2,onClick:i.onRemove,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:u(B.X,{})})]}),pickerPosition:3},e),{freeCSS:l({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=0,e.max=1),e.options=e.options||[],e.emptySelect&&(e.options=[{value:null,label:u(K.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=a.Arrayify(e.value),e.options=R.InitOptions(e.options),a.isNullish(e.rightIcon)&&(e.rightIcon=u(Q,{children:u(B.Search,{})}),e.disabled&&(e.rightIcon=u(Q,{fontColor:"5.translucent",children:u(B.Ban,{})}))),e.rightIcon&&(e=l({paddingRight:3},e)),e.leftIcon&&(e=l({paddingLeft:3},e)),u(re,{componentId:e.componentId,children:R.Core,states:ue(e)})};export{Y as Autocomplete,Y as default};
+import{b as l,c as f,d as G,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as N,jsx as u,jsxs as V}from"react/jsx-runtime";import{useState as A,useEffect as F,useRef as ne}from"react";import a,{UUID as v}from"jmini";import{Config as oe}from"../../@utils";import{Box as X,Span as ie,FAI as B,Column as q}from"../../atoms";import{Literal as K,Row as M}from"../../mols";import{Button as $}from"../Button";import{Loader as le}from"../Loader";import{Sheet as ae}from"../Sheet";import{OptionalInputWrapper as re,BoxWrapper as se,CoreEffects as z,DefaultBoxishStyles as ue}from"./core";import{InputAutocompleteClasses as L}from"../../@styles/componentClasses";import{InputLabel as ce}from"./Label";import{RightIcon as Q}from".";function pe(t){let{value:e,states:i}=t,{required:s,options:d,min:m,max:o}=i;m=m||0,o=o||65535;let n=[],p=e.filter(h=>h!==null).length;return s&&(p||n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),p<m&&n.push({type:"invalid",label:m+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),p>o&&n.push({type:"invalid",label:o+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!n.filter(({type:h})=>h=="invalid").length,notice:n}}const R={InitOptions:t=>{let e=[];return t.forEach(i=>{if(!i)return;let{type:s,label:d,value:m,searchValue:o}=i,n=o||a.isString(d)&&d||""||a.isString(m)&&m||a.Stringify(m||"")||"";a.isNullish(d)&&(d=String(m)),e.push(f(l({id:v(8)},i),{searchValue:n,type:s||"selector",label:d,value:m}))}),e},FilterSelectableOptions:(t,e,i)=>{let s=t;return i||(s=t.filter(d=>(d==null?void 0:d.type)!="label")),a.scope(()=>{if(!e)return;let d=e.toLower().replace(/ /g,"");s=s.filter(m=>(m.searchValue||"").toLower().replace(/ /g,"").includes(d))}),s},Button:t=>{let{rootStates:e,val_keyword:i,set_keyword:s,val_optionFocused:d,set_optionFocused:m,val_status:o,set_status:n}=t,J=e,{tone:p,required:h,form:O,className:r,multiSelect:c,enableFormSubmit:y,checkValidationAtFirst:S,onValidate:g,onValidateDelay:I,onUpdateValue:C,onUpdateValidValue:x,onUserAction:P,value:E="",options:_,leftIndicator:D,rightIndicator:k,leftIcon:de,rightIcon:fe,componentId:me,status_id:Se,wrapStyles:ve,emptySelect:ye,searchInputPlaceholder:he,onSelectedRender:ge,onSelectorRender:Ie,pickerStyles:be,pickerPosition:Oe,onDynamicSearchOptions:ke,onDynamicSearchOptionsDelay:_e}=J,T=G(J,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","searchInputPlaceholder","onSelectedRender","onSelectorRender","pickerStyles","pickerPosition","onDynamicSearchOptions","onDynamicSearchOptionsDelay"]),W="SearchInput_"+e.componentId;return F(()=>{var b;if(e.disabled||!o.isPickerOpen||a.isExist(d))return;let w=R.FilterSelectableOptions(t.val_options,i,!1);m(((b=w[0])==null?void 0:b.id)||"")},[i]),F(()=>{if(o.eventType!="init"&&o.eventType!="override"&&e.max==o.rawValue.length){s(""),n(w=>f(l({},w),{eventID:v(8),isPickerOpen:!1}));return}},[o.rawValue]),F(()=>{let w="autocomplete-click-"+e.componentId;if(!o.isPickerOpen){a(document).removeEvent([w]);return}a('[data-input-origin="'+e.componentId+'"]')&&a(document).addEvent({eventID:w,eventType:"mousedown",callback:U=>{let j=a(U.target),Z=!!a(j).parent("."+L("Core")).length,ee=!!a(j).parent("."+L("Selector")).length;Z||ee||n(te=>f(l({},te),{eventID:v(8),isFocusing:!1,isPickerOpen:!1}))},options:{passive:!1}})},[o.isPickerOpen]),V(N,{children:[u(X,f(l({tabIndex:-1},T),{"data-disabled":e.disabled,"data-show-validation":z.isShowValidation(o,!!S),"data-component-id":o.componentId,"data-input-origin":o.componentId,"data-focus":o.isFocusing||o.isPickerOpen,className:[r,L("Core")].join(" "),onClick:w=>{if(T!=null&&T.onClick&&(T==null||T.onClick(w)),e.disabled)return;let b=document.activeElement;(b==null?void 0:b.id)!=W&&(oe.get().isTouchDevice||a("#"+W).focus()),n(U=>f(l({},U),{eventID:v(8),isPickerOpen:!0,isFocusing:!0}))},onKeyDown:w=>{let b=document.activeElement;(b==null?void 0:b.id)!=W&&(w.preventDefault(),a("#"+W).focus())},children:V(M.Left,{gap:0,children:[u(ie,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),V(M.Left,{flexWrap:!0,flexSizing:0,gap:"1/2",verticalAlign:"unset",freeCSS:{letterSpacing:".5px"},children:[u(R.Selected,l({},t)),u(R.SearchInput,l({},t))]}),o.rawValue.length>1&&u($.Clear,{tabIndex:-1,color:"nega",fontColor:"4.thin",ssSphere:2,onClick:w=>{n(b=>f(l({},b),{eventType:"update",eventID:v(8),rawValue:[]}))},children:u(B.X,{})})]})})),u(R.Picker,l({},t))]})},SearchInput:t=>{let{rootStates:e,val_status:i,set_status:s}=t;if(e.disabled)return null;let d=!!i.isFocusing||!!i.isPickerOpen||!!i.rawValue.length;i.isFocusing||e.multiSelect||i.rawValue.length&&(d=!1);let m=e.searchInputPlaceholder||"\u691C\u7D22...";return u(X,{htmlTag:"input",id:"SearchInput_"+e.componentId,"data-input-value-shallow":i.componentId,placeholder:m,opacity:d?"max":"trans",transition:"middle",flexSizing:0,fontSize:"inherit",border:"0.trans",backgroundColor:"trans",isRounded:!0,padding:[0,"2/3"],value:t.val_keyword,className:[L("SearchInput"),d&&L("isActive")].join(" "),freeCSS:{outline:"none",minWidth:12*4},onFocus:o=>{s(n=>f(l({},n),{eventID:v(8),isFocusing:!0,isPickerOpen:!0}))},onBlur:o=>H(void 0,null,function*(){s(n=>f(l({},n),{eventID:v(8),isFocusing:!1}))}),onCompositionStart:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!0}))},onCompositionEnd:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!1}))},onKeyDown:o=>{let{key:n,metaKey:p,ctrlKey:h}=o,O=p||h;n=="Escape"?s(r=>f(l({},r),{eventID:v(12),isPickerOpen:!1})):n=="Tab"?s(r=>f(l({},r),{eventID:v(8),isFocusing:!1,isPickerOpen:!1})):n==" "?a.scope(()=>{i.isPickerOpen||t.val_keyword||(o.preventDefault(),s(r=>f(l({},r),{eventID:v(8),isPickerOpen:!0})))}):n=="Backspace"?a.scope(()=>{if(t.val_keyword)return;let r=[...t.val_status.rawValue];r.pop(),O&&(r=[]),s(c=>f(l({},c),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1}))}):n=="Enter"&&a.scope(()=>{if(i.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!i.isPickerOpen){s(y=>f(l({},y),{eventID:v(8),isPickerOpen:!0}));return}if(!t.val_optionFocused)return;let r=t.val_options.find(y=>(y==null?void 0:y.id)==t.val_optionFocused);if(!r)return;let{value:c}=r;s(y=>{let S=[...y.rawValue];return a.scope(()=>{if(c===null)return S=[];y.rawValue.includes(c)?S=S.filter(I=>I!==c):e.multiSelect?S.push(c):S=[c]}),f(l({},y),{rawValue:S,eventType:"update",eventID:v(8),isInspected:!1})}),t.set_optionsModified(!0),t.set_keyword("")}),a.scope(()=>{if(!a.isOneOf(n,"ArrowDown","ArrowUp"))return;if(o.preventDefault(),!i.isPickerOpen){s(g=>f(l({},g),{eventID:v(8),isPickerOpen:!0}));return}let r=n=="ArrowDown"?1:-1,c=R.FilterSelectableOptions(t.val_options,t.val_keyword),y=c.length-1,S=null;a.scope(()=>{var I,C,x,P,E,_,D;let g=c.findIndex(k=>(k==null?void 0:k.id)==t.val_optionFocused);if(g==-1){S=(I=c[0])==null?void 0:I.id;return}if(r==1){if(S=(C=c[0])==null?void 0:C.id,O){S=(x=c[y])==null?void 0:x.id;return}if(g==-1||g==y)return;S=(P=c[g+1])==null?void 0:P.id}else{if(S=(E=c[y])==null?void 0:E.id,O){S=(_=c[0])==null?void 0:_.id;return}if(g==-1||g==0)return;S=(D=c[g-1])==null?void 0:D.id}}),t.set_optionFocused(S)}),e.enableFormSubmit&&z.SubmitForm(o,t.rootStates.form)},onChange:o=>{let p=o.target.value;t.set_keyword(p),t.set_optionFocused(""),p&&s(h=>f(l({},h),{eventID:v(8),isPickerOpen:!0}))}},"searchInput")},Picker:t=>{var n;let{rootStates:e,val_status:i}=t,[s,d]=A("idle");F(()=>{if(!e.onDynamicSearchOptions||!i.isPickerOpen)return;if(t.val_optionsModified)return t.set_optionsModified(!1);if(i.isComposing)return;d("fetch");let p="autocomplete-search-"+e.componentId;t.set_optionFocused(""),a.interval.once(()=>H(void 0,null,function*(){var r;let h=yield e.onDynamicSearchOptions(t.val_keyword);d("idle");let O=R.InitOptions(h||[]);t.set_options(O),t.set_optionFocused(((r=O[0])==null?void 0:r.id)||"")}),e.onDynamicSearchOptionsDelay||500,p)},[t.val_keyword,i.isComposing]),F(()=>{let p=a(`[data-selector-id="${i.componentId}"]`)[0];if(!p)return;let h=a(`[data-autocomplete-input-value="${t.val_optionFocused}"]`)[0];h&&(p.scrollTop=h.offsetTop-24)},[t.val_optionFocused]);let m=R.FilterSelectableOptions(t.val_options,e.onDynamicSearchOptions?"":t.val_keyword,!0),o={};{let p=e.pickerPosition||0;a.isOneOf(p,1,2)?o.bottom="100%":a.isOneOf(p,3,4)&&(o.top="100%"),a.isOneOf(p,1,3)?o.left=0:a.isOneOf(p,2,4)&&(o.right=0)}return i.isPickerOpen?u(X,f(l({position:"absolute",padding:"1/3"},o),{freeCSS:l({minWidth:"75%",zIndex:1e3},o.freeCSS),children:u(ae.Body,f(l({className:L("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,tabIndex:-1,boxShadow:"1.normal",overflow:"auto","data-selector-id":i.componentId},e.pickerStyles),{freeCSS:l({maxHeight:12*24},(n=e.pickerStyles)==null?void 0:n.freeCSS),children:V(q,{gap:"1/12",padding:[1,0],children:[s=="fetch"&&u(M.Center,{padding:"1/2",children:u(le.Theme.R,{showInitial:!0})}),s!="fetch"&&V(N,{children:[!m.length&&u(K.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),m.map((p,h)=>{if(!p)return null;let{type:O,value:r}=p,c=t.val_optionFocused==p.id,y=i.rawValue.includes(r),S=e.onSelectorRender;return u(q,{"data-autocomplete-input-value":p.id,children:u(S,{option:p,isFocused:c,isSelected:y,onAdd:()=>{t.set_status(g=>{let I=[...g.rawValue];return a.scope(()=>{if(r===null)return I=[];if(g.rawValue.includes(r)){I=I.filter(x=>x!==r);return}e.multiSelect?I.push(r):I=[r]}),f(l({},g),{rawValue:I,eventType:"update",eventID:v(8),isFocusing:e.max!=I.length,isInspected:!1})})},onKeyDown:g=>{let{key:I}=g;I=="Tab"&&(t.set_optionFocused(""),t.set_status(C=>f(l({},C),{eventID:v(8),isPickerOpen:!1,isFocusing:!1})))}})},p.id)})]})]})}))})):null},Selected:t=>{let{rootStates:e,val_status:i,set_status:s,val_optionsDict:d}=t,m=[];return i.rawValue.forEach(o=>{let n=d[a.Stringify(o)];if(!n)return;let p=e.onSelectedRender,h=(n==null?void 0:n.selectedLabel)||(n==null?void 0:n.label);(n==null?void 0:n.value)===null&&(h=""),m.push(u(q,{position:"relative",flexCenter:!0,freeCSS:{userSelect:"none"},children:u(p,{value:n==null?void 0:n.value,label:h,onRemove:O=>{if(e.disabled)return;let r=[...i.rawValue];r=r.filter(c=>c!==o),s(c=>f(l({},c),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1,isFocusing:e.max!=r.length,isPickerOpen:!0}))}})},a.Stringify(n==null?void 0:n.value)||v(8)))}),u(N,{children:m})},Core:t=>{var x,P,E;let{value:e}=t,[i,s]=A(!1),[d,m]=A(""),[o,n]=A(t.options),[p,h]=A(((x=t.options.find(_=>{var D;return(_==null?void 0:_.value)===((D=t.value)==null?void 0:D[0])}))==null?void 0:x.id)||((P=t.options[0])==null?void 0:P.id)||""),[O,r]=A({}),[c,y]=A(z.DefaultStatus(t.componentId,e)),S=ne(!1);F(()=>{i||(S.current?n(t.options):S.current=!0)},[a.Stringify((E=t.options)==null?void 0:E.map(_=>_.value))]),F(()=>{if(!o.length)return;let _=[...o],D=l({},O);_.forEach(k=>{(k==null?void 0:k.type)!="label"&&(D[a.Stringify(k==null?void 0:k.value)]=k)}),r(D)},[o]);let g={rootStates:t,val_options:o,set_options:n,val_optionFocused:p,set_optionFocused:h,val_optionsDict:O,set_optionsDict:r,val_optionsModified:i,set_optionsModified:s,val_keyword:d,set_keyword:m,val_status:c,set_status:y},I=!!t.multiSelect;z.CommonEffects({type:I?"autocomplete.multi":"autocomplete.single",states:t,val_status:c,set_status:y,SystemValidation:pe});let C=c.rawValue.length&&c.rawValue[0]!==null||c.isPickerOpen||c.isFocusing;return V(se,{val_status:c,set_status:y,states:t,children:[u(ce,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:C}),u(R.Button,l({},g))]})}},Y=t=>{let e=l({},t);return e=f(l({value:[],min:0,max:65535,multiSelect:!0,emptySelect:!0,onSelectorRender:i=>{var s;return i.option?((s=i.option)==null?void 0:s.type)=="label"?u(N,{children:i.option.label}):u($.Sub.S,{color:"cloud",tabIndex:-1,backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["2/3",1.5],isActive:i.isFocused,isActiveStyles:{backgroundColor:"cloud"},onClick:i.onAdd,onKeyDown:i.onKeyDown,children:V(M.Left,{gap:"1/2",children:[i.isSelected&&u(B.Check,{fontColor:"theme"}),u(K.Supplement,{transition:"short",children:i.option.label})]})}):null},onSelectedRender:i=>V(M.Left,{ssCardBox:!0,borderRadius:"1.tone.primary",fontSize:"1.mini",padding:"1/3",gap:0,children:[u(K,{padding:[0,"1/2"],children:i.label}),u($.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,ssSphere:2,onClick:i.onRemove,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:u(B.X,{})})]}),pickerPosition:3},e),{freeCSS:l({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=0,e.max=1),e.options=e.options||[],e.emptySelect&&(e.options=[{value:null,label:u(K.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=a.Arrayify(e.value),e.options=R.InitOptions(e.options),a.isNullish(e.rightIcon)&&(e.rightIcon=u(Q,{children:u(B.Search,{})}),e.disabled&&(e.rightIcon=u(Q,{fontColor:"5.translucent",children:u(B.Ban,{})}))),e.rightIcon&&(e=l({paddingRight:3},e)),e.leftIcon&&(e=l({paddingLeft:3},e)),u(re,{componentId:e.componentId,children:R.Core,states:ue(e)})};export{Y as Autocomplete,Y as default};

package/dist/fn/Input/DigitCharacters.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StyleTags } from '../../@declares';
+import { StyleProps } from '../../@declares';
 import { InputTypes } from '.';
 declare namespace DigitCharacters {
     type Input = InputTypes.CoreInput & React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
@@ -10,7 +10,7 @@ declare namespace DigitCharacters {
         tabIndex?: number;
         id?: string;
         value?: string | number;
-        listStyles?: StyleTags.PropsNFreeCSS;
+        listStyles?: StyleProps.PropsNFreeCSS;
     };
 }
 declare const DigitCharacters: React.FC<DigitCharacters.Input>;

package/dist/fn/Input/DigitCharacters.js

@@ -1 +1 @@
-import{b as t,c as o,d as F}from"../../chunk-C5N2D3ZX.js";import{jsx as S}from"react/jsx-runtime";import{useState as _}from"react";import V,{UUID as I}from"jmini";import{$$fromRoot as k,GenerateHTMLProps as K}from"../../@utils";import{OptionalInputWrapper as U,BoxWrapper as W,CoreEffects as w,DefaultBoxishStyles as $}from"./core";import{Flex as z}from"../../atoms";import{InputClasses as R}from"../../@styles/componentClasses";function P(e){let{value:n,states:u}=e,{required:f,numericOnly:p=!1,digits:D}=u,s=[];return f&&!n&&s.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),n&&(p&&n.match(/\D/)&&s.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),n.length!=D&&s.push({type:"warn",label:"\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"})),{ok:!s.filter(({type:C})=>C=="invalid"||C=="warn").length,notice:s}}const q=(e,n="")=>{let u=String(n),f=[];for(let p=0;p<e;p++)f[p]=u[p]||"";return{safeValue:f,rawValue:u}},A=(e="")=>{let n=e,u=n.join("");return{safeValue:n,rawValue:u}},j=e=>{let x=e,{tone:n,required:u,form:f,name:p,className:D="",digits:s,numericOnly:h=!1,enableFormSubmit:C,checkValidationAtFirst:G,onChange:J,onKeyDown:Q,onValidate:X,onValidateDelay:Y,onUpdateValue:Z,onUpdateValidValue:ee,onUserAction:te,value:O="",override:ne,freeCSS:ae,wrapStyles:ie,combineInput:re,componentId:se,listStyles:E}=x,a=F(x,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","override","freeCSS","wrapStyles","combineInput","componentId","listStyles"]),[c,d]=_(o(t({componentId:e.componentId||""},q(s,O)),{eventType:"init",eventID:I(12)}));w.CommonEffects({type:"textfield",states:e,val_status:c,set_status:d,SystemValidation:P});let b=[];for(let i=0;i<s;i++){let M=c.safeValue[i],N={},v=D;e.combineInput&&(v=[D,R("DigitCharacterCell"),R("Combined")].join(" ")),b.push(S("input",{type:"text",inputMode:h?"numeric":e.inputMode||"text",value:M,id:"Digit-"+i+"-"+c.componentId,className:v,style:t(t({},e.style),N),onKeyDown:m=>{let{key:l,code:H}=m;if(l=="Tab")return;m.preventDefault();let y=null;if(l=="Backspace"){let r=c.safeValue;r[i]="",d(g=>o(t(t({},g),A(r)),{eventType:"update",eventID:I(12),isInspected:!1})),y=i-1}else if(V.isOneOf(l,"ArrowLeft","ArrowRight")){let r=+(l=="ArrowRight")*2-1;y=i+r}else C&&w.SubmitForm(m,f),(()=>{let r=H.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!r)return;let g=r[2]||r[3]||r[4];if(h&&!g.match(/\d/)||!g)return;let T=c.safeValue;T[i]=g,d(L=>o(t(t({},L),A(T)),{eventType:"update",eventID:I(12),isInspected:!1})),y=i+1})();V.isExist(y)&&k("#Digit-"+y+"-"+c.componentId).focus()},onChange:()=>{},onFocus:m=>{a!=null&&a.onFocus&&(a==null||a.onFocus(m)),d(l=>o(t({},l),{eventID:I(12),isFocusing:!0}))},onBlur:m=>{a!=null&&a.onBlur&&(a==null||a.onBlur(m)),d(l=>o(t({},l),{eventID:I(12),isFocusing:!1}))}},i))}return S(W,{val_status:c,set_status:d,states:e,children:S(z,o(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},E),{children:b}))})},B=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=o(t({textAlign:"center",width:0},e),{freeCSS:t({minWidth:12*2,marginRight:-1},e.freeCSS),listStyles:t({borderRadius:"2.tone.secondary",border:"unset",gap:0},e.listStyles)}));let n=K($(e));return S(U,{componentId:e.componentId,children:j,states:n})};export{B as DigitCharacters,B as default};
+import{b as t,c as o,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as S}from"react/jsx-runtime";import{useState as P}from"react";import V,{UUID as g}from"jmini";import{$$fromRoot as _,GenerateHTMLProps as k}from"../../@utils";import{OptionalInputWrapper as K,BoxWrapper as U,CoreEffects as w,DefaultBoxishStyles as W}from"./core";import{Flex as $}from"../../atoms";import{InputClasses as R}from"../../@styles/componentClasses";function z(e){let{value:n,states:u}=e,{required:f,numericOnly:p=!1,digits:D}=u,s=[];return f&&!n&&s.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),n&&(p&&n.match(/\D/)&&s.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),n.length!=D&&s.push({type:"warn",label:"\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"})),{ok:!s.filter(({type:C})=>C=="invalid"||C=="warn").length,notice:s}}const q=(e,n="")=>{let u=String(n),f=[];for(let p=0;p<e;p++)f[p]=u[p]||"";return{safeValue:f,rawValue:u}},A=(e="")=>{let n=e,u=n.join("");return{safeValue:n,rawValue:u}},j=e=>{let x=e,{tone:n,required:u,form:f,name:p,className:D="",digits:s,numericOnly:h=!1,enableFormSubmit:C,checkValidationAtFirst:G,onChange:J,onKeyDown:Q,onValidate:X,onValidateDelay:Y,onUpdateValue:Z,onUpdateValidValue:ee,onUserAction:te,value:O="",override:ne,freeCSS:ae,wrapStyles:ie,combineInput:re,componentId:se,listStyles:E}=x,a=T(x,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","override","freeCSS","wrapStyles","combineInput","componentId","listStyles"]),[c,d]=P(o(t({componentId:e.componentId||""},q(s,O)),{eventType:"init",eventID:g(12)}));w.CommonEffects({type:"textfield",states:e,val_status:c,set_status:d,SystemValidation:z});let b=[];for(let i=0;i<s;i++){let M=c.safeValue[i],N={},v=D;e.combineInput&&(v=[D,R("DigitCharacterCell"),R("Combined")].join(" ")),b.push(S("input",{type:"text",inputMode:h?"numeric":e.inputMode||"text",value:M,id:"Digit-"+i+"-"+c.componentId,className:v,style:t(t({},e.style),N),onKeyDown:m=>{let{key:l,code:H}=m;if(l=="Tab")return;m.preventDefault();let y=null;if(l=="Backspace"){let r=c.safeValue;r[i]="",d(I=>o(t(t({},I),A(r)),{eventType:"update",eventID:g(12),isInspected:!1})),y=i-1}else if(V.isOneOf(l,"ArrowLeft","ArrowRight")){let r=+(l=="ArrowRight")*2-1;y=i+r}else C&&w.SubmitForm(m,f),(()=>{let r=H.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!r)return;let I=r[2]||r[3]||r[4];if(h&&!I.match(/\d/)||!I)return;let F=c.safeValue;F[i]=I,d(L=>o(t(t({},L),A(F)),{eventType:"update",eventID:g(12),isInspected:!1})),y=i+1})();V.isExist(y)&&_("#Digit-"+y+"-"+c.componentId).focus()},onChange:()=>{},onFocus:m=>{a!=null&&a.onFocus&&(a==null||a.onFocus(m)),d(l=>o(t({},l),{eventID:g(12),isFocusing:!0}))},onBlur:m=>{a!=null&&a.onBlur&&(a==null||a.onBlur(m)),d(l=>o(t({},l),{eventID:g(12),isFocusing:!1}))}},i))}return S(U,{val_status:c,set_status:d,states:e,children:S($,o(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},E),{children:b}))})},B=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=o(t({textAlign:"center",width:0},e),{freeCSS:t({minWidth:12*2,marginRight:-1},e.freeCSS),listStyles:t({borderRadius:"2.tone.secondary",border:"unset",gap:0},e.listStyles)}));let n=k(W(e));return S(K,{componentId:e.componentId,children:j,states:n})};export{B as DigitCharacters,B as default};

package/dist/fn/Input/Drum.js

@@ -1 +1 @@
-import{b as r,c as p,d as _}from"../../chunk-C5N2D3ZX.js";import{Fragment as Y,jsx as a,jsxs as O}from"react/jsx-runtime";import I,{UUID as S}from"jmini";import{useState as k,useEffect as z}from"react";import{$$fromRoot as M}from"../../@utils";import{Box as v,Column as U,CacheRender as $}from"../../atoms";import{Button as j}from"../Button";import{OptionalInputWrapper as q,BoxWrapper as N,CoreEffects as w,DefaultBoxishStyles as X}from"./core";function J(o){let{value:e,states:n}=o,{required:l}=n,t=[];return l&&e===null&&t.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!t.filter(({type:u})=>u=="invalid").length,notice:t}}const c={Original:o=>{let{rootStates:e,val_status:n,set_status:l}=o,R=e,{required:t,form:u,className:d,isHorizontal:s,enableFormSubmit:C,checkValidationAtFirst:W,onValidate:G,onValidateDelay:K,onUpdateValue:Q,onUpdateValidValue:Z,onUserAction:ee,value:te="",options:E,componentId:D,status_id:oe,wrapStyles:ne}=R,A=_(R,["required","form","className","isHorizontal","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","componentId","status_id","wrapStyles"]),[i,B]=k(null);return z(()=>{let f=M(`[data-component-id="${D}"]`);if(!f[0])return;B(f[0]);let h="scroll.Drum-"+D;return f.addEvent({eventType:"scrollend",eventID:h,callback:b=>{I.interval.once(()=>{let{top:y,left:g,width:m,height:L}=f.position();const x=document.elementFromPoint(g+m/2,y+L/2);if(!x||!x.id)return;let[P,re,F]=x.id.split("-");if(P!=n.componentId)return;let T=E[Number(F)];T&&l(V=>V.rawValue==T.value?p(r({},V),{eventID:S(12)}):p(r({},V),{rawValue:T.value,eventType:"update",eventID:S(12),isInspected:!1,isValidated:!1,notice:[]}))},50,"updateDrum")}}),()=>{f.removeEvent(h)}},[]),z(()=>{if(!i)return;let f=E.findIndex(m=>(m==null?void 0:m.value)==n.rawValue);if(f===-1)return;let h=I("#"+[n.componentId,"opt",f].join("-"))[0];if(!h)return;let b=i.position(),y=h.position();if(s){let m=h.offsetLeft-b.width/2+y.width/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({left:m,behavior:"smooth"});return}i.scrollLeft=m;return}let g=h.offsetTop-b.height/2+y.height/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({top:g,behavior:"smooth"});return}i.scrollTop=g},[i,n.rawValue]),O(U,p(r({gap:"1/4",tabIndex:0,position:"relative"},A),{"data-disabled":e.disabled,"data-show-validation":w.isShowValidation(n,!!W),"data-component-id":n.componentId,"data-input-origin":n.componentId,children:[a(c.Marker,p(r({},o),{val_parent:i})),a(c.EdgePadding,{}),a(c.Options,r({},o)),a(c.EdgePadding,{})]}))},Options:o=>{let{rootStates:e,val_status:n,set_status:l}=o;return a(Y,{children:e.options.map((t,u)=>{if(!t)return null;let d=I.isEqual(t==null?void 0:t.value,n.rawValue);return t.type=="label"?a(v,{children:t.label||t.value},S(12)):a($,{params:{value:t.value,isSelected:d},forceRender:(s,C)=>s.isSelected!=C.isSelected,children:a(j.Clear,{id:[n.componentId,"opt",u].join("-"),tabIndex:-1,padding:"1/2",color:"cloud",border:"0.trans",ssEffectsOnActive:!1,isActive:d,isActiveStyles:{isSemiBoldFont:!0},freeCSS:{scrollSnapAlign:"center"},onClick:()=>{d||l(s=>p(r({},s),{rawValue:t.value,eventType:"update",eventID:S(12),isInspected:!1,isValidated:!1,notice:[]}))},children:t.label||t.value})},[u,t==null?void 0:t.value].join("-"))})})},Marker:o=>{let{rootStates:e,val_parent:n,val_status:l}=o,t=!e.isHorizontal;if(!n)return null;let u=e.options.findIndex(s=>(s==null?void 0:s.value)==l.rawValue);if(u===-1)return null;let d=I("#"+[l.componentId,"opt",u].join("-"))[0];return d?a(v,p(r({flexSizing:"none",transition:"short",position:"sticky"},t?{height:0}:{width:0}),{flexCenter:!0,freeCSS:r({pointerEvents:"none",zIndex:3},t?{top:"50%",transform:"translateY(-50%)"}:{left:"50%",transform:"translateX(-50%)"}),children:a(v,{transition:"short",boxShadow:"0.remark",borderRadius:"2.tone.secondary",backgroundColor:"theme.opa.few",border:!0,borderColor:"theme",flexSizing:"none",freeCSS:{height:d.position().height||0,width:d.position().width||0}})})):null},EdgePadding:()=>a(v,{flexSizing:"none",freeCSS:{width:"50%",height:"50%",pointerEvents:"none"}}),EdgeShadow:o=>o.position=="top"||o.position=="bottom"?a(v,{position:"absolute",borderRadius:"1.tone.primary",gradients:{deg:o.position=="top"?0:180,colors:["hsla(var(--color-layer0-hsl),0)","hsla(var(--color-layer0-hsl),.8)"]},freeCSS:{zIndex:10,[o.position]:1,left:1,right:1,height:"35%",pointerEvents:"none"}}):a(v,{position:"absolute",borderRadius:"1.tone.primary",freeCSS:{zIndex:10,[o.position]:1,top:1,bottom:1,width:"35%",pointerEvents:"none"}}),Core:o=>{let[e,n]=k(w.DefaultStatus(o.componentId,o.value)),l={rootStates:o,val_status:e,set_status:n};return w.CommonEffects({type:"drum",states:o,val_status:e,set_status:n,SystemValidation:J}),O(N,{val_status:e,set_status:n,states:o,children:[a(c.EdgeShadow,{position:o.isHorizontal?"left":"top"}),a(c.Original,r({},l)),a(c.EdgeShadow,{position:o.isHorizontal?"right":"bottom"})]})}},H=o=>{var n,l;let e=r({},o);return e=r({padding:"1/2",overflow:"auto"},e),e.isHorizontal?e=p(r({flexType:"row",flexWrap:!1},e),{freeCSS:r({whiteSpace:"nowrap",scrollSnapType:"x mandatory",maxWidth:12*24},e.freeCSS)}):e=p(r({},e),{freeCSS:r({scrollSnapType:"y mandatory",maxHeight:12*20,minWidth:12*6},e.freeCSS)}),e.value=(n=e.value)!=null?n:null,(l=e.options)==null||l.forEach((t,u)=>{if(!t)return;let{type:d,value:s}=t;e.options[u]=p(r({id:S(12)},t),{value:s,type:d||"selector"})}),a(q,{componentId:e.componentId,children:c.Core,states:X(e)})};export{H as Drum,H as default};
+import{b as r,c as p,d as _}from"../../chunk-C5N2D3ZX.js";import{Fragment as K,jsx as a,jsxs as O}from"react/jsx-runtime";import g,{UUID as y}from"jmini";import{useState as k,useEffect as z}from"react";import{$$fromRoot as $}from"../../@utils";import{Box as v,Column as j,CacheRender as q}from"../../atoms";import{Button as N}from"../Button";import{OptionalInputWrapper as X,BoxWrapper as J,CoreEffects as V,DefaultBoxishStyles as Y}from"./core";function G(o){let{value:e,states:n}=o,{required:l}=n,t=[];return l&&e===null&&t.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!t.filter(({type:u})=>u=="invalid").length,notice:t}}const c={Original:o=>{let{rootStates:e,val_status:n,set_status:l}=o,R=e,{required:t,form:u,className:d,isHorizontal:s,enableFormSubmit:C,checkValidationAtFirst:W,onValidate:Q,onValidateDelay:Z,onUpdateValue:ee,onUpdateValidValue:te,onUserAction:oe,value:ne="",options:E,componentId:D,status_id:re,wrapStyles:ae}=R,A=_(R,["required","form","className","isHorizontal","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","componentId","status_id","wrapStyles"]),[i,B]=k(null);return z(()=>{let f=$(`[data-component-id="${D}"]`);if(!f[0])return;B(f[0]);let h="onscrollend"in window,S="scroll.Drum-"+D,I=h?50:150;return f.addEvent({eventType:h&&"scrollend"||"scroll",eventID:S,callback:b=>{g.interval.once(()=>{let{top:m,left:P,width:L,height:F}=f.position();const x=document.elementFromPoint(P+L/2,m+F/2);if(!x||!x.id)return;let[M,le,U]=x.id.split("-");if(M!=n.componentId)return;let T=E[Number(U)];T&&l(w=>w.rawValue==T.value?p(r({},w),{eventID:y(12)}):p(r({},w),{rawValue:T.value,eventType:"update",eventID:y(12),isInspected:!1,isValidated:!1,notice:[]}))},I,"update-drum-input-value")}}),()=>{f.removeEvent(S)}},[]),z(()=>{if(!i)return;let f=E.findIndex(m=>(m==null?void 0:m.value)==n.rawValue);if(f===-1)return;let h=g("#"+[n.componentId,"opt",f].join("-"))[0];if(!h)return;let S=i.position(),I=h.position();if(s){let m=h.offsetLeft-S.width/2+I.width/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({left:m,behavior:"smooth"});return}i.scrollLeft=m;return}let b=h.offsetTop-S.height/2+I.height/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({top:b,behavior:"smooth"});return}i.scrollTop=b},[i,n.rawValue]),O(j,p(r({gap:"1/4",tabIndex:0,position:"relative"},A),{"data-disabled":e.disabled,"data-show-validation":V.isShowValidation(n,!!W),"data-component-id":n.componentId,"data-input-origin":n.componentId,children:[a(c.Marker,p(r({},o),{val_parent:i})),a(c.EdgePadding,{}),a(c.Options,r({},o)),a(c.EdgePadding,{})]}))},Options:o=>{let{rootStates:e,val_status:n,set_status:l}=o;return a(K,{children:e.options.map((t,u)=>{if(!t)return null;let d=g.isEqual(t==null?void 0:t.value,n.rawValue);return t.type=="label"?a(v,{children:t.label||t.value},y(12)):a(q,{params:{value:t.value,isSelected:d},forceRender:(s,C)=>s.isSelected!=C.isSelected,children:a(N.Clear,{id:[n.componentId,"opt",u].join("-"),tabIndex:-1,padding:"1/2",color:"cloud",border:"0.trans",ssEffectsOnActive:!1,isActive:d,isActiveStyles:{isSemiBoldFont:!0},freeCSS:{scrollSnapAlign:"center"},onClick:()=>{d||l(s=>p(r({},s),{rawValue:t.value,eventType:"update",eventID:y(12),isInspected:!1,isValidated:!1,notice:[]}))},children:t.label||t.value})},[u,t==null?void 0:t.value].join("-"))})})},Marker:o=>{let{rootStates:e,val_parent:n,val_status:l}=o,t=!e.isHorizontal;if(!n)return null;let u=e.options.findIndex(s=>(s==null?void 0:s.value)==l.rawValue);if(u===-1)return null;let d=g("#"+[l.componentId,"opt",u].join("-"))[0];return d?a(v,p(r({flexSizing:"none",transition:"short",position:"sticky"},t?{height:0}:{width:0}),{flexCenter:!0,freeCSS:r({pointerEvents:"none",zIndex:3},t?{top:"50%",transform:"translateY(-50%)"}:{left:"50%",transform:"translateX(-50%)"}),children:a(v,{transition:"short",boxShadow:"0.remark",borderRadius:"2.tone.secondary",backgroundColor:"theme.opa.few",border:!0,borderColor:"theme",flexSizing:"none",freeCSS:{height:d.position().height||0,width:d.position().width||0}})})):null},EdgePadding:()=>a(v,{flexSizing:"none",freeCSS:{width:"50%",height:"50%",pointerEvents:"none"}}),EdgeShadow:o=>o.position=="top"||o.position=="bottom"?a(v,{position:"absolute",borderRadius:"1.tone.primary",gradients:{deg:o.position=="top"?0:180,colors:["hsla(var(--color-layer0-hsl),0)","hsla(var(--color-layer0-hsl),.8)"]},freeCSS:{zIndex:10,[o.position]:1,left:1,right:1,height:"35%",pointerEvents:"none"}}):a(v,{position:"absolute",borderRadius:"1.tone.primary",freeCSS:{zIndex:10,[o.position]:1,top:1,bottom:1,width:"35%",pointerEvents:"none"}}),Core:o=>{let[e,n]=k(V.DefaultStatus(o.componentId,o.value)),l={rootStates:o,val_status:e,set_status:n};return V.CommonEffects({type:"drum",states:o,val_status:e,set_status:n,SystemValidation:G}),O(J,{val_status:e,set_status:n,states:o,children:[a(c.EdgeShadow,{position:o.isHorizontal?"left":"top"}),a(c.Original,r({},l)),a(c.EdgeShadow,{position:o.isHorizontal?"right":"bottom"})]})}},H=o=>{var n,l;let e=r({},o);return e=r({padding:"1/2",overflow:"auto"},e),e.isHorizontal?e=p(r({flexType:"row",flexWrap:!1},e),{freeCSS:r({whiteSpace:"nowrap",scrollSnapType:"x mandatory",maxWidth:12*24},e.freeCSS)}):e=p(r({},e),{freeCSS:r({scrollSnapType:"y mandatory",maxHeight:12*20,minWidth:12*6},e.freeCSS)}),e.value=(n=e.value)!=null?n:null,(l=e.options)==null||l.forEach((t,u)=>{if(!t)return;let{type:d,value:s}=t;e.options[u]=p(r({id:y(12)},t),{value:s,type:d||"selector"})}),a(X,{componentId:e.componentId,children:c.Core,states:Y(e)})};export{H as Drum,H as default};

package/dist/fn/Input/Filer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StyleTags } from '../../@declares';
+import { StyleProps } from '../../@declares';
 import { InputTypes } from '.';
 declare namespace Filer {
     type CustomFile = File & {
@@ -16,7 +16,7 @@ declare namespace Filer {
         isNameEditable?: boolean;
         useSystemOnly?: boolean;
         accept?: Accept;
-        cellStyles?: StyleTags.States;
+        cellStyles?: StyleProps.States;
         cellClassName?: string;
     };
     type WrapperStates = {

package/dist/fn/Input/Filer.js

@@ -1 +1 @@
-import{b as r,c as f,d as G,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as ne,jsx as a,jsxs as m}from"react/jsx-runtime";import{useState as Q,useEffect as Y}from"react";import z,{UUID as b,useStore as ee}from"jmini";import{$$fromRoot as _,ExtractStyles as se}from"../../@utils";import{Box as S,FAI as R,Flex as L,Column as te}from"../../atoms";import{Row as re}from"../../mols";import{Button as P}from"../Button";import j from"../Snackbar";import{OptionalInputWrapper as pe,BoxWrapper as ue,CoreEffects as le,DefaultBoxishStyles as me}from"./core";import ce from"./TextField";import{InputFilerClasses as y}from"../../@styles/componentClasses";import{faCloudArrowUp as de}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function fe(e){let{value:t,states:o}=e,{required:c}=o,l=[];return c&&!t.length&&l.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!l.filter(({type:p})=>p=="invalid").length,notice:l}}const ae={List:e=>{let{rootStates:t,val_status:o,set_status:c}=e;if(t.useSystemOnly)return null;let l=t.limit-(o.rawValue||[]).length,p=(o.rawValue||[]).map((n,u)=>a(ae.ListCell,f(r({},e),{index:u,val_file:n}),n.name));return l>0&&p.push(a(S,f(r({htmlTag:"label"},t.cellStyles),{className:[t.cellClassName,y("AddButton")].join(" "),"data-component-id":o.componentId,htmlFor:t.id,tabIndex:t.tabIndex,onKeyDown:n=>{let{key:u}=n;t.tabIndex!=-1&&z.isOneOf(u," ","Enter")&&_("#"+t.id).click()},children:m(re.Center,{padding:["1/3",0],children:[a(S,{isRounded:!0,className:y("AddIcon"),children:a(R,{icon:de,className:y("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"theme.opa.low",ssSphere:3,padding:"1/2"})}),m(S,{children:[m(S,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",l,")"]}),a(S,{fontColor:"4.thin",fontSize:"0.xs",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})}),"AddButton")),a(te,f(r({flexSizing:"auto"},se(t)),{className:t.className,children:p}))},ListCell:e=>{let{index:t,rootStates:o,val_file:c,val_status:l,set_status:p}=e,{name:n,size:u,type:i}=c,[d,v]=Q(!1),I=b(),J=u.rank(),[K,W]=n.replace(/\s/g,"_").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),s="\u30D5\u30A1\u30A4\u30EB";return i.match(/image/)?s=i.replace(/image\//,""):i.match(/pdf/)?s="PDF":i.match(/csv/)?s="CSV":i.match(/spreadsheet/)?s="SpreadSheet":i.match(/presentation/)?s="PowerPoint":i.match(/word/)?s="Word":i.match(/zip/)?s="Zip":i.match(/powerpoint/)?s="PowerPoint":i.match(/html/)?s="HTML":i.match(/js/)?s="JavaScript":i.match(/css/)?s="CSS":i.match(/text\/plain/)&&(s="\u30C6\u30AD\u30B9\u30C8"),Y(()=>{d&&setTimeout(()=>{_("#"+I).focus()},100)},[d]),m(L,f(r({verticalAlign:"center",flexWrap:!1,gap:1,className:o.cellClassName},o.cellStyles),{children:[a(R.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),m(S,{flexSizing:0,children:[a(S,{children:a(L,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:y("FileName"),children:d?a(ne,{children:m(te,{flexSizing:0,gap:"1/2",children:[m(L,{gap:"2/3",verticalAlign:"center",children:[a(ce,{tone:"border",wrapStyles:{flexSizing:"auto"},restrict:"fileName",name:"name",required:!0,id:I,form:"form-"+I,enableFormSubmit:!0,value:K,onKeyDown:F=>{let{key:B}=F;B=="Escape"&&v(!1)}}),m(S,{children:[". ",W]})]}),m(L,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[a(P.Sub.S,{padding:["2/3",1],onClick:()=>{v(!1)},children:"\u9589\u3058\u308B"}),a(P.Prime.S,{padding:["2/3",1],onFormSubmit:["form-"+I,F=>H(void 0,null,function*(){let{name:B}=F.body,w=[...l.rawValue],A=w[t],X=A.id;if(!A)return;let M=yield String(yield A.convert("dataURL")).toBlob(c.type);if(!M)return;let $=new File([M],B+"."+W,{type:A.type});$.id=X,w[t]=$,p(O=>f(r({},O),{rawValue:w,eventType:"update",eventID:b(12),isInspected:!1})),v(!1)})],children:"\u6C7A\u5B9A"})]})]})}):m(ne,{children:[n,!!o.isNameEditable&&a(P.Clear,{ssSphere:2.5,flexSizing:"none",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",color:"cloud",onClick:()=>{v(!0)},children:a(R.Pen,{})})]})})}),!d&&m(S,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[s,"\u30D5\u30A1\u30A4\u30EB / ",J,"B"]})]}),a(P.Sub,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let F=[...l.rawValue];F[t]&&(F.splice(t,1),p(w=>f(r({},w),{rawValue:F,eventType:"update",eventID:b(12),isInspected:!1})))},children:a(R.X,{})})]}))}},ge=e=>{let Z=e,{tone:t,required:o,form:c,isNameEditable:l,useSystemOnly:p,accept:n="*",limit:u=1,checkValidationAtFirst:i,onChange:d,onValidate:v,onValidateDelay:I,onUpdateValue:J,onUpdateValidValue:K,onUserAction:W,value:s=[],className:F,cellStyles:B,cellClassName:w,componentId:A,status_id:X,enableFormSubmit:oe,freeCSS:M,wrapStyles:$}=Z,O=G(Z,["tone","required","form","isNameEditable","useSystemOnly","accept","limit","checkValidationAtFirst","onChange","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","className","cellStyles","cellClassName","componentId","status_id","enableFormSubmit","freeCSS","wrapStyles"]),[T,N]=Q(le.DefaultStatus(e.componentId||"",s)),ie={rootStates:e,val_status:T,set_status:N};Y(()=>{ee.set({["AddFiles-"+T.componentId]:x=>{N(D=>{let C=D.rawValue,V=[];for(var g=0;g<(x==null?void 0:x.length);g++){let h=x[g],{type:k,name:E}=h;if(g+1+C.length>u){j.add({componentId:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${E}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(n&&n=="image"&&!k.match(/image/)){j.add({componentId:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${E} \u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}V.push(h)}return f(r({},D),{rawValue:[...C,...V],eventType:"update",eventID:b(12),isInspected:!1})})}})},[]),le.CommonEffects({type:"file",states:e,val_status:T,set_status:N,SystemValidation:fe});let U="";return n&&(n=="image"?U="image/png,image/jpeg":U=n),m(ue,{val_status:T,set_status:N,states:e,children:[a(S,f(r({htmlTag:"input",type:"file",className:y("Input"),"data-component-id":T.componentId,accept:U,multiple:u!=1,onChange:x=>H(void 0,null,function*(){d&&d(x);let D=x.target,C=D.files,V=[];for(var g=0;g<(C==null?void 0:C.length);g++){if(!C[g])continue;let h=C[g].clone(),k=h.name;if(h.id=b(),g+1+T.rawValue.length>u){j.add({componentId:k,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${k}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`,backgroundColor:"nega"});continue}V.push(h)}N(h=>f(r({},h),{rawValue:[...h.rawValue,...V],eventType:"update",eventID:b(12),isInspected:!1})),D.value=""})},O),{opacity:"low",tabIndex:-1,value:""})),a(ae.List,r({},ie))]})},q=e=>(e=f(r({limit:1,isNameEditable:!0,useSystemOnly:!1,tone:"border",value:[]},e),{override:"force",cellStyles:r(r({},me({tone:e.tone||"border"})),e.cellStyles)}),a(pe,{componentId:e.componentId,children:ge,states:e}));q.fn={openDialog:e=>{let{multiple:t,accept:o}=e,c=b();const l=document.createElement("input");l.type="file",l.multiple=!!t,l.value="",l.id=c,o&&(o=="image"?l.accept="image/png,image/jpeg,image/jpg,image/webp":l.accept=o),z("body").append(l),l.onchange=p=>{var i;let n=((i=p==null?void 0:p.target)==null?void 0:i.files)||[];if(!(n!=null&&n.length))return;let u=[];for(let d=0;d<n.length;d++){let I=n[d].clone();u.push(I)}e.onChange(u),z("#"+c).remove()},l.click()}},typeof window!="undefined"&&window.document&&z(document).addEvent({eventType:"dragover",callback:e=>{e.preventDefault(),_("."+y("AddButton")).addClass(y("Draggable"))},options:{passive:!1}}).addEvent({eventType:"drop",callback:e=>{e.preventDefault(),_("."+y("AddButton")).removeClass(y("Draggable"));let t=e.dataTransfer.files;if(t.length){let o=e.target;if(_(o).hasClass(y("AddButton"))){let{componentId:c}=o.dataset,l=ee.get("AddFiles-"+c);l&&l(t)}}},options:{passive:!1}});export{q as Filer,q as default};
+import{b as r,c as f,d as G,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as ne,jsx as a,jsxs as m}from"react/jsx-runtime";import{useState as Q,useEffect as Y}from"react";import z,{UUID as b,useStore as ee}from"jmini";import{$$fromRoot as _,ExtractStyles as se}from"../../@utils";import{Box as S,FAI as P,Flex as R,Column as te}from"../../atoms";import{Row as re}from"../../mols";import{Button as L}from"../Button";import j from"../Snackbar";import{OptionalInputWrapper as pe,BoxWrapper as ue,CoreEffects as le,DefaultBoxishStyles as me}from"./core";import ce from"./TextField";import{InputFilerClasses as y}from"../../@styles/componentClasses";import{faCloudArrowUp as de}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function fe(e){let{value:t,states:o}=e,{required:c}=o,l=[];return c&&!t.length&&l.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!l.filter(({type:p})=>p=="invalid").length,notice:l}}const ae={List:e=>{let{rootStates:t,val_status:o,set_status:c}=e;if(t.useSystemOnly)return null;let l=t.limit-(o.rawValue||[]).length,p=(o.rawValue||[]).map((n,u)=>a(ae.ListCell,f(r({},e),{index:u,val_file:n}),n.name));return l>0&&p.push(a(S,f(r({htmlTag:"label"},t.cellStyles),{className:[t.cellClassName,y("AddButton")].join(" "),"data-component-id":o.componentId,htmlFor:t.id,tabIndex:t.tabIndex,onKeyDown:n=>{let{key:u}=n;t.tabIndex!=-1&&z.isOneOf(u," ","Enter")&&_("#"+t.id).click()},children:m(re.Center,{padding:["1/3",0],children:[a(S,{isRounded:!0,className:y("AddIcon"),children:a(P,{icon:de,className:y("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"theme.opa.low",ssSphere:3,padding:"1/2"})}),m(S,{children:[m(S,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",l,")"]}),a(S,{fontColor:"4.thin",fontSize:"0.xs",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})}),"AddButton")),a(te,f(r({flexSizing:"auto"},se(t)),{className:t.className,children:p}))},ListCell:e=>{let{index:t,rootStates:o,val_file:c,val_status:l,set_status:p}=e,{name:n,size:u,type:i}=c,[d,v]=Q(!1),I=b(),J=u.rank(),[K,W]=n.replace(/\s/g,"_").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),s="\u30D5\u30A1\u30A4\u30EB";return i.match(/image/)?s=i.replace(/image\//,""):i.match(/pdf/)?s="PDF":i.match(/csv/)?s="CSV":i.match(/spreadsheet/)?s="SpreadSheet":i.match(/presentation/)?s="PowerPoint":i.match(/word/)?s="Word":i.match(/zip/)?s="Zip":i.match(/powerpoint/)?s="PowerPoint":i.match(/html/)?s="HTML":i.match(/js/)?s="JavaScript":i.match(/css/)?s="CSS":i.match(/text\/plain/)&&(s="\u30C6\u30AD\u30B9\u30C8"),Y(()=>{d&&setTimeout(()=>{_("#"+I).focus()},100)},[d]),m(R,f(r({verticalAlign:"center",flexWrap:!1,gap:1,className:o.cellClassName},o.cellStyles),{children:[a(P.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),m(S,{flexSizing:0,children:[a(S,{children:a(R,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:y("FileName"),children:d?a(ne,{children:m(te,{flexSizing:0,gap:"1/2",children:[m(R,{gap:"2/3",verticalAlign:"center",children:[a(ce,{tone:"border",wrapStyles:{flexSizing:"auto"},restrict:"fileName",name:"name",required:!0,id:I,form:"form-"+I,enableFormSubmit:!0,value:K,onKeyDown:F=>{let{key:B}=F;B=="Escape"&&v(!1)}}),m(S,{children:[". ",W]})]}),m(R,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[a(L.Sub.S,{padding:["2/3",1],onClick:()=>{v(!1)},children:"\u9589\u3058\u308B"}),a(L.Prime.S,{padding:["2/3",1],onFormSubmit:["form-"+I,F=>H(void 0,null,function*(){let{name:B}=F.body,w=[...l.rawValue],A=w[t],X=A.id;if(!A)return;let M=yield String(yield A.convert("dataURL")).toBlob(c.type);if(!M)return;let $=new File([M],B+"."+W,{type:A.type});$.id=X,w[t]=$,p(O=>f(r({},O),{rawValue:w,eventType:"update",eventID:b(12),isInspected:!1})),v(!1)})],children:"\u6C7A\u5B9A"})]})]})}):m(ne,{children:[n,!!o.isNameEditable&&a(L.Clear,{ssSphere:2.5,flexSizing:"none",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",color:"cloud",onClick:()=>{v(!0)},children:a(P.Pen,{})})]})})}),!d&&m(S,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[s,"\u30D5\u30A1\u30A4\u30EB / ",J,"B"]})]}),a(L.Sub,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let F=[...l.rawValue];F[t]&&(F.splice(t,1),p(w=>f(r({},w),{rawValue:F,eventType:"update",eventID:b(12),isInspected:!1})))},children:a(P.X,{})})]}))}},ge=e=>{let Z=e,{tone:t,required:o,form:c,isNameEditable:l,useSystemOnly:p,accept:n="*",limit:u=1,checkValidationAtFirst:i,onChange:d,onValidate:v,onValidateDelay:I,onUpdateValue:J,onUpdateValidValue:K,onUserAction:W,value:s=[],className:F,cellStyles:B,cellClassName:w,componentId:A,status_id:X,enableFormSubmit:oe,freeCSS:M,wrapStyles:$}=Z,O=G(Z,["tone","required","form","isNameEditable","useSystemOnly","accept","limit","checkValidationAtFirst","onChange","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","className","cellStyles","cellClassName","componentId","status_id","enableFormSubmit","freeCSS","wrapStyles"]),[T,N]=Q(le.DefaultStatus(e.componentId||"",s)),ie={rootStates:e,val_status:T,set_status:N};Y(()=>{ee.set({["AddFiles-"+T.componentId]:x=>{N(D=>{let C=D.rawValue,V=[];for(var g=0;g<(x==null?void 0:x.length);g++){let h=x[g],{type:k,name:E}=h;if(g+1+C.length>u){j.add({componentId:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${E}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(n&&n=="image"&&!k.match(/image/)){j.add({componentId:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${E} \u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}V.push(h)}return f(r({},D),{rawValue:[...C,...V],eventType:"update",eventID:b(12),isInspected:!1})})}})},[]),le.CommonEffects({type:"file",states:e,val_status:T,set_status:N,SystemValidation:fe});let U="";return n&&(n=="image"?U="image/png,image/jpeg":U=n),m(ue,{val_status:T,set_status:N,states:e,children:[a(S,f(r({htmlTag:"input",type:"file",className:y("Input"),"data-component-id":T.componentId,accept:U,multiple:u!=1,onChange:x=>H(void 0,null,function*(){d&&d(x);let D=x.target,C=D.files,V=[];for(var g=0;g<(C==null?void 0:C.length);g++){if(!C[g])continue;let h=C[g].clone(),k=h.name;if(h.id=b(),g+1+T.rawValue.length>u){j.add({componentId:k,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${k}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`,backgroundColor:"nega"});continue}V.push(h)}N(h=>f(r({},h),{rawValue:[...h.rawValue,...V],eventType:"update",eventID:b(12),isInspected:!1})),D.value=""})},O),{opacity:"low",tabIndex:-1,value:""})),a(ae.List,r({},ie))]})},q=e=>(e=f(r({limit:1,isNameEditable:!0,useSystemOnly:!1,tone:"border",value:[]},e),{override:"force",cellStyles:r(r({},me({tone:e.tone||"border"})),e.cellStyles)}),a(pe,{componentId:e.componentId,children:ge,states:e}));q.fn={openDialog:e=>{let{multiple:t,accept:o}=e,c=b();const l=document.createElement("input");l.type="file",l.multiple=!!t,l.value="",l.id=c,o&&(o=="image"?l.accept="image/png,image/jpeg,image/jpg,image/webp":l.accept=o),z("body").append(l),l.onchange=p=>{var i;let n=((i=p==null?void 0:p.target)==null?void 0:i.files)||[];if(!(n!=null&&n.length))return;let u=[];for(let d=0;d<n.length;d++){let I=n[d].clone();u.push(I)}e.onChange(u),z("#"+c).remove()},l.click()}},typeof window!="undefined"&&window.document&&z(document).addEvent({eventType:"dragover",callback:e=>{e.preventDefault(),_("."+y("AddButton")).addClass(y("Draggable"))},options:{passive:!1}}).addEvent({eventType:"drop",callback:e=>{e.preventDefault(),_("."+y("AddButton")).removeClass(y("Draggable"));let t=e.dataTransfer.files;if(t.length){let o=e.target;if(_(o).hasClass(y("AddButton"))){let{componentId:c}=o.dataset,l=ee.get("AddFiles-"+c);l&&l(t)}}},options:{passive:!1}});export{q as Filer,q as default};

package/dist/fn/Input/Label.d.ts

@@ -1,8 +1,8 @@
-import { StyleTags, ReactElement } from '../../@declares';
+import { StyleProps, ReactElement } from '../../@declares';
 export declare const InputLabel: (p: {
     componentId: string;
     isActive: boolean;
     required?: boolean;
-    fontSize?: StyleTags.Fonts.Size;
+    fontSize?: StyleProps.Fonts.Size;
     label: ReactElement;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/dist/fn/Input/Label.js

@@ -1 +1 @@
-import{b as l,c as p}from"../../chunk-C5N2D3ZX.js";import{jsx as d,jsxs as x}from"react/jsx-runtime";import{useState as S,useEffect as b}from"react";import a from"jmini";import{Box as g,Span as c}from"../../atoms";import{Row as h}from"../../mols";const $=t=>{if(!t.label)return null;let[r,s]=S({});return b(()=>{let f=a('[data-input-origin="'+t.componentId+'"]'),i=a('[data-input-label="'+t.componentId+'"]'),u=a('[data-input-value-shallow="'+t.componentId+'"]');if(!f[0]||!i[0]||!u[0])return;let o=f.position(),e=u.position();if(t.isActive){let n=e.left-o.left;s({opacity:"max",backgroundColor:"layer.1",freeCSS:{fontSize:"12px",lineHeight:1,transform:`translate(${n}px,-6px)`}})}else{let n=e.left-o.left,m=e.top-o.top;s({fontSize:t.fontSize||"inherit",opacity:"middle",backgroundColor:"trans",freeCSS:{lineHeight:"inherit",height:e.height,transform:`translate(${n}px,${m}px)`}})}i.getAttribute("data-label-init")=="true"&&i.setAttribute("data-label-init","false").await(10).css({transition:".25s"})},[t.isActive]),d(g,p(l({htmlTag:"label","data-input-label":t.componentId,"data-label-init":"true",position:"absolute",left:0,top:0,fontColor:"3.blur",backgroundColor:"trans",flexCenter:!0,borderRadius:"1/3",padding:[0,"1/4"],opacity:"min",fontHeight:"inherit"},r),{freeCSS:l({zIndex:2,transformOrigin:"top left",pointerEvents:"none"},r.freeCSS),children:x(h.Left,{gap:"1/3",children:[t.label,t.required&&d(c,{fontColor:"nega",children:" * "})]})}))};export{$ as InputLabel};
+import{b as l,c as u}from"../../chunk-C5N2D3ZX.js";import{jsx as d,jsxs as x}from"react/jsx-runtime";import{useState as S,useEffect as b}from"react";import r from"jmini";import{Box as c,Span as g}from"../../atoms";import{Row as h}from"../../mols";const $=t=>{if(!t.label)return null;let[a,s]=S({});return b(()=>{let f=r('[data-input-origin="'+t.componentId+'"]'),i=r('[data-input-label="'+t.componentId+'"]'),p=r('[data-input-value-shallow="'+t.componentId+'"]');if(!f[0]||!i[0]||!p[0])return;let o=f.position(),e=p.position();if(t.isActive){let n=e.left-o.left;s({opacity:"max",backgroundColor:"layer.1",freeCSS:{fontSize:"12px",lineHeight:1,transform:`translate(${n}px,-6px)`}})}else{let n=e.left-o.left,m=e.top-o.top;s({fontSize:t.fontSize||"inherit",opacity:"middle",backgroundColor:"trans",freeCSS:{lineHeight:"inherit",height:e.height,transform:`translate(${n}px,${m}px)`}})}i.getAttribute("data-label-init")=="true"&&i.setAttribute("data-label-init","false").await(10).css({transition:".25s"})},[t.isActive]),d(c,u(l({htmlTag:"label","data-input-label":t.componentId,"data-label-init":"true",position:"absolute",left:0,top:0,fontColor:"3.blur",backgroundColor:"trans",flexCenter:!0,borderRadius:"1/3",padding:[0,"1/4"],opacity:"min",fontHeight:"inherit"},a),{freeCSS:l({zIndex:2,transformOrigin:"top left",pointerEvents:"none"},a.freeCSS),children:x(h.Left,{gap:"1/3",children:[t.label,t.required&&d(g,{fontColor:"nega",children:" * "})]})}))};export{$ as InputLabel};

package/dist/fn/Input/List.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StyleTags, ReactElement } from '../../@declares';
+import { StyleProps, ReactElement } from '../../@declares';
 import { Records } from 'jmini';
 import { InputTypes } from '.';
 declare namespace List {
@@ -15,7 +15,7 @@ declare namespace List {
         iconType?: IconType;
         iconSize?: Size;
         iconPosition?: 'left' | 'right';
-        iconColor?: StyleTags.BackgroundColor;
+        iconColor?: StyleProps.BackgroundColor;
         isChecker?: boolean;
         CustomIcon?: React.FC<CustomIconInput>;
         tabIndex?: number;
@@ -26,9 +26,9 @@ declare namespace List {
         value?: T | T[];
         options: Option<T>[];
         hideInput?: boolean;
-        cellStyles?: StyleTags.PropsNFreeCSS;
+        cellStyles?: StyleProps.PropsNFreeCSS;
         cellClassName?: string;
-        cellCheckedStyles?: StyleTags.PropsNFreeCSS;
+        cellCheckedStyles?: StyleProps.PropsNFreeCSS;
         cellCheckedClassName?: string;
     };
     type CoreInput = Input & {
@@ -40,13 +40,13 @@ declare namespace List {
         label?: ReactElement;
         disabled?: boolean;
         className?: string;
-        checkedStyles?: StyleTags.PropsNFreeCSS;
+        checkedStyles?: StyleProps.PropsNFreeCSS;
         checkedClassName?: string;
-    } & StyleTags.States;
+    } & StyleProps.States;
     type CustomIconInput = {
         isChecked: boolean;
         iconSize: Size;
-        iconColor: StyleTags.BackgroundColor;
+        iconColor: StyleProps.BackgroundColor;
         toggle: () => void;
     };
     type CoreStates = {

package/dist/fn/Input/List.js

@@ -1 +1 @@
-import{b as o,c as m,d as F}from"../../chunk-C5N2D3ZX.js";import{jsx as a}from"react/jsx-runtime";import p,{UUID as B}from"jmini";import{useState as ie}from"react";import{$$fromRoot as ae,GenerateHTMLProps as ne}from"../../@utils";import{Box as I,Flex as se,FAI as re,Span as ce}from"../../atoms";import{Button as ue}from"../Button";import{OptionalInputWrapper as de,BoxWrapper as me,CoreEffects as D}from"./core";import{InputListClasses as T}from"../../@styles/componentClasses";function pe(t){let{value:l,states:i}=t,{type:e,required:s,min:n,max:C}=i;n=n||0,C=C||65535;let c=[],S=l.length;return s&&(S||e=="radio"&&c.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),S<n&&c.push({type:"invalid",label:n+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),S>C&&c.push({type:"invalid",label:C+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!c.filter(({type:V})=>V=="invalid").length,notice:c}}const h={InitOptions:t=>{let l=[];return t.forEach(i=>{if(!i)return;let{label:e,value:s}=i;p.isNullish(e)&&(e=String(s)),l.push(m(o({},i),{label:e,value:s}))}),l},OptionalListWrapper:t=>{let{value:l,options:i=[]}=t,e=p.isExist(l)?p.Arrayify(l):[],s=[];return e.forEach(n=>{i.findIndex(c=>p.isEqual(c.value,n))!=-1&&s.push(n)}),a(h.Core,m(o({},t),{value:s,options:i}))},Core:t=>{let g=t,{type:l,tone:i,required:e,componentId:s="",form:n,override:C,icon:c,iconType:S,iconSize:V,iconPosition:J,iconColor:v,CustomIcon:P,enableFormSubmit:X,checkValidationAtFirst:A,onValidate:$,onValidateDelay:R,onUpdateValue:U,onUpdateValidValue:W,onUserAction:H,value:f,options:q,className:K,cellStyles:j,cellClassName:G,cellCheckedStyles:Q,cellCheckedClassName:w,min:u,max:N,hideInput:b,freeCSS:Y,wrapStyles:x}=g,Z=F(g,["type","tone","required","componentId","form","override","icon","iconType","iconSize","iconPosition","iconColor","CustomIcon","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","className","cellStyles","cellClassName","cellCheckedStyles","cellCheckedClassName","min","max","hideInput","freeCSS","wrapStyles"]),[O,L]=ie(D.DefaultStatus(s,f));return D.CommonEffects({type:"list."+l,states:t,val_status:O,set_status:L,SystemValidation:pe}),a(me,{val_status:O,set_status:L,states:t,children:a(h.List,{rootStates:t,val_status:O,set_status:L})})},List:t=>{let{rootStates:l,val_status:i,set_status:e}=t,{componentId:s,type:n,tone:C,icon:c,iconSize:S,iconColor:V,isChecker:J,options:v,name:P,form:X,tabIndex:A,hideInput:$,disabled:R,className:U,cellStyles:W,cellClassName:H="",cellCheckedStyles:f,cellCheckedClassName:q="",enableFormSubmit:K}=l,j=l.CustomIcon,G=v.map((Q,w)=>{let oe=Q,{value:u,label:N,disabled:b,className:Y="",checkedStyles:x,checkedClassName:Z="",freeCSS:O}=oe,L=F(oe,["value","label","disabled","className","checkedStyles","checkedClassName","freeCSS"]),g=B(),E=i.rawValue.findIndex(r=>r===u||p.isEqual(r,u))!=-1,y=o(o({},W),L),_=[T("Label"),H,Y];E&&(y=m(o(o(o({},y),f),x),{freeCSS:o(o(o({},y==null?void 0:y.freeCSS),f==null?void 0:f.freeCSS),x==null?void 0:x.freeCSS)}),_=[..._,q,Z]);const ee=()=>{if(R||b)return;let r=[];if(n=="radio")r=[u];else if(n=="checkbox"||J)if(!E)r=[...i.rawValue,u];else{let d=[...i.rawValue];d.splice(i.rawValue.findIndex(z=>z==u),1),r=d}e(d=>m(o({},d),{rawValue:r,eventType:"update",eventID:B(12),isInspected:!1}))};let te=[a(ce,{position:"relative",freeCSS:{zIndex:2},flexSizing:0,children:p.isString(N)?a(I,{children:N}):N},"content")];return c&&te[l.iconPosition=="right"?"push":"unshift"](a(j,{isChecked:E,iconSize:S,iconColor:V,toggle:ee},"icon")),[a(I,{htmlTag:"input",type:n=="radio"?"radio":"checkbox",className:T("Input"),name:"RadioCheckbox-"+P,"data-list-index":s+"-"+w,id:g,value:String(u),disabled:R||b,checked:E,onFocus:r=>{b||n=="radio"&&(i.rawValue.length||e(d=>m(o({},d),{rawValue:[u],eventType:"update",eventID:B(12),isInspected:!1})))},onChange:()=>{ee()},onKeyDown:r=>{let{key:d,shiftKey:z}=r;if((n=="checkbox"||t.rootStates.isChecker)&&d!="Tab"){if(d.match(/Arrow/)){r.preventDefault();let le=p.isOneOf(d,"ArrowLeft","ArrowUp")?-1:1,k=w+le;k<0?k=v.length-1:k>=v.length&&(k=0),ae(`input[data-list-index="${s}-${k}"]`).focus()}}K&&D.SubmitForm(r,X)},tabIndex:A},"List-"+p.Stringify(u)),a(I,m(o({htmlTag:"label","data-disabled":R||b,htmlFor:g,className:_.join(" "),tabIndex:-1,display:"flex",verticalAlign:"center",flexWrap:!1},y),{children:te}),"ListTrigger-"+p.Stringify(u))]});return a(se,{flexSizing:"auto",style:l.style,freeCSS:o({},l.freeCSS),className:[U,T("CellBase"),T("HideInput_"+$),T("IconIndicator_"+!!c),T("Tone_"+C)].join(" "),children:G})},_Icon:t=>{let l=1.5;return t.iconSize=="small"?l=1.2:t.iconSize=="large"&&(l=2),a(ue.Normal,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",ssSphere:2,freeCSS:{transform:`scale(${l})`},onClick:i=>{i.preventDefault(),i.stopPropagation(),t.toggle()},children:t.children})},RadioIcon:t=>a(h._Icon,m(o({type:"radio"},t),{children:a(I,{flexCenter:!0,isRounded:!0,border:t.isChecked?"0.trans":"3.thick",borderColor:t.isChecked?t.iconColor:"3.thick",position:"relative",transition:"middle",freeCSS:{width:"50%",height:"50%"},children:a(I,{position:"absolute",transition:"middle",isRounded:!0,backgroundColor:t.iconColor,opacity:t.isChecked?"max":"trans",freeCSS:{width:"60%",height:"60%",transform:t.isChecked?"scale(1)":"scale(.4)"}})})})),CheckboxIcon:t=>a(h._Icon,m(o({type:"checkbox"},t),{children:a(I,{flexCenter:!0,boxShadow:t.isChecked?"0.remark":"none",border:t.isChecked?"0.trans":"3.thick",backgroundColor:t.isChecked?t.iconColor:"trans",position:"relative",transition:"middle",fontColor:"white",freeCSS:{borderRadius:"25%",padding:"4%",width:"50%",height:"50%"},children:a(re.Check,{transition:"middle",opacity:t.isChecked?"max":"trans",freeCSS:{zIndex:8,width:"100%",height:"100%",transform:t.isChecked?"scale(1)":"scale(.5)"}})})}))},M=t=>{t=t||"checkbox";const l=e=>(e=m(o({gap:1,icon:!0,iconSize:"regular",iconType:t=="radio"?"radio":"checkbox",iconPosition:"left",iconColor:"theme"},e),{type:t,cellStyles:o({gap:"1/6",position:"relative",borderRadius:"2.tone.secondary",transition:"middle"},e.cellStyles)}),e.CustomIcon||(e.iconType=="radio"?e.CustomIcon=h.RadioIcon:e.iconType=="checkbox"&&(e.CustomIcon=h.CheckboxIcon)),e.iconSize=="small"?e.cellStyles.gap=0:e.iconSize=="large"&&(e.cellStyles.gap="1/2"),e.tone=="normal"?(e.cellStyles=o({padding:["1/4",1],border:"1.thin",backgroundColor:"layer.1"},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme",boxShadow:"1.normal"},e.cellCheckedStyles)):e.tone=="border"?(e.cellStyles=o({border:"1.thin",backgroundColor:"layer.1",padding:["1/2",1,"1/2","1/2"]},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme"},e.cellCheckedStyles)):e.tone=="cloud"&&(e.cellStyles=o({border:"1.thin",backgroundColor:"layer.2",padding:["1/2",1,"1/2","1/2"]},e.cellStyles),e.cellCheckedStyles=o({backgroundColor:"cloud",fontColor:"theme"},e.cellCheckedStyles)),e=ne(e),e.options=h.InitOptions(e.options),a(de,{componentId:e.componentId,children:h.OptionalListWrapper,states:e})),i=l;return i.Normal=e=>a(l,o({type:t,tone:"normal",icon:!1},e)),i.Border=e=>a(l,o({type:t,tone:"border"},e)),i.Cloud=e=>a(l,o({type:t,tone:"cloud"},e)),i.Vivid=e=>a(l,o({type:t,tone:"normal",icon:!1,cellCheckedStyles:{backgroundColor:"theme",fontColor:"white"}},e)),i.Simple=e=>a(l,o({type:t,tone:"plain",icon:!1,cellCheckedStyles:{fontColor:"theme"}},e)),i},Ce=M("radio"),he=M("checkbox"),Se=M();export{he as Checkbox,Se as List,Ce as Radio};
+import{b as o,c as p,d as _}from"../../chunk-C5N2D3ZX.js";import{jsx as i}from"react/jsx-runtime";import m,{UUID as z}from"jmini";import{useState as ie}from"react";import{$$fromRoot as ne,GenerateHTMLProps as ae}from"../../@utils";import{Box as I,Flex as se,FAI as re,Span as ce}from"../../atoms";import{Button as ue}from"../Button";import{OptionalInputWrapper as de,BoxWrapper as pe,CoreEffects as B}from"./core";import{InputListClasses as b}from"../../@styles/componentClasses";function me(t){let{value:l,states:n}=t,{type:e,required:s,min:a,max:C}=n;a=a||0,C=C||65535;let c=[],S=l.length;return s&&(S||e=="radio"&&c.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),S<a&&c.push({type:"invalid",label:a+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),S>C&&c.push({type:"invalid",label:C+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!c.filter(({type:V})=>V=="invalid").length,notice:c}}const h={InitOptions:t=>{let l=[];return t.forEach(n=>{if(!n)return;let{label:e,value:s}=n;m.isNullish(e)&&(e=String(s)),l.push(p(o({},n),{label:e,value:s}))}),l},OptionalListWrapper:t=>{let{value:l,options:n=[]}=t,e=m.isExist(l)?m.Arrayify(l):[],s=[];return e.forEach(a=>{n.findIndex(c=>m.isEqual(c.value,a))!=-1&&s.push(a)}),i(h.Core,p(o({},t),{value:s,options:n}))},Core:t=>{let k=t,{type:l,tone:n,required:e,componentId:s="",form:a,override:C,icon:c,iconType:S,iconSize:V,iconPosition:M,iconColor:v,CustomIcon:J,enableFormSubmit:X,checkValidationAtFirst:A,onValidate:$,onValidateDelay:R,onUpdateValue:U,onUpdateValidValue:W,onUserAction:H,value:f,options:q,className:j,cellStyles:K,cellClassName:G,cellCheckedStyles:Q,cellCheckedClassName:w,min:u,max:N,hideInput:x,freeCSS:Y,wrapStyles:L}=k,Z=_(k,["type","tone","required","componentId","form","override","icon","iconType","iconSize","iconPosition","iconColor","CustomIcon","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","className","cellStyles","cellClassName","cellCheckedStyles","cellCheckedClassName","min","max","hideInput","freeCSS","wrapStyles"]),[O,T]=ie(B.DefaultStatus(s,f));return B.CommonEffects({type:"list."+l,states:t,val_status:O,set_status:T,SystemValidation:me}),i(pe,{val_status:O,set_status:T,states:t,children:i(h.List,{rootStates:t,val_status:O,set_status:T})})},List:t=>{let{rootStates:l,val_status:n,set_status:e}=t,{componentId:s,type:a,tone:C,icon:c,iconSize:S,iconColor:V,isChecker:M,options:v,name:J,form:X,tabIndex:A,hideInput:$,disabled:R,className:U,cellStyles:W,cellClassName:H="",cellCheckedStyles:f,cellCheckedClassName:q="",enableFormSubmit:j}=l,K=l.CustomIcon,G=v.map((Q,w)=>{let oe=Q,{value:u,label:N,disabled:x,className:Y="",checkedStyles:L,checkedClassName:Z="",freeCSS:O}=oe,T=_(oe,["value","label","disabled","className","checkedStyles","checkedClassName","freeCSS"]),k=z(),E=n.rawValue.findIndex(r=>r===u||m.isEqual(r,u))!=-1,y=o(o({},W),T),P=[b("Label"),H,Y];E&&(y=p(o(o(o({},y),f),L),{freeCSS:o(o(o({},y==null?void 0:y.freeCSS),f==null?void 0:f.freeCSS),L==null?void 0:L.freeCSS)}),P=[...P,q,Z]);const ee=()=>{if(R||x)return;let r=[];if(a=="radio")r=[u];else if(a=="checkbox"||M)if(!E)r=[...n.rawValue,u];else{let d=[...n.rawValue];d.splice(n.rawValue.findIndex(F=>F==u),1),r=d}e(d=>p(o({},d),{rawValue:r,eventType:"update",eventID:z(12),isInspected:!1}))};let te=[i(ce,{position:"relative",freeCSS:{zIndex:2},flexSizing:0,children:m.isString(N)?i(I,{children:N}):N},"content")];return c&&te[l.iconPosition=="right"?"push":"unshift"](i(K,{isChecked:E,iconSize:S,iconColor:V,toggle:ee},"icon")),[i(I,{htmlTag:"input",type:a=="radio"?"radio":"checkbox",className:b("Input"),name:"RadioCheckbox-"+J,"data-list-index":s+"-"+w,id:k,value:String(u),disabled:R||x,checked:E,onFocus:r=>{x||a=="radio"&&(n.rawValue.length||e(d=>p(o({},d),{rawValue:[u],eventType:"update",eventID:z(12),isInspected:!1})))},onChange:()=>{ee()},onKeyDown:r=>{let{key:d,shiftKey:F}=r;if((a=="checkbox"||t.rootStates.isChecker)&&d!="Tab"){if(d.match(/Arrow/)){r.preventDefault();let le=m.isOneOf(d,"ArrowLeft","ArrowUp")?-1:1,g=w+le;g<0?g=v.length-1:g>=v.length&&(g=0),ne(`input[data-list-index="${s}-${g}"]`).focus()}}j&&B.SubmitForm(r,X)},tabIndex:A},"List-"+m.Stringify(u)),i(I,p(o({htmlTag:"label","data-disabled":R||x,htmlFor:k,className:P.join(" "),tabIndex:-1,display:"flex",verticalAlign:"center",flexWrap:!1},y),{children:te}),"ListTrigger-"+m.Stringify(u))]});return i(se,{flexSizing:"auto",style:l.style,freeCSS:o({},l.freeCSS),className:[U,b("CellBase"),b("HideInput_"+$),b("IconIndicator_"+!!c),b("Tone_"+C)].join(" "),children:G})},_Icon:t=>{let l=1.5;return t.iconSize=="small"?l=1.2:t.iconSize=="large"&&(l=2),i(ue.Normal,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",ssSphere:2,freeCSS:{transform:`scale(${l})`},onClick:n=>{n.preventDefault(),n.stopPropagation(),t.toggle()},children:t.children})},RadioIcon:t=>i(h._Icon,p(o({type:"radio"},t),{children:i(I,{flexCenter:!0,isRounded:!0,border:t.isChecked?"0.trans":"3.thick",borderColor:t.isChecked?t.iconColor:"3.thick",position:"relative",transition:"middle",freeCSS:{width:"50%",height:"50%"},children:i(I,{position:"absolute",transition:"middle",isRounded:!0,backgroundColor:t.iconColor,opacity:t.isChecked?"max":"trans",freeCSS:{width:"60%",height:"60%",transform:t.isChecked?"scale(1)":"scale(.4)"}})})})),CheckboxIcon:t=>i(h._Icon,p(o({type:"checkbox"},t),{children:i(I,{flexCenter:!0,boxShadow:t.isChecked?"0.remark":"none",border:t.isChecked?"0.trans":"3.thick",backgroundColor:t.isChecked?t.iconColor:"trans",position:"relative",transition:"middle",fontColor:"white",freeCSS:{borderRadius:"25%",padding:"4%",width:"50%",height:"50%"},children:i(re.Check,{transition:"middle",opacity:t.isChecked?"max":"trans",freeCSS:{zIndex:8,width:"100%",height:"100%",transform:t.isChecked?"scale(1)":"scale(.5)"}})})}))},D=t=>{t=t||"checkbox";const l=e=>(e=p(o({gap:1,icon:!0,iconSize:"regular",iconType:t=="radio"?"radio":"checkbox",iconPosition:"left",iconColor:"theme"},e),{type:t,cellStyles:o({gap:"1/6",position:"relative",borderRadius:"2.tone.secondary",transition:"middle"},e.cellStyles)}),e.CustomIcon||(e.iconType=="radio"?e.CustomIcon=h.RadioIcon:e.iconType=="checkbox"&&(e.CustomIcon=h.CheckboxIcon)),e.iconSize=="small"?e.cellStyles.gap=0:e.iconSize=="large"&&(e.cellStyles.gap="1/2"),e.tone=="normal"?(e.cellStyles=o({padding:["1/4",1],border:"1.thin",backgroundColor:"layer.1"},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme",boxShadow:"1.normal"},e.cellCheckedStyles)):e.tone=="border"?(e.cellStyles=o({border:"1.thin",backgroundColor:"layer.1",padding:["1/2",1,"1/2","1/2"]},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme"},e.cellCheckedStyles)):e.tone=="cloud"&&(e.cellStyles=o({border:"1.thin",backgroundColor:"layer.2",padding:["1/2",1,"1/2","1/2"]},e.cellStyles),e.cellCheckedStyles=o({backgroundColor:"cloud",fontColor:"theme"},e.cellCheckedStyles)),e=ae(e),e.options=h.InitOptions(e.options),i(de,{componentId:e.componentId,children:h.OptionalListWrapper,states:e}));return Object.assign(l,{Normal:e=>i(l,o({type:t,tone:"normal",icon:!1},e)),Border:e=>i(l,o({type:t,tone:"border"},e)),Cloud:e=>i(l,o({type:t,tone:"cloud"},e)),Vivid:e=>i(l,o({type:t,tone:"normal",icon:!1,cellCheckedStyles:{backgroundColor:"theme",fontColor:"white"}},e)),Simple:e=>i(l,o({type:t,tone:"plain",icon:!1,cellCheckedStyles:{fontColor:"theme"}},e))})},Ce=D("radio"),he=D("checkbox"),Se=D();export{he as Checkbox,Se as List,Ce as Radio};

package/dist/fn/Input/Parts.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StyleTags, ReactElement } from '../../@declares';
+import { StyleProps, ReactElement } from '../../@declares';
 import { Span } from '../../atoms';
 import { InputTypes } from '.';
 export declare namespace Parts {
@@ -10,7 +10,7 @@ export declare namespace Parts {
     type RightIndicator = React.FC<Input>;
     type LeftIcon = React.FC<Input>;
     type RightIcon = React.FC<Input>;
-    type Input = StyleTags.States & {
+    type Input = StyleProps.States & {
         tone?: InputTypes.BoxTone;
         className?: string;
         children: ReactElement;

package/dist/fn/Input/Parts.js

@@ -1 +1 @@
-import{b as e,c as n,d as p}from"../../chunk-C5N2D3ZX.js";import{jsx as i}from"react/jsx-runtime";import{Box as s,Span as u}from"../../atoms";const c=t=>{if(t||(t="border"),t=="plain")return{};let r={flexSizing:"none",padding:1,borderRadius:"2.tone.secondary",backgroundColor:"cloud"};return t=="border"?r=n(e({},r),{border:!0}):t=="cloud"?r=n(e({},r),{border:"1.thin"}):t=="bottomBorder"&&(r=n(e({},r),{borderRadius:0,borderBottom:!0})),r},d={position:"absolute",flexCenter:!0,fontColor:"theme",fontSize:"1.mini",backgroundColor:"inherit",top:"50%",freeCSS:{pointerEvents:"none",transform:"translateY(-50%)"}},I=t=>i(u,e({children:"\u5FC5\u9808",fontColor:"white",fontSize:"0.xs",padding:["1/4","1/3"],backgroundColor:"nega",borderRadius:"3.tone.tertiary"},t)),b=t=>i(u,e({children:"*",fontColor:"nega",padding:["1/4","1/3"],borderRadius:"3.tone.tertiary"},t)),h=t=>i(u,e({children:"\u7701\u7565\u53EF",fontColor:"white",fontSize:"0.xs",padding:["1/4","1/3"],borderRadius:"3.tone.tertiary",backgroundColor:"layer.6"},t)),x=t=>{let o=t,{tone:r}=o,a=p(o,["tone"]);return i(s,e(n(e({},c(r)),{borderTopRightRadius:"2/3",borderBottomRightRadius:"2/3"}),a))},m=t=>{let o=t,{tone:r}=o,a=p(o,["tone"]);return i(s,e(n(e({},c(r)),{borderTopLeftRadius:"2/3",borderBottomLeftRadius:"2/3"}),a))},y=t=>{let o=t,{tone:r="border"}=o,a=p(o,["tone"]);return i(s,n(e(n(e({},d),{right:1}),a),{freeCSS:e(e({},d.freeCSS),a.freeCSS)}))},F=t=>{let o=t,{tone:r="border"}=o,a=p(o,["tone"]);return i(s,n(e(n(e({},d),{left:1}),a),{freeCSS:e(e({},d.freeCSS),a.freeCSS)}))};export{F as LeftIcon,x as LeftIndicator,h as OmitSign,b as RequiredShortSign,I as RequiredSign,y as RightIcon,m as RightIndicator};
+import{b as e,c as n,d as p}from"../../chunk-C5N2D3ZX.js";import{jsx as i}from"react/jsx-runtime";import{Box as s,Span as u}from"../../atoms";const c=t=>{if(t||(t="border"),t=="plain")return{};let r={flexSizing:"none",padding:1,borderRadius:"2.tone.secondary",backgroundColor:"cloud"};return t=="border"?r=n(e({},r),{border:!0}):t=="cloud"?r=n(e({},r),{border:"1.thin"}):t=="bottomBorder"&&(r=n(e({},r),{borderRadius:0,borderBottom:!0})),r},d={position:"absolute",flexCenter:!0,fontColor:"theme",fontSize:"1.mini",backgroundColor:"inherit",top:"50%",freeCSS:{pointerEvents:"none",transform:"translateY(-50%)"}},g=t=>i(u,e({children:"\u5FC5\u9808",fontColor:"white",fontSize:"0.xs",padding:["1/4","1/3"],backgroundColor:"nega",borderRadius:"3.tone.tertiary"},t)),b=t=>i(u,e({children:"*",fontColor:"nega",padding:["1/4","1/3"],borderRadius:"3.tone.tertiary"},t)),h=t=>i(u,e({children:"\u7701\u7565\u53EF",fontColor:"white",fontSize:"0.xs",padding:["1/4","1/3"],borderRadius:"3.tone.tertiary",backgroundColor:"layer.6"},t)),x=t=>{let o=t,{tone:r}=o,a=p(o,["tone"]);return i(s,e(n(e({},c(r)),{borderTopRightRadius:"2/3",borderBottomRightRadius:"2/3"}),a))},m=t=>{let o=t,{tone:r}=o,a=p(o,["tone"]);return i(s,e(n(e({},c(r)),{borderTopLeftRadius:"2/3",borderBottomLeftRadius:"2/3"}),a))},y=t=>{let o=t,{tone:r="border"}=o,a=p(o,["tone"]);return i(s,n(e(n(e({},d),{right:1}),a),{freeCSS:e(e({},d.freeCSS),a.freeCSS)}))},F=t=>{let o=t,{tone:r="border"}=o,a=p(o,["tone"]);return i(s,n(e(n(e({},d),{left:1}),a),{freeCSS:e(e({},d.freeCSS),a.freeCSS)}))};export{F as LeftIcon,x as LeftIndicator,h as OmitSign,b as RequiredShortSign,g as RequiredSign,y as RightIcon,m as RightIndicator};

package/dist/fn/Input/Plain.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { StyleTags } from '../../@declares';
+import { StyleProps } from '../../@declares';
 declare namespace _Plain {
-    type Input = StyleTags.States & React.InputHTMLAttributes<HTMLInputElement>;
+    type Input = StyleProps.States & React.InputHTMLAttributes<HTMLInputElement>;
 }
 declare const _Plain: (p: _Plain.Input) => import("react/jsx-runtime").JSX.Element;
 export { _Plain, _Plain as default };

package/dist/fn/Input/Plain.js

@@ -1 +1 @@
-import{b as t}from"../../chunk-C5N2D3ZX.js";import{jsx as n}from"react/jsx-runtime";import{Box as p}from"../../atoms";const a=e=>n(p,t({htmlTag:"input"},e));export{a as _Plain,a as default};
+import{b as t}from"../../chunk-C5N2D3ZX.js";import{jsx as o}from"react/jsx-runtime";import{Box as n}from"../../atoms";const p=e=>o(n,t({htmlTag:"input"},e));export{p as _Plain,p as default};

package/dist/fn/Input/Segmented.js

@@ -1 +1 @@
-import{b as e,c as n,d as y}from"../../chunk-C5N2D3ZX.js";import{jsx as r}from"react/jsx-runtime";import{UUID as x}from"jmini";import{useState as a}from"react";import{Radio as w}from"./List";import{InputSegmentedClasses as c}from"../../@styles/componentClasses";const E=t=>{let i=t,{__sys_segmented_type:o,tone:B,value:d,options:S,onUpdateValue:h,onUpdateValidValue:u,onUserAction:g,enableFormSubmit:M,checkValidationAtFirst:U,cellStyles:_,cellClassName:b,cellCheckedClassName:f,cellCheckedStyles:k,freeCSS:I,wrapStyles:J}=i,T=y(i,["__sys_segmented_type","tone","value","options","onUpdateValue","onUpdateValidValue","onUserAction","enableFormSubmit","checkValidationAtFirst","cellStyles","cellClassName","cellCheckedClassName","cellCheckedStyles","freeCSS","wrapStyles"]),[v]=a(x()),[p,V]=a(d),[R,m]=a(p);return p!=d&&(V(d),m(d)),r(w,n(e({options:S,value:R,componentId:v,icon:!1,flexWrap:!1,borderRadius:"2.tone.secondary",position:"relative"},T),{freeCSS:e({whiteSpace:"nowrap"},I),cellStyles:e({flexCenter:!0,ssEffectsOnActive:"push"},_),cellCheckedStyles:e({},k),cellClassName:[b,c("Label"),c("Tone_"+o.replace(/\./ig,""))].join(" "),cellCheckedClassName:[f,c("Checked")].join(" "),tone:"custom",onUpdateValue:h,onUpdateValidValue:(...C)=>{u&&u(...C),o=="bottomline"&&m(C[0])},onUserAction:g}))},s=t=>{let{__sys_segmented_type:o}=t;return o=o||"plain",o=="plain"&&(t=n(e({padding:"1/3",gap:"1/3",ssCardBox:!0},t),{cellStyles:e({padding:["1/2","3/4"],borderRadius:"inherit",position:"relative"},t.cellStyles),cellCheckedStyles:e({backgroundColor:"theme",boxShadow:"1.normal",fontColor:"white"},t.cellCheckedStyles)})),r(E,e({__sys_segmented_type:"plain"},t))},l=s;l.Cloud=t=>{let o=n(e({__sys_segmented_type:"cloud",padding:"1/3",gap:"1/3",backgroundColor:"cloud"},t),{cellStyles:e({padding:"3/4",borderRadius:"inherit",position:"relative"},t.cellStyles),cellCheckedStyles:e({boxShadow:"1.normal",backgroundColor:"theme",fontColor:"white"},t.cellCheckedStyles)});return r(s,e({},o))},l.CloudTheme=t=>{let o=e({backgroundColor:"theme.opa.few",fontColor:"theme",__sys_segmented_type:"cloud.theme"},t);return r(l.Cloud,e({},o))},l.CloudMono=t=>{let o=n(e({fontColor:"3.blur",__sys_segmented_type:"cloud.mono"},t),{cellCheckedStyles:e({backgroundColor:"layer.1",fontColor:"1.clear"},t.cellCheckedStyles)});return r(l.Cloud,e({},o))},l.Border=t=>{let o=n(e({backgroundColor:"layer.1",border:"2.normal",overflow:"hidden",gap:0,fontColor:"3.blur",ssLastChildLossBorder:"right",boxShadow:"0.min",__sys_segmented_type:"border"},t),{cellStyles:e({padding:["3/4",1],borderRadius:0,borderRight:"2.normal"},t.cellStyles),cellCheckedStyles:e({backgroundColor:"theme.opa.few",fontColor:"theme"},t.cellCheckedStyles)});return r(s,e({},o))},l.BorderVivid=t=>{let o=n(e({border:!0,borderColor:"theme",__sys_segmented_type:"border.vivid"},t),{cellStyles:e({borderRight:!0,borderColor:"theme"},t.cellStyles),cellCheckedStyles:e({backgroundColor:"theme",fontColor:"white"},t.cellCheckedStyles)});return r(l.Border,e({},o))},l.Bottomline=t=>{let o=n(e({__sys_segmented_type:"bottomline",gap:0,fontColor:"3.blur"},t),{cellStyles:e({ssEffectsOnActive:"ripple.theme",borderRadius:0,padding:1},t.cellStyles),cellCheckedStyles:e({fontColor:"theme"},t.cellCheckedStyles)});return r(s,e({},o))};export{l as Segmented,l as default};
+import{b as e,c as l,d as y}from"../../chunk-C5N2D3ZX.js";import{jsx as n}from"react/jsx-runtime";import{UUID as x}from"jmini";import{useState as a}from"react";import{Radio as w}from"./List";import{InputSegmentedClasses as c}from"../../@styles/componentClasses";const E=t=>{let i=t,{__sys_segmented_type:o,tone:B,value:d,options:S,onUpdateValue:h,onUpdateValidValue:u,onUserAction:g,enableFormSubmit:M,checkValidationAtFirst:U,cellStyles:_,cellClassName:b,cellCheckedClassName:f,cellCheckedStyles:k,freeCSS:I,wrapStyles:J}=i,T=y(i,["__sys_segmented_type","tone","value","options","onUpdateValue","onUpdateValidValue","onUserAction","enableFormSubmit","checkValidationAtFirst","cellStyles","cellClassName","cellCheckedClassName","cellCheckedStyles","freeCSS","wrapStyles"]),[v]=a(x()),[p,V]=a(d),[R,m]=a(p);return p!=d&&(V(d),m(d)),n(w,l(e({options:S,value:R,componentId:v,icon:!1,flexWrap:!1,borderRadius:"2.tone.secondary",position:"relative"},T),{freeCSS:e({whiteSpace:"nowrap"},I),cellStyles:e({flexCenter:!0,ssEffectsOnActive:"push"},_),cellCheckedStyles:e({},k),cellClassName:[b,c("Label"),c("Tone_"+o.replace(/\./ig,""))].join(" "),cellCheckedClassName:[f,c("Checked")].join(" "),tone:"custom",onUpdateValue:h,onUpdateValidValue:(...C)=>{u&&u(...C),o=="bottomline"&&m(C[0])},onUserAction:g}))},s=t=>{let{__sys_segmented_type:o}=t;return o=o||"plain",o=="plain"&&(t=l(e({padding:"1/3",gap:"1/3",ssCardBox:!0},t),{cellStyles:e({padding:["1/2","3/4"],borderRadius:"inherit",position:"relative"},t.cellStyles),cellCheckedStyles:e({backgroundColor:"theme",boxShadow:"1.normal",fontColor:"white"},t.cellCheckedStyles)})),n(E,e({__sys_segmented_type:"plain"},t))},r=Object.assign(s,{Cloud:t=>{let o=l(e({__sys_segmented_type:"cloud",padding:"1/3",gap:"1/3",backgroundColor:"cloud"},t),{cellStyles:e({padding:"3/4",borderRadius:"inherit",position:"relative"},t.cellStyles),cellCheckedStyles:e({boxShadow:"1.normal",backgroundColor:"theme",fontColor:"white"},t.cellCheckedStyles)});return n(s,e({},o))},CloudTheme:t=>{let o=e({backgroundColor:"theme.opa.few",fontColor:"theme",__sys_segmented_type:"cloud.theme"},t);return n(r.Cloud,e({},o))},CloudMono:t=>{let o=l(e({fontColor:"3.blur",__sys_segmented_type:"cloud.mono"},t),{cellCheckedStyles:e({backgroundColor:"layer.1",fontColor:"1.clear"},t.cellCheckedStyles)});return n(r.Cloud,e({},o))},Border:t=>{let o=l(e({backgroundColor:"layer.1",border:"2.normal",overflow:"hidden",gap:0,fontColor:"3.blur",ssLastChildLossBorder:"right",boxShadow:"0.min",__sys_segmented_type:"border"},t),{cellStyles:e({padding:["3/4",1],borderRadius:0,borderRight:"2.normal"},t.cellStyles),cellCheckedStyles:e({backgroundColor:"theme.opa.few",fontColor:"theme"},t.cellCheckedStyles)});return n(s,e({},o))},BorderVivid:t=>{let o=l(e({border:!0,borderColor:"theme",__sys_segmented_type:"border.vivid"},t),{cellStyles:e({borderRight:!0,borderColor:"theme"},t.cellStyles),cellCheckedStyles:e({backgroundColor:"theme",fontColor:"white"},t.cellCheckedStyles)});return n(r.Border,e({},o))},Bottomline:t=>{let o=l(e({__sys_segmented_type:"bottomline",gap:0,fontColor:"3.blur"},t),{cellStyles:e({ssEffectsOnActive:"ripple.theme",borderRadius:0,padding:1},t.cellStyles),cellCheckedStyles:e({fontColor:"theme"},t.cellCheckedStyles)});return n(s,e({},o))}});export{r as Segmented,r as default};

package/dist/fn/Input/Select.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StyleTags, ReactElement } from '../../@declares';
+import { StyleProps, ReactElement } from '../../@declares';
 import { Records } from 'jmini';
 import { InputTypes } from '.';
 declare namespace Select {
@@ -18,9 +18,9 @@ declare namespace Select {
         leftIcon?: ReactElement | false;
         rightIcon?: ReactElement | false;
         emptySelect?: boolean;
-        selectedStyles?: StyleTags.PropsNFreeCSS;
-        selectorStyles?: StyleTags.PropsNFreeCSS;
-        pickerStyles?: StyleTags.PropsNFreeCSS;
+        selectedStyles?: StyleProps.PropsNFreeCSS;
+        selectorStyles?: StyleProps.PropsNFreeCSS;
+        pickerStyles?: StyleProps.PropsNFreeCSS;
         pickerPosition?: 1 | 2 | 3 | 4;
         nativePicker?: boolean;
     };