@node-core/ui-components 1.0.1-c0bc4dd7eb49f97f35ce0983849d17702404c76a → 1.0.1-da75492230302b0f459aab323d2f6fdac6269a06

package/Containers/MetaBar/index.module.css

@@ -1,91 +1,2 @@
-@reference "../../styles/index.css";
-
-.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;
-
-  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;
-  }
-
-  dt {
-    @apply mb-2
-      text-sm
-      font-medium
-      text-neutral-800
-      dark:text-neutral-200;
-  }
-
-  dd {
-    @apply mb-8
-      flex
-      items-center
-      gap-2
-      text-sm
-      text-neutral-900
-      dark:text-white;
-
-    a {
-      @apply max-xs:inline-block
-        max-xs:py-1
-        font-semibold
-        text-neutral-900
-        underline
-        dark:text-white;
-
-      &:hover {
-        @apply text-neutral-800
-          dark:text-neutral-200;
-      }
-    }
-
-    ol {
-      @apply flex
-        w-full
-        list-none
-        flex-col
-        gap-1.5
-        p-0;
-    }
-
-    svg {
-      @apply size-4
-        text-neutral-600
-        dark:text-neutral-400;
-    }
-
-    &:last-child {
-      @apply mb-0;
-    }
-  }
-
-  [data-on-dark] {
-    @apply hidden
-      dark:block;
-  }
-
-  [data-on-light] {
-    @apply block
-      dark:hidden;
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.wrapper{align-items:flex-start;gap:calc(var(--spacing,.25rem)*8);border-color:var(--color-neutral-200,#e9edf0);width:100%;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*6);overflow-wrap:anywhere;flex-direction:column;display:flex}@media (min-width:64rem){.wrapper{top:calc(var(--spacing,.25rem)*0);max-height:100vh;padding-inline:calc(var(--spacing,.25rem)*6);position:sticky}}.wrapper:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437)}.wrapper dl{gap:calc(var(--spacing,.25rem)*1.5);width:100%;padding-bottom:calc(var(--spacing,.25rem)*12);scrollbar-width:none;flex-direction:column;display:flex}@media (min-width:64rem){.wrapper dl{max-height:calc(100vh - var(--header-height));overflow-y:auto}}.wrapper dl::-webkit-scrollbar{display:none}.wrapper dt{margin-bottom:calc(var(--spacing,.25rem)*2);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)}.wrapper dt:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.wrapper dd{margin-bottom:calc(var(--spacing,.25rem)*8);align-items:center;gap:calc(var(--spacing,.25rem)*2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));color:var(--color-neutral-900,#2c3437);display:flex}.wrapper dd:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.wrapper dd a{--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 not all and (min-width:670px){.wrapper dd a{padding-block:calc(var(--spacing,.25rem)*1);display:inline-block}}.wrapper dd a:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.wrapper dd a:hover{color:var(--color-neutral-700,#6e7b83)}.wrapper dd a:hover:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-500,#b1bcc2)}.wrapper dd ol{gap:calc(var(--spacing,.25rem)*1.5);width:100%;padding:calc(var(--spacing,.25rem)*0);flex-direction:column;list-style-type:none;display:flex}.wrapper dd svg{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);color:var(--color-neutral-600,#929fa5)}.wrapper dd svg:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-400,#cbd4d9)}.wrapper dd:last-child{margin-bottom:calc(var(--spacing,.25rem)*0)}.wrapper [data-on-dark]{display:none}.wrapper [data-on-dark]:where([data-theme=dark],[data-theme=dark] *),.wrapper [data-on-light]{display:block}.wrapper [data-on-light]: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,2 @@
-@reference "../../../styles/index.css";
-
-.navItem {
-  @apply inline-flex
-    items-center
-    gap-2
-    rounded-sm
-    px-3
-    py-2
-    motion-safe:transition-colors;
-
-  .label {
-    @apply text-base
-      font-medium
-      lg:text-sm;
-  }
-
-  .icon {
-    @apply size-3
-      text-neutral-500
-      dark:text-neutral-200;
-  }
-
-  &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-  }
-
-  &.nav {
-    .label {
-      @apply text-neutral-900
-        dark:text-white;
-    }
-
-    &.active {
-      @apply bg-green-600;
-
-      .label {
-        @apply text-white;
-      }
-
-      .icon {
-        @apply text-white
-          opacity-50;
-      }
-    }
-  }
-
-  &.footer {
-    .label {
-      @apply text-neutral-800
-        dark:text-white;
-    }
-
-    &:hover {
-      @apply bg-neutral-100
-        dark:bg-neutral-900;
-    }
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.navItem{align-items:center;gap:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2);display:inline-flex}@media (prefers-reduced-motion:no-preference){.navItem{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))}}.navItem .label{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 (min-width:64rem){.navItem .label{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857))}}.navItem .icon{width:calc(var(--spacing,.25rem)*3);height:calc(var(--spacing,.25rem)*3);color:var(--color-neutral-500,#b1bcc2)}.navItem .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.navItem:hover{background-color:var(--color-neutral-100,#f6f7f9)}.navItem:hover:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437)}.navItem.nav .label{color:var(--color-neutral-900,#2c3437)}.navItem.nav .label:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.navItem.nav.active{background-color:var(--color-green-600,#417e38)}.navItem.nav.active .label{color:var(--color-white,#fff)}.navItem.nav.active .icon{color:var(--color-white,#fff);opacity:.5}.navItem.footer .label{color:var(--color-neutral-800,#556066)}.navItem.footer .label:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.navItem.footer:hover{background-color:var(--color-neutral-100,#f6f7f9)}.navItem.footer:hover: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,2 @@
-@reference "../../styles/index.css";
-
-.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;
-}
-
-.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;
-}
-
-.sidebarItemToggler {
-  @apply absolute
-    right-4
-    -z-10
-    -translate-y-[200%]
-    appearance-none
-    opacity-0;
-}
-
-.nodeIconWrapper {
-  @apply h-[30px]
-    flex-1;
-}
-
-.navInteractionIcon,
-.sidebarItemToggler {
-  @apply size-6;
-}
-
-.sidebarItemTogglerLabel {
-  @apply block
-    cursor-pointer
-    lg:hidden;
-}
-
-.main {
-  @apply flex-1
-    flex-col
-    justify-between
-    gap-4
-    lg:flex
-    lg:flex-row
-    lg: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;
-}
-
-.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;
-}
-
-span.searchButtonSkeleton {
-  @apply my-px
-    mr-2
-    flex-grow
-    rounded-xl;
-
-  &:empty {
-    @apply h-10;
-  }
-}
-
-.ghIconWrapper {
-  @apply size-9
-    rounded-md
-    p-2;
-
-  svg {
-    @apply fill-neutral-700
-      dark:fill-neutral-300;
-  }
-
-  &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.container{border-color:var(--color-neutral-200,#e9edf0);background-color:var(--color-white,#fff)}@media (min-width:64rem){.container{height:calc(var(--spacing,.25rem)*16);align-items:center;gap:calc(var(--spacing,.25rem)*8);border-bottom-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem)*8);border-bottom-width:1px;flex-direction:row;display:flex}}.container:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437);background-color:var(--color-neutral-950,#0d121c)}.nodeIconAndMobileItemsToggler{height:calc(var(--spacing,.25rem)*16);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-neutral-200,#e9edf0);padding-inline:calc(var(--spacing,.25rem)*4);flex-shrink:0;align-items:center;display:flex}@media (min-width:64rem){.nodeIconAndMobileItemsToggler{border-style:var(--tw-border-style);height:100%;padding-inline:calc(var(--spacing,.25rem)*0);border-width:0;align-items:center;display:flex}}.nodeIconAndMobileItemsToggler:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437)}.sidebarItemToggler{right:calc(var(--spacing,.25rem)*4);z-index:-10;--tw-translate-y:-200%;translate:var(--tw-translate-x)var(--tw-translate-y);appearance:none;opacity:0;position:absolute}.nodeIconWrapper{flex:1;height:30px}.navInteractionIcon,.sidebarItemToggler{width:calc(var(--spacing,.25rem)*6);height:calc(var(--spacing,.25rem)*6)}.sidebarItemTogglerLabel{cursor:pointer;display:block}@media (min-width:64rem){.sidebarItemTogglerLabel{display:none}}.main{justify-content:space-between;gap:calc(var(--spacing,.25rem)*4);flex-direction:column;flex:1}@media (min-width:64rem){.main{flex-direction:row;align-items:center;display:flex}}.navItems{gap:calc(var(--spacing,.25rem)*0);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-neutral-200,#e9edf0);padding:calc(var(--spacing,.25rem)*4);flex-direction:column;display:flex}@media (min-width:64rem){.navItems{gap:calc(var(--spacing,.25rem)*1);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem)*0);border-width:0;flex-direction:row;flex:1}}.navItems:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437)}.actionsWrapper{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem)*2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-neutral-200,#e9edf0);padding:calc(var(--spacing,.25rem)*4);flex-flow:wrap;display:flex}@media (min-width:40rem){.actionsWrapper{flex-wrap:nowrap}}@media (min-width:64rem){.actionsWrapper{flex-basis:calc(var(--spacing,.25rem)*96);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem)*0);border-width:0}}.actionsWrapper:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437)}span.searchButtonSkeleton{margin-block:1px;margin-right:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-xl,.75rem);flex-grow:1}span.searchButtonSkeleton:empty{height:calc(var(--spacing,.25rem)*10)}.ghIconWrapper{width:calc(var(--spacing,.25rem)*9);height:calc(var(--spacing,.25rem)*9);border-radius:var(--radius-md,.375rem);padding:calc(var(--spacing,.25rem)*2)}.ghIconWrapper svg{fill:var(--color-neutral-700,#6e7b83)}.ghIconWrapper svg:where([data-theme=dark],[data-theme=dark] *){fill:var(--color-neutral-300,#d9e1e4)}.ghIconWrapper:hover{background-color:var(--color-neutral-100,#f6f7f9)}.ghIconWrapper:hover: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

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

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 })), _jsxs("div", { className: styles.label, children: [_jsx("span", { children: label }), /^https?:/.test(link) && _jsx(ArrowUpRightIcon, { className: styles.icon })] })] }));
+export default SidebarItem;

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

