@infonomic/uikit 5.41.0 → 5.43.0

package/src/components/button/copy-button.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .copy-button-container,
   :global(.infonomic-copy-button-container) {
     display: inline-block;
@@ -59,4 +58,4 @@ infonomic-components;
     min-height: 54px;
     padding: 0.65rem;
   }
-}
+}

package/src/components/button/copy-button.tsx

@@ -62,7 +62,13 @@ export function CopyButton({
   const tooltipText = copied != null && copied ? copiedText : hoverText
 
   return (
-    <div className={cx('infonomic-copy-button-container', styles['copy-button-container'], containerClassName)}>
+    <div
+      className={cx(
+        'infonomic-copy-button-container',
+        styles['copy-button-container'],
+        containerClassName
+      )}
+    >
       <Tooltip side="top" sideOffset={2} text={tooltipText} open={copied}>
         <Button
           variant={variant}
@@ -70,11 +76,14 @@ export function CopyButton({
           intent={intent}
           fullWidth={fullWidth}
           ripple={ripple}
-          className={cx('infonomic-copy-button',
+          className={cx(
+            'infonomic-copy-button',
             `infonomic-copy-button-${variant}`,
             `infonomic-copy-button-${size}`,
             `infonomic-copy-button-${intent}`,
-            styles[size], className)}
+            styles[size],
+            className
+          )}
           onClick={handleCopied}
           {...rest}
         >

package/src/components/card/card.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .card,
   :global(.infonomic-card) {
     display: flex;
@@ -25,14 +24,12 @@ infonomic-components;
 
   :global(.dark),
   :global([data-theme="dark"]) {
-
     .card,
     :global(.infonomic-card) {
       background: var(--canvas-800);
     }
   }
 
-
   .card-hover,
   :global(.infonomic-card-hover) {
     transition: background 0.2s ease-in-out;
@@ -45,7 +42,6 @@ infonomic-components;
 
   :global(.dark),
   :global([data-theme="dark"]) {
-
     .card-hover:hover,
     :global(.infonomic-card-hover):hover {
       background: oklch(from var(--canvas-800) 0.2 c h);
@@ -89,4 +85,4 @@ infonomic-components;
     padding: 1rem;
     padding-top: 0;
   }
-}
+}

package/src/components/card/card.tsx

@@ -49,7 +49,11 @@ interface OtherProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const Header = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx('infonomic-card-header', styles['card-header'], className)} {...props} />
+  <div
+    ref={ref}
+    className={cx('infonomic-card-header', styles['card-header'], className)}
+    {...props}
+  />
 )
 
 Header.displayName = 'CardHeader'
@@ -64,17 +68,29 @@ const Title = ({ className, ref, ...props }: OtherProps) => (
 Title.displayName = 'CardTitle'
 
 const Description = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx('infonomic-card-description', styles['card-description'], className)} {...props} />
+  <div
+    ref={ref}
+    className={cx('infonomic-card-description', styles['card-description'], className)}
+    {...props}
+  />
 )
 Description.displayName = 'CardDescription'
 
 const Content = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx('infonomic-card-content', styles['card-content'], className)} {...props} />
+  <div
+    ref={ref}
+    className={cx('infonomic-card-content', styles['card-content'], className)}
+    {...props}
+  />
 )
 Content.displayName = 'CardContent'
 
 const Footer = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx('infonomic-card-footer', styles['card-footer'], className)} {...props} />
+  <div
+    ref={ref}
+    className={cx('infonomic-card-footer', styles['card-footer'], className)}
+    {...props}
+  />
 )
 Footer.displayName = 'CardFooter'
 

package/src/components/chips/@types/chip.ts

@@ -1,7 +1,29 @@
 import type { Intent, Size } from '../../@types/shared.js'
 
+/**
+ * Available behavioural variants for the Chip component.
+ */
 export const chipVariant = ['assist', 'selectable', 'removable', 'selectable-removable'] as const
+
+/**
+ * Behavioural variant of the chip.
+ *
+ * - `assist`               — non-interactive display chip, purely informational
+ * - `selectable`           — toggles on/off when clicked (like a filter tag)
+ * - `removable`            — shows a dismiss/close button to remove the chip
+ * - `selectable-removable` — combines toggle selection with a dismiss button
+ */
 export type ChipVariant = (typeof chipVariant)[number]
 
+/**
+ * Semantic color intent of the chip. Inherits all values from the shared `Intent` type.
+ * Controls the chip's background and text color.
+ * @default 'primary'
+ */
 export type ChipIntent = Intent
