@keboola/design 1.3.1 → 2.0.1

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/Sidebar/SidebarGroup/SidebarGroupAction.tsx

@@ -34,7 +34,7 @@ export const SidebarGroupAction = ({
       'tw-rounded-full',
 
       // svg defaults: size + colour
-      '[&_svg]:tw-size-3',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-3',
       '[&_svg]:tw-text-neutral-400',
       'hover:[&_svg]:tw-text-secondary-600',
 

package/src/components/Sidebar/SidebarMenu/SidebarMenuAction.tsx

@@ -51,7 +51,7 @@ export const SidebarMenuAction = ({
 
         // icon styling
         '[&_svg]:tw-shrink-0',
-        '[&_svg]:tw-size-3.5',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-3.5',
         '[&_svg]:tw-text-sidebar-accent-foreground',
 
         // focus visible

package/src/components/Sidebar/SidebarMenu/SidebarMenuIcon.tsx

@@ -21,7 +21,7 @@ export const SidebarMenuIcon = ({
       'tw-shrink-0',
       'tw-p-0.5',
       'tw-text-sidebar-primary',
-      '[&_svg]:tw-size-4',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       className,
     )}
   >

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,11 @@ const connector = cva(
           'tw-text-nowrap',
           'tw-text-xs',
         ],
-        icon: ['tw-bg-white', '[&_svg]:tw-text-neutral-300'],
+        icon: [
+          'tw-bg-white',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+          '[&_svg]:tw-text-neutral-300',
+        ],
         line: [
           'tw-min-w-8',
           'tw-overflow-hidden',

package/src/components/Toast/ToastDismiss.tsx

@@ -20,7 +20,7 @@ export const ToastDismiss = ({
       'tw-row-start-1',
       'tailwindcss-preflight',
       '[&_svg]:tw-aspect-square',
-      '[&_svg]:tw-size-4',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       '[&_svg]:tw-m-1',
 
       'tw-text-white',

package/src/components/Toast/ToastRoot.tsx

@@ -112,7 +112,7 @@ export const ToastRoot = ({
             'tw-aspect-square',
             'tw-size-5',
             'tw-shrink-0',
-            '[&_svg]:tw-size-5',
+            '[&_svg:not([class*="tw-size-"])]:tw-size-5',
             'tw-text-white',
             'group-data-[variant=default]/toast:tw-text-popover-foreground',
           )}

package/src/components/Toggle/Toggle.tsx

@@ -185,7 +185,7 @@ export const Toggle = ({
         </span>
       )}
       {icon && (
-        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-align-middle [&_svg]:tw-size-4">
+        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-align-middle [&_svg:not([class*='tw-size-'])]:tw-size-4">
           {renderLegacyIcon(icon)}
         </span>
       )}

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 /> };

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,99 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+
+const rootVariants = cva(
+  [
+    'tailwindcss-preflight',
+    'tw-inline-flex',
+    'tw-items-center',
+    'tw-shrink-0',
+    'tw-bg-muted',
+    'tw-rounded-lg',
+    'tw-p-[3px]',
+    'tw-gap-0',
+  ],
+  {
+    defaultVariants: { size: 'medium' },
+    variants: {
+      size: {
+        small: ['tw-h-8'],
+        medium: ['tw-h-9'],
+        large: ['tw-h-10'],
+      },
+    },
+  },
+);
+
+const itemClasses = cn(
+  'tailwindcss-preflight',
+  'tw-inline-flex',
+  'tw-items-center',
+  'tw-justify-center',
+  'tw-gap-2',
+  'tw-shrink-0',
+  'tw-whitespace-nowrap',
+
+  'tw-h-full',
+  'tw-rounded-md',
+  'tw-px-2',
+  'tw-py-1',
+
+  'tw-bg-transparent',
+  'tw-text-foreground',
+  'tw-text-sm',
+  'tw-font-medium',
+
+  'tw-transition-colors',
+
+  'disabled:tw-cursor-not-allowed',
+  'disabled:tw-opacity-50',
+
+  '!tw-outline-none',
+  'focus-visible:tw-ring-2',
+  'focus-visible:tw-ring-primary/50',
+
+  // hover on non-pressed
+  'not-disabled:[&[data-state=off]]:hover:tw-bg-background/60',
+
+  // pressed
+  'data-[state=on]:tw-bg-background',
+  'data-[state=on]:tw-shadow-[0_1px_2px_rgba(0,0,0,0.05),0_1px_1px_rgba(0,0,0,0.1)]',
+
+  '[&_svg]:tw-shrink-0',
+  '[&_svg]:tw-pointer-events-none',
+  "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+);
+
+type RootProps = ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof rootVariants>;
+
+/**
+ * Segmented row of mutually-exclusive (or multi-select) options. Built on `@radix-ui/react-toggle-group`.
+ * For `type="single"`, `onValueChange` receives `""` when the user deselects the active item.
+ */
+const Root = ({
+  ref,
+  className,
+  size = 'medium',
+  ...props
+}: RootProps & { ref?: Ref<ElementRef<'div'>> }) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    {...props}
+    className={cn(rootVariants({ size, className }))}
+  />
+);
+
+type ItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>;
+
+const Item = ({ ref, className, ...props }: ItemProps & { ref?: Ref<ElementRef<'button'>> }) => (
+  <ToggleGroupPrimitive.Item ref={ref} {...props} className={cn(itemClasses, className)} />
+);
+
+export const ToggleGroup = Object.assign(Root, {
+  /** Individual segment inside a `ToggleGroup`. `value` is required and must be unique within the group. */
+  Item,
+});

package/src/components/ToggleGroup/index.ts

@@ -0,0 +1 @@
+export { ToggleGroup } from './ToggleGroup';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,8 +1,8 @@
 import type { ComponentType } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { CircleHelp } from '../../icons';
 import { Button } from '../Button';
-import { Icon } from '../Icon';
 
 import { Tooltip, TooltipProvider } from './Tooltip';
 
@@ -53,7 +53,7 @@ export const StaticExplanatory: Story = {
   },
   render: (args) => (
     <Tooltip {...args}>
-      <Icon icon="circle-question" className="tw-text-neutral-400" />
+      <CircleHelp className="tw-size-4 tw-text-neutral-400" />
     </Tooltip>
   ),
   parameters: {

package/src/hooks/useAutosizeInput.stories.tsx

@@ -1,9 +1,9 @@
 import { type ChangeEvent, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Icon } from '../components/Icon';
 import { TextInput } from '../components/Input/TextInput/TextInput';
 import { InputGroup } from '../components/InputGroup';
+import { Search } from '../icons';
 
 import { useAutosizeInput } from './useAutosizeInput';
 
@@ -102,7 +102,7 @@ export const WithInputGroup: Story = {
       return (
         <InputGroup className="!tw-inline-flex">
           <InputGroup.Addon align="inline-start">
-            <Icon icon="magnifying-glass" className="tw-size-4 tw-text-neutral-400" />
+            <Search className="tw-size-4 tw-text-neutral-400" />
           </InputGroup.Addon>
           <InputGroup.Input
             ref={inputRef}

package/src/icons/index.ts

@@ -14,12 +14,14 @@ export {
   ArrowRight,
   ArrowRightLeft,
   ArrowUp,
+  ArrowUpAZ,
   ArrowUpRight,
   Ban,
   Bell,
   BellRing,
   Bold,
   BookOpen,
+  Box,
   Braces,
   Bug,
   Calendar,
@@ -99,6 +101,7 @@ export {
   Link,
   List,
   ListChecks,
+  ListFilter,
   ListOrdered,
   Loader2,
   Lock,
@@ -116,7 +119,11 @@ export {
   MoveHorizontal,
   MoveVertical,
   OctagonAlert,
+  PanelBottomClose,
+  PanelBottomOpen,
   PanelLeft,
+  PanelLeftClose,
+  PanelLeftOpen,
   PartyPopper,
   Pause,
   Pencil,
@@ -155,6 +162,7 @@ export {
   StickyNote,
   Strikethrough,
   Table,
+  TableProperties,
   ThumbsDown,
   ThumbsUp,
   ToggleRight,

package/src/index.ts

@@ -37,6 +37,7 @@ export * from './components/ThemeProvider';
 export * from './components/Avatar';
 export * from './components/MarkedText';
 export * from './components/Toggle';
+export * from './components/ToggleGroup';
 export * from './components/Timeline';
 export * from './components/Kbd';
 export * from './components/Collapsible';
@@ -80,6 +81,7 @@ export * from './blocks/AutoSaveTextarea';
 export * from './blocks/ColorInput';
 export * from './blocks/NumberInput';
 export * from './blocks/PasswordInput';
+export * from './blocks/InputOtp';
 export * from './blocks/Form';
 export { Truncated } from './components/Truncated';
 export * from './components/ZoomableSvg';