@infonomic/uikit 5.3.0 → 5.5.0

package/dist/astro.d.ts

@@ -0,0 +1,51 @@
+import type ButtonComponent from './components/button/button.astro'
+import type IconButtonComponent from './components/button/icon-button.astro'
+import type CardContentComponent from './components/card/card-content.astro'
+import type CardDescriptionComponent from './components/card/card-description.astro'
+import type CardFooterComponent from './components/card/card-footer.astro'
+import type CardHeaderComponent from './components/card/card-header.astro'
+import type CardTitleComponent from './components/card/card-title.astro'
+import type CardComponent from './components/card/card.astro'
+import type ContainerComponent from './components/container/container.astro'
+import type CheckboxComponent from './components/forms/checkbox.astro'
+import type ErrorTextComponent from './components/forms/error-text.astro'
+import type HelpTextComponent from './components/forms/help-text.astro'
+import type InputAdornmentComponent from './components/forms/input-adornment.astro'
+import type InputComponent from './components/forms/input.astro'
+import type LabelComponent from './components/forms/label.astro'
+import type TextAreaComponent from './components/forms/text-area.astro'
+import type HamburgerComponent from './components/hamburger/hamburger.astro'
+import type ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
+import type SectionComponent from './components/section/section.astro'
+import type CheckIconComponent from './icons/check-icon.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'
+import type MoonIconComponent from './icons/moon-icon.astro'
+import type SearchIconComponent from './icons/search-icon.astro'
+
+export declare const Button: typeof ButtonComponent
+export declare const IconButton: typeof IconButtonComponent
+export declare const CardContent: typeof CardContentComponent
+export declare const CardDescription: typeof CardDescriptionComponent
+export declare const CardFooter: typeof CardFooterComponent
+export declare const CardHeader: typeof CardHeaderComponent
+export declare const CardTitle: typeof CardTitleComponent
+export declare const Card: typeof CardComponent
+export declare const Container: typeof ContainerComponent
+export declare const Checkbox: typeof CheckboxComponent
+export declare const ErrorText: typeof ErrorTextComponent
+export declare const HelpText: typeof HelpTextComponent
+export declare const InputAdornment: typeof InputAdornmentComponent
+export declare const Input: typeof InputComponent
+export declare const Label: typeof LabelComponent
+export declare const TextArea: typeof TextAreaComponent
+export declare const Hamburger: typeof HamburgerComponent
+export declare const ScrollToTop: typeof ScrollToTopComponent
+export declare const Section: typeof SectionComponent
+export declare const CheckIcon: typeof CheckIconComponent
+export declare const CloseIcon: typeof CloseIconComponent
+export declare const IconElement: typeof IconElementComponent
+export declare const LightIcon: typeof LightIconComponent
+export declare const MoonIcon: typeof MoonIconComponent
+export declare const SearchIcon: typeof SearchIconComponent

package/dist/astro.js

@@ -0,0 +1,51 @@
+import ButtonComponent from './components/button/button.astro'
+import IconButtonComponent from './components/button/icon-button.astro'
+import CardContentComponent from './components/card/card-content.astro'
+import CardDescriptionComponent from './components/card/card-description.astro'
+import CardFooterComponent from './components/card/card-footer.astro'
+import CardHeaderComponent from './components/card/card-header.astro'
+import CardTitleComponent from './components/card/card-title.astro'
+import CardComponent from './components/card/card.astro'
+import ContainerComponent from './components/container/container.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 InputAdornmentComponent from './components/forms/input-adornment.astro'
+import InputComponent from './components/forms/input.astro'
+import LabelComponent from './components/forms/label.astro'
+import TextAreaComponent from './components/forms/text-area.astro'
+import HamburgerComponent from './components/hamburger/hamburger.astro'
+import ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
+import SectionComponent from './components/section/section.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'
+import MoonIconComponent from './icons/moon-icon.astro'
+import SearchIconComponent from './icons/search-icon.astro'
+
+export const Button = ButtonComponent
+export const IconButton = IconButtonComponent
+export const CardContent = CardContentComponent
+export const CardDescription = CardDescriptionComponent
+export const CardFooter = CardFooterComponent
+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 Hamburger = HamburgerComponent
+export const ScrollToTop = ScrollToTopComponent
+export const Section = SectionComponent
+export const CheckIcon = CheckIconComponent
+export const CloseIcon = CloseIconComponent
+export const IconElement = IconElementComponent
+export const LightIcon = LightIconComponent
+export const MoonIcon = MoonIconComponent
+export const SearchIcon = SearchIconComponent

package/dist/components/accordion/accordion.module.css

