@keboola/design 1.0.0

package/src/components/Navbar/NavbarFooter.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'div'>;
+
+export const NavbarFooter = ({ children, className, ...rest }: Props) => (
+  <div {...rest} className={cn('tw-py-1.5', className)}>
+    {children}
+  </div>
+);

package/src/components/Navbar/NavbarHeader.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'div'>;
+
+export const NavbarHeader = ({ children, className, ...rest }: Props) => (
+  <div {...rest} className={cn('tw-overflow-hidden', 'tw-py-1.5', className)}>
+    {children}
+  </div>
+);

package/src/components/Navbar/NavbarMenu.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+const variants = cva(['tw-p-0', 'tw-flex', 'tw-items-center', 'tw-justify-center', 'tw-gap-2'], {
+  variants: {
+    marker: {
+      none: [],
+      'forward-slash': [
+        // Style all li children with pseudo-element marker
+        '[&_li]:tw-flex',
+        '[&_li]:tw-items-center',
+        '[&_li]:before:tw-content-["/"]',
+        '[&_li]:before:tw-text-border',
+        '[&_li]:before:tw-text-sm',
+        '[&_li]:before:tw-mr-0.5',
+        '[&_li:not(:first-child)]:before:tw-ml-0.5',
+      ],
+    },
+  },
+  defaultVariants: {
+    marker: 'none',
+  },
+});
+
+type Props = ComponentProps<'ul'> & VariantProps<typeof variants>;
+
+export const NavbarMenu = ({ className, marker, ...rest }: Props) => (
+  <ul {...rest} className={variants({ marker, className })} />
+);

package/src/components/Navbar/NavbarMenuAvatar.tsx

@@ -0,0 +1,67 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import BoringAvatar from 'boring-avatars';
+
+import { cn } from '@keboola/design';
+
+type Props = ComponentProps<'button'> & {
+  src?: string;
+  alt?: string;
+};
+
+export const NavbarMenuAvatar = ({
+  ref,
+  className,
+  type = 'button',
+  src,
+  alt,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
+  const altText = alt ?? 'Avatar';
+
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      type={type}
+      className={cn(
+        'tw-flex',
+        'tw-items-center',
+        'tw-justify-center',
+        'tw-size-8',
+
+        'tw-aspect-square',
+        'tw-overflow-hidden',
+        'tw-shrink-0',
+
+        'tw-rounded-lg',
+        'tw-bg-transparent',
+        'tw-cursor-pointer',
+
+        // Disabled state
+        'disabled:tw-opacity-50',
+        'disabled:tw-cursor-not-allowed',
+
+        // Focus-visible (matches SidebarMenuButton exactly)
+        'focus-visible:tw-outline-none',
+        'focus-visible:tw-ring-2',
+        'focus-visible:tw-ring-sidebar-ring/50',
+        className,
+      )}
+    >
+      <RadixAvatar.Root>
+        <RadixAvatar.Image src={src} alt={altText} className="tw-size-full tw-object-cover" />
+
+        <RadixAvatar.Fallback asChild>
+          <BoringAvatar
+            square
+            name={altText}
+            variant="beam"
+            colors={['#1F8FFF', '#004787', '#28D8FF', '#925cff', '#A8C2E6']}
+            size={32}
+          />
+        </RadixAvatar.Fallback>
+      </RadixAvatar.Root>
+    </button>
+  );
+};

package/src/components/Navbar/NavbarMenuButton.tsx

