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

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;

package/Common/BaseButton/index.module.css

@@ -1,142 +1,372 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .button {
-  @apply px-4.5
-    relative
-    inline-flex
-    items-center
-    justify-center
-    gap-2
-    py-2.5
-    text-center
-    font-semibold
-    motion-safe:transition-colors;
-
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  padding-inline: calc(var(--spacing, 0.25rem)*4.5);
+  padding-block: calc(var(--spacing, 0.25rem)*2.5);
+  text-align: center;
+  --tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  @media (prefers-reduced-motion: no-preference) {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+  }
   svg {
-    @apply size-5;
+    width: calc(var(--spacing, 0.25rem)*5);
+    height: calc(var(--spacing, 0.25rem)*5);
   }
-
   &[aria-disabled='true'] {
-    @apply cursor-not-allowed;
+    cursor: not-allowed;
   }
-
   &.small {
-    @apply px-3
-      py-2
-      text-sm;
+    padding-inline: calc(var(--spacing, 0.25rem)*3);
+    padding-block: calc(var(--spacing, 0.25rem)*2);
+    font-size: var(--text-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
   }
-
   &.neutral {
-    @apply rounded-sm
-      bg-neutral-900
-      text-white
-      dark:text-neutral-200;
-
+    border-radius: var(--radius-sm, 0.25rem);
+    background-color: var(--color-neutral-900, #2c3437);
+    color: var(--color-white, #fff);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
     &:hover:not([aria-disabled='true']) {
-      @apply bg-neutral-800;
+      background-color: var(--color-neutral-800, #556066);
     }
-
     &[aria-disabled='true'] {
-      @apply bg-neutral-900
-        opacity-50;
+      background-color: var(--color-neutral-900, #2c3437);
+      opacity: 50%;
     }
-
     &:focus {
-      @apply bg-neutral-800;
+      background-color: var(--color-neutral-800, #556066);
     }
   }
-
   &.primary {
-    @apply shadow-xs
-      rounded-sm
-      border
-      border-green-600
-      bg-green-600
-      text-white;
-
+    border-radius: var(--radius-sm, 0.25rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-green-600, #417e38);
+    background-color: var(--color-green-600, #417e38);
+    color: var(--color-white, #fff);
+    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in srgb, #101828 5%, transparent));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 5%, transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     &:hover:not([aria-disabled='true']) {
-      @apply border-green-700
-        bg-green-700
-        text-white;
+      border-color: var(--color-green-700, #2c682c);
+      background-color: var(--color-green-700, #2c682c);
+      color: var(--color-white, #fff);
     }
-
     &:focus {
-      @apply border-green-700
-        bg-green-700;
+      border-color: var(--color-green-700, #2c682c);
+      background-color: var(--color-green-700, #2c682c);
     }
-
     &[aria-disabled='true'] {
-      @apply bg-green-600
-        opacity-50;
+      background-color: var(--color-green-600, #417e38);
+      opacity: 50%;
     }
   }
-
   &.secondary {
-    @apply rounded-lg
-      text-neutral-800
-      dark:text-neutral-200;
-
+    border-radius: var(--radius-lg, 0.5rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-neutral-200, #e9edf0);
+    color: var(--color-neutral-800, #556066);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-neutral-900, #2c3437);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
     &:hover:not([aria-disabled='true']) {
-      @apply bg-neutral-100
-        text-neutral-800
-        dark:bg-neutral-900
-        dark:text-neutral-200;
+      background-color: var(--color-neutral-200, #e9edf0);
+      color: var(--color-neutral-800, #556066);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        background-color: var(--color-neutral-900, #2c3437);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-200, #e9edf0);
+      }
     }
-
     &[aria-disabled='true'] {
-      @apply bg-transparent
-        opacity-50;
+      background-color: transparent;
+      opacity: 50%;
     }
-
     &:focus {
-      @apply bg-neutral-100
-        text-neutral-800
-        dark:bg-neutral-900
-        dark:text-neutral-200;
+      background-color: var(--color-neutral-100, #f6f7f9);
+      color: var(--color-neutral-800, #556066);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        background-color: var(--color-neutral-900, #2c3437);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-200, #e9edf0);
+      }
     }
   }
-
   &.special {
-    @apply before:bg-gradient-glow-backdrop
-      shadow-xs
-      rounded-lg
-      border
-      border-green-600/30
-      bg-green-600/10
-      text-white
-      before:absolute
-      before:left-0
-      before:right-0
-      before:top-0
-      before:-z-10
-      before:mx-auto
-      before:h-full
-      before:w-full
-      before:opacity-30
-      before:content-['']
-      after:absolute
-      after:-top-px
-      after:left-0
-      after:right-0
-      after:mx-auto
-      after:h-px
-      after:w-2/5
-      after:bg-gradient-to-r
-      after:from-green-600/0
-      after:via-green-600
-      after:to-green-600/0
-      after:content-[''];
-
+    border-radius: var(--radius-lg, 0.5rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: color-mix(in srgb, #417e38 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-green-600, #417e38) 30%, transparent);
+    }
+    background-color: color-mix(in srgb, #417e38 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-600, #417e38) 10%, transparent);
+    }
+    color: var(--color-white, #fff);
+    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in srgb, #101828 5%, transparent));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 5%, transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+    &::before {
+      content: var(--tw-content);
+      top: calc(var(--spacing, 0.25rem)*0);
+    }
+    &::before {
+      content: var(--tw-content);
+      right: calc(var(--spacing, 0.25rem)*0);
+    }
+    &::before {
+      content: var(--tw-content);
+      left: calc(var(--spacing, 0.25rem)*0);
+    }
+    &::before {
+      content: var(--tw-content);
+      z-index: -10;
+    }
+    &::before {
+      content: var(--tw-content);
+      margin-inline: auto;
+    }
+    &::before {
+      content: var(--tw-content);
+      height: 100%;
+    }
+    &::before {
+      content: var(--tw-content);
+      width: 100%;
+    }
+    &::before {
+      content: var(--tw-content);
+      background-image: radial-gradient( 8em circle at 50% 10px, var(--color-green-400), transparent 30% );
+    }
+    &::before {
+      content: var(--tw-content);
+      opacity: 30%;
+    }
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+    &::after {
+      content: var(--tw-content);
+      position: absolute;
+    }
+    &::after {
+      content: var(--tw-content);
+      top: -1px;
+    }
+    &::after {
+      content: var(--tw-content);
+      right: calc(var(--spacing, 0.25rem)*0);
+    }
+    &::after {
+      content: var(--tw-content);
+      left: calc(var(--spacing, 0.25rem)*0);
+    }
+    &::after {
+      content: var(--tw-content);
+      margin-inline: auto;
+    }
+    &::after {
+      content: var(--tw-content);
+      height: 1px;
+    }
+    &::after {
+      content: var(--tw-content);
+      width: 40%;
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-position: to right in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-from: color-mix(in srgb, #417e38 0%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-from: color-mix(in oklab, var(--color-green-600, #417e38) 0%, transparent);
+      }
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-via: var(--color-green-600, #417e38);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-stops: var(--tw-gradient-via-stops);
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-to: color-mix(in srgb, #417e38 0%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-to: color-mix(in oklab, var(--color-green-600, #417e38) 0%, transparent);
+      }
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
     &[aria-disabled='true'] {
-      @apply opacity-50;
+      opacity: 50%;
     }
-
     &:hover:not([aria-disabled='true']) {
-      @apply bg-green-600/20;
+      background-color: color-mix(in srgb, #417e38 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-green-600, #417e38) 20%, transparent);
+      }
     }
-
     &:focus {
-      @apply bg-green-600/20;
+      background-color: color-mix(in srgb, #417e38 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-green-600, #417e38) 20%, transparent);
+      }
     }
   }
 }
+@property --tw-font-weight {
+  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-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}

package/Common/BaseCodeBox/index.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
+import classNames from 'classnames';
+import { Fragment, isValidElement, useRef } from 'react';
+import BaseButton from '#ui/Common/BaseButton';
+import styles from './index.module.css';
+// Transforms a code element with plain text content into a more structured
+// format for rendering with line numbers
+const transformCode = (code, language) => {
+    if (!isValidElement(code)) {
+        // Early return when the `CodeBox` child is not a valid element since the
+        // type is a ReactNode, and can assume any value
+        return code;
+    }
+    const content = code.props?.children;
+    if (code.type !== 'code' || typeof content !== 'string') {
+        // There is no need to transform an element that is not a code element or
+        // a content that is not a string
+        return code;
+    }
+    // Note that since we use `.split` we will have an extra entry
+    // being an empty string, so we need to remove it
+    const lines = content.split('\n');
+    const extraStyle = language.length === 0 ? { fontFamily: 'monospace' } : {};
+    return (_jsx("code", { style: extraStyle, children: lines
+            .flatMap((line, lineIndex) => {
+            const columns = line.split(' ');
+            return [
+                _jsx("span", { className: "line", children: columns.map((column, columnIndex) => (_jsxs(Fragment, { children: [_jsx("span", { children: column }), columnIndex < columns.length - 1 && _jsx("span", { children: " " })] }, columnIndex))) }, lineIndex),
+                // Add a break line so the text content is formatted correctly
+                // when copying to clipboard
+                '\n',
+            ];
+        })
+            // Here we remove that empty line from before and
+            // the last flatMap entry which is an `\n`
+            .slice(0, -2) }));
+};
+const BaseCodeBox = ({ children, language, className, onCopy, buttonText, as = 'a', showCopyButton = true, }) => {
+    const containerRef = useRef(null);
+    const handleCopy = () => {
+        const text = containerRef.current?.textContent;
+        if (text) {
+            onCopy(text);
+        }
+    };
+    return (_jsxs("div", { className: styles.root, children: [_jsx("pre", { ref: containerRef, className: classNames(styles.content, className), tabIndex: 0, children: transformCode(children, language) }), language && (_jsxs("div", { className: styles.footer, children: [_jsx("span", { className: styles.language, children: language }), showCopyButton && (_jsxs(BaseButton, { as: as, className: styles.action, kind: "neutral", onClick: handleCopy, children: [_jsx(DocumentDuplicateIcon, { className: styles.icon }), buttonText] }))] }))] }));
+};
+export default BaseCodeBox;