@infonomic/uikit 5.2.1 → 5.4.0

package/dist/widgets/drawer/drawer.module.css

@@ -0,0 +1,112 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+  .drawer-wrapper {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 30;
+    opacity: 1;
+  }
+
+
+  .drawer-container {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    background-color: var(--surface-panel);
+    box-shadow: var(--shadow-md);
+    z-index: inherit;
+  }
+
+  .drawer-container[aria-hidden="false"] {
+    animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .drawer-depth-0.drawer-medium .drawer-container,
+  .drawer-depth-0.drawer-wide .drawer-container {
+    width: 90%;
+  }
+
+  .drawer-depth-1.drawer-medium .drawer-container,
+  .drawer-depth-1.drawer-wide .drawer-container {
+    width: 88%;
+  }
+
+  .drawer-depth-2.drawer- .drawer-container,
+  .drawer-depth-2.drawer-wide .drawer-container {
+    width: 86%;
+  }
+
+  @media (min-width: 48rem) {
+    .drawer-depth-0.drawer-medium .drawer-container {
+      width: 600px;
+    }
+
+    .drawer-depth-1.drawer-medium .drawer-container {
+      width: 580px;
+    }
+
+    .drawer-depth-2.drawer- .drawer-container {
+      width: 560px;
+    }
+  }
+
+  .drawer-narrow .drawer-container {
+    width: calc(100% - 32px);
+    max-width: 400px
+  }
+
+  .drawer-container[aria-hidden="true"] {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  .drawer-top-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-top: var(--spacing-12);
+    padding-left: var(--spacing-12);
+    padding-right: var(--spacing-12);
+    padding-bottom: 0;
+    max-width: 100%;
+  }
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-3);
+    padding-top: 0;
+    padding-left: var(--spacing-12);
+    padding-right: var(--spacing-12);
+    max-width: 100%;
+  }
+
+  .drawer-header h2,
+  .drawer-header h3 {
+    margin: 0;
+  }
+
+  .drawer-content {
+    padding: var(--spacing-12);
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+}

package/dist/widgets/modal/modal.module.css

@@ -0,0 +1,81 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+  .modal-wrapper {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 30;
+    opacity: 1;
+  }
+
+  .modal-container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    z-index: 20;
+    min-height: 300px;
+    max-height: 88vh;
+    width: 100%;
+    bottom: 0;
+    background-color: var(--surface-panel);
+    border: 1px solid var(--border-color);
+    margin-left: var(--spacing-8);
+    margin-right: var(--spacing-8);
+  }
+
+  @media screen and (min-width: 40rem) {
+    .modal-container {
+      max-height: calc(100vh - 24px);
+      min-height: auto;
+      bottom: auto;
+      width: auto;
+    }
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-3);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-top: var(--spacing-20);
+    max-width: 100%;
+  }
+
+  .modal-header h2,
+  .modal-header h3 {
+    margin: 0;
+  }
+
+  .modal-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--gap-3);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-bottom: var(--spacing-12);
+    max-width: 100%;
+  }
+
+  .modal-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--gap-3);
+    padding-top: var(--spacing-8);
+    padding-bottom: var(--spacing-20);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+  }
+}

package/dist/widgets/timeline/timeline.module.css

