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

package/Common/Select/index.module.css

@@ -0,0 +1,328 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.select {
+  display: inline-flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem)*1.5);
+  .label {
+    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 {
+    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 {
+    display: flex;
+    height: calc(var(--spacing, 0.25rem)*5);
+    align-items: center;
+    gap: calc(var(--spacing, 0.25rem)*2);
+  }
+  .icon {
+    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 {
+  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 {
+    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 {
+    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 {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing, 0.25rem)*2);
+  }
+  .text > span > span {
+    max-width: calc(var(--spacing, 0.25rem)*64);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-wrap: wrap;
+  }
+  .label {
+    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 {
+    margin-left: calc(var(--spacing, 0.25rem)*3);
+  }
+  &:not(&:has(svg)) > span {
+    margin-left: calc(var(--spacing, 0.25rem)*3);
+  }
+}
+.inline {
+  .trigger {
+    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 {
+    width: calc(var(--spacing, 0.25rem)*4);
+    height: calc(var(--spacing, 0.25rem)*4);
+  }
+  .text {
+    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 {
+    margin-top: calc(var(--spacing, 0.25rem)*1);
+    width: calc(100% + 1.5rem);
+    border-radius: 0.25rem;
+  }
+}
+.scrollIcon {
+  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

@@ -0,0 +1,13 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root {
+  flex-shrink: 0;
+  background-color: var(--color-neutral-800, #556066);
+  &.horizontal {
+    height: 1px;
+    width: 100%;
+  }
+  &.vertical {
+    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

@@ -0,0 +1,127 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.skeleton {
+  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] {
+  --tw-leading: 1;
+  line-height: 1;
+}
+.skeleton:empty {
+  display: block;
+  height: calc(var(--spacing, 0.25rem)*3);
+}
+.skeleton > *,
+.skeleton::after,
+.skeleton::before {
+  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;

package/Common/Tabs/index.module.css

@@ -0,0 +1,72 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.tabsRoot {
+  display: grid;
+  max-width: 100%;
+  .tabsList {
+    display: flex;
+    gap: calc(var(--spacing, 0.25rem)*2);
+    overflow-x: auto;
+    font-family: var(--font-open-sans, var(--font-open-sans));
+    scrollbar-width: thin;
+    .tabsTrigger {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 2px;
+      border-bottom-color: transparent;
+      padding-inline: calc(var(--spacing, 0.25rem)*1);
+      padding-bottom: 11px;
+      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-semibold, 600);
+      font-weight: var(--font-weight-semibold, 600);
+      white-space: nowrap;
+      color: var(--color-neutral-800, #556066);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-200, #e9edf0);
+      }
+      .tabSecondaryLabel {
+        padding-left: calc(var(--spacing, 0.25rem)*1);
+        color: var(--color-neutral-500, #b1bcc2);
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          color: var(--color-neutral-800, #556066);
+        }
+      }
+      &[data-state='active'] {
+        border-bottom-color: var(--color-green-600, #417e38);
+        color: var(--color-green-600, #417e38);
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          border-bottom-color: var(--color-green-400, #84ba64);
+        }
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          color: var(--color-green-400, #84ba64);
+        }
+        .tabSecondaryLabel {
+          color: var(--color-green-800, #2c682c);
+          &:where([data-theme=dark], [data-theme=dark] *) {
+            color: var(--color-green-600, #417e38);
+          }
+        }
+      }
+    }
+    .addons {
+      margin-left: auto;
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 2px;
+      border-bottom-color: transparent;
+      padding-inline: calc(var(--spacing, 0.25rem)*1);
+      padding-bottom: 11px;
+      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-semibold, 600);
+      font-weight: var(--font-weight-semibold, 600);
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/ThemeToggle/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
+import styles from './index.module.css';
+const ThemeToggle = props => {
+    return (_jsxs("button", { type: "button", className: styles.themeToggle, ...props, children: [_jsx(MoonIcon, { className: "block dark:hidden", height: "20" }), _jsx(SunIcon, { className: "hidden dark:block", height: "20" })] }));
+};
+export default ThemeToggle;

package/Common/ThemeToggle/index.module.css

@@ -0,0 +1,22 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.themeToggle {
+  width: calc(var(--spacing, 0.25rem)*9);
+  height: calc(var(--spacing, 0.25rem)*9);
+  border-radius: var(--radius-md, 0.375rem);
+  padding: calc(var(--spacing, 0.25rem)*2);
+  color: var(--color-neutral-700, #6e7b83);
+  @media (prefers-reduced-motion: no-preference) {
+    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(0.4, 0, 0.2, 1)));
+    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-neutral-300, #d9e1e4);
+  }
+  &:hover {
+    background-color: var(--color-neutral-100, #f6f7f9);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
+  }
+}

package/Common/Tooltip/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const Tooltip = ({ kind = 'default', children, content, asChild = false, side = 'bottom', container, }) => (_jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: asChild, children: children }), _jsx(TooltipPrimitive.Portal, { container: container, children: _jsxs(TooltipPrimitive.Content, { side: side, sideOffset: 4, className: classNames(styles[kind], styles.content, {
+                        'mx-1.5': side === 'top' || side === 'bottom',
+                    }), children: [content, _jsx(TooltipPrimitive.Arrow, { className: styles.arrow, width: 14, height: 6 })] }) })] }) }));
+export default Tooltip;