@sk-web-gui/core 0.1.44 → 0.1.45

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': {},
+  },
+});

package/src/components/badge.js

@@ -1,60 +1,60 @@
-module.exports = Badge = (colors) => ({
-  '.badge': {
-    '@apply inline-block text-xs font-medium leading-4 text-center whitespace-nowrap': {},
-
-    '&-light': {
-      '@apply text-body bg-neutral-200 border border-transparent': {},
-      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply text-${color}-800 bg-${color}-100`]: {},
-            [`@apply dark:text-${color}-400 dark:bg-${color}-500`]: {},
-            '@apply dark:bg-opacity-15': {},
-          },
-        }),
-        {}
-      ),
-    },
-
-    '&-solid': {
-      '@apply text-white bg-neutral-500 border border-transparent': {},
-      '@apply dark:border-neutral-600 dark:text-neutral-100 dark:bg-neutral-700': {},
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-500`]: {},
-            [`@apply dark:text-${color}-400 dark:border-${color}-500 dark:bg-${color}-500`]: {},
-            '@apply dark:bg-opacity-15': {},
-            '@apply dark:border-opacity-40': {},
-          },
-        }),
-        {}
-      ),
-    },
-
-    '&-sm': {
-      minWidth: '14px',
-      height: '14px',
-      padding: 0,
-      lineHeight: '12px',
-      borderRadius: '2em',
-    },
-
-    '&-md': {
-      '@apply px-1.5 py-0': {},
-      minWidth: '20px',
-      height: '20px',
-      lineHeight: '18px',
-      borderRadius: '2em',
-    },
-
-    '&-shadow': {
-      '@apply ring-1 ring-white': {},
-      '@apply dark:ring-black': {},
-    },
-  },
-});
+module.exports = Badge = (colors) => ({
+  '.badge': {
+    '@apply inline-block text-xs font-medium leading-4 text-center whitespace-nowrap': {},
+
+    '&-light': {
+      '@apply text-body bg-neutral-200 border border-transparent': {},
+      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply text-${color}-800 bg-${color}-100`]: {},
+            [`@apply dark:text-${color}-400 dark:bg-${color}-500`]: {},
+            '@apply dark:bg-opacity-15': {},
+          },
+        }),
+        {}
+      ),
+    },
+
+    '&-solid': {
+      '@apply text-white bg-neutral-500 border border-transparent': {},
+      '@apply dark:border-neutral-600 dark:text-neutral-100 dark:bg-neutral-700': {},
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply bg-${color}-500`]: {},
+            [`@apply dark:text-${color}-400 dark:border-${color}-500 dark:bg-${color}-500`]: {},
+            '@apply dark:bg-opacity-15': {},
+            '@apply dark:border-opacity-40': {},
+          },
+        }),
+        {}
+      ),
+    },
+
+    '&-sm': {
+      minWidth: '14px',
+      height: '14px',
+      padding: 0,
+      lineHeight: '12px',
+      borderRadius: '2em',
+    },
+
+    '&-md': {
+      '@apply px-1.5 py-0': {},
+      minWidth: '20px',
+      height: '20px',
+      lineHeight: '18px',
+      borderRadius: '2em',
+    },
+
+    '&-shadow': {
+      '@apply ring-1 ring-white': {},
+      '@apply dark:ring-black': {},
+    },
+  },
+});

package/src/components/breadcrumb.js

@@ -1,13 +1,13 @@
-module.exports = Breadcrumb = () => ({
-  '.breadcrumb': {
-    '@apply text-body relative': {},
-
-    '&-item': {
-      '@apply inline-flex items-center whitespace-nowrap': {},
-    },
-
-    '&-separator': {
-      '@apply mx-2': {},
-    },
-  },
-});
+module.exports = Breadcrumb = () => ({
+  '.breadcrumb': {
+    '@apply text-body relative': {},
+
+    '&-item': {
+      '@apply inline-flex items-center whitespace-nowrap': {},
+    },
+
+    '&-separator': {
+      '@apply mx-2': {},
+    },
+  },
+});

package/src/components/button-group.js

@@ -1,46 +1,46 @@
-// TODO: how it works with prefix?
-module.exports = ButtonGroup = () => ({
-  '.btn-group': {
-    '@apply inline-block': {},
-
-    '&.btn-group-attached': {
-      '> .btn-icon': {
-        boxSizing: 'content-box',
-      },
-      '> *:first-of-type:not(:last-of-type)': {
-        borderTopRightRadius: '0px',
-        borderBottomRightRadius: '0px',
-      },
-
-      '> *:not(:first-of-type):not(:last-of-type)': {
-        borderRadius: '0px',
-      },
-
-      '> *:not(:first-of-type):last-of-type': {
-        borderTopLeftRadius: '0px',
-        borderBottomLeftRadius: '0px',
-      },
-
-      '> .btn-solid:not(:last-child), > .btn-outline:not(:last-child)': {
-        borderRightWidth: '0px',
-      },
-
-      '> .btn-solid:hover, > .btn-outline:hover': {
-        borderRightWidth: '1px',
-      },
-
-      '> *:not(:last-of-type):hover + .btn-solid, > *:not(:last-of-type):hover + .btn-outline': {
-        borderLeftWidth: '0px',
-      },
-
-      '> .btn-solid:focus, > .btn-outline:focus': {
-        zIndex: '1px',
-        borderRightWidth: '1px',
-      },
-
-      '> *:not(:last-of-type):focus + .btn-solid, > *:not(:last-of-type):focus + .btn-outline': {
-        borderLeftWidth: '0px',
-      },
-    },
-  },
-});
+// TODO: how it works with prefix?
+module.exports = ButtonGroup = () => ({
+  '.btn-group': {
+    '@apply inline-block': {},
+
+    '&.btn-group-attached': {
+      '> .btn-icon': {
+        boxSizing: 'content-box',
+      },
+      '> *:first-of-type:not(:last-of-type)': {
+        borderTopRightRadius: '0px',
+        borderBottomRightRadius: '0px',
+      },
+
+      '> *:not(:first-of-type):not(:last-of-type)': {
+        borderRadius: '0px',
+      },
+
+      '> *:not(:first-of-type):last-of-type': {
+        borderTopLeftRadius: '0px',
+        borderBottomLeftRadius: '0px',
+      },
+
+      '> .btn-solid:not(:last-child), > .btn-outline:not(:last-child)': {
+        borderRightWidth: '0px',
+      },
+
+      '> .btn-solid:hover, > .btn-outline:hover': {
+        borderRightWidth: '1px',
+      },
+
+      '> *:not(:last-of-type):hover + .btn-solid, > *:not(:last-of-type):hover + .btn-outline': {
+        borderLeftWidth: '0px',
+      },
+
+      '> .btn-solid:focus, > .btn-outline:focus': {
+        zIndex: '1px',
+        borderRightWidth: '1px',
+      },
+
+      '> *:not(:last-of-type):focus + .btn-solid, > *:not(:last-of-type):focus + .btn-outline': {
+        borderLeftWidth: '0px',
+      },
+    },
+  },
+});