@@ -0,0 +1,87 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .timeline {
+    margin-left: var(--spacing-8);
+  }
+
+  .timeline-root {
+    position: relative;
+    list-style: none;
+    margin-left: var(--spacing-8);
+    padding-left: var(--spacing-8);
+    border-left-width: var(--border-width-thin);
+    border-left-color: var(--border-color);
+    border-left-style: var(--border-style-solid);
+  }
+
+  .timeline-item {
+    margin: 0 0 var(--spacing-16) var(--spacing-20);
+  }
+
+  /* 'absolute block flex items-center justify-center w-[36px] h-[36px] rounded-full -mt-[3px] sm:mt-0 -left-[18px] border-[6px] bg-secondary-600 dark:bg-secondary-900 border-gray-50 dark:border-canvas-600', */
+  .timeline-icon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    margin-top: -3px;
+    left: -18px;
+    border-width: 6px;
+    color: white;
+    background-color: var(--primary-600);
+    border-color: var(--gray-50);
+  }
+
+  .timeline-icon svg {
+    display: block;
+    width: 60%;
+    color: white;
+  }
+
+  /* 'text-[1.5rem] sm:text-[1.57rem] leading-[1.2] !m-0 font-semibold' */
+  .timeline-heading {
+    font-size: 1.5rem;
+    line-height: 1.2;
+    margin: 0;
+    font-weight: var(--font-weight-semibold);
+  }
+
+  /* 'block mt-2 mb-2 text-[0.9em] font-medium leading-none text-gray-900 dark:text-gray-100' */
+  .timeline-date {
+    display: block;
+    margin-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
+    font-size: 0.9em;
+    font-weight: var(--font-weight-medium);
+    line-height: 0;
+    color: var(--gray-600);
+  }
+
+  /* '[&_p]:m-0 [&_p]:mb-4 [&_p]:sm:m-0 [&_p]:sm:mb-4 text-lg font-normal text-gray-900 dark:text-gray-300' */
+  .timeline-content {
+    margin: 0;
+    margin-bottom: var(--spacing-16);
+    font-size: 1.125rem;
+    font-weight: var(--font-weight-normal);
+
+    & p {
+      margin: 0;
+      margin-bottom: var(--spacing-16);
+    }
+  }
+
+  /* 🌙 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) {
+    .timeline-icon:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      border-color: var(--canvas-600);
+    }
+  }
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "5.2.1",
+  "version": "5.4.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [
@@ -30,9 +30,9 @@
   ],
   "exports": {
     "./astro": {
-      "types": "./src/astro.d.ts",
-      "import": "./src/astro.js",
-      "default": "./src/astro.js"
+      "types": "./dist/astro.d.ts",
+      "import": "./dist/astro.js",
+      "default": "./dist/astro.js"
     },
     "./react": {
       "types": "./dist/react.d.ts",
@@ -114,6 +114,7 @@
     "build": "run-s build:*",
     "build:clean": "rimraf dist build",
     "build:code": "rslib build",
+    "build:astro": "node ./scripts/build-astro.js",
     "build:css": "lightningcss --bundle ./src/styles/styles.css ./src/styles/typography.css --output-dir ./dist/styles",
     "build:minify": "lightningcss --minify ./dist/styles/styles.css ./dist/styles/typography.css --output-dir ./dist/styles",
     "build:vanilla-components-css": "node ./scripts/task-merge-vanilla-components-css.js",

package/src/astro.d.ts

@@ -14,6 +14,7 @@ import type InputComponent from './components/forms/input.astro'
 import type InputAdornmentComponent from './components/forms/input-adornment.astro'
 import type LabelComponent from './components/forms/label.astro'
 import type SectionComponent from './components/section/section.astro'
+import type ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
 import type CloseIconComponent from './icons/close-icon.astro'
 import type IconElementComponent from './icons/icon-element.astro'
 import type LightIconComponent from './icons/light-icon.astro'
@@ -41,3 +42,4 @@ export declare const LightIcon: typeof LightIconComponent
 export declare const MoonIcon: typeof MoonIconComponent
 export declare const SearchIcon: typeof SearchIconComponent
 export declare const Section: typeof SectionComponent
+export declare const ScrollToTop: typeof ScrollToTopComponent

package/src/astro.js

@@ -14,12 +14,14 @@ import InputComponent from './components/forms/input.astro'
 import InputAdornmentComponent from './components/forms/input-adornment.astro'
 import LabelComponent from './components/forms/label.astro'
 import SectionComponent from './components/section/section.astro'
+import ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
 import CloseIconComponent from './icons/close-icon.astro'
 import IconElementComponent from './icons/icon-element.astro'
 import LightIconComponent from './icons/light-icon.astro'
 import MoonIconComponent from './icons/moon-icon.astro'
 import SearchIconComponent from './icons/search-icon.astro'
 
+
 export const Button = ButtonComponent
 export const Hamburger = HamburgerComponent
 export const IconButton = IconButtonComponent
@@ -36,6 +38,7 @@ export const InputAdornment = InputAdornmentComponent
 export const Input = InputComponent
 export const Label = LabelComponent
 export const Section = SectionComponent
+export const ScrollToTop = ScrollToTopComponent
 export const IconElement = IconElementComponent
 export const LightIcon = LightIconComponent
 export const MoonIcon = MoonIconComponent

package/src/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/src/components/scroll-to-top/scroll-to-top.tsx

@@ -1,62 +1,81 @@
 'use client'
 
-import type React from 'react'
 import cx from 'classnames'
-import { useEffect, useState } from 'react'
+import { type ComponentProps, useEffect, useState } from 'react'
 
-import style from './scroll-to-top.module.css'
+import styles from './scroll-to-top.module.css'
 
-type ScrollToTopIntrinsicProps = React.JSX.IntrinsicElements['button']
-interface ScrollToTopProps extends ScrollToTopIntrinsicProps {
+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 const ScrollToTop = function ScrollToTop({
-  ref,
+export function ScrollToTop({
+  className,
+  showAt = 200,
   offset = -65,
-  ...rest
-}: ScrollToTopProps & {
-  ref?: React.RefObject<HTMLButtonElement>
-}) {
+  type = 'button',
+  'aria-label': ariaLabel = 'Scroll to top',
+  onClick,
+  ...props
+}: ScrollToTopProps) {
   const [show, setShow] = useState(false)
 
-  const handleOnClick = (): void => {
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
     window.scrollTo({ top: offset, left: 0, behavior: 'smooth' })
+    onClick?.(e)
   }
 
   useEffect(() => {
+    let ticking = false
+
     const handleOnScroll = (): void => {
-      const scrollTop = window.scrollY
-      if (scrollTop > 200) {
-        setShow(true)
-      } else {
-        setShow(false)
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          setShow(window.scrollY > showAt)
+          ticking = false
+        })
+        ticking = true
       }
     }
-    if (typeof window !== 'undefined') {
-      window.addEventListener('scroll', handleOnScroll)
-    }
+
+    window.addEventListener('scroll', handleOnScroll, { passive: true })
     return () => {
       window.removeEventListener('scroll', handleOnScroll)
     }
-  }, [])
+  }, [showAt])
 
   return (
     <button
-      ref={ref}
-      {...rest}
+      type={type}
+      aria-label={ariaLabel}
       onClick={handleOnClick}
-      type="button"
-      id="scroll-to-top"
-      className={cx('scroll-to-top', style['scroll-to-top'], {
-        'scroll-to-top-shown': show,
-        [style['scroll-to-top-shown']]: show,
-      })}
+      className={cx(
+        'scroll-to-top',
+        styles['scroll-to-top'],
+        {
+          'scroll-to-top-shown': show,
+          [styles['scroll-to-top-shown']]: show,
+        },
+        className
+      )}
+      {...props}
     >
-      <span>
-        <svg className="icon" style={{fill: 'currentColor'}} focusable="false" aria-hidden="true" viewBox="0 0 51 32">
+      <span aria-hidden="true">
+        <svg
+          className="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" />
         </svg>
       </span>