@node-core/ui-components 0.0.1 → 1.0.1-1b9af3ec9e0268bfc734b2489cbc584fa3edf026

package/Common/AlertBox/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './index.module.css';
+const AlertBox = ({ level, title, children, size = 'default', }) => (_jsxs("div", { className: classNames(styles.alertBox, styles[level], styles[size]), children: [_jsx("span", { className: styles.title, children: title }), _jsx("span", { children: children })] }));
+export default AlertBox;

package/Common/AlertBox/index.module.css

@@ -0,0 +1,77 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.alertBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  border-radius: var(--radius-sm, 0.25rem);
+  padding-inline: calc(var(--spacing, 0.25rem)*4);
+  padding-block: calc(var(--spacing, 0.25rem)*3);
+  font-size: var(--text-sm, 0.875rem);
+  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+  color: var(--color-white, #fff);
+  a {
+    --tw-font-weight: var(--font-weight-bold, 700);
+    font-weight: var(--font-weight-bold, 700);
+    color: var(--color-white, #fff);
+    text-decoration-line: underline;
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white, #fff);
+      }
+    }
+    &:hover {
+      text-decoration-line: none;
+    }
+  }
+  &.small {
+    gap: calc(var(--spacing, 0.25rem)*1);
+    padding-block: calc(var(--spacing, 0.25rem)*2);
+    font-size: var(--text-xs, 0.75rem);
+    line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
+    .title {
+      padding-inline: calc(var(--spacing, 0.25rem)*1);
+    }
+  }
+  .title {
+    border-radius: var(--radius-xs, 0.125rem);
+    padding-inline: calc(var(--spacing, 0.25rem)*1.5);
+  }
+  svg {
+    display: inline;
+    width: calc(var(--spacing, 0.25rem)*5);
+    height: calc(var(--spacing, 0.25rem)*5);
+  }
+  &.info {
+    background-color: var(--color-info-600, #0c7bb3);
+    .title {
+      background-color: var(--color-info-700, #066291);
+    }
+  }
+  &.success {
+    background-color: var(--color-green-600, #417e38);
+    .title {
+      background-color: var(--color-green-700, #2c682c);
+    }
+  }
+  &.warning {
+    background-color: var(--color-warning-600, #ae5f00);
+    .title {
+      background-color: var(--color-warning-700, #8b4d04);
+    }
+  }
+  &.danger {
+    background-color: var(--color-danger-600, #de1a1b);
+    .title {
+      background-color: var(--color-danger-700, #b80c0c);
+    }
+  }
+  code {
+    all: unset;
+    font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/AvatarGroup/Avatar/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import styles from './index.module.css';
+const Avatar = forwardRef(({ image, nickname, name, fallback, url, size = 'small', as: Component = 'a', ...props }, ref) => {
+    if (!url)
+        Component = 'div';
+    return (_jsx(RadixAvatar.Root, { ...props, ref: ref, className: classNames(styles.avatar, styles[size], props.className), children: _jsxs(Component, { href: url || undefined, target: url ? '_blank' : undefined, className: styles.wrapper, children: [_jsx(RadixAvatar.Image, { loading: "lazy", decoding: "async", src: image, alt: name || nickname, className: styles.item }), _jsx(RadixAvatar.Fallback, { className: classNames(styles.item, styles[size]), children: fallback })] }) }));
+});
+export default Avatar;

package/Common/AvatarGroup/Avatar/index.module.css

@@ -0,0 +1,60 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.item {
+  display: flex;
+  height: 100%;
+  max-height: calc(var(--spacing, 0.25rem)*12);
+  width: 100%;
+  max-width: calc(var(--spacing, 0.25rem)*12);
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(infinity*1px);
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+  border-color: transparent;
+  background-color: var(--color-neutral-100, #f6f7f9);
+  object-fit: cover;
+  font-size: var(--text-xs, 0.75rem);
+  line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
+  color: var(--color-neutral-800, #556066);
+  @media (width >= 670px) {
+    max-height: calc(var(--spacing, 0.25rem)*10);
+  }
+  @media (width >= 670px) {
+    max-width: calc(var(--spacing, 0.25rem)*10);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: var(--color-neutral-900, #2c3437);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-neutral-300, #d9e1e4);
+  }
+}
+.avatar {
+  width: calc(var(--spacing, 0.25rem)*8);
+  height: calc(var(--spacing, 0.25rem)*8);
+  .wrapper {
+    @media (width < 670px) {
+      display: block;
+    }
+    @media (width < 670px) {
+      padding-block: calc(var(--spacing, 0.25rem)*0);
+    }
+  }
+}
+.small {
+  width: calc(var(--spacing, 0.25rem)*10);
+  height: calc(var(--spacing, 0.25rem)*10);
+  @media (width >= 670px) {
+    width: calc(var(--spacing, 0.25rem)*8);
+    height: calc(var(--spacing, 0.25rem)*8);
+  }
+}
+.medium {
+  width: calc(var(--spacing, 0.25rem)*10);
+  height: calc(var(--spacing, 0.25rem)*10);
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/Common/AvatarGroup/Overlay/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import Avatar from '#ui/Common/AvatarGroup/Avatar';
+import styles from './index.module.css';
+const AvatarOverlay = ({ image, name, nickname, fallback, url, as: Component = 'a', }) => (_jsxs(Component, { className: styles.overlay, href: url, target: "_blank", children: [_jsx(Avatar, { image: image, name: name, nickname: nickname, fallback: fallback, size: "medium" }), _jsxs("div", { className: styles.user, children: [name && _jsx("div", { className: styles.name, children: name }), nickname && _jsx("div", { className: styles.nickname, children: nickname })] }), _jsx(ArrowUpRightIcon, { className: styles.arrow })] }));
+export default AvatarOverlay;

package/Common/AvatarGroup/Overlay/index.module.css

@@ -0,0 +1,38 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.overlay {
+  display: flex;
+  min-width: calc(var(--spacing, 0.25rem)*56);
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  padding: calc(var(--spacing, 0.25rem)*3);
+}
+.user {
+  flex-grow: 1;
+}
+.name {
+  --tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-neutral-900, #2c3437);
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-neutral-300, #d9e1e4);
+  }
+}
+.nickname {
+  --tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-neutral-700, #6e7b83);
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-neutral-500, #b1bcc2);
+  }
+}
+.arrow {
+  width: calc(var(--spacing, 0.25rem)*3);
+  fill: var(--color-neutral-600, #929fa5);
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    fill: var(--color-white, #fff);
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/AvatarGroup/index.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useState, useMemo } from 'react';
+import Avatar from '#ui/Common/AvatarGroup/Avatar';
+import avatarstyles from '#ui/Common/AvatarGroup/Avatar/index.module.css';
+import AvatarOverlay from '#ui/Common/AvatarGroup/Overlay';
+import Tooltip from '#ui/Common/Tooltip';
+import styles from './index.module.css';
+const AvatarGroup = ({ avatars, limit = 10, isExpandable = true, size = 'small', container, as, }) => {
+    const [showMore, setShowMore] = useState(false);
+    const renderAvatars = useMemo(() => avatars.slice(0, showMore ? avatars.length : limit), [avatars, limit, showMore]);
+    const handleShowMoreClick = isExpandable
+        ? () => setShowMore(prev => !prev)
+        : undefined;
+    return (_jsxs("div", { className: classNames(styles.avatarGroup, styles[size]), children: [renderAvatars.map(avatar => (_jsx(Tooltip, { asChild: true, container: container, content: _jsx(AvatarOverlay, { ...avatar, as: as }), children: _jsx(Avatar, { ...avatar, size: size, className: classNames({
+                        'cursor-pointer': avatar.url,
+                        'pointer-events-none': !avatar.url,
+                    }), as: as }) }, avatar.nickname))), avatars.length > limit && (_jsx("span", { onClick: handleShowMoreClick, className: classNames(avatarstyles.avatar, avatarstyles[size], 'cursor-pointer'), children: _jsx("span", { className: avatarstyles.item, children: `${showMore ? '-' : '+'}${avatars.length - limit}` }) }))] }));
+};
+export default AvatarGroup;

package/Common/AvatarGroup/index.module.css

@@ -0,0 +1,22 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.avatarGroup {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.small {
+  > span {
+    margin-left: calc(var(--spacing, 0.25rem)*-2);
+    &:first-child {
+      margin-left: calc(var(--spacing, 0.25rem)*0);
+    }
+  }
+}
+.medium {
+  > span {
+    margin-left: calc(var(--spacing, 0.25rem)*-2.5);
+    &:first-child {
+      margin-left: calc(var(--spacing, 0.25rem)*0);
+    }
+  }
+}

package/Common/Badge/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './index.module.css';
+const Badge = ({ kind = 'default', size = 'medium', className, children, ...props }) => {
+    return (_jsx("span", { className: classNames(styles.badge, styles[kind], styles[size], className), ...props, children: children }));
+};
+export default Badge;

package/Common/Badge/index.module.css

@@ -0,0 +1,46 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.badge {
+  border-radius: calc(infinity*1px);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  text-align: center;
+  color: var(--color-white, #fff);
+  &.small {
+    padding-inline: calc(var(--spacing, 0.25rem)*1.5);
+    padding-block: calc(var(--spacing, 0.25rem)*0.5);
+    font-size: var(--text-xs, 0.75rem);
+    line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
+  }
+  &.medium {
+    padding-inline: calc(var(--spacing, 0.25rem)*2.5);
+    padding-block: calc(var(--spacing, 0.25rem)*0.5);
+    font-size: var(--text-base, 1rem);
+    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
+  }
+  &.default {
+    border-color: var(--color-green-200, #c5e5b4);
+    background-color: var(--color-green-600, #417e38);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-green-800, #2c682c);
+    }
+  }
+  &.error {
+    border-color: var(--color-danger-200, #fad3d4);
+    background-color: var(--color-danger-600, #de1a1b);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-danger-800, #900e0e);
+    }
+  }
+  &.warning {
+    border-color: var(--color-warning-200, #fad9b0);
+    background-color: var(--color-warning-600, #ae5f00);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-warning-600, #ae5f00);
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/Common/BadgeGroup/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon';
+import Badge from '#ui/Common/Badge';
+import styles from './index.module.css';
+const BadgeGroup = ({ kind = 'default', badgeText, children, as: Component = 'a', ...args }) => (_jsxs(Component, { className: `${styles.wrapper} ${styles[kind]}`, ...args, children: [badgeText && (_jsx(Badge, { kind: kind, className: styles.badge, children: badgeText })), _jsx("span", { className: styles.message, children: children }), args.href && _jsx(ArrowRightIcon, { className: styles.icon })] }));
+export default BadgeGroup;

package/Common/BadgeGroup/index.module.css

@@ -0,0 +1,101 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.wrapper {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  border-radius: calc(infinity*1px);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  padding-block: calc(var(--spacing, 0.25rem)*1);
+  padding-right: calc(var(--spacing, 0.25rem)*2.5);
+  padding-left: calc(var(--spacing, 0.25rem)*1);
+  font-size: var(--text-sm, 0.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);
+  .icon {
+    width: calc(var(--spacing, 0.25rem)*4);
+    height: calc(var(--spacing, 0.25rem)*4);
+  }
+  .badge {
+    margin-right: calc(var(--spacing, 0.25rem)*2);
+  }
+  .message {
+    margin-right: calc(var(--spacing, 0.25rem)*1);
+  }
+  &.default {
+    border-color: var(--color-green-200, #c5e5b4);
+    background-color: var(--color-green-100, #edf2eb);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-green-700, #2c682c);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
+    .icon {
+      color: var(--color-green-500, #5fa04e);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-green-300, #99cc7d);
+      }
+    }
+    .message {
+      color: var(--color-green-700, #2c682c);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-green-300, #99cc7d);
+      }
+    }
+  }
+  &.error {
+    border-color: var(--color-danger-200, #fad3d4);
+    background-color: var(--color-danger-100, #fbf1f0);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-danger-700, #b80c0c);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
+    .icon {
+      color: var(--color-danger-500, #f65354);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-danger-300, #fab6b7);
+      }
+    }
+    .message {
+      color: var(--color-danger-700, #b80c0c);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-danger-300, #fab6b7);
+      }
+    }
+  }
+  &.warning {
+    border-color: var(--color-warning-200, #fad9b0);
+    background-color: var(--color-warning-100, #fdf3e7);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-warning-700, #8b4d04);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
+    .icon {
+      color: var(--color-warning-500, #d07912);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-warning-300, #f5bc75);
+      }
+    }
+    .message {
+      color: var(--color-warning-700, #8b4d04);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-warning-300, #f5bc75);
+      }
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/Banner/index.js

@@ -0,0 +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 }));
+export default Banner;

package/Common/Banner/index.module.css

@@ -0,0 +1,45 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.banner {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  padding-inline: calc(var(--spacing, 0.25rem)*8);
+  padding-block: calc(var(--spacing, 0.25rem)*3);
+  font-size: var(--text-sm, 0.875rem);
+  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+  &,
+  a {
+    color: var(--color-white, #fff);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
+  }
+  a {
+    width: fit-content;
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in srgb, #fff 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      text-decoration-color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
+    }
+  }
+  svg {
+    width: calc(var(--spacing, 0.25rem)*4);
+    height: calc(var(--spacing, 0.25rem)*4);
+    color: color-mix(in srgb, #fff 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
+    }
+  }
+}
+.default {
+  background-color: var(--color-green-600, #417e38);
+}
+.error {
+  background-color: var(--color-danger-600, #de1a1b);
+}
+.warning {
+  background-color: var(--color-warning-600, #ae5f00);
+}

package/Common/BaseActiveLink/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const BaseActiveLink = ({ activeClassName = 'active', allowSubPath = false, className, href = '', pathname = '/', as: Component = 'a', ...props }) => {
+    const finalClassName = classNames(className, {
+        [activeClassName]: allowSubPath
+            ? // When using allowSubPath we want only to check if
+                // the current pathname starts with the utmost upper level
+                // of an href (e.g. /docs/...)
+                pathname.startsWith(`/${href.toString().split('/')[1]}`)
+            : href.toString() === pathname,
+    });
+    return _jsx(Component, { className: finalClassName, href: href, ...props });
+};
+export default BaseActiveLink;

package/Common/BaseButton/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './index.module.css';
+const BaseButton = ({ kind = 'primary', size = 'default', disabled = false, className, as: Component = 'a', ...props }) => {
+    if ('href' in props && Component) {
+        return (_jsx(Component, { role: "button", href: disabled ? undefined : props.href, "aria-disabled": disabled, className: classNames(styles.button, styles[kind], styles[size], className), tabIndex: disabled ? -1 : 0, ...props }));
+    }
+    return (_jsx("button", { disabled: disabled, className: classNames(styles.button, styles[kind], styles[size], className), type: "button", ...props }));
+};
+export default BaseButton;