@sk-web-gui/core 0.1.74 → 0.1.76

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "license": "MIT",
   "main": "src/index.js",
+  "module": "dist/esm/index.js",
   "files": [
     "src/",
     "dist/"
@@ -15,21 +16,28 @@
     "url": "git+https://github.com/vechai/sk-web-gui.git"
   },
   "scripts": {
-    "build": "node scripts/build.js",
-    "version": "yarn build"
+    "build2": "node scripts/build.js",
+    "version": "yarn build",
+    "build": "concurrently yarn:build:*",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .js -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .js -d dist/cjs --source-maps"
   },
   "bugs": {
     "url": "https://github.com/vechai/sk-web-gui/issues"
   },
   "peerDependencies": {
-    "tailwindcss": ">=2.1.0"
+    "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "autoprefixer": "^10.2.6",
-    "clean-css": "^5.1.2",
-    "postcss": "^8.3.4",
-    "postcss-import": "^14.0.2",
-    "tailwindcss": "^2.2.4"
+    "autoprefixer": "^10.4.14",
+    "clean-css": "^5.3.2",
+    "postcss": "^8.4.23",
+    "postcss-import": "^15.1.0",
+    "tailwindcss": "^3.2.7"
   },
-  "gitHead": "043082a334de566c85d49b320dacf5f87ba021cd"
+  "dependencies": {
+    "@sk-web-gui/theme": "0.1.12",
+    "mini-svg-data-uri": "^1.4.4"
+  },
+  "gitHead": "31d25c7a23df03a321f83ac5bf489e23a97c0a86"
 }

package/src/base.js

@@ -0,0 +1,47 @@
+module.exports = {
+  html: {
+    '@apply text-foreground antialiased bg-base': {},
+    fontSize: '62.5%',
+    lineHeight: '1.5',
+    textRendering: 'optimizeLegibility',
+    textSizeAdjust: '100%',
+    touchAction: 'manipulation',
+  },
+  body: {
+    '@apply text-base leading-base': {},
+    position: 'relative',
+    minHeight: '100%',
+    fontFeatureSettings: "'kern'",
+  },
+  'h1,h2,h3,h4,h5,h6': {
+    '@apply font-bold': {},
+  },
+  small: {
+    fontSize: '1.4rem',
+  },
+  h1: { '@apply text-3xl leading-3xl': {} },
+  h2: { '@apply text-2xl leading-2xl': {} },
+  h3: { '@apply text-xl leading-xl': {} },
+  h4: { '@apply text-lg leading-lg': {} },
+  h5: { '@apply text-base leading-base': {} },
+  h6: { '@apply text-sm leading-sm': {} },
+  p: { '@apply my-4': {} },
+
+  '.text-content': {
+    '@apply max-w-[80rem]': {},
+
+    h1: {
+      '@apply mb-md': {},
+
+      '+ p': {
+        '@apply mb-[40px] mt-0': {},
+      },
+    },
+    h2: { '@apply mt-lg': {} },
+    h3: { '@apply mt-lg': {} },
+    h4: { '@apply mt-lg': {} },
+    h5: { '@apply mt-lg': {} },
+    h6: { '@apply mt-lg': {} },
+    p: { '@apply mt-sm leading-[1.5]': {} },
+  },
+};

package/src/components/badge.js

@@ -27,7 +27,6 @@ function badgeSolid(colors) {
       "&[data-color='neutral']": {
         '@apply bg-neutral-400': {},
       },
-
     },
   };
 }
@@ -44,7 +43,6 @@ function badgeOutline(colors) {
           [`&[data-color="${color}"]`]: {
             [`@apply border-current`]: {},
             [`@apply text-${color}`]: {},
-
           },
         }),
         {}
@@ -59,7 +57,6 @@ function badgeOutline(colors) {
         },
       },
 
