@infonomic/uikit 5.3.0 → 5.5.0

package/dist/widgets/datepicker/datepicker.module.css

@@ -0,0 +1,189 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+  .container {
+    position: relative;
+  }
+
+  .input,
+  .input-wrapper {
+    width: 100%;
+  }
+
+  .content {
+    width: 100%;
+    border-radius: 4px;
+    padding-top: var(--spacing-16);
+    padding-bottom: var(--spacing-8);
+    padding-left: var(--spacing-8);
+    padding-right: var(--spacing-4);
+    background-color: var(--background);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-md);
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform, opacity;
+
+    &:focus {
+      box-shadow: var(--shadow-md)
+    }
+
+    &[data-state="open"][data-side="top"] {
+      animation-name: slideDownAndFade;
+    }
+
+    &[data-state="open"][data-side="right"] {
+      animation-name: slideLeftAndFade;
+    }
+
+    &[data-state="open"][data-side="bottom"] {
+      animation-name: slideUpAndFade;
+    }
+
+    &[data-state="open"][data-side="left"] {
+      animation-name: slideRightAndFade;
+    }
+  }
+
+  .content:is(:global(.dark) *) {
+    background: var(--canvas-800);
+  }
+
+  .content-components {
+    display: flex;
+    width: 100%;
+    gap: var(--spacing-8);
+  }
+
+
+  .status-and-actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .content-status {
+    display: flex;
+    align-items: center;
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-8);
+    font-size: var(--font-size-sm);
+    color: var(--foreground);
+    width: 100%;
+  }
+
+  .content-actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: var(--spacing-12);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-6);
+    gap: var(--spacing-8);
+    width: 100%;
+  }
+
+  .content-actions-button {
+    /* min-width: 100px; */
+    --ring-color: var(--violet-7);
+  }
+
+  .arrow {
+    fill: var(--gray-50);
+  }
+
+  .close {
+    all: unset;
+    font-family: inherit;
+    border-radius: 100%;
+    height: 25px;
+    width: 25px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--violet-11);
+    position: absolute;
+    top: 5px;
+    right: 5px;
+
+    &:hover {
+      background-color: var(--primary-400);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--primary-600);
+    }
+  }
+
+  .time-picker-container {
+    width: 80px;
+    margin: 0.6rem 0.5rem 1rem 0;
+  }
+
+  .time-picker-scroll-area {
+    height: 280px;
+    padding-right: var(--spacing-16)
+  }
+
+  .time-picker {
+    display: flex;
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .time-picker-button {
+    width: 100%;
+  }
+
+  @keyframes slideUpAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideRightAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideDownAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideLeftAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(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.3.0",
+  "version": "5.5.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.js

@@ -8,13 +8,16 @@ import CardHeaderComponent from './components/card/card-header.astro'
 import CardTitleComponent from './components/card/card-title.astro'
 import ContainerComponent from './components/container/container.astro'
 import HamburgerComponent from './components/hamburger/hamburger.astro'
+import CheckboxComponent from './components/forms/checkbox.astro'
 import ErrorTextComponent from './components/forms/error-text.astro'
 import HelpTextComponent from './components/forms/help-text.astro'
 import InputComponent from './components/forms/input.astro'
 import InputAdornmentComponent from './components/forms/input-adornment.astro'
 import LabelComponent from './components/forms/label.astro'
+import TextAreaComponent from './components/forms/text-area.astro'
 import SectionComponent from './components/section/section.astro'
 import ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
+import CheckIconComponent from './icons/check-icon.astro'
 import CloseIconComponent from './icons/close-icon.astro'
 import IconElementComponent from './icons/icon-element.astro'
 import LightIconComponent from './icons/light-icon.astro'
@@ -32,15 +35,18 @@ export const CardHeader = CardHeaderComponent
 export const CardTitle = CardTitleComponent
 export const Card = CardComponent
 export const Container = ContainerComponent
+export const Checkbox = CheckboxComponent
 export const ErrorText = ErrorTextComponent
 export const HelpText = HelpTextComponent
 export const InputAdornment = InputAdornmentComponent
 export const Input = InputComponent
 export const Label = LabelComponent
+export const TextArea = TextAreaComponent
 export const Section = SectionComponent
 export const ScrollToTop = ScrollToTopComponent
 export const IconElement = IconElementComponent
 export const LightIcon = LightIconComponent
 export const MoonIcon = MoonIconComponent
 export const SearchIcon = SearchIconComponent
+export const CheckIcon = CheckIconComponent
 export const CloseIcon = CloseIconComponent

package/src/components/forms/checkbox.astro

@@ -0,0 +1,129 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Size, Variant } from './@types/checkbox.js'
+import CheckIcon from '../../icons/check-icon.astro'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import styles from './checkbox.module.css'
+
+interface Props extends HTMLAttributes<'input'> {
+  id: string
+  name: string
+  label: string
+  variant?: Variant
+  size?: Size
+  intent?: Intent
+  reverse?: boolean
+  checked?: boolean
+  class?: string
+  checkBoxClasses?: string
+  containerClasses?: string
+  componentClasses?: string
+  labelClasses?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  variant = 'outlined',
+  size = 'md',
+  intent = 'primary',
+  reverse = false,
+  checked = false,
+  class: className,
+  checkBoxClasses,
+  containerClasses,
+  componentClasses,
+  labelClasses,
+  error = false,
+  helpText = '',
+  errorText = '',
+  ...rest
+} = Astro.props
+---
+
+<div class:list={['checkbox-container', containerClasses]}>
+  <div
+    class:list={[
+      'checkbox-component',
+      styles.container,
+      componentClasses,
+      { [styles.reverse]: reverse }
+    ]}
+  >
+    <input type="checkbox" id={id} name={name} checked={checked} class="sr-only peer" {...rest} />
+
+    <label
+      for={id}
+      class:list={[
+        'checkbox',
+        variant,
+        size,
+        intent,
+        styles.checkbox,
+        styles[variant],
+        styles[size],
+        styles[intent],
+        checkBoxClasses,
+        className
+      ]}
+      data-state={checked ? 'checked' : 'unchecked'}
+    >
+      <span
+        class:list={['checkbox-indicator', styles.indicator]}
+        data-state={checked ? 'checked' : 'unchecked'}
+      >
+        <CheckIcon class={styles.icon} />
+      </span>
+    </label>
+
+    <label for={id} class:list={[styles.label, labelClasses]}>
+      {label}
+    </label>
+  </div>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</div>
+
+<script>
+  function setupCheckboxes() {
+    const inputs = document.querySelectorAll('input[type="checkbox"].peer')
+
+    inputs.forEach((input) => {
+      const checkboxInput = input as HTMLInputElement
+      const id = checkboxInput.id
+      // Find the visual checkbox label associated with this input
+      const visualCheckbox = document.querySelector(`label.checkbox[for="${id}"]`)
+      const indicator = visualCheckbox?.querySelector('.checkbox-indicator')
+
+      if (visualCheckbox && indicator) {
+        // Update state on change
+        checkboxInput.addEventListener('change', () => {
+          const state = checkboxInput.checked ? 'checked' : 'unchecked'
+          visualCheckbox.setAttribute('data-state', state)
+          indicator.setAttribute('data-state', state)
+        })
+
+        // Ensure initial state is correct
+        const state = checkboxInput.checked ? 'checked' : 'unchecked'
+        visualCheckbox.setAttribute('data-state', state)
+        indicator.setAttribute('data-state', state)
+      }
+    })
+  }
+
+  // Run on initial load
+  setupCheckboxes()
+
+  // Support Astro View Transitions
+  document.addEventListener('astro:page-load', setupCheckboxes)
+</script>

package/src/components/forms/checkbox.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { CheckIcon } from '@radix-ui/react-icons'
+import { CheckIcon } from '../../icons/check-icon'
 import cx from 'classnames'
 import { Checkbox as CheckboxPrimitive, Label as LabelPrimitive } from 'radix-ui'
 import type * as React from 'react'