@infonomic/uikit 5.2.1 → 5.4.0

package/dist/components/pager/pagination.module.css

@@ -0,0 +1,149 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .pagination-root {
+    display: flex;
+    padding: 0;
+    align-items: center;
+  }
+
+  .pagination-items {
+    display: flex;
+    align-items: center;
+    list-style: none;
+  }
+
+  .pagination-items {
+    display: flex;
+    align-items: center;
+    list-style: none;
+  }
+
+  .pagination-items.dashboard li,
+  .pagination-items.default li {
+    margin-right: -1px;
+  }
+
+  .pagination-items.classic li {
+    margin-right: 0;
+  }
+
+  .pagination-items.classic {
+    gap: 6px;
+  }
+
+  .number-button.dashboard.rounded-left,
+  .number-button.default.rounded-left,
+  .first-button.dashboard.rounded-left,
+  .first-button.default.rounded-left,
+  .previous-button.dashboard.rounded-left,
+  .previous-button.default.rounded-left,
+  .last-button.dashboard.rounded-left,
+  .last-button.default.rounded-left,
+  .next-button.dashboard.rounded-left,
+  .next-button.default.rounded-left {
+    border-top-left-radius: var(--border-radius-sm);
+    border-bottom-left-radius: var(--border-radius-sm);
+  }
+
+  .number-button.dashboard.rounded-right,
+  .number-button.default.rounded-right,
+  .first-button.dashboard.rounded-right,
+  .first-button.default.rounded-right,
+  .previous-button.dashboard.rounded-right,
+  .previous-button.default.rounded-right,
+  .last-button.dashboard.rounded-right,
+  .last-button.default.rounded-right,
+  .next-button.dashboard.rounded-right,
+  .next-button.default.rounded-right {
+    border-top-right-radius: var(--border-radius-sm);
+    border-bottom-right-radius: var(--border-radius-sm);
+  }
+
+  .ellipses,
+  .last-button,
+  .next-button,
+  .previous-button,
+  .first-button,
+  .number-button {
+    margin-left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    line-height: 1;
+    border: 1px solid var(--stroke-primary);
+    background-color: var(--background);
+    color: var(--foreground);
+    font-size: var(--font-size-sm);
+  }
+
+
+  .previous-button,
+  .last-button,
+  .next-button,
+  .first-button {
+    width: 38px;
+  }
+
+  .ellipses,
+  .number-button {
+    min-width: 42px;
+  }
+
+  .last-button:hover,
+  .next-button:hover,
+  .number-button:hover,
+  .previous-button:hover,
+  .first-button:hover {
+    color: var(--text-on-primary);
+    background-color: var(--fill-primary-strong);
+  }
+
+  .last-button:disabled,
+  .last-button[disabled],
+  .next-button:disabled,
+  .next-button[disabled],
+  .number-button:disabled,
+  .number-button[disabled],
+  .previous-button:disabled,
+  .previous-button[disabled],
+  .first-button:disabled,
+  .first-button[disabled] {
+    cursor: default;
+  }
+
+  .number-button.active {
+    color: var(--text-on-primary);
+    background-color: var(--fill-primary-strong);
+  }
+
+
+  /* Opinionated mobile */
+  .mobile-toggle {
+    display: none;
+  }
+
+  @media(min-width: 40rem) {
+
+    .mobile-toggle {
+      display: flex;
+    }
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+    .ellipses,
+    .number-button,
+    .next-button,
+    .last-button,
+    .previous-button,
+    .first-button {
+      border-color: var(--canvas-700);
+    }
+  }
+}

package/dist/components/scroll-area/scroll-area.module.css

