@node-core/ui-components 0.0.1 → 1.0.1-1b9af3ec9e0268bfc734b2489cbc584fa3edf026

package/Common/CodeTabs/index.module.css

@@ -0,0 +1,67 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root {
+  > [role='tabpanel'] > :first-child {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  > div:nth-of-type(1) {
+    display: flex;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-neutral-900, #2c3437);
+    background-color: var(--color-neutral-950, #0d121c);
+    padding-inline: calc(var(--spacing, 0.25rem)*2);
+    padding-top: calc(var(--spacing, 0.25rem)*3);
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing, 0.25rem)*4);
+    }
+    .trigger {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+      border-bottom-color: transparent;
+      padding-inline: calc(var(--spacing, 0.25rem)*1);
+      color: var(--color-neutral-200, #e9edf0);
+      &[data-state='active'] {
+        border-bottom-color: var(--color-green-400, #84ba64);
+        color: var(--color-green-400, #84ba64);
+      }
+    }
+    .link {
+      display: none;
+      align-items: center;
+      gap: calc(var(--spacing, 0.25rem)*2);
+      text-align: center;
+      color: var(--color-neutral-200, #e9edf0);
+      @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));
+      }
+      @media (width >= 64rem) {
+        display: flex;
+      }
+      & > .icon {
+        width: calc(var(--spacing, 0.25rem)*4);
+        height: calc(var(--spacing, 0.25rem)*4);
+        color: var(--color-neutral-300, #d9e1e4);
+      }
+      &:is(:link, :visited) {
+        &:hover {
+          color: var(--color-neutral-400, #cbd4d9);
+          & > .icon {
+            color: var(--color-neutral-600, #929fa5);
+          }
+        }
+      }
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/Common/DataTag/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './index.module.css';
+// These symbols match up with the types used in
+// node core, and the ones defined at
+// https://github.com/nodejs/api-docs-tooling/blob/main/src/types.d.ts#L22 (`HeadingMetadataEntry['type']`)
+const symbolMap = {
+    event: 'E',
+    method: 'M',
+    property: 'P',
+    class: 'C',
+    module: 'M',
+    classMethod: 'S',
+    global: 'G',
+    ctor: 'C',
+};
+const DataTag = ({ kind, size = 'md' }) => (_jsx("div", { className: classNames(styles.dataTag, styles[size], styles[kind]), children: _jsx("span", { children: symbolMap[kind] }) }));
+export default DataTag;

package/Common/DataTag/index.module.css

@@ -0,0 +1,54 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.dataTag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(infinity*1px);
+  --tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-white, #fff);
+  &.lg {
+    width: calc(var(--spacing, 0.25rem)*12);
+    height: calc(var(--spacing, 0.25rem)*12);
+    font-size: var(--text-2xl, 1.5rem);
+    line-height: var(--tw-leading, var(--text-2xl--line-height, 1.33333));
+  }
+  &.md {
+    width: calc(var(--spacing, 0.25rem)*10);
+    height: calc(var(--spacing, 0.25rem)*10);
+    font-size: var(--text-xl, 1.25rem);
+    line-height: var(--tw-leading, var(--text-xl--line-height, 1.4));
+  }
+  &.sm {
+    width: calc(var(--spacing, 0.25rem)*8);
+    height: calc(var(--spacing, 0.25rem)*8);
+  }
+  &.event {
+    background-color: var(--color-accent1-600, #9756d6);
+  }
+  &.method {
+    background-color: var(--color-info-600, #0c7bb3);
+  }
+  &.property {
+    background-color: var(--color-green-600, #417e38);
+  }
+  &.class {
+    background-color: var(--color-warning-600, #ae5f00);
+  }
+  &.module {
+    background-color: var(--color-red-600, oklch(0.577 0.245 27.325));
+  }
+  &.classMethod {
+    background-color: var(--color-blue-600, oklch(0.546 0.245 262.881));
+  }
+  &.ctor {
+    background-color: var(--color-accent2-600, #d6246e);
+  }
+  &.global {
+    background-color: var(--color-amber-600, oklch(0.666 0.179 58.318));
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/GlowingBackdrop/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import HexagonGrid from '#ui/Icons/HexagonGrid';
+import styles from './index.module.css';
+const GlowingBackdrop = () => (_jsx("div", { className: styles.glowingBackdrop, children: _jsx(HexagonGrid, {}) }));
+export default GlowingBackdrop;

package/Common/GlowingBackdrop/index.module.css

@@ -0,0 +1,130 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.glowingBackdrop {
+  position: absolute;
+  top: calc(var(--spacing, 0.25rem)*0);
+  left: calc(var(--spacing, 0.25rem)*0);
+  z-index: -10;
+  width: 100%;
+  height: 100%;
+  opacity: 50%;
+  &::after {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::after {
+    content: var(--tw-content);
+    inset: calc(var(--spacing, 0.25rem)*0);
+  }
+  &::after {
+    content: var(--tw-content);
+    margin: auto;
+  }
+  &::after {
+    content: var(--tw-content);
+    aspect-ratio: 1 / 1;
+  }
+  &::after {
+    content: var(--tw-content);
+    width: 300px;
+  }
+  &::after {
+    content: var(--tw-content);
+    border-radius: calc(infinity*1px);
+  }
+  &::after {
+    content: var(--tw-content);
+    background-color: var(--color-green-300, #99cc7d);
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-blur: blur(120px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: '';
+    content: var(--tw-content);
+  }
+  @media (width >= 48rem) {
+    opacity: 100%;
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    &::after {
+      content: var(--tw-content);
+      background-color: var(--color-green-700, #2c682c);
+    }
+  }
+  svg {
+    position: absolute;
+    inset: calc(var(--spacing, 0.25rem)*0);
+    margin: auto;
+    aspect-ratio: 1.67;
+    max-width: 1004px;
+    object-fit: cover;
+    color: var(--color-neutral-300, #d9e1e4);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: color-mix(in srgb, #2c3437 75%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-neutral-900, #2c3437) 75%, transparent);
+      }
+    }
+  }
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}

package/Common/LanguageDropDown/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LanguageIcon } from '@heroicons/react/24/outline';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const LanguageDropdown = ({ onChange = () => { }, currentLanguage, availableLanguages, ariaLabel, }) => {
+    return (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx("button", { className: styles.languageDropdown, "aria-label": ariaLabel, children: _jsx(LanguageIcon, { height: "20" }) }) }), _jsx(DropdownMenu.Portal, { children: _jsx(DropdownMenu.Content, { align: "start", className: styles.dropDownContent, sideOffset: 5, children: _jsx("div", { children: availableLanguages.map(({ name, code, localName }) => (_jsx(DropdownMenu.Item, { onClick: () => onChange({ name, code, localName }), className: classNames(styles.dropDownItem, {
+                                [styles.currentDropDown]: code === currentLanguage,
+                            }), children: localName }, code))) }) }) })] }));
+};
+export default LanguageDropdown;

package/Common/LanguageDropDown/index.module.css

@@ -0,0 +1,151 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.languageDropdown {
+  height: calc(var(--spacing, 0.25rem)*9);
+  width: calc(var(--spacing, 0.25rem)*9);
+  border-radius: var(--radius-md, 0.375rem);
+  padding: calc(var(--spacing, 0.25rem)*2);
+  color: var(--color-neutral-700, #6e7b83);
+  @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));
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-neutral-300, #d9e1e4);
+  }
+  &:hover {
+    background-color: var(--color-neutral-100, #f6f7f9);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
+  }
+}
+.dropDownContent {
+  max-height: calc(var(--spacing, 0.25rem)*80);
+  width: calc(var(--spacing, 0.25rem)*48);
+  overflow: hidden;
+  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);
+  --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-900, #2c3437);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: var(--color-neutral-950, #0d121c);
+  }
+  > div {
+    max-height: calc(var(--spacing, 0.25rem)*80);
+    width: calc(var(--spacing, 0.25rem)*48);
+    overflow-y: auto;
+  }
+}
+.dropDownItem {
+  cursor: pointer;
+  padding-inline: calc(var(--spacing, 0.25rem)*2.5);
+  padding-block: calc(var(--spacing, 0.25rem)*1.5);
+  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);
+  color: var(--color-neutral-800, #556066);
+  --tw-outline-style: none;
+  outline-style: none;
+  @media (forced-colors: active) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  &[data-highlighted] {
+    background-color: var(--color-green-600, #417e38);
+  }
+  &[data-highlighted] {
+    color: var(--color-white, #fff);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-white, #fff);
+  }
+}
+.currentDropDown {
+  background-color: var(--color-green-600, #417e38);
+  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/Modal/index.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import * as Dialog from '@radix-ui/react-dialog';
+import styles from './index.module.css';
+const Modal = ({ children, open = false, onOpenChange = () => { }, }) => (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsx(Dialog.Portal, { children: _jsx(Dialog.Overlay, { className: styles.overlay, children: _jsxs(Dialog.Content, { className: styles.content, children: [_jsx(Dialog.Trigger, { className: styles.close, children: _jsx(XMarkIcon, {}) }), children, _jsx(Dialog.Close, {})] }) }) }) }));
+const Title = ({ children }) => (_jsx(Dialog.Title, { className: styles.title, children: children }));
+const Description = ({ children }) => (_jsx(Dialog.Description, { className: styles.description, children: children }));
+const Content = ({ children }) => (_jsx("main", { className: styles.wrapper, children: children }));
+export { Modal, Title, Description, Content };

package/Common/Modal/index.module.css

@@ -0,0 +1,234 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.overlay {
+  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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing, 0.25rem)*4);
+    pre {
+      overflow: auto;
+    }
+    code,
+    a {
+      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 = ({ variant = 'default', ariaLabel, }) => {
+    return (_jsx(NodejsIcon, { variant: variant, className: style.nodejsLogo, ariaLabel: ariaLabel }));
+};
+export default NodejsLogo;

package/Common/NodejsLogo/index.module.css

@@ -0,0 +1,5 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.nodejsLogo {
+  height: calc(var(--spacing, 0.25rem)*6);
+  width: calc(var(--spacing, 0.25rem)*20);
+}