@keboola/design 2.0.1 → 3.0.0

package/src/components/Toast/ToastTitle.tsx

@@ -1,33 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const ToastTitle = ({
-  ref,
-  className,
-  children,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <div
-    ref={ref}
-    data-slot="toast-title"
-    className={cn(
-      'tw-col-start-2',
-      'tw-text-sm',
-      'tw-leading-6',
-      'tw-min-h-6',
-      'tw-self-center',
-      'tw-text-white',
-      'group-data-[variant=default]/toast:tw-text-popover-foreground',
-
-      'tw-break-words',
-      'tw-font-medium',
-      className,
-    )}
-    {...rest}
-  >
-    {children}
-  </div>
-);

package/src/components/Toast/Toaster.tsx

@@ -1,25 +0,0 @@
-import type { ComponentProps, PointerEvent } from 'react';
-import { Toaster as SonnerToaster } from 'sonner';
-
-type ToasterProps = ComponentProps<typeof SonnerToaster>;
-
-const DEFAULT_STYLES = {
-  '--width': '512px', // match max-w-lg
-} as React.CSSProperties;
-
-const stopPropagation = (event: PointerEvent) => event.stopPropagation();
-
-export const Toaster = ({ gap = 12, visibleToasts = 5, ...props }: ToasterProps) => (
-  // Wrapper prevents toast clicks from reaching Radix Dialog's DismissableLayer,
-  // which would otherwise close the modal on any "outside" pointer event.
-  // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
-  <div onPointerDown={stopPropagation}>
-    <SonnerToaster
-      {...props}
-      gap={gap}
-      visibleToasts={visibleToasts}
-      className="tw-pointer-events-auto tw-flex tw-w-full tw-max-w-lg tw-justify-center"
-      style={DEFAULT_STYLES}
-    />
-  </div>
-);

package/src/components/Toast/index.ts

@@ -1,3 +0,0 @@
-export { useNotification } from './useNotification';
-export { toast, type ToastOptions } from './toast';
-export { Toaster } from './Toaster';

package/src/components/Toast/toast.tsx

@@ -1,94 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import { type ExternalToast, toast as sonnerToast } from 'sonner';
-
-import { cn } from '../../utils';
-
-import { ToastRoot } from './ToastRoot';
-
-type ToastProps = ComponentProps<typeof ToastRoot>;
-type Title = ToastProps['title'] | ((opts: { dismiss: () => void }) => ReactNode);
-
-export type ToastOptions = { id?: string | number; title: Title } & Omit<
-  ToastProps,
-  'id' | 'title'
-> &
-  Pick<
-    ExternalToast,
-    'onAutoClose' | 'onDismiss' | 'testId' | 'toasterId' | 'dismissible' | 'position'
-  >;
-type DerivedToastOptions = Omit<ToastOptions, 'title' | 'variant'>;
-
-export const toast = ({
-  onAutoClose,
-  onDismiss,
-  testId,
-  toasterId,
-  dismissible = true,
-  position,
-  title: titleProp,
-  ...toast
-}: ToastOptions) => {
-  const duration = (() => {
-    if (typeof toast.duration === 'number') return toast.duration;
-    if (toast.variant === 'error' || toast.variant === 'warning') return Infinity;
-    return toast.duration ?? 5000;
-  })();
-
-  const renderCustomToast: Parameters<typeof sonnerToast.custom>[0] = (id) => {
-    const title =
-      typeof titleProp === 'function'
-        ? titleProp({ dismiss: () => sonnerToast.dismiss(id) })
-        : titleProp;
-
-    return <ToastRoot {...toast} id={id} title={title} duration={duration} />;
-  };
-
-  return sonnerToast.custom(renderCustomToast, {
-    // toast generated by sonner will always have an id, but we want to allow users to specify their own id if they want to
-    // can not pass undefined, as it will break dismiss
-    ...(toast.id != null ? { id: toast.id } : {}),
-    unstyled: true,
-    position,
-    onAutoClose,
-    onDismiss,
-    testId,
-    toasterId,
-    dismissible,
-    duration,
-    // override defult focus-visible styles to match our design
-    className: cn('tw-rounded-lg', 'focus-visible:!tw-ring-4', 'focus-visible:!tw-ring-primary/50'),
-  });
-};
-
-toast.success = (title: Title, options?: DerivedToastOptions) =>
-  toast({
-    ...options,
-    title,
-    variant: 'success',
-  });
-
-toast.error = (title: Title, options?: DerivedToastOptions) =>
-  toast({
-    ...options,
-    title,
-    variant: 'error',
-    duration: options?.duration ?? Infinity,
-  });
-
-toast.warning = (title: Title, options?: DerivedToastOptions) =>
-  toast({
-    ...options,
-    title,
-    variant: 'warning',
-    duration: options?.duration ?? Infinity,
-  });
-
-toast.info = (title: Title, options?: DerivedToastOptions) =>
-  toast({
-    ...options,
-    title,
-    variant: 'info',
-  });
-
-toast.dismiss = (toastId?: ToastOptions['id']) => sonnerToast.dismiss(toastId);
-toast.dismissAll = () => sonnerToast.dismiss();

package/src/components/Toast/useNotification.tsx

@@ -1,33 +0,0 @@
-import { useEffect } from 'react';
-
-import { toast } from './toast';
-
-type Props = {
-  enabled?: boolean;
-} & Parameters<typeof toast>[0];
-
-/**
- * Declarative notification component built on top of sonner/toast.
- *
- * Use `Notification` for persistent, system-driven messages that require user acknowledgment
- * (e.g., trial expiration warnings, upgrade prompts, billing alerts).
- * The notification stays visible until the user dismisses it or the component unmounts.
- *
- * Use `toast()` for transient feedback after a user action
- * (e.g., "Saved", "Copied", "Deleted") that auto-dismisses after a few seconds.
- */
-export const useNotification = ({ enabled = true, ...toastOptions }: Props) => {
-  useEffect(() => {
-    if (!enabled) return;
-    let toastId: string | number | undefined;
-    const frameId = requestAnimationFrame(() => {
-      toastId = toast({ ...toastOptions, duration: toastOptions.duration ?? Infinity });
-    });
-
-    return () => {
-      cancelAnimationFrame(frameId);
-      toast.dismiss(toastId);
-    };
-    // oxlint-disable-next-line react/exhaustive-deps -- we only want to trigger this effect when enabled changes, not when other toast options change
-  }, [enabled]);
-};

package/src/components/Toggle/Toggle.stories.tsx

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Badge } from '../Badge';
-
-import { Toggle } from './Toggle';
-
-export default {
-  component: Toggle,
-  args: {
-    children: 'AI',
-    icon: ['far', 'sparkles'],
-    disabled: false,
-    size: 'medium',
-    variant: 'ai',
-    badge: (
-      <Badge color="blue" variant="pill">
-        Beta
-      </Badge>
-    ),
-  },
-  argTypes: {
-    size: {
-      type: { name: 'enum', value: ['small', 'medium', 'large'] },
-    },
-    variant: {
-      type: { name: 'enum', value: ['ai', 'ai-vivid', 'ghost'] },
-    },
-  },
-} satisfies Meta<typeof Toggle>;
-
-type Story = StoryObj<typeof Toggle>;
-
-export const Default: Story = {};
-
-export const Ghost: Story = {
-  args: {
-    variant: 'ghost',
-    children: 'Toggle',
-    badge: undefined,
-  },
-};
-
-export const AiVivid: Story = {
-  args: {
-    variant: 'ai-vivid',
-    size: 'small',
-    badge: null,
-    children: (
-      <>
-        Kai Assistant
-        <Badge color="white" variant="pill">
-          Beta
-        </Badge>
-      </>
-    ),
-    icon: ['far', 'sparkles'],
-  },
-};
-
-export const GhostIconOnly: Story = {
-  args: {
-    variant: 'ghost',
-    children: undefined,
-    icon: 'eye',
-    badge: undefined,
-  },
-};

