@sk-web-gui/core 0.1.3 → 0.1.6

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,61 +1,61 @@
-module.exports = Badge = (colors) => ({
-  ".badge": {
-    "@apply inline-block text-xs font-medium leading-4 text-center whitespace-nowrap": {},
-
-    "&-light": {
-      "@apply text-neutral-900 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-neutral-900 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 relative": {},
-
-    "&-item": {
-      "@apply inline-flex items-center whitespace-nowrap": {},
-    },
-
-    "&-separator": {
-      "@apply mx-2 text-neutral-500": {},
-    },
-  },
-});
+module.exports = Breadcrumb = () => ({
+  ".breadcrumb": {
+    "@apply relative": {},
+
+    "&-item": {
+      "@apply inline-flex items-center whitespace-nowrap": {},
+    },
+
+    "&-separator": {
+      "@apply mx-2 text-neutral-500": {},
+    },
+  },
+});

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",
+      },
+    },
+  },
+});