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

package/Containers/MetaBar/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useMemo } from 'react';
+import styles from './index.module.css';
+const MetaBar = ({ items, headings, as: Component = 'a', heading, }) => {
+    // The default depth of headings to display in the table of contents.
+    const { minDepth = 2, items: headingItems = [] } = headings || {};
+    const filteredHeadings = useMemo(() => headingItems.filter(({ depth }) => depth >= minDepth && depth <= 4), [minDepth, headingItems]);
+    return (_jsx("div", { className: styles.wrapper, children: _jsxs("dl", { children: [Object.entries(items)
+                    .filter(([, value]) => !!value)
+                    .map(([key, value]) => (_jsxs(Fragment, { children: [_jsx("dt", { children: key }), _jsx("dd", { children: value })] }, key))), filteredHeadings.length > 0 && (_jsxs(_Fragment, { children: [_jsx("dt", { children: heading }), _jsx("dd", { children: _jsx("ol", { children: filteredHeadings.map(head => (_jsx("li", { className: head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : '', children: _jsxs(Component, { href: `#${head?.data?.id}`, children: [' ', head.value] }) }, head.value))) }) })] }))] }) }));
+};
+export default MetaBar;

package/Containers/MetaBar/index.module.css

@@ -1,91 +1,123 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .wrapper {
-  @apply flex
-    w-full
-    flex-col
-    items-start
-    gap-8
-    border-neutral-200
-    px-4
-    py-6
-    [overflow-wrap:anywhere]
-    lg:sticky
-    lg:top-0
-    lg:max-h-screen
-    lg:px-6
-    dark:border-neutral-900;
-
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc(var(--spacing, 0.25rem)*8);
+  border-color: var(--color-neutral-200, #e9edf0);
+  padding-inline: calc(var(--spacing, 0.25rem)*4);
+  padding-block: calc(var(--spacing, 0.25rem)*6);
+  overflow-wrap: anywhere;
+  @media (width >= 64rem) {
+    position: sticky;
+  }
+  @media (width >= 64rem) {
+    top: calc(var(--spacing, 0.25rem)*0);
+  }
+  @media (width >= 64rem) {
+    max-height: 100vh;
+  }
+  @media (width >= 64rem) {
+    padding-inline: calc(var(--spacing, 0.25rem)*6);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-900, #2c3437);
+  }
   dl {
-    @apply flex
-      w-full
-      flex-col
-      gap-1.5
-      pb-12
-      [scrollbar-width:none]
-      lg:max-h-[calc(100vh-var(--header-height))]
-      lg:overflow-y-auto
-      [&::-webkit-scrollbar]:hidden;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: calc(var(--spacing, 0.25rem)*1.5);
+    padding-bottom: calc(var(--spacing, 0.25rem)*12);
+    scrollbar-width: none;
+    @media (width >= 64rem) {
+      max-height: calc(100vh - var(--header-height));
+    }
+    @media (width >= 64rem) {
+      overflow-y: auto;
+    }
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
-
   dt {
-    @apply mb-2
-      text-sm
-      font-medium
-      text-neutral-800
-      dark:text-neutral-200;
+    margin-bottom: 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));
+    --tw-font-weight: var(--font-weight-medium, 500);
+    font-weight: var(--font-weight-medium, 500);
+    color: var(--color-neutral-800, #556066);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
   }
-
   dd {
-    @apply mb-8
-      flex
-      items-center
-      gap-2
-      text-sm
-      text-neutral-900
-      dark:text-white;
-
+    margin-bottom: calc(var(--spacing, 0.25rem)*8);
+    display: flex;
+    align-items: center;
+    gap: 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));
+    color: var(--color-neutral-900, #2c3437);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
     a {
-      @apply max-xs:inline-block
-        max-xs:py-1
-        font-semibold
-        text-neutral-900
-        underline
-        dark:text-white;
-
+      --tw-font-weight: var(--font-weight-semibold, 600);
+      font-weight: var(--font-weight-semibold, 600);
+      color: var(--color-neutral-900, #2c3437);
+      text-decoration-line: underline;
+      @media (width < 670px) {
+        display: inline-block;
+      }
+      @media (width < 670px) {
+        padding-block: calc(var(--spacing, 0.25rem)*1);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white, #fff);
+      }
       &:hover {
-        @apply text-neutral-800
-          dark:text-neutral-200;
+        color: var(--color-neutral-700, #6e7b83);
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          color: var(--color-neutral-500, #b1bcc2);
+        }
       }
     }
-
     ol {
-      @apply flex
-        w-full
-        list-none
-        flex-col
-        gap-1.5
-        p-0;
+      display: flex;
+      width: 100%;
+      list-style-type: none;
+      flex-direction: column;
+      gap: calc(var(--spacing, 0.25rem)*1.5);
+      padding: calc(var(--spacing, 0.25rem)*0);
     }
-
     svg {
-      @apply size-4
-        text-neutral-600
-        dark:text-neutral-400;
+      width: calc(var(--spacing, 0.25rem)*4);
+      height: calc(var(--spacing, 0.25rem)*4);
+      color: var(--color-neutral-600, #929fa5);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-400, #cbd4d9);
+      }
     }
-
     &:last-child {
-      @apply mb-0;
+      margin-bottom: calc(var(--spacing, 0.25rem)*0);
     }
   }
-
   [data-on-dark] {
-    @apply hidden
-      dark:block;
+    display: none;
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      display: block;
+    }
   }
-
   [data-on-light] {
-    @apply block
-      dark:hidden;
+    display: block;
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      display: none;
+    }
   }
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Containers/NavBar/NavItem/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import BaseActiveLink from '#ui/Common/BaseActiveLink';
+import styles from './index.module.css';
+const NavItem = ({ href = '', type = 'nav', children, className, target, ...props }) => (_jsxs(BaseActiveLink, { target: target, href: href, className: classNames(styles.navItem, styles[type], className), activeClassName: styles.active, allowSubPath: href.startsWith('/'), ...props, children: [_jsx("span", { className: styles.label, children: children }), target === '_blank' && _jsx(ArrowUpRightIcon, { className: styles.icon })] }));
+export default NavItem;

package/Containers/NavBar/NavItem/index.module.css

@@ -1,60 +1,74 @@
-@reference "../../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .navItem {
-  @apply inline-flex
-    items-center
-    gap-2
-    rounded-sm
-    px-3
-    py-2
-    motion-safe:transition-colors;
-
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  border-radius: var(--radius-sm, 0.25rem);
+  padding-inline: calc(var(--spacing, 0.25rem)*3);
+  padding-block: calc(var(--spacing, 0.25rem)*2);
+  @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));
+  }
   .label {
-    @apply text-base
-      font-medium
-      lg:text-sm;
+    font-size: var(--text-base, 1rem);
+    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
+    --tw-font-weight: var(--font-weight-medium, 500);
+    font-weight: var(--font-weight-medium, 500);
+    @media (width >= 64rem) {
+      font-size: var(--text-sm, 0.875rem);
+      line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+    }
   }
