@node-core/ui-components 1.5.0 → 1.5.1

package/Common/Badge/index.module.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-.badge{text-align:center;white-space:nowrap;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)}
+.badge{text-align:center;white-space:nowrap;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-800,#556066)}

package/Common/BaseCodeBox/index.js

@@ -1,8 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentDuplicateIcon, CodeBracketIcon, } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 import { Fragment, isValidElement, useRef } from 'react';
 import BaseButton from '#ui/Common/BaseButton';
+import useCopy from '#ui/hooks/useCopy';
 import styles from './index.module.css';
 // Transforms a code element with plain text content into a more structured
 // format for rendering with line numbers
@@ -36,14 +38,11 @@ const transformCode = (code, language) => {
             // the last flatMap entry which is an `\n`
             .slice(0, -2) }));
 };
-const BaseCodeBox = ({ children, language, className, onCopy, buttonContent, as = 'a', }) => {
+const BaseCodeBox = ({ children, language, className, copyButtonLabel, copiedButtonLabel, as = 'a', }) => {
+    const [copied, copy] = useCopy();
     const containerRef = useRef(null);
-    const handleCopy = () => {
-        const text = containerRef.current?.textContent;
-        if (text) {
-            onCopy(text);
-        }
-    };
-    return (_jsxs("div", { className: styles.root, children: [_jsx("pre", { ref: containerRef, className: classNames(styles.content, className), tabIndex: 0, children: transformCode(children, language) }), language && (_jsxs("div", { className: styles.footer, children: [_jsx("span", { className: styles.language, children: language }), _jsx(BaseButton, { as: as, className: styles.action, kind: "neutral", onClick: handleCopy, children: buttonContent })] }))] }));
+    const handleCopy = () => copy(containerRef.current?.textContent);
+    const ButtonIcon = copied ? DocumentDuplicateIcon : CodeBracketIcon;
+    return (_jsxs("div", { className: styles.root, children: [_jsx("pre", { ref: containerRef, className: classNames(styles.content, className), tabIndex: 0, children: transformCode(children, language) }), language && (_jsxs("div", { className: styles.footer, children: [_jsx("span", { className: styles.language, children: language }), _jsxs(BaseButton, { as: as, className: styles.action, kind: "neutral", onClick: handleCopy, children: [_jsx(ButtonIcon, { className: "size-4" }), copied ? copiedButtonLabel : copyButtonLabel] })] }))] }));
 };
 export default BaseCodeBox;

package/Common/Breadcrumbs/BreadcrumbLink/index.module.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-.link{text-overflow:ellipsis;white-space:nowrap;max-width:fit-content;overflow:hidden}.link.active{background-color:var(--color-green-600,#417e38);padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-white,#fff);border-radius:.25rem}@media (prefers-reduced-motion:no-preference){.link.active{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))}}.link.active:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.link.active:hover{background-color:var(--color-green-700,#2c682c);color:var(--color-white,#fff)}@property --tw-font-weight{syntax:"*";inherits:false}
+.link{text-overflow:ellipsis;white-space:nowrap;max-width:fit-content;overflow:hidden}.link.active{background-color:var(--color-green-800,#2c682c);padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-white,#fff);border-radius:.25rem}@media (prefers-reduced-motion:no-preference){.link.active{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))}}.link.active:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.link.active:hover{background-color:var(--color-green-700,#2c682c);color:var(--color-white,#fff)}@property --tw-font-weight{syntax:"*";inherits:false}

package/Common/Select/StatelessSelect/index.js

@@ -2,23 +2,11 @@ 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 { mapValues } from '../utils';
 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,
-            }));
-        }
-        if (isValuesArray(mappedValues)) {
-            return [{ items: mappedValues }];
-        }
-        return mappedValues;
-    }, [values]);
+    const mappedValues = useMemo(() => mapValues(values), [values]);
     // Find the current/default item to display in summary
     const currentItem = useMemo(() => mappedValues
         .flatMap(({ items }) => items)

package/Common/Select/index.js

@@ -5,25 +5,13 @@ 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 { mapValues } from './utils';
 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,
-            }));
-        }
-        if (isValuesArray(mappedValues)) {
-            return [{ items: mappedValues }];
-        }
-        return mappedValues;
-    }, [values]);
+    const mappedValues = useMemo(() => mapValues(values), [values]);
     // We render the actual item slotted to fix/prevent the issue
     // of the tirgger flashing on the initial render
     const currentItem = useMemo(() => mappedValues

package/Common/Select/utils.js

@@ -0,0 +1,15 @@
+export const isStringArray = (values) => Boolean(values[0] && typeof values[0] === 'string');
+export const isValuesArray = (values) => Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
+export const mapValues = (values) => {
+    let mappedValues = values;
+    if (isStringArray(mappedValues)) {
+        mappedValues = mappedValues.map(value => ({
+            label: value,
+            value,
+        }));
+    }
+    if (isValuesArray(mappedValues)) {
+        return [{ items: mappedValues }];
+    }
+    return mappedValues;
+};

package/Common/SkipToContentButton/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index.module.css';
+const SkipToContentButton = ({ children, href = '#main', ...props }) => {
+    return (_jsx("a", { href: href, className: styles.skipToContent, ...props, children: children }));
+};
+export default SkipToContentButton;

package/Common/SkipToContentButton/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+.skipToContent{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skipToContent:focus{clip-path:none;white-space:normal;width:auto;height:auto;top:calc(var(--spacing,.25rem)*4);left:calc(var(--spacing,.25rem)*4);z-index:50;background-color:var(--color-green-600,#417e38);padding:0;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*2);color:var(--color-white,#fff);--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-green-500,#5fa04e);--tw-outline-style:none;border-radius:.25rem;outline-style:none;margin:0;position:absolute;overflow:visible}.skipToContent:where([data-theme=dark],[data-theme=dark] *):focus{--tw-ring-color:var(--color-green-400,#84ba64)}@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/hooks/useCopy.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react';
+const copyToClipboard = async (value) => {
+    if (!value) {
+        return false;
+    }
+    try {
+        await navigator.clipboard.writeText(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+export default function useCopy() {
+    const [copied, setCopied] = useState(false);
+    const copyText = useCallback(async (text) => {
+        const success = await copyToClipboard(text);
+        setCopied(success);
+    }, []);
+    useEffect(() => {
+        if (!copied) {
+            return;
+        }
+        const timerId = setTimeout(() => setCopied(false), 3000);
+        return () => clearTimeout(timerId);
+    }, [copied]);
+    return [copied, copyText];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "type": "module",
   "repository": {
     "type": "git",

package/util/array.js

@@ -1,2 +0,0 @@
-export const isStringArray = (values) => Boolean(values[0] && typeof values[0] === 'string');
-export const isValuesArray = (values) => Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);