@infonomic/uikit 5.41.0 → 5.43.0

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);
   }
-}
+}

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

@@ -1,13 +1,12 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  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,
   :global(.infonomic-radio-group-column) {
     display: flex;
@@ -183,4 +182,4 @@ infonomic-components;
       transform: scale(0.8);
     }
   }
-}
+}

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

@@ -23,6 +23,26 @@ infonomic-components;
     padding: 6px;
   }
 
+  .viewport-xs {
+    padding: 4px;
+  }
+
+  .viewport-sm {
+    padding: 4px;
+  }
+
+  .viewport-md {
+    padding: 6px;
+  }
+
+  .viewport-lg {
+    padding: 6px;
+  }
+
+  .viewport-xl {
+    padding: 8px;
+  }
+
   .group,
   :global(.infonomic-select-group) {
     z-index: 50;
@@ -49,8 +69,8 @@ infonomic-components;
     background-color: var(--surface-item);
     font-size: 1rem;
     line-height: 1;
-    padding-right: 35px;
-    padding-left: 25px;
+    padding-right: 32px;
+    padding-left: 24px;
     height: 32px;
     display: flex;
     align-items: center;
@@ -74,9 +94,60 @@ infonomic-components;
   :global(.infonomic-select-item-indicator) {
     position: absolute;
     left: 0;
-    width: 25px;
+    width: 24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
+
+  /* size variants — treat current values as 'md' */
+  .viewport-xs .select-item {
+    font-size: 0.75rem;
+    height: 24px;
+    padding-right: 28px;
+    padding-left: 20px;
+    border-radius: 4px;
+  }
+
+  .viewport-xs .select-item-indicator {
+    width: 20px;
+  }
+
+  .viewport-sm .select-item {
+    font-size: 0.875rem;
+    height: 28px;
+    padding-right: 30px;
+    padding-left: 22px;
+    border-radius: 5px;
+  }
+
+  .viewport-sm .select-item-indicator {
+    width: 22px;
+  }
+
+  /* .viewport-md — inherits base .select-item values */
+
+  .viewport-lg .select-item {
+    font-size: 1.125rem;
+    height: 34px;
+    padding-right: 32px;
+    padding-left: 24px;
+    border-radius: 6px;
+  }
+
+  .viewport-lg .select-item-indicator {
+    width: 24px;
+  }
+
+  .viewport-xl .select-item {
+    font-size: 1.25rem;
+    height: 40px;
+    padding-right: 36px;
+    padding-left: 28px;
+    border-radius: 8px;
+  }
+
+  .viewport-xl .select-item-indicator {
+    width: 28px;
+  }
 }

package/src/components/forms/select.stories.tsx

@@ -19,14 +19,52 @@ const values: SelectValue[] = [
 
 export const Default = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
-      <Select placeholder="Select one..." helpText="Select an item.">
-        {values.map((value) => (
-          <SelectItem key={value.value} value={value.value}>
-            {value.label}
-          </SelectItem>
-        ))}
-      </Select>
-    </div>
+    <>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select size="xl" placeholder="Select one..." helpText="Extra Large select.">
+          {values.map((value) => (
+            <SelectItem key={value.value} value={value.value}>
+              {value.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select size="lg" placeholder="Select one..." helpText="Large select.">
+          {values.map((value) => (
+            <SelectItem key={value.value} value={value.value}>
+              {value.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select size="md" placeholder="Select one..." helpText="Medium select.">
+          {values.map((value) => (
+            <SelectItem key={value.value} value={value.value}>
+              {value.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select size="sm" placeholder="Select one..." helpText="Small select.">
+          {values.map((value) => (
+            <SelectItem key={value.value} value={value.value}>
+              {value.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select size="xs" placeholder="Select one..." helpText="Extra small select.">
+          {values.map((value) => (
+            <SelectItem key={value.value} value={value.value}>
+              {value.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+    </>
   )
 }

package/src/components/forms/select.tsx

@@ -77,7 +77,7 @@ export function Select({
             <SelectPrimitive.ScrollUpButton className={styles['scroll-button']}>
               <ChevronUpIcon />
             </SelectPrimitive.ScrollUpButton>
-            <SelectPrimitive.Viewport className={styles.viewport}>
+            <SelectPrimitive.Viewport className={cx(styles.viewport, size != null && styles[`viewport-${size}`])}>
               <SelectPrimitive.Group className={styles.group}>{children}</SelectPrimitive.Group>
             </SelectPrimitive.Viewport>
             <SelectPrimitive.ScrollDownButton className={styles['scroll-button']}>
@@ -106,7 +106,9 @@ export const SelectItem = ({
       ref={forwardedRef}
     >
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-      <SelectPrimitive.ItemIndicator className={cx('infonomic-select-item-indicator', styles['select-item-indicator'])}>
+      <SelectPrimitive.ItemIndicator
+        className={cx('infonomic-select-item-indicator', styles['select-item-indicator'])}
+      >
         <CheckIcon />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>

package/src/components/forms/text-area.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-area,
   :global(.infonomic-text-area) {
     font-size: 1rem;
@@ -20,7 +19,9 @@ infonomic-components;
     padding-right: 0;
   }
 
-  .outlined {}
+  .outlined {
+  }
 
-  .filled {}
-}
+  .filled {
+  }
+}

package/src/components/notifications/@types/alert.ts

@@ -2,8 +2,24 @@
 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 Alert component.
  */
 
 // typescript types
+
+/**
+ * Semantic color intent of the alert.
+ *
+ * Controls the alert's background color, left border accent, icon, and text.
+ *
+ * - `primary`   — informational blue-tinted alert (default)
+ * - `secondary` — alternate neutral style
+ * - `noeffect`  — gray, no color emphasis
+ * - `success`   — positive confirmation (green)
+ * - `info`      — informational, non-critical (cyan/blue)
+ * - `warning`   — caution, needs attention (yellow/amber)
+ * - `danger`    — error or destructive state (red)
+ *
+ * @default 'primary'
+ */
 export type Intent = 'primary' | t

package/src/components/notifications/@types/toast.ts

@@ -2,11 +2,50 @@
 import type { Icons as i, Position as p, Intent as t } from '../../@types/shared.js'
 
 /**
- * This file contains the types and prop-types for Toast component.
+ * This file contains the types and prop-types for the Toast component.
  */
 
 // typescript types
+
+/**
+ * Semantic color intent of the toast notification.
+ *
+ * Controls the toast's background color, icon, and text style.
+ *
+ * - `primary`   — standard informational toast (default)
+ * - `secondary` — alternate neutral style
+ * - `noeffect`  — gray, no color emphasis
+ * - `success`   — positive confirmation (green)
+ * - `info`      — informational, non-critical (cyan/blue)
+ * - `warning`   — caution, needs attention (yellow/amber)
+ * - `danger`    — error or destructive state (red)
+ *
+ * @default 'primary'
+ */
 export type Intent = 'primary' | t
+
+/**
+ * Screen corner position for the toast container.
+ *
+ * - `top-left`     — top-left corner of the viewport
+ * - `top-right`    — top-right corner of the viewport (default)
+ * - `bottom-left`  — bottom-left corner of the viewport
+ * - `bottom-right` — bottom-right corner of the viewport
+ *
+ * @default 'top-right'
+ */
 export type Position = 'top-right' | p
+
+/**
+ * Icon variant displayed inside the toast.
+ * Maps to the corresponding status icon component.
+ */
 export type IconType = 'success' | i
+
+/**
+ * Callback fired when the toast's open/visible state changes.
+ * Use this to sync dismissal with external state.
+ *
+ * @param open - `true` when the toast becomes visible, `false` when dismissed
+ */
 export type OnOpenChange = (open: boolean) => void

package/src/components/notifications/alert.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 {
-
   .alert,
   :global(.infonomic-alert) {
     display: flex;
@@ -134,4 +133,4 @@ infonomic-components;
     --alert-border: var(--stroke-danger);
     --alert-background: var(--fill-danger-weak);
   }
-}
+}

package/src/components/notifications/alert.tsx

@@ -65,9 +65,16 @@ export const Alert = function Alert({
   return (
     <div
       ref={ref}
-      className={cx('infonomic-alert', `infonomic-alert-${intent}`, styles.alert, styles[intent], className, {
-        [styles.fade]: fade,
-      })}
+      className={cx(
+        'infonomic-alert',
+        `infonomic-alert-${intent}`,
+        styles.alert,
+        styles[intent],
+        className,
+        {
+          [styles.fade]: fade,
+        }
+      )}
       {...rest}
     >
       {title != null ? (

package/src/components/notifications/toast.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 {
   /* Positions are relative to the toast viewport which is set 
@@ -27,7 +27,6 @@ infonomic-components;
 
   :global(.dark),
   :global([data-theme="dark"]) {
-
     .root,
     :global(.infonomic-toast-root) {
       background: var(--canvas-800);
@@ -156,7 +155,6 @@ infonomic-components;
   }
 
   @media (min-width: 48rem) {
-
     .root.top-right[data-state="open"],
     .root.bottom-right[data-state="open"],
     :global(.infonomic-toast-root.top-right[data-state="open"]),
@@ -269,4 +267,4 @@ infonomic-components;
       opacity: 0;
     }
   }
-}
+}

package/src/components/overlay/overlay.module.css

@@ -1,7 +1,10 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .overlay,
   :global(.infonomic-overlay) {
     position: fixed;
@@ -15,7 +18,6 @@
 
   :global(.dark),
   :global([data-theme="dark"]) {
-
     .overlay,
     :global(.infonomic-overlay) {
       background-color: rgba(0, 0, 0, 0.5);
@@ -51,4 +53,4 @@
       opacity: 0;
     }
   }
-}
+}

package/src/components/pager/@types/index.ts

@@ -1,2 +1,15 @@
+/**
+ * Available layout variants for the Pagination component.
+ */
 export const variant = ['default', 'classic', 'dashboard'] as const
+
+/**
+ * Layout variant of the pagination control.
+ *
+ * - `default`   — numbered page buttons with previous/next arrows (default)
+ * - `classic`   — previous/next arrows with a direct page number input
+ * - `dashboard` — compact variant optimised for data tables and dashboards
+ *
+ * @default 'default'
+ */
 export type Variant = (typeof variant)[number]

package/src/components/pager/pagination.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 {
-
   .pagination-root,
   :global(.infonomic-pagination-root) {
     display: flex;
@@ -141,7 +140,6 @@ infonomic-components;
   */
   :global(.dark),
   :global([data-theme="dark"]) {
-
     .ellipses,
     .number-button,
     .next-button,
@@ -151,4 +149,4 @@ infonomic-components;
       border-color: var(--canvas-700);
     }
   }
-}
+}

package/src/components/pager/pagination.tsx

@@ -237,7 +237,12 @@ const Root = ({
     <nav
       data-testid={dataTestId}
       ref={ref}
-      className={cx('infonomic-pagination-root', styles['pagination-root'], 'pagination-root', className)}
+      className={cx(
+        'infonomic-pagination-root',
+        styles['pagination-root'],
+        'pagination-root',
+        className
+      )}
       {...rest}
       aria-label={ariaLabel ?? 'Pager navigation'}
     >

package/src/components/scroll-area/scroll-area.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 {
-
   .root,
   :global(.infonomic-scroll-area) {
     border-radius: 4px;
@@ -72,4 +71,4 @@ infonomic-components;
   :global(.infonomic-scroll-area-corner) {
     background: var(--surface-panel-scrollbar);
   }
-}
+}

package/src/components/scroll-area/scroll-area.tsx

@@ -5,17 +5,26 @@ import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui'
 
 import styles from './scroll-area.module.css'
 
-interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> { }
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {}
 
 export const ScrollArea = ({ children, style, className }: ScrollAreaProps) => (
-  <ScrollAreaPrimitive.Root style={style} className={cx('infonomic-scroll-area', styles.root, className)}>
+  <ScrollAreaPrimitive.Root
+    style={style}
+    className={cx('infonomic-scroll-area', styles.root, className)}
+  >
     <ScrollAreaPrimitive.Viewport className={cx('infonomic-scroll-area-viewport', styles.viewport)}>
       {children}
     </ScrollAreaPrimitive.Viewport>
-    <ScrollAreaPrimitive.Scrollbar className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)} orientation="vertical">
+    <ScrollAreaPrimitive.Scrollbar
+      className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)}
+      orientation="vertical"
+    >
       <ScrollAreaPrimitive.Thumb className={cx('infonomic-scroll-area-thumb', styles.thumb)} />
     </ScrollAreaPrimitive.Scrollbar>
-    <ScrollAreaPrimitive.Scrollbar className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)} orientation="horizontal">
+    <ScrollAreaPrimitive.Scrollbar
+      className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)}
+      orientation="horizontal"
+    >
       <ScrollAreaPrimitive.Thumb className={cx('infonomic-scroll-area-thumb', styles.thumb)} />
     </ScrollAreaPrimitive.Scrollbar>
     <ScrollAreaPrimitive.Corner className={cx('infonomic-scroll-area-corner', styles.corner)} />