@sk-web-gui/core 0.1.2 → 0.1.5

package/src/components/modal.js

@@ -1,29 +1,29 @@
-module.exports = Modal = () => ({
-    ".modal": {
-        "@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto": {},
-
-        "&-backdrop": {
-            "@apply bg-black bg-opacity-30": {},
-        },
-
-        "&-wrapper": {
-            "@apply flex flex-col container py-8 px-4 text-center bg-white max-w-screen-sm relative": {},
-        },
-
-        "&-close-btn": {
-            "@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center": {},
-        },
-
-        "&-title": {
-            "@apply text-3xl p-4": {},
-        },
-
-        "&-description": {
-            "@apply text-base p-4": {},
-        },
-
-        "&-content-wrapper": {
-            "@apply p-4 space-y-10": {},
-        },
-    },
-});
+module.exports = Modal = () => ({
+    ".modal": {
+        "@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto": {},
+
+        "&-backdrop": {
+            "@apply bg-black bg-opacity-30": {},
+        },
+
+        "&-wrapper": {
+            "@apply flex flex-col container py-8 px-4 text-center bg-white max-w-screen-sm relative": {},
+        },
+
+        "&-close-btn": {
+            "@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center": {},
+        },
+
+        "&-title": {
+            "@apply text-3xl p-4": {},
+        },
+
+        "&-description": {
+            "@apply text-base p-4": {},
+        },
+
+        "&-content-wrapper": {
+            "@apply p-4 space-y-10": {},
+        },
+    },
+});

package/src/components/notification.js

@@ -1,56 +1,56 @@
-module.exports = Notification = () => ({
-  ".notification": {
-    "@apply relative flex p-4 text-sm w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md": {},
-    "@apply text-neutral-900 bg-white border border-neutral-200": {},
-    // dark
-    "@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600": {},
-  },
-
-  ".notification-icon": {
-    "@apply flex-shrink-0 w-5 h-5 mr-3": {},
-
-    "&-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))",
-    },
-  },
-
-  ".notification-content": {
-    "@apply flex flex-col items-start flex-1 mr-2 -mt-px text-left": {},
-
-    "&-title": {
-      "@apply font-semibold": {},
-    },
-
-    "&-description": {
-      "@apply text-neutral-500 dark:text-neutral-400": {},
-    },
-  },
-
-  ".notification-action": {
-    "@apply absolute space-x-2": {},
-    right: 16,
-    top: 16,
-
-    "&-undo": {
-      "@apply h-auto p-0 text-sm": {},
-    },
-
-    "&-close-button": {
-      "@apply cursor-base text-neutral-700 hover:text-neutral-900": {},
-      "@apply dark:text-neutral-400 dark:hover:text-neutral-100": {},
-    },
-  },
-});
+module.exports = Notification = () => ({
+  ".notification": {
+    "@apply relative flex p-4 text-sm w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md": {},
+    "@apply text-neutral-900 bg-white border border-neutral-200": {},
+    // dark
+    "@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600": {},
+  },
+
+  ".notification-icon": {
+    "@apply flex-shrink-0 w-5 h-5 mr-3": {},
+
+    "&-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))",
+    },
+  },
+
+  ".notification-content": {
+    "@apply flex flex-col items-start flex-1 mr-2 -mt-px text-left": {},
+
+    "&-title": {
+      "@apply font-semibold": {},
+    },
+
+    "&-description": {
+      "@apply text-neutral-500 dark:text-neutral-400": {},
+    },
+  },
+
+  ".notification-action": {
+    "@apply absolute space-x-2": {},
+    right: 16,
+    top: 16,
+
+    "&-undo": {
+      "@apply h-auto p-0 text-sm": {},
+    },
+
+    "&-close-button": {
+      "@apply cursor-base text-neutral-700 hover:text-neutral-900": {},
+      "@apply dark:text-neutral-400 dark:hover:text-neutral-100": {},
+    },
+  },
+});

package/src/components/radio.js

