@douglasneuroinformatics/libui 2.0.2 → 2.0.4

package/src/components/Sheet/SheetOverlay.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Overlay } from '@radix-ui/react-dialog';
+
+import { cn } from '../../utils.js';
+
+export const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof Overlay>,
+  React.ComponentPropsWithoutRef<typeof Overlay>
+>(function SheetOverlay({ className, ...props }, ref) {
+  return (
+    <Overlay
+      className={cn(
+        'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+});

package/src/components/Sheet/SheetTitle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Title } from '@radix-ui/react-dialog';
+
+import { cn } from '../../utils.js';
+
+export const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof Title>,
+  React.ComponentPropsWithoutRef<typeof Title>
+>(function SheetTitle({ className, ...props }, ref) {
+  return <Title className={cn('text-lg font-semibold text-foreground', className)} ref={ref} {...props} />;
+});

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Range, Root, Thumb, Track } from '@radix-ui/react-slider';
+
+import { cn } from '../../utils.js';
+
+export const Slider = React.forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
+  function Slider({ className, ...props }, ref) {
+    return (
+      <Root
+        className={cn('relative flex w-full touch-none select-none items-center py-1.5', className)}
+        ref={ref}
+        {...props}
+      >
+        <Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary opacity-15">
+          <Range className="absolute h-full bg-primary" />
+        </Track>
+        <Thumb className="block h-4 w-4 rounded-full border border-slate-500 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+      </Root>
+    );
+  }
+);

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { HTMLProps } from 'react';
+
+import { cn } from '../../utils.js';
+
+export const Spinner = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
+  return (
+    <div className={cn('flex h-full w-full items-center justify-center', className)} {...props}>
+      <span
+        className="relative animate-spinner overflow-hidden text-slate-900 dark:text-slate-100"
+        style={{
+          borderRadius: '50%',
+          fontSize: '45px',
+          height: '1em',
+          textIndent: '-9999em',
+          transform: 'translateZ(0)',
+          width: '1em'
+        }}
+      />
+    </div>
+  );
+};

package/src/components/SpinnerIcon/SpinnerIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const SpinnerIcon = ({ className, ...props }: React.HTMLAttributes<SVGElement>) => (
+  <svg
+    className={cn('animate-spin', className)}
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+  </svg>
+);

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '../../utils.js';
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(function Switch({ className, ...props }, ref) {
+  return (
+    <SwitchPrimitives.Root
+      className={cn(
+        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        className
+      )}
+      {...props}
+      ref={ref}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+        )}
+      />
+    </SwitchPrimitives.Root>
+  );
+});

package/src/components/Table/Table.tsx

@@ -0,0 +1,18 @@
+import { TableBody } from './TableBody.js';
+import { TableCaption } from './TableCaption.js';
+import { TableCell } from './TableCell.js';
+import { TableFooter } from './TableFooter.js';
+import { TableHead } from './TableHead.js';
+import { TableHeader } from './TableHeader.js';
+import { TableRoot } from './TableRoot.js';
+import { TableRow } from './TableRow.js';
+
+export const Table = Object.assign(TableRoot, {
+  Body: TableBody,
+  Caption: TableCaption,
+  Cell: TableCell,
+  Footer: TableFooter,
+  Head: TableHead,
+  Header: TableHeader,
+  Row: TableRow
+});

package/src/components/Table/TableBody.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  function TableBody({ className, ...props }, ref) {
+    return <tbody className={cn('[&_tr:last-child]:border-0', className)} ref={ref} {...props} />;
+  }
+);

package/src/components/Table/TableCaption.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  function TableCaption({ className, ...props }, ref) {
+    return <caption className={cn('mt-4 text-sm text-muted-foreground', className)} ref={ref} {...props} />;
+  }
+);

package/src/components/Table/TableCell.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  function TableCell({ className, ...props }, ref) {
+    return <td className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} ref={ref} {...props} />;
+  }
+);

