@keboola/design 2.0.0 → 2.1.0

package/src/components/Search/styles.ts

@@ -1,88 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-export const searchWrapperVariants = cva(
-  [
-    // positioning
-    'tw-flex',
-    'tw-items-center',
-    'tw-gap-2.5',
-
-    // base
-    'tw-text-neutral-800',
-    'tw-transition-all',
-    'tw-font-sans',
-
-    // readonly
-    'has-[input[readonly]]:tw-bg-neutral-150',
-    'has-[input[readonly]]:focus-within:tw-ring-0',
-    'has-[input[readonly]]:tw-outline-0',
-
-    // disabled
-    'disabled:tw-opacity-40',
-
-    // default input padding (was sizing.default)
-    '[&>input]:tw-py-[15px]',
-  ],
-  {
-    defaultVariants: {
-      variant: 'default',
-    },
-    variants: {
-      variant: {
-        default: [
-          'tw-rounded-lg',
-          'tw-px-5',
-          'tw-bg-white',
-          'tw-shadow-[0_2px_6px_0_rgba(100,135,153,0.13)]',
-          // outline
-          'tw-outline',
-          'tw-outline-1',
-          'tw-outline-transparent',
-          // focus
-          'has-[input:focus]:tw-outline-1',
-          'has-[input:focus]:tw-ring-4',
-          'has-[input:focus]:tw-outline-secondary-500',
-          'has-[input:focus]:tw-ring-secondary-200',
-        ],
-        ai: [
-          'tailwindcss-preflight',
-          'tw-relative',
-          'tw-rounded-card',
-          'tw-px-4',
-          'tw-cursor-text',
-          'tw-border-2',
-          'tw-border-transparent',
-          'tw-bg-gradient-to-br',
-          'tw-from-secondary-600',
-          'tw-to-purple-600',
-          'tw-bg-origin-border',
-          'tw-shadow-[inset_0_100vw_white]',
-          // focus
-          'has-[input:focus]:tw-ring-4',
-          'has-[input:focus]:tw-ring-secondary-200',
-        ],
-      },
-    },
-  },
-);
-
-export const searchInputClassnames = [
-  // reset
-  'tw-border-none',
-  'tw-bg-transparent',
-  'tw-outline-none',
-  'tw-w-full',
-  'tw-p-0',
-
-  // base
-  'tw-text-base',
-  'tw-leading-6',
-  'tw-font-normal',
-  'tw-font-sans',
-
-  // placeholder
-  'placeholder:tw-text-neutral-400',
-
-  // disabled
-  'disabled:tw-cursor-not-allowed',
-].join(' ');

package/src/components/Search/utils.ts

@@ -1,11 +0,0 @@
-import { createPrefixedString } from '../../utils';
-
-export const genSearchTestId = (prefix: string = '') => {
-  const ps = createPrefixedString(prefix);
-  return {
-    toString: () => prefix,
-    wrapper: ps`search-wrapper`,
-    input: ps`search-input`,
-    clearButton: ps`search-clear-button`,
-  };
-};

package/src/components/Select/Select.stories.tsx

