@infonomic/uikit 5.3.0 → 5.4.0

package/dist/components/forms/checkbox.module.css

@@ -0,0 +1,211 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .container {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-2);
+  }
+
+  .reverse {
+    flex-direction: row-reverse;
+  }
+
+  .checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius-sm);
+    transition: all var(--transition-normal);
+  }
+
+  .checkbox[data-state="checked"] {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .checkbox:disabled,
+  .checkbox[disabled] {
+    pointer-events: none;
+  }
+
+  .indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    color: var(--checkbox-icon-color);
+  }
+
+  /* Style for the "checked" state */
+  .indicator[data-state="checked"] .icon {
+    animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* Style for the "unchecked" state */
+  .indicator[data-state="unchecked"] .icon {
+    animation: checkBoxOut 0.2s ease-in;
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  .label {
+    margin-left: 0.25rem;
+    cursor: pointer;
+    font-weight: 500;
+    color: var(--label-color);
+  }
+
+  .checkbox:disabled~.label,
+  .checkbox[disabled]~.label {
+    pointer-events: none;
+  }
+
+  .errorText {
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    color: red;
+  }
+
+  /* Sizes */
+  .sm {
+    width: 18px;
+    height: 18px;
+  }
+
+  .md {
+    width: 20px;
+    height: 20px;
+  }
+
+  .lg {
+    width: 22px;
+    height: 22px;
+  }
+
+  /* Variants */
+  .outlined {
+    border: 2px solid var(--checkbox-variant-outlined-border);
+    --checkbox-icon-color: white;
+  }
+
+  .outlined[data-state="checked"] {
+    --ring-color: var(--checkbox-variant-outline-ring-color);
+    background-color: var(--checkbox-variant-outlined);
+  }
+
+  .filled {
+    background-color: var(--checkbox-variant-filled);
+    --checkbox-icon-color: white;
+  }
+
+  /* Intents */
+  .primary {
+    --checkbox-variant-outlined-border: var(--fill-primary-strong);
+    --checkbox-variant-outlined: var(--fill-primary-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-primary-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-primary);
+    --checkbox-variant-filled: var(--fill-primary-strong);
+    --checkbox-icon-color: var(--text-on-primary);
+  }
+
+  .secondary {
+    --checkbox-variant-outlined-border: var(--fill-secondary-strong);
+    --checkbox-variant-outlined: var(--fill-secondary-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-secondary);
+    --checkbox-variant-filled: var(--fill-secondary-strong);
+    --checkbox-icon-color: var(--text-on-secondary);
+  }
+
+  .noeffect {
+    --checkbox-variant-outlined-border: var(--fill-noeffect-strong);
+    --checkbox-variant-outlined: var(--fill-noeffect-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-noeffect-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-noeffect);
+    --checkbox-variant-filled: var(--fill-noeffect-strong);
+    --checkbox-icon-color: var(--text-on-noeffect);
+  }
+
+  .success {
+    --checkbox-variant-outlined-border: var(--fill-success-strong);
+    --checkbox-variant-outlined: var(--fill-success-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-success-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-success);
+    --checkbox-variant-filled: var(--fill-success-strong);
+    --checkbox-icon-color: var(--text-on-success);
+  }
+
+  .info {
+    --checkbox-variant-outlined-border: var(--fill-info-strong);
+    --checkbox-variant-outlined: var(--fill-info-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-info-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-info);
+    --checkbox-variant-filled: var(--fill-info-strong);
+    --checkbox-icon-color: var(--text-on-info);
+  }
+
+  .warning {
+    --checkbox-variant-outlined-border: var(--fill-warning-strong);
+    --checkbox-variant-outlined: var(--fill-warning-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-warning-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-warning);
+    --checkbox-variant-filled: var(--fill-warning-strong);
+    --checkbox-icon-color: var(--text-on-warning);
+  }
+
+  .danger {
+    --checkbox-variant-outlined-border: var(--fill-danger-strong);
+    --checkbox-variant-outlined: var(--fill-danger-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-danger-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-danger);
+    --checkbox-variant-filled: var(--fill-danger-strong);
+    --checkbox-icon-color: var(--text-on-danger);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+
+  @keyframes checkBoxIn {
+    0% {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    50% {
+      opacity: 1;
+      transform: scale(1.2);
+      /* Overshoot */
+    }
+
+    80% {
+      transform: scale(0.9);
+      /* Slight bounce back */
+    }
+
+    100% {
+      transform: scale(1);
+      /* Settle */
+    }
+  }
+
+  /* Define keyframes for the "unchecked" state */
+  @keyframes checkBoxOut {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+}

package/dist/components/forms/error-text.astro

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

package/dist/components/forms/error-text.module.css

@@ -0,0 +1,9 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .text,
+  :global(.error-text) {
+    font-size: 0.875rem;
+    color: var(--error)
+  }
+}

package/dist/components/forms/help-text.astro

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

package/dist/components/forms/help-text.module.css

@@ -0,0 +1,9 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .text,
+  :global(.help-text) {
+    font-size: 0.875rem;
+    color: var(--muted)
+  }
+}

package/dist/components/forms/input-adornment.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import styles from './input-adornment.module.css'
+
+interface Props extends HTMLAttributes<'div'> {
+  position?: 'start' | 'end'
+  margins?: boolean
+  class?: string
+}
+
+const { position = 'start', margins = true, class: className, ...rest } = Astro.props as Props
+---
+
+<div
+  class:list={[
+    'input-adornment',
+    position,
+    styles.adornment,
+    position === 'start' && styles.start,
+    position === 'end' && styles.end,
+    className
+  ]}
+  {...rest}
+>
+  <slot />
+</div>

package/dist/components/forms/input-adornment.module.css

@@ -0,0 +1,21 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .adornment,
+  :global(.input-adornment) {
+    display: flex;
+    align-items: center;
+    line-height: 0;
+    white-space: nowrap;
+  }
+
+  .start,
+  :global(.input-adornment-start) {
+    justify-content: flex-start;
+  }
+
+  .end,
+  :global(.input-adornment-end) {
+    justify-content: flex-end;
+  }
+}

package/dist/components/forms/input.astro

@@ -0,0 +1,99 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Size, Variant } from './@types/input.js'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import styles from './input.module.css'
+import Label from './label.astro'
+
+interface Props extends HTMLAttributes<'input'> {
+  id: string
+  name: string
+  label?: string
+  variant?: Variant
+  inputSize?: Size
+  intent?: Intent
+  required?: boolean
+  placeHolder?: string
+  autoComplete?: string
+  startAdornment?: any
+  endAdornment?: any
+  error?: boolean
+  helpText?: string
+  errorText?: string
+  class?: string
+}
+
+const {
+  id,
+  name,
+  variant = 'outlined',
+  inputSize = 'md',
+  intent = 'primary',
+  required,
+  label,
+  startAdornment,
+  endAdornment,
+  placeHolder = '',
+  autoComplete = 'off',
+  error = false,
+  helpText = '',
+  errorText = '',
+  class: className,
+  ...rest
+} = Astro.props as Props
+---
+
+<div class:list={['input-wrapper', styles['input-wrapper']]}>
+  {label != null && <Label id={id} for={id} required={required} label={label} />}
+  <div class:list={['input-container', styles['input-container']]}>
+    {
+      startAdornment != null && (
+        <div class:list={[styles['start-adornment'], styles[variant]]}>
+          <slot name="start-adornment" />
+        </div>
+      )
+    }
+    <input
+      id={id}
+      name={name}
+      required={required}
+      auto-complete={autoComplete}
+      placeholder={placeHolder}
+      aria-labelledby={`label-for-${id}`}
+      aria-invalid={error}
+      aria-required={required}
+      aria-errormessage={errorText}
+      aria-describedby={error ? `error-for-${id}` : undefined}
+      class:list={[
+        'input',
+        variant,
+        inputSize,
+        intent,
+        styles.input,
+        styles[variant],
+        styles[inputSize],
+        styles[intent],
+        startAdornment != null && styles['start-adornment-padding'],
+        endAdornment != null && styles['end-adornment-padding'],
+        error && styles.error,
+        className
+      ]}
+      {...rest}
+    />
+    {
+      endAdornment != null && (
+        <div class:list={[styles['end-adornment'], styles[variant]]}>
+          <slot name="end-adornment" />
+        </div>
+      )
+    }
+  </div>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</div>

