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

package/Common/Preview/index.module.css

@@ -1,79 +1,283 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .root {
-  @apply after:bg-gradient-radial
-    @container/preview
-    relative
-    flex
-    aspect-[1.90/1]
-    items-center
-    rounded-sm
-    border
-    border-neutral-900
-    bg-neutral-950
-    after:absolute
-    after:inset-0
-    after:m-auto
-    after:aspect-square
-    after:w-1/3
-    after:rounded-full
-    after:blur-2xl
-    after:content-[''];
-
+  container-type: inline-size;
+  container-name: preview;
+  position: relative;
+  display: flex;
+  aspect-ratio: 1.90/1;
+  align-items: center;
+  border-radius: var(--radius-sm, 0.25rem);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-neutral-900, #2c3437);
+  background-color: var(--color-neutral-950, #0d121c);
+  &::after {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::after {
+    content: var(--tw-content);
+    inset: calc(var(--spacing, 0.25rem)*0);
+  }
+  &::after {
+    content: var(--tw-content);
+    margin: auto;
+  }
+  &::after {
+    content: var(--tw-content);
+    aspect-ratio: 1 / 1;
+  }
+  &::after {
+    content: var(--tw-content);
+    width: 33.33333%;
+  }
+  &::after {
+    content: var(--tw-content);
+    border-radius: calc(infinity*1px);
+  }
+  &::after {
+    content: var(--tw-content);
+    background-image: radial-gradient( var(--tw-gradient-from), var(--tw-gradient-to) );
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-blur: blur(var(--blur-2xl, 40px));
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: '';
+    content: var(--tw-content);
+  }
   &.announcements {
-    @apply after:from-green-700/90;
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-from: color-mix(in srgb, #2c682c 90%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-from: color-mix(in oklab, var(--color-green-700, #2c682c) 90%, transparent);
+      }
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
   }
-
   &.release {
-    @apply after:from-info-600/90;
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-from: color-mix(in srgb, #0c7bb3 90%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-from: color-mix(in oklab, var(--color-info-600, #0c7bb3) 90%, transparent);
+      }
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
   }
-
   &.vulnerability {
-    @apply after:from-warning-600/90;
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-from: color-mix(in srgb, #ae5f00 90%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-from: color-mix(in oklab, var(--color-warning-600, #ae5f00) 90%, transparent);
+      }
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
   }
-
   .container {
-    @apply @sm/preview:text-base
-      @md/preview:gap-6
-      @md/preview:text-lg
-      @lg/preview:gap-8
-      @lg/preview:text-xl
-      @xl/preview:gap-12
-      @xl/preview:text-2xl
-      @2xl/preview:text-3xl
-      z-10
-      mx-auto
-      flex
-      w-2/3
-      max-w-xl
-      flex-col
-      gap-4
-      text-center
-      text-xs
-      font-semibold
-      text-white;
-
+    z-index: 10;
+    margin-inline: auto;
+    display: flex;
+    width: 66.66667%;
+    max-width: var(--container-xl, 36rem);
+    flex-direction: column;
+    gap: calc(var(--spacing, 0.25rem)*4);
+    text-align: center;
+    font-size: var(--text-xs, 0.75rem);
+    line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
+    --tw-font-weight: var(--font-weight-semibold, 600);
+    font-weight: var(--font-weight-semibold, 600);
+    color: var(--color-white, #fff);
+    @container preview (width >= 24rem) {
+      font-size: var(--text-base, 1rem);
+      line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
+    }
+    @container preview (width >= 28rem) {
+      gap: calc(var(--spacing, 0.25rem)*6);
+    }
+    @container preview (width >= 28rem) {
+      font-size: var(--text-lg, 1.125rem);
+      line-height: var(--tw-leading, var(--text-lg--line-height, 1.55556));
+    }
+    @container preview (width >= 32rem) {
+      gap: calc(var(--spacing, 0.25rem)*8);
+    }
+    @container preview (width >= 32rem) {
+      font-size: var(--text-xl, 1.25rem);
+      line-height: var(--tw-leading, var(--text-xl--line-height, 1.4));
+    }
+    @container preview (width >= 36rem) {
+      gap: calc(var(--spacing, 0.25rem)*12);
+    }
+    @container preview (width >= 36rem) {
+      font-size: var(--text-2xl, 1.5rem);
+      line-height: var(--tw-leading, var(--text-2xl--line-height, 1.33333));
+    }
+    @container preview (width >= 42rem) {
+      font-size: var(--text-3xl, 1.875rem);
+      line-height: var(--tw-leading, var(--text-3xl--line-height, 1.2));
+    }
     .hexagon {
-      @apply @md/preview:h-3/5
-        @md/preview:w-3/5
-        @lg/preview:h-2/3
-        @lg/preview:w-2/3
-        @xl/preview:h-3/5
-        @xl/preview:w-3/5
-        @2xl/preview:h-2/3
-        @2xl/preview:w-2/3
-        absolute
-        inset-0
-        m-auto
-        size-full;
+      position: absolute;
+      inset: calc(var(--spacing, 0.25rem)*0);
+      margin: auto;
+      width: 100%;
+      height: 100%;
+      @container preview (width >= 28rem) {
+        height: 60%;
+      }
+      @container preview (width >= 28rem) {
+        width: 60%;
+      }
+      @container preview (width >= 32rem) {
+        height: 66.66667%;
+      }
+      @container preview (width >= 32rem) {
+        width: 66.66667%;
+      }
+      @container preview (width >= 36rem) {
+        height: 60%;
+      }
+      @container preview (width >= 36rem) {
+        width: 60%;
+      }
+      @container preview (width >= 42rem) {
+        height: 66.66667%;
+      }
+      @container preview (width >= 42rem) {
+        width: 66.66667%;
+      }
     }
-
     .logo {
-      @apply @md/preview:size-14
-        @lg/preview:size-16
-        @xl/preview:size-20
-        mx-auto
-        size-6;
+      margin-inline: auto;
+      width: calc(var(--spacing, 0.25rem)*6);
+      height: calc(var(--spacing, 0.25rem)*6);
+      @container preview (width >= 28rem) {
+        width: calc(var(--spacing, 0.25rem)*14);
+        height: calc(var(--spacing, 0.25rem)*14);
+      }
+      @container preview (width >= 32rem) {
+        width: calc(var(--spacing, 0.25rem)*16);
+        height: calc(var(--spacing, 0.25rem)*16);
+      }
+      @container preview (width >= 36rem) {
+        width: calc(var(--spacing, 0.25rem)*20);
+        height: calc(var(--spacing, 0.25rem)*20);
+      }
     }
   }
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/Select/index.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import classNames from 'classnames';
+import { useEffect, useId, useMemo, useState } from 'react';
+import Skeleton from '#ui/Common/Skeleton';
+import styles from './index.module.css';
+const isStringArray = (values) => Boolean(values[0] && typeof values[0] === 'string');
+const isValuesArray = (values) => Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
+const Select = ({ values = [], defaultValue, placeholder, label, inline, onChange, className, ariaLabel, loading = false, disabled = false, }) => {
+    const id = useId();
+    const [value, setValue] = useState(defaultValue);
+    useEffect(() => setValue(defaultValue), [defaultValue]);
+    const mappedValues = useMemo(() => {
+        let mappedValues = values;
+        if (isStringArray(mappedValues)) {
+            mappedValues = mappedValues.map(value => ({ label: value, value }));
+        }
+        if (isValuesArray(mappedValues)) {
+            return [{ items: mappedValues }];
+        }
+        return mappedValues;
+    }, [values]);
+    // We render the actual item slotted to fix/prevent the issue
+    // of the tirgger flashing on the initial render
+    const currentItem = useMemo(() => mappedValues
+        .flatMap(({ items }) => items)
+        .find(item => item.value === value), [mappedValues, value]);
+    const memoizedMappedValues = useMemo(() => {
+        return mappedValues.map(({ label, items }, key) => (_jsxs(SelectPrimitive.Group, { children: [label && (_jsx(SelectPrimitive.Label, { className: classNames(styles.item, styles.label), children: label })), items.map(({ value, label, iconImage, disabled }) => (_jsx(SelectPrimitive.Item, { value: value, disabled: disabled, className: classNames(styles.item, styles.text), children: _jsxs(SelectPrimitive.ItemText, { children: [iconImage, _jsx("span", { children: label })] }) }, value)))] }, label?.toString() ?? key)));
+        // We explicitly want to recalculate these values only when the values themselves changed
+        // This is to prevent re-rendering and re-calcukating the values on every render
+    }, [JSON.stringify(values)]);
+    // Both change the internal state and emit the change event
+    const handleChange = (value) => {
+        setValue(value);
+        if (typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (_jsx(Skeleton, { loading: loading, children: _jsxs("span", { className: classNames(styles.select, { [styles.inline]: inline }, className), children: [label && (_jsx("label", { className: styles.label, htmlFor: id, children: label })), _jsxs(SelectPrimitive.Root, { value: currentItem !== undefined ? value : undefined, onValueChange: handleChange, disabled: disabled, children: [_jsxs(SelectPrimitive.Trigger, { className: styles.trigger, "aria-label": ariaLabel, id: id, children: [_jsx(SelectPrimitive.Value, { placeholder: placeholder, children: currentItem !== undefined && (_jsxs(_Fragment, { children: [currentItem.iconImage, _jsx("span", { children: currentItem.label })] })) }), _jsx(ChevronDownIcon, { className: styles.icon })] }), _jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { position: inline ? 'popper' : 'item-aligned', className: classNames(styles.dropdown, {
+                                    [styles.inline]: inline,
+                                }), children: [_jsx(SelectPrimitive.ScrollUpButton, { children: _jsx(ChevronUpIcon, { className: styles.scrollIcon }) }), _jsx(SelectPrimitive.Viewport, { children: memoizedMappedValues }), _jsx(SelectPrimitive.ScrollDownButton, { children: _jsx(ChevronDownIcon, { className: styles.scrollIcon }) })] }) })] })] }) }));
+};
+export default Select;