@node-core/ui-components 1.0.1-cc5c2626b0639fe2088a736f54169ea3e10ed325 → 1.0.1-e1f87bde264af01e260a8efa4fab1749a2c6bc29

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

@@ -1,83 +1,77 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .alertBox {
-  @apply flex
-    flex-row
-    items-center
-    gap-2
-    rounded-sm
-    px-4
-    py-3
-    text-sm
-    text-white;
-
+  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 {
-    @apply font-bold
-      text-white
-      underline
-      hover:text-white;
-
+    --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 {
-      @apply no-underline;
+      @media (hover: hover) {
+        color: var(--color-white, #fff);
+      }
+    }
+    &:hover {
+      text-decoration-line: none;
     }
   }
-
   &.small {
-    @apply gap-1
-      py-2
-      text-xs;
-
+    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 {
-      @apply px-1;
+      padding-inline: calc(var(--spacing, 0.25rem)*1);
     }
   }
-
   .title {
-    @apply rounded-xs
-      px-1.5;
+    border-radius: var(--radius-xs, 0.125rem);
+    padding-inline: calc(var(--spacing, 0.25rem)*1.5);
   }
-
   svg {
-    @apply inline
-      size-5;
+    display: inline;
+    width: calc(var(--spacing, 0.25rem)*5);
+    height: calc(var(--spacing, 0.25rem)*5);
   }
-
   &.info {
-    @apply bg-info-600;
-
+    background-color: var(--color-info-600, #0c7bb3);
     .title {
-      @apply bg-info-700;
+      background-color: var(--color-info-700, #066291);
     }
   }
-
   &.success {
-    @apply bg-green-600;
-
+    background-color: var(--color-green-600, #417e38);
     .title {
-      @apply bg-green-700;
+      background-color: var(--color-green-700, #2c682c);
     }
   }
-
   &.warning {
-    @apply bg-warning-600;
-
+    background-color: var(--color-warning-600, #ae5f00);
     .title {
-      @apply bg-warning-700;
+      background-color: var(--color-warning-700, #8b4d04);
     }
   }
-
   &.danger {
-    @apply bg-danger-600;
-
+    background-color: var(--color-danger-600, #de1a1b);
     .title {
-      @apply bg-danger-700;
+      background-color: var(--color-danger-700, #b80c0c);
     }
   }
-
   code {
-    /* Ignore the styles from `markdown.css` */
     all: unset;
-
-    @apply font-ibm-plex-mono;
+    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

@@ -1,40 +1,60 @@
-@reference "../../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .item {
-  @apply xs:max-h-10
-    xs:max-w-10
-    flex
-    h-full
-    max-h-12
-    w-full
-    max-w-12
-    items-center
-    justify-center
-    rounded-full
-    border-2
-    border-transparent
-    bg-neutral-100
-    object-cover
-    text-xs
-    text-neutral-800
-    dark:bg-neutral-900
-    dark:text-neutral-300;
+  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 {
-  @apply size-8;
-
+  width: calc(var(--spacing, 0.25rem)*8);
+  height: calc(var(--spacing, 0.25rem)*8);
   .wrapper {
-    @apply max-xs:block
-      max-xs:py-0;
+    @media (width < 670px) {
+      display: block;
+    }
+    @media (width < 670px) {
+      padding-block: calc(var(--spacing, 0.25rem)*0);
+    }
   }
 }
-
 .small {
-  @apply xs:size-8
-    size-10;
+  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 {
-  @apply size-10;
+  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

@@ -1,31 +1,38 @@
-@reference "../../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .overlay {
-  @apply flex
-    min-w-56
-    items-center
-    gap-2
-    p-3;
+  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 {
-  @apply grow;
+  flex-grow: 1;
 }
-
 .name {
-  @apply font-semibold
-    text-neutral-900
-    dark:text-neutral-300;
+  --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 {
-  @apply font-medium
-    text-neutral-700
-    dark:text-neutral-500;
+  --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 {
-  @apply w-3
-    fill-neutral-600
-    dark:fill-white;
+  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

@@ -1,21 +1,22 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .avatarGroup {
-  @apply flex
-    flex-wrap
-    items-center;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
 }
-
 .small {
   > span {
-    @apply -ml-2
-      first:ml-0;
+    margin-left: calc(var(--spacing, 0.25rem)*-2);
+    &:first-child {
+      margin-left: calc(var(--spacing, 0.25rem)*0);
+    }
   }
 }
-
 .medium {
   > span {
-    @apply -ml-2.5
-      first:ml-0;
+    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

@@ -1,38 +1,46 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .badge {
-  @apply rounded-full
-    border
-    text-center
-    text-white;
-
+  border-radius: calc(infinity*1px);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  text-align: center;
+  color: var(--color-white, #fff);
   &.small {
-    @apply px-1.5
-      py-0.5
-      text-xs;
+    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 {
-    @apply px-2.5
-      py-0.5
-      text-base;
+    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 {
-    @apply border-green-200
-      bg-green-600
-      dark:border-green-800;
+    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 {
-    @apply border-danger-200
-      bg-danger-600
-      dark:border-danger-800;
+    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 {
-    @apply border-warning-200
-      bg-warning-600
-      dark:border-warning-600;
+    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

@@ -1,77 +1,101 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .wrapper {
-  @apply flex
-    w-fit
-    items-center
-    rounded-full
-    border
-    py-1
-    pl-1
-    pr-2.5
-    text-sm
-    font-medium;
-
+  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 {
-    @apply size-4;
+    width: calc(var(--spacing, 0.25rem)*4);
+    height: calc(var(--spacing, 0.25rem)*4);
   }
-
   .badge {
-    @apply mr-2;
+    margin-right: calc(var(--spacing, 0.25rem)*2);
   }
-
   .message {
-    @apply mr-1;
+    margin-right: calc(var(--spacing, 0.25rem)*1);
   }
-
   &.default {
-    @apply border-green-200
-      bg-green-100
-      dark:border-green-700
-      dark:bg-neutral-900;
-
+    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 {
-      @apply text-green-500
-        dark:text-green-300;
+      color: var(--color-green-500, #5fa04e);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-green-300, #99cc7d);
+      }
     }
-
     .message {
-      @apply text-green-700
-        dark:text-green-300;
+      color: var(--color-green-700, #2c682c);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-green-300, #99cc7d);
+      }
     }
   }
-
   &.error {
-    @apply border-danger-200
-      bg-danger-100
-      dark:border-danger-700
-      dark:bg-neutral-900;
-
+    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 {
-      @apply text-danger-500
-        dark:text-danger-300;
+      color: var(--color-danger-500, #f65354);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-danger-300, #fab6b7);
+      }
     }
-
     .message {
-      @apply text-danger-700
-        dark:text-danger-300;
+      color: var(--color-danger-700, #b80c0c);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-danger-300, #fab6b7);
+      }
     }
   }
-
   &.warning {
-    @apply border-warning-200
-      bg-warning-100
-      dark:border-warning-700
-      dark:bg-neutral-900;
-
+    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 {
-      @apply text-warning-500
-        dark:text-warning-300;
+      color: var(--color-warning-500, #d07912);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-warning-300, #f5bc75);
+      }
     }
-
     .message {
-      @apply text-warning-700
-        dark:text-warning-300;
+      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;