@keboola/design 1.0.0

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,225 @@
+import { useMemo } from 'react';
+import type { CSSProperties, ReactNode, TransitionEventHandler } from 'react';
+
+import { cn } from '../../utils';
+import { TooltipProvider } from '../Tooltip';
+
+import { useTransitionPresence } from './SidebarProvider/useTransitionPresence';
+import { SidebarContent } from './SidebarContent';
+import { SidebarFillTrigger } from './SidebarFillTrigger';
+import { SidebarFooter } from './SidebarFooter';
+import {
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+} from './SidebarGroup';
+import { SidebarHeader } from './SidebarHeader';
+import { SidebarInstanceContext } from './SidebarInstanceContext';
+import {
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuCard,
+  SidebarMenuIcon,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarSearchInput,
+} from './SidebarMenu';
+import { useSidebar } from './SidebarProvider';
+import { SidebarResizeHandle } from './SidebarResizeHandle';
+import { SidebarSeparator } from './SidebarSeparator';
+import { SidebarTrigger } from './SidebarTrigger';
+import type { SidebarSide } from './types';
+import { SidebarWidthInPx } from './utils';
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+  id?: string;
+  side?: SidebarSide;
+  style?: CSSProperties;
+  container?: boolean;
+  keepMounted?: boolean;
+  resizable?: boolean;
+};
+
+export const Sidebar = ({
+  children,
+  className,
+  id,
+  side = 'left',
+  style,
+  container = false,
+  keepMounted,
+  resizable = false,
+}: Props) => {
+  const oppositeSide = side === 'left' ? 'right' : 'left';
+  const { setSidebarElement, state, mode, isFill, widths, collapsible, variant, isDragging } =
+    useSidebar(side);
+
+  const { isMounted, completeUnmount } = useTransitionPresence({
+    mounted: collapsible !== 'off-canvas' || mode !== 'collapsed',
+    keepMounted,
+  });
+  const { widths: oppositeWidths } = useSidebar(oppositeSide);
+  const sidebarInstanceContextValue = useMemo(() => ({ state, mode, side }), [state, mode, side]);
+
+  const handleTransitionEnd: TransitionEventHandler<HTMLDivElement> = (event) => {
+    // Ignore bubbled transitions from child elements
+    if (event.target !== event.currentTarget) return;
+    completeUnmount();
+  };
+
+  const styles = {
+    '--sidebar-floating-padding': `${SidebarWidthInPx.FLOATING_VARIANT_PADDING}px`,
+    '--sidebar-width': `${widths.sidebar}px`,
+    '--sidebar-width-gap': `${widths.gap}px`,
+    '--opposite-sidebar-width': `${oppositeWidths.fill}px`,
+  } as CSSProperties;
+
+  if (variant === 'none') return null;
+
+  return (
+    <TooltipProvider>
+      <SidebarInstanceContext value={sidebarInstanceContextValue}>
+        <div
+          id={id}
+          ref={setSidebarElement}
+          data-state={state}
+          data-side={side}
+          data-mode={mode}
+          data-collapsible={collapsible}
+          data-variant={variant}
+          data-fill={isFill}
+          style={styles}
+          className={cn(
+            'tailwindcss-preflight',
+            'tw-flex',
+            'tw-relative',
+            // expand-on-hover needs a higher z-index so the expanding sidebar
+            // overlaps the opposite filled sidebar instead of sliding behind it
+            mode === 'expand-on-hover' ? 'tw-z-[51]' : 'tw-z-50',
+            {
+              // group/peer scoping is only for page-level sidebars — container
+              // sidebars are nested inside other components and must not leak
+              // group/peer selectors to avoid clashing with the outer sidebar
+              'tw-group/sidebar tw-peer/sidebar': !container,
+            },
+
+            // ── GAP DIV ──
+            '[&>[data-slot=gap]]:tw-w-[--sidebar-width-gap]',
+            '[&[data-side=right]>[data-slot=gap]]:tw-rotate-180',
+
+            // ── SIDEBAR-WRAPPER DIV ──
+            '[&>[data-slot=sidebar-wrapper]]:tw-w-[--sidebar-width]',
+            '[&[data-side=left]>[data-slot=sidebar-wrapper]]:tw-left-0',
+            '[&[data-side=right]>[data-slot=sidebar-wrapper]]:tw-right-0',
+            // off canvas hiding
+            '[&[data-state=collapsed][data-collapsible=off-canvas][data-side=left]>[data-slot=sidebar-wrapper]]:-tw-translate-x-full',
+            '[&[data-state=collapsed][data-collapsible=off-canvas][data-side=right]>[data-slot=sidebar-wrapper]]:tw-translate-x-full',
+
+            // floating variants styles
+            '[&[data-variant=sided-floating]>[data-slot=sidebar-wrapper]]:tw-pt-[--sidebar-floating-padding]',
+            '[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]]:tw-pr-[--sidebar-floating-padding]',
+            '[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]]:tw-pl-[--sidebar-floating-padding]',
+
+            '[&[data-variant=floating]>[data-slot=sidebar-wrapper]]:tw-p-[--sidebar-floating-padding]',
+
+            // fill state
+            '[&[data-fill=true]>[data-slot=sidebar-wrapper]]:!tw-w-[calc(100svw-var(--opposite-sidebar-width))]',
+            '[&[data-fill=true][data-variant=floating]>[data-slot=sidebar-wrapper]]:!tw-p-[--sidebar-floating-padding]',
+            '[&[data-fill=true][data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:!tw-rounded-tr-xl',
+            '[&[data-fill=true][data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:!tw-rounded-tl-xl',
+
+            // ── SIDEBAR DIV (INNERMOST) ──
+            '[&[data-variant=inset][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:tw-border-r',
+            '[&[data-variant=inset][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:tw-border-l',
+            '[&[data-variant=floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:tw-shadow',
+            '[&[data-variant=floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:tw-rounded-xl',
+            '[&[data-variant=sided-floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:tw-shadow',
+            '[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:tw-rounded-tr-xl',
+            '[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:tw-rounded-tl-xl',
+
+            // transitions
+            isDragging
+              ? 'tw-transition-none'
+              : 'tw-transition-[width,transform] tw-duration-200 tw-ease-linear',
+          )}
+        >
+          <div
+            data-slot="gap"
+            className={cn(
+              'tw-bg-transparent',
+              isDragging ? '' : 'tw-transition-width tw-duration-200 tw-ease-linear',
+            )}
+          />
+
+          <div
+            data-slot="sidebar-wrapper"
+            onTransitionEnd={handleTransitionEnd}
+            className={cn(
+              'tw-fixed',
+              'tw-inset-y-0',
+              'tw-border-neutral-100',
+
+              // transition
+              isDragging
+                ? 'tw-transition-none'
+                : 'tw-transition-[width,transform] tw-duration-200 tw-ease-linear',
+              className,
+            )}
+            style={style}
+          >
+            {resizable && <SidebarResizeHandle side={side} />}
+            <div
+              data-slot="sidebar"
+              className={cn(
+                'tw-bg-sidebar',
+                'tw-overflow-hidden',
+                'tw-relative',
+                'tw-flex',
+                'tw-flex-col',
+                'tw-size-full',
+                'tw-border-sidebar-border',
+                'group-[]/sidebar:tw-pt-2',
+              )}
+            >
+              {isMounted ? children : null}
+            </div>
+          </div>
+        </div>
+      </SidebarInstanceContext>
+    </TooltipProvider>
+  );
+};
+
+// main layout
+Sidebar.Header = SidebarHeader;
+Sidebar.Content = SidebarContent;
+Sidebar.Footer = SidebarFooter;
+Sidebar.Trigger = SidebarTrigger;
+Sidebar.FillTrigger = SidebarFillTrigger;
+Sidebar.Separator = SidebarSeparator;
+Sidebar.MenuIcon = SidebarMenuIcon;
+
+// group features
+Sidebar.Group = SidebarGroup;
+Sidebar.GroupLabel = SidebarGroupLabel;
+Sidebar.GroupContent = SidebarGroupContent;
+Sidebar.GroupAction = SidebarGroupAction;
+
+// menu features
+Sidebar.Menu = SidebarMenu;
+Sidebar.MenuItem = SidebarMenuItem;
+Sidebar.MenuButton = SidebarMenuButton;
+Sidebar.MenuAction = SidebarMenuAction;
+Sidebar.SearchInput = SidebarSearchInput;
+Sidebar.MenuCard = SidebarMenuCard;
+Sidebar.MenuBadge = SidebarMenuBadge;
+
+// sub-menu features
+Sidebar.SubMenu = SidebarMenuSub;
+Sidebar.SubItem = SidebarMenuSubItem;

