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

package/Common/Select/index.module.css

@@ -1,161 +1,328 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .select {
-  @apply inline-flex
-    flex-col
-    gap-1.5;
-
+  display: inline-flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem)*1.5);
   .label {
-    @apply block
-      w-full
-      text-sm
-      font-medium
-      text-neutral-800
-      dark:text-neutral-200;
-  }
-
+    display: block;
+    width: 100%;
+    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);
+    color: var(--color-neutral-800, #556066);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
+  }
   .trigger {
-    @apply shadow-xs
-      outline-hidden
-      inline-flex
-      h-11
-      w-full
-      min-w-[17rem]
-      items-center
-      justify-between
-      gap-2
-      rounded-sm
-      border
-      border-neutral-300
-      bg-white
-      px-3.5
-      py-2.5
-      text-left
-      text-base
-      font-medium
-      text-neutral-900
-      focus:border-neutral-500
-      focus:ring-1
-      focus:ring-neutral-500
-      data-[placeholder]:text-neutral-800
-      dark:border-neutral-800
-      dark:bg-neutral-950
-      dark:text-white
-      dark:focus:border-neutral-600
-      dark:focus:ring-neutral-600
-      dark:data-[placeholder]:text-neutral-200;
-  }
-
+    display: inline-flex;
+    height: calc(var(--spacing, 0.25rem)*11);
+    width: 100%;
+    min-width: 17rem;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--spacing, 0.25rem)*2);
+    border-radius: var(--radius-sm, 0.25rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-neutral-300, #d9e1e4);
+    background-color: var(--color-white, #fff);
+    padding-inline: calc(var(--spacing, 0.25rem)*3.5);
+    padding-block: calc(var(--spacing, 0.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, color-mix(in srgb, #101828 5%, transparent));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 5%, transparent));
+    }
+    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) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    &:focus {
+      border-color: var(--color-neutral-500, #b1bcc2);
+    }
+    &:focus {
+      --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);
+    }
+    &:focus {
+      --tw-ring-color: var(--color-neutral-500, #b1bcc2);
+    }
+    &[data-placeholder] {
+      color: var(--color-neutral-800, #556066);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-neutral-800, #556066);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-950, #0d121c);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &:focus {
+        border-color: var(--color-neutral-600, #929fa5);
+      }
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &:focus {
+        --tw-ring-color: var(--color-neutral-600, #929fa5);
+      }
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &[data-placeholder] {
+        color: var(--color-neutral-200, #e9edf0);
+      }
+    }
+  }
   .trigger span {
-    @apply flex
-      h-5
-      items-center
-      gap-2;
+    display: flex;
+    height: calc(var(--spacing, 0.25rem)*5);
+    align-items: center;
+    gap: calc(var(--spacing, 0.25rem)*2);
   }
-
   .icon {
-    @apply size-5
-      text-neutral-600
-      dark:text-neutral-400;
+    width: calc(var(--spacing, 0.25rem)*5);
+    height: calc(var(--spacing, 0.25rem)*5);
+    color: var(--color-neutral-600, #929fa5);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-400, #cbd4d9);
+    }
   }
 }
-
 .dropdown {
-  @apply max-h-48
-    max-w-xs
-    overflow-hidden
-    overflow-y-auto
-    rounded-md
-    border
-    border-neutral-200
-    bg-white
-    shadow-lg
-    dark:border-neutral-800
-    dark:bg-neutral-950;
-
+  max-height: calc(var(--spacing, 0.25rem)*48);
+  max-width: var(--container-xs, 20rem);
+  overflow: hidden;
+  overflow-y: auto;
+  border-radius: var(--radius-md, 0.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, color-mix(in srgb, #101828 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in srgb, #101828 8%, transparent));
+  @supports (color: color-mix(in lab, red, red)) {
+    --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));
+  }
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-800, #556066);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: var(--color-neutral-950, #0d121c);
+  }
   .item {
-    @apply select-none
-      truncate
-      px-2.5
-      py-1.5
-      text-sm
-      font-medium;
-  }
-
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-inline: calc(var(--spacing, 0.25rem)*2.5);
+    padding-block: calc(var(--spacing, 0.25rem)*1.5);
+    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);
+    -webkit-user-select: none;
+    user-select: none;
+  }
   .text {
-    @apply data-[highlighted]:outline-hidden
-      text-neutral-800
-      data-[highlighted]:bg-green-500
-      data-[highlighted]:text-white
-      dark:text-neutral-200
-      dark:data-[highlighted]:bg-green-600
-      dark:data-[highlighted]:text-white;
-  }
-
+    color: var(--color-neutral-800, #556066);
+    &[data-highlighted] {
+      background-color: var(--color-green-500, #5fa04e);
+    }
+    &[data-highlighted] {
+      color: var(--color-white, #fff);
+    }
+    &[data-highlighted] {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &[data-highlighted] {
+        background-color: var(--color-green-600, #417e38);
+      }
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &[data-highlighted] {
+        color: var(--color-white, #fff);
+      }
+    }
+  }
   .text > span {
-    @apply flex
-      items-center
-      gap-2;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing, 0.25rem)*2);
   }
-
   .text > span > span {
-    @apply max-w-64
-      truncate
-      text-wrap;
+    max-width: calc(var(--spacing, 0.25rem)*64);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-wrap: wrap;
   }
-
   .label {
-    @apply text-neutral-600
-      dark:text-neutral-400;
+    color: var(--color-neutral-600, #929fa5);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-400, #cbd4d9);
+    }
   }
 }
-
 .dropdown:has(.label) .text > span {
   &:has(svg) > svg {
-    @apply ml-3;
+    margin-left: calc(var(--spacing, 0.25rem)*3);
   }
-
   &:not(&:has(svg)) > span {
-    @apply ml-3;
+    margin-left: calc(var(--spacing, 0.25rem)*3);
   }
 }
-
 .inline {
   .trigger {
-    @apply h-auto
-      min-w-fit
-      px-2.5
-      py-2
-      text-sm
-      font-medium;
-  }
-
+    height: auto;
+    min-width: fit-content;
+    padding-inline: calc(var(--spacing, 0.25rem)*2.5);
+    padding-block: calc(var(--spacing, 0.25rem)*2);
+    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);
   }
-
   .text {
-    @apply text-neutral-900
-      data-[highlighted]:bg-neutral-100
-      data-[disabled]:text-neutral-600
-      data-[highlighted]:text-neutral-900
-      dark:text-white
-      dark:data-[highlighted]:bg-neutral-900
-      dark:data-[disabled]:text-neutral-700
-      dark:data-[highlighted]:text-white;
-  }
-
+    color: var(--color-neutral-900, #2c3437);
+    &[data-disabled] {
+      color: var(--color-neutral-600, #929fa5);
+    }
+    &[data-highlighted] {
+      background-color: var(--color-neutral-100, #f6f7f9);
+    }
+    &[data-highlighted] {
+      color: var(--color-neutral-900, #2c3437);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &[data-disabled] {
+        color: var(--color-neutral-700, #6e7b83);
+      }
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &[data-highlighted] {
+        background-color: var(--color-neutral-900, #2c3437);
+      }
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &[data-highlighted] {
+        color: var(--color-white, #fff);
+      }
+    }
+  }
   &.dropdown {
-    @apply mt-1
-      w-[calc(100%+1.5rem)]
-      rounded;
+    margin-top: calc(var(--spacing, 0.25rem)*1);
+    width: calc(100% + 1.5rem);
+    border-radius: 0.25rem;
   }
 }
-
 .scrollIcon {
-  @apply mx-auto
-    my-1
-    size-4
-    text-neutral-700
-    dark:text-neutral-200;
+  margin-inline: auto;
+  margin-block: calc(var(--spacing, 0.25rem)*1);
+  width: calc(var(--spacing, 0.25rem)*4);
+  height: calc(var(--spacing, 0.25rem)*4);
+  color: var(--color-neutral-700, #6e7b83);
+  &: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: 0px;
+}
+@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/Common/Separator/index.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const Separator = ({ className, orientation = 'horizontal', decorative = true, ...props }) => (_jsx(SeparatorPrimitive.Root, { decorative: decorative, orientation: orientation, className: classNames(styles.root, orientation === 'horizontal' ? styles.horizontal : styles.vertical, className), ...props }));
+export default Separator;

package/Common/Separator/index.module.css

@@ -1,16 +1,13 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .root {
-  @apply shrink-0
-    bg-neutral-800;
-
+  flex-shrink: 0;
+  background-color: var(--color-neutral-800, #556066);
   &.horizontal {
-    @apply h-px
-      w-full;
+    height: 1px;
+    width: 100%;
   }
-
   &.vertical {
-    @apply h-full
-      w-px;
+    height: 100%;
+    width: 1px;
   }
 }

package/Common/Skeleton/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { isValidElement } from 'react';
+import styles from './index.module.css';
+const Skeleton = ({ children, className, hide = false, loading = true, }) => {
+    // This can be used to completely hide the children after the Skeleton has loaded
+    // If certain criterias do not match. This is useful for conditional rendering without
+    // changing the actual tree that the Skeleton is wrapping
+    if (!loading && hide) {
+        return null;
+    }
+    // If we finished loading, we can hide the Skeleton and render the children tree
+    if (!loading) {
+        return children;
+    }
+    return (_jsx("span", { tabIndex: -1, "aria-hidden": "true", className: classNames(styles.skeleton, className), "data-inline-skeleton": isValidElement(children) ? undefined : true, children: children }));
+};
+export default Skeleton;

package/Common/Skeleton/index.module.css

@@ -1,30 +1,127 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .skeleton {
-  @apply outline-hidden
-    dark:animate-pulse-dark
-    pointer-events-none
-    animate-pulse
-    cursor-default
-    select-none
-    rounded-md
-    border-none
-    bg-clip-border
-    text-transparent
-    shadow-none;
-}
-
+  pointer-events: none;
+  animation: pulse 500ms infinite alternate-reverse;
+  cursor: default;
+  border-radius: var(--radius-md, 0.375rem);
+  --tw-border-style: none;
+  border-style: none;
+  background-clip: border-box;
+  color: transparent;
+  --tw-shadow: 0 0 #0000;
+  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) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  -webkit-user-select: none;
+  user-select: none;
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    animation: pulse-dark 500ms infinite alternate-reverse;
+  }
+}
 .skeleton[data-inline-skeleton] {
-  @apply leading-none;
+  --tw-leading: 1;
+  line-height: 1;
 }
-
 .skeleton:empty {
-  @apply block
-    h-3;
+  display: block;
+  height: calc(var(--spacing, 0.25rem)*3);
 }
-
 .skeleton > *,
 .skeleton::after,
 .skeleton::before {
-  @apply invisible;
+  visibility: hidden;
+}
+@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: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes pulse {
+  from {
+    background: var(--color-pulse-100);
+  }
+  to {
+    background: var(--color-pulse-200);
+  }
+}
+@keyframes pulse-dark {
+  from {
+    background: var(--color-pulse-300);
+  }
+  to {
+    background: var(--color-pulse-400);
+  }
 }

package/Common/Tabs/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const Tabs = ({ tabs, addons, triggerClassName, children, ...props }) => (_jsxs(TabsPrimitive.Root, { ...props, className: classNames(styles.tabsRoot, props.className), children: [_jsxs(TabsPrimitive.List, { className: styles.tabsList, children: [tabs.map(tab => (_jsxs(TabsPrimitive.Trigger, { value: tab.value ?? tab.key, className: classNames(styles.tabsTrigger, triggerClassName), children: [tab.label, tab.secondaryLabel ? (_jsx("span", { className: styles.tabSecondaryLabel, children: tab.secondaryLabel })) : null] }, tab.key))), addons && _jsx("div", { className: styles.addons, children: addons })] }), children] }));
+export default Tabs;