@@ -1,109 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { fn } from 'storybook/test';
-
-import { Select, type SelectItem, type SelectItemGroup } from './Select';
-
-type SelectProps = ComponentProps<typeof Select>;
-type Variant = NonNullable<SelectProps['variant']>;
-type State = NonNullable<SelectProps['state']>;
-type Sizing = NonNullable<SelectProps['sizing']>;
-
-const variants: Variant[] = ['primary', 'secondary', 'argo'];
-const states: State[] = ['default', 'error', 'warning'];
-const sizings: Sizing[] = ['default', 'small', 'medium'];
-
-type StoryArgs = Pick<
-  SelectProps,
-  'variant' | 'state' | 'sizing' | 'placeholder' | 'disabled' | 'className' | 'onValueChange'
->;
-
-export default {
-  component: Select,
-  args: {
-    variant: 'primary',
-    state: 'default',
-    sizing: 'default',
-    disabled: false,
-    placeholder: 'Placeholder',
-    className: 'tw-w-96',
-    onValueChange: fn(),
-  },
-  argTypes: {
-    variant: {
-      control: 'radio',
-      options: variants,
-      description: 'Trigger visual variant — mirrors `InputGroup` variants',
-    },
-    state: {
-      control: 'radio',
-      options: states,
-      description: 'Validation state',
-    },
-    sizing: {
-      control: 'radio',
-      options: sizings,
-      description: 'Trigger height',
-    },
-    disabled: { control: 'boolean' },
-    placeholder: { control: 'text' },
-  },
-  parameters: { layout: 'centered' },
-} satisfies Meta<StoryArgs>;
-
-type Story = StoryObj<StoryArgs>;
-
-const fruits: SelectItem[] = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'elderberry', label: 'Elderberry' },
-  { value: 'fig', label: 'Fig', disabled: true },
-];
-
-export const WithItems: Story = {
-  render: (args) => <Select {...args} items={fruits} />,
-};
-
-const fruitsWithIcons: SelectItem[] = [
-  { value: 'apple', label: 'Apple', icon: 'table' },
-  { value: 'banana', label: 'Banana', icon: 'table' },
-  { value: 'cherry', label: 'Cherry', icon: 'table' },
-  { value: 'elderberry', label: 'Elderberry', icon: 'table' },
-  { value: 'fig', label: 'Fig', icon: 'table' },
-];
-
-export const WithItemIcons: Story = {
-  render: (args) => <Select {...args} items={fruitsWithIcons} />,
-};
-
-const grouped: SelectItemGroup[] = [
-  {
-    label: 'Citrus',
-    items: [
-      { value: 'orange', label: 'Orange' },
-      { value: 'lemon', label: 'Lemon' },
-      { value: 'lime', label: 'Lime' },
-    ],
-  },
-  {
-    label: 'Berries',
-    items: [
-      { value: 'strawberry', label: 'Strawberry' },
-      { value: 'blueberry', label: 'Blueberry' },
-      { value: 'raspberry', label: 'Raspberry' },
-    ],
-  },
-  {
-    label: 'Tropical',
-    items: [
-      { value: 'mango', label: 'Mango' },
-      { value: 'pineapple', label: 'Pineapple' },
-      { value: 'papaya', label: 'Papaya' },
-    ],
-  },
-];
-
-export const WithGroups: Story = {
-  render: (args) => <Select {...args} items={grouped} />,
-};

package/src/components/Select/Select.tsx

@@ -1,141 +0,0 @@
-import { useId } from 'react';
-import type { ComponentProps, ReactNode } from 'react';
-
-import { SelectContent } from './SelectContent';
-import { SelectGroup } from './SelectGroup';
-import { SelectItem as SelectItemComponent } from './SelectItem';
-import { SelectLabel } from './SelectLabel';
-import { SelectRoot } from './SelectRoot';
-import { SelectSeparator } from './SelectSeparator';
-import { SelectTrigger } from './SelectTrigger';
-
-export type SelectItem = {
-  value: string;
-  label: ReactNode;
-  icon?: ReactNode;
-  disabled?: boolean;
-};
-
-export type SelectItemGroup = {
-  label?: ReactNode;
-  items: readonly SelectItem[];
-};
-
-const isGroup = (itemOrGroup: SelectItem | SelectItemGroup): itemOrGroup is SelectItemGroup =>
-  'items' in itemOrGroup;
-
-type RootProps = ComponentProps<typeof SelectRoot>;
-type TriggerProps = ComponentProps<typeof SelectTrigger>;
-
-/**
- * Props for `Select`. Combines Radix `Select.Root` control props with `Select.Trigger` chrome and the
- * convenience `items` shape (flat list, or grouped lists with optional labels).
- */
-type Props = Pick<
-  RootProps,
-  | 'value'
-  | 'defaultValue'
-  | 'onValueChange'
-  | 'disabled'
-  | 'name'
-  | 'required'
-  | 'open'
-  | 'defaultOpen'
-  | 'onOpenChange'
-> &
-  Pick<TriggerProps, 'variant' | 'state' | 'sizing' | 'placeholder' | 'id' | 'className'> & {
-    items?: readonly (SelectItem | SelectItemGroup)[];
-  };
-
-/**
- * Single selection from a short enumerated list. Built on Radix Select.
- *
- * **When to use:** picking one value from ~10 or fewer options where search adds no value (status,
- * region, role). Pass a flat `items` array or grouped arrays with optional labels for headings.
- * **When NOT to use:** for longer lists with search use `Combobox`; for multi-select use `MultiCombobox`;
- * for free-form tag entry use `Tagger`.
- * **Composition:** wrap in `FormGroup` for label + help text, or use `useAppForm` + `field.SelectField`
- * for forms with validation. Use the compound parts (`Select.Root`, `Select.Trigger`, `Select.Content`,
- * `Select.Item`) for custom item layouts; the top-level `Select` covers the common cases.
- */
-export const Select = ({
-  // root
-  value,
-  defaultValue,
-  onValueChange,
-  disabled,
-  name,
-  required,
-  open,
-  defaultOpen,
-  onOpenChange,
-  // trigger
-  variant,
-  state,
-  sizing,
-  placeholder,
-  id,
-  className,
-  // items
-  items = [],
-}: Props) => {
-  const contentVariant = variant === 'argo' ? 'argo' : 'default';
-  const groupKeyId = useId();
-
-  const renderItem = (item: SelectItem) => (
-    <SelectItemComponent
-      key={item.value}
-      value={item.value}
-      icon={item.icon}
-      disabled={item.disabled}
-    >
-      {item.label}
-    </SelectItemComponent>
-  );
-
-  return (
-    <SelectRoot
-      value={value}
-      defaultValue={defaultValue}
-      onValueChange={onValueChange}
-      disabled={disabled}
-      name={name}
-      required={required}
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-    >
-      <SelectTrigger
-        variant={variant}
-        state={state}
-        sizing={sizing}
-        placeholder={placeholder}
-        id={id}
-        className={className}
-      />
-      <SelectContent variant={contentVariant}>
-        {items.map((itemOrGroup, index) => {
-          if (isGroup(itemOrGroup)) {
-            return (
-              // oxlint-disable-next-line react/no-array-index-key
-              <SelectGroup key={`${groupKeyId}-group-${index}`}>
-                {itemOrGroup.label && <SelectLabel>{itemOrGroup.label}</SelectLabel>}
-                {itemOrGroup.items.map(renderItem)}
-              </SelectGroup>
-            );
-          }
-
-          return renderItem(itemOrGroup);
-        })}
-      </SelectContent>
-    </SelectRoot>
-  );
-};
-
-Select.Root = SelectRoot;
-Select.Trigger = SelectTrigger;
-Select.Content = SelectContent;
-Select.Item = SelectItemComponent;
-Select.Group = SelectGroup;
-Select.Label = SelectLabel;
-Select.Separator = SelectSeparator;

