@keboola/design 1.0.0

package/src/components/Toast/ToastAction.tsx

@@ -0,0 +1,40 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'button'>;
+
+export const ToastAction = ({
+  ref,
+  className,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
+  <button
+    {...rest}
+    ref={ref}
+    data-slot="toast-action"
+    type="button"
+    className={cn(
+      // layout
+      'tw-col-start-3',
+      'tw-row-start-1',
+      'tw-flex',
+      'tw-items-center',
+      'tw-justify-center',
+
+      // font
+      'tw-text-xs',
+      'tw-font-medium',
+      'tw-text-primary',
+
+      // sizing
+      'tw-px-2',
+      'tw-h-6',
+
+      // styles
+      'tw-bg-primary-foreground',
+      'tw-rounded',
+      className,
+    )}
+  />
+);

package/src/components/Toast/ToastDescription.tsx

@@ -0,0 +1,28 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'div'>;
+
+export const ToastDescription = ({
+  ref,
+  className,
+  children,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <div
+    ref={ref}
+    data-slot="toast-description"
+    className={cn(
+      'tw-col-start-2',
+      'tw-font-normal',
+      'tw-break-words',
+      'tw-text-white',
+      'group-data-[variant=default]/toast:tw-text-muted-foreground',
+      className,
+    )}
+    {...rest}
+  >
+    {children}
+  </div>
+);

package/src/components/Toast/ToastDismiss.tsx

@@ -0,0 +1,36 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+type Props = ComponentProps<'button'>;
+
+export const ToastDismiss = ({
+  ref,
+  className,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
+  <button
+    ref={ref}
+    data-slot="toast-dismiss"
+    className={cn(
+      'tw-flex',
+      'tw-justify-center',
+      'tw-col-start-4',
+      'tw-row-start-1',
+      'tailwindcss-preflight',
+      '[&_svg]:tw-aspect-square',
+      '[&_svg]:tw-size-4',
+      '[&_svg]:tw-p-1',
+
+      'tw-text-white',
+      'group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground',
+      className,
+    )}
+    type="button"
+    {...rest}
+  >
+    <Icon icon="times" />
+    <span className="tw-sr-only">Dismiss</span>
+  </button>
+);

package/src/components/Toast/ToastDuration.tsx

@@ -0,0 +1,43 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+type ToastDurationProps = ComponentProps<'span'> & {
+  duration: number;
+};
+
+export const ToastDuration = ({
+  ref,
+  duration,
+  className,
+  style,
+  ...rest
+}: ToastDurationProps & { ref?: Ref<ElementRef<'span'>> }) => (
+  <span
+    {...rest}
+    ref={ref}
+    className={cn(
+      'tw-bg-white/30',
+      'group-data-[variant=default]/toast:tw-bg-popover-foreground/20',
+      'tw-rounded-bl-lg',
+      'tw-mx-px',
+
+      // positioning
+      'tw-absolute',
+      'tw-bottom-0',
+      'tw-left-0',
+
+      // sizing
+      'tw-h-1',
+
+      // animation
+      'tw-animate-toast-progress',
+      'group-hover/toast:[animation-play-state:paused]',
+      className,
+    )}
+    style={{
+      animationDuration: `${duration}ms`,
+      ...style,
+    }}
+  />
+);

package/src/components/Toast/ToastRoot.tsx

@@ -0,0 +1,130 @@
+import type { ComponentProps, MouseEventHandler, ReactNode } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import { type Action, toast as sonnerToast } from 'sonner';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+import { ToastAction } from './ToastAction';
+import { ToastDescription } from './ToastDescription';
+import { ToastDismiss } from './ToastDismiss';
+import { ToastDuration } from './ToastDuration';
+import { ToastTitle } from './ToastTitle';
+
+const variants = cva(
+  [
+    'tailwindcss-preflight',
+    'tw-group/toast',
+    'tw-relative',
+
+    // layout
+    'tw-grid',
+    'tw-grid-cols-[0_1fr_auto_auto]',
+    'tw-items-start',
+    'has-[[data-slot=toast-description]]:tw-grid-rows-[auto_auto]',
+    'has-[[data-slot=toast-icon]]:tw-grid-cols-[auto_1fr_auto_auto]',
+    '[&_[data-slot=toast-icon]]:tw-mr-2',
+    '[&_[data-slot=toast-title]]:tw-mr-2.5',
+    '[&_[data-slot=toast-description]]:tw-mr-2.5',
+    '[&_[data-slot=toast-action]]:tw-mr-2',
+    '[&_[data-slot=toast-description]]:tw-col-end-3',
+    'tw-gap-y-0',
+
+    // styles
+    'tw-p-4',
+    'tw-rounded-lg',
+    'tw-shadow-md',
+  ],
+  {
+    defaultVariants: {
+      variant: 'info',
+    },
+    variants: {
+      variant: {
+        default: 'tw-border tw-border-border tw-bg-popover',
+        error: 'tw-bg-error-550',
+        info: 'tw-bg-secondary-600',
+        success: 'tw-bg-primary-700',
+        warning: 'tw-bg-warning-550',
+      },
+    },
+  },
+);
+
+type Variants = VariantProps<typeof variants>;
+type Variant = NonNullable<Variants['variant']>;
+type VariantIcon = Exclude<Variant, 'default'>;
+type Icon = ComponentProps<typeof Icon>['icon'];
+
+type Props = {
+  id: string | number;
+  title: ReactNode;
+  icon?: Icon;
+  description?: ReactNode;
+  action?: Action;
+  loading?: boolean;
+  duration?: number;
+  // offset?: number;
+} & Variants;
+
+const DEFAULT_VARIANT_ICON: Record<VariantIcon, ComponentProps<typeof Icon>['icon']> = {
+  error: 'exclamation-triangle',
+  info: 'info-circle',
+  success: 'check-circle',
+  warning: 'exclamation-circle',
+};
+
+export const ToastRoot = ({
+  id,
+  title,
+  description,
+  action,
+  duration = Infinity,
+  variant = 'info',
+  loading = false,
+  icon: iconProp,
+}: Props) => {
+  const icon: Icon | null = (() => {
+    if (loading) return 'spinner';
+    if (iconProp) return iconProp;
+    if (variant === 'default' || variant === null) return null;
+    return DEFAULT_VARIANT_ICON[variant];
+  })();
+
+  const handleActionClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    sonnerToast.dismiss(id);
+    action?.onClick(event);
+  };
+
+  return (
+    <div data-variant={variant} className={cn(variants({ variant }))}>
+      {icon && (
+        <Icon
+          data-slot="toast-icon"
+          spin={loading}
+          className={cn(
+            // styles
+            'tw-aspect-square',
+            'tw-size-4',
+            'tw-shrink-0',
+            'tw-p-1',
+            'tw-text-white',
+            'group-data-[variant=default]/toast:tw-text-popover-foreground',
+          )}
+          icon={icon}
+        />
+      )}
+
+      <ToastTitle>{title}</ToastTitle>
+      {description && <ToastDescription>{description}</ToastDescription>}
+      {action && (
+        <ToastAction style={action?.actionButtonStyle} onClick={handleActionClick}>
+          {action.label}
+        </ToastAction>
+      )}
+      <ToastDismiss onClick={() => sonnerToast.dismiss(id)} />
+      {duration !== Infinity && <ToastDuration duration={duration} />}
+    </div>
+  );
+};

package/src/components/Toast/ToastTitle.tsx

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

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

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

package/src/components/Toast/toast.tsx

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

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

@@ -0,0 +1,67 @@
+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,
+  },
+};