@@ -0,0 +1,134 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Root, Slottable } from '@radix-ui/react-slot';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+import { cn, Icon } from '@keboola/design';
+
+import { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';
+
+const variants = cva(
+  [
+    'tw-group/navbar-menu-button',
+    'tw-box-border',
+    'tw-flex',
+    'tw-items-center',
+    'tw-gap-2',
+    'tw-bg-transparent',
+
+    'tw-leading-9',
+
+    'tw-border',
+    'tw-rounded-lg',
+    'tw-whitespace-nowrap',
+    'tw-select-none',
+
+    // focus-visible
+    '!tw-outline-none',
+    'focus-visible:tw-ring-2',
+    'focus-visible:tw-ring-sidebar-ring/50',
+
+    // disabled
+    'disabled:tw-opacity-50',
+    'disabled:hover:tw-bg-transparent',
+    'disabled:tw-cursor-not-allowed',
+  ],
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: [
+          'tw-max-h-9',
+          'tw-border-transparent',
+          'tw-py-2',
+          'tw-px-1.5',
+          'tw-text-sidebar-foreground',
+          'hover:tw-bg-sidebar-accent',
+          'aria-expanded:tw-bg-sidebar-accent',
+        ],
+        emphasized: [
+          'tw-max-h-9',
+          'tw-border-transparent',
+          'tw-py-2',
+          'tw-px-1.5',
+
+          'tw-text-sidebar-foreground',
+          'hover:tw-bg-sidebar-accent',
+          'aria-expanded:tw-bg-sidebar-accent',
+
+          'tw-font-semibold',
+        ],
+        icon: [
+          'tw-size-8',
+          'tw-aspect-square',
+          'tw-justify-center',
+          'tw-font-normal',
+          'tw-border-transparent',
+          'tw-text-secondary-500',
+          '[&_svg]:!tw-text-secondary-500',
+          'hover:tw-bg-sidebar-accent',
+          'aria-expanded:tw-bg-sidebar-accent',
+        ],
+        search: [
+          'tw-max-h-8',
+          'tw-min-w-52',
+          'tw-px-3',
+          'tw-py-1',
+          'tw-text-neutral-400',
+          'tw-font-normal',
+          'tw-border-input',
+          'tw-text-muted-foreground',
+          '[&_svg]:!tw-text-muted-foreground',
+        ],
+      },
+    },
+  },
+);
+
+type Icon = ComponentProps<typeof Icon>['icon'];
+type Props = ComponentProps<'button'> & {
+  icon?: Icon;
+  asChild?: boolean;
+} & VariantProps<typeof variants>;
+
+export const NavbarMenuButton = ({
+  ref,
+  className,
+  type = 'button',
+  children,
+  icon: iconProp,
+  asChild = false,
+  variant = 'default',
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
+  const Comp = asChild ? Root : 'button';
+  const isSearchVariant = variant === 'search';
+  const isEmphasizedVariant = variant === 'emphasized';
+  const icon: Icon | undefined = isSearchVariant ? 'search' : iconProp;
+
+  const adornmentVariant: ComponentProps<typeof NavbarMenuItemAdornment>['variant'] = (() => {
+    if (isSearchVariant || variant === 'icon') return 'icon-button';
+    if (isEmphasizedVariant) return 'icon-accent-emphasized';
+    return 'icon-accent';
+  })();
+
+  return (
+    <Comp
+      {...rest}
+      ref={ref}
+      type={type}
+      data-variant={variant}
+      className={cn(variants({ className, variant }))}
+    >
+      {icon && (
+        <NavbarMenuItemAdornment asChild variant={adornmentVariant}>
+          <Icon icon={icon} />
+        </NavbarMenuItemAdornment>
+      )}
+
+      <Slottable>{children}</Slottable>
+    </Comp>
+  );
+};

package/src/components/Navbar/NavbarMenuItem.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'li'>;
+
+export const NavbarMenuItem = ({ className, ...rest }: Props) => (
+  <li {...rest} className={cn('tw-flex', 'tw-items-center', 'tw-gap-2', className)} />
+);

package/src/components/Navbar/NavbarMenuItemAdornment.tsx

@@ -0,0 +1,65 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+const variants = cva(
+  [
+    'tw-flex',
+    'tw-justify-center',
+    'tw-items-center',
+
+    '[&_svg]:tw-size-3',
+    '[&:not(svg)]:tw-h-5',
+    '[&:not(svg)]:tw-min-w-5',
+
+    'tw-p-1',
+    'tw-aspect-square',
+    'tw-rounded-md',
+  ],
+  {
+    defaultVariants: { variant: 'icon-accent' },
+    variants: {
+      variant: {
+        icon: ['tw-text-sidebar-foreground', '[&_svg]:tw-text-sidebar-foreground'],
+        'icon-emphasized': ['tw-text-white', '[&_svg]:tw-text-white'],
+        'icon-accent': [
+          // color-aware accent styling
+          'group-data-[accent=blue]/navbar:tw-text-sidebar-primary',
+          'group-data-[accent=blue]/navbar:[&_svg]:tw-text-sidebar-primary',
+          'group-data-[accent=purple]/navbar:tw-text-purple-500',
+          'group-data-[accent=purple]/navbar:[&_svg]:tw-text-purple-500',
+          'group-data-[accent=orange]/navbar:tw-text-warning-500',
+          'group-data-[accent=orange]/navbar:[&_svg]:tw-text-warning-500',
+          'group-data-[accent=green]/navbar:tw-text-primary-500',
+          'group-data-[accent=green]/navbar:[&_svg]:tw-text-primary-500',
+        ],
+        'icon-accent-emphasized': [
+          'tw-text-white',
+          '[&_svg]:tw-text-white',
+
+          'group-data-[accent=blue]/navbar:tw-bg-sidebar-primary',
+          'group-data-[accent=purple]/navbar:tw-bg-purple-500',
+          'group-data-[accent=orange]/navbar:tw-bg-warning-500',
+          'group-data-[accent=green]/navbar:tw-bg-primary-500',
+        ],
+        'icon-button': ['tw-size-4', 'tw-max-h-9', 'tw-leading-9', 'tw-p-0'],
+        shortcut: ['tw-bg-muted', 'tw-text-sidebar-foreground', 'tw-ml-auto'],
+      },
+    },
+  },
+);
+
+type Props = { asChild?: boolean } & ComponentProps<'span'> & VariantProps<typeof variants>;
+
+export const NavbarMenuItemAdornment = ({
+  ref,
+  asChild = false,
+  className,
+  variant = 'icon-accent',
+  ...props
+}: Props & { ref?: Ref<ElementRef<'span'>> }) => {
+  const Comp = asChild ? Slot : 'span';
+
+  return <Comp {...props} ref={ref} className={variants({ variant, className })} />;
+};

package/src/components/Navbar/index.ts

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

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Label } from '../Label';
+import { Select } from '../Select';
+
+import { Pagination } from './Pagination';
+
+export default {
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Pagination>;
+
+type Story = StoryObj<typeof Pagination>;
+
+/**
+ * A simple pagination with only page numbers.
+ */
+export const Default: Story = {
+  render: () => (
+    <Pagination>
+      <Pagination.Content>
+        <Pagination.Item>
+          <Pagination.Button>1</Pagination.Button>
+        </Pagination.Item>
+        <Pagination.Item>
+          <Pagination.Button active>2</Pagination.Button>
+        </Pagination.Item>
+        <Pagination.Item>
+          <Pagination.Button>3</Pagination.Button>
+        </Pagination.Item>
+        <Pagination.Item>
+          <Pagination.Button>4</Pagination.Button>
+        </Pagination.Item>
+        <Pagination.Item>
+          <Pagination.Button>5</Pagination.Button>
+        </Pagination.Item>
+      </Pagination.Content>
+    </Pagination>
+  ),
+};
+
+/**
+ * Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.
+ */
+export const FirstPage: Story = {
+  render: () => (
+    <Pagination>
+      <Pagination.Content>
+        <Pagination.Item>
+          <Pagination.Previous />
+        </Pagination.Item>
+
+        <Pagination.Item>
+          <Pagination.Next />
+        </Pagination.Item>
+      </Pagination.Content>
+    </Pagination>
+  ),
+};
+
+/** Use ellipsis with many pages */
+export const ManyPages: Story = {
+  render: () => (
+    <Pagination>
+      <Pagination.Content>
+        <Pagination.Item>
+          <Pagination.Previous />
+        </Pagination.Item>
+        <Pagination.Item>
+          <Pagination.Button>1</Pagination.Button>
+        </Pagination.Item>
+        <Pagination.Item>
+          <Pagination.Button>2</Pagination.Button>
+        </Pagination.Item>
+        <Pagination.Item>
+          <Pagination.Ellipsis />
+        </Pagination.Item>
+        <Pagination.Item>
+          <Pagination.Button>6</Pagination.Button>
+        </Pagination.Item>
+        <Pagination.Item>
+          <Pagination.Button active>7</Pagination.Button>
+        </Pagination.Item>
+        <Pagination.Item>
+          <Pagination.Next />
+        </Pagination.Item>
+      </Pagination.Content>
+    </Pagination>
+  ),
+};
+
+/*
+ * Use just the previous and next buttons without page numbers.
+ * This is useful for data tables with a rows per page selector.
+ */
+export const RowsPerPage: Story = {
+  render: () => (
+    <div className="tw-flex tw-items-center tw-gap-2">
+      <div className="tw-flex tw-items-center tw-gap-2">
+        <Label htmlFor="rows-per-page" className="tw-whitespace-nowrap">
+          Rows per page:
+        </Label>
+        <Select
+          variant="argo"
+          sizing="medium"
+          id="rows-per-page"
+          className="tw-min-w-20"
+          defaultValue="5"
+          items={[
+            { value: '5', label: '5' },
+            { value: '10', label: '10' },
+            { value: '15', label: '15' },
+            { value: '20', label: '20' },
+          ]}
+        />
+      </div>
+
+      <Pagination>
+        <Pagination.Content>
+          <Pagination.Item>
+            <Pagination.Previous />
+          </Pagination.Item>
+          <Pagination.Item>
+            <Pagination.Next />
+          </Pagination.Item>
+        </Pagination.Content>
+      </Pagination>
+    </div>
+  ),
+};

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,34 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+import { PaginationButton } from './PaginationButton';
+import { PaginationContent } from './PaginationContent';
+import { PaginationEllipsis } from './PaginationEllipsis';
+import { PaginationItem } from './PaginationItem';
+import { PaginationNext } from './PaginationNext';
+import { PaginationPrevious } from './PaginationPrevious';
+
+type Props = ComponentProps<'nav'>;
+
+export const Pagination = ({ className, ...props }: Props) => (
+  <nav
+    {...props}
+    aria-label="pagination"
+    className={cn(
+      'tailwindcss-preflight',
+      'tw-mx-auto',
+      'tw-flex',
+      'tw-w-full',
+      'tw-justify-center',
+      className,
+    )}
+  />
+);
+
+Pagination.Content = PaginationContent;
+Pagination.Item = PaginationItem;
+Pagination.Button = PaginationButton;
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
+Pagination.Ellipsis = PaginationEllipsis;

package/src/components/Pagination/PaginationButton.tsx

@@ -0,0 +1,36 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+import { Button } from '../Button';
+
+type Props = {
+  active?: boolean;
+} & Omit<ComponentProps<typeof Button>, 'argo' | 'variant'>;
+
+export const PaginationButton = ({
+  ref,
+  active: isActive = false,
+  className,
+  children,
+  size = 'icon',
+  ...props
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
+  <Button
+    {...props}
+    ref={ref}
+    argo
+    variant="invisible"
+    size={size}
+    data-slot="pagination-link"
+    aria-current={isActive ? 'page' : undefined}
+    data-active={isActive}
+    className={cn(
+      'data-[active=true]:tw-bg-accent',
+      'data-[active=true]:tw-text-accent-foreground',
+      'data-[active=true]:tw-border-accent',
+      className,
+    )}
+  >
+    {children}
+  </Button>
+);

package/src/components/Pagination/PaginationContent.tsx

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'ul'>;
+
+export const PaginationContent = ({ className, ...props }: Props) => (
+  <ul
+    {...props}
+    className={cn('tw-flex', 'tw-flex-row', 'tw-items-center', 'tw-gap-1', className)}
+  />
+);

package/src/components/Pagination/PaginationEllipsis.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+type Props = ComponentProps<'span'>;
+
+export const PaginationEllipsis = ({ className, ...props }: Props) => (
+  <span
+    aria-hidden="true"
+    className={cn(
+      // layout
+      'tw-flex',
+      'tw-p-2.5',
+      'tw-items-center',
+      'tw-justify-center',
+
+      'tw-text-foreground',
+      '[&_svg]:tw-size-4',
+      className,
+    )}
+    {...props}
+  >
+    <Icon icon={['far', 'ellipsis']} />
+  </span>
+);

package/src/components/Pagination/PaginationItem.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'li'>;
+
+export const PaginationItem = ({ className, ...props }: Props) => (
+  <li className={cn('tw-list-none', className)} {...props} />
+);

package/src/components/Pagination/PaginationNext.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+import { PaginationButton } from './PaginationButton';
+
+type Props = ComponentProps<typeof PaginationButton>;
+
+export const PaginationNext = ({ children, className, ...props }: Props) => (
+  <PaginationButton
+    {...props}
+    aria-label="Go to next page"
+    icon="chevron-right"
+    size="medium"
+    className={cn('tw-flex-row-reverse', className)}
+  >
+    {children ?? 'Next'}
+  </PaginationButton>
+);

package/src/components/Pagination/PaginationPrevious.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { PaginationButton } from './PaginationButton';
+
+type Props = ComponentProps<typeof PaginationButton>;
+
+export const PaginationPrevious = ({ children, ...props }: Props) => (
+  <PaginationButton {...props} size="medium" aria-label="Go to previous page" icon="chevron-left">
+    {children ?? 'Previous'}
+  </PaginationButton>
+);

package/src/components/Pagination/index.ts

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

package/src/components/PanelWithDetails.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PanelWithDetails } from './PanelWithDetails';
+
+const meta: Meta<typeof PanelWithDetails> = {
+  component: PanelWithDetails,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PanelWithDetails>;
+
+const commonArgs = {
+  children: (
+    <div className="tw-px-4 tw-py-3">
+      The extended attribute table file is full. The requested resource is in use. The file type
+      being saved or retrieved has been blocked.
+    </div>
+  ),
+} as const;
+
+export const Top: Story = {
+  args: { ...commonArgs, placement: 'top' },
+};
+
+export const Bottom: Story = {
+  args: { ...commonArgs, placement: 'bottom' },
+};