@@ -0,0 +1,64 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .root {
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: inherit;
+    --scrollbar-size: 10px;
+  }
+
+  .viewport {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .scrollbar {
+    display: flex;
+    /* ensures no selection */
+    user-select: none;
+    /* disable browser handling of all panning and zooming gestures on touch devices */
+    touch-action: none;
+    padding: 2px;
+    background: var(--surface-panel-scrollbar);
+    transition: background 160ms ease-out;
+
+    &:hover {
+      background: var(--surface-panel-scrollbar);
+    }
+
+    &[data-orientation="vertical"] {
+      width: var(--scrollbar-size);
+    }
+
+    &[data-orientation="horizontal"] {
+      flex-direction: column;
+      height: var(--scrollbar-size);
+    }
+  }
+
+  .thumb {
+    flex: 1;
+    background: var(--surface-panel-scrollbar-thumb);
+    border-radius: var(--border-radius-sm);
+    position: relative;
+
+    /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+
+  .corner {
+    background: var(--surface-panel-scrollbar);
+  }
+}

package/dist/components/scroll-to-top/scroll-to-top.astro

@@ -0,0 +1,75 @@
+---
+import styles from './scroll-to-top.module.css'
+
+interface Props {
+  class?: string
+  showAt?: number
+  offset?: number
+  'aria-label'?: string
+  [key: string]: any
+}
+
+const {
+  class: className,
+  showAt = 200,
+  offset = -65,
+  'aria-label': ariaLabel = 'Scroll to top',
+  ...rest
+} = Astro.props
+---
+
+<button
+  type="button"
+  aria-label={ariaLabel}
+  class:list={['scroll-to-top', styles['scroll-to-top'], className]}
+  data-show-at={showAt}
+  data-offset={offset}
+  data-class-shown={styles['scroll-to-top-shown']}
+  {...rest}
+>
+  <span aria-hidden="true">
+    <svg class="icon" style="fill: currentColor" focusable="false" viewBox="0 0 51 32">
+      <path d="M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z"></path>
+    </svg>
+  </span>
+</button>
+
+<script>
+  const buttons = document.querySelectorAll('button.scroll-to-top')
+
+  buttons.forEach((button) => {
+    if (!(button instanceof HTMLElement)) return
+
+    const showAt = Number(button.dataset.showAt) || 200
+    const offset = Number(button.dataset.offset) || -65
+    const classShown = button.dataset.classShown
+
+    if (classShown == null) return
+
+    // Click Handler
+    button.addEventListener('click', () => {
+      window.scrollTo({ top: offset, left: 0, behavior: 'smooth' })
+    })
+
+    // Scroll Handler
+    let ticking = false
+    const handleOnScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          const shouldShow = window.scrollY > showAt
+          if (shouldShow) {
+            button.classList.add(classShown)
+            button.classList.add('scroll-to-top-shown')
+          } else {
+            button.classList.remove(classShown)
+            button.classList.remove('scroll-to-top-shown')
+          }
+          ticking = false
+        })
+        ticking = true
+      }
+    }
+
+    window.addEventListener('scroll', handleOnScroll, { passive: true })
+  })
+</script>

package/dist/components/scroll-to-top/scroll-to-top.d.ts