@@ -0,0 +1,60 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+  .root {
+    border-radius: 6px;
+    width: 300px;
+    background-color: var(--canvas-25);
+    box-shadow: var(--shadow-md);
+  }
+
+  .item {
+    overflow: hidden;
+    margin-top: 1px;
+  }
+
+  .header {
+    margin: 0;
+    display: flex;
+  }
+
+  .trigger {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    width: 100%;
+  }
+
+  .content {
+    overflow: hidden;
+
+    &[data-state="open"] {
+      animation: accordionSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+    }
+
+    &[data-state="closed"] {
+      animation: accordionSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+    }
+  }
+
+
+  @keyframes accordionSlideDown {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordionSlideUp {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+}

package/dist/components/avatar/avatar.module.css

@@ -0,0 +1,54 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+
+  /* relative inline-flex h-10 w-10 rounded-full */
+  .avatar-root {
+    position: relative;
+    display: inline-flex;
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+  }
+
+  .avatar-image {
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  /* flex h-full w-full items-center justify-center rounded-full bg-white dark:bg-gray-800 */
+  .avatar-fallback {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--color-white);
+  }
+
+
+  .avatar-text {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    text-transform: uppercase;
+    color: var(--gray-700);
+  }
+
+  /* 🌙 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) {
+    .avatar-fallback {
+      background-color: var(--gray-800);
+    }
+
+    .avatar-text {
+      color: var(--gray-400);
+    }
+  }
+}

package/dist/components/badge/badge.module.css

@@ -0,0 +1,61 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .badge,
+  :global(.badge) {
+    display: inline-block;
+    padding: 0.25em 0.4em;
+    font-size: var(--font-size-sm);
+    font-weight: 400;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .primary,
+  :global(.badge-primary) {
+    color: var(--text-on-primary);
+    background-color: var(--fill-primary-strong);
+  }
+
+  .secondary,
+  :global(.badge-secondary) {
+    color: var(--text-on-secondary);
+    background-color: var(--fill-secondary-strong);
+  }
+
+  .noeffect,
+  :global(.badge-noeffect) {
+    color: var(--text-on-noeffect);
+    background-color: var(--fill-noeffect-strong);
+  }
+
+  .success,
+  :global(.badge-success) {
+    color: var(--text-on-success);
+    background-color: var(--fill-success-strong);
+  }
+
+  .info,
+  :global(.badge-info) {
+    color: var(--text-on-info);
+    background-color: var(--fill-info-strong);
+  }
+
+  .warning,
+  :global(.badge-warning) {
+    color: var(--text-on-warning);
+    background-color: var(--fill-warning-strong);
+  }
+
+  .danger,
+  :global(.badge-danger) {
+    color: var(--text-on-danger);
+    background-color: var(--fill-danger-strong);
+  }
+
+  /* Dark mode - All intents now handled by semantic tokens in theme layer */
+  /* No overrides needed! Tokens automatically switch in .dark and respect .not-dark */
+}

package/dist/components/button/button-group.module.css

@@ -0,0 +1,19 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+  .button-group,
+  :global(.button-group) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: center;
+    gap: var(--gap-2);
+  }
+
+  @media screen and (min-width: 40rem) {
+    .button-group,
+    :global(.button-group) {
+      flex-direction: row;
+    }
+  }
+}

package/dist/components/button/button.astro

@@ -0,0 +1,86 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Size, Variant } from './@types/button.js'
+
+interface Props extends HTMLAttributes<'button'>, Omit<HTMLAttributes<'a'>, 'type'> {
+  variant?: Variant
+  size?: Size
+  type?: 'submit' | 'reset' | 'button'
+  intent?: Intent
+  fullWidth?: boolean
+  ripple?: boolean
+  class?: string
+  as?: 'button' | 'a'
+  href?: string
+}
+
+// import Ripple from 'material-ripple-effects' // Commented out as this is React specific
+import styles from './button.module.css'
+
+const {
+  variant = 'filled',
+  size = 'md',
+  type = 'button',
+  intent = 'primary',
+  fullWidth = false,
+  ripple = true,
+  class: className,
+  as = 'button',
+  href,
+  target = href?.startsWith('http') ? '_blank' : undefined,
+  ...rest
+} = Astro.props as Props
+
+const componentType = href ? 'a' : as
+
+// let onMouseDown: (e: MouseEvent) => void | undefined
+// if (ripple === true) {
+//   const rippleEffect = new Ripple()
+//   onMouseDown = (e: MouseEvent) => {
+//     rippleEffect.create(e, variant === 'filled' || variant === 'gradient' ? 'light' : 'dark')
+//   }
+// }
+---
+
+{
+  componentType === 'button' ? (
+    <button
+      type={type}
+      class:list={[
+        'button',
+        variant,
+        size,
+        intent,
+        styles.button,
+        styles[variant],
+        styles[size],
+        styles[intent],
+        { [styles.fullWidth]: fullWidth },
+        className
+      ]}
+      {...rest}
+    >
+      <slot />
+    </button>
+  ) : (
+    <a
+      href={href}
+      target={target}
+      class:list={[
+        'button',
+        variant,
+        size,
+        intent,
+        styles.button,
+        styles[variant],
+        styles[size],
+        styles[intent],
+        { [styles.fullWidth]: fullWidth },
+        className
+      ]}
+      {...rest}
+    >
+      <slot />
+    </a>
+  )
+}