@infonomic/uikit 5.3.0 → 5.5.0

package/dist/components/notifications/toast.module.css

@@ -0,0 +1,237 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  /* Positions are relative to the toast viewport which is set 
+   globally in components/toast.css  */
+
+  .root {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-1);
+    padding-top: 12px;
+    padding-bottom: 16px;
+    background: var(--gray-25);
+    border-width: var(--border-width-thin);
+    border-color: var(--border-color);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .root:is(:global(.dark) *) {
+    background: var(--canvas-800);
+  }
+
+  .root[data-state="open"] {
+    animation: slideInFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .root[data-state="closed"] {
+    animation: hide 100ms ease-in;
+  }
+
+  .root[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  .root[data-swipe="cancel"] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  .root.top-right[data-swipe="end"],
+  .root.bottom-right[data-swipe="end"] {
+    animation: swipeOutToRight 100ms ease-out;
+  }
+
+  .root.top-left[data-swipe="end"],
+  .root.bottom-left[data-swipe="end"] {
+    animation: swipeOutToLeft 100ms ease-out;
+  }
+
+  .header {
+    display: flex;
+    padding: 0 16px 0 12px;
+    align-items: start;
+    gap: var(--gap-2);
+    justify-content: space-between;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    margin-left: auto;
+    margin-top: -2px;
+  }
+
+  .close svg {
+    fill: white;
+  }
+
+
+  .title {
+    display: flex;
+    padding: 0 12px 0 8px;
+    align-items: start;
+    gap: var(--gap-2);
+    margin-bottom: 5px;
+    font-weight: 500;
+    font-size: 15px;
+  }
+
+  .description {
+    margin: 0;
+    padding: 0 8px 0 12px;
+    font-size: var(--font-size-sm);
+    line-height: 1.3;
+  }
+
+  .action {
+    display: flex;
+    justify-content: end;
+    padding: 0 12px 0 12px;
+  }
+
+  /* Positions are relative to the toast viewport which is set 
+   globally in components/toast.css  */
+
+  .top-left {
+    top: 88px;
+    right: 16px;
+    left: 16px;
+  }
+
+  .top-right {
+    top: 88px;
+    right: 16px;
+    left: 16px;
+  }
+
+  .bottom-left {
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+  }
+
+  .bottom-right {
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+  }
+
+  @media (min-width: 48rem) {
+
+    .root.top-right[data-state="open"],
+    .root.bottom-right[data-state="open"] {
+      animation: slideInFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .root.top-left[data-state="open"],
+    .root.bottom-left[data-state="open"] {
+      animation: slideInFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .bottom-right {
+      bottom: 16px;
+      right: 16px;
+      left: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .bottom-left {
+      bottom: 16px;
+      left: 16px;
+      right: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .top-left {
+      top: 88px;
+      left: 16px;
+      right: auto;
+      bottom: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .top-right {
+      top: 88px;
+      right: 16px;
+      bottom: auto;
+      left: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+  }
+
+  @keyframes slideInFromRight {
+    from {
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideInFromLeft {
+    from {
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideInFromBottom {
+    from {
+      transform: translateY(calc(100% + var(--viewport-padding)));
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes swipeOutToRight {
+    from {
+      transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+
+    to {
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+  }
+
+  @keyframes swipeOutToLeft {
+    from {
+      transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+
+    to {
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
+  }
+
+  @keyframes hide {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+}

package/dist/components/overlay/overlay.module.css

@@ -0,0 +1,41 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(245, 245, 245, 0.35);
+  z-index: 20;
+}
+
+.overlay:is(:global(.dark) *) {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.animate-fade-in {
+  animation: fade-in 0.3s ease-in-out;
+}
+
+.animate-fade-out {
+  animation: fade-out 0.3s ease-in-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 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;
+  }
+}