-
   .icon {
-    @apply size-3
-      text-neutral-500
-      dark:text-neutral-200;
+    width: calc(var(--spacing, 0.25rem)*3);
+    height: calc(var(--spacing, 0.25rem)*3);
+    color: var(--color-neutral-500, #b1bcc2);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
   }
-
   &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
+    background-color: var(--color-neutral-100, #f6f7f9);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
   }
-
   &.nav {
     .label {
-      @apply text-neutral-900
-        dark:text-white;
+      color: var(--color-neutral-900, #2c3437);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white, #fff);
+      }
     }
-
     &.active {
-      @apply bg-green-600;
-
+      background-color: var(--color-green-600, #417e38);
       .label {
-        @apply text-white;
+        color: var(--color-white, #fff);
       }
-
       .icon {
-        @apply text-white
-          opacity-50;
+        color: var(--color-white, #fff);
+        opacity: 50%;
       }
     }
   }
-
   &.footer {
     .label {
-      @apply text-neutral-800
-        dark:text-white;
+      color: var(--color-neutral-800, #556066);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white, #fff);
+      }
     }
-
     &:hover {
-      @apply bg-neutral-100
-        dark:bg-neutral-900;
+      background-color: var(--color-neutral-100, #f6f7f9);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        background-color: var(--color-neutral-900, #2c3437);
+      }
     }
   }
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Containers/NavBar/index.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
+import XMark from '@heroicons/react/24/solid/XMarkIcon';
+import * as Label from '@radix-ui/react-label';
+import classNames from 'classnames';
+import { useState } from 'react';
+import NavItem from '#ui/Containers/NavBar/NavItem';
+import style from './index.module.css';
+const navInteractionIcons = {
+    show: _jsx(Hamburger, { className: style.navInteractionIcon }),
+    close: _jsx(XMark, { className: style.navInteractionIcon }),
+};
+const NavBar = ({ children, Logo, as: Component = 'a', navItems, pathname, sidebarItemTogglerAriaLabel, }) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    return (_jsxs("nav", { className: style.container, children: [_jsxs("div", { className: style.nodeIconAndMobileItemsToggler, children: [_jsx(Component, { className: style.nodeIconWrapper, href: "/", "aria-label": "Home", children: _jsx(Logo, {}) }), _jsx(Label.Root, { className: style.sidebarItemTogglerLabel, htmlFor: "sidebarItemToggler", role: "button", "aria-label": sidebarItemTogglerAriaLabel, children: navInteractionIcons[isMenuOpen ? 'close' : 'show'] })] }), _jsx("input", { className: classNames(['peer', style.sidebarItemToggler]), id: "sidebarItemToggler", type: "checkbox", onChange: e => setIsMenuOpen(() => e.target.checked), "aria-label": sidebarItemTogglerAriaLabel, tabIndex: -1 }), _jsxs("div", { className: `${style.main} hidden peer-checked:flex`, children: [_jsx("div", { className: style.navItems, children: navItems.map(({ text, link, target }) => (_jsx(NavItem, { pathname: pathname, as: Component, href: link, target: target, children: text }, link))) }), _jsx("div", { className: style.actionsWrapper, children: children })] })] }));
+};
+export default NavBar;

package/Containers/NavBar/index.module.css

@@ -1,125 +1,205 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .container {
-  @apply border-neutral-200
-    bg-white
-    lg:flex
-    lg:h-16
-    lg:flex-row
-    lg:items-center
-    lg:gap-8
-    lg:border-b
-    lg:px-8
-    dark:border-neutral-900
-    dark:bg-neutral-950;
+  border-color: var(--color-neutral-200, #e9edf0);
+  background-color: var(--color-white, #fff);
+  @media (width >= 64rem) {
+    display: flex;
+  }
+  @media (width >= 64rem) {
+    height: calc(var(--spacing, 0.25rem)*16);
+  }
+  @media (width >= 64rem) {
+    flex-direction: row;
+  }
+  @media (width >= 64rem) {
+    align-items: center;
+  }
+  @media (width >= 64rem) {
+    gap: calc(var(--spacing, 0.25rem)*8);
+  }
+  @media (width >= 64rem) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  @media (width >= 64rem) {
+    padding-inline: calc(var(--spacing, 0.25rem)*8);
+  }
+  &: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);
+  }
 }
-
 .nodeIconAndMobileItemsToggler {
-  @apply flex
-    h-16
-    shrink-0
-    items-center
-    border-b
-    border-neutral-200
-    px-4
-    lg:flex
-    lg:h-full
-    lg:items-center
-    lg:border-0
-    lg:px-0
-    dark:border-neutral-900;
+  display: flex;
+  height: calc(var(--spacing, 0.25rem)*16);
+  flex-shrink: 0;
+  align-items: center;
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-color: var(--color-neutral-200, #e9edf0);
+  padding-inline: calc(var(--spacing, 0.25rem)*4);
+  @media (width >= 64rem) {
+    display: flex;
+  }
+  @media (width >= 64rem) {
+    height: 100%;
+  }
+  @media (width >= 64rem) {
+    align-items: center;
+  }
+  @media (width >= 64rem) {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  @media (width >= 64rem) {
+    padding-inline: calc(var(--spacing, 0.25rem)*0);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-900, #2c3437);
+  }
 }
-
 .sidebarItemToggler {
-  @apply absolute
-    right-4
-    -z-10
-    -translate-y-[200%]
-    appearance-none
-    opacity-0;
+  position: absolute;
+  right: calc(var(--spacing, 0.25rem)*4);
+  z-index: -10;
+  --tw-translate-y: -200%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  appearance: none;
+  opacity: 0%;
 }
-
 .nodeIconWrapper {
-  @apply h-[30px]
-    flex-1;
+  height: 30px;
+  flex: 1;
 }
-
 .navInteractionIcon,
 .sidebarItemToggler {
-  @apply size-6;
+  width: calc(var(--spacing, 0.25rem)*6);
+  height: calc(var(--spacing, 0.25rem)*6);
 }
-
 .sidebarItemTogglerLabel {
-  @apply block
-    cursor-pointer
-    lg:hidden;
+  display: block;
+  cursor: pointer;
+  @media (width >= 64rem) {
+    display: none;
+  }
 }
-
 .main {
-  @apply flex-1
-    flex-col
-    justify-between
-    gap-4
-    lg:flex
-    lg:flex-row
-    lg:items-center;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: calc(var(--spacing, 0.25rem)*4);
+  @media (width >= 64rem) {
+    display: flex;
+  }
+  @media (width >= 64rem) {
+    flex-direction: row;
+  }
+  @media (width >= 64rem) {
+    align-items: center;
+  }
 }
-
 .navItems {
-  @apply flex
-    flex-col
-    gap-0
-    border-b
-    border-neutral-200
-    p-4
-    lg:flex-1
-    lg:flex-row
-    lg:gap-1
-    lg:border-0
-    lg:p-0
-    dark:border-neutral-900;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem)*0);
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-color: var(--color-neutral-200, #e9edf0);
+  padding: calc(var(--spacing, 0.25rem)*4);
+  @media (width >= 64rem) {
+    flex: 1;
+  }
+  @media (width >= 64rem) {
+    flex-direction: row;
+  }
+  @media (width >= 64rem) {
+    gap: calc(var(--spacing, 0.25rem)*1);
+  }
+  @media (width >= 64rem) {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  @media (width >= 64rem) {
+    padding: calc(var(--spacing, 0.25rem)*0);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-900, #2c3437);
+  }
 }
-
 .actionsWrapper {
-  @apply flex
-    flex-row
-    flex-wrap
-    items-center
-    justify-between
-    gap-2
-    border-b
-    border-neutral-200
-    p-4
-    sm:flex-nowrap
-    lg:basis-96
-    lg:border-0
-    lg:p-0
-    dark:border-neutral-900;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-color: var(--color-neutral-200, #e9edf0);
+  padding: calc(var(--spacing, 0.25rem)*4);
+  @media (width >= 40rem) {
+    flex-wrap: nowrap;
+  }
+  @media (width >= 64rem) {
+    flex-basis: calc(var(--spacing, 0.25rem)*96);
+  }
+  @media (width >= 64rem) {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  @media (width >= 64rem) {
+    padding: calc(var(--spacing, 0.25rem)*0);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-900, #2c3437);
+  }
 }
-
 span.searchButtonSkeleton {
-  @apply my-px
-    mr-2
-    flex-grow
-    rounded-xl;
-
+  margin-block: 1px;
+  margin-right: calc(var(--spacing, 0.25rem)*2);
+  flex-grow: 1;
+  border-radius: var(--radius-xl, 0.75rem);
   &:empty {
-    @apply h-10;
+    height: calc(var(--spacing, 0.25rem)*10);
   }
 }
-
 .ghIconWrapper {
-  @apply size-9
-    rounded-md
-    p-2;
-
+  width: calc(var(--spacing, 0.25rem)*9);
+  height: calc(var(--spacing, 0.25rem)*9);
+  border-radius: var(--radius-md, 0.375rem);
+  padding: calc(var(--spacing, 0.25rem)*2);
   svg {
-    @apply fill-neutral-700
-      dark:fill-neutral-300;
+    fill: var(--color-neutral-700, #6e7b83);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      fill: var(--color-neutral-300, #d9e1e4);
+    }
   }
-
   &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
+    background-color: var(--color-neutral-100, #f6f7f9);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
   }
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}

package/Containers/Sidebar/ProgressionIcon/index.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ProgressionIcon = props => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", ...props, children: _jsx("path", { d: "M9 3.26795L8 2.6906L7 3.26795L3.5359 5.26795L2.5359 5.8453V7V11V12.1547L3.5359 12.7321L7 14.7321L8 15.3094L9 14.7321L12.4641 12.7321L13.4641 12.1547V11V7V5.8453L12.4641 5.26795L9 3.26795Z" }) }));
+export default ProgressionIcon;

package/Containers/Sidebar/SidebarGroup/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
+import styles from './index.module.css';
+const SidebarGroup = ({ groupName, items, showProgressionIcons, className, ...props }) => (_jsxs("section", { className: classNames({
+        [styles.group]: true,
+        [styles.progression]: showProgressionIcons,
+    }, className), children: [_jsx("label", { className: styles.groupName, children: groupName }), _jsx("ul", { className: styles.itemList, children: items.map(({ label, link }) => (_jsx(SidebarItem, { label: label, link: link, showProgressionIcons: showProgressionIcons, ...props }, link))) })] }));
+export default SidebarGroup;