package/src/components/Sidebar/SidebarContent.tsx

@@ -0,0 +1,61 @@
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
+
+import { useScrollbarPosition } from '../../hooks/useScrollbarPosition';
+import { cn, mergeRefs } from '../../utils';
+import { ScrollArea } from '../ScrollArea';
+
+type Props = {
+  className?: string;
+  children?: ReactNode;
+  contentRef?: ComponentProps<'div'>['ref'];
+};
+
+export const SidebarContent = ({
+  ref,
+  className,
+  children,
+  contentRef,
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => {
+  const { setElement, isBottom, isTop, isMiddle } = useScrollbarPosition();
+  const mergedRefs = mergeRefs(ref ?? null, (ref) => setElement(ref));
+
+  return (
+    <ScrollArea
+      ref={mergedRefs}
+      type="scroll"
+      className="tw-group/sidebar-content tw-flex-1"
+      data-slot="sidebar-content"
+      scrollBarClassName="tw-w-1.5"
+      viewPortClassName={cn(
+        'tw-overflow-x-hidden',
+        'tw-overscroll-contain',
+        '[&>div]:!tw-flex', // overflow fix for scrollbar
+        // Hide scroll-position-based borders (top/bottom) if SidebarHeader or SidebarFooter is omitted.
+        'group-first/sidebar-content:before:tw-hidden',
+        'group-last/sidebar-content:after:tw-hidden',
+        '!tw-box-border',
+        {
+          'before:tw-absolute before:tw-top-0 before:tw-left-0 before:tw-right-0 before:tw-h-px before:tw-bg-neutral-100 before:tw-z-10 before:tw-content-[""]':
+            isBottom || isMiddle,
+          'after:tw-absolute after:tw-bottom-0 after:tw-left-0 after:tw-right-0 after:tw-h-px after:tw-bg-neutral-100 after:tw-z-10 after:tw-content-[""]':
+            isTop || isMiddle,
+        },
+      )}
+    >
+      <div
+        ref={contentRef}
+        className={cn(
+          'tw-flex',
+          'tw-flex-1',
+          'tw-flex-col',
+          'tw-gap-1',
+          'tw-overflow-x-hidden',
+          'tw-p-2',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </ScrollArea>
+  );
+};

package/src/components/Sidebar/SidebarFillTrigger.tsx

@@ -0,0 +1,25 @@
+import type { ComponentProps, ElementRef, MouseEventHandler, Ref } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+import { useSidebar } from './SidebarProvider';
+import type { SidebarSide } from './types';
+
+type Props = ComponentProps<typeof Slot> & {
+  side?: SidebarSide;
+};
+
+export const SidebarFillTrigger = ({
+  ref,
+  side = 'left',
+  onClick,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
+  const { toggleFill, isFill } = useSidebar(side);
+
+  const handleOnClick: MouseEventHandler<HTMLElement> = (event) => {
+    toggleFill();
+    onClick?.(event);
+  };
+
+  return <Slot {...rest} ref={ref} onClick={handleOnClick} aria-selected={isFill} />;
+};

package/src/components/Sidebar/SidebarFooter.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'div'>;
+
+export const SidebarFooter = ({ className, ...props }: Props) => (
+  <div
+    data-slot="sidebar-footer"
+    className={cn('tw-flex', 'tw-flex-col', 'tw-gap-2', 'tw-p-2', className)}
+    {...props}
+  />
+);

package/src/components/Sidebar/SidebarGroup/SidebarGroup.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../../utils';
+
+type Props = ComponentProps<'div'>;
+
+export const SidebarGroup = ({ className, ...props }: Props) => (
+  <div
+    className={cn(
+      'tw-group/sidebar-group',
+      'tw-relative',
+      'tw-w-full',
+
+      // positioning
+      'tw-flex',
+      'tw-flex-col',
+      'tw-min-w-0',
+      'tw-rounded-lg',
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/Sidebar/SidebarGroup/SidebarGroupAction.tsx

@@ -0,0 +1,49 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../../utils';
+import { Icon } from '../../Icon';
+
+type Props = Omit<ComponentProps<'button'>, 'children'> & Pick<ComponentProps<typeof Icon>, 'icon'>;
+
+export const SidebarGroupAction = ({
+  ref,
+  className,
+  type = 'button',
+  icon,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
+  <button
+    {...props}
+    type={type}
+    ref={ref}
+    className={cn(
+      'group-data-[state=collapsed]/sidebar:tw-hidden',
+
+      // positioning
+      'tw-absolute',
+      'tw-right-1.5',
+      'tw-top-2',
+      'tw-flex',
+      'tw-items-center',
+      'tw-justify-center',
+
+      // sizing
+      'tw-size-5',
+
+      // styles
+      'tw-text-neutral-800',
+      'tw-rounded-full',
+
+      'hover:tw-bg-neutral-100',
+
+      'focus-visible:tw-ring-4',
+      'focus-visible:tw-ring-secondary-200',
+      'focus-visible:tw-outline',
+      'focus-visible:tw-outline-1',
+      'focus-visible:tw-outline-secondary-500',
+      className,
+    )}
+  >
+    <Icon icon={icon} className="tw-size-3 tw-text-neutral-400 hover:tw-text-secondary-600" />
+  </button>
+);

package/src/components/Sidebar/SidebarGroup/SidebarGroupContent.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../../utils';
+
+type Props = ComponentProps<'div'>;
+
+export const SidebarGroupContent = ({ className, ...props }: Props) => (
+  <div
+    className={cn(
+      // positioning
+      'tw-flex',
+      'tw-flex-col',
+      'tw-gap-2',
+
+      'tw-w-full',
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/Sidebar/SidebarGroup/SidebarGroupLabel.tsx

@@ -0,0 +1,76 @@
+import type { ComponentProps, Ref } from 'react';
+
+import { cn } from '../../../utils';
+import { Separator } from '../../Separator';
+
+type Props = ComponentProps<'div'>;
+
+export const SidebarGroupLabel = ({
+  ref,
+  className,
+  children,
+  ...props
+}: Props & { ref?: Ref<HTMLDivElement> }) => (
+  <div
+    ref={ref}
+    className={cn(
+      'tw-relative',
+      // positioning
+      'tw-flex',
+      'tw-flex-col',
+      'tw-shrink-0',
+
+      // styling
+      'tw-h-8',
+      'tw-px-2',
+      '-tw-mb-1',
+      'tw-rounded-lg',
+
+      // text
+      'tw-uppercase',
+      'tw-font-sans',
+      'tw-text-xs',
+      'tw-tracking-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <Separator
+      orientation="horizontal"
+      size="3/4"
+      className={cn(
+        'tw-opacity-0',
+        'group-data-[state=collapsed]/sidebar:tw-opacity-100',
+
+        // positioning
+        'tw-absolute',
+        'tw-w-full',
+        'tw-left-0',
+        'tw-top-1/2 -tw-translate-y-1/2',
+
+        'tw-transition-opacity',
+        'tw-duration-200',
+        'tw-ease-linear',
+      )}
+    />
+
+    <span
+      className={cn(
+        'tw-flex',
+        'group-data-[state=collapsed]/sidebar:tw-opacity-0',
+
+        'tw-items-center',
+        'tw-flex-1',
+        'tw-text-neutral-400',
+        'tw-whitespace-nowrap',
+
+        // transition
+        'tw-transition-opacity',
+        'tw-duration-200',
+        'tw-ease-linear',
+      )}
+    >
+      {children}
+    </span>
+  </div>
+);

package/src/components/Sidebar/SidebarGroup/index.ts

@@ -0,0 +1,4 @@
+export * from './SidebarGroup';
+export * from './SidebarGroupContent';
+export * from './SidebarGroupAction';
+export * from './SidebarGroupLabel';

package/src/components/Sidebar/SidebarHeader.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'div'>;
+
+export const SidebarHeader = ({ className, ...props }: Props) => (
+  <div
+    data-slot="sidebar-header"
+    className={cn(
+      'tw-peer/sidebar-header',
+      'tw-flex',
+      'tw-flex-col',
+      'tw-gap-2',
+      'tw-p-2',
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/Sidebar/SidebarInstanceContext.ts

@@ -0,0 +1,18 @@
+import { createContext, use } from 'react';
+
+import type { SidebarMode, SidebarSide, SidebarState } from './types';
+
+type SidebarInstanceContextValue = {
+  state: SidebarState;
+  mode: SidebarMode;
+  side: SidebarSide;
+};
+
+export const SidebarInstanceContext = createContext<SidebarInstanceContextValue | null>(null);
+
+export const useSidebarInstance = () => {
+  const context = use(SidebarInstanceContext);
+  if (context === null)
+    throw new Error('useSidebarInstance must be used within a SidebarInstanceContext.');
+  return context;
+};

package/src/components/Sidebar/SidebarMenu/SidebarMenu.tsx

@@ -0,0 +1,28 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../../utils';
+
+type Props = ComponentProps<'ul'>;
+
+export const SidebarMenu = ({ className, ...props }: Props) => (
+  <ul
+    data-sidebar="menu"
+    className={cn(
+      'tw-flex',
+      'tw-w-full',
+      'tw-min-w-0',
+      'tw-flex-col',
+      'tw-gap-1',
+
+      // transition
+      'tw-transition-[margin,opacity]',
+      'tw-duration-200',
+      'tw-ease-linear',
+
+      // TODO: remove when boostrap is gone
+      'tw-pl-0',
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/Sidebar/SidebarMenu/SidebarMenuAction.tsx

@@ -0,0 +1,69 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../../../utils';
+
+type Props = ComponentProps<'button'> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+};
+
+export const SidebarMenuAction = ({
+  ref,
+  className,
+  asChild = false,
+  showOnHover = false,
+  children,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
+  const Comp = asChild ? Slot : 'button';
+  return (
+    <Comp
+      {...props}
+      data-slot="sidebar-menu-action"
+      data-hover-only={showOnHover}
+      ref={ref}
+      className={cn(
+        'tw-absolute',
+        'tw-top-1/2',
+        '-tw-translate-y-1/2',
+        'tw-right-3',
+        'tw-z-10',
+        'tw-p-0.5',
+
+        // display
+        'tw-flex',
+        'tw-items-center',
+        'tw-justify-center',
+        'tw-aspect-square',
+
+        // hiding
+        'data-[hover-only=true]:tw-opacity-0',
+        'group-data-[state=collapsed]/sidebar:tw-hidden',
+
+        'group-data-[state=expanded]/sidebar:group-hover/sidebar-menu-item:tw-opacity-100',
+        'group-data-[state=expanded]/sidebar:group-focus-within/sidebar-menu-item:tw-opacity-100', // keyboard navigation
+
+        'group-data-[state=expanded]/sidebar:data-[hover-only=true]:data-[state=open]:tw-opacity-100', // for triggers (dropdown, tooltip, popover)
+
+        'tw-size-4',
+        'tw-rounded',
+
+        // icon styling
+        '[&_svg]:tw-shrink-0',
+        '[&_svg]:tw-size-3.5',
+        '[&_svg]:tw-text-sidebar-accent-foreground',
+
+        // focus visible
+        'focus-visible:tw-outline-none',
+        'focus-visible:tw-z-10',
+        'focus-visible:tw-ring-2',
+        'focus-visible:tw-ring-sidebar-ring/50',
+        'focus-visible:tw-text-sidebar-foreground',
+        className,
+      )}
+    >
+      {children}
+    </Comp>
+  );
+};