@node-core/ui-components 1.0.1-ab0ba1dcb1d91392c44e91b1e74e9f565e460543 → 1.0.1-bc3f4a79ab5f54e7ed1ee525005e7e9f1030495c

package/Containers/NavBar/index.module.css

@@ -0,0 +1,205 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.container {
+  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 {
+  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 {
+  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 {
+  height: 30px;
+  flex: 1;
+}
+.navInteractionIcon,
+.sidebarItemToggler {
+  width: calc(var(--spacing, 0.25rem)*6);
+  height: calc(var(--spacing, 0.25rem)*6);
+}
+.sidebarItemTogglerLabel {
+  display: block;
+  cursor: pointer;
+  @media (width >= 64rem) {
+    display: none;
+  }
+}
+.main {
+  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 {
+  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 {
+  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 {
+  margin-block: 1px;
+  margin-right: calc(var(--spacing, 0.25rem)*2);
+  flex-grow: 1;
+  border-radius: var(--radius-xl, 0.75rem);
+  &:empty {
+    height: calc(var(--spacing, 0.25rem)*10);
+  }
+}
+.ghIconWrapper {
+  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 {
+    fill: var(--color-neutral-700, #6e7b83);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      fill: 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);
+    }
+  }
+}
+@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;

package/Containers/Sidebar/SidebarGroup/index.module.css

@@ -0,0 +1,192 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.group {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  &:not(.progression) {
+    .groupName {
+      padding-inline: calc(var(--spacing, 0.25rem)*2);
+      padding-block: calc(var(--spacing, 0.25rem)*1);
+      font-size: var(--text-xs, 0.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-neutral-800, #556066);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-600, #929fa5);
+      }
+    }
+  }
+  &.progression {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing, 0.25rem)*4);
+    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);
+    }
+    .itemList {
+      position: relative;
+      left: calc(var(--spacing, 0.25rem)*-1);
+      display: flex;
+      flex-direction: column;
+      &::after {
+        content: var(--tw-content);
+        position: absolute;
+      }
+      &::after {
+        content: var(--tw-content);
+        top: calc(var(--spacing, 0.25rem)*0);
+      }
+      &::after {
+        content: var(--tw-content);
+        left: 0.45rem;
+      }
+      &::after {
+        content: var(--tw-content);
+        z-index: 10;
+      }
+      &::after {
+        content: var(--tw-content);
+        height: 100%;
+      }
+      &::after {
+        content: var(--tw-content);
+        width: 1px;
+      }
+      &::after {
+        content: var(--tw-content);
+        background-color: var(--color-neutral-200, #e9edf0);
+      }
+      &::after {
+        content: var(--tw-content);
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        &::after {
+          content: var(--tw-content);
+          background-color: var(--color-neutral-800, #556066);
+        }
+      }
+      a {
+        &:first-child {
+          &::before {
+            content: var(--tw-content);
+            position: absolute;
+          }
+        }
+        &:first-child {
+          &::before {
+            content: var(--tw-content);
+            bottom: calc(50% + 0.25rem);
+          }
+        }
+        &:first-child {
+          &::before {
+            content: var(--tw-content);
+            left: calc(var(--spacing, 0.25rem)*0);
+          }
+        }
+        &:first-child {
+          &::before {
+            content: var(--tw-content);
+            height: calc(var(--spacing, 0.25rem)*20);
+          }
+        }
+        &:first-child {
+          &::before {
+            content: var(--tw-content);
+            width: calc(var(--spacing, 0.25rem)*4);
+          }
+        }
+        &:first-child {
+          &::before {
+            content: var(--tw-content);
+            background-color: var(--color-white, #fff);
+          }
+        }
+        &:first-child {
+          &::before {
+            content: var(--tw-content);
+            --tw-content: '';
+            content: var(--tw-content);
+          }
+        }
+        &:last-child {
+          &::after {
+            content: var(--tw-content);
+            position: absolute;
+          }
+        }
+        &:last-child {
+          &::after {
+            content: var(--tw-content);
+            top: calc(50% + 0.25rem);
+          }
+        }
+        &:last-child {
+          &::after {
+            content: var(--tw-content);
+            left: calc(var(--spacing, 0.25rem)*0);
+          }
+        }
+        &:last-child {
+          &::after {
+            content: var(--tw-content);
+            height: calc(var(--spacing, 0.25rem)*20);
+          }
+        }
+        &:last-child {
+          &::after {
+            content: var(--tw-content);
+            width: calc(var(--spacing, 0.25rem)*4);
+          }
+        }
+        &:last-child {
+          &::after {
+            content: var(--tw-content);
+            background-color: var(--color-white, #fff);
+          }
+        }
+        &:last-child {
+          &::after {
+            content: var(--tw-content);
+            --tw-content: '';
+            content: var(--tw-content);
+          }
+        }
+        &:first-child {
+          &:where([data-theme=dark], [data-theme=dark] *) {
+            &::before {
+              content: var(--tw-content);
+              background-color: var(--color-neutral-950, #0d121c);
+            }
+          }
+        }
+        &:last-child {
+          &:where([data-theme=dark], [data-theme=dark] *) {
+            &::after {
+              content: var(--tw-content);
+              background-color: var(--color-neutral-950, #0d121c);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}

package/Containers/Sidebar/SidebarItem/index.js

@@ -0,0 +1,11 @@
+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';
+import ProgressionIcon from '../ProgressionIcon';
+const SidebarItem = ({ label, link, showProgressionIcons = false, ...props }) => (_jsxs(BaseActiveLink, { className: classNames({
+        [styles.item]: true,
+        [styles.progression]: showProgressionIcons,
+    }), href: link, activeClassName: styles.active, ...props, children: [showProgressionIcons && (_jsx(ProgressionIcon, { className: styles.progressionIcon })), _jsx("span", { className: styles.label, children: label }), /^https?:/.test(link) && _jsx(ArrowUpRightIcon, { className: styles.icon })] }));
+export default SidebarItem;

package/Containers/Sidebar/SidebarItem/index.module.css

@@ -0,0 +1,67 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.item {
+  position: relative;
+  z-index: 20;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  overflow: hidden;
+  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-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);
+  }
+  .label {
+    padding: 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-regular, 400);
+    font-weight: var(--font-weight-regular, 400);
+  }
+  .progressionIcon {
+    flex-shrink: 0;
+    fill: var(--color-neutral-200, #e9edf0);
+    stroke: var(--color-white, #fff);
+    stroke-width: 4;
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      fill: var(--color-neutral-800, #556066);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      stroke: var(--color-neutral-950, #0d121c);
+    }
+  }
+  .icon {
+    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);
+    }
+  }
+  &.progression {
+    .label {
+      padding: calc(var(--spacing, 0.25rem)*1);
+    }
+  }
+  &.active {
+    color: var(--color-neutral-900, #2c3437);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
+    .progressionIcon {
+      fill: var(--color-green-500, #5fa04e);
+    }
+    &:not(.progression) .label {
+      border-radius: var(--radius-sm, 0.25rem);
+      background-color: var(--color-green-600, #417e38);
+      color: var(--color-white, #fff);
+    }
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Containers/Sidebar/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Select from '#ui/Common/Select';
+import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
+import styles from './index.module.css';
+const SideBar = ({ groups, pathname, title, onSelect, as, showProgressionIcons = false, children, placeholder, }) => {
+    const selectItems = groups.map(({ items, groupName }) => ({
+        label: groupName,
+        items: items.map(({ label, link }) => ({ value: link, label })),
+    }));
+    const currentItem = selectItems
+        .flatMap(item => item.items)
+        .find(item => pathname === item.value);
+    return (_jsxs("aside", { className: styles.wrapper, children: [children, selectItems.length > 0 && (_jsx(Select, { label: title, values: selectItems, defaultValue: currentItem?.value, placeholder: placeholder, onChange: onSelect, className: styles.mobileSelect })), groups.map(({ groupName, items }) => (_jsx(SidebarGroup, { groupName: groupName, items: items, pathname: pathname, as: as, showProgressionIcons: showProgressionIcons, className: styles.navigation }, groupName.toString())))] }));
+};
+export default SideBar;

package/Containers/Sidebar/index.module.css

@@ -0,0 +1,48 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.wrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem)*8);
+  overflow: auto;
+  border-right-style: var(--tw-border-style);
+  border-right-width: 0px;
+  border-color: var(--color-neutral-200, #e9edf0);
+  background-color: var(--color-white, #fff);
+  padding-inline: calc(var(--spacing, 0.25rem)*4);
+  padding-block: calc(var(--spacing, 0.25rem)*6);
+  @media (width >= 40rem) {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  @media (width >= 48rem) {
+    max-width: var(--container-xs, 20rem);
+  }
+  @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);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: var(--color-neutral-950, #0d121c);
+  }
+  .navigation {
+    display: none;
+    @media (width >= 40rem) {
+      display: flex;
+    }
+  }
+  .mobileSelect {
+    display: flex;
+    width: 100%;
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}