package/src/components/Select/SelectContent.tsx

@@ -1,110 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-
-import { ChevronDown, ChevronUp } from '../../icons';
-import { cn } from '../../utils';
-
-const scrollButtonStyles = cn(
-  'tw-flex',
-  'tw-items-center',
-  'tw-justify-center',
-  'tw-rounded-sm',
-  'tw-p-1',
-  '[&_svg]:tw-size-5',
-);
-
-type Variant = 'default' | 'argo';
-
-/**
- * Props for `Select.Content`. `container` portals the listbox into a custom element (useful inside modals);
- * `variant` switches between default and Argo styling.
- */
-type Props = ComponentProps<typeof SelectPrimitive.Content> & {
-  container?: HTMLElement | null;
-  variant?: Variant;
-};
-
-/**
- * Listbox container for `Select`. Portals items into a popover sized to the trigger.
- * Normally rendered implicitly by `Select`; use directly only when composing custom item layouts via
- * the `Select.Root` / `Select.Trigger` / `Select.Content` compound parts.
- */
-export const SelectContent = ({
-  ref,
-  className,
-  children,
-  container,
-  position = 'popper',
-  sideOffset = 4,
-  variant = 'default',
-  ...props
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <SelectPrimitive.Portal container={container}>
-    <SelectPrimitive.Content
-      {...props}
-      ref={ref}
-      position={position}
-      sideOffset={sideOffset}
-      data-variant={variant}
-      className={cn(
-        'tailwindcss-preflight',
-        'tw-group/select-content',
-        'tw-z-[1040]',
-
-        // layout
-        'tw-flex tw-flex-col',
-        'tw-p-1',
-        'data-[variant=default]:tw-p-0',
-        'tw-overflow-hidden',
-        'tw-origin-[--radix-select-content-transform-origin]',
-
-        // sizing
-        'tw-max-h-[var(--radix-select-content-available-height)]',
-        'tw-min-w-[var(--radix-select-trigger-width)]',
-
-        // appearance
-        'tw-bg-popover',
-        'tw-text-popover-foreground',
-        'tw-shadow-md',
-        'tw-ring-1',
-        'tw-ring-foreground/10',
-        'tw-rounded-lg',
-        'data-[variant=default]:tw-rounded',
-
-        // open animation
-        'data-[state=open]:tw-animate-in',
-        'data-[state=open]:tw-fade-in-0',
-        'data-[state=open]:tw-zoom-in-95',
-
-        // closed animation
-        'data-[state=closed]:tw-animate-out',
-        'data-[state=closed]:tw-fade-out-0',
-        'data-[state=closed]:tw-zoom-out-95',
-
-        // position animations
-        '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',
-        className,
-      )}
-    >
-      <SelectPrimitive.ScrollUpButton className={scrollButtonStyles}>
-        <ChevronUp />
-      </SelectPrimitive.ScrollUpButton>
-
-      <SelectPrimitive.Viewport
-        className={cn({
-          'tw-h-[var(--radix-select-trigger-height)] tw-w-full tw-min-w-[var(--radix-select-trigger-width)]':
-            position === 'popper',
-        })}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-
-      <SelectPrimitive.ScrollDownButton className={scrollButtonStyles}>
-        <ChevronDown />
-      </SelectPrimitive.ScrollDownButton>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-);

package/src/components/Select/SelectGroup.tsx

@@ -1,10 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof SelectPrimitive.Group>;
-
-export const SelectGroup = ({ className, ...props }: Props) => (
-  <SelectPrimitive.Group {...props} className={cn('tw-flex tw-flex-col tw-gap-0.5', className)} />
-);

package/src/components/Select/SelectItem.tsx

@@ -1,72 +0,0 @@
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-
-import { Check } from '../../icons';
-import { cn } from '../../utils';
-import { renderLegacyIcon } from '../../utils/legacyIcon';
-
-type Props = ComponentProps<typeof SelectPrimitive.Item> & {
-  icon?: ReactNode;
-};
-
-export const SelectItem = ({
-  ref,
-  className,
-  children,
-  icon,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <SelectPrimitive.Item
-    {...props}
-    ref={ref}
-    className={cn(
-      'tw-group/select-item',
-
-      // layout
-      'tw-relative',
-      'tw-flex',
-      'tw-flex-1',
-      'tw-items-center',
-      'tw-gap-2',
-
-      // spacing — default variant uses tighter radius and wider horizontal padding
-      'tw-py-2',
-      'tw-px-2',
-      'group-data-[variant=default]/select-content:tw-px-4',
-      'tw-rounded-lg',
-      'group-data-[variant=default]/select-content:tw-rounded-none',
-
-      // typography
-      'tw-text-sm',
-      'tw-select-none',
-      'tw-cursor-default',
-      'tw-outline-hidden',
-
-      // highlighted (keyboard / hover)
-      'focus:tw-outline-none',
-      'data-[highlighted]:tw-bg-accent',
-      'group-data-[variant=default]/select-content:data-[highlighted]:tw-bg-neutral-100',
-      'data-[highlighted]:tw-text-accent-foreground',
-      'group-data-[variant=default]/select-content:data-[highlighted]:tw-text-foreground',
-
-      // disabled
-      'data-[disabled]:tw-pointer-events-none',
-      'data-[disabled]:tw-opacity-50',
-
-      // child svg defaults
-      '[&_svg]:tw-pointer-events-none',
-      '[&_svg]:tw-shrink-0',
-      '[&_svg]:tw-text-muted-foreground',
-      "[&_svg:not([class*='tw-size-'])]:tw-size-4",
-      className,
-    )}
-  >
-    {renderLegacyIcon(icon)}
-    <span className="tw-flex-1 tw-truncate">
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </span>
-    <SelectPrimitive.ItemIndicator className="tw-pointer-events-none">
-      <Check className="tw-size-4" />
-    </SelectPrimitive.ItemIndicator>
-  </SelectPrimitive.Item>
-);

package/src/components/Select/SelectLabel.tsx

@@ -1,32 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof SelectPrimitive.Label>;
-
-export const SelectLabel = ({ className, ...props }: Props) => (
-  <SelectPrimitive.Label
-    {...props}
-    className={cn(
-      // Base (argo variant) — soft gray section label
-      'tw-px-2',
-      'tw-py-1.5',
-      'tw-text-xs',
-      'tw-font-medium',
-      'tw-leading-none',
-      'tw-text-neutral-500',
-
-      // Default variant — uppercase tracked label, matches Combobox default
-      'group-data-[variant=default]/select-content:tw-uppercase',
-      'group-data-[variant=default]/select-content:tw-font-semibold',
-      'group-data-[variant=default]/select-content:tw-tracking-wider',
-      'group-data-[variant=default]/select-content:tw-text-[11px]',
-      'group-data-[variant=default]/select-content:tw-text-black',
-      'group-data-[variant=default]/select-content:tw-pt-2',
-      'group-data-[variant=default]/select-content:tw-px-4',
-
-      className,
-    )}
-  />
-);

package/src/components/Select/SelectRoot.tsx

@@ -1,6 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Root } from '@radix-ui/react-select';
-
-type Props = ComponentProps<typeof Root>;
-
-export const SelectRoot = (props: Props) => <Root {...props} />;

package/src/components/Select/SelectSeparator.tsx

@@ -1,13 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof SelectPrimitive.Separator>;
-
-export const SelectSeparator = ({ className, ...props }: Props) => (
-  <SelectPrimitive.Separator
-    {...props}
-    className={cn('tw-mx-2 tw-my-1 tw-h-px tw-bg-neutral-100', className)}
-  />
-);