@node-core/ui-components 0.0.1 → 1.0.1-0293ad9e47f432e69852af2ee62cb819309db1cf

package/Common/LanguageDropDown/index.js

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

package/Common/LanguageDropDown/index.module.css

@@ -0,0 +1,2 @@
+/*! 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

@@ -0,0 +1,2 @@
+/*! 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

@@ -0,0 +1,2 @@
+/*! 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

@@ -0,0 +1,2 @@
+/*! 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

@@ -0,0 +1,2 @@
+/*! 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;

package/Common/Select/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.select{gap:calc(var(--spacing,.25rem)*1.5);flex-direction:column;display:inline-flex}.select .label{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-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-neutral-800,#556066);display:block}.select .label:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.select .trigger{height:calc(var(--spacing,.25rem)*11);justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-300,#d9e1e4);background-color:var(--color-white,#fff);width:100%;min-width:17rem;padding-inline:calc(var(--spacing,.25rem)*3.5);padding-block:calc(var(--spacing,.25rem)*2.5);text-align:left;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);color:var(--color-neutral-900,#2c3437);--tw-shadow:0px 1px 2px 0px var(--tw-shadow-color,#1018280d);display:inline-flex}@supports (color:color-mix(in lab, red, red)){.select .trigger{--tw-shadow:0px 1px 2px 0px var(--tw-shadow-color,color-mix(in oklab,var(--color-shadow,#101828)5%,transparent))}}.select .trigger{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.select .trigger{outline-offset:2px;outline:2px solid #0000}}.select .trigger:focus{border-color:var(--color-neutral-500,#b1bcc2);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + 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-500,#b1bcc2)}.select .trigger[data-placeholder]{color:var(--color-neutral-800,#556066)}.select .trigger:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-800,#556066);background-color:var(--color-neutral-950,#0d121c);color:var(--color-white,#fff)}.select .trigger:where([data-theme=dark],[data-theme=dark] *):focus{border-color:var(--color-neutral-600,#929fa5);--tw-ring-color:var(--color-neutral-600,#929fa5)}.select .trigger:where([data-theme=dark],[data-theme=dark] *)[data-placeholder]{color:var(--color-neutral-200,#e9edf0)}.select .trigger span{height:calc(var(--spacing,.25rem)*5);align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}.select .icon{width:calc(var(--spacing,.25rem)*5);height:calc(var(--spacing,.25rem)*5);color:var(--color-neutral-600,#929fa5)}.select .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-400,#cbd4d9)}.dropdown{max-height:calc(var(--spacing,.25rem)*48);max-width:var(--container-xs,20rem);border-radius:var(--radius-md,.375rem);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 auto}@supports (color:color-mix(in lab, red, red)){.dropdown{--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))}}.dropdown{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dropdown:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-800,#556066);background-color:var(--color-neutral-950,#0d121c)}.dropdown .item{text-overflow:ellipsis;white-space:nowrap;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);-webkit-user-select:none;user-select:none;overflow:hidden}.dropdown .text{color:var(--color-neutral-800,#556066)}.dropdown .text[data-highlighted]{background-color:var(--color-green-500,#5fa04e);color:var(--color-white,#fff);--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.dropdown .text[data-highlighted]{outline-offset:2px;outline:2px solid #0000}}.dropdown .text:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.dropdown .text:where([data-theme=dark],[data-theme=dark] *)[data-highlighted]{background-color:var(--color-green-600,#417e38);color:var(--color-white,#fff)}.dropdown .text>span{align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}.dropdown .text>span>span{max-width:calc(var(--spacing,.25rem)*64);text-overflow:ellipsis;white-space:nowrap;text-wrap:wrap;overflow:hidden}.dropdown .label{color:var(--color-neutral-600,#929fa5)}.dropdown .label:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-400,#cbd4d9)}.dropdown:has(.label) .text>span:has(svg)>svg,.dropdown:has(.label) .text>span:not(.dropdown:has(.label) .text>span:has(svg))>span{margin-left:calc(var(--spacing,.25rem)*3)}.inline .trigger{min-width:fit-content;height:auto;padding-inline:calc(var(--spacing,.25rem)*2.5);padding-block: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)}.inline .icon{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4)}.inline .text{color:var(--color-neutral-900,#2c3437)}.inline .text[data-disabled]{color:var(--color-neutral-600,#929fa5)}.inline .text[data-highlighted]{background-color:var(--color-neutral-100,#f6f7f9);color:var(--color-neutral-900,#2c3437)}.inline .text:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.inline .text:where([data-theme=dark],[data-theme=dark] *)[data-disabled]{color:var(--color-neutral-700,#6e7b83)}.inline .text:where([data-theme=dark],[data-theme=dark] *)[data-highlighted]{background-color:var(--color-neutral-900,#2c3437);color:var(--color-white,#fff)}.inline.dropdown{margin-top:calc(var(--spacing,.25rem)*1);border-radius:.25rem;width:calc(100% + 1.5rem)}.scrollIcon{margin-inline:auto;margin-block:calc(var(--spacing,.25rem)*1);width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);color:var(--color-neutral-700,#6e7b83)}.scrollIcon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.noscript{position:relative}.noscript summary{justify-content:space-between;width:100%;display:flex}.noscript .trigger{display:block}.noscript .dropdown{left:calc(var(--spacing,.25rem)*0);margin-top:calc(var(--spacing,.25rem)*4);position:absolute}.noscript .text{padding-left:calc(var(--spacing,.25rem)*4);white-space:normal;color:var(--color-neutral-800,#556066);display:block}@media (hover:hover){.noscript .text:hover{background-color:var(--color-green-500,#5fa04e);color:var(--color-white,#fff);--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.noscript .text:hover{outline-offset:2px;outline:2px solid #0000}}}.noscript .text:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}@media (hover:hover){.noscript .text:where([data-theme=dark],[data-theme=dark] *):hover{background-color:var(--color-green-600,#417e38);color:var(--color-white,#fff)}}.noscript .text span{height:auto}.noscript .inline .text{padding-left:calc(var(--spacing,.25rem)*2.5)}@property --tw-font-weight{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}

package/Common/Separator/index.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const Separator = ({ className, orientation = 'horizontal', decorative = true, ...props }) => (_jsx(SeparatorPrimitive.Root, { decorative: decorative, orientation: orientation, className: classNames(styles.root, orientation === 'horizontal' ? styles.horizontal : styles.vertical, className), ...props }));
+export default Separator;

package/Common/Separator/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root{background-color:var(--color-neutral-800,#556066);flex-shrink:0}.root.horizontal{width:100%;height:1px}.root.vertical{width:1px;height:100%}

package/Common/Skeleton/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { isValidElement } from 'react';
+import styles from './index.module.css';
+const Skeleton = ({ children, className, hide = false, loading = true, }) => {
+    // This can be used to completely hide the children after the Skeleton has loaded
+    // If certain criterias do not match. This is useful for conditional rendering without
+    // changing the actual tree that the Skeleton is wrapping
+    if (!loading && hide) {
+        return null;
+    }
+    // If we finished loading, we can hide the Skeleton and render the children tree
+    if (!loading) {
+        return children;
+    }
+    return (_jsx("span", { tabIndex: -1, "aria-hidden": "true", className: classNames(styles.skeleton, className), "data-inline-skeleton": isValidElement(children) ? undefined : true, children: children }));
+};
+export default Skeleton;

package/Common/Skeleton/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.skeleton{pointer-events:none;cursor:default;border-radius:var(--radius-md,.375rem);--tw-border-style:none;color:#0000;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style:none;background-clip:border-box;border-style:none;outline-style:none;animation:.5s infinite alternate-reverse pulse}@media (forced-colors:active){.skeleton{outline-offset:2px;outline:2px solid #0000}}.skeleton{-webkit-user-select:none;user-select:none}.skeleton:where([data-theme=dark],[data-theme=dark] *){animation:.5s infinite alternate-reverse pulse-dark}.skeleton[data-inline-skeleton]{--tw-leading:1;line-height:1}.skeleton:empty{height:calc(var(--spacing,.25rem)*3);display:block}.skeleton>*,.skeleton:after,.skeleton:before{visibility:hidden}@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-leading{syntax:"*";inherits:false}@keyframes pulse{0%{background:var(--color-pulse-100)}to{background:var(--color-pulse-200)}}@keyframes pulse-dark{0%{background:var(--color-pulse-300)}to{background:var(--color-pulse-400)}}

package/Common/Tabs/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const Tabs = ({ tabs, addons, triggerClassName, children, ...props }) => (_jsxs(TabsPrimitive.Root, { ...props, className: classNames(styles.tabsRoot, props.className), children: [_jsxs(TabsPrimitive.List, { className: styles.tabsList, children: [tabs.map(tab => (_jsxs(TabsPrimitive.Trigger, { value: tab.value ?? tab.key, className: classNames(styles.tabsTrigger, triggerClassName), children: [tab.label, tab.secondaryLabel ? (_jsx("span", { className: styles.tabSecondaryLabel, children: tab.secondaryLabel })) : null] }, tab.key))), addons && _jsx("div", { className: styles.addons, children: addons })] }), children] }));
+export default Tabs;

package/Common/Tabs/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.tabsRoot{max-width:100%;display:grid}.tabsRoot .tabsList{gap:calc(var(--spacing,.25rem)*2);font-family:var(--font-open-sans,var(--font-open-sans));scrollbar-width:thin;display:flex;overflow-x:auto}.tabsRoot .tabsList .tabsTrigger{border-bottom-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem)*1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--color-neutral-800,#556066);border-bottom-width:2px;border-bottom-color:#0000;padding-bottom:11px}.tabsRoot .tabsList .tabsTrigger:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.tabsRoot .tabsList .tabsTrigger .tabSecondaryLabel{padding-left:calc(var(--spacing,.25rem)*1);color:var(--color-neutral-500,#b1bcc2)}.tabsRoot .tabsList .tabsTrigger .tabSecondaryLabel:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-800,#556066)}.tabsRoot .tabsList .tabsTrigger[data-state=active]{border-bottom-color:var(--color-green-600,#417e38);color:var(--color-green-600,#417e38)}.tabsRoot .tabsList .tabsTrigger[data-state=active]:where([data-theme=dark],[data-theme=dark] *){border-bottom-color:var(--color-green-400,#84ba64);color:var(--color-green-400,#84ba64)}.tabsRoot .tabsList .tabsTrigger[data-state=active] .tabSecondaryLabel{color:var(--color-green-800,#2c682c)}.tabsRoot .tabsList .tabsTrigger[data-state=active] .tabSecondaryLabel:where([data-theme=dark],[data-theme=dark] *){color:var(--color-green-600,#417e38)}.tabsRoot .tabsList .addons{border-bottom-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem)*1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);border-bottom-width:2px;border-bottom-color:#0000;margin-left:auto;padding-bottom:11px}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}

package/Common/ThemeToggle/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
+import styles from './index.module.css';
+const ThemeToggle = props => {
+    return (_jsxs("button", { type: "button", className: styles.themeToggle, ...props, children: [_jsx(MoonIcon, { className: "block dark:hidden", height: "20" }), _jsx(SunIcon, { className: "hidden dark:block", height: "20" })] }));
+};
+export default ThemeToggle;

package/Common/ThemeToggle/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.themeToggle{width:calc(var(--spacing,.25rem)*9);height: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){.themeToggle{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))}}.themeToggle:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-300,#d9e1e4)}.themeToggle:hover{background-color:var(--color-neutral-100,#f6f7f9)}.themeToggle:hover:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437)}

package/Common/Tooltip/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const Tooltip = ({ kind = 'default', children, content, asChild = false, side = 'bottom', container, }) => (_jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: asChild, children: children }), _jsx(TooltipPrimitive.Portal, { container: container, children: _jsxs(TooltipPrimitive.Content, { side: side, sideOffset: 4, className: classNames(styles[kind], styles.content, {
+                        'mx-1.5': side === 'top' || side === 'bottom',
+                    }), children: [content, _jsx(TooltipPrimitive.Arrow, { className: styles.arrow, width: 14, height: 6 })] }) })] }) }));
+export default Tooltip;

package/Common/Tooltip/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.content{border-radius:var(--radius-md,.375rem);border-style:var(--tw-border-style);background-color:var(--color-white,#fff);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-900,#2c3437);--tw-shadow:0px 4px 6px -2px var(--tw-shadow-color,#10182808),0px 12px 16px -4px var(--tw-shadow-color,#10182814);border-width:1px}@supports (color:color-mix(in lab, red, red)){.content{--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))}}.content{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.content:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-950,#0d121c);color:var(--color-white,#fff)}.content.default{border-color:var(--color-neutral-200,#e9edf0)}.content.default:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437)}.content.default .arrow{fill:var(--color-neutral-200,#e9edf0)}.content.default .arrow:where([data-theme=dark],[data-theme=dark] *){fill:var(--color-neutral-900,#2c3437)}.content.error{border-color:var(--color-danger-400,#fa8e8e)}.content.error:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-danger-900,#661514)}.content.error .arrow{fill:var(--color-danger-400,#fa8e8e)}.content.error .arrow:where([data-theme=dark],[data-theme=dark] *){fill:var(--color-danger-900,#661514)}.content.warning{border-color:var(--color-warning-400,#e99c40)}.content.warning:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-warning-900,#4d2f0b)}.content.warning .arrow{fill:var(--color-warning-400,#e99c40)}.content.warning .arrow:where([data-theme=dark],[data-theme=dark] *){fill:var(--color-warning-900,#4d2f0b)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@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}

package/Containers/Article/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index.module.css';
+const ArticleLayout = ({ children }) => (_jsx("div", { className: styles.articleLayout, children: children }));
+export default ArticleLayout;

package/Containers/Article/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.articleLayout{width:100%;max-width:95rem;margin-inline:auto;display:block}@media (min-width:40rem){.articleLayout{grid-template:"sidebar main"1fr"sidebar footer"/13rem 1fr;display:grid;overflow:visible}}@media (min-width:48rem){.articleLayout{grid-template-columns:16rem 1fr}}@media (min-width:64rem){.articleLayout{grid-template-columns:13rem 1fr 13rem;grid-template-areas:"sidebar main metabar""sidebar footer metabar"}}@media (min-width:80rem){.articleLayout{grid-template-columns:20rem 1fr 20rem}}.articleLayout>:first-child{grid-area:sidebar}@media (min-width:64rem){.articleLayout>:first-child{top:calc(var(--spacing,.25rem)*0);height:100vh;position:sticky;overflow-y:auto}}.articleLayout>:nth-child(2){display:contents}@media (min-width:40rem){@media not all and (min-width:64rem){.articleLayout>:nth-child(2){display:block}}}.articleLayout>:nth-child(2)>:first-child{padding:calc(var(--spacing,.25rem)*4);grid-area:main}@media (prefers-reduced-motion:no-preference){.articleLayout>:nth-child(2)>:first-child{scroll-behavior:smooth}}@media (min-width:40rem){.articleLayout>:nth-child(2)>:first-child{background-image:linear-gradient(#f6f7f980 0%,#0000 48.32%)}@supports (color:color-mix(in lab, red, red)){.articleLayout>:nth-child(2)>:first-child{background-image:linear-gradient(180deg,color-mix(in oklab,var(--color-neutral-100)50%,transparent)0%,color-mix(in oklab,var(--color-neutral-100)0%,transparent)48.32%)}}.articleLayout>:nth-child(2)>:first-child{padding:calc(var(--spacing,.25rem)*12);background-attachment:fixed}}@media (min-width:80rem){.articleLayout>:nth-child(2)>:first-child{padding-inline:calc(var(--spacing,.25rem)*18)}}@media (min-width:40rem){.articleLayout>:nth-child(2)>:first-child:where([data-theme=dark],[data-theme=dark] *){background-image:linear-gradient(#2c343780 0%,#0000 48.32%)}@supports (color:color-mix(in lab, red, red)){.articleLayout>:nth-child(2)>:first-child:where([data-theme=dark],[data-theme=dark] *){background-image:linear-gradient(180deg,color-mix(in oklab,var(--color-neutral-900)50%,transparent)0%,color-mix(in oklab,var(--color-neutral-900)0%,transparent)48.32%)}}}.articleLayout>:nth-child(2)>:last-child{margin-top:calc(var(--spacing,.25rem)*8);border-top-style:var(--tw-border-style);border-top-width:1px;grid-area:metabar}@media (min-width:40rem){.articleLayout>:nth-child(2)>:last-child{margin-top:calc(var(--spacing,.25rem)*0)}}@media (min-width:64rem){.articleLayout>:nth-child(2)>:last-child{top:calc(var(--spacing,.25rem)*0);max-width:var(--container-xs,20rem);border-top-style:var(--tw-border-style);border-top-width:0;border-left-style:var(--tw-border-style);border-left-width:1px;position:sticky}}.articleLayout>:nth-child(3){bottom:calc(var(--spacing,.25rem)*0);border-top-style:var(--tw-border-style);border-top-width:1px;border-top-color:var(--color-neutral-200,#e9edf0);background-color:var(--color-white,#fff);width:100%;padding-block:calc(var(--spacing,.25rem)*4);flex-direction:column;grid-area:footer;align-self:stretch;align-items:center;display:flex;position:sticky}.articleLayout>:nth-child(3):where([data-theme=dark],[data-theme=dark] *){border-top-color:var(--color-neutral-900,#2c3437);background-color:var(--color-neutral-950,#0d121c)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}

package/Containers/Footer/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import NavItem from '#ui/Containers/NavBar/NavItem';
+import { Bluesky, Discord, GitHub, LinkedIn, Mastodon, Slack, X, } from '#ui/Icons/Social';
+import styles from './index.module.css';
+const footerSocialIcons = {
+    github: GitHub,
+    mastodon: Mastodon,
+    twitter: X,
+    slack: Slack,
+    linkedin: LinkedIn,
+    bluesky: Bluesky,
+    discord: Discord,
+};
+const Footer = ({ pathname = '/', as = 'a', navigation, slots, }) => {
+    const openJSlink = navigation.footerLinks.at(-1);
+    return (_jsxs("footer", { className: styles.footer, children: [_jsxs("div", { className: styles.sectionPrimary, children: [slots?.primary, navigation.footerLinks.slice(0, -1).map(item => (_jsx(NavItem, { type: "footer", href: item.link, as: as, pathname: pathname, children: item.text }, item.link)))] }), _jsxs("div", { className: styles.sectionSecondary, children: [slots?.secondary, _jsxs(NavItem, { type: "footer", href: openJSlink.link, as: as, pathname: pathname, children: ["\u00A9 ", openJSlink.text] }), _jsx("div", { className: styles.social, children: navigation.socialLinks.map(link => {
+                            const SocialIcon = footerSocialIcons[link.icon];
+                            return (_jsx(NavItem, { href: link.link, type: "footer", as: as, pathname: pathname, children: _jsx(SocialIcon, { width: 20, height: 20, "aria-label": link.link }) }, link.icon));
+                        }) })] })] }));
+};
+export default Footer;

package/Containers/Footer/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.footer{align-items:center;gap:calc(var(--spacing,.25rem)*6);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-neutral-200,#e9edf0);background-color:var(--color-white,#fff);padding-block:calc(var(--spacing,.25rem)*4);flex-direction:column;display:flex}@media (min-width:40rem){.footer{padding-inline:calc(var(--spacing,.25rem)*8)}}@media (min-width:48rem){.footer{padding-block:calc(var(--spacing,.25rem)*5);flex-direction:row;justify-content:space-between}}.footer:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437);background-color:var(--color-neutral-950,#0d121c)}.footer .sectionPrimary{place-content:flex-start center;align-items:center;gap:calc(var(--spacing,.25rem)*1);flex-wrap:wrap;align-self:stretch;display:flex}.footer .sectionPrimary a{white-space:nowrap}.footer .sectionSecondary{align-items:center;gap:calc(var(--spacing,.25rem)*1);flex-direction:column;display:flex}@media (min-width:48rem){.footer .sectionSecondary{flex-direction:row}}.footer .sectionSecondary .social{align-items:center;gap:calc(var(--spacing,.25rem)*1);display:flex}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}

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

@@ -0,0 +1,2 @@
+/*! 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

@@ -0,0 +1,2 @@
+/*! 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

@@ -0,0 +1,2 @@
+/*! 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)}span.themeToggleSkeleton{width:calc(var(--spacing,.25rem)*9);height:calc(var(--spacing,.25rem)*9);border-radius:var(--radius-md,.375rem);padding-block:calc(var(--spacing,.25rem)*4)}.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

@@ -0,0 +1,2 @@
+/*! 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

@@ -0,0 +1,2 @@
+/*! 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-900,#2c3437);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 WithNoScriptSelect from '#ui/Common/Select/NoScriptSelect';
+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(WithNoScriptSelect, { label: title, values: selectItems, defaultValue: currentItem?.value, placeholder: placeholder, onChange: onSelect, className: styles.mobileSelect, as: as })), 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,2 @@
+/*! 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}@media (min-width:40rem){.wrapper{border-right-style:var(--tw-border-style);border-right-width:1px;overflow:auto}}@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}