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

package/Common/BaseCodeBox/index.module.css

@@ -1,78 +1,96 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .root {
-  @apply w-full
-    rounded-sm
-    border
-    border-neutral-900
-    bg-neutral-950;
-
+  width: 100%;
+  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);
   .content {
-    @apply m-0
-      p-4;
-
+    margin: calc(var(--spacing, 0.25rem)*0);
+    padding: calc(var(--spacing, 0.25rem)*4);
     & > code {
-      @apply font-ibm-plex-mono
-        font-regular
-        scrollbar-thin
-        grid
-        overflow-x-auto
-        bg-transparent
-        p-0
-        text-sm
-        leading-snug
-        text-neutral-400
-        [counter-reset:line];
-
+      display: grid;
+      overflow-x: auto;
+      background-color: transparent;
+      padding: calc(var(--spacing, 0.25rem)*0);
+      font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
+      font-size: var(--text-sm, 0.875rem);
+      line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+      --tw-leading: var(--leading-snug, 1.375);
+      line-height: var(--leading-snug, 1.375);
+      --tw-font-weight: var(--font-weight-regular, 400);
+      font-weight: var(--font-weight-regular, 400);
+      color: var(--color-neutral-400, #cbd4d9);
+      counter-reset: line;
+      scrollbar-width: thin;
       & > [class='line'] {
-        @apply relative
-          min-w-0
-          pl-8;
-
+        position: relative;
+        min-width: calc(var(--spacing, 0.25rem)*0);
+        padding-left: calc(var(--spacing, 0.25rem)*8);
         &:not(:empty:last-child)::before {
-          @apply inline-block
-            content-[''];
+          display: inline-block;
+          --tw-content: '';
+          content: var(--tw-content);
         }
-
         &:not(:empty:last-child)::after {
-          @apply font-ibm-plex-mono
-            w-4.5
-            absolute
-            left-0
-            top-0
-            mr-4
-            text-right
-            text-neutral-600
-            [content:counter(line)]
-            [counter-increment:line];
+          position: absolute;
+          top: calc(var(--spacing, 0.25rem)*0);
+          left: calc(var(--spacing, 0.25rem)*0);
+          margin-right: calc(var(--spacing, 0.25rem)*4);
+          width: calc(var(--spacing, 0.25rem)*4.5);
+          text-align: right;
+          font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
+          color: var(--color-neutral-600, #929fa5);
+          content: counter(line);
+          counter-increment: line;
         }
       }
     }
   }
-
   & > .footer {
-    @apply flex
-      items-center
-      justify-between
-      border-t
-      border-t-neutral-900
-      px-4
-      py-3
-      text-sm
-      font-medium;
-
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-top-color: var(--color-neutral-900, #2c3437);
+    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));
+    --tw-font-weight: var(--font-weight-medium, 500);
+    font-weight: var(--font-weight-medium, 500);
     & > .language {
-      @apply text-neutral-400;
+      color: var(--color-neutral-400, #cbd4d9);
     }
-
     & > .action {
-      @apply px-3
-        py-1.5
-        font-medium;
+      padding-inline: calc(var(--spacing, 0.25rem)*3);
+      padding-block: calc(var(--spacing, 0.25rem)*1.5);
+      --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);
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
 }

package/Common/BaseCrossLink/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import PrevNextArrow from '#ui/Common/BasePagination/PrevNextArrow';
+import styles from './index.module.css';
+const BaseCrossLink = ({ type, label, text, link, as: Component = 'a', }) => {
+    return (_jsxs(Component, { className: styles.crossLink, href: link, children: [_jsxs("span", { className: classNames(styles.header, {
+                    [styles.reverse]: type === 'next',
+                }), children: [_jsx(PrevNextArrow, { className: styles.icon, type: type }), label] }), _jsx("span", { className: classNames(styles.content, {
+                    [styles.reverse]: type === 'next',
+                }), children: text })] }));
+};
+export default BaseCrossLink;

package/Common/BaseCrossLink/index.module.css

@@ -1,51 +1,69 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .crossLink {
-  @apply flex
-    flex-col
-    items-start
-    gap-2
-    truncate
-    rounded-sm
-    border
-    border-solid
-    border-neutral-300
-    bg-white
-    p-3
-    no-underline
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: var(--radius-sm, 0.25rem);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: var(--color-neutral-300, #d9e1e4);
+  background-color: var(--color-white, #fff);
+  padding: calc(var(--spacing, 0.25rem)*3);
+  text-decoration-line: none;
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-900, #2c3437);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: var(--color-neutral-950, #0d121c);
+  }
   .header {
-    @apply flex
-      items-center
-      gap-2
-      self-stretch
-      text-xs
-      text-neutral-800
-      dark:text-neutral-100;
-
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing, 0.25rem)*2);
+    align-self: stretch;
+    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);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-100, #f6f7f9);
+    }
     &.reverse {
-      @apply flex-row-reverse
-        justify-start;
+      flex-direction: row-reverse;
+      justify-content: flex-start;
     }
-
     .icon {
-      @apply size-4
-        text-neutral-600
-        dark:text-neutral-400;
+      width: calc(var(--spacing, 0.25rem)*4);
+      height: calc(var(--spacing, 0.25rem)*4);
+      color: var(--color-neutral-600, #929fa5);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-400, #cbd4d9);
+      }
     }
   }
