@keboola/design 1.3.1 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "1.3.1",
+  "version": "2.0.1",
   "description": "Keboola UI platform design system — shadcn-aligned React primitives, Keboola-branded blocks, and the form bindings built on TanStack Form.",
   "license": "MIT",
   "type": "module",
@@ -74,21 +74,21 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.15",
     "@vitejs/plugin-react": "^6.0.0",
-    "@vitest/browser": "4.1.2",
+    "@vitest/browser": "4.1.8",
     "@vitest/browser-playwright": "4.1.2",
     "eslint-plugin-storybook": "^10.3.5",
     "oxfmt": "^0.44.0",
     "oxlint": "^1.56.0",
-    "playwright": "1.59.1",
+    "playwright": "1.60.0",
     "storybook": "^10.2.19",
     "tailwindcss": "^3.4.17",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.8",
-    "vitest": "^4.1.2"
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "dependencies": {
-    "@awesome.me/kit-be8bcf7e5e": "1.0.220",
+    "@awesome.me/kit-be8bcf7e5e": "1.0.223",
     "@base-ui/react": "1.5.0",
     "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/commands": "^6.10.3",
@@ -132,6 +132,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-form": "^1.29.1",
     "@testing-library/jest-dom": "^6.8.0",
@@ -143,6 +144,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "diff": "^9.0.0",
+    "input-otp": "^1.4.2",
     "lexical": "^0.42.0",
     "lucide-react": "^1.17.0",
     "mermaid": "^11.15.0",

package/src/blocks/AIKit/PlanApproval.tsx

@@ -2,6 +2,7 @@ import { type FormEvent, type KeyboardEvent, type ReactNode, useState } from 're
 
 import { Badge } from '../../components/Badge';
 import { Button } from '../../components/Button';
+import { Tooltip } from '../../components/Tooltip';
 import { ChevronDown, Send, X } from '../../icons';
 import { cn } from '../../utils';
 import { Textarea } from '../Textarea';
@@ -23,6 +24,7 @@ type PlanApprovalProps = {
   onRequestChanges?: (reason: string) => void;
   onClose?: () => void;
   isSubmitting?: boolean;
+  approveTooltip?: ReactNode;
 
   pendingPillLabel?: string;
   approvedPillLabel?: string;
@@ -123,6 +125,7 @@ export const PlanApproval = ({
   onRequestChanges,
   onClose,
   isSubmitting = false,
+  approveTooltip,
 
   pendingPillLabel = 'Ready for approval',
   approvedPillLabel = 'Approved',
@@ -324,18 +327,32 @@ export const PlanApproval = ({
                 </Button>
               )
             )}
-            {onApprove && (
-              <Button
-                argo
-                variant="primary"
-                size="small"
-                onClick={onApprove}
-                disabled={isSubmitting || isRequestingChanges}
-                data-testid="plan-approve-button"
-              >
-                {approveLabel}
-              </Button>
-            )}
+            {onApprove &&
+              (approveTooltip ? (
+                <Tooltip tooltip={approveTooltip} placement="top" triggerAsChild>
+                  <Button
+                    argo
+                    variant="primary"
+                    size="small"
+                    onClick={onApprove}
+                    disabled={isSubmitting || isRequestingChanges}
+                    data-testid="plan-approve-button"
+                  >
+                    {approveLabel}
+                  </Button>
+                </Tooltip>
+              ) : (
+                <Button
+                  argo
+                  variant="primary"
+                  size="small"
+                  onClick={onApprove}
+                  disabled={isSubmitting || isRequestingChanges}
+                  data-testid="plan-approve-button"
+                >
+                  {approveLabel}
+                </Button>
+              ))}
           </div>
         )}
       </div>

package/src/blocks/AIKit/PromptInput.test.tsx

@@ -0,0 +1,53 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { PromptInput } from './PromptInput';
+
+describe('<PromptInput />', () => {
+  it('does not call onAbort when Enter is pressed during streaming', () => {
+    const onAbort = vi.fn();
+    const onSend = vi.fn();
+
+    render(<PromptInput status="streaming" value="hello" onSend={onSend} onAbort={onAbort} />);
+
+    const textarea = screen.getByRole('textbox');
+    fireEvent.keyDown(textarea, { key: 'Enter' });
+
+    expect(onAbort).not.toHaveBeenCalled();
+    expect(onSend).not.toHaveBeenCalled();
+  });
+
+  it('calls onAbort when the stop button is clicked during streaming', () => {
+    const onAbort = vi.fn();
+
+    render(<PromptInput status="streaming" value="" onAbort={onAbort} />);
+
+    const form = screen.getByTestId('prompt-input');
+    const button = form.querySelector('button[type="submit"]')!;
+    fireEvent.click(button);
+
+    expect(onAbort).toHaveBeenCalledOnce();
+  });
+
+  it('calls onSend when Enter is pressed in ready state', () => {
+    const onSend = vi.fn();
+
+    render(<PromptInput status="ready" value="hello" onSend={onSend} />);
+
+    const textarea = screen.getByRole('textbox');
+    fireEvent.keyDown(textarea, { key: 'Enter' });
+
+    expect(onSend).toHaveBeenCalledWith('hello');
+  });
+
+  it('calls onContinue when Enter is pressed in interrupted state', () => {
+    const onContinue = vi.fn();
+
+    render(<PromptInput status="interrupted" value="" onContinue={onContinue} />);
+
+    const textarea = screen.getByRole('textbox');
+    fireEvent.keyDown(textarea, { key: 'Enter' });
+
+    expect(onContinue).toHaveBeenCalledOnce();
+  });
+});

package/src/blocks/AIKit/PromptInput.tsx

@@ -138,7 +138,7 @@ export const PromptInput = ({
   const handleOnKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
     if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
       event.preventDefault();
-      handleSubmit();
+      if (status !== 'streaming') handleSubmit();
     }
   };
 

package/src/blocks/AIKit/Question.tsx

@@ -4,6 +4,7 @@ import { Button } from '../../components/Button';
 import { Checkbox } from '../../components/Checkbox';
 import { TextInput } from '../../components/Input';
 import { Progress } from '../../components/Progress';
+import { Tooltip } from '../../components/Tooltip';
 import { ChevronLeft, ChevronRight, X } from '../../icons';
 import { cn } from '../../utils';
 
@@ -23,12 +24,14 @@ type Props = {
   onSelectionChange?: (selectedIds: readonly string[]) => void;
   customAnswer?: string;
   onCustomAnswerChange?: (value: string) => void;
+  onCustomAnswerConfirm?: () => void;
   showCustomAnswer?: boolean;
   customAnswerPlaceholder?: string;
   showSkip?: boolean;
   onSkip?: () => void;
   onClose?: () => void;
   onNext?: () => void;
+  submitTooltip?: ReactNode;
   onPrevious?: () => void;
   currentStep?: number;
   totalSteps?: number;
@@ -52,12 +55,14 @@ export const Question = ({
   onSelectionChange,
   customAnswer = '',
   onCustomAnswerChange,
+  onCustomAnswerConfirm,
   showCustomAnswer = true,
   customAnswerPlaceholder = 'Type your answer…',
   showSkip = true,
   onSkip,
   onClose,
   onNext,
+  submitTooltip,
   onPrevious,
   currentStep,
   totalSteps,
@@ -238,6 +243,16 @@ export const Question = ({
                 value={customAnswer}
                 onValueChange={(value) => onCustomAnswerChange?.(value)}
                 onFocus={handleCustomFocus}
+                onKeyDown={
+                  onCustomAnswerConfirm
+                    ? (e: KeyboardEvent<HTMLInputElement>) => {
+                        if (e.key === 'Enter' && !e.shiftKey && !(e.metaKey || e.ctrlKey)) {
+                          e.preventDefault();
+                          onCustomAnswerConfirm();
+                        }
+                      }
+                    : undefined
+                }
                 placeholder={customAnswerPlaceholder}
                 sizing="small"
                 testId="question-custom"
@@ -302,17 +317,30 @@ export const Question = ({
               Skip
             </Button>
           )}
-          {(multiSelect || isCustomSelected) && (
-            <Button
-              argo
-              variant="primary"
-              size="small"
-              onClick={onNext}
-              data-testid="question-next-button"
-            >
-              {isLastStep ? 'Submit' : 'Next'}
-            </Button>
-          )}
+          {(multiSelect || isCustomSelected) &&
+            (submitTooltip ? (
+              <Tooltip tooltip={submitTooltip} placement="top" triggerAsChild>
+                <Button
+                  argo
+                  variant="primary"
+                  size="small"
+                  onClick={onNext}
+                  data-testid="question-next-button"
+                >
+                  {isLastStep ? 'Submit' : 'Next'}
+                </Button>
+              </Tooltip>
+            ) : (
+              <Button
+                argo
+                variant="primary"
+                size="small"
+                onClick={onNext}
+                data-testid="question-next-button"
+              >
+                {isLastStep ? 'Submit' : 'Next'}
+              </Button>
+            ))}
         </div>
       </div>
     </div>

package/src/blocks/AIKit/SuggestedPrompt.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Icon } from '../../components/Icon';
+import { Play } from '../../icons';
 
 import { SuggestedPrompt } from './SuggestedPrompt';
 
@@ -53,13 +53,7 @@ export const LongLabel: Story = {
 export const WithCustomIcon: Story = {
   args: {
     label: 'Run a transformation',
-    icon: (
-      <Icon
-        className="tw-size-4 tw-shrink-0 tw-basis-4 tw-text-secondary-500"
-        fixedWidth
-        icon="play"
-      />
-    ),
+    icon: <Play className="tw-size-4 tw-shrink-0 tw-basis-4 tw-text-secondary-500" />,
     disabled: false,
   },
 };

package/src/blocks/EmptyState/EmptyState.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../../components/Button';
-import { Icon } from '../../components/Icon';
+import { Bell, List, Search, Table } from '../../icons';
 
 import { EmptyState } from './EmptyState';
 
@@ -24,7 +24,7 @@ export const ListEmpty: Story = {
   render: () => (
     <EmptyState>
       <EmptyState.Icon>
-        <Icon icon="list-ul" />
+        <List />
       </EmptyState.Icon>
       <EmptyState.Title>No items yet</EmptyState.Title>
       <EmptyState.Description>
@@ -42,7 +42,7 @@ export const TableEmpty: Story = {
   render: () => (
     <EmptyState>
       <EmptyState.Icon>
-        <Icon icon="table" />
+        <Table />
       </EmptyState.Icon>
       <EmptyState.Title>No rows found</EmptyState.Title>
       <EmptyState.Description>
@@ -63,7 +63,7 @@ export const SearchNoResults: Story = {
   render: () => (
     <EmptyState>
       <EmptyState.Icon>
-        <Icon icon="search" />
+        <Search />
       </EmptyState.Icon>
       <EmptyState.Title>No results found</EmptyState.Title>
       <EmptyState.Description>
@@ -84,7 +84,7 @@ export const CompactListEmpty: Story = {
   render: () => (
     <EmptyState variant="compact">
       <EmptyState.Icon variant="compact">
-        <Icon icon="bell" />
+        <Bell />
       </EmptyState.Icon>
       <EmptyState.Title variant="compact">No notifications</EmptyState.Title>
       <EmptyState.Description variant="compact">You&apos;re all caught up!</EmptyState.Description>

package/src/blocks/EmptyState/EmptyState.tsx

@@ -19,8 +19,8 @@ const emptyStateIconClassnames = cva(
   {
     variants: {
       variant: {
-        default: ['tw-size-16', 'tw-text-4xl'],
-        compact: ['tw-size-10', 'tw-text-2xl'],
+        default: ['tw-size-16', 'tw-text-4xl', '[&_svg:not([class*="tw-size-"])]:tw-size-10'],
+        compact: ['tw-size-10', 'tw-text-2xl', '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
       },
     },
     defaultVariants: {

package/src/blocks/ErrorState/ErrorState.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../../components/Button';
-import { Icon } from '../../components/Icon';
+import { AlertCircle, AlertTriangle, Bug, Unlink, XCircle } from '../../icons';
 
 import { ErrorState } from './ErrorState';
 
@@ -24,7 +24,7 @@ export const ClientError: Story = {
   render: () => (
     <ErrorState>
       <ErrorState.Icon>
-        <Icon icon="circle-exclamation" />
+        <AlertCircle />
       </ErrorState.Icon>
       <ErrorState.Title>Page not found</ErrorState.Title>
       <ErrorState.Description>
@@ -46,7 +46,7 @@ export const ServerError: Story = {
   render: () => (
     <ErrorState>
       <ErrorState.Icon>
-        <Icon icon="bug" />
+        <Bug />
       </ErrorState.Icon>
       <ErrorState.Title>Something went wrong</ErrorState.Title>
       <ErrorState.Description>
@@ -68,7 +68,7 @@ export const NetworkFailure: Story = {
   render: () => (
     <ErrorState>
       <ErrorState.Icon>
-        <Icon icon="link-slash" />
+        <Unlink />
       </ErrorState.Icon>
       <ErrorState.Title>No connection</ErrorState.Title>
       <ErrorState.Description>
@@ -86,7 +86,7 @@ export const Destructive: Story = {
   render: () => (
     <ErrorState variant="destructive">
       <ErrorState.Icon variant="destructive">
-        <Icon icon="triangle-exclamation" />
+        <AlertTriangle />
       </ErrorState.Icon>
       <ErrorState.Title variant="destructive">Critical error</ErrorState.Title>
       <ErrorState.Description variant="destructive">
@@ -109,7 +109,7 @@ export const CompactServerError: Story = {
   render: () => (
     <ErrorState variant="compact">
       <ErrorState.Icon variant="compact">
-        <Icon icon="circle-xmark" />
+        <XCircle />
       </ErrorState.Icon>
       <ErrorState.Title variant="compact">Failed to load</ErrorState.Title>
       <ErrorState.Description variant="compact">

package/src/blocks/ErrorState/ErrorState.tsx

@@ -18,9 +18,24 @@ const errorStateClassnames = cva(['tw-flex', 'tw-flex-col', 'tw-items-center', '
 const errorStateIconClassnames = cva(['tw-flex', 'tw-items-center', 'tw-justify-center'], {
   variants: {
     variant: {
-      default: ['tw-size-16', 'tw-text-4xl', 'tw-text-warning-500'],
-      compact: ['tw-size-10', 'tw-text-2xl', 'tw-text-warning-500'],
-      destructive: ['tw-size-16', 'tw-text-4xl', 'tw-text-error-500'],
+      default: [
+        'tw-size-16',
+        'tw-text-4xl',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-10',
+        'tw-text-warning-500',
+      ],
+      compact: [
+        'tw-size-10',
+        'tw-text-2xl',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-6',
+        'tw-text-warning-500',
+      ],
+      destructive: [
+        'tw-size-16',
+        'tw-text-4xl',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-10',
+        'tw-text-error-500',
+      ],
     },
   },
   defaultVariants: {

package/src/blocks/InputOtp/InputOtp.stories.tsx

@@ -0,0 +1,214 @@
+import { useState } from 'react';
+import type { ComponentProps, FormEventHandler } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+
+import { Button } from '../../components/Button';
+import { FormGroup } from '../../components/FormGroup';
+import { Label } from '../../components/Label';
+
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from './index';
+import { InputOtp } from './InputOtp';
+
+type Story = StoryObj<typeof InputOtp>;
+type InputOtpProps = ComponentProps<typeof InputOtp>;
+type Sizing = NonNullable<InputOtpProps['sizing']>;
+type State = NonNullable<InputOtpProps['state']>;
+
+const sizings: Sizing[] = ['sm', 'md', 'lg'];
+const states: State[] = ['default', 'error'];
+
+const ContiguousSlots = ({ length }: { length: number }) => (
+  <InputOtp.Group>
+    {Array.from({ length }, (_, index) => (
+      <InputOtp.Slot key={index} index={index} />
+    ))}
+  </InputOtp.Group>
+);
+
+const SplitSlots = ({ length }: { length: number }) => {
+  const half = Math.ceil(length / 2);
+  return (
+    <>
+      <InputOtp.Group>
+        {Array.from({ length: half }, (_, index) => (
+          <InputOtp.Slot key={index} index={index} />
+        ))}
+      </InputOtp.Group>
+      {length > half && (
+        <>
+          <InputOtp.Separator />
+          <InputOtp.Group>
+            {Array.from({ length: length - half }, (_, i) => (
+              <InputOtp.Slot key={half + i} index={half + i} />
+            ))}
+          </InputOtp.Group>
+        </>
+      )}
+    </>
+  );
+};
+
+export default {
+  component: InputOtp,
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          'OTP / verification-code input. Wraps the headless `input-otp` primitive with a',
+          'Keboola-themed slot, group, and separator using semantic Tailwind tokens. Paste,',
+          'SMS autofill, and per-character focus management are inherited from `input-otp`.',
+          '',
+          '**When to use:** entering a short fixed-length code — MFA / 2FA, email confirmation,',
+          'sudo-mode step-up, invite acceptance.',
+          '',
+          '**When NOT to use:** free-form text → `TextInput` / `FormGroup.TextInput`;',
+          'variable-length secrets → `PasswordInput`; numeric values → `NumberInput`.',
+          '',
+          '**Composition:** wrap slots in `InputOtp.Group`s, optionally separated by',
+          '`InputOtp.Separator`. For full control over slot rendering, call',
+          '`useInputOtpContext()` inside a custom child.',
+          '',
+          '**Sizing:** `sm` / `md` / `lg` match InputGroup heights (≈ 32 / 36 / 40px) so an OTP',
+          'field can sit next to a regular text input without the row jumping.',
+        ].join('\n'),
+      },
+    },
+  },
+  args: {
+    maxLength: 6,
+    sizing: 'md',
+    state: 'default',
+    disabled: false,
+    autoFocus: false,
+    onComplete: action('onComplete'),
+    onChange: action('onChange'),
+  },
+  argTypes: {
+    sizing: {
+      description: 'Slot size',
+      type: { name: 'enum', value: sizings },
+    },
+    state: {
+      description: 'Validation state',
+      type: { name: 'enum', value: states },
+    },
+  },
+  render: (args) => (
+    <InputOtp {...args}>
+      <ContiguousSlots length={args.maxLength} />
+    </InputOtp>
+  ),
+} satisfies Meta<typeof InputOtp>;
+
+export const Default: Story = {};
+
+export const WithSeparator: Story = {
+  render: (args) => (
+    <InputOtp {...args}>
+      <SplitSlots length={args.maxLength} />
+    </InputOtp>
+  ),
+};
+
+export const Sizing: Story = {
+  render: (args) => (
+    <div className="tw-flex tw-flex-col tw-gap-6">
+      {sizings.map((sizing) => (
+        <div key={sizing} className="tw-flex tw-flex-col tw-gap-1">
+          <span className="tw-text-xs tw-text-muted-foreground">{sizing}</span>
+          <InputOtp {...args} sizing={sizing}>
+            <ContiguousSlots length={args.maxLength} />
+          </InputOtp>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const States: Story = {
+  render: (args) => (
+    <div className="tw-flex tw-flex-col tw-gap-6">
+      <div className="tw-flex tw-flex-col tw-gap-1">
+        <span className="tw-text-xs tw-text-muted-foreground">default</span>
+        <InputOtp {...args} state="default">
+          <ContiguousSlots length={args.maxLength} />
+        </InputOtp>
+      </div>
+      <div className="tw-flex tw-flex-col tw-gap-1">
+        <span className="tw-text-xs tw-text-muted-foreground">error</span>
+        <InputOtp {...args} state="error" defaultValue="123">
+          <ContiguousSlots length={args.maxLength} />
+        </InputOtp>
+      </div>
+      <div className="tw-flex tw-flex-col tw-gap-1">
+        <span className="tw-text-xs tw-text-muted-foreground">disabled</span>
+        <InputOtp {...args} disabled defaultValue="42">
+          <ContiguousSlots length={args.maxLength} />
+        </InputOtp>
+      </div>
+    </div>
+  ),
+};
+
+export const Alphanumeric: Story = {
+  args: {
+    pattern: REGEXP_ONLY_DIGITS_AND_CHARS,
+  },
+};
+
+const ControlledDemo = (props: InputOtpProps) => {
+  const [value, setValue] = useState('');
+  return (
+    <div className="tw-flex tw-flex-col tw-gap-3">
+      <InputOtp
+        {...props}
+        value={value}
+        onChange={(next) => {
+          action('onChange')(next);
+          setValue(next);
+        }}
+      >
+        <SplitSlots length={props.maxLength} />
+      </InputOtp>
+      <span className="tw-text-sm tw-text-muted-foreground">Entered: {value || '(empty)'}</span>
+    </div>
+  );
+};
+
+export const Controlled: Story = {
+  render: ControlledDemo,
+};
+
+const UncontrolledDemo = (props: InputOtpProps) => {
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    const values = new FormData(event.currentTarget);
+    action('onSubmit')(Object.fromEntries(values.entries()));
+  };
+
+  return (
+    <form className="tw-flex tw-items-end tw-gap-3" onSubmit={handleSubmit}>
+      <InputOtp {...props} name="code" defaultValue="" onComplete={action('onComplete')}>
+        <SplitSlots length={props.maxLength} />
+      </InputOtp>
+      <Button type="submit">Verify</Button>
+    </form>
+  );
+};
+
+export const Uncontrolled: Story = {
+  render: UncontrolledDemo,
+};
+
+export const WithLabel: Story = {
+  render: (args) => (
+    <FormGroup className="tw-max-w-sm">
+      <Label>Verification code</Label>
+      <InputOtp {...args}>
+        <SplitSlots length={args.maxLength} />
+      </InputOtp>
+      <FormGroup.Help>We just sent a 6-digit code to your authenticator app.</FormGroup.Help>
+    </FormGroup>
+  ),
+};