@node-core/ui-components 1.0.1-b2d4fae0fc29bf3aeebacb37572f47a0a81dd8ed → 1.0.1-b8e314e799e27da854d47f211c1fed36810b969a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Common/Badge/index.module.css +1 -1
- package/Common/Select/NoScriptSelect/index.js +10 -0
- package/Common/Select/StatelessSelect/index.js +31 -0
- package/Common/Select/index.js +3 -4
- package/Common/Select/index.module.css +1 -1
- package/Containers/Sidebar/SidebarItem/index.module.css +1 -1
- package/Containers/Sidebar/index.js +2 -2
- package/Containers/Sidebar/index.module.css +1 -1
- package/MDX/CodeTabs.js +19 -15
- package/package.json +5 -3
- package/util/array.js +2 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.badge{
|
|
2
|
+
.badge{text-align:center;color:var(--color-white,#fff);border-radius:3.40282e38px}.badge.small{padding-inline:calc(var(--spacing,.25rem)*1.5);padding-block:calc(var(--spacing,.25rem)*0.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333))}.badge.medium{padding-inline:calc(var(--spacing,.25rem)*2.5);padding-block:calc(var(--spacing,.25rem)*0.5);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,1.5))}.badge.default{background-color:var(--color-green-600,#417e38)}.badge.error{background-color:var(--color-danger-600,#de1a1b)}.badge.warning{background-color:var(--color-warning-600,#ae5f00)}.badge.info{background-color:var(--color-info-600,#0c7bb3)}.badge.neutral{background-color:var(--color-neutral-600,#929fa5)}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useId } from 'react';
|
|
3
|
+
import Select from '#ui/Common/Select';
|
|
4
|
+
import StatelessSelect from '#ui/Common/Select/StatelessSelect';
|
|
5
|
+
const WithNoScriptSelect = ({ as, ...props }) => {
|
|
6
|
+
const id = useId();
|
|
7
|
+
const selectId = `select-${id.replace(/[^a-zA-Z0-9]/g, '')}`;
|
|
8
|
+
return (_jsxs(_Fragment, { children: [_jsx(Select, { ...props, fallbackClass: selectId }), _jsxs("noscript", { children: [_jsx("style", { children: `.${selectId} { display: none!important; }` }), _jsx(StatelessSelect, { ...props, as: as })] })] }));
|
|
9
|
+
};
|
|
10
|
+
export default WithNoScriptSelect;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { ChevronDownIcon } from '@heroicons/react/24/solid';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { useId, useMemo } from 'react';
|
|
5
|
+
import { isStringArray, isValuesArray } from '#ui/util/array';
|
|
6
|
+
import styles from '../index.module.css';
|
|
7
|
+
const StatelessSelect = ({ values = [], defaultValue, placeholder, label, inline, className, ariaLabel, disabled = false, as: Component = 'div', }) => {
|
|
8
|
+
const id = useId();
|
|
9
|
+
const mappedValues = useMemo(() => {
|
|
10
|
+
let mappedValues = values;
|
|
11
|
+
if (isStringArray(mappedValues)) {
|
|
12
|
+
mappedValues = mappedValues.map(value => ({
|
|
13
|
+
label: value,
|
|
14
|
+
value: value,
|
|
15
|
+
}));
|
|
16
|
+
}
|
|
17
|
+
if (isValuesArray(mappedValues)) {
|
|
18
|
+
return [{ items: mappedValues }];
|
|
19
|
+
}
|
|
20
|
+
return mappedValues;
|
|
21
|
+
}, [values]);
|
|
22
|
+
// Find the current/default item to display in summary
|
|
23
|
+
const currentItem = useMemo(() => mappedValues
|
|
24
|
+
.flatMap(({ items }) => items)
|
|
25
|
+
.find(item => item.value === defaultValue), [mappedValues, defaultValue]);
|
|
26
|
+
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, {
|
|
27
|
+
[styles.disabled]: itemDisabled || disabled,
|
|
28
|
+
[styles.selected]: value === defaultValue,
|
|
29
|
+
}), "aria-disabled": itemDisabled || disabled, children: [iconImage, _jsx("span", { children: label })] }, value)))] }, groupLabel?.toString() ?? groupKey))) })] })] }));
|
|
30
|
+
};
|
|
31
|
+
export default StatelessSelect;
|
package/Common/Select/index.js
CHANGED
|
@@ -5,10 +5,9 @@ import * as SelectPrimitive from '@radix-ui/react-select';
|
|
|
5
5
|
import classNames from 'classnames';
|
|
6
6
|
import { useEffect, useId, useMemo, useState } from 'react';
|
|
7
7
|
import Skeleton from '#ui/Common/Skeleton';
|
|
8
|
+
import { isStringArray, isValuesArray } from '#ui/util/array';
|
|
8
9
|
import styles from './index.module.css';
|
|
9
|
-
const
|
|
10
|
-
const isValuesArray = (values) => Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
|
|
11
|
-
const Select = ({ values = [], defaultValue, placeholder, label, inline, onChange, className, dropdownClassName, ariaLabel, loading = false, disabled = false, }) => {
|
|
10
|
+
const Select = ({ values = [], defaultValue, placeholder, label, inline, onChange, className, dropdownClassName, ariaLabel, loading = false, disabled = false, fallbackClass = '', }) => {
|
|
12
11
|
const id = useId();
|
|
13
12
|
const [value, setValue] = useState(defaultValue);
|
|
14
13
|
useEffect(() => setValue(defaultValue), [defaultValue]);
|
|
@@ -42,6 +41,6 @@ const Select = ({ values = [], defaultValue, placeholder, label, inline, onChang
|
|
|
42
41
|
onChange(value);
|
|
43
42
|
}
|
|
44
43
|
};
|
|
45
|
-
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 }) })] }) })] })] }) }));
|
|
44
|
+
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 }) })] }) })] })] }) }));
|
|
46
45
|
};
|
|
47
46
|
export default Select;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.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}
|
|
2
|
+
.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}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.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-
|
|
2
|
+
.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}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import WithNoScriptSelect from '#ui/Common/Select/NoScriptSelect';
|
|
3
3
|
import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
|
|
4
4
|
import styles from './index.module.css';
|
|
5
5
|
const SideBar = ({ groups, pathname, title, onSelect, as, showProgressionIcons = false, children, placeholder, }) => {
|
|
@@ -10,6 +10,6 @@ const SideBar = ({ groups, pathname, title, onSelect, as, showProgressionIcons =
|
|
|
10
10
|
const currentItem = selectItems
|
|
11
11
|
.flatMap(item => item.items)
|
|
12
12
|
.find(item => pathname === item.value);
|
|
13
|
-
return (_jsxs("aside", { className: styles.wrapper, children: [children, selectItems.length > 0 && (_jsx(
|
|
13
|
+
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())))] }));
|
|
14
14
|
};
|
|
15
15
|
export default SideBar;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.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
|
|
2
|
+
.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}
|
package/MDX/CodeTabs.js
CHANGED
|
@@ -1,25 +1,29 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
3
|
+
import { useMemo } from 'react';
|
|
3
4
|
import CodeTabs from '#ui/Common/CodeTabs';
|
|
4
5
|
const NAME_OVERRIDES = {
|
|
5
6
|
mjs: 'ESM',
|
|
6
7
|
};
|
|
7
8
|
const MDXCodeTabs = ({ languages: rawLanguages, displayNames: rawDisplayNames, children: codes, defaultTab = '0', ...props }) => {
|
|
8
|
-
const languages =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
9
|
+
const { tabs, languages } = useMemo(() => {
|
|
10
|
+
const occurrences = {};
|
|
11
|
+
const languages = rawLanguages.split('|');
|
|
12
|
+
const displayNames = rawDisplayNames?.split('|') ?? [];
|
|
13
|
+
const tabs = languages.map((language, index) => {
|
|
14
|
+
const base = displayNames[index]?.trim() ||
|
|
15
|
+
NAME_OVERRIDES[language] ||
|
|
16
|
+
language.toUpperCase();
|
|
17
|
+
const count = occurrences[base] ?? 0;
|
|
18
|
+
occurrences[base] = count + 1;
|
|
19
|
+
const label = count > 0 ? `${base} (${count + 1})` : base;
|
|
20
|
+
return {
|
|
21
|
+
key: `${language}-${index}`,
|
|
22
|
+
label: label,
|
|
23
|
+
};
|
|
24
|
+
});
|
|
25
|
+
return { tabs, languages };
|
|
26
|
+
}, [rawLanguages, rawDisplayNames]);
|
|
23
27
|
return (_jsx(CodeTabs, { tabs: tabs, defaultValue: tabs[Number(defaultTab)].key, ...props, children: languages.map((_, index) => (_jsx(TabsPrimitive.Content, { value: tabs[index].key, children: codes[index] }, tabs[index].key))) }));
|
|
24
28
|
};
|
|
25
29
|
export default MDXCodeTabs;
|
package/package.json
CHANGED
|
@@ -26,15 +26,17 @@
|
|
|
26
26
|
"engines": {
|
|
27
27
|
"node": ">=20"
|
|
28
28
|
},
|
|
29
|
-
"version": "1.0.1-
|
|
29
|
+
"version": "1.0.1-b8e314e799e27da854d47f211c1fed36810b969a",
|
|
30
30
|
"scripts": {
|
|
31
31
|
"compile:ts": "tsc",
|
|
32
32
|
"compile:css": "postcss --dir dist --base src \"src/**/*.module.css\" src/styles/index.css",
|
|
33
33
|
"compile": "node --run compile:ts && node --run compile:css",
|
|
34
|
-
"lint": "
|
|
34
|
+
"lint": "node --run lint:js && node --run lint:css",
|
|
35
35
|
"lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
|
|
36
|
-
"lint:fix": "node --run lint -- --
|
|
36
|
+
"lint:css:fix": "node --run lint:css -- --fix",
|
|
37
|
+
"lint:fix": "node --run lint:js:fix && node --run lint:css:fix",
|
|
37
38
|
"lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\"",
|
|
39
|
+
"lint:js:fix": "node --run lint:js -- --fix",
|
|
38
40
|
"lint:types": "tsc --noEmit",
|
|
39
41
|
"storybook": "cross-env NODE_NO_WARNINGS=1 storybook dev -p 6006 --quiet",
|
|
40
42
|
"storybook:build": "cross-env NODE_NO_WARNINGS=1 storybook build --quiet --webpack-stats-json",
|
package/util/array.js
ADDED