-
   .content {
-    @apply self-stretch
-      truncate
-      text-sm
-      text-neutral-900
-      dark:text-white;
-
+    align-self: stretch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--text-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+    color: var(--color-neutral-900, #2c3437);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
     &.reverse {
-      @apply text-right;
+      text-align: right;
     }
   }
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/Common/BaseLinkTabs/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Select from '#ui/Common/Select';
+import styles from './index.module.css';
+const BaseLinkTabs = ({ tabs, label, activeTab, children, as: Component = 'a', onSelect, }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.tabsList, children: tabs.map(tab => (_jsx(Component, { href: tab.link, className: styles.tabsTrigger, "data-state": tab.key === activeTab ? 'active' : 'inactive', children: tab.label }, tab.key))) }), _jsx("div", { className: styles.tabsSelect, children: _jsx(Select, { label: label, defaultValue: tabs.find(tab => tab.key === activeTab)?.link, values: tabs.map(tab => ({ label: tab.label, value: tab.link })), onChange: onSelect }) }), children] }));
+export default BaseLinkTabs;

package/Common/BaseLinkTabs/index.module.css

@@ -1,43 +1,77 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .tabsList {
-  @apply font-open-sans
-    max-xs:hidden
-    mb-6
-    mt-10
-    flex
-    gap-2
-    border-b
-    border-b-neutral-200
-    dark:border-b-neutral-800;
-
+  margin-top: calc(var(--spacing, 0.25rem)*10);
+  margin-bottom: calc(var(--spacing, 0.25rem)*6);
+  display: flex;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: var(--color-neutral-200, #e9edf0);
+  font-family: var(--font-open-sans, var(--font-open-sans));
+  @media (width < 670px) {
+    display: none;
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-bottom-color: var(--color-neutral-800, #556066);
+  }
   .tabsTrigger {
-    @apply border-b-2
-      border-b-transparent
-      px-1
-      pb-[11px]
-      text-sm
-      font-semibold
-      text-neutral-800
-      dark:text-neutral-200;
-
+    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);
+    color: var(--color-neutral-800, #556066);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
+    &:not([data-state='active']):hover {
+      border-bottom-color: var(--color-neutral-900, #2c3437);
+      color: var(--color-neutral-900, #2c3437);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        border-bottom-color: var(--color-neutral-300, #d9e1e4);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-300, #d9e1e4);
+      }
+    }
     &[data-state='active'] {
-      @apply border-b-green-600
-        text-green-600
-        dark:border-b-green-400
-        dark:text-green-400;
+      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);
+      }
     }
   }
 }
-
 .tabsSelect {
-  @apply sm:visible
-    md:hidden;
-
+  @media (width >= 40rem) {
+    visibility: visible;
+  }
+  @media (width >= 48rem) {
+    display: none;
+  }
   > span {
-    @apply max-xs:flex
-      my-6
-      hidden
-      w-full;
+    margin-block: calc(var(--spacing, 0.25rem)*6);
+    display: none;
+    width: 100%;
+    @media (width < 670px) {
+      display: flex;
+    }
   }
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/BasePagination/Ellipsis/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index.module.css';
+const Ellipsis = () => (_jsx("span", { "aria-hidden": "true", className: styles.ellipsis, children: "..." }));
+export default Ellipsis;

package/Common/BasePagination/Ellipsis/index.module.css

@@ -1,10 +1,16 @@
-@reference "../../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .ellipsis {
-  @apply w-10
-    px-3
-    py-2.5
-    leading-none
-    text-neutral-800
-    dark:text-neutral-200;
+  width: calc(var(--spacing, 0.25rem)*10);
+  padding-inline: calc(var(--spacing, 0.25rem)*3);
+  padding-block: calc(var(--spacing, 0.25rem)*2.5);
+  --tw-leading: 1;
+  line-height: 1;
+  color: var(--color-neutral-800, #556066);
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-neutral-200, #e9edf0);
+  }
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
 }

package/Common/BasePagination/PaginationListItem/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index.module.css';
+const PaginationListItem = ({ url, pageNumber, currentPage, totalPages, as: Component = 'a', label, }) => {
+    return (_jsx("li", { "aria-setsize": totalPages, "aria-posinset": pageNumber, children: _jsx(Component, { href: url, "aria-label": label, className: styles.listItem, ...(pageNumber === currentPage && { 'aria-current': 'page' }), children: _jsx("span", { children: pageNumber }) }) }, pageNumber));
+};
+export default PaginationListItem;

package/Common/BasePagination/PaginationListItem/index.module.css

@@ -1,27 +1,42 @@
-@reference "../../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .listItem,
 .listItem:link,
 .listItem:active {
-  @apply aria-current:bg-green-600
-    aria-current:text-white
-    aria-current:cursor-default
-    flex
-    size-10
-    cursor-pointer
-    items-center
-    justify-center
-    rounded-sm
-    px-3
-    py-2.5
-    text-neutral-800
-    motion-safe:transition-colors
-    dark:text-neutral-200;
-
+  display: flex;
+  width: calc(var(--spacing, 0.25rem)*10);
+  height: calc(var(--spacing, 0.25rem)*10);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm, 0.25rem);
+  padding-inline: calc(var(--spacing, 0.25rem)*3);
+  padding-block: calc(var(--spacing, 0.25rem)*2.5);
+  color: var(--color-neutral-800, #556066);
+  @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-200, #e9edf0);
+  }
+  &[aria-current="page"] {
+    cursor: default;
+  }
+  &[aria-current="page"] {
+    background-color: var(--color-green-600, #417e38);
+  }
+  &[aria-current="page"] {
+    color: var(--color-white, #fff);
+  }
   &:hover:not([aria-current='page']) {
-    @apply bg-neutral-100
-      text-neutral-800
-      dark:bg-neutral-900
-      dark:text-neutral-200;
+    background-color: var(--color-neutral-100, #f6f7f9);
+    color: var(--color-neutral-800, #556066);
+    &: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-200, #e9edf0);
+    }
   }
 }

package/Common/BasePagination/PrevNextArrow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
+const PrevNextArrow = ({ type, ...extra }) => {
+    const ChevronComponent = type === 'previous' ? ChevronLeftIcon : ChevronRightIcon;
+    return _jsx(ChevronComponent, { ...extra });
+};
+export default PrevNextArrow;

package/Common/BasePagination/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon, ArrowLeftIcon } from '@heroicons/react/20/solid';
+import Button from '#ui/Common/BaseButton';
+import { useGetPageElements } from '#ui/Common/BasePagination/useGetPageElements';
+import styles from './index.module.css';
+const BasePagination = ({ currentPage, pages, as = 'a', currentPageSiblingsCount = 1, labels, getPageLabel, }) => {
+    const parsedPages = useGetPageElements(currentPage, pages, currentPageSiblingsCount, as, getPageLabel);
+    return (_jsxs("nav", { "aria-label": labels.aria, className: styles.pagination, children: [_jsxs(Button, { as: as, "aria-label": labels.prevAria, disabled: currentPage === 1, kind: "secondary", className: styles.previousButton, href: pages[currentPage - 2]?.url, children: [_jsx(ArrowLeftIcon, { className: styles.arrowIcon }), _jsx("span", { children: labels.prev })] }), _jsx("ol", { className: styles.list, children: parsedPages }), _jsxs(Button, { as: as, "aria-label": labels.nextAria, disabled: currentPage === pages.length, kind: "secondary", className: styles.nextButton, href: pages[currentPage]?.url, children: [_jsx("span", { children: labels.next }), _jsx(ArrowRightIcon, { className: styles.arrowIcon })] })] }));
+};
+export default BasePagination;

package/Common/BasePagination/index.module.css

@@ -1,39 +1,40 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .pagination {
-  @apply grid
-    items-center
-    justify-between
-    gap-y-5
-    [grid-template-areas:'pages_pages_pages''prev_._next']
-    md:gap-y-0
-    md:[grid-template-areas:'prev_pages_next'];
+  display: grid;
+  align-items: center;
+  justify-content: space-between;
+  row-gap: calc(var(--spacing, 0.25rem)*5);
+  grid-template-areas: 'pages pages pages''prev . next';
+  @media (width >= 48rem) {
+    row-gap: calc(var(--spacing, 0.25rem)*0);
+  }
+  @media (width >= 48rem) {
+    grid-template-areas: 'prev pages next';
+  }
 }
-
 .previousButton,
 .nextButton {
-  @apply text-sm;
+  font-size: var(--text-sm, 0.875rem);
+  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
 }
-
 .previousButton {
-  @apply [grid-area:prev];
+  grid-area: prev;
 }
-
 .nextButton {
-  @apply [grid-area:next];
+  grid-area: next;
 }
-
 .arrowIcon {
-  @apply h-5
-    shrink-0
-    text-neutral-600
-    dark:text-neutral-400;
+  height: calc(var(--spacing, 0.25rem)*5);
+  flex-shrink: 0;
+  color: var(--color-neutral-600, #929fa5);
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-neutral-400, #cbd4d9);
+  }
 }
-
 .list {
-  @apply flex
-    list-none
-    justify-center
-    gap-1
-    [grid-area:pages];
+  display: flex;
+  list-style-type: none;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem)*1);
+  grid-area: pages;
 }