@keboola/design 2.0.0 → 2.1.0

package/src/components/Alert/AlertAction.tsx

@@ -1,31 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'> & {
-  asChild?: boolean;
-};
-
-export const AlertAction = ({
-  ref,
-  className,
-  asChild = false,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => {
-  const Comp = asChild ? Slot : 'div';
-  return (
-    <Comp
-      {...props}
-      ref={ref}
-      className={cn(
-        'tw-col-start-3',
-        'tw-row-start-1',
-        'tw-self-start',
-        'tw-flex',
-        'tw-gap-2',
-        className,
-      )}
-    />
-  );
-};

package/src/components/Alert/AlertCollapsibleIcon.tsx

@@ -1,25 +0,0 @@
-import { ChevronDown } from '../../icons';
-import { cn } from '../../utils';
-import { Tooltip } from '../Tooltip';
-
-type Props = {
-  open: boolean;
-};
-
-export const AlertCollapsibleIcon = ({ open }: Props) => (
-  <Tooltip placement="top" tooltip={open ? 'Collapse alert' : 'Expand alert'} triggerAsChild>
-    <ChevronDown
-      className={cn(
-        'tw-mt-px',
-        'tw-size-5',
-        'tw-text-neutral-400',
-        'group-data-[state=open]/alert:tw-rotate-180',
-
-        'group-data-[variant=info]/alert:group-hover:tw-text-secondary-600',
-        'group-data-[variant=warning]/alert:group-hover:tw-text-warning-600',
-        'group-data-[variant=error]/alert:group-hover:tw-text-error-600',
-        'group-data-[variant=success]/alert:group-hover:tw-text-primary-600',
-      )}
-    />
-  </Tooltip>
-);

package/src/components/Alert/AlertDescription.tsx

@@ -1,36 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const AlertDescription = ({
-  ref,
-  children,
-  className,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <div
-    {...rest}
-    ref={ref}
-    className={cn(
-      'tw-col-start-2',
-      'group-has-[[data-slot=alert-title]]/alert:tw-col-end-[-1]',
-
-      // spacer before description when a title exists (pseudo-element so it animates with Collapsible)
-      'group-has-[[data-slot=alert-title]]/alert:before:tw-block',
-      'group-has-[[data-slot=alert-title]]/alert:before:tw-h-4',
-      "group-has-[[data-slot=alert-title]]/alert:before:tw-content-['']",
-
-      'tw-break-anywhere',
-
-      // 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,
-    )}
-  >
-    {children}
-  </div>
-);

package/src/components/Alert/AlertIcon.tsx

@@ -1,40 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { AlertTriangle, CircleCheck, Info } from '../../icons';
-import { cn } from '../../utils';
-
-import type { Variant } from './AlertRoot';
-
-const VARIANT_ICONS: Record<Variant, ReactNode> = {
-  info: <Info />,
-  warning: <AlertTriangle />,
-  error: <AlertTriangle />,
-  success: <CircleCheck />,
-};
-
-type Props = {
-  variant: Variant;
-  icon?: ReactNode;
-} & Omit<ComponentProps<'span'>, 'children'>;
-
-export const AlertIcon = ({ variant, icon, className, ...rest }: Props) => (
-  <span
-    {...rest}
-    data-slot="alert-icon"
-    className={cn(
-      'tw-inline-flex',
-      'tw-items-center',
-      'tw-justify-center',
-      'tw-self-start',
-      'tw-p-0.5',
-      '[&_svg]:tw-size-4',
-      'group-data-[variant=info]/alert:tw-text-secondary-500',
-      'group-data-[variant=warning]/alert:tw-text-warning-500',
-      'group-data-[variant=error]/alert:tw-text-error-500',
-      'group-data-[variant=success]/alert:tw-text-primary-500',
-      className,
-    )}
-  >
-    {icon ?? VARIANT_ICONS[variant]}
-  </span>
-);

package/src/components/Alert/AlertRoot.tsx

@@ -1,64 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-export type Variant = 'info' | 'warning' | 'error' | 'success';
-
-type Props = {
-  variant?: Variant;
-  argo?: boolean;
-} & ComponentProps<'div'>;
-
-export const AlertRoot = ({
-  ref,
-  children,
-  className,
-  variant,
-  argo = false,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <div
-    {...rest}
-    ref={ref}
-    data-variant={variant}
-    data-argo={argo}
-    className={cn(
-      'tw-group/alert',
-
-      // layout
-      'tw-grid',
-      'tw-grid-cols-[0_1fr_auto]',
-      'has-[[data-slot=alert-icon]]:tw-grid-cols-[auto_1fr_auto]',
-      'has-[[data-slot=alert-icon]]:tw-gap-x-2',
-
-      // fonts
-      'tw-text-sm',
-      'tw-text-neutral-800',
-      'tw-text-left',
-
-      'tw-p-4',
-
-      // border
-      'tw-rounded',
-      'data-[argo=true]:tw-rounded-lg',
-      'tw-border',
-      'tw-border-solid',
-
-      // border variants
-      'data-[variant=info]:tw-bg-secondary-100',
-      'data-[variant=info]:tw-border-secondary-200',
-
-      'data-[variant=warning]:tw-bg-warning-100',
-      'data-[variant=warning]:tw-border-warning-300',
-
-      'data-[variant=error]:tw-bg-error-100',
-      'data-[variant=error]:tw-border-error-200',
-
-      'data-[variant=success]:tw-bg-primary-100',
-      'data-[variant=success]:tw-border-primary-200',
-      className,
-    )}
-  >
-    {children}
-  </div>
-);

package/src/components/Alert/AlertTitle.tsx

@@ -1,25 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const AlertTitle = ({
-  ref,
-  className,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <div
-    {...props}
-    ref={ref}
-    data-slot="alert-title"
-    className={cn(
-      'tw-group/alert-title',
-      'tw-flex',
-      'tw-col-start-2',
-      'tw-font-medium',
-      'tw-items-center',
-      className,
-    )}
-  />
-);

package/src/components/Alert/index.ts

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

package/src/components/Avatar.stories.tsx

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Avatar } from './Avatar';
-
-const meta: Meta<typeof Avatar> = {
-  component: Avatar,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Avatar>;
-
-export const EmailAndName: Story = {
-  args: {
-    user: {
-      name: 'John Doe',
-      email: 'test1@example.com',
-    },
-  },
-};
-
-export const NoUserParam: Story = {};

package/src/components/Avatar.tsx

@@ -1,88 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import BoringAvatar from 'boring-avatars';
-
-import { cn } from '@keboola/design';
-
-import { useSHA256 } from '../utils/useSHA256';
-
-const RANDOM_UUID = crypto.randomUUID();
-
-const styles = {
-  wrapper: {
-    position: 'relative',
-    display: 'inline-flex',
-    verticalAlign: 'middle',
-  },
-  gravatar: {
-    position: 'absolute',
-    left: 0,
-  },
-} as const;
-
-type Props = {
-  user?: {
-    name: string | undefined;
-    email: string | undefined;
-  };
-  fallback?: string;
-  className?: string;
-  size?: number;
-  variant?: 'circle' | 'rounded';
-} & ComponentProps<'span'>;
-
-export const Avatar = ({
-  ref,
-  user,
-  fallback,
-  size = 36,
-  className,
-  variant = 'circle',
-  ...props
-}: Props & { ref?: Ref<ElementRef<'span'>> }) => {
-  const userName = user?.name || user?.email;
-  const email = user?.email;
-  const hash = useSHA256(email ? email.trim().toLowerCase() : fallback || '');
-
-  return (
-    <span
-      {...props}
-      ref={ref}
-      style={styles.wrapper}
-      className={cn(
-        variant === 'circle' ? 'tw-rounded-full' : 'tw-rounded-md',
-        'tw-overflow-hidden',
-        'focus-visible:tw-outline-none',
-        'tw-h-fit',
-        'tw-shrink-0',
-
-        'tw-border-solid',
-        'tw-border',
-        'tw-border-transparent',
-
-        'focus-visible:tw-ring-4',
-        'focus-visible:tw-ring-secondary-200',
-        'focus-visible:tw-border-secondary-500',
-        className,
-      )}
-    >
-      <BoringAvatar
-        name={userName || fallback || RANDOM_UUID}
-        variant="beam"
-        colors={['#1F8FFF', '#004787', '#28D8FF', '#925cff', '#A8C2E6']}
-        size={size}
-        square={variant === 'rounded'}
-      />
-      {hash && (
-        <img
-          src={`https://secure.gravatar.com/avatar/${hash}?s=${size * 3}&d=blank`}
-          width={size}
-          height={size}
-          alt={userName || fallback || 'User avatar'}
-          referrerPolicy="no-referrer"
-          loading="lazy"
-          style={styles.gravatar}
-        />
-      )}
-    </span>
-  );
-};

package/src/components/Badge/Badge.stories.tsx

@@ -1,122 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Check, Info, Plus, X } from '@keboola/design/icons';
-
-import { Badge } from './Badge';
-
-const meta: Meta<typeof Badge> = {
-  component: Badge,
-  args: {
-    children: 'Beta',
-    prefixVariant: 'inline',
-    suffixVariant: 'inline',
-  },
-  argTypes: {
-    variant: {
-      control: 'radio',
-      options: ['default', 'tag', 'pill'],
-      description: 'Visual style variant of the badge',
-    },
-    color: {
-      control: 'select',
-      options: [
-        'gray',
-        'gray-darker',
-        'gray-inverse',
-        'green',
-        'green-darker',
-        'green-inverse',
-        'blue',
-        'blue-inverse',
-        'red',
-        'orange',
-        'orange-inverse',
-        'teal',
-        'teal-inverse',
-        'purple',
-        'purple-inverse',
-        'cyan',
-        'cyan-inverse',
-      ],
-      description: 'Color scheme of the badge',
-    },
-    prefixVariant: {
-      control: 'radio',
-      options: ['inline', 'floating'],
-      description: 'How the prefix addon is positioned',
-    },
-    suffixVariant: {
-      control: 'radio',
-      options: ['inline', 'floating'],
-      description: 'How the suffix addon is positioned',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Badge>;
-
-export const Default: Story = {
-  args: { children: 'Beta', color: 'blue' },
-};
-
-export const AsButton: Story = {
-  args: {
-    asChild: true,
-  },
-  render: (args) => (
-    <Badge {...args}>
-      <button
-        type="button"
-        onClick={() => {
-          alert('Tag Button clicked');
-        }}
-      >
-        Beta
-      </button>
-    </Badge>
-  ),
-};
-
-export const StartAddon: Story = {
-  args: {
-    prefix: (
-      <Badge.Button onClick={() => alert('Removed')} aria-label="Add">
-        <Plus className="tw-size-4" />
-      </Badge.Button>
-    ),
-  },
-};
-
-export const EndAddon: Story = {
-  args: {
-    suffix: (
-      <Badge.Button onClick={() => alert('Removed')} aria-label="Remove">
-        <X className="tw-size-4" />
-      </Badge.Button>
-    ),
-    prefixVariant: 'floating',
-  },
-};
-
-export const BothAddons: Story = {
-  args: {
-    prefix: (
-      <Badge.Button onClick={() => alert('Removed')} aria-label="Add">
-        <Plus className="tw-size-4" />
-      </Badge.Button>
-    ),
-    suffix: (
-      <Badge.Button onClick={() => alert('Removed')} aria-label="Remove">
-        <X className="tw-size-4" />
-      </Badge.Button>
-    ),
-  },
-};
-
-export const IconAddon: Story = {
-  args: {
-    prefix: <Info />,
-    suffix: <Check />,
-  },
-};

package/src/components/Badge/Badge.tsx

@@ -1,71 +0,0 @@
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-
-import { BadgeAddon } from './BadgeAddon';
-import { BadgeButton } from './BadgeButton';
-import { BadgeLabel } from './BadgeLabel';
-import { BadgeRoot } from './BadgeRoot';
-
-type AddonVariant = ComponentProps<typeof BadgeAddon>['variant'];
-type BadgeRootProps = ComponentProps<typeof BadgeRoot>;
-type BadgeLabelProps = ComponentProps<typeof BadgeLabel>;
-
-/**
- * Props for `Badge`. `color` is a categorical contract (`green` = success, `red` = error, `yellow` = warning,
- * `purple/cyan/teal/pink/blue/gray` for decorative tags) — colours stay fixed across brand themes.
- * Pass `prefix` / `suffix` for icon-style addons.
- */
-type Props = Pick<BadgeRootProps, 'variant' | 'color'> &
-  Omit<BadgeLabelProps, 'prefix'> & {
-    prefix?: ReactNode;
-    prefixVariant?: AddonVariant;
-    suffix?: ReactNode;
-    suffixVariant?: AddonVariant;
-    labelClassName?: string;
-  };
-
-/**
- * Compact status / category label rendered as an inline pill.
- *
- * **When to use:** encoding status (active, deprecated, beta), counts, or decorative tags next to a title
- * or in a table cell. The `color` prop is a semantic contract — `green` means success, `red` means error
- * etc., and colours are intentionally stable across customer brand themes.
- * **When NOT to use:** for an inline action use `Button` / `ButtonInline`; for a persistent contextual
- * banner use `Alert`; for a counter-only chip prefer `Badge` with just a numeric label.
- * **Composition:** drop into `PageHeader.Detail` `badges` slot, `Table.Cell`, or alongside titles in cards.
- * Use `Badge.Button` for an interactive (clickable) badge variant.
- */
-const BadgeInner = ({
-  ref,
-  // root props
-  variant,
-  color,
-  // custom props
-  prefix,
-  prefixVariant = 'inline',
-  suffix,
-  suffixVariant = 'inline',
-  className,
-  labelClassName,
-  ...labelProps
-}: Props & { ref?: Ref<ElementRef<'span'>> }) => (
-  <BadgeRoot className={className} variant={variant} color={color}>
-    {prefix && (
-      <BadgeAddon align="inline-start" variant={prefixVariant}>
-        {prefix}
-      </BadgeAddon>
-    )}
-    <BadgeLabel {...labelProps} ref={ref} className={labelClassName} />
-    {suffix && (
-      <BadgeAddon align="inline-end" variant={suffixVariant}>
-        {suffix}
-      </BadgeAddon>
-    )}
-  </BadgeRoot>
-);
-
-export const Badge = Object.assign(BadgeInner, {
-  Root: BadgeRoot,
-  Button: BadgeButton,
-  Label: BadgeLabel,
-  Addon: BadgeAddon,
-});

package/src/components/Badge/BadgeAddon.tsx

@@ -1,63 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../utils';
-
-const addonVariants = cva(
-  [
-    'tw-flex',
-    'tw-items-center',
-    'tw-shrink-0',
-    'tw-bg-inherit',
-    'tw-self-stretch',
-    'tw-px-1',
-    'has-[button]:tw-px-0',
-    '[&_svg]:tw-size-3',
-  ],
-  {
-    defaultVariants: {
-      align: 'inline-end',
-      variant: 'inline',
-    },
-    variants: {
-      align: {
-        'inline-start': ['tw-order-first'],
-        'inline-end': ['tw-order-last'],
-      },
-      variant: {
-        inline: [],
-        floating: [
-          'tw-hidden',
-          'group-hover/badge:tw-flex',
-
-          'tw-absolute',
-          'tw-top-0',
-          'tw-bottom-0',
-          'focus-within:tw-flex',
-        ],
-      },
-    },
-    compoundVariants: [
-      { variant: 'floating', align: 'inline-end', className: ['tw-right-0'] },
-      { variant: 'floating', align: 'inline-start', className: ['tw-left-0'] },
-    ],
-  },
-);
-
-type Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;
-
-export const BadgeAddon = ({
-  ref,
-  align = 'inline-end',
-  variant = 'inline',
-  className,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <div
-    {...rest}
-    ref={ref}
-    data-align={align}
-    data-variant={variant}
-    className={cn(addonVariants({ align, variant, className }))}
-  />
-);

package/src/components/Badge/BadgeButton.tsx

@@ -1,40 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'button'>;
-
-export const BadgeButton = ({
-  ref,
-  className,
-  type = 'button',
-  children,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
-  <button
-    {...rest}
-    ref={ref}
-    type={type}
-    className={cn(
-      'tailwindcss-preflight',
-
-      'tw-inline-flex',
-      'tw-items-center',
-      'tw-justify-center',
-      'tw-cursor-pointer',
-
-      'tw-bg-inherit',
-      'tw-text-inherit',
-
-      'hover:tw-brightness-95',
-      'tw-px-1',
-      // Default sizing for Lucide-icon children (which ship at 24×24); keeps
-      // the visual baseline aligned with the previous FA-icon API and other
-      // icon-wrapper components (ItemIcon, SidebarMenuIcon).
-      '[&_svg]:tw-size-3',
-      className,
-    )}
-  >
-    {children}
-  </button>
-);

package/src/components/Badge/BadgeLabel.tsx

@@ -1,37 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'span'> & {
-  asChild?: boolean;
-};
-
-export const BadgeLabel = ({
-  ref,
-  className,
-  asChild = false,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'span'>> }) => {
-  const Comp = asChild ? Slot : 'span';
-  return (
-    <Comp
-      {...rest}
-      ref={ref}
-      data-slot="badge-label"
-      className={cn(
-        'tw-max-w-56',
-        'tw-truncate',
-        'tw-px-2',
-        'tw-py-0.5',
-
-        // Drop side padding only when an *inline* addon is present —
-        // floating addons overlay the label without taking layout space,
-        // so the label still needs full padding behind them.
-        'group-has-[[data-align=inline-start][data-variant=inline]:not(:empty)]/badge:tw-pl-0',
-        'group-has-[[data-align=inline-end][data-variant=inline]:not(:empty)]/badge:tw-pr-0',
-        className,
-      )}
-    />
-  );
-};