@keboola/design 1.0.0

package/src/components/Search/styles.ts

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

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

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

@@ -0,0 +1,130 @@
+import { useId } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+
+import type { Icon } from '../Icon';
+
+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';
+
+type IconName = ComponentProps<typeof Icon>['icon'];
+
+export type SelectItem = {
+  value: string;
+  label: ReactNode;
+  icon?: IconName;
+  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>;
+
+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)[];
+  };
+
+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

@@ -0,0 +1,101 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+const scrollButtonStyles = cn(
+  'tw-flex',
+  'tw-items-center',
+  'tw-justify-center',
+  'tw-rounded-sm',
+  'tw-p-1',
+  '[&_svg]:tw-size-3',
+);
+
+type Variant = 'default' | 'argo';
+
+type Props = ComponentProps<typeof SelectPrimitive.Content> & {
+  container?: HTMLElement | null;
+  variant?: Variant;
+};
+
+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}>
+        <Icon icon="chevron-up" />
+      </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}>
+        <Icon icon="chevron-down" />
+      </SelectPrimitive.ScrollDownButton>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+);

package/src/components/Select/SelectGroup.tsx

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

@@ -0,0 +1,71 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+type Props = ComponentProps<typeof SelectPrimitive.Item> & {
+  icon?: ComponentProps<typeof Icon>['icon'];
+};
+
+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,
+    )}
+  >
+    {icon && <Icon icon={icon} />}
+    <span className="tw-flex-1 tw-truncate">
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </span>
+    <SelectPrimitive.ItemIndicator className="tw-pointer-events-none">
+      <Icon icon="check" className="tw-size-4" />
+    </SelectPrimitive.ItemIndicator>
+  </SelectPrimitive.Item>
+);

package/src/components/Select/SelectLabel.tsx

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

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

@@ -0,0 +1,13 @@
+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)}
+  />
+);