@node-core/ui-components 1.0.1-8d40ab18244525be54e73968c130884191ec178a → 1.0.1-8d8aeae1d57db17b2826637c948ae91f04155f12

package/Common/BadgeGroup/index.module.css

@@ -1,77 +1,153 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .wrapper {
-  @apply flex
-    w-fit
-    items-center
-    rounded-full
-    border
-    py-1
-    pl-1
-    pr-2.5
-    text-sm
-    font-medium;
-
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: calc(infinity*1px);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  padding-block: calc(var(--spacing, 0.25rem)*1);
+  padding-right: calc(var(--spacing, 0.25rem)*2.5);
+  padding-left: calc(var(--spacing, 0.25rem)*1);
+  font-size: var(--text-sm, 0.875rem);
+  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+  --tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  @media (width >= 670px) {
+    width: fit-content;
+  }
   .icon {
-    @apply size-4;
+    width: calc(var(--spacing, 0.25rem)*4);
+    height: calc(var(--spacing, 0.25rem)*4);
   }
-
   .badge {
-    @apply mr-2;
+    margin-right: calc(var(--spacing, 0.25rem)*2);
   }
-
   .message {
-    @apply mr-1;
+    margin-right: calc(var(--spacing, 0.25rem)*1);
   }
-
   &.default {
-    @apply border-green-200
-      bg-green-100
-      dark:border-green-700
-      dark:bg-neutral-900;
-
+    border-color: var(--color-green-200, #c5e5b4);
+    background-color: var(--color-green-100, #edf2eb);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-green-700, #2c682c);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
     .icon {
-      @apply text-green-500
-        dark:text-green-300;
+      color: var(--color-green-500, #5fa04e);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-green-300, #99cc7d);
+      }
     }
-
-    .message {
-      @apply text-green-700
-        dark:text-green-300;
+    .message,
+    .message a:not(:hover) {
+      color: var(--color-green-700, #2c682c);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-green-300, #99cc7d);
+      }
     }
   }
-
   &.error {
-    @apply border-danger-200
-      bg-danger-100
-      dark:border-danger-700
-      dark:bg-neutral-900;
-
+    border-color: var(--color-danger-200, #fad3d4);
+    background-color: var(--color-danger-100, #fbf1f0);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-danger-700, #b80c0c);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
     .icon {
-      @apply text-danger-500
-        dark:text-danger-300;
+      color: var(--color-danger-500, #f65354);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-danger-300, #fab6b7);
+      }
     }
-
-    .message {
-      @apply text-danger-700
-        dark:text-danger-300;
+    .message,
+    .message a:not(:hover) {
+      color: var(--color-danger-700, #b80c0c);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-danger-300, #fab6b7);
+      }
     }
   }
-
   &.warning {
-    @apply border-warning-200
-      bg-warning-100
-      dark:border-warning-700
-      dark:bg-neutral-900;
-
+    border-color: var(--color-warning-200, #fad9b0);
+    background-color: var(--color-warning-100, #fdf3e7);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-warning-700, #8b4d04);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
     .icon {
-      @apply text-warning-500
-        dark:text-warning-300;
+      color: var(--color-warning-500, #d07912);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-warning-300, #f5bc75);
+      }
     }
-
-    .message {
-      @apply text-warning-700
-        dark:text-warning-300;
+    .message,
+    .message a:not(:hover) {
+      color: var(--color-warning-700, #8b4d04);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-warning-300, #f5bc75);
+      }
     }
   }
+  &.info {
+    border-color: var(--color-info-200, #bce6fc);
+    background-color: var(--color-info-100, #e9f4fa);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-info-700, #066291);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
+    .icon {
+      color: var(--color-info-500, #229ad6);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-info-300, #8ed4f8);
+      }
+    }
+    .message,
+    .message a:not(:hover) {
+      color: var(--color-info-700, #066291);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-info-300, #8ed4f8);
+      }
+    }
+  }
+  &.neutral {
+    border-color: var(--color-neutral-200, #e9edf0);
+    background-color: var(--color-neutral-100, #f6f7f9);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-neutral-700, #6e7b83);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
+    .icon {
+      color: var(--color-neutral-500, #b1bcc2);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-300, #d9e1e4);
+      }
+    }
+    .message,
+    .message a:not(:hover) {
+      color: var(--color-neutral-700, #6e7b83);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-300, #d9e1e4);
+      }
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
 }

package/Common/Banner/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index.module.css';
+const Banner = ({ type = 'default', children, }) => (_jsx("div", { className: `${styles.banner} ${styles[type] || styles.default}`, children: children }));
+export default Banner;

package/Common/Banner/index.module.css

@@ -1,42 +1,45 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .banner {
-  @apply flex
-    w-full
-    flex-row
-    items-center
-    justify-center
-    gap-2
-    px-8
-    py-3
-    text-sm;
-
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  padding-inline: calc(var(--spacing, 0.25rem)*8);
+  padding-block: calc(var(--spacing, 0.25rem)*3);
+  font-size: var(--text-sm, 0.875rem);
+  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
   &,
   a {
-    @apply text-white
-      dark:text-white;
+    color: var(--color-white, #fff);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
   }
-
   a {
-    @apply w-fit
-      underline
-      decoration-white/50;
+    width: fit-content;
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in srgb, #fff 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      text-decoration-color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
+    }
   }
-
   svg {
-    @apply size-4
-      text-white/50;
+    width: calc(var(--spacing, 0.25rem)*4);
+    height: calc(var(--spacing, 0.25rem)*4);
+    color: color-mix(in srgb, #fff 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
+    }
   }
 }
-
 .default {
-  @apply bg-green-600;
+  background-color: var(--color-green-600, #417e38);
 }
-
 .error {
-  @apply bg-danger-600;
+  background-color: var(--color-danger-600, #de1a1b);
 }
-
 .warning {
-  @apply bg-warning-600;
+  background-color: var(--color-warning-600, #ae5f00);
 }

package/Common/BaseActiveLink/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const BaseActiveLink = ({ activeClassName = 'active', allowSubPath = false, className, href = '', pathname = '/', as: Component = 'a', ...props }) => {
+    const finalClassName = classNames(className, {
+        [activeClassName]: allowSubPath
+            ? // When using allowSubPath we want only to check if
+                // the current pathname starts with the utmost upper level
+                // of an href (e.g. /docs/...)
+                pathname.startsWith(`/${href.toString().split('/')[1]}`)
+            : href.toString() === pathname,
+    });
+    return _jsx(Component, { className: finalClassName, href: href, ...props });
+};
+export default BaseActiveLink;

package/Common/BaseButton/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './index.module.css';
+const BaseButton = ({ kind = 'primary', size = 'default', disabled = false, className, as: Component = 'a', ...props }) => {
+    if ('href' in props && Component) {
+        return (_jsx(Component, { role: "button", href: disabled ? undefined : props.href, "aria-disabled": disabled, className: classNames(styles.button, styles[kind], styles[size], className), tabIndex: disabled ? -1 : 0, ...props }));
+    }
+    return (_jsx("button", { disabled: disabled, className: classNames(styles.button, styles[kind], styles[size], className), type: "button", ...props }));
+};
+export default BaseButton;