@node-core/ui-components 1.0.1-cc5c2626b0639fe2088a736f54169ea3e10ed325 → 1.0.1-e1f87bde264af01e260a8efa4fab1749a2c6bc29

package/Common/Modal/index.module.css

@@ -1,79 +1,234 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .overlay {
-  @apply fixed
-    inset-0
-    flex
-    justify-center
-    bg-white/40
-    backdrop-blur-[2px]
-    dark:bg-neutral-950/40;
-
+  position: fixed;
+  inset: calc(var(--spacing, 0.25rem)*0);
+  display: flex;
+  justify-content: center;
+  background-color: color-mix(in srgb, #fff 40%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-white, #fff) 40%, transparent);
+  }
+  --tw-backdrop-blur: blur(2px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: color-mix(in srgb, #0d121c 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-neutral-950, #0d121c) 40%, transparent);
+    }
+  }
   .content {
-    @apply xs:p-6
-      relative
-      m-4
-      inline-flex
-      w-full
-      max-w-3xl
-      flex-col
-      gap-2
-      overflow-y-auto
-      rounded
-      border
-      border-neutral-200
-      bg-white
-      p-8
-      focus:outline-none
-      sm:my-20
-      xl:p-12
-      dark:bg-neutral-950;
+    position: relative;
+    margin: calc(var(--spacing, 0.25rem)*4);
+    display: inline-flex;
+    width: 100%;
+    max-width: var(--container-3xl, 48rem);
+    flex-direction: column;
+    gap: calc(var(--spacing, 0.25rem)*2);
+    overflow-y: auto;
+    border-radius: 0.25rem;
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-neutral-200, #e9edf0);
+    background-color: var(--color-white, #fff);
+    padding: calc(var(--spacing, 0.25rem)*8);
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    @media (width >= 670px) {
+      padding: calc(var(--spacing, 0.25rem)*6);
+    }
+    @media (width >= 40rem) {
+      margin-block: calc(var(--spacing, 0.25rem)*20);
+    }
+    @media (width >= 80rem) {
+      padding: calc(var(--spacing, 0.25rem)*12);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-950, #0d121c);
+    }
   }
-
   .close {
-    @apply absolute
-      right-3
-      top-3
-      block
-      size-7
-      cursor-pointer
-      rounded-sm
-      p-1
-      hover:bg-neutral-100
-      focus:outline-none
-      focus:ring-2
-      focus:ring-neutral-200
-      dark:hover:bg-neutral-900
-      dark:focus:ring-neutral-900;
+    position: absolute;
+    top: calc(var(--spacing, 0.25rem)*3);
+    right: calc(var(--spacing, 0.25rem)*3);
+    display: block;
+    width: calc(var(--spacing, 0.25rem)*7);
+    height: calc(var(--spacing, 0.25rem)*7);
+    cursor: pointer;
+    border-radius: var(--radius-sm, 0.25rem);
+    padding: calc(var(--spacing, 0.25rem)*1);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-neutral-100, #f6f7f9);
+      }
+    }
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus {
+      --tw-ring-color: var(--color-neutral-200, #e9edf0);
+    }
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-neutral-900, #2c3437);
+        }
+      }
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &:focus {
+        --tw-ring-color: var(--color-neutral-900, #2c3437);
+      }
+    }
   }
-
   .title {
-    @apply text-3xl
-      font-semibold
-      text-neutral-900
-      dark:text-white;
+    font-size: var(--text-3xl, 1.875rem);
+    line-height: var(--tw-leading, var(--text-3xl--line-height, 1.2));
+    --tw-font-weight: var(--font-weight-semibold, 600);
+    font-weight: var(--font-weight-semibold, 600);
+    color: var(--color-neutral-900, #2c3437);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
   }
-
   .description {
-    @apply font-regular
-      mb-2
-      text-lg
-      text-neutral-800
-      dark:text-neutral-200;
+    margin-bottom: calc(var(--spacing, 0.25rem)*2);
+    font-size: var(--text-lg, 1.125rem);
+    line-height: var(--tw-leading, var(--text-lg--line-height, 1.55556));
+    --tw-font-weight: var(--font-weight-regular, 400);
+    font-weight: var(--font-weight-regular, 400);
+    color: var(--color-neutral-800, #556066);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
   }
-
   .wrapper {
-    @apply flex
-      flex-col
-      gap-4;
-
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing, 0.25rem)*4);
     pre {
-      @apply overflow-auto;
+      overflow: auto;
     }
-
     code,
     a {
-      @apply break-words;
+      overflow-wrap: break-word;
     }
   }
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/NodejsLogo/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NodejsIcon from '#ui/Icons/Logos/Nodejs';
+import style from './index.module.css';
+const NodejsLogo = props => {
+    return _jsx(NodejsIcon, { className: style.nodejsLogo, ...props });
+};
+export default NodejsLogo;

package/Common/NodejsLogo/index.module.css

@@ -1,6 +1,5 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .nodejsLogo {
-  @apply h-6
-    w-20;
+  height: calc(var(--spacing, 0.25rem)*6);
+  width: calc(var(--spacing, 0.25rem)*20);
 }

package/Common/Notification/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const Notification = ({ open, duration = 5000, onChange, children, className, }) => (_jsx(ToastPrimitive.Root, { open: open, duration: duration, onOpenChange: onChange, className: classNames(styles.root, className), children: _jsx(ToastPrimitive.Title, { className: styles.message, children: children }) }));
+export default Notification;

package/Common/Notification/index.module.css

@@ -1,20 +1,104 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .root {
-  @apply m-6
-    rounded-sm
-    border
-    border-neutral-200
-    bg-white
-    px-4
-    py-3
-    shadow-lg
-    dark:border-neutral-800
-    dark:bg-neutral-900;
-}
-
+  margin: calc(var(--spacing, 0.25rem)*6);
+  border-radius: var(--radius-sm, 0.25rem);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-neutral-200, #e9edf0);
+  background-color: var(--color-white, #fff);
+  padding-inline: calc(var(--spacing, 0.25rem)*4);
+  padding-block: calc(var(--spacing, 0.25rem)*3);
+  --tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in srgb, #101828 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in srgb, #101828 8%, transparent));
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 8%, transparent));
+  }
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-800, #556066);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: var(--color-neutral-900, #2c3437);
+  }
+}
 .message {
-  @apply font-medium
-    text-green-600
-    dark:text-white;
+  --tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-green-600, #417e38);
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-white, #fff);
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
 }

package/Common/Preview/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import HexagonGrid from '#ui/Icons/HexagonGrid';
+import JsWhiteIcon from '#ui/Icons/Logos/JsWhite';
+import styles from './index.module.css';
+const Preview = ({ type = 'announcements', title }) => (_jsx("div", { className: classNames(styles.root, styles[type]), children: _jsxs("div", { className: styles.container, "aria-hidden": true, children: [_jsx(HexagonGrid, { className: styles.hexagon }), _jsx(JsWhiteIcon, { className: styles.logo }), title] }) }));
+export default Preview;