@douglasneuroinformatics/libui 2.0.2 → 2.0.4

package/src/components/LegacyTable/LegacyTableColumnHeader.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { Menu, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import { clsx } from 'clsx';
+
+import type { LegacyTableColumn, LegacyTableEntry } from './LegacyTable.js';
+
+/** @deprecated */
+export type LegacyColumnDropdownOptions<T extends LegacyTableEntry> = {
+  icon?: React.ComponentType<Omit<React.SVGProps<SVGSVGElement>, 'ref'>>;
+  label: string;
+  onSelection: (column: LegacyTableColumn<T>) => void;
+}[];
+
+/** @deprecated */
+export type LegacyTableColumnProps<T extends LegacyTableEntry> = {
+  column: LegacyTableColumn<T>;
+  dropdownOptions?: LegacyColumnDropdownOptions<T>;
+};
+
+/** @deprecated */
+export const LegacyTableColumnHeader = <T extends LegacyTableEntry>({
+  column,
+  dropdownOptions
+}: LegacyTableColumnProps<T>) => {
+  return (
+    <Menu as="div" className="relative">
+      <Menu.Button
+        className={clsx(
+          'flex min-w-[10rem] flex-shrink-0 items-center justify-between px-6 py-3 text-sm font-semibold text-slate-800 dark:text-slate-200',
+          { 'cursor-default': !dropdownOptions }
+        )}
+      >
+        {column.label}
+        {dropdownOptions && <ChevronDownIcon className="ml-3" height={16} width={16} />}
+      </Menu.Button>
+      {dropdownOptions && (
+        <Transition
+          as={React.Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items className="absolute right-4 z-50 mt-2 w-32 origin-top-right overflow-hidden rounded-md bg-slate-50 shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-700">
+            {dropdownOptions.map((option) => {
+              const Icon = option.icon;
+              return (
+                <Menu.Item
+                  as="button"
+                  className="flex w-full items-center text-ellipsis whitespace-nowrap px-3 py-2 hover:backdrop-brightness-95 dark:hover:backdrop-brightness-150"
+                  key={option.label}
+                  type="button"
+                  onClick={() => {
+                    option.onSelection(column);
+                  }}
+                >
+                  {Icon && <Icon className="mr-2" height={16} width={16} />}
+                  {option.label}
+                </Menu.Item>
+              );
+            })}
+          </Menu.Items>
+        </Transition>
+      )}
+    </Menu>
+  );
+};

package/src/components/LineGraph/LineGraph.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+
+import { toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { useTranslation } from 'react-i18next';
+import {
+  CartesianGrid,
+  ErrorBar,
+  Label,
+  Legend,
+  Line,
+  LineChart,
+  type LineProps,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from 'recharts';
+import type { ConditionalKeys } from 'type-fest';
+
+import { type Theme, useTheme } from '../../hooks/useTheme.js';
+
+/** An array of arbitrary objects with data to graph  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type LineGraphData = readonly { [key: string]: any }[];
+
+/** Extract string keys from items in `T` where the value of `T[K]` extends `K` */
+type ExtractValidKeys<T extends LineGraphData, K> = Extract<ConditionalKeys<T[number], K>, string>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type LineGraphLine<T extends LineGraphData = { [key: string]: any }[]> = Pick<
+  LineProps,
+  'legendType' | 'stroke' | 'strokeDasharray' | 'strokeWidth' | 'type'
+> & {
+  err?: ExtractValidKeys<T, number>;
+  name: string;
+  val: ExtractValidKeys<T, number>;
+};
+
+const strokeColors = {
+  dark: '#cbd5e1', // slate-300
+  light: '#475569' // slate-600
+};
+
+const tooltipStyles: { [K in Theme]: React.CSSProperties } = {
+  dark: {
+    backgroundColor: '#0f172a', // slate-900
+    borderColor: strokeColors.light,
+    borderRadius: '2px'
+  },
+  light: {
+    backgroundColor: '#f1f5f9', // slate-100
+    borderColor: strokeColors.dark,
+    borderRadius: '2px'
+  }
+};
+
+// eslint-disable-next-line react/function-component-definition
+function LineGraphComponent<const T extends LineGraphData>({
+  data,
+  lines,
+  xAxis
+}: {
+  /** An array of objects, where each object represents one point on the x-axis */
+  data: T;
+  lines: LineGraphLine<T>[];
+  xAxis?: {
+    key?: ExtractValidKeys<T, number>; // unix time
+    label?: string;
+  };
+}) {
+  const { i18n } = useTranslation('libui');
+  const [theme] = useTheme();
+
+  return (
+    <ResponsiveContainer height={400} width="100%">
+      <LineChart data={[...data]} margin={{ bottom: 5, left: 15, right: 15, top: 5 }}>
+        <CartesianGrid stroke="#64748b" strokeDasharray="5 5" />
+        <XAxis
+          axisLine={{ stroke: '#64748b' }}
+          dataKey={xAxis?.key}
+          domain={['auto', 'auto']}
+          height={50}
+          interval="preserveStartEnd"
+          padding={{ left: 20, right: 20 }}
+          stroke={strokeColors[theme]}
+          tickFormatter={(time: number) => toBasicISOString(new Date(time))}
+          tickLine={{ stroke: '#64748b' }}
+          tickMargin={8}
+          tickSize={8}
+          type={'number'}
+        >
+          <Label fill={strokeColors[theme]} offset={0} position="insideBottom" value={xAxis?.label} />
+        </XAxis>
+        <YAxis
+          axisLine={{ stroke: '#64748b' }}
+          stroke={strokeColors[theme]}
+          tickLine={{ stroke: '#64748b' }}
+          tickMargin={5}
+          tickSize={8}
+          width={40}
+        />
+        <Tooltip
+          contentStyle={tooltipStyles[theme]}
+          labelFormatter={(time: number) => {
+            const date = new Date(time);
+            return new Intl.DateTimeFormat(i18n.resolvedLanguage, {
+              dateStyle: 'full',
+              timeStyle: 'medium'
+            }).format(date);
+          }}
+          labelStyle={{ color: strokeColors[theme], fontWeight: 500, whiteSpace: 'pre-wrap' }}
+        />
+        {lines.map(({ err, name, stroke, type, val, ...props }) => (
+          <Line
+            {...props}
+            dataKey={val}
+            key={val}
+            name={name}
+            stroke={stroke ?? strokeColors[theme]}
+            type={type ?? 'linear'}
+          >
+            {err && <ErrorBar dataKey={err} stroke="#64748b" />}
+          </Line>
+        ))}
+        <Legend wrapperStyle={{ paddingLeft: 40, paddingTop: 10 }} />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
+
+export const LineGraph = React.memo(LineGraphComponent) as typeof LineGraphComponent;
+
+export type { LineGraphData, LineGraphLine };

package/src/components/MenuBar/MenuBar.tsx

@@ -0,0 +1,31 @@
+import { Group, Menu, Portal, RadioGroup, Sub } from '@radix-ui/react-menubar';
+
+import { MenuBarCheckboxItem } from './MenuBarCheckboxItem.js';
+import { MenuBarContent } from './MenuBarContent.js';
+import { MenuBarItem } from './MenuBarItem.js';
+import { MenuBarLabel } from './MenuBarLabel.js';
+import { MenuBarRadioItem } from './MenuBarRadioItem.js';
+import { MenuBarRoot } from './MenuBarRoot.js';
+import { MenuBarSeparator } from './MenuBarSeparator.js';
+import { MenuBarShortcut } from './MenuBarShortcut.js';
+import { MenuBarSubContent } from './MenuBarSubContent.js';
+import { MenuBarSubTrigger } from './MenuBarSubTrigger.js';
+import { MenuBarTrigger } from './MenuBarTrigger.js';
+
+export const MenuBar = Object.assign(MenuBarRoot, {
+  CheckboxItem: MenuBarCheckboxItem,
+  Content: MenuBarContent,
+  Group: Group,
+  Item: MenuBarItem,
+  Label: MenuBarLabel,
+  Menu: Menu,
+  Portal: Portal,
+  RadioGroup: RadioGroup,
+  RadioItem: MenuBarRadioItem,
+  Separator: MenuBarSeparator,
+  Shortcut: MenuBarShortcut,
+  Sub: Sub,
+  SubContent: MenuBarSubContent,
+  SubTrigger: MenuBarSubTrigger,
+  Trigger: MenuBarTrigger
+});

package/src/components/MenuBar/MenuBarCheckboxItem.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { CheckboxItem, ItemIndicator } from '@radix-ui/react-menubar';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const MenuBarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof CheckboxItem>
+>(function MenuBarCheckboxItem({ checked, children, className, ...props }, ref) {
+  return (
+    <CheckboxItem
+      checked={checked}
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ItemIndicator>
+          <CheckIcon className="h-4 w-4" />
+        </ItemIndicator>
+      </span>
+      {children}
+    </CheckboxItem>
+  );
+});

package/src/components/MenuBar/MenuBarContent.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Content, Portal } from '@radix-ui/react-menubar';
+
+import { cn } from '../../utils.js';
+export const MenuBarContent = React.forwardRef<
+  React.ElementRef<typeof Content>,
+  React.ComponentPropsWithoutRef<typeof Content>
+>(function MenuBarContent({ align = 'start', alignOffset = -4, className, sideOffset = 8, ...props }, ref) {
+  return (
+    <Portal>
+      <Content
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(
+          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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
+        )}
+        ref={ref}
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </Portal>
+  );
+});

package/src/components/MenuBar/MenuBarItem.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Item } from '@radix-ui/react-menubar';
+
+import { cn } from '../../utils.js';
+
+export const MenuBarItem = React.forwardRef<
+  React.ElementRef<typeof Item>,
+  React.ComponentPropsWithoutRef<typeof Item> & {
+    inset?: boolean;
+  }
+>(function MenuBarItem({ className, inset, ...props }, ref) {
+  return (
+    <Item
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/MenuBar/MenuBarLabel.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Label } from '@radix-ui/react-menubar';
+
+import { cn } from '../../utils.js';
+
+export const MenuBarLabel = React.forwardRef<
+  React.ElementRef<typeof Label>,
+  React.ComponentPropsWithoutRef<typeof Label> & {
+    inset?: boolean;
+  }
+>(function MenuBarLabel({ className, inset, ...props }, ref) {
+  return <Label className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)} ref={ref} {...props} />;
+});

package/src/components/MenuBar/MenuBarRadioItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { ItemIndicator, RadioItem } from '@radix-ui/react-menubar';
+import { CircleIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const MenuBarRadioItem = React.forwardRef<
+  React.ElementRef<typeof RadioItem>,
+  React.ComponentPropsWithoutRef<typeof RadioItem>
+>(function MenuBarRadioItem({ children, className, ...props }, ref) {
+  return (
+    <RadioItem
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ItemIndicator>
+          <CircleIcon className="fill-current" style={{ height: 8, width: 8 }} />
+        </ItemIndicator>
+      </span>
+      {children}
+    </RadioItem>
+  );
+});

package/src/components/MenuBar/MenuBarRoot.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Root } from '@radix-ui/react-menubar';
+
+import { cn } from '../../utils.js';
+
+export const MenuBarRoot = React.forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
+  function MenuBarRoot({ className, ...props }, ref) {
+    return (
+      <Root
+        className={cn('flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm', className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);

package/src/components/MenuBar/MenuBarSeparator.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Separator } from '@radix-ui/react-menubar';
+
+import { cn } from '../../utils.js';
+
+export const MenuBarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentPropsWithoutRef<typeof Separator>
+>(function MenuBarSeparator({ className, ...props }, ref) {
+  return <Separator className={cn('-mx-1 my-1 h-px bg-muted', className)} ref={ref} {...props} />;
+});

package/src/components/MenuBar/MenuBarShortcut.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const MenuBarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;
+};

package/src/components/MenuBar/MenuBarSubContent.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { SubContent } from '@radix-ui/react-menubar';
+
+import { cn } from '../../utils.js';
+
+export const MenuBarSubContent = React.forwardRef<
+  React.ElementRef<typeof SubContent>,
+  React.ComponentPropsWithoutRef<typeof SubContent>
+>(function MenuBarSubContent({ className, ...props }, ref) {
+  return (
+    <SubContent
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/MenuBar/MenuBarSubTrigger.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { SubTrigger } from '@radix-ui/react-menubar';
+import { ChevronRightIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const MenuBarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof SubTrigger> & {
+    inset?: boolean;
+  }
+>(function MenuBarSubTrigger({ children, className, inset, ...props }, ref) {
+  return (
+    <SubTrigger
+      className={cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        inset && 'pl-8',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </SubTrigger>
+  );
+});

package/src/components/MenuBar/MenuBarTrigger.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Trigger } from '@radix-ui/react-menubar';
+
+import { cn } from '../../utils.js';
+export const MenuBarTrigger = React.forwardRef<
+  React.ElementRef<typeof Trigger>,
+  React.ComponentPropsWithoutRef<typeof Trigger>
+>(function MenuBarTrigger({ className, ...props }, ref) {
+  return (
+    <Trigger
+      className={cn(
+        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/NotificationHub/NotificationHub.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { XIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { useNotificationsStore } from '../../hooks/useNotificationsStore.js';
+import { Card } from '../Card/Card.js';
+import { NotificationIcon } from './NotificationIcon.js';
+
+type NotificationHubProps = {
+  /** The number of milliseconds before the notification is automatically cleared */
+  timeout?: number;
+};
+
+const NotificationHub = ({ timeout = 5000 }: NotificationHubProps) => {
+  const { t } = useTranslation('libui');
+  const { dismissNotification, notifications } = useNotificationsStore();
+
+  return (
+    <div className="fixed bottom-0 z-50 w-full print:hidden">
+      <AnimatePresence>
+        {notifications.map((item) => (
+          <motion.div
+            animate={{ height: 'auto', opacity: 1 }}
+            className="relative max-w-sm"
+            exit={{ height: 0, opacity: 0 }}
+            initial={{ height: 0, opacity: 0 }}
+            key={item.id}
+            transition={{ bounce: 0.1, type: 'spring' }}
+          >
+            <div className="w-full p-2">
+              <Card className="w-full rounded-lg p-0">
+                <div className="p-4">
+                  <div className="mb-2 flex items-center">
+                    <NotificationIcon type={item.type} />
+                    <h5 className="ml-3 flex-grow font-medium text-slate-900 dark:text-slate-100">
+                      {item.title ?? t(`notifications.types.${item.type}`)}
+                    </h5>
+                    <button
+                      className="inline-flex rounded-md text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:focus:ring-sky-600"
+                      type="button"
+                      onClick={() => {
+                        dismissNotification(item.id);
+                      }}
+                    >
+                      <XIcon aria-hidden="true" className="h-5 w-5" />
+                    </button>
+                  </div>
+                  <p className="my-2 text-muted-foreground">{item.message}</p>
+                </div>
+                <motion.div
+                  animate={{ width: '100%' }}
+                  className="h-1 bg-slate-500"
+                  initial={{ width: '0%' }}
+                  transition={{ duration: timeout / 1000, ease: 'linear' }}
+                  onAnimationComplete={() => {
+                    dismissNotification(item.id);
+                  }}
+                />
+              </Card>
+            </div>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export { NotificationHub, type NotificationHubProps };

package/src/components/NotificationHub/NotificationIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { CheckCircleIcon, ExclamationCircleIcon, InformationCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
+
+import { type NotificationInterface } from '../../hooks/useNotificationsStore.js';
+
+export type NotificationIconProps = {
+  type: NotificationInterface['type'];
+};
+
+export const NotificationIcon = ({ type }: NotificationIconProps) => {
+  switch (type) {
+    case 'info':
+      return <InformationCircleIcon aria-hidden="true" className="h-6 w-6 text-blue-500" />;
+    case 'success':
+      return <CheckCircleIcon aria-hidden="true" className="h-6 w-6 text-green-500" />;
+    case 'warning':
+      return <ExclamationCircleIcon aria-hidden="true" className="h-6 w-6 text-yellow-500" />;
+    case 'error':
+      return <XCircleIcon aria-hidden="true" className="h-6 w-6 text-red-500" />;
+  }
+};

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,16 @@
+import { PaginationContent } from './PaginationContent.js';
+import { PaginationEllipsis } from './PaginationEllipsis.js';
+import { PaginationItem } from './PaginationItem.js';
+import { PaginationLink } from './PaginationLink.js';
+import { PaginationNext } from './PaginationNext.js';
+import { PaginationPrevious } from './PaginationPrevious.js';
+import { PaginationRoot } from './PaginationRoot.js';
+
+export const Pagination = Object.assign(PaginationRoot, {
+  Content: PaginationContent,
+  Ellipsis: PaginationEllipsis,
+  Item: PaginationItem,
+  Link: PaginationLink,
+  Next: PaginationNext,
+  Previous: PaginationPrevious
+});

package/src/components/Pagination/PaginationContent.tsx

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

package/src/components/Pagination/PaginationEllipsis.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { MoreHorizontalIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span aria-hidden className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>
+    <MoreHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);

package/src/components/Pagination/PaginationItem.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const PaginationItem = ({ className, ...props }: React.ComponentProps<'li'>) => (
+  <li className={className} {...props} />
+);

package/src/components/Pagination/PaginationLink.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import type { Simplify } from 'type-fest';
+
+import { cn } from '../../utils.js';
+import { type ButtonProps, buttonVariants } from '../Button/Button.js';
+
+export type PaginationLinkProps = Simplify<
+  Pick<ButtonProps, 'size'> &
+    React.ComponentProps<'a'> & {
+      isActive?: boolean;
+    }
+>;
+
+export const PaginationLink = ({ children, className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        size,
+        variant: isActive ? 'outline' : 'ghost'
+      }),
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </a>
+);

package/src/components/Pagination/PaginationNext.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { ChevronRightIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { cn } from '../../utils.js';
+import { PaginationLink } from './PaginationLink.js';
+
+export const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => {
+  const { t } = useTranslation('libui');
+  return (
+    <PaginationLink aria-label="Go to next page" className={cn('gap-1 pr-2.5', className)} size="md" {...props}>
+      <span>{t('pagination.next')}</span>
+      <ChevronRightIcon className="h-4 w-4" />
+    </PaginationLink>
+  );
+};