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

package/Common/Select/index.js

@@ -0,0 +1,47 @@
+'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 styles from './index.module.css';
+const isStringArray = (values) => Boolean(values[0] && typeof values[0] === 'string');
+const isValuesArray = (values) => Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
+const Select = ({ values = [], defaultValue, placeholder, label, inline, onChange, className, dropdownClassName, ariaLabel, loading = false, disabled = false, }) => {
+    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), 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

@@ -1,161 +1,2 @@
-@reference "../../styles/index.css";
-
-.select {
-  @apply inline-flex
-    flex-col
-    gap-1.5;
-
-  .label {
-    @apply block
-      w-full
-      text-sm
-      font-medium
-      text-neutral-800
-      dark:text-neutral-200;
-  }
-
-  .trigger {
-    @apply shadow-xs
-      outline-hidden
-      inline-flex
-      h-11
-      w-full
-      min-w-[17rem]
-      items-center
-      justify-between
-      gap-2
-      rounded-sm
-      border
-      border-neutral-300
-      bg-white
-      px-3.5
-      py-2.5
-      text-left
-      text-base
-      font-medium
-      text-neutral-900
-      focus:border-neutral-500
-      focus:ring-1
-      focus:ring-neutral-500
-      data-[placeholder]:text-neutral-800
-      dark:border-neutral-800
-      dark:bg-neutral-950
-      dark:text-white
-      dark:focus:border-neutral-600
-      dark:focus:ring-neutral-600
-      dark:data-[placeholder]:text-neutral-200;
-  }
-
-  .trigger span {
-    @apply flex
-      h-5
-      items-center
-      gap-2;
-  }
-
-  .icon {
-    @apply size-5
-      text-neutral-600
-      dark:text-neutral-400;
-  }
-}
-
-.dropdown {
-  @apply max-h-48
-    max-w-xs
-    overflow-hidden
-    overflow-y-auto
-    rounded-md
-    border
-    border-neutral-200
-    bg-white
-    shadow-lg
-    dark:border-neutral-800
-    dark:bg-neutral-950;
-
-  .item {
-    @apply select-none
-      truncate
-      px-2.5
-      py-1.5
-      text-sm
-      font-medium;
-  }
-
-  .text {
-    @apply data-[highlighted]:outline-hidden
-      text-neutral-800
-      data-[highlighted]:bg-green-500
-      data-[highlighted]:text-white
-      dark:text-neutral-200
-      dark:data-[highlighted]:bg-green-600
-      dark:data-[highlighted]:text-white;
-  }
-
-  .text > span {
-    @apply flex
-      items-center
-      gap-2;
-  }
-
-  .text > span > span {
-    @apply max-w-64
-      truncate
-      text-wrap;
-  }
-
-  .label {
-    @apply text-neutral-600
-      dark:text-neutral-400;
-  }
-}
-
-.dropdown:has(.label) .text > span {
-  &:has(svg) > svg {
-    @apply ml-3;
-  }
-
-  &:not(&:has(svg)) > span {
-    @apply ml-3;
-  }
-}
-
-.inline {
-  .trigger {
-    @apply h-auto
-      min-w-fit
-      px-2.5
-      py-2
-      text-sm
-      font-medium;
-  }
-
-  .icon {
-    @apply size-4;
-  }
-
-  .text {
-    @apply text-neutral-900
-      data-[highlighted]:bg-neutral-100
-      data-[disabled]:text-neutral-600
-      data-[highlighted]:text-neutral-900
-      dark:text-white
-      dark:data-[highlighted]:bg-neutral-900
-      dark:data-[disabled]:text-neutral-700
-      dark:data-[highlighted]:text-white;
-  }
-
-  &.dropdown {
-    @apply mt-1
-      w-[calc(100%+1.5rem)]
-      rounded;
-  }
-}
-
-.scrollIcon {
-  @apply mx-auto
-    my-1
-    size-4
-    text-neutral-700
-    dark:text-neutral-200;
-}
+/*! 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)}@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

@@ -1,16 +1,2 @@
-@reference "../../styles/index.css";
-
-.root {
-  @apply shrink-0
-    bg-neutral-800;
-
-  &.horizontal {
-    @apply h-px
-      w-full;
-  }
-
-  &.vertical {
-    @apply h-full
-      w-px;
-  }
-}
+/*! 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

@@ -1,30 +1,2 @@
-@reference "../../styles/index.css";
-
-.skeleton {
-  @apply outline-hidden
-    dark:animate-pulse-dark
-    pointer-events-none
-    animate-pulse
-    cursor-default
-    select-none
-    rounded-md
-    border-none
-    bg-clip-border
-    text-transparent
-    shadow-none;
-}
-
-.skeleton[data-inline-skeleton] {
-  @apply leading-none;
-}
-
-.skeleton:empty {
-  @apply block
-    h-3;
-}
-
-.skeleton > *,
-.skeleton::after,
-.skeleton::before {
-  @apply invisible;
-}
+/*! 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

@@ -1,54 +1,2 @@
-@reference "../../styles/index.css";
-
-.tabsRoot {
-  @apply grid
-    max-w-full;
-
-  .tabsList {
-    @apply font-open-sans
-      scrollbar-thin
-      flex
-      gap-2
-      overflow-x-auto;
-
-    .tabsTrigger {
-      @apply whitespace-nowrap
-        border-b-2
-        border-b-transparent
-        px-1
-        pb-[11px]
-        text-sm
-        font-semibold
-        text-neutral-800
-        dark:text-neutral-200;
-
-      .tabSecondaryLabel {
-        @apply pl-1
-          text-neutral-500
-          dark:text-neutral-800;
-      }
-
-      &[data-state='active'] {
-        @apply border-b-green-600
-          text-green-600
-          dark:border-b-green-400
-          dark:text-green-400;
-
-        .tabSecondaryLabel {
-          @apply text-green-800
-            dark:text-green-600;
-        }
-      }
-    }
-
-    .addons {
-      @apply ml-auto
-        border-b-2
-        border-b-transparent
-        px-1
-        pb-[11px]
-        text-sm
-        font-semibold;
-    }
-  }
-}
+/*! 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

@@ -1,15 +1,2 @@
-@reference "../../styles/index.css";
-
-.themeToggle {
-  @apply size-9
-    rounded-md
-    p-2
-    text-neutral-700
-    motion-safe:transition-colors
-    dark:text-neutral-300;
-
-  &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-  }
-}
+/*! 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

@@ -1,43 +1,2 @@
-@reference "../../styles/index.css";
-
-.content {
-  @apply rounded-md
-    border
-    bg-white
-    text-sm
-    font-medium
-    text-neutral-900
-    shadow-lg
-    dark:bg-neutral-950
-    dark:text-white;
-
-  &.default {
-    @apply border-neutral-200
-      dark:border-neutral-900;
-
-    .arrow {
-      @apply fill-neutral-200
-        dark:fill-neutral-900;
-    }
-  }
-
-  &.error {
-    @apply border-danger-400
-      dark:border-danger-900;
-
-    .arrow {
-      @apply fill-danger-400
-        dark:fill-danger-900;
-    }
-  }
-
-  &.warning {
-    @apply border-warning-400
-      dark:border-warning-900;
-
-    .arrow {
-      @apply fill-warning-400
-        dark:fill-warning-900;
-    }
-  }
-}
+/*! 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

@@ -1,70 +1,2 @@
-@reference "../../styles/index.css";
-
-.articleLayout {
-  @apply max-w-8xl
-    mx-auto
-    block
-    w-full
-    sm:grid
-    sm:grid-cols-[theme(spacing.52)_1fr]
-    sm:grid-rows-[1fr]
-    sm:overflow-visible
-    sm:[grid-template-areas:'sidebar_main''sidebar_footer']
-    md:grid-cols-[theme(spacing.64)_1fr]
-    lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
-    lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
-    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
-
-  > *:nth-child(1) {
-    @apply [grid-area:sidebar]
-      lg:sticky
-      lg:top-0
-      lg:h-[100vh]
-      lg:overflow-y-auto;
-  }
-
-  > *:nth-child(2) {
-    @apply contents
-      sm:max-lg:block;
-
-    > *:first-child {
-      @apply sm:bg-gradient-subtle
-        sm:dark:bg-gradient-subtle-dark
-        xl:px-18
-        p-4
-        [grid-area:main]
-        motion-safe:scroll-smooth
-        sm:bg-fixed
-        sm:p-12;
-    }
-
-    > *:last-child {
-      @apply mt-8
-        border-t
-        [grid-area:metabar]
-        sm:mt-0
-        lg:sticky
-        lg:top-0
-        lg:max-w-xs
-        lg:border-l
-        lg:border-t-0;
-    }
-  }
-
-  > *:nth-child(3) {
-    @apply sticky
-      bottom-0
-      flex
-      w-full
-      flex-col
-      items-center
-      self-stretch
-      border-t
-      border-t-neutral-200
-      bg-white
-      py-4
-      [grid-area:footer]
-      dark:border-t-neutral-900
-      dark:bg-neutral-950;
-  }
-}
+/*! 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

@@ -1,46 +1,2 @@
-@reference "../../styles/index.css";
-
-.footer {
-  @apply flex
-    flex-col
-    items-center
-    gap-6
-    border-t
-    border-neutral-200
-    bg-white
-    py-4
-    sm:px-8
-    md:flex-row
-    md:justify-between
-    md:py-5
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-
-  .sectionPrimary {
-    @apply flex
-      flex-wrap
-      content-start
-      items-center
-      justify-center
-      gap-1
-      self-stretch;
-
-    a {
-      @apply whitespace-nowrap;
-    }
-  }
-
-  .sectionSecondary {
-    @apply flex
-      flex-col
-      items-center
-      gap-1
-      md:flex-row;
-
-    .social {
-      @apply flex
-        items-center
-        gap-1;
-    }
-  }
-}
+/*! 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;