+
+/**
+ * Visual size of the chip. Inherits all values from the shared `Size` type.
+ * @default 'md'
+ */
 export type ChipSize = Size

package/src/components/chips/chip.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .chip,
   :global(.infonomic-chip) {
     --chip-font-size: 0.9rem;
@@ -151,10 +150,14 @@ infonomic-components;
   .filled[disabled],
   :global(.infonomic-chip-filled):disabled,
   :global(.infonomic-chip-filled)[disabled] {
-    background-color: var(--chip-variant-filled-disabled,
-        oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
-    color: var(--chip-variant-filled-foreground-disabled,
-        oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --chip-variant-filled-disabled,
+      oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --chip-variant-filled-foreground-disabled,
+      oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   /* -------------------------------------------------------- */
@@ -182,10 +185,14 @@ infonomic-components;
   .filled-weak[disabled],
   :global(.infonomic-chip-filled-weak):disabled,
   :global(.infonomic-chip-filled-weak)[disabled] {
-    background-color: var(--chip-variant-filled-weak-disabled,
-        oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
-    color: var(--chip-variant-filled-weak-foreground-disabled,
-        oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --chip-variant-filled-weak-disabled,
+      oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --chip-variant-filled-weak-foreground-disabled,
+      oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   /* -------------------------------------------------------- */
@@ -202,10 +209,14 @@ infonomic-components;
   .outlined[disabled],
   :global(.infonomic-chip-outlined):disabled,
   :global(.infonomic-chip-outlined)[disabled] {
-    border-color: var(--chip-variant-outlined-border-disabled,
-        oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
-    color: var(--chip-variant-outlined-foreground-disabled,
-        oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
+    border-color: var(
+      --chip-variant-outlined-border-disabled,
+      oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
+    );
+    color: var(
+      --chip-variant-outlined-foreground-disabled,
+      oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
+    );
   }
 
   .outlined:hover,
@@ -434,4 +445,4 @@ infonomic-components;
     --chip-variant-outlined-foreground: var(--text-on-danger-outlined);
     --chip-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
   }
-}
+}

package/src/components/chips/chip.tsx

@@ -7,7 +7,6 @@ import cx from 'classnames'
 
 import { CheckIcon } from '../../icons/check-icon.js'
 import { CloseIcon } from '../../icons/close-icon.js'
-import { IconButton } from '../button/icon-button.js'
 import styles from './chip.module.css'
 import type { ChipIntent, ChipSize, ChipVariant } from './@types/chip.js'
 
@@ -70,7 +69,7 @@ export const Chip = <C extends React.ElementType = 'button'>({
     }
 
     if (onClick) {
-      ; (onClick as React.MouseEventHandler<HTMLElement>)(event)
+      ;(onClick as React.MouseEventHandler<HTMLElement>)(event)
     }
 
     if (isSelectable && onToggle) {
@@ -86,7 +85,7 @@ export const Chip = <C extends React.ElementType = 'button'>({
     if ((event.key === 'Enter' || event.key === ' ') && asChild === true) {
       event.preventDefault()
       if (onClick) {
-        ; (onClick as React.MouseEventHandler<HTMLElement>)(
+        ;(onClick as React.MouseEventHandler<HTMLElement>)(
           event as unknown as React.MouseEvent<HTMLElement>
         )
       }
@@ -181,9 +180,15 @@ export const Chip = <C extends React.ElementType = 'button'>({
       onKeyDown={handleKeyDown}
       {...restProps}
     >
-      {leadingIcon != null && <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>{leadingIcon}</span>}
+      {leadingIcon != null && (
+        <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>{leadingIcon}</span>
+      )}
       <span className={cx('infonomic-chip-label', styles.label)}>{children}</span>
-      {trailingIcon != null && <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>{trailingIcon}</span>}
+      {trailingIcon != null && (
+        <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>
+          {trailingIcon}
+        </span>
+      )}
     </Comp>
   )
 }

package/src/components/container/container.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .container,
   :global(.infonomic-container) {
     width: 100%;
@@ -18,7 +17,6 @@ infonomic-components;
   /* Shy edges */
   /* Large */
   @media (min-width: 66rem) {
-
     .container,
     :global(.infonomic-container) {
       max-width: 64rem;
@@ -27,7 +25,6 @@ infonomic-components;
 
   /* X-Large */
   @media (min-width: 77rem) {
-
     .container,
     :global(.infonomic-container) {
       max-width: 74.375rem;
@@ -36,10 +33,9 @@ infonomic-components;
 
   /* 2X-Large */
   @media (min-width: 94rem) {
-
     .container,
     :global(.infonomic-container) {
       max-width: 87.5rem;
     }
   }
-}
+}

package/src/components/container/container.tsx

@@ -5,7 +5,7 @@ import cx from 'classnames'
 import styles from './container.module.css'
 
 type ContainerIntrinsicProps = React.JSX.IntrinsicElements['div']
-export interface ContainerProps extends ContainerIntrinsicProps { }
+export interface ContainerProps extends ContainerIntrinsicProps {}
 
 export const Container = function Container({
   ref,

package/src/components/dropdown/dropdown.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .dropdown-content,
   .dropdown-subcontent,
   :global(.infonomic-dropdown-content),
@@ -126,4 +125,4 @@ infonomic-components;
       transform: translateX(0);
     }
   }
-}
+}

package/src/components/forms/@types/checkbox.ts

@@ -5,16 +5,46 @@ import type { ReactNode } from 'react'
 import type { Intent as t } from '../../@types/shared.js'
 
 /**
- * This file contains the types and prop-types for Button and IconButton component.
+ * This file contains the types and prop-types for the Checkbox and CheckboxGroup components.
  */
 
 // typescript types
+
+/**
+ * Available visual style variants for the Checkbox component.
+ */
 export const variant = ['outlined', 'filled'] as const
+
+/**
+ * Visual style variant of the checkbox.
+ *
+ * - `outlined` — hollow checkbox with an intent-colored border; fills on check (default)
+ * - `filled`   — always has a tinted background, more prominent in forms
+ *
+ * @default 'outlined'
+ */
 export type Variant = (typeof variant)[number]
 
+/**
+ * Available size tokens for checkboxes.
+ */
 export const size = ['sm', 'md', 'lg'] as const
+
+/**
+ * Visual size of the checkbox.
+ *
+ * - `sm` — small, for dense lists
+ * - `md` — standard size (default)
+ * - `lg` — large, for touch-friendly or prominent forms
+ *
+ * @default 'md'
+ */
 export type Size = (typeof size)[number]
 
+/**
+ * Semantic color intent applied to the checkbox border and checked state.
+ * @default 'primary'
+ */
 export type Intent = 'primary' | t
 export type ClassName = string
 export type Children = ReactNode

package/src/components/forms/@types/input.ts

@@ -5,16 +5,47 @@ import type { ReactNode } from 'react'
 import type { Intent as t } from '../../@types/shared.js'
 
 /**
- * This file contains the types and prop-types for Button and IconButton component.
+ * This file contains the types and prop-types for the Input and related form components.
  */
 
 // typescript types
+
+/**
+ * Available visual style variants for the Input component.
+ */
 export const variant = ['outlined', 'filled', 'underlined'] as const
+
+/**
+ * Visual style variant of the input field.
+ *
+ * - `outlined`   — full border on all sides with a transparent background (default)
+ * - `filled`     — tinted background with only a bottom border
+ * - `underlined` — bottom border only, no background (minimal style)
+ *
+ * @default 'outlined'
+ */
 export type Variant = (typeof variant)[number]
 
+/**
+ * Available size tokens for form inputs.
+ */
 export const size = ['sm', 'md', 'lg'] as const
+
+/**
+ * Visual size of the input field.
+ *
+ * - `sm` — compact, suitable for inline forms or dense layouts
+ * - `md` — standard form size (default)
+ * - `lg` — large, prominent or hero input
+ *
+ * @default 'md'
+ */
 export type Size = (typeof size)[number]
 
+/**
+ * Semantic color intent applied to the input border and focus ring.
+ * @default 'primary'
+ */
 export type Intent = 'primary' | t
 export type ClassName = string
 export type Children = ReactNode

package/src/components/forms/calendar.module.css

@@ -1,9 +1,9 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   .day-picker {
@@ -167,19 +167,19 @@ infonomic-components;
   }
 
   /* '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground', */
-  .day>button {
+  .day > button {
     color: var(--foreground);
   }
 
   /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
-  .today>button {
+  .today > button {
     /* background-color: var(--gray-50); */
     border: solid 1px var(--stroke-primary);
     color: var(--foreground);
   }
 
-  .day>button:hover,
-  .day-selected>button {
+  .day > button:hover,
+  .day-selected > button {
     background-color: var(--fill-primary-strong);
     color: white;
   }
@@ -206,12 +206,12 @@ infonomic-components;
     color: var(--foreground);
   }
 
-  .button-range>button {
+  .button-range > button {
     background-color: var(--fill-primary-strong);
     color: white;
   }
 
-  .button-range>button:hover {
+  .button-range > button:hover {
     background-color: var(--fill-primary-strong);
     color: var(--foreground);
   }
@@ -232,8 +232,8 @@ infonomic-components;
     color: var(--foreground);
   }
 
-  .range-middle>button,
-  .range-middle>button:hover {
+  .range-middle > button,
+  .range-middle > button:hover {
     background-color: transparent;
     color: var(--foreground);
   }
@@ -271,4 +271,4 @@ infonomic-components;
       opacity: 0.7;
     }
   }
-}
+}

package/src/components/forms/checkbox-group.tsx

@@ -10,7 +10,7 @@ import { Checkbox } from './checkbox.js'
 export interface CheckboxGroupProps {
   groupName: string
   className?: string
-  checkBoxClasses?: string,
+  checkBoxClasses?: string
   checkBoxes: { id: string; label: string }[]
   defaultValues?: string[]
   controlledValue?: string

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

@@ -63,9 +63,17 @@ infonomic-components;
     width: 20px;
     height: 20px;
     color: var(--checkbox-icon-color);
+    /* Hidden by default — prevents flash on initial render before data-state is applied */
+    opacity: 0;
+    transform: scale(0.8);
+    /* Transition handles the unchecked→unchecked no-op and the checked→unchecked exit.
+       It only fires on state changes, never on initial mount, so no flash. */
+    transition:
+      opacity 0.2s ease-in,
+      transform 0.2s ease-in;
   }
 
-  /* Style for the "checked" state */
+  /* Style for the "checked" state — animation overrides the transition for bouncy entry */
   .indicator[data-state="checked"] .icon,
   :global(.infonomic-checkbox-indicator)[data-state="checked"] :global(.infonomic-checkbox-icon) {
     animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
@@ -73,10 +81,9 @@ infonomic-components;
     transform: scale(1);
   }
 
-  /* Style for the "unchecked" state */
+  /* Style for the "unchecked" state — no animation, let the CSS transition handle the exit */
   .indicator[data-state="unchecked"] .icon,
   :global(.infonomic-checkbox-indicator)[data-state="unchecked"] :global(.infonomic-checkbox-icon) {
-    animation: checkBoxOut 0.2s ease-in;
     opacity: 0;
     transform: scale(0.8);
   }
@@ -91,8 +98,8 @@ infonomic-components;
 
   .checkbox:disabled~.label,
   .checkbox[disabled]~.label,
-  :global(.infonomic-checkbox):disabled~:global(.infonomic-checkbox-label),
-  :global(.infonomic-checkbox)[disabled]~:global(.infonomic-checkbox-label) {
+  :global(.infonomic-checkbox):disabled~ :global(.infonomic-checkbox-label),
+  :global(.infonomic-checkbox)[disabled]~ :global(.infonomic-checkbox-label) {
     pointer-events: none;
   }
 
@@ -270,16 +277,4 @@ infonomic-components;
     }
   }
 
-  /* Define keyframes for the "unchecked" state */
-  @keyframes checkBoxOut {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    to {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-  }
 }

package/src/components/forms/checkbox.tsx

@@ -86,7 +86,10 @@ export const Checkbox = function Checkbox({
         </CheckboxPrimitive.Root>
 
         {label != null && (
-          <LabelPrimitive.Label htmlFor={id} className={cx('infonomic-checkbox-label', styles.label, labelClasses)}>
+          <LabelPrimitive.Label
+            htmlFor={id}
+            className={cx('infonomic-checkbox-label', styles.label, labelClasses)}
+          >
             {label}
           </LabelPrimitive.Label>
         )}

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

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .text,
   :global(.infonomic-error-text) {
     font-size: 0.875rem;
@@ -27,4 +26,4 @@ infonomic-components;
   :global(.infonomic-error-text-lg) {
     font-size: 0.9rem;
   }
-}
+}

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

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .text,
   :global(.infonomic-help-text) {
     font-size: 0.875rem;
@@ -27,4 +26,4 @@ infonomic-components;
   :global(.infonomic-help-text-lg) {
     font-size: 0.9rem;
   }
-}
+}