@@ -1,103 +1,103 @@
-module.exports = Radio = (colors) => ({
-  ".form-radio": {
-    "@apply shadow-sm": {},
-    backgroundColor: "inherit",
-    "@apply border-neutral-300": {},
-    "&[aria-invalid=true]": {
-      "--tw-border-opacity": "1",
-      "borderColor": "rgba(220, 38, 38, var(--tw-border-opacity))",
-    },
-    "&[aria-invalid=true]:hover": {
-      "--tw-border-opacity": "1",
-      "border-color": "rgba(220, 38, 38, var(--tw-border-opacity))",
-    },
-    // dark colors
-    "@apply dark:border-neutral-400": {},
-    ".dark &[aria-invalid=true]": {
-      "--tw-border-opacity": "1",
-      "borderColor": "rgba(248, 113, 113, var(--tw-border-opacity))",
-    },
-    ".dark &[aria-invalid=true]:hover": {
-      "--tw-border-opacity": "1",
-      "borderColor": "rgba(248, 113, 113, var(--tw-border-opacity))",
-    },
-
-    "@media (prefers-color-scheme: dark)": {
-      "&[aria-invalid=true]": {
-        "--tw-border-opacity": "1",
-        "borderColor": "rgba(220, 38, 38, var(--tw-border-opacity))",
-      },
-      "&[aria-invalid=true]:hover": {
-        "--tw-border-opacity": "1",
-        "border-color": "rgba(220, 38, 38, var(--tw-border-opacity))",
-      },
-    },
-
-    "&:checked": {
-      borderColor: "transparent",
-    },
-
-    // colors
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply text-${color}-600`]: {},
-          [`@apply focus-visible:border-${color}-600 focus-visible:ring-${color}-600`]: {},
-          [`@apply dark:text-${color}-500`]: {},
-          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
-        },
-      }),
-      {}
-    ),
-
-    "@apply dark:focus-visible:ring-offset-neutral-900": {},
-
-    // sizing
-    "&-sm": {
-      "@apply w-3 h-3": {},
-    },
-
-    "&-md": {
-      "@apply w-4 h-4": {},
-    },
-
-    "&-lg": {
-      "@apply w-5 h-5": {},
-    },
-
-    "&-xl": {
-      "@apply w-6 h-6": {},
-    },
-
-    // disabled
-    "&-disabled": {
-      "@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300": {},
-      "@apply dark:disabled:border-transparent dark:disabled:bg-whiteAlpha-200 dark:disabled:hover:text-whiteAlpha-200": {},
-    },
-
-    // label
-    "&-label": {
-      "@apply ml-2 select-none text-sm": {},
-      "@apply text-neutral-900": {},
-      // dark colors
-      "@apply dark:text-neutral-100": {},
-  
-      "&-sm": {
-        "@apply text-xs": {},
-      },
-  
-      "&-md": {
-        "@apply text-sm": {},
-      },
-  
-      "&-lg": {
-        "@apply text-base": {},
-      },
-  
-      "&-xl": {
-        "@apply text-lg": {},
-      },
-    },
-  },
-});
+module.exports = Radio = (colors) => ({
+  ".form-radio": {
+    "@apply shadow-sm": {},
+    backgroundColor: "inherit",
+    "@apply border-neutral-300": {},
+    "&[aria-invalid=true]": {
+      "--tw-border-opacity": "1",
+      "borderColor": "rgba(220, 38, 38, var(--tw-border-opacity))",
+    },
+    "&[aria-invalid=true]:hover": {
+      "--tw-border-opacity": "1",
+      "border-color": "rgba(220, 38, 38, var(--tw-border-opacity))",
+    },
+    // dark colors
+    "@apply dark:border-neutral-400": {},
+    ".dark &[aria-invalid=true]": {
+      "--tw-border-opacity": "1",
+      "borderColor": "rgba(248, 113, 113, var(--tw-border-opacity))",
+    },
+    ".dark &[aria-invalid=true]:hover": {
+      "--tw-border-opacity": "1",
+      "borderColor": "rgba(248, 113, 113, var(--tw-border-opacity))",
+    },
+
+    "@media (prefers-color-scheme: dark)": {
+      "&[aria-invalid=true]": {
+        "--tw-border-opacity": "1",
+        "borderColor": "rgba(220, 38, 38, var(--tw-border-opacity))",
+      },
+      "&[aria-invalid=true]:hover": {
+        "--tw-border-opacity": "1",
+        "border-color": "rgba(220, 38, 38, var(--tw-border-opacity))",
+      },
+    },
+
+    "&:checked": {
+      borderColor: "transparent",
+    },
+
+    // colors
+    ...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[data-color="${color}"]`]: {
+          [`@apply text-${color}-600`]: {},
+          [`@apply focus-visible:border-${color}-600 focus-visible:ring-${color}-600`]: {},
+          [`@apply dark:text-${color}-500`]: {},
+          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
+        },
+      }),
+      {}
+    ),
+
+    "@apply dark:focus-visible:ring-offset-neutral-900": {},
+
+    // sizing
+    "&-sm": {
+      "@apply w-3 h-3": {},
+    },
+
+    "&-md": {
+      "@apply w-4 h-4": {},
+    },
+
+    "&-lg": {
+      "@apply w-5 h-5": {},
+    },
+
+    "&-xl": {
+      "@apply w-6 h-6": {},
+    },
+
+    // disabled
+    "&-disabled": {
+      "@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300": {},
+      "@apply dark:disabled:border-transparent dark:disabled:bg-whiteAlpha-200 dark:disabled:hover:text-whiteAlpha-200": {},
+    },
+
+    // label
+    "&-label": {
+      "@apply ml-2 select-none text-sm": {},
+      "@apply text-neutral-900": {},
+      // dark colors
+      "@apply dark:text-neutral-100": {},
+  
+      "&-sm": {
+        "@apply text-xs": {},
+      },
+  
+      "&-md": {
+        "@apply text-sm": {},
+      },
+  
+      "&-lg": {
+        "@apply text-base": {},
+      },
+  
+      "&-xl": {
+        "@apply text-lg": {},
+      },
+    },
+  },
+});

