@infonomic/uikit 5.3.0 → 5.5.0

package/dist/components/card/card-header.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+}
+
+import styles from './card.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles['card-header'], className]} {...rest}>
+  <slot />
+</div>

package/dist/components/card/card-title.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+}
+
+import styles from './card.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles['card-title'], className]} {...rest}>
+  <slot />
+</div>

package/dist/components/card/card.astro

@@ -0,0 +1,41 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'button'>, Omit<HTMLAttributes<'a'>, 'type'> {
+  class?: string
+  hover?: boolean
+  href?: string
+  target?: string
+  as?: 'div' | 'a'
+}
+
+import styles from './card.module.css'
+
+const {
+  class: className,
+  hover,
+  as = 'div',
+  href,
+  target = href?.startsWith('http') ? '_blank' : undefined,
+  ...rest
+} = Astro.props as Props
+
+const componentType = href != null ? 'a' : as
+---
+
+{
+  componentType === 'a' ? (
+    <a
+      href={href}
+      target={target}
+      class:list={[styles.card, { [styles['card-hover']]: hover }, className]}
+      {...rest}
+    >
+      <slot />
+    </a>
+  ) : (
+    <div class:list={[styles.card, { [styles['card-hover']]: hover }, className]} {...rest}>
+      <slot />
+    </div>
+  )
+}

package/dist/components/card/card.module.css

@@ -0,0 +1,77 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .card,
+  :global(.card) {
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    width: 100%;
+    max-width: 100%;
+    color: var(--foreground);
+    background: var(--canvas-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)
+  }
+
+  .card:is(:global(.dark) *),
+  :global(.card):is(:global(.dark) *) {
+    background: var(--canvas-800);
+  }
+
+  .card-hover,
+  :global(.card-hover) {
+    transition: background 0.2s ease-in-out;
+  }
+
+  .card-hover:hover,
+  :global(.card-hover):hover {
+    background: oklch(from var(--theme-50) 1 0.03 h);
+  }
+
+  .card-hover:hover:is(:global(.dark) *),
+  :global(.card-hover):hover:is(:global(.dark) *) {
+    background: oklch(from var(--canvas-800) 0.2 c h);
+  }
+
+  .card-header,
+  :global(.card-header) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+  }
+
+  .card-title,
+  :global(.card-title) {
+    color: var(--headings);
+    font-size: 1.8rem;
+    font-weight: bold;
+    line-height: 1;
+    letter-spacing: -0.015em;
+  }
+
+  .card-description,
+  :global(.card-description) {
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+
+  .card-content,
+  :global(.card-content) {
+    flex: 1;
+    padding: 1rem;
+    padding-top: 0;
+  }
+
+  .card-footer,
+  :global(.card-footer) {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    padding-top: 0;
+  }
+}

package/dist/components/container/container.astro

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

package/dist/components/container/container.module.css

@@ -0,0 +1,36 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .container,
+  :global(.container) {
+    width: 100%;
+    padding: 0 1rem;
+    margin: 0 auto;
+    max-width: 60rem;
+  }
+
+  /* Shy edges */
+  /* Large */
+  @media (min-width: 66rem) {
+    .container,
+    :global(.container) {
+      max-width: 64rem;
+    }
+  }
+
+  /* X-Large */
+  @media (min-width: 77rem) {
+    .container,
+    :global(.container) {
+      max-width: 74.375rem;
+    }
+  }
+
+  /* 2X-Large */
+  @media (min-width: 94rem) {
+    .container,
+    :global(.container) {
+      max-width: 87.5rem;
+    }
+  }
+}

package/dist/components/dropdown/dropdown.module.css

@@ -0,0 +1,120 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+
+  .dropdown-content,
+  .dropdown-subcontent {
+    z-index: 20;
+    background-color: var(--surface-panel-elevated);
+    padding: 4px;
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform, opacity;
+    border-width: var(--border-width-thin);
+    border-color: var(--surface-panel-border);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm);
+
+    &[data-side="top"] {
+      animation-name: slideDownAndFade;
+    }
+
+    &[data-side="right"] {
+      animation-name: slideLeftAndFade;
+    }
+
+    &[data-side="bottom"] {
+      animation-name: slideUpAndFade;
+    }
+
+    &[data-side="left"] {
+      animation-name: slideRightAndFade;
+    }
+  }
+
+
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-1);
+    width: 100%;
+    padding: 5px 2px;
+    font-size: var(--font-size-sm);
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
+    transition: background-color 0.2s;
+    cursor: default;
+    outline: none;
+    border-radius: var(--border-radius-sm);
+  }
+
+  /* Updated to also cover data-highlighted presence */
+  .dropdown-item:hover,
+  .dropdown-item:focus,
+  .dropdown-item[data-highlighted] {
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
+  }
+
+  .dropdown-separator {
+    margin: 0 auto;
+    width: 90%;
+    background-color: var(--surface-panel-border);
+    margin: var(--spacing-4) 0;
+    border-top-width: var(--border-width-thin);
+    border-top-color: var(--surface-panel-border);
+    border-top-style: var(--border-style-solid);
+  }
+
+  /* Dark mode handled by surface tokens in theme layer */
+
+  @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/components/forms/calendar.module.css

