@node-core/ui-components 1.5.4 → 1.5.6

package/Common/Banner/index.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './index.module.css';
-const Banner = ({ type = 'default', children, }) => (_jsx("div", { className: `${styles.banner} ${styles[type] || styles.default}`, children: children }));
+const Banner = ({ type = 'default', children, ...props }) => (_jsx("section", { className: `${styles.banner} ${styles[type] || styles.default}`, ...props, children: children }));
 export default Banner;

package/Common/TableOfContents/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './index.module.css';
+const depthClasses = {
+    3: styles.depthThree,
+    4: styles.depthFour,
+};
+const TableOfContents = ({ headings, summaryTitle, minDepth = 2, className, maxDepth = 4, as: Component = 'a', ...props }) => {
+    const filteredHeadings = headings.filter(({ depth }) => depth >= minDepth && depth <= maxDepth);
+    return (_jsxs("details", { className: classNames(styles.details, className), ...props, children: [_jsx("summary", { className: styles.summary, children: summaryTitle }), _jsx("ul", { className: styles.list, children: filteredHeadings.map((head, index) => (_jsx("li", { children: _jsx(Component, { href: head.data?.id && `#${head.data.id}`, className: classNames(styles.link, depthClasses[head.depth]), children: head.value }) }, head.data?.id ?? index))) })] }));
+};
+export default TableOfContents;

package/Common/TableOfContents/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+.details{margin-block:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-md,.375rem);background-color:var(--color-neutral-200,#e9edf0);display:block}@media (min-width:64rem){.details{display:none}}.details:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437)}.details .summary{padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*2)}:where(.details .list>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing,.25rem)*1*var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing,.25rem)*1*(1 - var(--tw-space-y-reverse)))}.details .list{padding-inline:calc(var(--spacing,.25rem)*4);padding-bottom:calc(var(--spacing,.25rem)*2)}.details .link{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);color:var(--color-neutral-900,#2c3437);text-decoration-line:underline}@media (hover:hover){.details .link:hover{color:var(--color-neutral-700,#6e7b83)}}.details .link:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}@media (hover:hover){.details .link:where([data-theme=dark],[data-theme=dark] *):hover{color:var(--color-neutral-500,#b1bcc2)}}.details .depthThree{padding-left:calc(var(--spacing,.25rem)*2)}.details .depthFour{padding-left:calc(var(--spacing,.25rem)*4)}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-font-weight{syntax:"*";inherits:false}

package/Containers/MetaBar/index.js

@@ -1,11 +1,11 @@
 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, }) => {
+const MetaBar = ({ items, headings, as: Component = 'a', heading, ...props }) => {
     // 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)
+    return (_jsx("aside", { className: styles.wrapper, ...props, 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.data?.id))) }) })] }))] }) }));
 };

package/package.json

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