@keboola/design 1.0.0

package/src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx

@@ -0,0 +1,52 @@
+import type { ComponentProps } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../utils';
+
+import { DropdownMenuItemIndicator } from './DropdownMenuItemIndicator';
+import { ItemIcon } from './ItemIcon';
+import { itemVariants } from './styles';
+
+type Props = ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  closeOnSelect?: boolean;
+  indicator?: 'switch' | 'checkbox' | 'check';
+  indicatorAlign?: 'start' | 'end';
+  isLoading?: boolean;
+};
+
+export const DropdownMenuCheckboxItem = ({
+  className,
+  children,
+  checked,
+  closeOnSelect = false,
+  onSelect,
+  indicatorAlign = 'start',
+  indicator = 'checkbox',
+  isLoading = false,
+  ...props
+}: Props) => {
+  const isAtStart = indicatorAlign === 'start';
+  const indicatorEle = isLoading ? (
+    <ItemIcon spin icon="spinner" className={isAtStart ? '' : 'tw-ml-auto'} />
+  ) : (
+    <DropdownMenuItemIndicator variant={indicator} className={isAtStart ? '' : 'tw-ml-auto'} />
+  );
+
+  const handleSelect = (event: Event) => {
+    if (!closeOnSelect) event.preventDefault();
+    onSelect?.(event);
+  };
+
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      className={cn(itemVariants, className)}
+      checked={checked}
+      onSelect={handleSelect}
+      {...props}
+    >
+      {isAtStart && indicatorEle}
+      {children}
+      {!isAtStart && indicatorEle}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+};

package/src/components/DropdownMenu/DropdownMenuContent.tsx

@@ -0,0 +1,52 @@
+import type { ComponentProps } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../utils';
+import { ScrollArea } from '../ScrollArea';
+
+import { useDropdownMenuContext } from './DropdownMenuContext';
+import { contentVariants } from './styles';
+
+type Props = Omit<
+  ComponentProps<typeof DropdownMenuPrimitive.Content>,
+  'forceMount' | 'asChild'
+> & {
+  forceMount?: boolean;
+  viewPortClassName?: string;
+  container?: HTMLElement | null;
+};
+
+export const DropdownMenuContent = ({
+  className,
+  sideOffset = 4,
+  forceMount,
+  children,
+  viewPortClassName,
+  container,
+  ...props
+}: Props) => {
+  const { variant } = useDropdownMenuContext();
+
+  return (
+    <DropdownMenuPrimitive.Portal forceMount={forceMount || undefined} container={container}>
+      <DropdownMenuPrimitive.Content
+        {...props}
+        data-variant={variant}
+        sideOffset={sideOffset}
+        className={contentVariants}
+      >
+        <ScrollArea
+          className={className}
+          viewPortClassName={cn(
+            'tw-p-2',
+            'tw-max-h-[var(--radix-dropdown-menu-content-available-height)]',
+            viewPortClassName,
+          )}
+          scrollBarClassName="tw-w-1.5"
+        >
+          {children}
+        </ScrollArea>
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  );
+};

package/src/components/DropdownMenu/DropdownMenuContext.tsx

@@ -0,0 +1,13 @@
+import { createContext, use } from 'react';
+
+export type DropdownMenuVariant = 'default' | 'argo';
+
+type DropdownMenuContextType = {
+  variant: DropdownMenuVariant;
+};
+
+export const DropdownMenuContext = createContext<DropdownMenuContextType>({
+  variant: 'default',
+});
+
+export const useDropdownMenuContext = () => use(DropdownMenuContext);

package/src/components/DropdownMenu/DropdownMenuItem.tsx