@@ -0,0 +1,269 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .day-picker {
+    padding: var(--spacing-12)
+  }
+
+  /* relative flex flex-col gap-4 sm:flex-row */
+  .months {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+
+  /* 'relative flex h-7 items-center justify-center', */
+  .months-caption {
+    position: relative;
+    display: flex;
+    height: 1.75rem;
+    /* 28px */
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 'flex items-center justify-center gap-2 w-full',_dropdownsClassName */
+  .dropdowns {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-8);
+    width: 100%;
+  }
+
+  .select-trigger {
+    width: 100%;
+    height: 2.25rem;
+    /* 36px */
+    font-size: 0.875rem;
+    /* 14px */
+  }
+
+  .select-content {
+    z-index: 100;
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  .select-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    border: none;
+    /* 14px */
+  }
+
+  .select-item:hover {
+    background-color: var(--gray-50);
+    color: var(--foreground);
+  }
+
+  .select-chevrons {
+    stroke: var(--primary-400);
+    opacity: 0.7
+  }
+
+  .scroll-area {
+    border: 1px solid var(--border-color);
+    height: 240px;
+    width: 120px;
+    background-color: var(--background);
+    text-align: center;
+  }
+
+  .disabled {
+    color: var(--muted);
+    opacity: 0.5;
+  }
+
+  /* 'invisible flex-1' */
+  /* This is used to hide the month when the calendar is in single mode */
+  /* and the month is not selected */
+  .hidden {
+    visibility: hidden;
+    flex: 1;
+  }
+
+
+  /* 'text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30', */
+  .outside {
+    color: var(--muted);
+    opacity: 0.5;
+  }
+
+  .outside[aria-selected='true'] {
+    color: var(--muted);
+    opacity: 0.3;
+  }
+
+  /* 'pt-3 text-sm' */
+  .footer {
+    padding-top: var(--spacing-12);
+    font-size: 0.875rem;
+    /* 14px */
+  }
+
+  .weekdays {
+    display: flex;
+  }
+
+  /* 'w-9 text-sm font-normal text-muted-foreground', */
+  .weekday {
+    width: 2.25rem;
+    /* 36px */
+    font-size: 0.875rem;
+    /* 14px */
+    font-weight: normal;
+    color: var(--muted);
+  }
+
+  /* 'truncate text-sm font-medium' */
+  .caption-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    /* 14px */
+    font-weight: 500;
+  }
+
+  /* 'mx-auto mt-4' */
+  .month-grid {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: var(--spacing-16);
+  }
+
+  /* 'mt-2 flex w-max items-start' */
+  .week {
+    margin-top: var(--spacing-8);
+    display: flex;
+    width: max-content;
+    align-items: flex-start;
+  }
+
+  /* 'flex size-9 flex-1 items-center justify-center p-0 text-sm', */
+  .day {
+    display: flex;
+    width: 2.25rem;
+    /* 36px */
+    height: 2.25rem;
+    /* 36px */
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font-size: 0.875rem;
+    /* 14px */
+  }
+
+  /* '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground', */
+  .day>button {
+    color: var(--foreground);
+  }
+
+  /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
+  .today>button {
+    /* background-color: var(--gray-50); */
+    border: solid 1px var(--stroke-primary);
+    color: var(--foreground);
+  }
+
+  .day>button:hover,
+  .day-selected>button {
+    background-color: var(--fill-primary-strong);
+    color: white;
+  }
+
+  /* 'size-9 rounded-md p-0 font-normal transition-none aria-selected:opacity-100', */
+  .day-button {
+    width: 2.25rem;
+    /* 36px */
+    height: 2.25rem;
+    /* 36px */
+    border-radius: var(--border-radius-md);
+    padding: 0;
+    font-weight: normal;
+    transition: none;
+  }
+
+  .day-button[aria-selected='true'] {
+    opacity: 1;
+  }
+
+  /* 'bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground' */
+  .button-range {
+    background-color: var(--fill-primary-weak);
+    color: var(--foreground);
+  }
+
+  .button-range>button {
+    background-color: var(--fill-primary-strong);
+    color: white;
+  }
+
+  .button-range>button:hover {
+    background-color: var(--fill-primary-strong);
+    color: var(--foreground);
+  }
+
+  .range-start {
+    border-top-left-radius: var(--border-radius-md);
+    border-bottom-left-radius: var(--border-radius-md);
+  }
+
+  .range-end {
+    border-top-right-radius: var(--border-radius-md);
+    border-bottom-right-radius: var(--border-radius-md);
+  }
+
+  /* 'bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground', */
+  .range-middle {
+    background-color: var(--fill-primary-weak);
+    color: var(--foreground);
+  }
+
+  .range-middle>button,
+  .range-middle>button:hover {
+    background-color: transparent;
+    color: var(--foreground);
+  }
+
+  @media (min-width: 40rem) {
+    .months {
+      flex-direction: row;
+    }
+  }
+
+  /* 🌙 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) {
+    .select-content {
+      background-color: var(--canvas-800);
+      color: var(--foreground);
+    }
+
+    .scroll-area {
+      background-color: var(--canvas-800);
+      color: var(--foreground);
+    }
+
+    .select-item:hover {
+      background-color: var(--primary-400);
+      color: var(--foreground);
+    }
+
+    .select-chevrons {
+      stroke: var(--primary-200);
+      opacity: 0.7;
+    }
+  }
+}

package/dist/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>