@infonomic/uikit 5.3.0 → 5.5.0

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>

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

@@ -0,0 +1,15 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .label,
+  :global(.label) {
+    display: block;
+    font-weight: 500;
+    color: var(--text)
+  }
+
+  .required,
+  :global(.label-required) {
+    color: var(--error);
+  }
+}

package/dist/components/forms/radio-group.module.css

@@ -0,0 +1,163 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+/* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
+@layer infonomic-components {
+
+  .column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-2);
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap-2);
+  }
+
+  .item-container {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-2);
+  }
+
+  .item {
+    all: unset;
+    width: 18px;
+    height: 18px;
+    border-radius: var(--border-radius-full);
+    border: 2px solid var(--radio-border);
+    transition: all var(--transition-normal);
+  }
+
+  .item[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);
+  }
+
+  .item:disabled,
+  .item[disabled] {
+    pointer-events: none;
+  }
+
+  /* Style for the "checked" state */
+  .indicator[data-state="checked"] {
+    animation: radioIn 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"] {
+    animation: radioOut 0.2s ease-in;
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  .indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 11px;
+      height: 11px;
+      border-radius: 50%;
+      background-color: var(--radio-indicator-color);
+    }
+  }
+
+  .label {
+    color: var(--foreground);
+    font-size: 15px;
+    line-height: 1;
+    padding-left: var(--spacing-8);
+  }
+
+  .row .label {
+    padding-left: 0;
+    padding-right: var(--spacing-16)
+  }
+
+
+  /* Intents */
+  .primary {
+    --radio-border: var(--fill-primary-strong);
+    --radio-indicator-color: var(--fill-primary-strong);
+  }
+
+  .secondary {
+    --radio-border: var(--fill-secondary-strong);
+    --radio-indicator-color: var(--fill-secondary-strong);
+  }
+
+  .noeffect {
+    --radio-border: var(--fill-noeffect-strong);
+    --radio-indicator-color: var(--fill-noeffect-strong);
+  }
+
+  .success {
+    --radio-border: var(--fill-success-strong);
+    --radio-indicator-color: var(--fill-success-strong);
+  }
+
+  .info {
+    --radio-border: var(--fill-info-strong);
+    --radio-indicator-color: var(--fill-info-strong);
+  }
+
+  .warning {
+    --radio-border: var(--fill-warning-strong);
+    --radio-indicator-color: var(--fill-warning-strong);
+  }
+
+  .danger {
+    --radio-border: var(--fill-danger-strong);
+    --radio-indicator-color: var(--fill-danger-strong);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+
+  @keyframes radioIn {
+    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 radioOut {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .content {
+    z-index: 50;
+  }
+
+  .viewport {
+    z-index: 50;
+    margin-top: 2px;
+    border: 1px solid var(--surface-panel-border);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-panel-elevated);
+    padding: 6px;
+  }
+
+  .group {
+    z-index: 50;
+  }
+
+  .scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--surface-item-text);
+    border: 1px solid var(--surface-panel-border);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-panel-elevated);
+    padding: 2px;
+  }
+
+  .select-item {
+    position: relative;
+    user-select: none;
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
+    font-size: 1rem;
+    line-height: 1;
+    padding-right: 35px;
+    padding-left: 25px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+  }
+
+  .select-item[data-disabled] {
+    color: var(--surface-item-text-disabled);
+    pointer-events: none;
+  }
+
+  .select-item[data-highlighted] {
+    outline: none;
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
+  }
+
+  .select-item-indicator {
+    position: absolute;
+    left: 0;
+    width: 25px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,77 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Variant } from './@types/input.js'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import inputStyles from './input.module.css'
+import Label from './label.astro'
+import styles from './text-area.module.css'
+
+interface Props extends HTMLAttributes<'textarea'> {
+  id: string
+  name: string
+  label: string
+  required?: boolean
+  variant?: Variant
+  intent?: Intent
+  rows?: number
+  placeHolder?: string
+  autoComplete?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+  class?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  rows = 4,
+  required = false,
+  variant = 'outlined',
+  intent = 'primary',
+  placeHolder = '',
+  autoComplete = 'off',
+  error = false,
+  helpText = '',
+  errorText = '',
+  class: className,
+  ...rest
+} = Astro.props as Props
+---
+
+<fieldset class:list={['text-area-wrapper', inputStyles['input-wrapper']]}>
+  <Label id={id} for={id} required={required} label={label} />
+  <textarea
+    id={id}
+    name={name}
+    required={required}
+    rows={rows}
+    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={[
+      'text-area',
+      variant,
+      intent,
+      inputStyles.input,
+      inputStyles[variant],
+      inputStyles[intent],
+      styles['text-area'],
+      error && inputStyles.error,
+      className
+    ]}
+    {...rest}></textarea>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</fieldset>

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