@@ -0,0 +1,74 @@
+import type { ComponentProps, ElementRef, PointerEventHandler, Ref } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Root, Slottable } from '@radix-ui/react-slot';
+
+import { cn } from '../../utils';
+import type { Icon } from '../Icon';
+
+import { ItemIcon } from './ItemIcon';
+import { itemVariants } from './styles';
+
+type Props = ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  /**
+   * Fix for `autoFocus` on inputs not working correctly in modals.
+   * While the DropdownMenuItem was animating out and the modal was animating in, the dying DropdownMenuItem was constantly trying to steal focus while the Dialog was trying to correctly set the new focus.
+   * https://github.com/radix-ui/primitives/issues/2193#issuecomment-2758461323
+   */
+  asModalTrigger?: boolean;
+  icon?: ComponentProps<typeof Icon>['icon'];
+  isLoading?: boolean;
+  iconClassName?: string;
+};
+
+export const DropdownMenuItem = ({
+  ref,
+  className,
+  asModalTrigger = false,
+  onSelect,
+  onPointerLeave,
+  onPointerMove,
+  children,
+  asChild,
+  icon: iconProp,
+  iconClassName,
+  isLoading = false,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => {
+  const Comp = asChild ? Root : 'div';
+  const icon = isLoading ? 'spinner' : iconProp;
+
+  const handleOnSelect = (event: Event) => {
+    // prevents dropdown menu from closing to prevent modal unmounting from dom
+    if (asModalTrigger) event.preventDefault();
+    onSelect?.(event);
+  };
+
+  const handlePointerLeave: PointerEventHandler<HTMLDivElement> = (event) => {
+    // prevents focus stealing from modal
+    if (asModalTrigger) event.preventDefault();
+    onPointerLeave?.(event);
+  };
+
+  const handlePointerMove: PointerEventHandler<HTMLDivElement> = (event) => {
+    // prevents focus stealing from modal
+    if (asModalTrigger) event.preventDefault();
+    onPointerMove?.(event);
+  };
+
+  return (
+    <DropdownMenuPrimitive.Item
+      {...props}
+      ref={ref}
+      onSelect={handleOnSelect}
+      onPointerLeave={handlePointerLeave}
+      onPointerMove={handlePointerMove}
+      className={cn(itemVariants, className)}
+      asChild
+    >
+      <Comp>
+        {icon && <ItemIcon spin={isLoading} icon={icon} className={iconClassName} />}
+        <Slottable>{children}</Slottable>
+      </Comp>
+    </DropdownMenuPrimitive.Item>
+  );
+};

package/src/components/DropdownMenu/DropdownMenuItemDescription.tsx

@@ -0,0 +1,42 @@
+import type { ComponentProps } from 'react';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+
+const descriptionVariants = cva(
+  [
+    'tw-box-border',
+    'tw-ml-auto',
+    'tw-font-sans',
+    'tw-tracking-normal',
+    'tw-font-normal',
+    'tw-text-xs',
+    'tw-text-muted-foreground',
+  ],
+  {
+    variants: {
+      hideOnHover: {
+        true: ['group-focus-within:tw-hidden', 'group-hover:tw-hidden'],
+        false: [],
+      },
+    },
+    defaultVariants: {},
+  },
+);
+
+type Props = ComponentProps<'span'> & {
+  hideOnHover?: boolean;
+};
+
+export const DropdownMenuItemDescription = ({
+  className,
+  children,
+  hideOnHover = false,
+  ...props
+}: Props) => {
+  return (
+    <span {...props} className={cn(descriptionVariants({ hideOnHover }), className)}>
+      {children}
+    </span>
+  );
+};

package/src/components/DropdownMenu/DropdownMenuItemIndicator.tsx

@@ -0,0 +1,98 @@
+import type { ComponentProps } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+import { Icon } from '../Icon';
+
+const variants = cva(
+  [
+    'tailwindcss-preflight',
+    'tw-pointer-events-none',
+
+    // sizing
+    'tw-size-4',
+    'tw-aspect-square',
+    'tw-shrink-0',
+
+    // layout
+    'tw-flex',
+    'tw-items-center',
+    'tw-justify-center',
+  ],
+  {
+    variants: {
+      variant: {
+        none: [],
+        radio: [
+          'tw-border',
+          'tw-border-solid',
+          'tw-border-border',
+          'tw-rounded-full',
+          'tw-bg-white',
+
+          '[&_svg]:tw-size-2',
+          '[&_svg]:data-[state=unchecked]:tw-hidden',
+          'group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary',
+          'group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500',
+        ],
+        check: ['[&_svg]:tw-size-3.5', '[&_svg]:tw-text-primary'],
+        checkbox: [
+          '[&_svg]:tw-text-white',
+          'tw-border',
+          'tw-border-solid',
+          'tw-border-neutral-200',
+          'tw-rounded',
+
+          '[&_svg]:tw-size-3',
+          '[&_svg]:data-[state=unchecked]:tw-hidden',
+          'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-border-primary',
+          'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary',
+          'group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-border-secondary-500',
+          'group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-bg-secondary-500',
+        ],
+        switch: [
+          'tw-size-5',
+          'tw-text-neutral-400',
+          'data-[state=unchecked]:tw-rotate-180',
+          'group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500',
+          'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-text-primary',
+        ],
+      },
+    },
+  },
+);
+
+type Props = ComponentProps<typeof DropdownMenuPrimitive.ItemIndicator> &
+  VariantProps<typeof variants>;
+
+export const DropdownMenuItemIndicator = ({
+  variant,
+  className,
+  forceMount: forceMountProp,
+  ...rest
+}: Props) => {
+  const icon: ComponentProps<typeof Icon>['icon'] = (() => {
+    if (variant === 'switch') return 'toggle-large-on';
+    if (variant === 'radio') return 'circle';
+    return 'check';
+  })();
+
+  const forceMount = (() => {
+    if (forceMountProp) return true;
+    // All variants, except for check, require rendering at all times.
+    return variant === 'check' ? undefined : true;
+  })();
+
+  if (variant === 'none') return null;
+
+  return (
+    <DropdownMenuPrimitive.ItemIndicator
+      {...rest}
+      forceMount={forceMount}
+      className={variants({ variant, className })}
+    >
+      <Icon icon={icon} />
+    </DropdownMenuPrimitive.ItemIndicator>
+  );
+};

package/src/components/DropdownMenu/DropdownMenuLabel.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<typeof DropdownMenuPrimitive.Label>;
+
+export const DropdownMenuLabel = ({ className, ...props }: Props) => {
+  return (
+    <DropdownMenuPrimitive.Label
+      className={cn(
+        'tw-p-2',
+        'tw-font-medium',
+        'tw-text-xs',
+        'tw-text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+};

package/src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioGroup.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+type Props<Value> = Omit<
+  ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,
+  'value' | 'onValueChange' | 'defaultValue'
+> & {
+  value?: Value;
+  defaultValue?: Value;
+  onValueChange?: (value: Value) => void;
+};
+
+export const DropdownMenuRadioGroup = <Value extends string = string>({
+  value,
+  defaultValue,
+  onValueChange,
+  ...props
+}: Props<Value>) => {
+  const handleChange = (value: string) => {
+    onValueChange?.(value as Value);
+  };
+
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      {...props}
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={handleChange}
+    />
+  );
+};

package/src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx

@@ -0,0 +1,64 @@
+import type { ComponentProps } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../../utils';
+import type { Icon } from '../../Icon';
+import { DropdownMenuItemIndicator } from '../DropdownMenuItemIndicator';
+import { ItemIcon } from '../ItemIcon';
+import { itemVariants } from '../styles';
+
+type Props = ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  closeOnSelect?: boolean;
+  indicatorAlign?: 'start' | 'end';
+  indicator?: 'radio' | 'check' | 'none';
+  icon?: ComponentProps<typeof Icon>['icon'];
+  iconClassName?: string;
+  isLoading?: boolean;
+};
+
+export const DropdownMenuRadioItem = ({
+  className,
+  children,
+  closeOnSelect,
+  onSelect,
+  indicatorAlign = 'start',
+  indicator = 'radio',
+  icon,
+  iconClassName,
+  isLoading = false,
+  ...props
+}: Props) => {
+  const isAtStart = indicatorAlign === 'start';
+  const indicatorEle = isLoading ? (
+    <ItemIcon spin icon="spinner" className={iconClassName} />
+  ) : (
+    <DropdownMenuItemIndicator variant={indicator} />
+  );
+
+  const handleSelect = (event: Event) => {
+    if (!closeOnSelect) event.preventDefault();
+    onSelect?.(event);
+  };
+
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      className={cn(
+        itemVariants,
+        'data-[state=checked]:tw-cursor-default',
+        {
+          'data-[state=checked]:tw-bg-neutral-100': indicator === 'none',
+          'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-sky-100':
+            indicator === 'check',
+        },
+        className,
+      )}
+      onSelect={handleSelect}
+      {...props}
+    >
+      {isAtStart && indicatorEle}
+      {icon && <ItemIcon icon={icon} className={iconClassName} />}
+      <span className="tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2">{children}</span>
+      {!isAtStart && indicatorEle}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+};

package/src/components/DropdownMenu/DropdownMenuRadioGroup/index.ts

@@ -0,0 +1,2 @@
+export * from './DropdownMenuRadioGroup';
+export * from './DropdownMenuRadioItem';

package/src/components/DropdownMenu/DropdownMenuSeparator.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<typeof DropdownMenuPrimitive.Separator>;
+
+export const DropdownMenuSeparator = ({ className, ...props }: Props) => (
+  <DropdownMenuPrimitive.Separator
+    className={cn(
+      'tw-relative',
+      'tw-z-10',
+
+      // layout
+      'tw-flex',
+      'tw-items-center',
+      'tw-justify-center',
+      'tw-w-full',
+
+      // separator line
+      'before:tw-content-[""]',
+      'before:tw-w-full',
+      'before:tw-h-px',
+
+      'group-data-[variant=default]/dropdown-menu-content:tw-py-2',
+      'group-data-[variant=default]/dropdown-menu-content:before:tw-bg-neutral-150',
+
+      'group-data-[variant=argo]/dropdown-menu-content:tw-py-1',
+      'group-data-[variant=argo]/dropdown-menu-content:before:tw-bg-border',
+
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSub.tsx

@@ -0,0 +1,3 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;

package/src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubContent.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../../utils';
+import { useDropdownMenuContext } from '../DropdownMenuContext';
+import { contentVariants } from '../styles';
+
+type Props = ComponentProps<typeof DropdownMenuPrimitive.SubContent>;
+
+export const DropdownMenuSubContent = ({ className, ...props }: Props) => {
+  const { variant } = useDropdownMenuContext();
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        data-variant={variant}
+        className={cn(contentVariants, 'tw-z-[1041]', 'tw-p-2', className)}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+};

package/src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubTrigger.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../../utils';
+import { Icon } from '../../Icon';
+import { itemVariants } from '../styles';
+
+type Props = ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>;
+
+export const DropdownMenuSubTrigger = ({ className, children, ...props }: Props) => {
+  return (
+    <DropdownMenuPrimitive.SubTrigger className={cn(itemVariants, className)} {...props}>
+      {children}
+      <Icon icon="chevron-right" className="tw-ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+};

package/src/components/DropdownMenu/DropdownMenuSub/index.ts

@@ -0,0 +1,3 @@
+export * from './DropdownMenuSub';
+export * from './DropdownMenuSubContent';
+export * from './DropdownMenuSubTrigger';

package/src/components/DropdownMenu/DropdownMenuTrigger.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Trigger } from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<typeof Trigger>;
+
+export const DropdownMenuTrigger = ({
+  ref,
+  className,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
+  <Trigger
+    {...props}
+    ref={ref}
+    data-slot="dropdown-menu-trigger"
+    className={cn('tw-group/dropdown-menu-trigger', className)}
+  />
+);

package/src/components/DropdownMenu/ItemIcon.tsx

@@ -0,0 +1,22 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+type Props = ComponentProps<typeof Icon>;
+
+export const ItemIcon = ({ className, ...props }: Props) => (
+  <Icon
+    {...props}
+    className={cn(
+      'tw-aspect-square',
+      'tw-p-0.5',
+      'tw-size-4',
+      'group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400',
+      'group-data-[variant=argo]/dropdown-menu-content:tw-text-primary',
+      'group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground',
+      'group-data-[variant=default]/dropdown-menu-content:group-hover:tw-text-secondary-500',
+      className,
+    )}
+  />
+);

package/src/components/DropdownMenu/index.ts

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

package/src/components/DropdownMenu/styles.ts

@@ -0,0 +1,82 @@
+import { cn } from '../../utils';
+
+export const itemVariants = cn(
+  // reset
+  'tailwindcss-preflight',
+  'tw-outline-none',
+  'tw-group',
+  'tw-peer',
+  'tw-relative',
+
+  // positioning
+  'tw-flex',
+  'tw-flex-1',
+  'tw-items-center',
+  'tw-gap-2',
+
+  'tw-cursor-pointer',
+  'tw-select-none',
+  'tw-transition-colors',
+
+  // spacing
+  'tw-p-2',
+
+  // typography
+  'tw-font-sans',
+  'tw-text-sm',
+
+  'aria-disabled:tw-pointer-events-none',
+  'aria-disabled:tw-opacity-50',
+
+  'focus-visible:tw-outline-none',
+
+  'group-data-[variant=default]/dropdown-menu-content:tw-rounded',
+  'group-data-[variant=default]/dropdown-menu-content:focus:tw-bg-neutral-100',
+  'group-data-[variant=default]/dropdown-menu-content:focus:tw-text-neutral-900',
+  'group-data-[variant=default]/dropdown-menu-content:hover:tw-bg-neutral-100',
+  'group-data-[variant=default]/dropdown-menu-content:hover:tw-text-neutral-900',
+
+  'group-data-[variant=argo]/dropdown-menu-content:tw-rounded-md',
+  'group-data-[variant=argo]/dropdown-menu-content:tw-text-slate-800',
+  'group-data-[variant=argo]/dropdown-menu-content:focus:tw-text-slate-800',
+  'group-data-[variant=argo]/dropdown-menu-content:focus:tw-bg-sky-100',
+  'group-data-[variant=argo]/dropdown-menu-content:hover:tw-text-slate-800',
+  'group-data-[variant=argo]/dropdown-menu-content:hover:tw-bg-sky-100',
+);
+
+export const contentVariants = cn(
+  'tailwindcss-preflight',
+  'tw-group/dropdown-menu-content',
+  'tw-z-[1040]',
+  'tw-bg-white',
+
+  // positioning
+  'tw-flex',
+  'tw-flex-col',
+  'tw-origin-[--radix-dropdown-menu-content-transform-origin]',
+
+  // sizing
+  'tw-max-h-[var(--radix-dropdown-menu-content-available-height)]',
+  'tw-min-w-32',
+
+  // border
+  'tw-border',
+  'tw-shadow-md',
+
+  'data-[variant=default]:tw-rounded-md',
+  'data-[variant=argo]:tw-rounded-2xl',
+
+  // animations
+  'data-[state=open]:tw-animate-in',
+  'data-[state=open]:tw-fade-in-0',
+  'data-[state=open]:tw-zoom-in-95',
+
+  'data-[state=closed]:tw-animate-out',
+  'data-[state=closed]:tw-fade-out-0',
+  'data-[state=closed]:tw-zoom-out-95',
+
+  'data-[side=bottom]:tw-slide-in-from-top-2',
+  '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',
+);