@@ -1,56 +1,2 @@
-@reference '../../../styles/index.css';
-
-.item {
-  @apply font-regular
-    relative
-    z-20
-    flex
-    w-full
-    items-center
-    overflow-hidden
-    text-sm
-    text-neutral-800
-    dark:text-neutral-200;
-
-  .label {
-    @apply font-regular
-      p-2
-      text-sm;
-  }
-
-  .progressionIcon {
-    @apply shrink-0
-      fill-neutral-200
-      stroke-white
-      stroke-[4]
-      dark:fill-neutral-800
-      dark:stroke-neutral-950;
-  }
-
-  .icon {
-    @apply size-3
-      text-neutral-500
-      dark:text-neutral-200;
-  }
-
-  &.progression {
-    .label {
-      @apply p-1;
-    }
-  }
-
-  &.active {
-    @apply text-neutral-900
-      dark:text-white;
-
-    .progressionIcon {
-      @apply fill-green-500;
-    }
-
-    &:not(.progression) .label {
-      @apply rounded-sm
-        bg-green-600
-        text-white;
-    }
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.item{z-index:20;border-radius:var(--radius-md,.375rem);width:100%;font-size:var(--text-sm,.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);align-items:center;margin-bottom:1px;display:flex;position:relative;overflow:hidden}.item:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.item:hover:not(.progression) .label{border-radius:var(--radius-sm,.25rem);background-color:var(--color-neutral-100,#f6f7f9);color:var(--color-neutral-900,#2c3437)}.item:hover:not(.progression) .label:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-800,#556066);color:var(--color-neutral-100,#f6f7f9)}.item:hover .icon{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y);color:var(--color-green-600,#417e38)}.item:hover .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-green-400,#84ba64)}.item:hover .progressionIcon{fill:var(--color-green-200,#c5e5b4)}.item:hover .progressionIcon:where([data-theme=dark],[data-theme=dark] *){fill:var(--color-green-300,#99cc7d)}.item .label{align-items:center;gap:calc(var(--spacing,.25rem)*1.5);padding:calc(var(--spacing,.25rem)*2);font-size:var(--text-sm,.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);display:flex}.item .progressionIcon{fill:var(--color-neutral-200,#e9edf0);stroke:var(--color-white,#fff);stroke-width:4px;flex-shrink:0}.item .progressionIcon:where([data-theme=dark],[data-theme=dark] *){fill:var(--color-neutral-800,#556066);stroke:var(--color-neutral-950,#0d121c)}.item .icon{width:calc(var(--spacing,.25rem)*3);height:calc(var(--spacing,.25rem)*3);color:var(--color-neutral-500,#b1bcc2)}.item .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.item.progression .label{padding:calc(var(--spacing,.25rem)*1)}.item.progression:not(.active):hover .label{border-radius:var(--radius-sm,.25rem);background-color:var(--color-neutral-100,#f6f7f9)}.item.progression:not(.active):hover .label:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437)}.item.active{color:var(--color-neutral-900,#2c3437)}.item.active:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.item.active .progressionIcon{fill:var(--color-green-500,#5fa04e)}.item.active:not(.progression) .label{border-radius:var(--radius-sm,.25rem);background-color:var(--color-green-600,#417e38);color:var(--color-white,#fff)}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}

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: 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

@@ -1,30 +1,2 @@
-@reference "../../styles/index.css";
-
-.wrapper {
-  @apply flex
-    w-full
-    flex-col
-    gap-8
-    overflow-auto
-    border-r-0
-    border-neutral-200
-    bg-white
-    px-4
-    py-6
-    sm:border-r
-    md:max-w-xs
-    lg:px-6
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-
-  .navigation {
-    @apply hidden
-      sm:flex;
-  }
-
-  .mobileSelect {
-    @apply flex
-      w-full
-      sm:hidden;
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.wrapper{gap:calc(var(--spacing,.25rem)*8);border-right-style:var(--tw-border-style);border-right-width:0;border-color:var(--color-neutral-200,#e9edf0);background-color:var(--color-white,#fff);width:100%;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*6);flex-direction:column;display:flex;overflow:auto}@media (min-width:40rem){.wrapper{border-right-style:var(--tw-border-style);border-right-width:1px}}@media (min-width:48rem){.wrapper{max-width:var(--container-xs,20rem)}}@media (min-width:64rem){.wrapper{padding-inline:calc(var(--spacing,.25rem)*6)}}.wrapper:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437);background-color:var(--color-neutral-950,#0d121c)}.wrapper .navigation{display:none}@media (min-width:40rem){.wrapper .navigation{display:flex}}.wrapper .mobileSelect{width:100%;display:flex}@media (min-width:40rem){.wrapper .mobileSelect{display:none}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}