@@ -1,10 +1,15 @@
-import type React from 'react';
-type ScrollToTopIntrinsicProps = React.JSX.IntrinsicElements['button'];
-interface ScrollToTopProps extends ScrollToTopIntrinsicProps {
+import { type ComponentProps } from 'react';
+export interface ScrollToTopProps extends ComponentProps<'button'> {
+    /**
+     * The scroll position (Y-axis) in pixels that triggers the button to appear.
+     * @default 200
+     */
+    showAt?: number;
+    /**
+     * The target scroll position (Y-axis) to scroll to when clicked.
+     * @default -65
+     */
     offset?: number;
 }
-export type { ScrollToTopProps };
-export declare const ScrollToTop: ({ ref, offset, ...rest }: ScrollToTopProps & {
-    ref?: React.RefObject<HTMLButtonElement>;
-}) => React.JSX.Element;
+export declare function ScrollToTop({ className, showAt, offset, type, 'aria-label': ariaLabel, onClick, ...props }: ScrollToTopProps): import("react").JSX.Element;
 //# sourceMappingURL=scroll-to-top.d.ts.map

package/dist/components/scroll-to-top/scroll-to-top.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-to-top/scroll-to-top.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;AACtE,UAAU,gBAAiB,SAAQ,yBAAyB;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAEhC,eAAO,MAAM,WAAW,GAAwB,0BAI7C,gBAAgB,GAAG;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACzC,sBA2CA,CAAA"}
+{"version":3,"file":"scroll-to-top.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-to-top/scroll-to-top.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAA;AAIhE,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAChE;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,MAAY,EACZ,MAAY,EACZ,IAAe,EACf,YAAY,EAAE,SAA2B,EACzC,OAAO,EACP,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAuDlB"}

package/dist/components/scroll-to-top/scroll-to-top.js

@@ -3,43 +3,53 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { useEffect, useState } from "react";
 import scroll_to_top_module from "./scroll-to-top.module.js";
-const scroll_to_top_ScrollToTop = function({ ref, offset = -65, ...rest }) {
+function ScrollToTop({ className, showAt = 200, offset = -65, type = 'button', 'aria-label': ariaLabel = 'Scroll to top', onClick, ...props }) {
     const [show, setShow] = useState(false);
-    const handleOnClick = ()=>{
+    const handleOnClick = (e)=>{
         window.scrollTo({
             top: offset,
             left: 0,
             behavior: 'smooth'
         });
+        onClick?.(e);
     };
     useEffect(()=>{
+        let ticking = false;
         const handleOnScroll = ()=>{
-            const scrollTop = window.scrollY;
-            scrollTop > 200 ? setShow(true) : setShow(false);
+            if (!ticking) {
+                window.requestAnimationFrame(()=>{
+                    setShow(window.scrollY > showAt);
+                    ticking = false;
+                });
+                ticking = true;
+            }
         };
-        if ('undefined' != typeof window) window.addEventListener('scroll', handleOnScroll);
+        window.addEventListener('scroll', handleOnScroll, {
+            passive: true
+        });
         return ()=>{
             window.removeEventListener('scroll', handleOnScroll);
         };
-    }, []);
+    }, [
+        showAt
+    ]);
     return /*#__PURE__*/ jsx("button", {
-        ref: ref,
-        ...rest,
+        type: type,
+        "aria-label": ariaLabel,
         onClick: handleOnClick,
-        type: "button",
-        id: "scroll-to-top",
         className: classnames('scroll-to-top', scroll_to_top_module["scroll-to-top"], {
             'scroll-to-top-shown': show,
             [scroll_to_top_module["scroll-to-top-shown"]]: show
-        }),
+        }, className),
+        ...props,
         children: /*#__PURE__*/ jsx("span", {
+            "aria-hidden": "true",
             children: /*#__PURE__*/ jsx("svg", {
                 className: "icon",
                 style: {
                     fill: 'currentColor'
                 },
                 focusable: "false",
-                "aria-hidden": "true",
                 viewBox: "0 0 51 32",
                 children: /*#__PURE__*/ jsx("path", {
                     d: "M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z"
@@ -47,5 +57,5 @@ const scroll_to_top_ScrollToTop = function({ ref, offset = -65, ...rest }) {
             })
         })
     });
-};
-export { scroll_to_top_ScrollToTop as ScrollToTop };
+}
+export { ScrollToTop };

package/dist/components/scroll-to-top/scroll-to-top.module.css

@@ -0,0 +1,86 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .scroll-to-top,
+  :global(.scroll-to-top) {
+    display: flex;
+    position: fixed;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    visibility: hidden;
+    align-items: center;
+    text-decoration: none;
+    border-style: none;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    z-index: 20;
+    justify-content: center;
+    bottom: 45px;
+    right: 30px;
+    color: var(--text-on-primary);
+    background-color: var(--fill-primary-strong);
+    transition-property: all, color;
+    transition-duration: 0.3s, 1ms;
+    transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1), ease;
+    transition-delay: 0s, 0s;
+    cursor: pointer;
+  }
+
+  .scroll-to-top span,
+  :global(.scroll-to-top span) {
+    width: 18px;
+    padding-bottom: 3px;
+  }
+
+  .scroll-to-top span svg path,
+  :global(.scroll-to-top span svg path) {
+    stroke: none;
+    fill: var(--text-on-primary);
+  }
+
+  .scroll-to-top:hover,
+  .scroll-to-top:focus,
+  :global(.scroll-to-top:hover),
+  :global(.scroll-to-top:focus) {
+    color: var(--text-on-primary);
+    background-color: var(--fill-primary-strong-hover);
+    transform: translateY(-5px);
+  }
+
+  .scroll-to-top-shown,
+  :global(.scroll-to-top-shown) {
+    min-width: 0;
+    opacity: 1;
+    visibility: visible;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    bottom: 20px;
+    right: 10px;
+    border-radius: 20px;
+  }
+
+  @media screen and (min-width: 587px) {
+    .scroll-to-top,
+    :global(.scroll-to-top) {
+      bottom: 45px;
+      right: 45px;
+    }
+
+    .scroll-to-top span,
+    :global(.scroll-to-top span) {
+      width: 18px;
+    }
+
+    .scroll-to-top-shown,
+    :global(.scroll-to-top-shown) {
+      width: 42px;
+      height: 42px;
+      border-radius: 21px;
+      bottom: 22px;
+      right: 22px;
+    }
+  }
+}

