@sk-web-gui/core 0.1.4 → 0.1.5

package/src/components/forms.js

@@ -1,246 +1,246 @@
-function fieldOutline(colors) {
-  return {
-    "&-outline": {
-      "@apply border shadow-sm border-gray-stroke": {},
-      "@apply text-gray bg-white": {},
-      //"@apply hover:border-neutral-300": {},
-
-      "&[aria-invalid=true]": {
-        "--tw-border-opacity": "1",
-        borderColor: "rgba(220, 38, 38, var(--tw-border-opacity))",
-        "--tw-ring-offset-shadow":
-          "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
-        "--tw-ring-shadow":
-          "var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
-        boxShadow:
-          "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
-        "--tw-ring-opacity": "1",
-        "--tw-ring-color": "rgba(220, 38, 38, var(--tw-ring-opacity))",
-      },
-      "focus-visible:ring-4": {},
-      /* dark mode */
-      "@apply dark:border-neutral-700": {},
-      "@apply dark:text-neutral-100 dark:bg-base": {},
-      "@apply dark:hover:border-neutral-600": {},
-
-      ".dark &[aria-invalid=true]": {
-        "--tw-border-opacity": "1",
-        borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
-        "--tw-ring-opacity": "1",
-        "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
-      },
-      "@media (prefers-color-scheme: dark)": {
-        "&[aria-invalid=true]": {
-          "--tw-border-opacity": "1",
-          borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
-          "--tw-ring-opacity": "1",
-          "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
-        },
-      },
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
-            [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-function fieldSolid(colors) {
-  return {
-    "&-solid": {
-      "@apply border border-transparent": {},
-      "@apply text-black bg-gray-light": {},
-      //"@apply hover:bg-gray-200": {},
-
-      "&[aria-invalid=true]": {
-        "--tw-border-opacity": "1",
-        borderColor: "rgba(220, 38, 38, var(--tw-border-opacity))",
-        "--tw-ring-offset-shadow":
-          "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
-        "--tw-ring-shadow":
-          "var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
-        boxShadow:
-          "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
-        "--tw-ring-opacity": "1",
-        "--tw-ring-color": "rgba(220, 38, 38, var(--tw-ring-opacity))",
-      },
-      "focus-visible:ring-4": {},
-      /* dark mode */
-      "@apply dark:text-neutral-100 dark:bg-whiteAlpha-50": {},
-      "@apply dark:hover:bg-whiteAlpha-100": {},
-      ".dark &[aria-invalid=true]": {
-        "--tw-border-opacity": "1",
-        borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
-        "--tw-ring-opacity": "1",
-        "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
-      },
-      "@media (prefers-color-scheme: dark)": {
-        "&[aria-invalid=true]": {
-          "--tw-border-opacity": "1",
-          borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
-          "--tw-ring-opacity": "1",
-          "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
-        },
-      },
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
-            [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-function formControl() {
-  return {
-    ".form-control": {
-      "@apply w-full relative": {},
-    },
-    ".form-helper-text": {
-      "@apply mt-1.5 leading-none text-gray dark:text-whiteAlpha-600": {},
-    },
-    ".form-error-message": {
-      "@apply mt-1.5 leading-none flex items-center text-sm": {},
-      "--tw-text-opacity": "1",
-      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
-      ".dark &": {
-        "--tw-text-opacity": "1",
-        color: "rgba(252, 165, 165, var(--tw-text-opacity))",
-      }
-    },
-    ".form-label": {
-      "@apply text-sm font-medium text-left align-middle block mb-1.5": {},
-
-      "&-disabled": {
-        //"@apply opacity-60": {},
-      },
-    },
-    ".form-required-indicator": {
-      "@apply ml-1 text-sm": {},
-      "--tw-text-opacity": "1",
-      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
-      ".dark &": {
-        "--tw-text-opacity": "1",
-        color: "rgba(252, 165, 165, var(--tw-text-opacity))",
-      }
-    }
-  };
-}
-
-function formInputGroup() {
-  return {
-    ".form-input-group": {
-      "@apply flex relative": {},
-    },
-
-    ".form-input-element": {
-      "@apply flex items-center justify-center absolute z-base top-0": {},
-
-      "&-sm": {
-        "@apply text-xs h-7 w-7": {},
-      },
-
-      "&-md": {
-        "@apply text-sm h-8 w-8": {},
-      },
-
-      "&-lg": {
-        "@apply text-base h-10 w-10": {},
-      },
-
-    },
-
-    ".form-input-addon": {
-      "@apply flex items-center w-auto rounded-base shadow-sm whitespace-nowrap": {},
-      "@apply border border-neutral-300": {},
-      "@apply text-neutral-600 bg-neutral-50": {},
-      // dark colors
-      "@apply dark:border-neutral-700": {},
-      "@apply dark:text-neutral-100 dark:bg-whiteAlpha-300": {},
-
-      "&-sm": {
-        "@apply px-3 text-xs": {},
-      },
-
-      "&-md": {
-        "@apply px-4 text-sm": {},
-      },
-
-      "&-lg": {
-        "@apply px-4 text-base": {},
-      },
-
-      "&-left": {
-        "@apply -mr-1 rounded-r-none": {},
-      },
-
-      "&-right": {
-        "@apply -ml-1 rounded-l-none": {},
-      },
-    },
-  };
-}
-
-module.exports = Forms = (colors) => ({
-  ".form-field": {
-    "@apply placeholder-gray-stroke": {},
-    "@apply relative w-full min-w-0 inline-flex items-center appearance-none focus-visible:outline-none": {},
-    "@apply transition-colors	duration-75 ease-out": {},
-
-    "&-sm": {
-      "@apply text-sm leading-sm": {},
-      borderRadius: "0.2rem",
-      padding: "1.08rem 1.44rem",
-    },
-
-    "&-md": {
-      "@apply text-base leading-base": {},
-      borderRadius: "0.2rem",
-      padding: "1.2rem 1.6rem",
-    },
-
-    "&-lg": {
-      "@apply text-lg leading-lg": {},
-      borderRadius: "0.2rem",
-      padding: "1.32rem 1.76rem",
-    },
-
-
-    "&-disabled": {
-      "@apply disabled:cursor-not-allowed": {},
-      "@apply disabled:bg-gray-lighter": {},
-      //"@apply disabled:shadow-none disabled:cursor-not-allowed disabled:opacity-60": {},
-      //"@apply disabled:border-neutral-200 disabled:bg-neutral-200": {},
-      //"@apply dark:disabled:border-transparent dark:disabled:bg-whiteAlpha-200": {},
-    },
-
-    // variants
-    ...fieldOutline(colors),
-    ...fieldSolid(colors),
-  },
-
-  ".form-textarea": {
-    //"@apply leading-tight": {},
-    minHeight: "5rem",
-  },
-
-  ".form-select": {
-    //"@apply pr-10": {},
-  },
-
-  ...formInputGroup(),
-  ...formControl(),
-});
+function fieldOutline(colors) {
+  return {
+    "&-outline": {
+      "@apply border shadow-sm border-gray-stroke": {},
+      "@apply text-gray bg-white": {},
+      //"@apply hover:border-neutral-300": {},
+
+      "&[aria-invalid=true]": {
+        "--tw-border-opacity": "1",
+        borderColor: "rgba(220, 38, 38, var(--tw-border-opacity))",
+        "--tw-ring-offset-shadow":
+          "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+        "--tw-ring-shadow":
+          "var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
+        boxShadow:
+          "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
+        "--tw-ring-opacity": "1",
+        "--tw-ring-color": "rgba(220, 38, 38, var(--tw-ring-opacity))",
+      },
+      "focus-visible:ring-4": {},
+      /* dark mode */
+      "@apply dark:border-neutral-700": {},
+      "@apply dark:text-neutral-100 dark:bg-base": {},
+      "@apply dark:hover:border-neutral-600": {},
+
+      ".dark &[aria-invalid=true]": {
+        "--tw-border-opacity": "1",
+        borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
+        "--tw-ring-opacity": "1",
+        "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
+      },
+      "@media (prefers-color-scheme: dark)": {
+        "&[aria-invalid=true]": {
+          "--tw-border-opacity": "1",
+          borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
+          "--tw-ring-opacity": "1",
+          "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
+        },
+      },
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
+            [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function fieldSolid(colors) {
+  return {
+    "&-solid": {
+      "@apply border border-transparent": {},
+      "@apply text-black bg-gray-light": {},
+      //"@apply hover:bg-gray-200": {},
+
+      "&[aria-invalid=true]": {
+        "--tw-border-opacity": "1",
+        borderColor: "rgba(220, 38, 38, var(--tw-border-opacity))",
+        "--tw-ring-offset-shadow":
+          "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+        "--tw-ring-shadow":
+          "var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
+        boxShadow:
+          "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
+        "--tw-ring-opacity": "1",
+        "--tw-ring-color": "rgba(220, 38, 38, var(--tw-ring-opacity))",
+      },
+      "focus-visible:ring-4": {},
+      /* dark mode */
+      "@apply dark:text-neutral-100 dark:bg-whiteAlpha-50": {},
+      "@apply dark:hover:bg-whiteAlpha-100": {},
+      ".dark &[aria-invalid=true]": {
+        "--tw-border-opacity": "1",
+        borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
+        "--tw-ring-opacity": "1",
+        "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
+      },
+      "@media (prefers-color-scheme: dark)": {
+        "&[aria-invalid=true]": {
+          "--tw-border-opacity": "1",
+          borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
+          "--tw-ring-opacity": "1",
+          "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
+        },
+      },
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
+            [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function formControl() {
+  return {
+    ".form-control": {
+      "@apply w-full relative": {},
+    },
+    ".form-helper-text": {
+      "@apply mt-1.5 leading-none text-gray dark:text-whiteAlpha-600": {},
+    },
+    ".form-error-message": {
+      "@apply mt-1.5 leading-none flex items-center text-sm": {},
+      "--tw-text-opacity": "1",
+      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
+      ".dark &": {
+        "--tw-text-opacity": "1",
+        color: "rgba(252, 165, 165, var(--tw-text-opacity))",
+      }
+    },
+    ".form-label": {
+      "@apply text-sm font-medium text-left align-middle block mb-1.5": {},
+
+      "&-disabled": {
+        //"@apply opacity-60": {},
+      },
+    },
+    ".form-required-indicator": {
+      "@apply ml-1 text-sm": {},
+      "--tw-text-opacity": "1",
+      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
+      ".dark &": {
+        "--tw-text-opacity": "1",
+        color: "rgba(252, 165, 165, var(--tw-text-opacity))",
+      }
+    }
+  };
+}
+
+function formInputGroup() {
+  return {
+    ".form-input-group": {
+      "@apply flex relative": {},
+    },
+
+    ".form-input-element": {
+      "@apply flex items-center justify-center absolute z-base top-0": {},
+
+      "&-sm": {
+        "@apply text-xs h-7 w-7": {},
+      },
+
+      "&-md": {
+        "@apply text-sm h-8 w-8": {},
+      },
+
+      "&-lg": {
+        "@apply text-base h-10 w-10": {},
+      },
+
+    },
+
+    ".form-input-addon": {
+      "@apply flex items-center w-auto rounded-base shadow-sm whitespace-nowrap": {},
+      "@apply border border-neutral-300": {},
+      "@apply text-neutral-600 bg-neutral-50": {},
+      // dark colors
+      "@apply dark:border-neutral-700": {},
+      "@apply dark:text-neutral-100 dark:bg-whiteAlpha-300": {},
+
+      "&-sm": {
+        "@apply px-3 text-xs": {},
+      },
+
+      "&-md": {
+        "@apply px-4 text-sm": {},
+      },
+
+      "&-lg": {
+        "@apply px-4 text-base": {},
+      },
+
+      "&-left": {
+        "@apply -mr-1 rounded-r-none": {},
+      },
+
+      "&-right": {
+        "@apply -ml-1 rounded-l-none": {},
+      },
+    },
+  };
+}
+
+module.exports = Forms = (colors) => ({
+  ".form-field": {
+    "@apply placeholder-gray-stroke": {},
+    "@apply relative w-full min-w-0 inline-flex items-center appearance-none focus-visible:outline-none": {},
+    "@apply transition-colors	duration-75 ease-out": {},
+
+    "&-sm": {
+      "@apply text-sm leading-sm": {},
+      borderRadius: "0.2rem",
+      padding: "1.08rem 1.44rem",
+    },
+
+    "&-md": {
+      "@apply text-base leading-base": {},
+      borderRadius: "0.2rem",
+      padding: "1.2rem 1.6rem",
+    },
+
+    "&-lg": {
+      "@apply text-lg leading-lg": {},
+      borderRadius: "0.2rem",
+      padding: "1.32rem 1.76rem",
+    },
+
+
+    "&-disabled": {
+      "@apply disabled:cursor-not-allowed": {},
+      "@apply disabled:bg-gray-lighter": {},
+      //"@apply disabled:shadow-none disabled:cursor-not-allowed disabled:opacity-60": {},
+      //"@apply disabled:border-neutral-200 disabled:bg-neutral-200": {},
+      //"@apply dark:disabled:border-transparent dark:disabled:bg-whiteAlpha-200": {},
+    },
+
+    // variants
+    ...fieldOutline(colors),
+    ...fieldSolid(colors),
+  },
+
+  ".form-textarea": {
+    //"@apply leading-tight": {},
+    minHeight: "5rem",
+  },
+
+  ".form-select": {
+    //"@apply pr-10": {},
+  },
+
+  ...formInputGroup(),
+  ...formControl(),
+});

package/src/components/icon-button.js

@@ -1,5 +1,5 @@
-module.exports = IconButton = () => ({
-  ".btn-icon": {
-    "@apply p-0": {},
-  },
-});
+module.exports = IconButton = () => ({
+  ".btn-icon": {
+    "@apply p-0": {},
+  },
+});

package/src/components/icon.js

@@ -1,9 +1,9 @@
-module.exports = Icon = () => ({
-  ".icon-inline": {
-    "@apply inline-block align-middle": {},
-  },
-
-  ".icon-block": {
-    "@apply block": {},
-  },
-});
+module.exports = Icon = () => ({
+  ".icon-inline": {
+    "@apply inline-block align-middle": {},
+  },
+
+  ".icon-block": {
+    "@apply block": {},
+  },
+});

package/src/components/kbd.js

@@ -1,9 +1,9 @@
-module.exports = Kbd = () => ({
-  ".kbd": {
-    "@apply inline-flex justify-center items-center capitalize text-xs p-1 rounded h-5 whitespace-nowrap font-sans": {},
-    "minWidth": "1.25rem",
-    "@apply bg-blackAlpha-100 text-neutral-900": {},
-    // dark
-    "@apply dark:bg-whiteAlpha-300 dark:text-neutral-300": {},
-  },
-});
+module.exports = Kbd = () => ({
+  ".kbd": {
+    "@apply inline-flex justify-center items-center capitalize text-xs p-1 rounded h-5 whitespace-nowrap font-sans": {},
+    "minWidth": "1.25rem",
+    "@apply bg-blackAlpha-100 text-neutral-900": {},
+    // dark
+    "@apply dark:bg-whiteAlpha-300 dark:text-neutral-300": {},
+  },
+});

package/src/components/link.js

@@ -1,13 +1,13 @@
-module.exports = Link = () => ({
-  ".link": {
-    "@apply cursor-base no-underline outline-none hover:underline": {},
-    "@apply text-primary dark:text-primary": {},
-    "@apply focus-visible:ring-4 focus-visible:ring-primary": {},
-
-    "@apply hover:text-primary-active": {},
-
-    "&-disabled": {
-      "@apply disabled:opacity-60 disabled:cursor-not-allowed disabled:no-underline": {},
-    },
-  },
-});
+module.exports = Link = () => ({
+  ".link": {
+    "@apply cursor-base no-underline outline-none hover:underline": {},
+    "@apply text-primary dark:text-primary": {},
+    "@apply focus-visible:ring-4 focus-visible:ring-primary": {},
+
+    "@apply hover:text-primary-active": {},
+
+    "&-disabled": {
+      "@apply disabled:opacity-60 disabled:cursor-not-allowed disabled:no-underline": {},
+    },
+  },
+});

package/src/components/message.js

@@ -1,29 +1,29 @@
-module.exports = Message = () => ({
-  ".message": {
-    "@apply flex items-center px-3 py-1.5 m-2 text-sm rounded-base shadow-sm w-max break-words": {},
-    "@apply text-neutral-900 bg-white border border-neutral-200": {},
-    // dark
-    "@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600": {},
-  },
-
-  ".message-icon": {
-    "@apply mr-2": {},
-
-    "&-info": {
-      "--tw-text-opacity": "1",
-      color: "rgba(59, 130, 246, var(--tw-text-opacity))",
-    },
-    "&-success": {
-      "--tw-text-opacity": "1",
-      color: "rgba(34, 197, 94, var(--tw-text-opacity))",
-    },
-    "&-error": {
-      "--tw-text-opacity": "1",
-      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
-    },
-    "&-warning": {
-      "--tw-text-opacity": "1",
-      color: "rgba(234, 179, 8, var(--tw-text-opacity))",
-    },
-  },
-});
+module.exports = Message = () => ({
+  ".message": {
+    "@apply flex items-center px-3 py-1.5 m-2 text-sm rounded-base shadow-sm w-max break-words": {},
+    "@apply text-neutral-900 bg-white border border-neutral-200": {},
+    // dark
+    "@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600": {},
+  },
+
+  ".message-icon": {
+    "@apply mr-2": {},
+
+    "&-info": {
+      "--tw-text-opacity": "1",
+      color: "rgba(59, 130, 246, var(--tw-text-opacity))",
+    },
+    "&-success": {
+      "--tw-text-opacity": "1",
+      color: "rgba(34, 197, 94, var(--tw-text-opacity))",
+    },
+    "&-error": {
+      "--tw-text-opacity": "1",
+      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
+    },
+    "&-warning": {
+      "--tw-text-opacity": "1",
+      color: "rgba(234, 179, 8, var(--tw-text-opacity))",
+    },
+  },
+});