@keboola/design 1.3.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "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,7 +74,7 @@
     "@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",
@@ -88,7 +88,7 @@
     "vitest": "^4.1.2"
   },
   "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",

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]:tw-size-10'],
+        compact: ['tw-size-10', 'tw-text-2xl', '[&_svg]: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,9 @@ 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]:tw-size-10', 'tw-text-warning-500'],
+      compact: ['tw-size-10', 'tw-text-2xl', '[&_svg]:tw-size-6', 'tw-text-warning-500'],
+      destructive: ['tw-size-16', 'tw-text-4xl', '[&_svg]:tw-size-10', 'tw-text-error-500'],
     },
   },
   defaultVariants: {

package/src/blocks/PageHeader/AGENTS.md

@@ -48,7 +48,7 @@ either variant.
 ## Rules from the patterns
 
 - **Index**: no breadcrumbs, no overflow menu, no search/filter/sort. Search
-  belongs in `PageLayout.Toolbar`.
+  belongs in `PageToolbar`.
 - **Detail**: breadcrumbs are required (use real entity names; last item is
   not a link). Overflow menu lives on the breadcrumbs row, never in the title
   row.

package/src/blocks/PageHeader/PageHeader.stories.tsx

@@ -18,6 +18,7 @@ import { DropdownMenu } from '../../components/DropdownMenu';
 import { MarkdownEditor } from '../../components/MarkdownEditor';
 import { Tabs, TabsContent } from '../../components/Tabs';
 import { PageLayout } from '../PageLayout';
+import { PageToolbar } from '../PageToolbar';
 import { SplitButton } from '../SplitButton';
 
 import { PageHeader } from './PageHeader';
@@ -69,9 +70,11 @@ export const IndexFlows: Story = {
           </>
         }
       />
-      <PageLayout.Toolbar>
-        <Placeholder label="Search input + filter pills" height="tw-h-10" />
-      </PageLayout.Toolbar>
+      <PageToolbar>
+        <PageToolbar.Search>
+          <Placeholder label="Search input + filter pills" height="tw-h-10" />
+        </PageToolbar.Search>
+      </PageToolbar>
       <PageLayout.Content>
         <Placeholder label="EntityList" height="tw-h-96" />
       </PageLayout.Content>

package/src/blocks/PageHeader/PageHeaderIndex.tsx

@@ -11,7 +11,7 @@ import { descriptionClass, titleClass, titleRowClass } from './styles';
 //   - At most one primary `action`; pair with the `documentation` icon button.
 /**
  * Props for `PageHeader.Index`. Index pages have no breadcrumbs and no overflow menu — search and filters
- * belong in `PageLayout.Toolbar`, not here.
+ * belong in `PageToolbar`, not here.
  */
 type PageHeaderIndexProps = Omit<ComponentPropsWithoutRef<'header'>, 'title'> & {
   title: ReactNode;
@@ -35,7 +35,7 @@ type PageHeaderIndexProps = Omit<ComponentPropsWithoutRef<'header'>, 'title'> &
  * **When NOT to use:** for single-entity detail pages use `PageHeader.Detail`; for layouts that don't fit
  * either pattern host custom JSX in `PageLayout.Header` directly.
  * **Composition:** nest inside `PageLayout.Header`. Always pass `Button argo` into `action` and
- * `documentation`. Search and filter chips belong in `PageLayout.Toolbar`, not here.
+ * `documentation`. Search and filter chips belong in `PageToolbar`, not here.
  */
 export const PageHeaderIndex = ({
   ref,

package/src/blocks/PageLayout/AGENTS.md

@@ -24,7 +24,7 @@ PageLayout (Root)            ← max-width container, vertical rhythm (gap-4)
 ├── PageLayout.Breadcrumbs   ← Detail pattern only; usually composed by PageHeader.Detail
 ├── PageLayout.Header        ← host PageHeader.Index / PageHeader.Detail (or custom JSX)
 ├── PageLayout.Tabs          ← escape hatch for routing-based tab rows
-├── PageLayout.Toolbar       ← search / filter pills (NEVER in header)
+├── PageToolbar              ← search / filter pills (NEVER in header) — separate block
 ├── PageLayout.Content       ← main slot
 └── PageLayout.Footer        ← bottom action bar (form submit, `sticky` variant)
 ```
@@ -42,7 +42,7 @@ All slots take any `ReactNode` — no structured props live on the slot itself.
   <PageLayout.Header>
     <PageHeader.Index title="Storage" metadata="3 buckets and 39 tables" … />
   </PageLayout.Header>
-  <PageLayout.Toolbar>{searchAndFilters}</PageLayout.Toolbar>
+  <PageToolbar>{searchAndFilters}</PageToolbar>
   <PageLayout.Content>{list}</PageLayout.Content>
 </PageLayout>
 
@@ -73,7 +73,7 @@ provides the chrome.
 - **Index pages do not show breadcrumbs.** Skip `PageLayout.Breadcrumbs`
   entirely on top-level list pages.
 - **No search / filters / sorting in the header** — those belong in
-  `PageLayout.Toolbar`.
+  `PageToolbar`.
 
 ## Component rules
 

package/src/blocks/PageLayout/PageLayout.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Breadcrumb } from '../../components/Breadcrumb';
 import { Button } from '../../components/Button';
 import { Tabs, TabsContent } from '../../components/Tabs';
+import { PageToolbar } from '../PageToolbar';
 
 import { PageLayout } from './PageLayout';
 
@@ -15,7 +16,7 @@ export default {
     docs: {
       description: {
         component:
-          'Compound block that gives every kbc-ui page the same shape — max-width container, vertical rhythm, and slots for `Breadcrumbs`, `Header`, `Tabs`, `Toolbar`, `Content`, `Footer`. The slots are intentionally thin — for the structured Index / Detail page-header patterns reach for the `PageHeader` block. The page-navigation `Sidebar` lives **outside** `PageLayout` in the app shell.',
+          'Compound block that gives every kbc-ui page the same shape — max-width container, vertical rhythm, and slots for `Breadcrumbs`, `Header`, `Tabs`, `Content`, `Footer`. The slots are intentionally thin — for the structured Index / Detail page-header patterns reach for the `PageHeader` block, and for the search / filter row reach for the `PageToolbar` block. The page-navigation `Sidebar` lives **outside** `PageLayout` in the app shell.',
       },
     },
   },
@@ -53,9 +54,11 @@ export const Anatomy: Story = {
         <Placeholder label="PageHeader.Index / PageHeader.Detail goes here" height="tw-h-24" />
       </PageLayout.Header>
 
-      <PageLayout.Toolbar>
-        <Placeholder label="Search input + filter pills" height="tw-h-10" />
-      </PageLayout.Toolbar>
+      <PageToolbar>
+        <PageToolbar.Search>
+          <Placeholder label="Search input + filter pills" height="tw-h-10" />
+        </PageToolbar.Search>
+      </PageToolbar>
 
       <PageLayout.Content>
         <Placeholder label="EntityList / Table" height="tw-h-96" />

package/src/blocks/PageLayout/PageLayout.tsx

@@ -75,21 +75,6 @@ const Tabs = ({
   </div>
 );
 
-const Toolbar = ({
-  ref,
-  className,
-  children,
-  ...props
-}: ComponentPropsWithoutRef<'div'> & { ref?: Ref<ElementRef<'div'>> }) => (
-  <div
-    ref={ref}
-    className={cn('tw-flex tw-w-full tw-flex-wrap tw-items-center tw-gap-3', className)}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
 const Content = ({
   ref,
   className,
@@ -135,7 +120,7 @@ const Footer = ({
  * **When NOT to use:** the left-rail `Sidebar` lives in the app shell outside `PageLayout`. For embedded
  * widgets or modal bodies the layout chrome is the modal / card itself, not `PageLayout`.
  * **Composition:** `PageLayout` is opinionated about chrome only — slots accept any `ReactNode`. Put
- * search / filter pills in `PageLayout.Toolbar`, never in the header. Form submit bars go in
+ * search / filter pills in `PageToolbar`, never in the header. Form submit bars go in
  * `PageLayout.Footer sticky`.
  *
  * @see RECIPES.md#list-detail — for the index → detail page pattern
@@ -147,8 +132,6 @@ export const PageLayout = Object.assign(Root, {
   Header,
   /** Escape hatch for routing-based tab rows. Use `Tabs` / `TabsContent` core components inside, never a raw `<button>`. */
   Tabs,
-  /** Search / filter pill row. Belongs here, NOT in the header per the page-header patterns. */
-  Toolbar,
   /** Main content slot. Lists, cards, tables. */
   Content,
   /** Bottom action bar — form submit + cancel. Pass `sticky` for a footer that pins to the viewport. */