@infonomic/uikit 5.3.0 → 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.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);
+    }
+  }
+}

package/dist/components/tabs/tabs.module.css

@@ -0,0 +1,66 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+
+  .tabs-root {
+    display: flex;
+    padding: var(--spacing-8);
+    flex-direction: column;
+    gap: var(--spacing-4);
+    border-radius: var(--border-radius-md);
+    border: 1px solid var(--border-color);
+  }
+
+  .tabs-list {
+    display: flex;
+    width: 100%;
+    gap: var(--gap-2);
+    align-items: center;
+    border-radius: var(--border-radius-md);
+    padding: var(--spacing-4);
+    border: 1px solid var(--border-color);
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .tabs-trigger {
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    width: 100%;
+
+    /* &[data-state="active"] {
+      color: var(----primary-600);
+      box-shadow:
+        inset 0 -1px 0 0 currentColor,
+        0 1px 0 0 currentColor;
+    } */
+
+    &:focus {
+      position: relative;
+      /* NOTE: will override ring shadows for buttons */
+      /* Will revisit as we're going to rewrite our uikit tabs component */
+      /* box-shadow: 0 0 0 2px black; */
+    }
+  }
+
+  .tabs-content {
+    margin-top: var(--spacing-8);
+    padding: 6px;
+    outline: none;
+
+    &[data-state="inactive"] {
+      display: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}

package/dist/components/tooltip/tooltip.module.css

@@ -0,0 +1,45 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .tooltip {
+    font-size: 0.75rem;
+    line-height: 1;
+    color: var(--surface-item-text);
+    user-select: none;
+    padding: 0.625rem 1rem;
+    border-radius: var(--border-radius-sm);
+    border-width: var(--border-width-thin);
+    border-style: var(--border-style-solid);
+    background-color: var(--surface-panel-elevated);
+    border-color: var(--surface-panel-border);
+    box-shadow: var(--shadow-xs);
+    will-change: transform, opacity;
+    animation: var(--transition-normal);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+
+  .tooltip[data-state="delayed-open"][data-side="top"] :global {
+    animation-name: slideDownAndFade;
+  }
+
+  .tooltip[data-state="delayed-open"][data-side="right"] :global {
+    animation-name: slideLeftAndFade;
+  }
+
+
+  .tooltip[data-state="delayed-open"][data-side="left"] :global {
+    animation-name: slideRightAndFade;
+  }
+
+  .tooltip[data-state="delayed-open"][data-side="bottom"] :global {
+    animation-name: slideUpAndFade;
+
+  }
+
+  .tooltip-arrow {
+    fill: var(--surface-panel-border);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+}

package/dist/icons/close-icon.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['close-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    class:list={[styles['fill-current'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+    {...rest}
+  >
+    <path
+      d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"></path>
+  </svg>
+</IconElement>