@infonomic/uikit 5.40.0 → 5.42.0

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

@@ -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-checkbox-container) {
     width: 100%;
@@ -89,10 +88,10 @@ infonomic-components;
     color: var(--label-color);
   }
 
-  .checkbox:disabled~.label,
-  .checkbox[disabled]~.label,
-  :global(.infonomic-checkbox):disabled~:global(.infonomic-checkbox-label),
-  :global(.infonomic-checkbox)[disabled]~:global(.infonomic-checkbox-label) {
+  .checkbox:disabled ~ .label,
+  .checkbox[disabled] ~ .label,
+  :global(.infonomic-checkbox):disabled ~ :global(.infonomic-checkbox-label),
+  :global(.infonomic-checkbox)[disabled] ~ :global(.infonomic-checkbox-label) {
     pointer-events: none;
   }
 
@@ -116,8 +115,8 @@ infonomic-components;
     height: 16px;
   }
 
-  .sm~.label,
-  :global(.infonomic-checkbox-sm)~ :global(.infonomic-checkbox-label) {
+  .sm ~ .label,
+  :global(.infonomic-checkbox-sm) ~ :global(.infonomic-checkbox-label) {
     font-size: 0.85rem;
   }
 
@@ -133,8 +132,8 @@ infonomic-components;
     height: 18px;
   }
 
-  .md~.label,
-  :global(.infonomic-checkbox-md)~ :global(.infonomic-checkbox-label) {
+  .md ~ .label,
+  :global(.infonomic-checkbox-md) ~ :global(.infonomic-checkbox-label) {
     font-size: 0.875rem;
   }
 
@@ -150,8 +149,8 @@ infonomic-components;
     height: 22px;
   }
 
-  .lg~.label,
-  :global(.infonomic-checkbox-lg)~ :global(.infonomic-checkbox-label) {
+  .lg ~ .label,
+  :global(.infonomic-checkbox-lg) ~ :global(.infonomic-checkbox-label) {
     font-size: 1rem;
   }
 
@@ -282,4 +281,4 @@ infonomic-components;
       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;
   }
-}
+}

package/src/components/forms/help-text.tsx

@@ -11,5 +11,9 @@ interface HelpTextProps {
 }
 
 export function HelpText({ className, size, text }: HelpTextProps): React.JSX.Element {
-  return <p className={cx('infonomic-help-text', styles.text, size && styles[size], className)}>{text}</p>
+  return (
+    <p className={cx('infonomic-help-text', styles.text, size && styles[size], className)}>
+      {text}
+    </p>
+  )
 }

package/src/components/forms/input-adornment.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 {
-
   .adornment,
   :global(.infonomic-input-adornment) {
     display: flex;
@@ -24,4 +23,4 @@ infonomic-components;
   :global(.infonomic-input-adornment-end) {
     justify-content: flex-end;
   }
-}
+}

package/src/components/forms/input-password.tsx

@@ -11,7 +11,13 @@ export function InputPassword({ ...props }: InputProps) {
   return (
     <Input
       type={visible ? 'text' : 'password'}
-      endAdornment={visible ? <EyeOpenIcon width="18px" height="18px" onClick={() => setVisible(!visible)} /> : <EyeClosedIcon width="18px" height="18px" onClick={() => setVisible(!visible)} />}
+      endAdornment={
+        visible ? (
+          <EyeOpenIcon width="18px" height="18px" onClick={() => setVisible(!visible)} />
+        ) : (
+          <EyeClosedIcon width="18px" height="18px" onClick={() => setVisible(!visible)} />
+        )
+      }
       {...props}
     />
   )

package/src/components/forms/input.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 {
-
   .input-wrapper,
   :global(.infonomic-input-wrapper) {
     display: flex;
@@ -282,4 +281,4 @@ infonomic-components;
   }
 
   /* Dark mode handled by semantic tokens in theme layer */
-}
+}

package/src/components/forms/input.tsx

@@ -58,7 +58,15 @@ export const Input = <_C extends React.ElementType = 'input'>({
       {label != null && <Label id={id} htmlFor={id} required={required} label={label} />}
       <div className={cx('infonomic-input-container', styles['input-container'])}>
         {startAdornment != null && (
-          <div className={cx('infonomic-input-start-adornment', styles['start-adornment'], styles[variant])}>{startAdornment}</div>
+          <div
+            className={cx(
+              'infonomic-input-start-adornment',
+              styles['start-adornment'],
+              styles[variant]
+            )}
+          >
+            {startAdornment}
+          </div>
         )}
         <input
           ref={ref}
@@ -90,7 +98,15 @@ export const Input = <_C extends React.ElementType = 'input'>({
           {...rest}
         />
         {endAdornment != null && (
-          <div className={cx('infonomic-input-end-adornment', styles['end-adornment'], styles[variant])}>{endAdornment}</div>
+          <div
+            className={cx(
+              'infonomic-input-end-adornment',
+              styles['end-adornment'],
+              styles[variant]
+            )}
+          >
+            {endAdornment}
+          </div>
         )}
       </div>
       {error ? (

package/src/components/forms/label.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 {
-
   .label,
   :global(.infonomic-label) {
     display: block;
@@ -18,4 +17,4 @@ infonomic-components;
   :global(.infonomic-label-required) {
     color: var(--error);
   }
-}
+}