amotify 0.2.278 → 0.2.280

package/demo/esbuild/designBook.tsx

@@ -6,8 +6,7 @@ import React,{
 } from 'react'
 
 import {
-  DarkMode,
-  ThemeColor,
+  Themecolor,
   ReactElement,
   Config,
   LaunchReactApp,
@@ -42,7 +41,7 @@ import {
   Effect,
   Cropper,
   RootViewController,
-  StyleTags,
+  StyleProps,
   Roundness,
   Card
 } from 'amotify'
@@ -435,7 +434,7 @@ alt='noImage'
                         className='test'
                         src={ Logo.Images.defaultIcon( 'user' ) }
                         alt='noImage'
-                        freeCSS={ {
+                        xcss={ {
                           maxHeight: 12 * 8,
                           maxWidth: 12 * 8
                         } }
@@ -662,7 +661,7 @@ const Effections = {
               gravityPoint: 10,
               closeAtParentBlur: false,
               padding: 0,
-              freeCSS: {
+              xcss: {
                 minWidth: 12 * 16
               },
               content: <Column
@@ -1310,7 +1309,7 @@ const Inputs = () => {
               label='Input.TextField.Postal'
               name='textfield.postal'
               override="force"
-              rightIcon={ <Input.RightIcon freeCSS={ { pointerEvents: 'all' } }>
+              rightIcon={ <Input.RightIcon xcss={ { pointerEvents: 'all' } }>
                 <Button.Sub.S
                   borderRadius={ '3.tone.tertiary' }
                   ssSphere={ 2 }
@@ -1356,7 +1355,7 @@ text5`}
             multiline
             autoHeight
             value={ '' }
-            freeCSS={ {
+            xcss={ {
               minHeight: 12 * 6
             } }
             onUpdateValidValue={ ( args ) => {
@@ -1373,7 +1372,7 @@ text5`}
           <Input.TextField
             label='Input.LeftIcon'
             paddingLeft={ 6 }
-            leftIcon={ <Input.LeftIcon ssSquare={ void 0 } freeCSS={ { pointerEvents: 'all' } }>
+            leftIcon={ <Input.LeftIcon ssSquare={ void 0 } xcss={ { pointerEvents: 'all' } }>
               <Button.Sub.S padding={ [ '1/3','1/2' ] }>
                 Left Icon
               </Button.Sub.S>
@@ -1382,7 +1381,7 @@ text5`}
           <Input.TextField
             label='Input.RightIcon'
             paddingRight={ 6 }
-            rightIcon={ <Input.RightIcon ssSquare={ void 0 } freeCSS={ { pointerEvents: 'all' } }>
+            rightIcon={ <Input.RightIcon ssSquare={ void 0 } xcss={ { pointerEvents: 'all' } }>
               <Button.Sub.S padding={ [ '1/3','1/2' ] }>
                 Right Icon
               </Button.Sub.S>
@@ -2270,7 +2269,6 @@ const Tables = {
       <Column gap={ 3 }>
         <Tables.Normal />
         <Tables.Data />
-        <Tables.Drag />
         <Tables.Spread />
       </Column>
     </>
@@ -2300,13 +2298,13 @@ const Tables = {
             // styles: {
             //   backgroundColor: 'nega'
             // },
-            // freeCSS: {
+            // xcss: {
             //   opacity: .3
             // }
           },
         ] }
         cellStylesCallback={ ( args ) => {
-          let styles: StyleTags.Properties = {}
+          let styles: StyleProps.Properties = {}
 
           if ( args.isHeader ) {
             styles = {
@@ -2324,57 +2322,6 @@ const Tables = {
       />
     </>
   },
-  Drag: () => {
-    let DragData: Table.Drag.BodyRow[] = []
-    for ( var i = 0; i < 4; i++ ) {
-      let Row: Table.Drag.BodyRow = [
-        { children: 'head_' + i },
-        { children: 'data_' + i },
-        {
-          children: 'data_' + i,
-          // styles: { backgroundColor: 'nega' },
-          // freeCSS: { opacity: .3 }
-        },
-      ]
-      Row.rowID = 'rowID-' + i
-      DragData.push( Row )
-    }
-
-    return <>
-      <Box fontSize='5.subTitle'>
-        Table.Drag
-      </Box>
-      <Table.Drag
-        colLength={ 3 }
-        head={ [
-          { children: 'head1' },
-          { children: 'head2' },
-          {
-            children: 'head3',
-            // styles: { backgroundColor: 'nega' },
-            // freeCSS: { opacity: .3 }
-          },
-        ] }
-
-        cellStyles={ {
-          // backgroundColor: 'posi',
-          // freeCSS: { opacity: .3 }
-        } }
-        cellStylesCallback={ () => {
-          return {
-            // backgroundColor: 'warn',
-            // freeCSS: { opacity: .3 }
-          }
-        } }
-
-        rows={ DragData }
-        ssCardBox
-        onOrderChanged={ ( args ) => {
-          console.log( args )
-        } }
-      />
-    </>
-  },
   Data: () => {
     let [ val_keyword,set_keyword ] = useState( '' )
     let DataData: Table.Data.BodyRow[] = []
@@ -2401,7 +2348,7 @@ const Tables = {
           children: Data3,
           data: Data3,
           // styles: { backgroundColor: 'greenTea' },
-          // freeCSS: { opacity: .3 }
+          // xcss: { opacity: .3 }
         }
       ]
       DataData.push( Row )
@@ -2501,7 +2448,7 @@ const Tables = {
           {
             data: 'head3',
             // styles: { backgroundColor: 'angel' },
-            // freeCSS: { opacity: .3 }
+            // xcss: { opacity: .3 }
           }
         ] }
         rows={ DataData }
@@ -2581,7 +2528,7 @@ const Cropping = () => {
           src={ val_ImageUrl1 }
           alt=''
           showExpand
-          freeCSS={ {
+          xcss={ {
             maxWidth: 12 * 12
           } }
         /> }
@@ -2608,7 +2555,7 @@ const Cropping = () => {
           margin={ [ 3,'auto' ] }
           // padding={ [ 0,4 ] }
           // margin={ 'auto' }
-          freeCSS={ {
+          xcss={ {
             // maxWidth: 12 * 30
             width: 12 * 10
           } }
@@ -2639,7 +2586,7 @@ const Cropping = () => {
 }
 
 const UserConfig = () => {
-  let [ val_theme,set_theme ] = useState<ThemeColor>( Config.get().themeColor )
+  let [ val_theme,set_theme ] = useState<Themecolor>( Config.get().themeColor )
   useEffect( () => {
     $$.scope( () => {
       if ( val_theme === Config.get().themeColor ) return
@@ -2653,7 +2600,7 @@ const UserConfig = () => {
     gap={ 2 }
     padding={ [ '1/2',2 ] }
     overflow={ 'auto' }
-    freeCSS={ {
+    xcss={ {
       whiteSpace: 'nowrap'
     } }
   >
@@ -2719,18 +2666,18 @@ const UserConfig = () => {
             isActive={ isSelected }
             isActiveStyles={ {
               boxShadow: '2.remark',
-              backgroundColor: key as ThemeColor,
+              backgroundColor: key as Themecolor,
               fontColor: 'white'
             } }
             onClick={ () => {
-              set_theme( key as ThemeColor )
+              set_theme( key as Themecolor )
             } }
           >
             <Column gap={ '1/2' } textAlign='center'>
               <Box
                 position={ 'relative' }
                 margin={ 'auto' }
-                backgroundColor={ key as ThemeColor }
+                backgroundColor={ key as Themecolor }
                 ssSquare={ 2 }
                 borderRadius={ '1.tone.primary' }
               >
@@ -2741,7 +2688,7 @@ const UserConfig = () => {
                   borderWidth={ 2 }
                   transition={ 'short' }
                   borderRadius={ '1.tone.primary' }
-                  freeCSS={ {
+                  xcss={ {
                     transform: 'scale(1.25)',
                   } }
                 />
@@ -2749,7 +2696,7 @@ const UserConfig = () => {
               <Literal.Supplement
                 display='none'
                 ssTextEllipsis
-                freeCSS={ {
+                xcss={ {
                   lineHeight: 1.25
                 } }
               >
@@ -2827,9 +2774,7 @@ let DesignBook = () => {
       // backgroundColor={ 'layer.1' }
       // backgroundColor='gray'
       // position={ 'relative' }
-      freeCSS={ {
-        zIndex: 1
-      } }
+      ssZIndex={ 1 }
     >
       <TabBar
         borderBottom
@@ -2861,10 +2806,7 @@ let DesignBook = () => {
       />
       <Box
         flexSizing={ 0 }
-        position={ 'relative' }
-        freeCSS={ {
-          zIndex: 1
-        } }
+        ssZIndex={ 1 }
       >
         <PageViewController
           viewIndex={ val_tabIndex }