package/dist/components/section/section.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  class?: string
+}
+
+import styles from './section.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<section class:list={[styles.section, className]} {...rest}>
+  <slot />
+</section>

package/dist/components/section/section.module.css

@@ -0,0 +1,9 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .section,
+  :global(.section) {
+    width: 100%;
+    position: relative;
+  }
+}

package/dist/components/shimmer/shimmer.module.css

@@ -0,0 +1,53 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+/* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
+@layer infonomic-components {
+  .shimmer {
+    position: relative;
+    overflow: hidden;
+    background-color: #f0f0f0;
+    background-image: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.6),
+        transparent);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+  }
+
+  .shimmer:is(:global(.dark) *) {
+    background-color: #141414;
+    background-image: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.01),
+        transparent);
+  }
+
+  .shimmerContainer {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rectangular {
+    border-radius: 0.25rem;
+  }
+
+  .text {
+    border-radius: 0.125rem;
+    height: 1rem;
+  }
+
+  .circular {
+    border-radius: 50%;
+    aspect-ratio: 1;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+
+    100% {
+      background-position: 200% 0;
+    }
+  }
+}

package/dist/components/table/table.module.css

@@ -0,0 +1,100 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+/* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
+@layer infonomic-components {
+
+  /* 'table--container break-normal overflow-hidden relative shadow-md rounded-md my-[16px] dark:border dark:border-canvas-700', */
+  .table-container {
+    display: block;
+    overflow: hidden;
+    word-break: normal;
+    position: relative;
+    box-shadow: var(--shadow-sm);
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--border-color);
+  }
+
+  .table-scroller {
+    overflow-x: auto;
+    max-width: calc(100vw - 32px);
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0;
+    font-size: var(--font-size-sm);
+    text-align: left;
+  }
+
+  /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
+  .table-header {
+    font-size: var(--font-size-sm);
+    /* text-transform: uppercase; */
+    background-color: var(--canvas-50);
+  }
+
+  /* 'border-b border-solid border-canvas-200 bg-white hover:bg-canvas-100/50 dark:border-canvas-700/60 dark:bg-canvas-800/50 dark:hover:bg-canvas-700/50', */
+  .table-row {
+    border-bottom: 1px solid var(--canvas-50);
+    background-color: white;
+  }
+
+  .table-row:hover {
+    background-color: var(--canvas-50);
+  }
+
+  /* 'whitespace-nowrap px-2 py-4 text-sm text-gray-700 uppercase bg-canvas-100/50 dark:bg-canvas-800/50 dark:text-gray-200', */
+  .table-heading-cell {
+    white-space: nowrap;
+    padding: var(--spacing-8) var(--spacing-8);
+    font-size: 0.975rem; /* 15.6px */
+    /* text-transform: uppercase; */
+    background-color: var(--canvas-50);
+  }
+
+  /* not-prose px-2 py-2 text-sm [&_a]:underline */
+  .table-cell {
+    padding: var(--spacing-8);
+    font-size: var(--font-size-sm);
+
+    & a {
+      text-decoration: underline;
+    }
+  }
+
+  /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
+  .table-footer {
+    font-size: var(--font-size-sm);
+    /* text-transform: uppercase; */
+    background-color: var(--canvas-100);
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+    .table-header {
+      background-color: var(--canvas-700);
+    }
+
+    .table-row:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      border-bottom: 1px solid var(--canvas-700);
+      background-color: var(--canvas-800);
+    }
+
+    .table-row:hover:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h)
+    }
+
+    .table-heading-cell:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
+    }
+
+    .table-footer:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: var(--canvas-800);
+    }
+  }
+}