-      
       "&[data-color='primary']": {
         '@apply border-primary': {},
         '@apply text-primary': {},
@@ -74,14 +71,11 @@ function badgeOutline(colors) {
       },
       "&[data-color='neutral']": {
         '@apply border-neutral-300': {},
-        '@apply border-neutral-300': {},
-
       },
     },
   };
 }
 
-
 module.exports = badge = (colors) => ({
   '.badge': {
     '@apply relative': {},
@@ -114,7 +108,7 @@ module.exports = badge = (colors) => ({
         minHeight: '6px',
         maxHeight: '6px',
         minWidth: '6px',
-      }
+      },
     },
 
     '&-md': {
@@ -128,8 +122,7 @@ module.exports = badge = (colors) => ({
         minHeight: '20px',
         maxHeight: '20px',
         minWidth: '20px',
-      }
-
+      },
     },
 
     '&-lg': {
@@ -143,77 +136,73 @@ module.exports = badge = (colors) => ({
         minHeight: '24px',
         maxHeight: '24px',
         minWidth: '24px',
-      }
-
+      },
     },
 
     '&-standard-sm': {
-      '@apply right-[-4px] self-center' : {},
+      '@apply right-[-4px] self-center': {},
       '&.noborder': {
         '@apply right-[-5px]': {},
-      }
+      },
     },
     '&-standard-md': {
       '@apply right-[-4px] self-center': {},
       '&.noborder': {
         '@apply right-[-5px]': {},
-      }
+      },
     },
     '&-standard-lg': {
       '@apply right-[-4px] self-center': {},
       '&.noborder': {
         '@apply right-[-5px]': {},
-      }
+      },
     },
 
     '&-super-sm': {
       '@apply right-[-2px] top-[-5px]': {},
       '&.noborder': {
         '@apply right-[-3px]': {},
-      }
+      },
     },
     '&-super-md': {
       '@apply right-[-3px] top-[-8px]': {},
       '&.noborder': {
         '@apply right-[-4px]': {},
-      }
+      },
     },
     '&-super-lg': {
       '@apply right-[-4px] top-[-8px]': {},
       '&.noborder': {
         '@apply right-[-5px]': {},
-      }
+      },
     },
 
     '&-superoverlap-sm': {
       '@apply right-[3px] top-[-5px]': {},
       '&.noborder': {
         '@apply right-[2px]': {},
-      }
+      },
     },
     '&-superoverlap-md': {
       '@apply right-[8px] top-[-6px]': {},
       '&.noborder': {
         '@apply right-[7px]': {},
-      }
+      },
     },
     '&-superoverlap-lg': {
       '@apply right-[8px] top-[-8px]': {},
       '&.noborder': {
         '@apply right-[7px]': {},
-      }
+      },
     },
 
-
     '&-fit-content': {
       '@apply p-0': {},
       fontSize: 'inherit',
     },
 
-
     // variants
     ...badgeSolid(colors),
     ...badgeOutline(colors),
-
   },
 });

package/src/components/button.js

