@keboola/design 1.3.1 → 2.0.0

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

@@ -1,10 +1,9 @@
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Upload, X } from '@keboola/design/icons';
+import { Copy, Search, Upload, X } from '@keboola/design/icons';
 
 import { Button } from '../Button/Button';
-import { Icon } from '../Icon';
 
 import { InputGroup } from './InputGroup';
 
@@ -92,7 +91,7 @@ export const InlineStartAddon: Story = {
   render: ({ disabled, readOnly, placeholder, ...args }) => (
     <InputGroup {...args}>
       <InputGroup.Addon align="inline-start">
-        <Icon className="tw-text-neutral-400" icon="magnifying-glass" />
+        <Search className="tw-size-4 tw-text-neutral-400" />
       </InputGroup.Addon>
       <InputGroup.Input placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
     </InputGroup>
@@ -140,7 +139,7 @@ export const BlockStartAddon: Story = {
       <InputGroup {...args}>
         <InputGroup.Addon align="block-start" className="tw-justify-between">
           <InputGroup.Text>
-            <Icon icon="copy" />
+            <Copy />
             script.js
           </InputGroup.Text>
           <InputGroup.Button aria-label="Send">
@@ -190,7 +189,7 @@ export const BothBlockAddon: Story = {
     <InputGroup {...args}>
       <InputGroup.Addon align="block-start" className="tw-justify-between tw-border-b">
         <InputGroup.Text>
-          <Icon icon="copy" />
+          <Copy />
           script.js
         </InputGroup.Text>
         <InputGroup.Button aria-label="Send">

package/src/components/InputGroup/InputGroup.tsx

@@ -58,7 +58,7 @@ const inputGroupVariants = cva(
     defaultVariants: {
       variant: 'primary',
       state: 'default',
-      sizing: 'default',
+      sizing: 'medium',
       focusVariant: 'default',
     },
     compoundVariants: [

package/src/components/InputGroup/InputGroupAddon.tsx

@@ -5,32 +5,43 @@ import { cn } from '../../utils';
 
 // Padding only fires when the addon actually has content — keeps an empty
 // `<Addon>{maybeNull}</Addon>` from carving 16px out of the input row.
-const addonVariants = cva(['tw-flex', 'tw-items-center', 'tw-gap-1'], {
-  defaultVariants: {
-    align: 'inline-start',
-  },
-  variants: {
-    align: {
-      'inline-start': ['tw-order-first', '[&:not(:empty)]:tw-pl-4'],
-      'inline-end': ['tw-order-last', '[&:not(:empty)]:tw-pr-4'],
-      'block-start': [
-        'tw-order-first',
-        // `tw-w-full` needs to be empty-conditional too — when the addon
-        // has no content the root stays in flex-row, and a 100%-wide
-        // empty addon would claim half of the input row beside the input.
-        '[&:not(:empty)]:tw-w-full',
-        '[&:not(:empty)]:tw-px-4',
-        '[&:not(:empty)]:tw-py-1.5',
-      ],
-      'block-end': [
-        'tw-order-last',
-        '[&:not(:empty)]:tw-w-full',
-        '[&:not(:empty)]:tw-px-4',
-        '[&:not(:empty)]:tw-py-1.5',
-      ],
+const addonVariants = cva(
+  [
+    'tw-flex',
+    'tw-items-center',
+    'tw-gap-1',
+
+    // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.
+    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+    '[&_svg]:tw-shrink-0',
+  ],
+  {
+    defaultVariants: {
+      align: 'inline-start',
+    },
+    variants: {
+      align: {
+        'inline-start': ['tw-order-first', '[&:not(:empty)]:tw-pl-4'],
+        'inline-end': ['tw-order-last', '[&:not(:empty)]:tw-pr-4'],
+        'block-start': [
+          'tw-order-first',
+          // `tw-w-full` needs to be empty-conditional too — when the addon
+          // has no content the root stays in flex-row, and a 100%-wide
+          // empty addon would claim half of the input row beside the input.
+          '[&:not(:empty)]:tw-w-full',
+          '[&:not(:empty)]:tw-px-4',
+          '[&:not(:empty)]:tw-py-1.5',
+        ],
+        'block-end': [
+          'tw-order-last',
+          '[&:not(:empty)]:tw-w-full',
+          '[&:not(:empty)]:tw-px-4',
+          '[&:not(:empty)]:tw-py-1.5',
+        ],
+      },
     },
   },
-});
+);
 
 type Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;
 

package/src/components/Kbd/Kbd.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Icon } from '../Icon';
+import { Copy } from '../../icons';
 
 import { Kbd } from './Kbd';
 import { keys } from './keyboardKeys';
@@ -44,7 +44,7 @@ export const AsSymbol: Story = {
 
 export const AsIcon: Story = {
   args: {
-    children: <Icon icon="copy" />,
+    children: <Copy />,
   },
 };
 

package/src/components/Label/Label.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { Info } from '../../icons';
 import { FormGroup } from '../FormGroup';
-import { Icon } from '../Icon';
 import { TextInput } from '../Input';
 
 import { Label } from './Label';
@@ -46,7 +46,7 @@ export const WithIcon: Story = {
     className: 'tw-flex tw-items-center tw-gap-1',
     children: (
       <>
-        Label <Icon className="tw-text-neutral-400" icon="info-circle" />
+        Label <Info className="tw-size-4 tw-text-neutral-400" />
       </>
     ),
   },

package/src/components/Modal/ModalBody.tsx

@@ -21,6 +21,11 @@ export const ModalBody = ({ className, ...props }: Props) => (
 
       'tw-px-1', // 4 px to complement ModalContent and still keep input focus outline visible
       'tw-py-1',
+
+      // Default size for nested Lucide icons; callers can override on the icon.
+      "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+      '[&_svg]:tw-shrink-0',
+
       className,
     )}
     {...props}

package/src/components/Navbar/Navbar.stories.tsx

@@ -1,8 +1,7 @@
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Bell, Diamond, Keboola, Search } from '../../icons';
-import { Icon } from '../Icon';
+import { Bell, ChevronsUpDown, Diamond, Keboola, Search } from '@keboola/design/icons';
 
 import { Navbar } from './Navbar';
 
@@ -54,13 +53,13 @@ export const Default: Story = {
           <Navbar.MenuItem>
             <Navbar.MenuButton variant="emphasized" icon={<Diamond className="tw-size-4" />}>
               Project
-              <Icon icon={['far', 'angles-up-down']} />
+              <ChevronsUpDown className="tw-size-5" />
             </Navbar.MenuButton>
           </Navbar.MenuItem>
           <Navbar.MenuItem>
             <Navbar.MenuButton icon={<Diamond className="tw-size-4" />}>
               Branch
-              <Icon icon={['far', 'angles-up-down']} />
+              <ChevronsUpDown className="tw-size-5" />
             </Navbar.MenuButton>
           </Navbar.MenuItem>
         </Navbar.Menu>
@@ -109,7 +108,7 @@ export const ContentScrolling: Story = {
             <Navbar.MenuItem key={item}>
               <Navbar.MenuButton icon={<Diamond className="tw-size-4" />}>
                 {item}
-                <Icon icon={['far', 'angles-up-down']} />
+                <ChevronsUpDown className="tw-size-5" />
               </Navbar.MenuButton>
             </Navbar.MenuItem>
           ))}

package/src/components/Pagination/Pagination.stories.tsx

@@ -104,7 +104,6 @@ export const RowsPerPage: Story = {
         </Label>
         <Select
           variant="argo"
-          sizing="medium"
           id="rows-per-page"
           className="tw-min-w-20"
           defaultValue="5"

package/src/components/Popover/PopoverContent.tsx

@@ -48,6 +48,10 @@ const variants = cva(
     'data-[side=left]:tw-slide-in-from-right-2',
     'data-[side=right]:tw-slide-in-from-left-2',
     'data-[side=top]:tw-slide-in-from-bottom-2',
+
+    // Default size for nested Lucide icons; callers can override on the icon.
+    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+    '[&_svg]:tw-shrink-0',
   ],
   {
     defaultVariants: {

package/src/components/Select/SelectTrigger.tsx

@@ -49,7 +49,7 @@ const variants = cva(
     defaultVariants: {
       variant: 'primary',
       state: 'default',
-      sizing: 'default',
+      sizing: 'medium',
     },
     compoundVariants: [
       {

package/src/components/Separator/Separator.stories.tsx

@@ -39,3 +39,22 @@ const meta: Meta<typeof Separator> = {
 export default meta;
 
 export const Basic: Story = {};
+
+/**
+ * Pass `label` to render text centered between two line segments — the typical
+ * "OR" divider used between auth options. Always rendered horizontally.
+ */
+export const WithLabel: Story = {
+  args: {
+    label: 'OR',
+  },
+  render: (props) => (
+    <Card>
+      <Card.Content className="tw-flex tw-w-80 tw-flex-col tw-gap-4">
+        <span>Sign in with email</span>
+        <Separator {...props} />
+        <span>Sign in with SSO</span>
+      </Card.Content>
+    </Card>
+  ),
+};

package/src/components/Separator/Separator.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Separator } from './Separator';
+
+describe('<Separator />', () => {
+  it('renders the plain decorative separator without a label', () => {
+    const { container } = render(<Separator orientation="horizontal" />);
+    expect(container.querySelector('[data-orientation="horizontal"]')).not.toBeNull();
+    expect(screen.queryByText('OR')).toBeNull();
+  });
+
+  it('renders the label between two line segments when label is provided', () => {
+    const { container } = render(<Separator label="OR" />);
+    expect(screen.getByText('OR')).not.toBeNull();
+    // Decorative line segments are drawn with before:/after: pseudo-elements,
+    // so the label is the only DOM child of the separator root.
+    const root = container.querySelector('[data-orientation="horizontal"]');
+    expect(root?.children).toHaveLength(0);
+    expect(root?.textContent).toBe('OR');
+  });
+
+  it('forces horizontal orientation when a label is provided', () => {
+    const { container } = render(<Separator orientation="vertical" label="OR" />);
+    expect(container.querySelector('[data-orientation="horizontal"]')).not.toBeNull();
+    expect(container.querySelector('[data-orientation="vertical"]')).toBeNull();
+  });
+
+  it('treats label={false} as no label (conditional rendering pattern)', () => {
+    const condition = false;
+    render(<Separator label={condition && 'OR'} />);
+    expect(screen.queryByText('OR')).toBeNull();
+  });
+
+  it('treats label={null} as no label', () => {
+    render(<Separator label={null} />);
+    expect(screen.queryByText('OR')).toBeNull();
+  });
+});

package/src/components/Separator/Separator.tsx

@@ -1,8 +1,10 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import * as RSeparator from '@radix-ui/react-separator';
 import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 
+import { cn } from '../../utils';
+
 const separatorVariants = cva(
   [
     // position
@@ -13,7 +15,7 @@ const separatorVariants = cva(
 
     // before
     "before:tw-content-['']",
-    'before:tw-bg-neutral-150',
+    'before:tw-bg-border',
   ],
   {
     defaultVariants: {
@@ -67,18 +69,47 @@ const separatorVariants = cva(
 );
 
 type Props = VariantProps<typeof separatorVariants> &
-  Omit<ComponentProps<typeof RSeparator.Root>, 'decorative'>;
+  Omit<ComponentProps<typeof RSeparator.Root>, 'decorative'> & {
+    /**
+     * Optional label rendered centered between two line segments
+     * (typical "OR" divider). Implies `orientation="horizontal"`.
+     * Overrides any `children` passed to the component.
+     */
+    label?: ReactNode;
+  };
 
 export const Separator = ({
   className,
   orientation = 'vertical',
   size = 'full',
+  label,
   ...props
-}: Props) => (
-  <RSeparator.Root
-    {...props}
-    decorative
-    orientation={orientation}
-    className={separatorVariants({ size, orientation, className })}
-  />
-);
+}: Props) => {
+  if (label != null && label !== false) {
+    return (
+      <RSeparator.Root
+        {...props}
+        decorative
+        orientation="horizontal"
+        className={cn(
+          'tw-flex tw-w-full tw-items-center tw-gap-3 tw-self-stretch',
+          'tw-text-xs tw-font-medium tw-text-muted-foreground',
+          "before:tw-content-[''] before:tw-h-px before:tw-flex-1 before:tw-bg-border",
+          "after:tw-content-[''] after:tw-h-px after:tw-flex-1 after:tw-bg-border",
+          className,
+        )}
+      >
+        {label}
+      </RSeparator.Root>
+    );
+  }
+
+  return (
+    <RSeparator.Root
+      {...props}
+      decorative
+      orientation={orientation}
+      className={separatorVariants({ size, orientation, className })}
+    />
+  );
+};

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -4,6 +4,8 @@ import type { Decorator, Meta, StoryObj } from '@storybook/react-vite';
 import type { InputType } from 'storybook/internal/types';
 
 import {
+  AlertTriangle,
+  Ellipsis,
   Expand,
   Gauge,
   Keboola,
@@ -21,7 +23,6 @@ import { cn } from '../../utils';
 import { Button } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 import { DropdownMenu } from '../DropdownMenu';
-import { Icon } from '../Icon';
 import { Link } from '../Link';
 import { Modal } from '../Modal';
 
@@ -547,7 +548,7 @@ export const MenuAction: Story = {
             <DropdownMenu>
               <DropdownMenu.Trigger asChild>
                 <Sidebar.MenuAction showOnHover>
-                  <Icon icon={['far', 'ellipsis']} />
+                  <Ellipsis />
                   <span className="tw-sr-only">Actions</span>
                 </Sidebar.MenuAction>
               </DropdownMenu.Trigger>
@@ -571,7 +572,7 @@ export const MenuAction: Story = {
             </Sidebar.MenuButton>
 
             <Sidebar.MenuAction asChild>
-              <Icon icon="triangle-exclamation" className="tw-text-warning-600" />
+              <AlertTriangle className="tw-text-warning-600" />
             </Sidebar.MenuAction>
           </Sidebar.MenuItem>
           <Sidebar.MenuItem>
@@ -579,7 +580,7 @@ export const MenuAction: Story = {
               <span className="tw-truncate">As Non-actionable with Very long text</span>
             </Sidebar.MenuButton>
             <Sidebar.MenuAction asChild>
-              <Icon icon="triangle-exclamation" className="tw-text-warning-600" />
+              <AlertTriangle className="tw-text-warning-600" />
             </Sidebar.MenuAction>
           </Sidebar.MenuItem>
           <Sidebar.MenuItem>
@@ -589,7 +590,7 @@ export const MenuAction: Story = {
             </Sidebar.MenuButton>
             <Sidebar.MenuAction asChild>
               <Link href="#">
-                <Icon icon={['far', 'gauge']} className="tw-text-warning-600" />
+                <Gauge className="tw-text-warning-600" />
                 <span className="tw-sr-only">Dashboard</span>
               </Link>
             </Sidebar.MenuAction>

package/src/components/Table/Table.stories.tsx

@@ -6,8 +6,8 @@ import { EmptyState } from '../../blocks/EmptyState';
 import { ErrorState } from '../../blocks/ErrorState';
 import { SearchInput } from '../../blocks/SearchInput';
 import { Button } from '../../components/Button';
-import { Icon } from '../../components/Icon';
 import { Pagination } from '../../components/Pagination';
+import { ChevronDown, ChevronsUpDown, ChevronUp, CircleAlert, Search } from '../../icons';
 
 import { Table } from './Table';
 
@@ -141,19 +141,19 @@ const SortHeader = ({
   direction: SortDir;
   onClick: () => void;
   children: ReactNode;
-}) => (
-  <button
-    type="button"
-    onClick={onClick}
-    className="tw-group tw-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-border-0 tw-bg-transparent tw-p-0 tw-font-medium tw-text-inherit"
-  >
-    {children}
-    <Icon
-      icon={!active ? 'sort' : direction === 'asc' ? 'angle-up' : 'angle-down'}
-      className="tw-size-3 tw-text-muted-foreground"
-    />
-  </button>
-);
+}) => {
+  const SortIcon = !active ? ChevronsUpDown : direction === 'asc' ? ChevronUp : ChevronDown;
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="tw-group tw-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-border-0 tw-bg-transparent tw-p-0 tw-font-medium tw-text-inherit"
+    >
+      {children}
+      <SortIcon className="tw-size-3 tw-text-muted-foreground" />
+    </button>
+  );
+};
 
 /**
  * Canonical entity-list pattern: `Table` (presentational) composed with `SearchInput`, `Pagination`,
@@ -213,7 +213,7 @@ export const AsEntityList: Story = {
         {filtered.length === 0 ? (
           <EmptyState>
             <EmptyState.Icon>
-              <Icon icon="search" />
+              <Search />
             </EmptyState.Icon>
             <EmptyState.Title>No tokens match your search</EmptyState.Title>
             <EmptyState.Description>
@@ -313,7 +313,7 @@ export const AsEntityListError: Story = {
       <SearchInput allowClear placeholder="Search tokens…" disabled className="tw-w-72" />
       <ErrorState>
         <ErrorState.Icon>
-          <Icon icon="circle-exclamation" />
+          <CircleAlert />
         </ErrorState.Icon>
         <ErrorState.Title>Couldn&apos;t load tokens</ErrorState.Title>
         <ErrorState.Description>

package/src/components/Timeline/Timeline.stories.tsx

@@ -1,9 +1,9 @@
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { Check, Circle, Search, Warehouse } from '../../icons';
 import { Alert } from '../Alert';
 import { ButtonInline } from '../Button';
-import { Icon } from '../Icon';
 
 import { Timeline } from './Timeline';
 
@@ -94,21 +94,21 @@ export const Icons: Story = {
     <Timeline {...props}>
       <Timeline.Item>
         <Timeline.Connector variant="icon">
-          <Icon icon="check" />
+          <Check />
         </Timeline.Connector>
         <Timeline.Content>Checked</Timeline.Content>
       </Timeline.Item>
 
       <Timeline.Item>
         <Timeline.Connector variant="icon">
-          <Icon icon="dot-circle" />
+          <Circle />
         </Timeline.Connector>
         <Timeline.Content>Dot</Timeline.Content>
       </Timeline.Item>
 
       <Timeline.Item>
         <Timeline.Connector variant="icon">
-          <Icon icon="search" />
+          <Search />
         </Timeline.Connector>
         <Timeline.Content>Search</Timeline.Content>
       </Timeline.Item>
@@ -184,7 +184,7 @@ export const Nested: Story = {
           <Timeline variant="solid">
             <Timeline.Item>
               <Timeline.Connector variant="icon">
-                <Icon icon="warehouse" />
+                <Warehouse />
               </Timeline.Connector>
               <Timeline.Content className="tw-gap-2">
                 <h4>Create SQL Transformation</h4>
@@ -194,7 +194,7 @@ export const Nested: Story = {
             <Timeline.Item>
               <Timeline.Connector variant="line" />
               <Timeline.Content className="tw-gap-2">
-                <Icon icon="warehouse" className="tw-text-neutral-400" />
+                <Warehouse className="tw-size-4 tw-text-neutral-400" />
                 <div className="tw-flex tw-flex-col">
                   <h4>Documentation Query</h4>
                   <div className="tw-flex tw-gap-2">
@@ -207,7 +207,7 @@ export const Nested: Story = {
             <Timeline.Item>
               <Timeline.Connector variant="line" />
               <Timeline.Content className="tw-gap-2">
-                <Icon icon="warehouse" className="tw-text-neutral-400" />
+                <Warehouse className="tw-size-4 tw-text-neutral-400" />
                 <div className="tw-flex tw-flex-col">
                   <h4>Documentation Query</h4>
                   <div className="tw-flex tw-gap-2">
@@ -220,7 +220,7 @@ export const Nested: Story = {
             <Timeline.Item>
               <Timeline.Connector align="start" variant="line" />
               <Timeline.Content className="tw-gap-2">
-                <Icon icon="warehouse" className="tw-text-neutral-400" />
+                <Warehouse className="tw-size-4 tw-text-neutral-400" />
                 <div className="tw-flex tw-flex-col">
                   <h4>Documentation Query</h4>
                   <div className="tw-flex tw-gap-2">

package/src/components/Timeline/TimelineConnector.tsx

@@ -74,7 +74,7 @@ const connector = cva(
           'tw-text-nowrap',
           'tw-text-xs',
         ],
-        icon: ['tw-bg-white', '[&_svg]:tw-text-neutral-300'],
+        icon: ['tw-bg-white', '[&_svg]:tw-size-4', '[&_svg]:tw-text-neutral-300'],
         line: [
           'tw-min-w-8',
           'tw-overflow-hidden',

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Bold, Italic, LayoutGrid, List, Underline } from '../../icons';
+
+import { ToggleGroup } from './ToggleGroup';
+
+const ViewSwitcherStory = () => {
+  const [value, setValue] = useState<'list' | 'grid'>('list');
+  return (
+    <ToggleGroup
+      type="single"
+      value={value}
+      onValueChange={(next) => next && setValue(next as 'list' | 'grid')}
+      aria-label="View mode"
+    >
+      <ToggleGroup.Item value="list" aria-label="List view">
+        <List className="tw-size-4" />
+      </ToggleGroup.Item>
+      <ToggleGroup.Item value="grid" aria-label="Grid view">
+        <LayoutGrid className="tw-size-4" />
+      </ToggleGroup.Item>
+    </ToggleGroup>
+  );
+};
+
+const WithLabelsStory = () => (
+  <ToggleGroup type="single" defaultValue="month" aria-label="Range">
+    <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
+    <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
+    <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
+  </ToggleGroup>
+);
+
+const MultipleStory = () => (
+  <ToggleGroup type="multiple" defaultValue={['bold']} aria-label="Text formatting">
+    <ToggleGroup.Item value="bold" aria-label="Bold">
+      <Bold className="tw-size-4" />
+    </ToggleGroup.Item>
+    <ToggleGroup.Item value="italic" aria-label="Italic">
+      <Italic className="tw-size-4" />
+    </ToggleGroup.Item>
+    <ToggleGroup.Item value="underline" aria-label="Underline">
+      <Underline className="tw-size-4" />
+    </ToggleGroup.Item>
+  </ToggleGroup>
+);
+
+const meta = {
+  title: 'Components/ToggleGroup',
+  component: ToggleGroup,
+  args: { type: 'single' },
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ViewSwitcher: Story = { render: () => <ViewSwitcherStory /> };
+export const WithLabels: Story = { render: () => <WithLabelsStory /> };
+export const Multiple: Story = { render: () => <MultipleStory /> };