@node-core/ui-components 1.0.1-ed840c2c5b3a7f7a58ec6d75280c2b34129fb5dc → 1.0.1-f1580a0a3365d3d4d0236b80ce9eff447d2890dd

package/Common/CodeTabs/index.module.css

@@ -1,56 +1,2 @@
-@reference "../../styles/index.css";
-
-.root {
-  > [role='tabpanel'] > :first-child {
-    @apply rounded-t-none;
-  }
-
-  > div:nth-of-type(1) {
-    @apply flex
-      rounded-t
-      border-x
-      border-t
-      border-neutral-900
-      bg-neutral-950
-      px-2
-      pt-3
-      md:px-4;
-
-    .trigger {
-      @apply border-b
-        border-b-transparent
-        px-1
-        text-neutral-200;
-
-      &[data-state='active'] {
-        @apply border-b-green-400
-          text-green-400;
-      }
-    }
-
-    .link {
-      @apply hidden
-        items-center
-        gap-2
-        text-center
-        text-neutral-200
-        motion-safe:transition-colors
-        lg:flex;
-
-      & > .icon {
-        @apply size-4
-          text-neutral-300;
-      }
-
-      &:is(:link, :visited) {
-        &:hover {
-          @apply text-neutral-400;
-
-          & > .icon {
-            @apply text-neutral-600;
-          }
-        }
-      }
-    }
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root>[role=tabpanel]>:first-child{border-top-left-radius:0;border-top-right-radius:0}.root>div:first-of-type{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,.25rem)*2);padding-top:calc(var(--spacing,.25rem)*3);border-top-left-radius:.25rem;border-top-right-radius:.25rem;display:flex}@media (min-width:48rem){.root>div:first-of-type{padding-inline:calc(var(--spacing,.25rem)*4)}}.root>div:first-of-type .trigger{border-bottom-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem)*1);color:var(--color-neutral-200,#e9edf0);border-bottom-width:1px;border-bottom-color:#0000}.root>div:first-of-type .trigger[data-state=active]{border-bottom-color:var(--color-green-400,#84ba64);color:var(--color-green-400,#84ba64)}.root>div:first-of-type .link{align-items:center;gap:calc(var(--spacing,.25rem)*2);text-align:center;color:var(--color-neutral-200,#e9edf0);display:none}@media (prefers-reduced-motion:no-preference){.root>div:first-of-type .link{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(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}}@media (min-width:64rem){.root>div:first-of-type .link{display:flex}}.root>div:first-of-type .link>.icon{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);color:var(--color-neutral-300,#d9e1e4)}.root>div:first-of-type .link:is(:link,:visited):hover{color:var(--color-neutral-400,#cbd4d9)}.root>div:first-of-type .link:is(:link,:visited):hover>.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

@@ -1,56 +1,2 @@
-@reference "../../styles/index.css";
-
-.dataTag {
-  @apply flex
-    items-center
-    justify-center
-    rounded-full
-    font-semibold
-    text-white;
-
-  &.lg {
-    @apply size-12
-      text-2xl;
-  }
-
-  &.md {
-    @apply size-10
-      text-xl;
-  }
-
-  &.sm {
-    @apply size-8;
-  }
-
-  &.event {
-    @apply bg-accent1-600;
-  }
-
-  &.method {
-    @apply bg-info-600;
-  }
-
-  &.property {
-    @apply bg-green-600;
-  }
-
-  &.class {
-    @apply bg-warning-600;
-  }
-
-  &.module {
-    @apply bg-red-600;
-  }
-
-  &.classMethod {
-    @apply bg-blue-600;
-  }
-
-  &.ctor {
-    @apply bg-accent2-600;
-  }
-
-  &.global {
-    @apply bg-amber-600;
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.dataTag{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-white,#fff);border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}.dataTag.lg{width:calc(var(--spacing,.25rem)*12);height:calc(var(--spacing,.25rem)*12);font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,1.33333))}.dataTag.md{width:calc(var(--spacing,.25rem)*10);height:calc(var(--spacing,.25rem)*10);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,1.4))}.dataTag.sm{width:calc(var(--spacing,.25rem)*8);height:calc(var(--spacing,.25rem)*8)}.dataTag.event{background-color:var(--color-accent1-600,#9756d6)}.dataTag.method{background-color:var(--color-info-600,#0c7bb3)}.dataTag.property{background-color:var(--color-green-600,#417e38)}.dataTag.class{background-color:var(--color-warning-600,#ae5f00)}.dataTag.module{background-color:var(--color-red-600,oklch(57.7% .245 27.325))}.dataTag.classMethod{background-color:var(--color-blue-600,oklch(54.6% .245 262.881))}.dataTag.ctor{background-color:var(--color-accent2-600,#d6246e)}.dataTag.global{background-color:var(--color-amber-600,oklch(66.6% .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

@@ -1,32 +1,2 @@
-@reference "../../styles/index.css";
-
-.glowingBackdrop {
-  @apply absolute
-    left-0
-    top-0
-    -z-10
-    size-full
-    opacity-50
-    after:absolute
-    after:inset-0
-    after:m-auto
-    after:aspect-square
-    after:w-[300px]
-    after:rounded-full
-    after:bg-green-300
-    after:blur-[120px]
-    after:content-['']
-    md:opacity-100
-    dark:after:bg-green-700;
-
-  svg {
-    @apply absolute
-      inset-0
-      m-auto
-      aspect-[1.67]
-      max-w-[1004px]
-      object-cover
-      text-neutral-300
-      dark:text-neutral-900/75;
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.glowingBackdrop{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);z-index:-10;opacity:.5;width:100%;height:100%;position:absolute}.glowingBackdrop:after{content:var(--tw-content);content:var(--tw-content);inset:calc(var(--spacing,.25rem)*0);content:var(--tw-content);content:var(--tw-content);aspect-ratio:1;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);background-color:var(--color-green-300,#99cc7d);content:var(--tw-content);--tw-blur:blur(120px);width:300px;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,);content:var(--tw-content);--tw-content:"";content:var(--tw-content);border-radius:3.40282e38px;margin:auto;position:absolute}@media (min-width:48rem){.glowingBackdrop{opacity:1}}.glowingBackdrop:where([data-theme=dark],[data-theme=dark] *):after{content:var(--tw-content);background-color:var(--color-green-700,#2c682c)}.glowingBackdrop svg{inset:calc(var(--spacing,.25rem)*0);aspect-ratio:1.67;object-fit:cover;max-width:1004px;color:var(--color-neutral-300,#d9e1e4);margin:auto;position:absolute}.glowingBackdrop svg:where([data-theme=dark],[data-theme=dark] *){color:#2c3437bf}@supports (color:color-mix(in lab, red, red)){.glowingBackdrop svg:where([data-theme=dark],[data-theme=dark] *){color:color-mix(in oklab,var(--color-neutral-900,#2c3437)75%,transparent)}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@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

@@ -1,53 +1,2 @@
-@reference "../../styles/index.css";
-
-.languageDropdown {
-  @apply h-9
-    w-9
-    rounded-md
-    p-2
-    text-neutral-700
-    motion-safe:transition-colors
-    dark:text-neutral-300;
-
-  &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-  }
-}
-
-.dropDownContent {
-  @apply max-h-80
-    w-48
-    overflow-hidden
-    rounded-sm
-    border
-    border-neutral-200
-    bg-white
-    shadow-lg
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-
-  > div {
-    @apply max-h-80
-      w-48
-      overflow-y-auto;
-  }
-}
-
-.dropDownItem {
-  @apply outline-hidden
-    cursor-pointer
-    px-2.5
-    py-1.5
-    text-sm
-    font-medium
-    text-neutral-800
-    data-[highlighted]:bg-green-600
-    data-[highlighted]:text-white
-    dark:text-white;
-}
-
-.currentDropDown {
-  @apply bg-green-600
-    text-white;
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.languageDropdown{height:calc(var(--spacing,.25rem)*9);width:calc(var(--spacing,.25rem)*9);border-radius:var(--radius-md,.375rem);padding:calc(var(--spacing,.25rem)*2);color:var(--color-neutral-700,#6e7b83)}@media (prefers-reduced-motion:no-preference){.languageDropdown{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(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}}.languageDropdown:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-300,#d9e1e4)}.languageDropdown:hover{background-color:var(--color-neutral-100,#f6f7f9)}.languageDropdown:hover:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437)}.dropDownContent{max-height:calc(var(--spacing,.25rem)*80);width:calc(var(--spacing,.25rem)*48);border-radius:var(--radius-sm,.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,#10182808),0px 12px 16px -4px var(--tw-shadow-color,#10182814);overflow:hidden}@supports (color:color-mix(in lab, red, red)){.dropDownContent{--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))}}.dropDownContent{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dropDownContent:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437);background-color:var(--color-neutral-950,#0d121c)}.dropDownContent>div{max-height:calc(var(--spacing,.25rem)*80);width:calc(var(--spacing,.25rem)*48);overflow-y:auto}.dropDownItem{cursor:pointer;padding-inline:calc(var(--spacing,.25rem)*2.5);padding-block:calc(var(--spacing,.25rem)*1.5);font-size:var(--text-sm,.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){.dropDownItem{outline-offset:2px;outline:2px solid #0000}}.dropDownItem[data-highlighted]{background-color:var(--color-green-600,#417e38);color:var(--color-white,#fff)}.dropDownItem: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:0}@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

@@ -1,79 +1,2 @@
-@reference "../../styles/index.css";
-
-.overlay {
-  @apply fixed
-    inset-0
-    flex
-    justify-center
-    bg-white/40
-    backdrop-blur-[2px]
-    dark:bg-neutral-950/40;
-
-  .content {
-    @apply xs:p-6
-      relative
-      m-4
-      inline-flex
-      w-full
-      max-w-3xl
-      flex-col
-      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;
-  }
-
-  .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;
-  }
-
-  .title {
-    @apply mb-2
-      text-3xl
-      font-semibold
-      text-neutral-900
-      dark:text-white;
-  }
-
-  .description {
-    @apply font-regular
-      mb-4
-      text-lg
-      text-neutral-800
-      dark:text-neutral-200;
-  }
-
-  .wrapper {
-    @apply flex
-      flex-col
-      gap-4;
-
-    pre {
-      @apply overflow-auto;
-    }
-
-    code,
-    a {
-      @apply break-words;
-    }
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.overlay{inset:calc(var(--spacing,.25rem)*0);background-color:#fff6;justify-content:center;display:flex;position:fixed}@supports (color:color-mix(in lab, red, red)){.overlay{background-color:color-mix(in oklab,var(--color-white,#fff)40%,transparent)}}.overlay{--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,)}.overlay:where([data-theme=dark],[data-theme=dark] *){background-color:#0d121c66}@supports (color:color-mix(in lab, red, red)){.overlay:where([data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab,var(--color-neutral-950,#0d121c)40%,transparent)}}.overlay .content{margin:calc(var(--spacing,.25rem)*4);width:100%;max-width:var(--container-3xl,48rem);gap:calc(var(--spacing,.25rem)*2);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,.25rem)*8);border-radius:.25rem;flex-direction:column;display:inline-flex;position:relative;overflow-y:auto}.overlay .content:focus{--tw-outline-style:none;outline-style:none}@media (min-width:670px){.overlay .content{padding:calc(var(--spacing,.25rem)*6)}}@media (min-width:40rem){.overlay .content{margin-block:calc(var(--spacing,.25rem)*20)}}@media (min-width:80rem){.overlay .content{padding:calc(var(--spacing,.25rem)*12)}}.overlay .content:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-950,#0d121c)}.overlay .close{top:calc(var(--spacing,.25rem)*3);right:calc(var(--spacing,.25rem)*3);width:calc(var(--spacing,.25rem)*7);height:calc(var(--spacing,.25rem)*7);cursor:pointer;border-radius:var(--radius-sm,.25rem);padding:calc(var(--spacing,.25rem)*1);display:block;position:absolute}@media (hover:hover){.overlay .close:hover{background-color:var(--color-neutral-100,#f6f7f9)}}.overlay .close: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);--tw-ring-color:var(--color-neutral-200,#e9edf0);--tw-outline-style:none;outline-style:none}@media (hover:hover){.overlay .close:where([data-theme=dark],[data-theme=dark] *):hover{background-color:var(--color-neutral-900,#2c3437)}}.overlay .close:where([data-theme=dark],[data-theme=dark] *):focus{--tw-ring-color:var(--color-neutral-900,#2c3437)}.overlay .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)}.overlay .title:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.overlay .description{margin-bottom:calc(var(--spacing,.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)}.overlay .description:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.overlay .wrapper{gap:calc(var(--spacing,.25rem)*4);flex-direction:column;display:flex}.overlay .wrapper pre{overflow:auto}.overlay .wrapper code,.overlay .wrapper 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:0}@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,2 @@
-@reference "../../styles/index.css";
-
-.nodejsLogo {
-  @apply h-6
-    w-20;
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.nodejsLogo{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.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,2 @@
-@reference "../../styles/index.css";
-
-.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;
-}
-
-.message {
-  @apply font-medium
-    text-green-600
-    dark:text-white;
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root{margin:calc(var(--spacing,.25rem)*6);border-radius:var(--radius-sm,.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,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);--tw-shadow:0px 4px 6px -2px var(--tw-shadow-color,#10182808),0px 12px 16px -4px var(--tw-shadow-color,#10182814)}@supports (color:color-mix(in lab, red, red)){.root{--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))}}.root{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.root:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-800,#556066);background-color:var(--color-neutral-900,#2c3437)}.message{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-green-600,#417e38)}.message: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:0}@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;

package/Common/Preview/index.module.css

@@ -1,79 +1,2 @@
-@reference "../../styles/index.css";
-
-.root {
-  @apply after:bg-gradient-radial
-    @container/preview
-    relative
-    flex
-    aspect-[1.90/1]
-    items-center
-    rounded-sm
-    border
-    border-neutral-900
-    bg-neutral-950
-    after:absolute
-    after:inset-0
-    after:m-auto
-    after:aspect-square
-    after:w-1/3
-    after:rounded-full
-    after:blur-2xl
-    after:content-[''];
-
-  &.announcements {
-    @apply after:from-green-700/90;
-  }
-
-  &.release {
-    @apply after:from-info-600/90;
-  }
-
-  &.vulnerability {
-    @apply after:from-warning-600/90;
-  }
-
-  .container {
-    @apply @sm/preview:text-base
-      @md/preview:gap-6
-      @md/preview:text-lg
-      @lg/preview:gap-8
-      @lg/preview:text-xl
-      @xl/preview:gap-12
-      @xl/preview:text-2xl
-      @2xl/preview:text-3xl
-      z-10
-      mx-auto
-      flex
-      w-2/3
-      max-w-xl
-      flex-col
-      gap-4
-      text-center
-      text-xs
-      font-semibold
-      text-white;
-
-    .hexagon {
-      @apply @md/preview:h-3/5
-        @md/preview:w-3/5
-        @lg/preview:h-2/3
-        @lg/preview:w-2/3
-        @xl/preview:h-3/5
-        @xl/preview:w-3/5
-        @2xl/preview:h-2/3
-        @2xl/preview:w-2/3
-        absolute
-        inset-0
-        m-auto
-        size-full;
-    }
-
-    .logo {
-      @apply @md/preview:size-14
-        @lg/preview:size-16
-        @xl/preview:size-20
-        mx-auto
-        size-6;
-    }
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root{aspect-ratio:1.9;border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-900,#2c3437);background-color:var(--color-neutral-950,#0d121c);align-items:center;display:flex;position:relative;container:preview/inline-size}.root:after{content:var(--tw-content);content:var(--tw-content);inset:calc(var(--spacing,.25rem)*0);content:var(--tw-content);content:var(--tw-content);aspect-ratio:1;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);background-image:radial-gradient(var(--tw-gradient-from),var(--tw-gradient-to));content:var(--tw-content);--tw-blur:blur(var(--blur-2xl,40px));width:33.3333%;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,);content:var(--tw-content);--tw-content:"";content:var(--tw-content);border-radius:3.40282e38px;margin:auto;position:absolute}.root.announcements:after{content:var(--tw-content);--tw-gradient-from:#2c682ce6}@supports (color:color-mix(in lab, red, red)){.root.announcements:after{--tw-gradient-from:color-mix(in oklab,var(--color-green-700,#2c682c)90%,transparent)}}.root.announcements:after{--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))}.root.release:after{content:var(--tw-content);--tw-gradient-from:#0c7bb3e6}@supports (color:color-mix(in lab, red, red)){.root.release:after{--tw-gradient-from:color-mix(in oklab,var(--color-info-600,#0c7bb3)90%,transparent)}}.root.release:after{--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))}.root.vulnerability:after{content:var(--tw-content);--tw-gradient-from:#ae5f00e6}@supports (color:color-mix(in lab, red, red)){.root.vulnerability:after{--tw-gradient-from:color-mix(in oklab,var(--color-warning-600,#ae5f00)90%,transparent)}}.root.vulnerability:after{--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))}.root .container{z-index:10;width:66.6667%;max-width:var(--container-xl,36rem);gap:calc(var(--spacing,.25rem)*4);text-align:center;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-white,#fff);flex-direction:column;margin-inline:auto;display:flex}@container preview (min-width:24rem){.root .container{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,1.5))}}@container preview (min-width:28rem){.root .container{gap:calc(var(--spacing,.25rem)*6);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,1.55556))}}@container preview (min-width:32rem){.root .container{gap:calc(var(--spacing,.25rem)*8);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,1.4))}}@container preview (min-width:36rem){.root .container{gap:calc(var(--spacing,.25rem)*12);font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,1.33333))}}@container preview (min-width:42rem){.root .container{font-size:var(--text-3xl,1.875rem);line-height:var(--tw-leading,var(--text-3xl--line-height,1.2))}}.root .container .hexagon{inset:calc(var(--spacing,.25rem)*0);width:100%;height:100%;margin:auto;position:absolute}@container preview (min-width:28rem){.root .container .hexagon{width:60%;height:60%}}@container preview (min-width:32rem){.root .container .hexagon{width:66.6667%;height:66.6667%}}@container preview (min-width:36rem){.root .container .hexagon{width:60%;height:60%}}@container preview (min-width:42rem){.root .container .hexagon{width:66.6667%;height:66.6667%}}.root .container .logo{width:calc(var(--spacing,.25rem)*6);height:calc(var(--spacing,.25rem)*6);margin-inline:auto}@container preview (min-width:28rem){.root .container .logo{width:calc(var(--spacing,.25rem)*14);height:calc(var(--spacing,.25rem)*14)}}@container preview (min-width:32rem){.root .container .logo{width:calc(var(--spacing,.25rem)*16);height:calc(var(--spacing,.25rem)*16)}}@container preview (min-width:36rem){.root .container .logo{width:calc(var(--spacing,.25rem)*20);height:calc(var(--spacing,.25rem)*20)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@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}@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%}@property --tw-font-weight{syntax:"*";inherits:false}

package/Common/Select/NoScriptSelect/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import Select from '#ui/Common/Select';
+import StatelessSelect from '#ui/Common/Select/StatelessSelect';
+const WithNoScriptSelect = ({ as, ...props }) => {
+    const id = useId();
+    const selectId = `select-${id.replace(/[^a-zA-Z0-9]/g, '')}`;
+    return (_jsxs(_Fragment, { children: [_jsx(Select, { ...props, fallbackClass: selectId }), _jsxs("noscript", { children: [_jsx("style", { children: `.${selectId} { display: none!important; }` }), _jsx(StatelessSelect, { ...props, as: as })] })] }));
+};
+export default WithNoScriptSelect;

package/Common/Select/StatelessSelect/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import { useId, useMemo } from 'react';
+import { isStringArray, isValuesArray } from '#ui/util/array';
+import styles from '../index.module.css';
+const StatelessSelect = ({ values = [], defaultValue, placeholder, label, inline, className, ariaLabel, disabled = false, as: Component = 'div', }) => {
+    const id = useId();
+    const mappedValues = useMemo(() => {
+        let mappedValues = values;
+        if (isStringArray(mappedValues)) {
+            mappedValues = mappedValues.map(value => ({
+                label: value,
+                value: value,
+            }));
+        }
+        if (isValuesArray(mappedValues)) {
+            return [{ items: mappedValues }];
+        }
+        return mappedValues;
+    }, [values]);
+    // Find the current/default item to display in summary
+    const currentItem = useMemo(() => mappedValues
+        .flatMap(({ items }) => items)
+        .find(item => item.value === defaultValue), [mappedValues, defaultValue]);
+    return (_jsxs("div", { className: classNames(styles.select, styles.noscript, { [styles.inline]: inline }, className), children: [label && (_jsx("label", { className: styles.label, htmlFor: id, children: label })), _jsxs("details", { className: styles.trigger, id: id, children: [_jsxs("summary", { className: styles.summary, "aria-label": ariaLabel, "aria-disabled": disabled, children: [currentItem && (_jsxs("span", { className: styles.selectedValue, children: [currentItem.iconImage, _jsx("span", { children: currentItem.label })] })), !currentItem && (_jsx("span", { className: styles.placeholder, children: placeholder })), _jsx(ChevronDownIcon, { className: styles.icon })] }), _jsx("div", { className: classNames(styles.dropdown, { [styles.inline]: inline }), children: mappedValues.map(({ label: groupLabel, items }, groupKey) => (_jsxs("div", { className: styles.group, children: [groupLabel && (_jsx("div", { className: classNames(styles.item, styles.label), children: groupLabel })), items.map(({ value, label, iconImage, disabled: itemDisabled }) => (_jsxs(Component, { href: value, className: classNames(styles.item, styles.text, {
+                                        [styles.disabled]: itemDisabled || disabled,
+                                        [styles.selected]: value === defaultValue,
+                                    }), "aria-disabled": itemDisabled || disabled, children: [iconImage, _jsx("span", { children: label })] }, value)))] }, groupLabel?.toString() ?? groupKey))) })] })] }));
+};
+export default StatelessSelect;

package/Common/Select/index.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import classNames from 'classnames';
+import { useEffect, useId, useMemo, useState } from 'react';
+import Skeleton from '#ui/Common/Skeleton';
+import { isStringArray, isValuesArray } from '#ui/util/array';
+import styles from './index.module.css';
+const Select = ({ values = [], defaultValue, placeholder, label, inline, onChange, className, dropdownClassName, ariaLabel, loading = false, disabled = false, fallbackClass = '', }) => {
+    const id = useId();
+    const [value, setValue] = useState(defaultValue);
+    useEffect(() => setValue(defaultValue), [defaultValue]);
+    const mappedValues = useMemo(() => {
+        let mappedValues = values;
+        if (isStringArray(mappedValues)) {
+            mappedValues = mappedValues.map(value => ({
+                label: value,
+                value: value,
+            }));
+        }
+        if (isValuesArray(mappedValues)) {
+            return [{ items: mappedValues }];
+        }
+        return mappedValues;
+    }, [values]);
+    // We render the actual item slotted to fix/prevent the issue
+    // of the tirgger flashing on the initial render
+    const currentItem = useMemo(() => mappedValues
+        .flatMap(({ items }) => items)
+        .find(item => item.value === value), [mappedValues, value]);
+    const memoizedMappedValues = useMemo(() => {
+        return mappedValues.map(({ label, items }, key) => (_jsxs(SelectPrimitive.Group, { children: [label && (_jsx(SelectPrimitive.Label, { className: classNames(styles.item, styles.label), children: label })), items.map(({ value, label, iconImage, disabled }) => (_jsx(SelectPrimitive.Item, { value: value, disabled: disabled, className: classNames(styles.item, styles.text), children: _jsxs(SelectPrimitive.ItemText, { children: [iconImage, _jsx("span", { children: label })] }) }, value)))] }, label?.toString() ?? key)));
+        // We explicitly want to recalculate these values only when the values themselves changed
+        // This is to prevent re-rendering and re-calcukating the values on every render
+    }, [JSON.stringify(values)]);
+    // Both change the internal state and emit the change event
+    const handleChange = (value) => {
+        setValue(value);
+        if (typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (_jsx(Skeleton, { loading: loading, children: _jsxs("span", { className: classNames(styles.select, { [styles.inline]: inline }, className, fallbackClass), children: [label && (_jsx("label", { className: styles.label, htmlFor: id, children: label })), _jsxs(SelectPrimitive.Root, { value: currentItem !== undefined ? value : undefined, onValueChange: handleChange, disabled: disabled, children: [_jsxs(SelectPrimitive.Trigger, { className: styles.trigger, "aria-label": ariaLabel, id: id, children: [_jsx(SelectPrimitive.Value, { placeholder: placeholder, children: currentItem !== undefined && (_jsxs(_Fragment, { children: [currentItem.iconImage, _jsx("span", { children: currentItem.label })] })) }), _jsx(ChevronDownIcon, { className: styles.icon })] }), _jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { position: inline ? 'popper' : 'item-aligned', className: classNames(styles.dropdown, { [styles.inline]: inline }, dropdownClassName), children: [_jsx(SelectPrimitive.ScrollUpButton, { children: _jsx(ChevronUpIcon, { className: styles.scrollIcon }) }), _jsx(SelectPrimitive.Viewport, { children: memoizedMappedValues }), _jsx(SelectPrimitive.ScrollDownButton, { children: _jsx(ChevronDownIcon, { className: styles.scrollIcon }) })] }) })] })] }) }));
+};
+export default Select;