@keboola/design 1.2.0 → 1.3.0

package/src/components/DropdownMenu/DropdownMenuItem.tsx

@@ -1,9 +1,10 @@
-import type { ComponentProps, ElementRef, PointerEventHandler, Ref } from 'react';
+import type { ComponentProps, ElementRef, PointerEventHandler, ReactNode, Ref } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Root, Slottable } from '@radix-ui/react-slot';
 
+import { Loader2 } from '../../icons';
 import { cn } from '../../utils';
-import type { Icon } from '../Icon';
+import { renderLegacyIcon } from '../../utils/legacyIcon';
 
 import { ItemIcon } from './ItemIcon';
 import { itemVariants } from './styles';
@@ -15,7 +16,12 @@ type Props = ComponentProps<typeof DropdownMenuPrimitive.Item> & {
    * https://github.com/radix-ui/primitives/issues/2193#issuecomment-2758461323
    */
   asModalTrigger?: boolean;
-  icon?: ComponentProps<typeof Icon>['icon'];
+  /**
+   * Pass a Lucide icon node as a leading adornment. Legacy FontAwesome
+   * `"name"` / `[prefix, name]` string values are still accepted during the
+   * C2 deprecation window and rendered via the legacy `<Icon>` wrapper.
+   */
+  icon?: ReactNode;
   isLoading?: boolean;
   iconClassName?: string;
 };
