@node-core/ui-components 1.0.1-1d5a7f279720e5e4da66f43d06a6a9a14cb7c2d2 → 1.0.1-2a5d26feb99da533fd0280486510163fa30d4322

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;

package/Common/BaseCodeBox/index.module.css

@@ -1,78 +1,96 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .root {
-  @apply w-full
-    rounded-sm
-    border
-    border-neutral-900
-    bg-neutral-950;
-
+  width: 100%;
+  border-radius: var(--radius-sm, 0.25rem);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-neutral-900, #2c3437);
+  background-color: var(--color-neutral-950, #0d121c);
   .content {
-    @apply m-0
-      p-4;
-
+    margin: calc(var(--spacing, 0.25rem)*0);
+    padding: calc(var(--spacing, 0.25rem)*4);
     & > code {
-      @apply font-ibm-plex-mono
-        font-regular
-        scrollbar-thin
-        grid
-        overflow-x-auto
-        bg-transparent
-        p-0
-        text-sm
-        leading-snug
-        text-neutral-400
-        [counter-reset:line];
-
+      display: grid;
+      overflow-x: auto;
+      background-color: transparent;
+      padding: calc(var(--spacing, 0.25rem)*0);
+      font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
+      font-size: var(--text-sm, 0.875rem);
+      line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+      --tw-leading: var(--leading-snug, 1.375);
+      line-height: var(--leading-snug, 1.375);
+      --tw-font-weight: var(--font-weight-regular, 400);
+      font-weight: var(--font-weight-regular, 400);
+      color: var(--color-neutral-400, #cbd4d9);
+      counter-reset: line;
+      scrollbar-width: thin;
       & > [class='line'] {
-        @apply relative
-          min-w-0
-          pl-8;
-
+        position: relative;
+        min-width: calc(var(--spacing, 0.25rem)*0);
+        padding-left: calc(var(--spacing, 0.25rem)*8);
         &:not(:empty:last-child)::before {
-          @apply inline-block
-            content-[''];
+          display: inline-block;
+          --tw-content: '';
+          content: var(--tw-content);
         }
-
         &:not(:empty:last-child)::after {
-          @apply font-ibm-plex-mono
-            w-4.5
-            absolute
-            left-0
-            top-0
-            mr-4
-            text-right
-            text-neutral-600
-            [content:counter(line)]
-            [counter-increment:line];
+          position: absolute;
+          top: calc(var(--spacing, 0.25rem)*0);
+          left: calc(var(--spacing, 0.25rem)*0);
+          margin-right: calc(var(--spacing, 0.25rem)*4);
+          width: calc(var(--spacing, 0.25rem)*4.5);
+          text-align: right;
+          font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
+          color: var(--color-neutral-600, #929fa5);
+          content: counter(line);
+          counter-increment: line;
         }
       }
     }
   }
-
   & > .footer {
-    @apply flex
-      items-center
-      justify-between
-      border-t
-      border-t-neutral-900
-      px-4
-      py-3
-      text-sm
-      font-medium;
-
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-top-color: var(--color-neutral-900, #2c3437);
+    padding-inline: calc(var(--spacing, 0.25rem)*4);
+    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));
+    --tw-font-weight: var(--font-weight-medium, 500);
+    font-weight: var(--font-weight-medium, 500);
     & > .language {
-      @apply text-neutral-400;
+      color: var(--color-neutral-400, #cbd4d9);
     }
-
     & > .action {
-      @apply px-3
-        py-1.5
-        font-medium;
+      padding-inline: calc(var(--spacing, 0.25rem)*3);
+      padding-block: calc(var(--spacing, 0.25rem)*1.5);
+      --tw-font-weight: var(--font-weight-medium, 500);
+      font-weight: var(--font-weight-medium, 500);
     }
   }
 }
-
 .icon {
-  @apply size-4;
+  width: calc(var(--spacing, 0.25rem)*4);
+  height: calc(var(--spacing, 0.25rem)*4);
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
 }