@sk-web-gui/core 0.1.46 → 0.1.47

package/src/components/accordion.js

@@ -1,93 +1,93 @@
-module.exports = Accordion = (colors) => ({
-  '.accordion': {
-    '&-header': {
-      '@apply flex flex-col text-left': {},
-
-      '[aria-expanded="true"] &': {
-        '@apply bg-hover': {},
-      },
-
-      '&-icon': {
-        '@apply ml-auto !text-2xl': {},
-      },
-    },
-
-    '&-is-open &-header': {
-      '@apply bg-hover': {},
-    },
-
-    '&-toggle': {
-      '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
-      fontWeight: 'bold',
-      //"@apply focus-visible:shadow shadow-lg": {},
-      '&:focus-visible': {
-        boxShadow: '0 0 0 0.4rem #fff!important',
-        outline: '0',
-        //"@apply border-4": {},
-      },
-      '.accordion-title': {
-        '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},
-      },
-      '.accordion-subtitle': {
-        '@apply m-0 mr-md text-sm font-normal': {},
-      },
-    },
-
-    '&-body': {
-      '@apply h-0 overflow-hidden m-lg': {},
-      transitionProperty: 'visibility, height, padding, margin',
-      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-      transitionDuration: '180ms',
-
-      '&[aria-hidden="true"], &[data-hidden="true"]': {
-        '@apply my-0 invisible': {},
-      },
-
-      '&[aria-hidden="false"], &[data-hidden="false"]': {
-        '@apply block h-auto visible': {},
-      },
-    },
-
-    '&-solid': {
-      '@apply border border-primary': {},
-      '.accordion-header': {
-        '@apply bg-primary text-white': {},
-
-        '[aria-expanded="true"] &': {
-          '@apply bg-hover': {},
-        },
-      },
-    },
-
-    '&-is-open': {
-      '@apply border border-gray-stroke': {},
-      '& .accordion-header': {
-        '@apply bg-hover text-white': {},
-      },
-    },
-
-    '&-is-open &-body': {
-      '@apply overflow-visible animate-reset-overflow': {},
-    },
-
-    '&-outline': {
-      '@apply border border-gray-stroke': {},
-      '.accordion-body': {
-        '@apply mt-0': {},
-      },
-      '.accordion-toggle': {
-        '&:focus-visible': {
-          boxShadow: '0 0 0 0.4rem #4b4b4b!important',
-          outline: '0',
-        },
-      },
-      '.accordion-header': {
-        '@apply bg-transparent text-body': {},
-
-        '[aria-expanded="true"] &': {
-          '@apply bg-hover': {},
-        },
-      },
-    },
-  },
-});
+module.exports = Accordion = (colors) => ({
+  '.accordion': {
+    '&-header': {
+      '@apply flex flex-col text-left': {},
+
+      '[aria-expanded="true"] &': {
+        '@apply bg-hover': {},
+      },
+
+      '&-icon': {
+        '@apply ml-auto !text-2xl': {},
+      },
+    },
+
+    '&-is-open &-header': {
+      '@apply bg-hover': {},
+    },
+
+    '&-toggle': {
+      '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
+      fontWeight: 'bold',
+      //"@apply focus-visible:shadow shadow-lg": {},
+      '&:focus-visible': {
+        boxShadow: '0 0 0 0.4rem #fff!important',
+        outline: '0',
+        //"@apply border-4": {},
+      },
+      '.accordion-title': {
+        '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},
+      },
+      '.accordion-subtitle': {
+        '@apply m-0 mr-md text-sm font-normal': {},
+      },
+    },
+
+    '&-body': {
+      '@apply h-0 overflow-hidden m-lg': {},
+      transitionProperty: 'visibility, height, padding, margin',
+      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      transitionDuration: '180ms',
+
+      '&[aria-hidden="true"], &[data-hidden="true"]': {
+        '@apply my-0 invisible': {},
+      },
+
+      '&[aria-hidden="false"], &[data-hidden="false"]': {
+        '@apply block h-auto visible': {},
+      },
+    },
+
+    '&-solid': {
+      '@apply border border-primary': {},
+      '.accordion-header': {
+        '@apply bg-primary text-white': {},
+
+        '[aria-expanded="true"] &': {
+          '@apply bg-hover': {},
+        },
+      },
+    },
+
+    '&-is-open': {
+      '@apply border border-gray-stroke': {},
+      '& .accordion-header': {
+        '@apply bg-hover text-white': {},
+      },
+    },
+
+    '&-is-open &-body': {
+      '@apply overflow-visible animate-reset-overflow': {},
+    },
+
+    '&-outline': {
+      '@apply border border-gray-stroke': {},
+      '.accordion-body': {
+        '@apply mt-0': {},
+      },
+      '.accordion-toggle': {
+        '&:focus-visible': {
+          boxShadow: '0 0 0 0.4rem #4b4b4b!important',
+          outline: '0',
+        },
+      },
+      '.accordion-header': {
+        '@apply bg-transparent text-body': {},
+
+        '[aria-expanded="true"] &': {
+          '@apply bg-hover': {},
+        },
+      },
+    },
+  },
+});