package/dist/components/forms/input.module.css

@@ -0,0 +1,278 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .input-wrapper,
+  :global(.input-wrapper) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-1);
+  }
+
+  .input-container,
+  :global(.input-container) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--gap-2);
+  }
+
+  .input,
+  :global(.input) {
+    border: none;
+    outline: none;
+    font-weight: normal;
+    display: inline-flex;
+    gap: var(--gap-2);
+    align-items: center;
+    width: 100%;
+    transition: all var(--transition-normal);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .input:focus,
+  .input:active,
+  :global(.input):focus,
+  :global(.input):active {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .input:disabled,
+  .input[disabled],
+  :global(.input):disabled,
+  :global(.input)[disabled] {
+    pointer-events: none;
+  }
+
+  .label,
+  :global(.input-label) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--label-color);
+  }
+
+  /* Sizes */
+  .sm,
+  :global(.input-sm) {
+    min-height: 32px;
+    font-size: 0.875rem;
+    line-height: 0;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .md,
+  :global(.input-md) {
+    min-height: 38px;
+    font-size: 1.1rem;
+    line-height: 0;
+    padding: 0.4rem 0.5rem;
+  }
+
+  .lg,
+  :global(.input-lg) {
+    min-height: 46px;
+    font-size: 1.2rem;
+    line-height: 0;
+    padding: 0.5rem 0.5rem;
+  }
+
+  .start-adornment,
+  .end-adornment,
+  :global(.input-start-adornment),
+  :global(.input-end-adornment) {
+    position: absolute;
+    display: flex;
+    align-items: center;
+  }
+
+  .start-adornment,
+  :global(.input-start-adornment) {
+    left: 5px;
+  }
+
+  .end-adornment,
+  :global(.input-end-adornment) {
+    right: 5px;
+  }
+
+  .help-text,
+  :global(.input-help-text) {
+    font-size: 0.75rem;
+    color: var(--help-text-color);
+  }
+
+  /* Variants */
+  .outlined,
+  :global(.input-outlined) {
+    border: 1px solid var(--input-variant-outlined-border);
+    background-color: transparent;
+  }
+
+  .outlined:hover,
+  :global(.input-outlined):hover {
+    border: 1px solid var(--input-variant-outlined-hover-border);
+  }
+
+  .outlined:focus,
+  .outlined:active,
+  :global(.input-outlined):focus,
+  :global(.input-outlined):active {
+    --ring-color: var(--input-variant-outline-ring-color);
+  }
+
+  .underlined,
+  :global(.input-underlined) {
+    border-bottom: 1px solid var(--input-variant-underlined-border);
+    border-radius: 0;
+    gap: var(--gap-1);
+    background-color: var(--input-variant-underlined);
+  }
+
+  /* Sizes */
+  .underlined.sm,
+  :global(.input-underlined.input-sm) {
+    padding: 0.25rem 0.1rem;
+    min-height: 26px
+  }
+
+  .underlined.md,
+  :global(.input-underlined.input-md) {
+    padding: 0.25rem 0.1rem;
+    min-height: 30px;
+  }
+
+  .underlined.lg,
+  :global(.input-underlined.input-lg) {
+    padding: 0 0.1rem;
+    min-height: 34px;
+  }
+
+  .underlined:hover,
+  :global(.input-underlined):hover {
+    border-bottom: 1px solid var(--input-variant-underlined-hover-border);
+  }
+
+  .filled,
+  :global(.input-filled) {
+    background-color: var(--input-variant-filled);
+  }
+
+
+  /* Error classes last, so that they override all 
+    of the above */
+  .error,
+  :global(.input-error) {
+    border: 1px solid var(--red-400);
+  }
+
+  .error:hover,
+  :global(.input-error):hover {
+    border: 1px solid var(--red-400);
+  }
+
+  .error:focus,
+  .error:active,
+  :global(.input-error):focus,
+  :global(.input-error):active {
+    --ring-color: var(--red-300);
+  }
+
+  .underlined.start-adornment-padding,
+  .start-adornment-padding,
+  :global(.input-underlined.input-start-adornment-padding),
+  :global(.input-start-adornment-padding) {
+    padding-left: 2rem;
+  }
+
+  .underlined.end-adornment-padding,
+  .end-adornment-padding,
+  :global(.input-underlined.input-end-adornment-padding),
+  :global(.input-end-adornment-padding) {
+    padding-right: 2rem;
+  }
+
+  .underlined.start-adornment,
+  :global(.input-underlined.input-start-adornment) {
+    left: 0;
+  }
+
+  .underlined.end-adornment,
+  :global(.input-underlined.input-end-adornment) {
+    right: 0;
+  }
+
+  /* Intents */
+  .primary,
+  :global(.input-primary) {
+    --input-variant-outlined-border: var(--stroke-primary);
+    --input-variant-outlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-outline-ring-color: var(--ring-primary);
+    --input-variant-underlined-border: var(--stroke-primary);
+    --input-variant-underlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-filled: var(--fill-primary-weak);
+  }
+
+  .secondary,
+  :global(.input-secondary) {
+    --input-variant-outlined-border: var(--stroke-secondary);
+    --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-outline-ring-color: var(--ring-secondary);
+    --input-variant-underlined-border: var(--stroke-secondary);
+    --input-variant-underlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-filled: var(--fill-secondary-weak);
+  }
+
+  .noeffect,
+  :global(.input-noeffect) {
+    --input-variant-outlined-border: var(--stroke-noeffect);
+    --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-outline-ring-color: var(--ring-noeffect);
+    --input-variant-underlined-border: var(--stroke-noeffect);
+    --input-variant-underlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-filled: var(--fill-noeffect-weak);
+  }
+
+  .success,
+  :global(.input-success) {
+    --input-variant-outlined-border: var(--stroke-success);
+    --input-variant-outlined-hover-border: var(--stroke-success-hover);
+    --input-variant-outline-ring-color: var(--ring-success);
+    --input-variant-underlined-border: var(--stroke-success);
+    --input-variant-underlined-hover-border: var(--stroke-success-hover);
+    --input-variant-filled: var(--fill-success-weak);
+  }
+
+  .info,
+  :global(.input-info) {
+    --input-variant-outlined-border: var(--stroke-info);
+    --input-variant-outlined-hover-border: var(--stroke-info-hover);
+    --input-variant-outline-ring-color: var(--ring-info);
+    --input-variant-underlined-border: var(--stroke-info);
+    --input-variant-underlined-hover-border: var(--stroke-info-hover);
+    --input-variant-filled: var(--fill-info-weak);
+  }
+
+  .warning,
+  :global(.input-warning) {
+    --input-variant-outlined-border: var(--stroke-warning);
+    --input-variant-outlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-outline-ring-color: var(--ring-warning);
+    --input-variant-underlined-border: var(--stroke-warning);
+    --input-variant-underlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-filled: var(--fill-warning-weak);
+  }
+
+  .danger,
+  :global(.input-danger) {
+    --input-variant-outlined-border: var(--stroke-danger);
+    --input-variant-outlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-outline-ring-color: var(--ring-danger);
+    --input-variant-underlined-border: var(--stroke-danger);
+    --input-variant-underlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-filled: var(--fill-danger-weak);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+}

package/dist/components/forms/label.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import styles from './label.module.css'
+
+interface Props extends HTMLAttributes<'label'> {
+  id: string
+  for: string
+  label: string
+  required?: boolean
+  class?: string
+}
+
+const { id, for: htmlFor, label, required, class: className, ...rest } = Astro.props as Props
+---
+
+<label
+  id={`label-for-${id}`}
+  for={htmlFor}
+  class:list={['label', styles.label, className]}
+  {...rest}
+>
+  {label}
+  {required != null && <span class={styles.required}>&nbsp;*</span>}
+</label>