package/src/components/switch.js

@@ -1,112 +1,112 @@
-module.exports = Switch = (colors) => ({
-  ".form-switch-label": {
-    "@apply inline-block align-middle": {},
-  },
-  ".form-switch": {
-    "@apply rounded-full p-0.5 cursor-base focus:outline-none": {},
-    "@apply bg-gray-stroke dark:bg-neutral-700": {},
-    // Hover
-    //"@apply hover:bg-neutral-300 dark:hover:bg-neutral-600": {},
-
-    border: "0.1rem solid transparent",
-
-    "input[type=checkbox]:checked + &, input[type=checkbox][aria-checked=mixed] + &": {
-      backgroundColor: "currentColor",
-      ".form-switch-box-sm": {
-        transform: "translateX(1.42rem)",
-      },
-      ".form-switch-box-md": {
-        transform: "translateX(1.6rem)",
-      },
-      ".form-switch-box-lg": {
-        transform: "translateX(1.78rem)",
-      },
-    },
-
-
-
-    "input[type=checkbox]:focus-visible + &": {
-      "@apply z-base !important": {},
-      "@apply border-primary !important": {},
-      "@apply ring-4 ring-black !important": {},
-    },
-
-    "input[type=checkbox]:checked:focus-visible + &, input[type=checkbox][aria-checked=mixed]:focus-visible + &": {
-      "@apply ring-black !important": {},
-    },
-    ".dark input[type=checkbox]:checked:focus-visible + &,.dark input[type=checkbox][aria-checked=mixed]:focus-visible + &": {
-      "@apply ring-black !important": {},
-    },
-    "input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &": {
-      "@apply cursor-base": {},
-    },
-
-    // colors
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[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",
-          },
-        },
-      }),
-      {}
-    ),
-
-    // disabled
-    "&-disabled": {
-      "@apply cursor-not-allowed": {},
-
-      "&": {
-        backgroundColor: "#ECECEC",
-      }
-    },
-
-    "input[type=checkbox]:not(:checked) + &-disabled .form-switch-box": {
-      "@apply bg-gray-stroke": {},
-    },
-
-
-    // sizing
-    "&-sm": {
-      height: "2.16rem",
-      width: "3.6rem",
-    },
-
-    "&-md": {
-      height: "2.4rem",
-      width: "4rem",
-    },
-
-    "&-lg": {
-      height: "2.64rem",
-      width: "4.4rem",
-    },
-  },
-
-  // Knob
-  ".form-switch-box": {
-    "@apply transition-transform ease-in-out duration-150 transform bg-white rounded-full shadow translate-x-0": {},
-
-    // sizing
-    "&-sm": {
-      height: "1.6rem",
-      width: "1.7rem",
-    },
-
-    "&-md": {
-      height: "2rem",
-      width: "2rem",
-    },
-
-    "&-lg": {
-      height: "2.2rem",
-      width: "2.2rem",
-    },
-  },
-});
+module.exports = Switch = (colors) => ({
+  ".form-switch-label": {
+    "@apply inline-block align-middle": {},
+  },
+  ".form-switch": {
+    "@apply rounded-full p-0.5 cursor-base focus:outline-none": {},
+    "@apply bg-gray-stroke dark:bg-neutral-700": {},
+    // Hover
+    //"@apply hover:bg-neutral-300 dark:hover:bg-neutral-600": {},
+
+    border: "0.1rem solid transparent",
+
+    "input[type=checkbox]:checked + &, input[type=checkbox][aria-checked=mixed] + &": {
+      backgroundColor: "currentColor",
+      ".form-switch-box-sm": {
+        transform: "translateX(1.42rem)",
+      },
+      ".form-switch-box-md": {
+        transform: "translateX(1.6rem)",
+      },
+      ".form-switch-box-lg": {
+        transform: "translateX(1.78rem)",
+      },
+    },
+
+
+
+    "input[type=checkbox]:focus-visible + &": {
+      "@apply z-base !important": {},
+      "@apply border-primary !important": {},
+      "@apply ring-4 ring-black !important": {},
+    },
+
+    "input[type=checkbox]:checked:focus-visible + &, input[type=checkbox][aria-checked=mixed]:focus-visible + &": {
+      "@apply ring-black !important": {},
+    },
+    ".dark input[type=checkbox]:checked:focus-visible + &,.dark input[type=checkbox][aria-checked=mixed]:focus-visible + &": {
+      "@apply ring-black !important": {},
+    },
+    "input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &": {
+      "@apply cursor-base": {},
+    },
+
+    // colors
+    ...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[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",
+          },
+        },
+      }),
+      {}
+    ),
+
+    // disabled
+    "&-disabled": {
+      "@apply cursor-not-allowed": {},
+
+      "&": {
+        backgroundColor: "#ECECEC",
+      }
+    },
+
+    "input[type=checkbox]:not(:checked) + &-disabled .form-switch-box": {
+      "@apply bg-gray-stroke": {},
+    },
+
+
+    // sizing
+    "&-sm": {
+      height: "2.16rem",
+      width: "3.6rem",
+    },
+
+    "&-md": {
+      height: "2.4rem",
+      width: "4rem",
+    },
+
+    "&-lg": {
+      height: "2.64rem",
+      width: "4.4rem",
+    },
+  },
+
+  // Knob
+  ".form-switch-box": {
+    "@apply transition-transform ease-in-out duration-150 transform bg-white rounded-full shadow translate-x-0": {},
+
+    // sizing
+    "&-sm": {
+      height: "1.6rem",
+      width: "1.7rem",
+    },
+
+    "&-md": {
+      height: "2rem",
+      width: "2rem",
+    },
+
+    "&-lg": {
+      height: "2.2rem",
+      width: "2.2rem",
+    },
+  },
+});

package/src/components/table.js

@@ -1,13 +1,13 @@
-module.exports = Table = () => ({
-    ".table": {
-        "@apply min-w-full border-collapse border-gray-stroke divide-gray-lighter table-auto": {},
-
-        "&-item": {
-            "@apply px-6 py-4 border border-gray-stroke whitespace-nowrap": {},
-
-            "&:nth-child(odd)": {
-                "@apply bg-gray-lighter": {},
-            }
-        }
-    },
-});
+module.exports = Table = () => ({
+    ".table": {
+        "@apply min-w-full border-collapse border-gray-stroke divide-gray-lighter table-auto": {},
+
+        "&-item": {
+            "@apply px-6 py-4 border border-gray-stroke whitespace-nowrap": {},
+
+            "&:nth-child(odd)": {
+                "@apply bg-gray-lighter": {},
+            }
+        }
+    },
+});