package/src/components/alert-banner.js

@@ -0,0 +1,25 @@
+module.exports = Modal = () => ({
+  '.alert-banner': {
+    '@apply p-md': {},
+
+    '&-content': {
+      '@apply w-full m-auto flex': {},
+
+      '&-wrapper': {
+        '@apply flex-grow flex': {},
+      },
+    },
+
+    '&-icon': {
+      '@apply mr-[10px]': {},
+    },
+
+    '&-message': {
+      '@apply underline inline-block max-w-[800px] text-body text-base': {},
+    },
+
+    '&-close': {
+      '@apply p-4 -m-4 inline-flex': {},
+    },
+  },
+});

package/src/components/alert.js

@@ -1,98 +1,98 @@
-function alertSubtle(colors) {
-  return {
-    '.alert-subtle': {
-      '@apply border rounded-base': {},
-      '@apply text-body': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-50 border-${color}-500`]: {},
-
-            [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},
-            '@apply dark:bg-opacity-15': {},
-            '@apply dark:border-opacity-40': {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-function alertSolid(colors) {
-  return {
-    '.alert-solid': {
-      '@apply border rounded-base': {},
-      '@apply text-white': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-500 border-${color}-700 border-opacity-20`]: {},
-
-            [`@apply dark:bg-${color}-600 dark:border-${color}-500`]: {},
-            '@apply dark:border-opacity-40': {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-function alertLeftAccent(colors) {
-  return {
-    '.alert-left-accent': {
-      '@apply border-l-2 rounded-none': {},
-      '@apply text-body': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-transparent border-${color}-500`]: {},
-
-            [`@apply dark:text-${color}-300`]: {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-function alertCloseButton(colors) {
-  return {
-    '.alert-close-button': {
-      '@apply absolute right-4 cursor-base focus-visible:outline-none': {},
-      '@apply text-neutral-600 hover:text-neutral-700': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply dark:text-${color}-300 dark:hover:text-${color}-400`]: {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-module.exports = Alert = (colors) => ({
-  '.alert': {
-    '@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-sm': {},
-  },
-
-  // variants
-  ...alertSubtle(colors),
-  ...alertSolid(colors),
-  ...alertLeftAccent(colors),
-
-  // close button
-  ...alertCloseButton(colors),
-});
+function alertSubtle(colors) {
+  return {
+    '.alert-subtle': {
+      '@apply border rounded-base': {},
+      '@apply text-body': {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply bg-${color}-50 border-${color}-500`]: {},
+
+            [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},
+            '@apply dark:bg-opacity-15': {},
+            '@apply dark:border-opacity-40': {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function alertSolid(colors) {
+  return {
+    '.alert-solid': {
+      '@apply border rounded-base': {},
+      '@apply text-white': {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply bg-${color}-500 border-${color}-700 border-opacity-20`]: {},
+
+            [`@apply dark:bg-${color}-600 dark:border-${color}-500`]: {},
+            '@apply dark:border-opacity-40': {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function alertLeftAccent(colors) {
+  return {
+    '.alert-left-accent': {
+      '@apply border-l-2 rounded-none': {},
+      '@apply text-body': {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply bg-transparent border-${color}-500`]: {},
+
+            [`@apply dark:text-${color}-300`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function alertCloseButton(colors) {
+  return {
+    '.alert-close-button': {
+      '@apply absolute right-4 cursor-base focus-visible:outline-none': {},
+      '@apply text-neutral-600 hover:text-neutral-700': {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply dark:text-${color}-300 dark:hover:text-${color}-400`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+module.exports = Alert = (colors) => ({
+  '.alert': {
+    '@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-sm': {},
+  },
+
+  // variants
+  ...alertSubtle(colors),
+  ...alertSolid(colors),
+  ...alertLeftAccent(colors),
+
+  // close button
+  ...alertCloseButton(colors),
+});

package/src/components/avatar.js

@@ -1,85 +1,85 @@
-module.exports = Avatar = () => ({
-  '.avatar': {
-    '@apply relative inline-flex items-center justify-center flex-shrink-0 align-top rounded-full': {},
-    '@apply bg-neutral-300 text-neutral-800': {},
-    // dark colors
-    '@apply dark:bg-neutral-600 dark:text-neutral-100': {},
-
-    '&-2xs': {
-      '@apply w-4 h-4': {},
-    },
-
-    '&-xs': {
-      '@apply w-5 h-5': {},
-    },
-
-    '&-sm': {
-      '@apply w-6 h-6': {},
-    },
-
-    '&-md': {
-      '@apply w-7 h-7': {},
-    },
-
-    '&-lg': {
-      '@apply w-8 h-8': {},
-    },
-
-    '&-xl': {
-      '@apply w-10 h-10': {},
-    },
-
-    '&-2xl': {
-      '@apply w-12 h-12': {},
-    },
-
-    '&-3xl': {
-      '@apply w-16 h-16': {},
-    },
-  },
-
-  '.avatar-bordered': {
-    '@apply border-2 border-white': {},
-    '@apply dark:border-neutral-800': {},
-  },
-
-  '.avatar-name': {
-    '@apply font-medium text-center uppercase': {},
-
-    '&-2xs': {
-      '@apply w-4 h-4': {},
-    },
-
-    '&-xs': {
-      '@apply w-5 h-5': {},
-    },
-
-    '&-sm': {
-      '@apply w-6 h-6': {},
-    },
-
-    '&-md': {
-      '@apply w-7 h-7': {},
-    },
-
-    '&-lg': {
-      '@apply w-8 h-8': {},
-    },
-
-    '&-xl': {
-      '@apply w-10 h-10': {},
-    },
-
-    '&-2xl': {
-      '@apply w-12 h-12': {},
-    },
-
-    '&-3xl': {
-      '@apply w-16 h-16': {},
-    },
-  },
-
-  '.avatar-group': {
-    '@apply flex items-center justify-end flex-row-reverse': {},
-  },
-});
+module.exports = Avatar = () => ({
+  '.avatar': {
+    '@apply relative inline-flex items-center justify-center flex-shrink-0 align-top rounded-full': {},
+    '@apply bg-neutral-300 text-neutral-800': {},
+    // dark colors
+    '@apply dark:bg-neutral-600 dark:text-neutral-100': {},
+
+    '&-2xs': {
+      '@apply w-4 h-4': {},
+    },
+
+    '&-xs': {
+      '@apply w-5 h-5': {},
+    },
+
+    '&-sm': {
+      '@apply w-6 h-6': {},
+    },
+
+    '&-md': {
+      '@apply w-7 h-7': {},
+    },
+
+    '&-lg': {
+      '@apply w-8 h-8': {},
+    },
+
+    '&-xl': {
+      '@apply w-10 h-10': {},
+    },
+
+    '&-2xl': {
+      '@apply w-12 h-12': {},
+    },
+
+    '&-3xl': {
+      '@apply w-16 h-16': {},
+    },
+  },
+
+  '.avatar-bordered': {
+    '@apply border-2 border-white': {},
+    '@apply dark:border-neutral-800': {},
+  },
+
+  '.avatar-name': {
+    '@apply font-medium text-center uppercase': {},
+
+    '&-2xs': {
+      '@apply w-4 h-4': {},
+    },
+
+    '&-xs': {
+      '@apply w-5 h-5': {},
+    },
+
+    '&-sm': {
+      '@apply w-6 h-6': {},
+    },
+
+    '&-md': {
+      '@apply w-7 h-7': {},
+    },
+
+    '&-lg': {
+      '@apply w-8 h-8': {},
+    },
+
+    '&-xl': {
+      '@apply w-10 h-10': {},
+    },
+
+    '&-2xl': {
+      '@apply w-12 h-12': {},
+    },
+
+    '&-3xl': {
+      '@apply w-16 h-16': {},
+    },
+  },
+
+  '.avatar-group': {
+    '@apply flex items-center justify-end flex-row-reverse': {},
+  },
+});