package/src/components/Toggle/Toggle.tsx

@@ -1,202 +0,0 @@
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-import { Root } from '@radix-ui/react-toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../utils';
-import { renderLegacyIcon } from '../../utils/legacyIcon';
-
-const toggleVariants = cva(
-  [
-    'tailwindcss-preflight',
-
-    // layout
-    'tw-relative',
-    'tw-flex',
-    'tw-items-center',
-    'tw-justify-center',
-    'tw-gap-2',
-
-    // text
-    'tw-uppercase',
-    'tw-text-xs',
-    'tw-leading-5',
-    'tw-font-medium',
-    'tw-tracking-[1px]',
-
-    // border
-    'tw-border',
-
-    // style
-    'tw-rounded',
-    'tw-whitespace-nowrap',
-
-    // transitions
-    'tw-transition-colors',
-    'tw-duration-100',
-    'tw-ease-linear',
-    '[&_svg]:tw-transition-colors',
-    '[&_svg]:tw-duration-100',
-    '[&_svg]:tw-ease-linear',
-
-    // hover
-    'not-disabled:hover:tw-border-neutral-300',
-    'not-disabled:hover:tw-bg-neutral-100',
-
-    'disabled:tw-opacity-50',
-    'disabled:tw-cursor-not-allowed',
-
-    // focus-visible
-    '[&:not(:active)]:not-disabled:focus-visible:tw-outline',
-    '!tw-outline-offset-0',
-    '[&:not(:active)]:not-disabled:focus-visible:tw-outline-secondary-500',
-    '[&:not(:active)]:not-disabled:focus-visible:tw-outline-1',
-    '[&:not(:active)]:not-disabled:focus-visible:tw-shadow-[0_0_0_4px_rgba(31,143,255,0.2)]',
-  ],
-  {
-    variants: {
-      variant: {
-        ai: [
-          'tw-border-0',
-
-          // off state
-          'aria-[pressed=false]:tw-bg-gradient-to-br',
-          'aria-[pressed=false]:tw-from-secondary-100',
-          'aria-[pressed=false]:tw-to-purple-100',
-          'hover:aria-[pressed=false]:tw-from-secondary-200',
-          'hover:aria-[pressed=false]:tw-to-purple-200',
-
-          // on state
-          'aria-pressed:tw-bg-gradient-to-br',
-          'aria-pressed:tw-from-secondary-600',
-          'aria-pressed:tw-to-purple-600',
-          'hover:aria-pressed:tw-from-secondary-700',
-          'hover:aria-pressed:tw-to-purple-700',
-
-          // icon color - gradient stroke when off, white stroke when on.
-          // Lucide icons are stroke-based; targeting every shape (`*`)
-          // catches paths, circles, and other non-path sub-shapes so the
-          // whole glyph picks up the gradient.
-          '[&_*]:tw-stroke-aigradient-600',
-          '[&_*]:aria-pressed:tw-stroke-white',
-          '*:aria-pressed:tw-text-white',
-        ],
-        'ai-vivid': [
-          'tw-border-0',
-          'tw-rounded-lg',
-          'tw-normal-case',
-          'tw-tracking-normal',
-          'tw-gap-1.5',
-
-          // default: sky → violet gradient, white text
-          'tw-bg-gradient-to-br',
-          'tw-from-sky-400',
-          'tw-via-sky-600',
-          'tw-to-violet-600',
-          'tw-text-white',
-
-          // hover: light sky bg, dark text
-          'not-disabled:hover:tw-bg-none',
-          'not-disabled:hover:tw-bg-sky-100',
-          'not-disabled:hover:tw-border-transparent',
-          'not-disabled:hover:tw-text-sky-700',
-          'not-disabled:hover:[&_svg]:tw-text-sky-700',
-
-          // pressed: dark navy gradient, white
-          'aria-[pressed=true]:tw-bg-gradient-to-br',
-          'aria-[pressed=true]:tw-from-sky-700',
-          'aria-[pressed=true]:tw-to-sky-900',
-          'aria-[pressed=true]:tw-text-white',
-          'aria-[pressed=true]:[&_svg]:tw-text-white',
-        ],
-        ghost: [
-          'tw-border-0',
-          'tw-rounded-lg',
-
-          // default state - transparent background
-          'tw-bg-transparent',
-          '[&_svg]:tw-text-neutral-400',
-
-          // hover state
-          'not-disabled:hover:tw-bg-neutral-100',
-          '[&_svg]:not-disabled:hover:tw-text-secondary-500',
-
-          // pressed state
-          'aria-pressed:tw-bg-secondary-100',
-          '[&_svg]:aria-pressed:tw-text-secondary-500',
-
-          // hover on pressed state
-          'not-disabled:hover:aria-pressed:tw-bg-secondary-200',
-          '[&_svg]:not-disabled:hover:aria-pressed:tw-text-secondary-600',
-        ],
-      },
-      size: {
-        small: 'tw-max-h-8 tw-min-h-8 tw-px-2 tw-py-1.5',
-        medium: 'tw-max-h-10 tw-min-h-10 tw-px-4 tw-py-2.5',
-        large: 'tw-max-h-12 tw-min-h-12 tw-px-4 tw-py-3.5',
-      },
-      iconOnly: {
-        true: 'tw-p-0',
-        false: '',
-      },
-    },
-    compoundVariants: [
-      { iconOnly: true, size: 'small', className: 'tw-size-8' },
-      { iconOnly: true, size: 'medium', className: 'tw-size-10' },
-      { iconOnly: true, size: 'large', className: 'tw-size-12' },
-    ],
-    defaultVariants: {
-      variant: 'ai',
-      size: 'medium',
-      iconOnly: false,
-    },
-  },
-);
-
-type Props = {
-  icon?: ReactNode;
-  badge?: ReactNode;
-} & ComponentProps<typeof Root> &
-  Omit<VariantProps<typeof toggleVariants>, 'iconOnly'>;
-
-export const Toggle = ({
-  ref,
-  className,
-  variant = 'ai',
-  size = 'medium',
-  children,
-  icon,
-  badge,
-  disabled = false,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const isAiVariant = variant === 'ai';
-  const isIconOnly = Boolean(icon && children == null);
-
-  return (
-    <Root
-      {...props}
-      ref={ref}
-      className={cn(toggleVariants({ variant, size, iconOnly: isIconOnly, className }))}
-      disabled={disabled}
-    >
-      {badge && (
-        <span className="tw-absolute tw-right-0 tw-top-0 -tw-translate-y-1/2 tw-translate-x-1/4">
-          {badge}
-        </span>
-      )}
-      {icon && (
-        <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>
-      )}
-
-      {isAiVariant ? (
-        <div className="tw-bg-gradient-to-br tw-from-secondary-700 tw-to-purple-700 tw-bg-clip-text tw-text-transparent">
-          {children}
-        </div>
-      ) : (
-        children
-      )}
-    </Root>
-  );
-};

package/src/components/Toggle/index.ts

@@ -1 +0,0 @@
-export * from './Toggle';

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

@@ -1,60 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

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