@@ -0,0 +1,10 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .text-area,
+  :global(.text-area) {
+    font-size: 1.1rem;
+    width: 100%;
+    padding: 0.5rem;
+  }
+}

package/dist/components/hamburger/hamburger.astro

@@ -0,0 +1,30 @@
+---
+// SEE: uikit/src/styles/components/hamburger.css
+
+// NOTE: we don't use open or color props in Astro.
+// Instead we set open / closed state via nanostores.
+// and then apply global classes according.
+// Class overrides for inner span colors are set in
+// Astro app.css
+
+interface HamburgerProps {
+  class?: string
+  ariaLabel?: string
+  ariaControls?: string
+}
+
+const { class: className, ariaLabel, ariaControls } = Astro.props as HamburgerProps
+---
+
+<button
+  id="component--hamburger"
+  class:list={['component--hamburger', className]}
+  tabindex="0"
+  aria-label={ariaLabel}
+  aria-controls={ariaControls}
+  aria-haspopup="true"
+>
+  <span class="box" aria-hidden="true">
+    <span class="inner"></span>
+  </span>
+</button>

package/dist/components/notifications/alert.module.css

@@ -0,0 +1,110 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .alert {
+    display: flex;
+    align-items: start;
+    width: 100%;
+    gap: var(--gap-2);
+    border-radius: var(--border-radius-md);
+    padding: 16px;
+    font-family: inherit;
+    font-weight: normal;
+    transition: all 0.3s ease-in-out;
+    border: 1px solid var(--alert-border);
+    background-color: var(--alert-background);
+    margin-bottom: 1rem;
+  }
+
+  .alert-with-title {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    margin-left: auto;
+    margin-top: -2px;
+  }
+
+  .fade {
+    opacity: 0;
+    transition: opacity 0.4s ease-in-out;
+  }
+
+  .header {
+    display: flex;
+    align-items: start;
+    width: 100%;
+    margin-bottom: var(--spacing-8);
+    gap: var(--gap-2);
+  }
+
+  .title {
+    display: flex;
+    font-weight: bold;
+    font-size: 1.2rem;
+    line-height: 1;
+    padding-top: 1px;
+  }
+
+  .content {
+    padding-top: 1px;
+    font-size: var(--font-size-sm);
+  }
+
+  .content:first-child {
+    margin-top: 0;
+  }
+
+  /* Intents */
+  .primary {
+    --alert-border: var(--stroke-primary);
+    --alert-background: var(--fill-primary-weak);
+  }
+
+  .secondary {
+    --alert-border: var(--stroke-secondary);
+    --alert-background: var(--fill-secondary-weak);
+  }
+
+  .noeffect {
+    --alert-border: var(--stroke-noeffect);
+    --alert-background: var(--fill-noeffect-weak);
+  }
+
+  .success {
+    --alert-border: var(--stroke-success);
+    --alert-background: var(--fill-success-weak);
+  }
+
+  .info {
+    --alert-border: var(--stroke-info);
+    --alert-background: var(--fill-info-weak);
+  }
+
+  .warning {
+    --alert-border: var(--stroke-warning);
+    --alert-background: var(--fill-warning-weak);
+  }
+
+  .danger {
+    --alert-border: var(--stroke-danger);
+    --alert-background: var(--fill-danger-weak);
+  }
+}