package/src/components/Table/TableFooter.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  function TableFooter({ className, ...props }, ref) {
+    return (
+      <tfoot
+        className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);

package/src/components/Table/TableHead.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  function TableHead({ className, ...props }, ref) {
+    return (
+      <th
+        className={cn(
+          'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);

package/src/components/Table/TableHeader.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  function TableHeader({ className, ...props }, ref) {
+    return <thead className={cn('[&_tr]:border-b', className)} ref={ref} {...props} />;
+  }
+);

package/src/components/Table/TableRoot.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const TableRoot = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(function TableRoot(
+  { className, ...props },
+  ref
+) {
+  return (
+    <div className="relative w-full overflow-auto">
+      <table className={cn('w-full caption-bottom text-sm', className)} ref={ref} {...props} />
+    </div>
+  );
+});

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  function TableRow({ className, ...props }, ref) {
+    return (
+      <tr
+        className={cn('hover:bg-muted/50 border-b transition-colors data-[state=selected]:bg-muted', className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,10 @@
+import { TabsContent } from './TabsContent.js';
+import { TabsList } from './TabsList.js';
+import { TabsRoot } from './TabsRoot.js';
+import { TabsTrigger } from './TabsTrigger.js';
+
+export const Tabs = Object.assign(TabsRoot, {
+  Content: TabsContent,
+  List: TabsList,
+  Trigger: TabsTrigger
+});

package/src/components/Tabs/TabsContent.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../../utils.js';
+
+export const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(function TabsContent({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.Content
+      className={cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/Tabs/TabsList.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../../utils.js';
+
+export const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(function TabsList({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/Tabs/TabsRoot.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Root } from '@radix-ui/react-tabs';
+
+export const TabsRoot = React.forwardRef<React.ComponentRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
+  function TabsRoot(props, ref) {
+    return <Root ref={ref} {...props} />;
+  }
+);

package/src/components/Tabs/TabsTrigger.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../../utils.js';
+
+export const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(function TabsTrigger({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.Trigger
+      className={cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
+  { className, ...props },
+  ref
+) {
+  return (
+    <textarea
+      autoComplete="off"
+      className={cn(
+        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      data-testid="text-area"
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/ThemeToggle/ThemeToggle.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { MoonIcon, SunIcon } from 'lucide-react';
+
+import { useTheme } from '../../hooks/useTheme.js';
+import { Button, type ButtonProps } from '../Button/Button.js';
+
+export type ThemeToggleProps = Omit<ButtonProps, 'children' | 'size'>;
+
+export const ThemeToggle = ({ onClick, variant = 'outline', ...props }: ThemeToggleProps) => {
+  const [theme, setTheme] = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <Button
+      size="icon"
+      variant={variant}
+      onClick={(event) => {
+        toggleTheme();
+        onClick?.(event);
+      }}
+      {...props}
+    >
+      <SunIcon className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <MoonIcon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    </Button>
+  );
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,8 @@
+import { TooltipContent } from './TooltipContent.js';
+import { TooltipRoot } from './TooltipRoot.js';
+import { TooltipTrigger } from './TooltipTrigger.js';
+
+export const Tooltip = Object.assign(TooltipRoot, {
+  Content: TooltipContent,
+  Trigger: TooltipTrigger
+});

package/src/components/Tooltip/TooltipContent.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Content } from '@radix-ui/react-tooltip';
+
+import { cn } from '../../utils.js';
+
+export type TooltipContentProps = {
+  /** The preferred alignment against the trigger, which may change when collisions occur. */
+  align?: 'center' | 'end' | 'start';
+  /** The content to display when the user hovers over the tooltip trigger */
+  children: React.ReactNode;
+  /** Additional CSS classes to add to the component, potentially overriding default styling */
+  className?: string;
+  /** The distance in pixels from the viewport edges where collision detection should occur */
+  collisionPadding?: number;
+  /** The distance in pixels from the trigger */
+  sideOffset?: number;
+};
+
+export const TooltipContent = React.forwardRef<React.ElementRef<typeof Content>, TooltipContentProps>(
+  function TooltipContent({ className, collisionPadding = 0, sideOffset = 4, ...props }, ref) {
+    return (
+      <Content
+        className={cn(
+          'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className
+        )}
+        collisionPadding={collisionPadding}
+        ref={ref}
+        sideOffset={sideOffset}
+        {...props}
+      />
+    );
+  }
+);

package/src/components/Tooltip/TooltipRoot.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Provider, Root } from '@radix-ui/react-tooltip';
+
+export type TooltipRootProps = {
+  /** The tooltip trigger and content */
+  children: React.ReactNode;
+  /** The duration from when the mouse enters a tooltip trigger until the tooltip opens. */
+  delayDuration?: number;
+  /** How much time a user has to enter another trigger without incurring a delay again. */
+  skipDelayDuration?: number;
+};
+
+export const TooltipRoot = ({ children, delayDuration = 0, skipDelayDuration = 300 }: TooltipRootProps) => {
+  return (
+    <Provider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration}>
+      <Root>{children}</Root>
+    </Provider>
+  );
+};

package/src/components/Tooltip/TooltipTrigger.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Trigger } from '@radix-ui/react-tooltip';
+
+import { Button, type ButtonProps } from '../Button/Button.js';
+
+export type TooltipTriggerProps = Omit<ButtonProps, 'asChild'>;
+
+export const TooltipTrigger = React.forwardRef<React.ElementRef<typeof Trigger>, TooltipTriggerProps>(
+  function TooltipTrigger({ variant = 'outline', ...props }, ref) {
+    return (
+      <Trigger asChild ref={ref}>
+        <Button variant={variant} {...props} />
+      </Trigger>
+    );
+  }
+);

package/src/components.ts

@@ -0,0 +1,54 @@
+export * from './components/Accordion/Accordion.js';
+export * from './components/AlertDialog/AlertDialog.js';
+export * from './components/ArrowToggle/ArrowToggle.js';
+export * from './components/Avatar/Avatar.js';
+export * from './components/Badge/Badge.js';
+export * from './components/Breadcrumb/Breadcrumb.js';
+export * from './components/Button/Button.js';
+export * from './components/Card/Card.js';
+export * from './components/Checkbox/Checkbox.js';
+export * from './components/Collapsible/Collapsible.js';
+export * from './components/Command/Command.js';
+export * from './components/ContextMenu/ContextMenu.js';
+export * from './components/DatePicker/DatePicker.js';
+export * from './components/Dialog/Dialog.js';
+export * from './components/Drawer/Drawer.js';
+export * from './components/DropdownButton/DropdownButton.js';
+export * from './components/DropdownMenu/DropdownMenu.js';
+export * from './components/ErrorBoundary/ErrorBoundary.js';
+export * from './components/ErrorFallback/ErrorFallback.js';
+export * from './components/Form/Form.js';
+export * from './components/Heading/Heading.js';
+export * from './components/HoverCard/HoverCard.js';
+export * from './components/Input/Input.js';
+export * from './components/Label/Label.js';
+export * from './components/LanguageToggle/LanguageToggle.js';
+export * from './components/LegacyDropdown/LegacyDropdown.js';
+export * from './components/LegacyModal/LegacyModal.js';
+export * from './components/LegacySelectDropdown/LegacySelectDropdown.js';
+export * from './components/LegacySlider/LegacySlider.js';
+export * from './components/LegacyStepper/LegacyStepper.js';
+export * from './components/LegacyTable/LegacyClientTable.js';
+export * from './components/LegacyTable/LegacyTable.js';
+export * from './components/LineGraph/LineGraph.js';
+export * from './components/MenuBar/MenuBar.js';
+export * from './components/NotificationHub/NotificationHub.js';
+export * from './components/Pagination/Pagination.js';
+export * from './components/Popover/Popover.js';
+export * from './components/Progress/Progress.js';
+export * from './components/RadioGroup/RadioGroup.js';
+export * from './components/Resizable/Resizable.js';
+export * from './components/ScrollArea/ScrollArea.js';
+export * from './components/SearchBar/SearchBar.js';
+export * from './components/Select/Select.js';
+export * from './components/Separator/Separator.js';
+export * from './components/Sheet/Sheet.js';
+export * from './components/Slider/Slider.js';
+export * from './components/Spinner/Spinner.js';
+export * from './components/SpinnerIcon/SpinnerIcon.js';
+export * from './components/Switch/Switch.js';
+export * from './components/Table/Table.js';
+export * from './components/Tabs/Tabs.js';
+export * from './components/TextArea/TextArea.js';
+export * from './components/ThemeToggle/ThemeToggle.js';
+export * from './components/Tooltip/Tooltip.js';

package/src/context/LegacyStepperContext.tsx

@@ -0,0 +1,7 @@
+import React, { createContext } from 'react';
+
+/** @deprecated */
+export const LegacyStepperContext = createContext<{
+  index: number;
+  updateIndex: React.Dispatch<'decrement' | 'increment'>;
+}>(null!);

package/src/hooks/useDownload.ts

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+
+import type { Promisable } from 'type-fest';
+
+import { useNotificationsStore } from './useNotificationsStore.js';
+
+type DownloadOptions<T extends Blob | string = Blob | string> = T extends Blob
+  ? { blobType: 'image/png' }
+  : { blobType: 'text/csv' | 'text/plain' };
+
+/**
+ * Used to trigger downloads of arbitrary data to the client
+ * @returns A function to invoke the download
+ */
+export function useDownload() {
+  const notifications = useNotificationsStore();
+  const [state, setState] = useState<{
+    blobType: DownloadOptions['blobType'];
+    data: Blob | string;
+    filename: string;
+  } | null>(null);
+
+  useEffect(() => {
+    if (state) {
+      const { blobType, data, filename } = state;
+      const anchor = document.createElement('a');
+      document.body.appendChild(anchor);
+
+      const blob = new Blob([data], { type: blobType });
+
+      const url = URL.createObjectURL(blob);
+      anchor.href = url;
+      anchor.download = filename;
+      anchor.click();
+      URL.revokeObjectURL(url);
+      anchor.remove();
+      setState(null);
+    }
+  }, [state]);
+
+  return async <T extends Blob | string>(
+    filename: string,
+    fetchData: () => Promisable<T>,
+    options?: DownloadOptions<T>
+  ) => {
+    try {
+      const data = await fetchData();
+      if (typeof data !== 'string' && !options?.blobType) {
+        throw new Error("argument 'blobType' must be defined when download is called with a Blob object");
+      }
+      setState({ blobType: options?.blobType ?? 'text/plain', data, filename });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'An unknown error occurred';
+      notifications.addNotification({
+        message,
+        title: 'Error',
+        type: 'error'
+      });
+    }
+  };
+}

package/src/hooks/useEventCallback.ts

@@ -0,0 +1,15 @@
+import { useCallback, useRef } from 'react';
+
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+
+export function useEventCallback<Args extends unknown[], R>(fn: (...args: Args) => R) {
+  const ref = useRef<typeof fn>(() => {
+    throw new Error('Cannot call an event handler while rendering.');
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+
+  return useCallback((...args: Args) => ref.current(...args), [ref]);
+}