@@ -29,13 +35,13 @@ export const DropdownMenuItem = ({
   onPointerMove,
   children,
   asChild,
-  icon: iconProp,
+  icon,
   iconClassName,
   isLoading = false,
   ...props
 }: Props & { ref?: Ref<ElementRef<'div'>> }) => {
   const Comp = asChild ? Root : 'div';
-  const icon = isLoading ? 'spinner' : iconProp;
+  const adornment = isLoading ? <Loader2 className="tw-animate-spin" /> : renderLegacyIcon(icon);
 
   const handleOnSelect = (event: Event) => {
     // prevents dropdown menu from closing to prevent modal unmounting from dom
@@ -66,7 +72,7 @@ export const DropdownMenuItem = ({
       asChild
     >
       <Comp>
-        {icon && <ItemIcon spin={isLoading} icon={icon} className={iconClassName} />}
+        {adornment && <ItemIcon className={iconClassName}>{adornment}</ItemIcon>}
         <Slottable>{children}</Slottable>
       </Comp>
     </DropdownMenuPrimitive.Item>

package/src/components/DropdownMenu/DropdownMenuItemIndicator.tsx

@@ -3,7 +3,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 
-import { Icon } from '../Icon';
+import { Check, Circle, ToggleRight } from '../../icons';
 
 const variants = cva(
   [
@@ -33,6 +33,9 @@ const variants = cva(
 
           '[&_svg]:tw-size-2',
           '[&_svg]:data-[state=unchecked]:tw-hidden',
+          // Lucide Circle is stroke-only — force fill to match the stroke
+          // (currentColor) so the indicator reads as a solid dot.
+          '[&_svg]:tw-fill-current',
           'group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary',
           'group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500',
         ],
@@ -53,6 +56,9 @@ const variants = cva(
         ],
         switch: [
           'tw-size-5',
+          // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
+          // to the indicator slot so it doesn't overflow.
+          '[&_svg]:tw-size-5',
           'tw-text-neutral-400',
           'data-[state=unchecked]:tw-rotate-180',
           'group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500',
@@ -72,10 +78,10 @@ export const DropdownMenuItemIndicator = ({
   forceMount: forceMountProp,
   ...rest
 }: Props) => {
-  const icon: ComponentProps<typeof Icon>['icon'] = (() => {
-    if (variant === 'switch') return 'toggle-large-on';
-    if (variant === 'radio') return 'circle';
-    return 'check';
+  const IconComp = (() => {
+    if (variant === 'switch') return ToggleRight;
+    if (variant === 'radio') return Circle;
+    return Check;
   })();
 
   const forceMount = (() => {
@@ -92,7 +98,7 @@ export const DropdownMenuItemIndicator = ({
       forceMount={forceMount}
       className={variants({ variant, className })}
     >
-      <Icon icon={icon} />
+      <IconComp />
     </DropdownMenuPrimitive.ItemIndicator>
   );
 };

package/src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx

@@ -1,8 +1,9 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
+import { Loader2 } from '../../../icons';
 import { cn } from '../../../utils';
-import type { Icon } from '../../Icon';
+import { renderLegacyIcon } from '../../../utils/legacyIcon';
 import { DropdownMenuItemIndicator } from '../DropdownMenuItemIndicator';
 import { ItemIcon } from '../ItemIcon';
 import { itemVariants } from '../styles';
@@ -11,7 +12,7 @@ type Props = ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
   closeOnSelect?: boolean;
   indicatorAlign?: 'start' | 'end';
   indicator?: 'radio' | 'check' | 'none';
-  icon?: ComponentProps<typeof Icon>['icon'];
+  icon?: ReactNode;
   iconClassName?: string;
   isLoading?: boolean;
 };
@@ -30,7 +31,9 @@ export const DropdownMenuRadioItem = ({
 }: Props) => {
   const isAtStart = indicatorAlign === 'start';
   const indicatorEle = isLoading ? (
-    <ItemIcon spin icon="spinner" className={iconClassName} />
+    <ItemIcon className={iconClassName}>
+      <Loader2 className="tw-animate-spin" />
+    </ItemIcon>
   ) : (
     <DropdownMenuItemIndicator variant={indicator} />
   );
@@ -56,7 +59,7 @@ export const DropdownMenuRadioItem = ({
       {...props}
     >
       {isAtStart && indicatorEle}
-      {icon && <ItemIcon icon={icon} className={iconClassName} />}
+      {icon && <ItemIcon className={iconClassName}>{renderLegacyIcon(icon)}</ItemIcon>}
       <span className="tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2">{children}</span>
       {!isAtStart && indicatorEle}
     </DropdownMenuPrimitive.RadioItem>

package/src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubTrigger.tsx

@@ -1,8 +1,8 @@
 import type { ComponentProps } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
+import { ChevronRight } from '../../../icons';
 import { cn } from '../../../utils';
-import { Icon } from '../../Icon';
 import { itemVariants } from '../styles';
 
 type Props = ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>;
@@ -11,7 +11,7 @@ export const DropdownMenuSubTrigger = ({ className, children, ...props }: Props)
   return (
     <DropdownMenuPrimitive.SubTrigger className={cn(itemVariants, className)} {...props}>
       {children}
-      <Icon icon="chevron-right" className="tw-ml-auto" />
+      <ChevronRight className="tw-ml-auto tw-size-5" />
     </DropdownMenuPrimitive.SubTrigger>
   );
 };

package/src/components/DropdownMenu/ItemIcon.tsx

@@ -1,22 +1,30 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
 
-type Props = ComponentProps<typeof Icon>;
+type Props = ComponentProps<'span'> & {
+  children: ReactNode;
+};
 
-export const ItemIcon = ({ className, ...props }: Props) => (
-  <Icon
+export const ItemIcon = ({ className, children, ...props }: Props) => (
+  <span
     {...props}
     className={cn(
+      'tw-inline-flex',
+      'tw-items-center',
+      'tw-justify-center',
       'tw-aspect-square',
-      'tw-p-0.5',
-      'tw-size-4',
+      // 20px container fits the 16px Lucide glyph plus 2px breathing room
+      // each side — the previous tw-size-4 + tw-p-0.5 clipped the 16px child.
+      'tw-size-5',
+      '[&_svg]:tw-size-4',
       'group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400',
       'group-data-[variant=argo]/dropdown-menu-content:tw-text-primary',
       'group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground',
       'group-data-[variant=default]/dropdown-menu-content:group-hover:tw-text-secondary-500',
       className,
     )}
-  />
+  >
+    {children}
+  </span>
 );

package/src/components/FormGroup/FormGroup.tsx

@@ -10,12 +10,27 @@ import { FormGroupTextarea } from './FormGroupTextarea';
 import { FormGroupTextInput } from './FormGroupTextInput';
 import type { FormGroupContext } from './types';
 
+/**
+ * Props for `FormGroup`. `state` from `FormGroupContext` ("default" | "error") propagates to nested inputs
+ * and help text via context.
+ */
 type FormGroupProps = {
   children: ReactNode;
   className?: string;
   testId?: string;
 } & FormGroupContext;
 
+/**
+ * Label + input + help-text grouping with shared validation state. Provides the chrome for a single field.
+ *
+ * **When to use:** rendering a label + bare input + help/error text outside `useAppForm` (e.g. one-off
+ * filter fields, settings panes). The `state="error"` flips both `FormGroup.TextInput` and `FormGroup.Help`
+ * to error styling without per-component wiring.
+ * **When NOT to use:** for a full form with validation and submit state, use `useAppForm` from `blocks/Form` —
+ * it composes `FormGroup` internally via the typed field connectors.
+ * **Composition:** nest a `Label`, then one of `FormGroup.TextInput` / `FormGroup.NumberInput` /
+ * `FormGroup.ColorInput` / `FormGroup.Textarea`, optionally followed by `FormGroup.Help`.
+ */
 export const FormGroup = ({ className, children, state, testId }: FormGroupProps) => {
   return (
     <FormGroupProvider value={{ state }}>

package/src/components/FullScreenModal/FullScreenModalHeader.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 
+import { ChevronLeft } from '../../icons';
 import { cn } from '../../utils';
 import { Button } from '../Button';
 import { Truncated } from '../Truncated';
@@ -48,7 +49,9 @@ export const FullScreenModalHeader = ({
     >
       <div className={cn('tw-flex tw-flex-1 tw-items-center', titleWrapperClassName)}>
         {previousTitle && onClose && (
-          <Button icon="angle-left" onClick={onClose} size="icon" className="tw-mr-6" />
+          <Button onClick={onClose} size="icon" className="tw-mr-6">
+            <ChevronLeft className="tw-size-4" />
+          </Button>
         )}
 
         <div className="tw-w-full">

package/src/components/Input/DateInput/DateInput.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
 import type { Matcher } from 'react-day-picker';
 
+import { Calendar as CalendarIcon } from '../../../icons';
 import { Button } from '../../Button';
 import { DatePicker } from '../../DatePicker';
 import { Input } from '../Input';
@@ -130,7 +131,9 @@ export const DateInput = ({
             selected={currentValue ?? undefined}
             startMonth={startMonth}
           >
-            <Button aria-label="Select Date" icon="calendar" variant="inline" size="icon-3xs" />
+            <Button aria-label="Select Date" variant="inline" size="icon-3xs">
+              <CalendarIcon className="tw-size-4" />
+            </Button>
           </DatePicker>
         ) : undefined
       }

package/src/components/Input/DateRangeInput/DateRangeInput.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
 import type { DateRange } from 'react-day-picker';
 
+import { Calendar as CalendarIcon } from '../../../icons';
 import { Button } from '../../Button';
 import { DatePicker } from '../../DatePicker';
 import { Input } from '../Input';
@@ -126,12 +127,9 @@ export const DateRangeInput = ({
             startMonth={startMonth}
             selected={currentValue ?? undefined}
           >
-            <Button
-              aria-label="Select Date Range"
-              icon="calendar"
-              variant="inline"
-              size="icon-3xs"
-            />
+            <Button aria-label="Select Date Range" variant="inline" size="icon-3xs">
+              <CalendarIcon className="tw-size-4" />
+            </Button>
           </DatePicker>
         ) : undefined
       }

package/src/components/Input/Input.tsx

@@ -9,6 +9,7 @@ import type {
   Ref,
 } from 'react';
 
+import { X } from '../../icons';
 import { cn, createChangeInputEvent, mergeRefs } from '../../utils';
 import { InputGroup } from '../InputGroup/InputGroup';
 
@@ -31,10 +32,23 @@ type OwnProps = {
   defaultValue?: ComponentProps<'input'>['defaultValue'] | null;
 };
 
+/**
+ * Props for `Input`. Combines `InputGroup` chrome (variant / sizing / state / focusVariant) with
+ * input-specific slots (`prefix`, `leftSuffix`, `rightSuffix`, `allowClear`).
+ */
 type Props = InputGroupProps &
   OwnProps &
   Omit<ComponentProps<'input'>, 'prefix' | 'value' | 'defaultValue'>;
 
+/**
+ * Low-level text input with `InputGroup` chrome — addons, clear button, sizing, focus variants.
+ *
+ * **When to use:** when you need an input with prefix / suffix slots or a clear button and don't need the
+ * `onValueChange` convenience callback. Rare on its own — most call sites should use `TextInput`.
+ * **When NOT to use:** for plain text fields use `TextInput`; for fields inside a `FormGroup` use
+ * `FormGroup.TextInput`; for search use `SearchInput`; for forms with validation use `useAppForm`.
+ * **Composition:** wrap in `FormGroup` for shared error state, or render directly as a controlled input.
+ */
 export const Input = ({
   ref: forwardedRef,
   state = 'default',
@@ -124,11 +138,13 @@ export const Input = ({
           {leftSuffix}
           {allowClear && isClearButtonVisible && (
             <InputGroup.Button
-              icon="xmark"
+              aria-label="Clear"
               onMouseDown={(e) => e.preventDefault()}
               onClick={handleClear}
               data-testid={testId.clearButton}
-            />
+            >
+              <X className="tw-size-4" />
+            </InputGroup.Button>
           )}
           {rightSuffix && (
             <div

package/src/components/Input/TextInput/TextInput.tsx

@@ -10,11 +10,17 @@ type NativeProps = Omit<
 type OwnProps = {
   value?: string | null;
   defaultValue?: string | null;
+  /** Called with the unwrapped string value on every change. For the raw event use `onChange`. */
   onValueChange?: (value: string) => void;
+  /** Called with the unwrapped string value on blur. For the raw event use `onBlur`. */
   onValueBlur?: (value: string) => void;
   type?: 'text' | 'email' | 'password' | 'datetime-local' | 'date';
 };
 
+/**
+ * Props for `TextInput`. Extends `Input` with string-typed `value` / `defaultValue` and convenience
+ * `onValueChange` / `onValueBlur` callbacks. `null` / `undefined` are coerced to empty strings.
+ */
 export type Props = OwnProps & NativeProps;
 
 const sanitizeTextInputValue = (value: string | null | undefined) => {
@@ -22,6 +28,16 @@ const sanitizeTextInputValue = (value: string | null | undefined) => {
   return value;
 };
 
+/**
+ * Standard text input with a string-only API. The default choice for a bare text input.
+ *
+ * **When to use:** any plain text / email / password / date-input field outside `useAppForm`. Pair with
+ * `onValueChange` instead of unwrapping `event.target.value` from `onChange`.
+ * **When NOT to use:** for fields inside a labelled group use `FormGroup.TextInput`; for forms with
+ * validation use `useAppForm` + `field.TextField`; for search use `SearchInput`.
+ * **Composition:** wrap in a `FormGroup` for shared error / help-text state, or render directly inside
+ * page layouts. In kbc-ui forms prefer `variant="secondary"` (gray background).
+ */
 export const TextInput = ({
   ref,
   value,

package/src/components/Input/TimeInput/TimeInput.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
 
+import { Clock } from '../../../icons';
 import { cn } from '../../../utils';
 import { Button } from '../../Button';
 import { TimePicker } from '../../TimePicker';
@@ -94,7 +95,9 @@ export const TimeInput = ({
             onSelect={handleTimePickerSelect}
             selected={currentValue}
           >
-            <Button aria-label="Select Time" icon="clock" variant="inline" size="icon-3xs" />
+            <Button aria-label="Select Time" variant="inline" size="icon-3xs">
+              <Clock className="tw-size-4" />
+            </Button>
           </TimePicker>
         ) : undefined
       }

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -1,6 +1,8 @@
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { Upload, X } from '@keboola/design/icons';
+
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon';
 
@@ -69,7 +71,9 @@ export const WithButton: Story = {
     <InputGroup {...args}>
       <InputGroup.Input placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
       <InputGroup.Addon align="inline-end">
-        <InputGroup.Button icon="xmark" aria-label="Clear" />
+        <InputGroup.Button aria-label="Clear">
+          <X className="tw-size-4" />
+        </InputGroup.Button>
       </InputGroup.Addon>
     </InputGroup>
   ),
@@ -139,7 +143,9 @@ export const BlockStartAddon: Story = {
             <Icon icon="copy" />
             script.js
           </InputGroup.Text>
-          <InputGroup.Button icon="upload" aria-label="Send" />
+          <InputGroup.Button aria-label="Send">
+            <Upload className="tw-size-4" />
+          </InputGroup.Button>
         </InputGroup.Addon>
 
         <InputGroup.TextArea placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
@@ -187,7 +193,9 @@ export const BothBlockAddon: Story = {
           <Icon icon="copy" />
           script.js
         </InputGroup.Text>
-        <InputGroup.Button icon="upload" aria-label="Send" />
+        <InputGroup.Button aria-label="Send">
+          <Upload className="tw-size-4" />
+        </InputGroup.Button>
       </InputGroup.Addon>
 
       <InputGroup.TextArea

package/src/components/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -98,7 +98,6 @@ const ControlledDemo = () => {
         onChange={setValue}
         placeholder="Type something…"
         onSave={() => alert('Saved!')}
-        onCancel={() => alert('Cancelled!')}
         onImageUpload={mockImageUpload}
         showToolbar
         autoFocus
@@ -118,3 +117,66 @@ const ControlledDemo = () => {
 export const Controlled: Story = {
   render: ControlledDemo,
 };
+
+const InlineDemo = () => {
+  // Two-state pattern (per the inline-editable-text pattern spec):
+  // `committed` is what's persisted; `draft` tracks in-progress edits.
+  // onSave commits draft → committed. onCancel (Esc) reverts draft ← committed.
+  const [committed, setCommitted] = useState(
+    'A multi-line description that overflows two lines so you can see the bottom fade in display state. Click to edit — it expands to full height. Press Esc to revert.',
+  );
+  const [draft, setDraft] = useState(committed);
+
+  return (
+    <div className="tw-max-w-prose tw-rounded tw-border tw-border-border tw-bg-background tw-p-6">
+      <p className="tw-mb-2 tw-text-sm tw-text-muted-foreground">
+        Click to edit. Blur or Cmd+Enter commits; Esc reverts. Committed:{' '}
+        <code className="tw-text-xs">{committed}</code>
+      </p>
+      <MarkdownEditor
+        compact
+        saveOnBlur
+        clampDisplay
+        value={draft}
+        onChange={setDraft}
+        onSave={() => setCommitted(draft)}
+        onCancel={() => setDraft(committed)}
+        placeholder="Add a description…"
+        className="tw-text-sm tw-leading-5 tw-text-foreground"
+      />
+    </div>
+  );
+};
+
+export const Inline: Story = {
+  render: InlineDemo,
+};
+
+const InlineTitleDemo = () => {
+  const [committed, setCommitted] = useState('Untitled page');
+  const [draft, setDraft] = useState(committed);
+
+  return (
+    <div className="tw-max-w-prose tw-rounded tw-border tw-border-border tw-bg-background tw-p-6">
+      <p className="tw-mb-2 tw-text-sm tw-text-muted-foreground">
+        Click the heading. Enter, blur, or Cmd+Enter commits; Esc reverts. Committed:{' '}
+        <code className="tw-text-xs">{committed}</code>
+      </p>
+      <MarkdownEditor
+        compact
+        singleLine
+        saveOnBlur
+        value={draft}
+        onChange={setDraft}
+        onSave={() => setCommitted(draft)}
+        onCancel={() => setDraft(committed)}
+        placeholder="Untitled"
+        className="tw-break-words tw-text-3xl tw-font-semibold tw-leading-9 tw-text-foreground"
+      />
+    </div>
+  );
+};
+
+export const InlineTitle: Story = {
+  render: InlineTitleDemo,
+};