@@ -9,6 +9,8 @@ function buttonSolid(colors) {
       /* keyboard active */
       '&.active': {
         '@apply text-white bg-hover border-primary-active': {},
+        /* dark */
+        '@apply dark:border-hover dark:bg-neutral-600': {},
       },
       /* focus */
       '@apply focus-visible:z-base': {},
@@ -22,10 +24,6 @@ function buttonSolid(colors) {
       '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
       /* dark hover */
       '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},
-      /* dark keyboard active */
-      '&.active': {
-        '@apply dark:border-hover dark:bg-neutral-600': {},
-      },
       /* dark focus */
       '@apply dark:focus-visible:border-primary-500': {},
       /* dark active */
@@ -97,6 +95,8 @@ function buttonOutline(colors) {
       /* keyboard active */
       '&.active': {
         '@apply text-white bg-primary-active border-primary-active': {},
+        /* dark keyboard active */
+        '@apply dark:border-neutral-300 dark:bg-neutral-700': {},
       },
       /* focus */
       '@apply focus-visible:z-base': {},
@@ -109,10 +109,6 @@ function buttonOutline(colors) {
       '@apply dark:text-neutral-100 dark:bg-transparent': {},
       /* dark hover */
       '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
-      /* dark keyboard active */
-      '&.active': {
-        '@apply dark:border-neutral-300 dark:bg-neutral-700': {},
-      },
       /* dark focus */
       '@apply dark:focus-visible:border-primary-500': {},
       /* dark active */
@@ -129,6 +125,10 @@ function buttonOutline(colors) {
             /* keyboard active */
             '&.active': {
               [`@apply text-white bg-${color}-active border-${color}-active`]: {},
+
+              /* dark keyboard active */
+              [`@apply dark:bg-${color}-200`]: {},
+              [`@apply dark:bg-opacity-15`]: {},
             },
             /* focus */
             [`@apply focus-visible:border-${color}-500`]: {},
@@ -142,11 +142,6 @@ function buttonOutline(colors) {
             /* dark hover */
             [`@apply dark:hover:bg-${color}-200`]: {},
             [`@apply dark:hover:bg-opacity-15`]: {},
-            /* dark keyboard active */
-            '&.active': {
-              [`@apply dark:bg-${color}-200`]: {},
-              [`@apply dark:bg-opacity-15`]: {},
-            },
             /* dark focus */
             [`@apply dark:focus-visible:border-${color}-500`]: {},
             [`@apply dark:focus-visible:ring-${color}-500`]: {},
@@ -335,35 +330,6 @@ module.exports = Button = (colors) => ({
       fontSize: 'inherit',
     },
 
-    '&[data-icon=true]': {
-      '@apply p-0': {},
-      "&[data-rounded='true']": {
-        '@apply rounded-full': {},
-      },
-      '&.btn-sm': {
-        minWidth: '4rem',
-        maxWidth: '4rem',
-      },
-
-      '&.btn-md': {
-        minWidth: '4.4rem',
-        maxWidth: '4.4rem',
-      },
-
-      '&.btn-lg': {
-        minWidth: '4.8rem',
-        maxWidth: '4.8rem',
-      },
-      '.btn-has-icon': {
-        '&-left .MuiSvgIcon-root': {
-          '@apply mr-0': {},
-        },
-        '&-right .MuiSvgIcon-root': {
-          '@apply ml-0': {},
-        },
-      },
-    },
-
     // State
 
     '&-disabled': {
@@ -391,4 +357,32 @@ module.exports = Button = (colors) => ({
       '@apply ml-sm': {},
     },
   },
+  '[data-icon=true]': {
+    '@apply p-0': {},
+    "&[data-rounded='true']": {
+      '@apply rounded-full': {},
+    },
+    '&.btn-sm': {
+      minWidth: '4rem',
+      maxWidth: '4rem',
+    },
+
+    '&.btn-md': {
+      minWidth: '4.4rem',
+      maxWidth: '4.4rem',
+    },
+
+    '&.btn-lg': {
+      minWidth: '4.8rem',
+      maxWidth: '4.8rem',
+    },
+    '.btn-has-icon': {
+      '&-left .MuiSvgIcon-root': {
+        '@apply mr-0': {},
+      },
+      '&-right .MuiSvgIcon-root': {
+        '@apply ml-0': {},
+      },
+    },
+  },
 });

package/src/components/calendar.js

@@ -17,10 +17,6 @@ module.exports = Calendar = () => ({
     '@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':
       {},
   },
-  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root': {
-    '@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':
-      {},
-  },
   // Arrow spacer
   '.MuiCalendarPicker-root .MuiPickersArrowSwitcher-spacer': {
     '@apply w-11': {},

package/src/components/checkbox.js

@@ -1,6 +1,6 @@
 const svgToDataUri = require('mini-svg-data-uri');
 
-module.exports = Checkbox = (colors, theme) => ({
+module.exports = Checkbox = (colors) => ({
   '.form-checkbox': {
     //"@apply rounded shadow-sm": {},
     backgroundColor: 'inherit',

package/src/components/pagination.js

@@ -17,7 +17,9 @@ module.exports = Pagination = () => ({
     '&-list': {
       '@apply flex items-center': {},
     },
-
+    '.form-select-wrapper': {
+      '@apply w-fit': {},
+    },
     '&-pageLabel': {
       '@apply cursor-pointer m-sm box-content': {},
       width: '1.5em',
@@ -66,5 +68,26 @@ module.exports = Pagination = () => ({
     '&-ellipsis': {
       '@apply inline-block w-16 text-center': {},
     },
+    '&.fit-content': {
+      '@apply w-full max-w-full': {},
+      '.pagination-list': {
+        '@apply w-full flex justify-between': {},
+        '&-item': {
+          '@apply px-0  flex-shrink grow text-center': {},
+          '&.ellipsis': {
+            '@apply flex-shrink grow-0': {},
+          },
+          '&.prev-next': {
+            '@apply flex-shrink grow-0': {},
+          },
+          '.pagination-pageLabel': {
+            '@apply w-full max-w-[1.5em] mx-xs': {},
+          },
+        },
+      },
+      '.form-select-wrapper': {
+        '@apply w-full': {},
+      },
+    },
   },
 });

package/src/components/switch.js

@@ -56,11 +56,11 @@ module.exports = Switch = (colors) => ({
         [`&[data-color="${color}"]`]: {
           [`@apply text-${color}`]: {},
 
-          'input[type=checkbox]:focus + &': {
-            borderColor: `theme('colors.${color}.DEFAULT')`,
-            boxShadow: `0 0 5px theme('colors.${color}.DEFAULT')`,
-            borderWidth: '0.1rem',
-          },
+          // 'input[type=checkbox]:focus + &': {
+          //   borderColor: `${theme(`colors.${color}.DEFAULT`)}`,
+          //   boxShadow: `0 0 5px ${theme(`colors.${color}.DEFAULT`)}`,
+          //   borderWidth: '0.1rem',
+          // },
         },
       }),
       {}

package/src/components/tab-menu.js

@@ -1,45 +1,43 @@
 module.exports = TabMenu = () => ({
-    ".TabMenu": {
-        
-        ".tab-wrapper": {
-            display: "flex",
-            flexDirection: "row",
-            margin: "auto",
-            maxWidth: "140rem",
+  '.TabMenu': {
+    '.tab-wrapper': {
+      display: 'flex',
+      flexDirection: 'row',
+      margin: 'auto',
+      maxWidth: '140rem',
 
-            "li" : {
-                all: "unset",
-                display: "flex"
-            }
-        },
+      ul: {
+        all: 'unset',
+        display: 'flex',
+      },
+    },
 
-        ".TabItem": {
-            all: 'unset',
-            height: 65,
-            display: "flex",
-            padding: "0 1rem",
-            marginRight: "5rem",
-            alignItems: "center",
-            position: "relative",
-            cursor: "pointer",
+    '.TabItem': {
+      all: 'unset',
+      height: 65,
+      display: 'flex',
+      padding: '0 1rem',
+      marginRight: '5rem',
+      alignItems: 'center',
+      position: 'relative',
+      cursor: 'pointer',
 
-            "&.active::after": {
-                content: '""',
-                display: "block",
-                position: "absolute",
-                width: "100%",
-                height: 6,
-                background: "#005595",
-                top: "100%",
-                left: 0,
-            }
-        },
+      '&.active::after': {
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        width: '100%',
+        height: 6,
+        background: '#005595',
+        top: '100%',
+        left: 0,
+      },
+    },
 
-        ".underline": {
-            width: "100%",
-            height: 6,
-            background: "#F4F4F4"
-        }
+    '.underline': {
+      width: '100%',
+      height: 6,
+      background: '#F4F4F4',
     },
+  },
 });
-