@douglasneuroinformatics/libui 2.11.0 → 3.0.0

package/src/components/AlertDialog/AlertDialogAction.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Action } from '@radix-ui/react-alert-dialog';
 
-import { cn } from '../../utils.js';
-import { buttonVariants } from '../Button/Button.js';
+import { cn } from '@/utils';
 
-export const AlertDialogAction = React.forwardRef<
+import { buttonVariants } from '../Button';
+
+export const AlertDialogAction = forwardRef<
   React.ElementRef<typeof Action>,
   React.ComponentPropsWithoutRef<typeof Action>
 >(function AlertDialogAction({ className, ...props }, ref) {

package/src/components/AlertDialog/AlertDialogCancel.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Cancel } from '@radix-ui/react-alert-dialog';
 
-import { cn } from '../../utils.js';
-import { buttonVariants } from '../Button/Button.js';
+import { cn } from '@/utils';
 
-export const AlertDialogCancel = React.forwardRef<
+import { buttonVariants } from '../Button';
+
+export const AlertDialogCancel = forwardRef<
   React.ElementRef<typeof Cancel>,
   React.ComponentPropsWithoutRef<typeof Cancel>
 >(function AlertDialogCancel({ className, ...props }, ref) {

package/src/components/AlertDialog/AlertDialogContent.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Content, Portal } from '@radix-ui/react-alert-dialog';
 
-import { cn } from '../../utils.js';
-import { AlertDialogOverlay } from './AlertDialogOverlay.js';
+import { cn } from '@/utils';
 
-export const AlertDialogContent = React.forwardRef<
+import { AlertDialogOverlay } from './AlertDialogOverlay';
+
+export const AlertDialogContent = forwardRef<
   React.ElementRef<typeof Content>,
   React.ComponentPropsWithoutRef<typeof Content>
 >(function AlertDialogContent({ className, ...props }, ref) {

package/src/components/AlertDialog/AlertDialogDescription.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Description } from '@radix-ui/react-alert-dialog';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const AlertDialogDescription = React.forwardRef<
+export const AlertDialogDescription = forwardRef<
   React.ElementRef<typeof Description>,
   React.ComponentPropsWithoutRef<typeof Description>
 >(function AlertDialogDescription({ className, ...props }, ref) {

package/src/components/AlertDialog/AlertDialogFooter.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn('flex flex-col gap-x-2 gap-y-0.5 sm:flex-row', className)} {...props} />

package/src/components/AlertDialog/AlertDialogHeader.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />

package/src/components/AlertDialog/AlertDialogOverlay.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Overlay } from '@radix-ui/react-alert-dialog';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const AlertDialogOverlay = React.forwardRef<
+export const AlertDialogOverlay = forwardRef<
   React.ElementRef<typeof Overlay>,
   React.ComponentPropsWithoutRef<typeof Overlay>
 >(function AlertDialogOverlay({ className, ...props }, ref) {

package/src/components/AlertDialog/AlertDialogTitle.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Title } from '@radix-ui/react-alert-dialog';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const AlertDialogTitle = React.forwardRef<
+export const AlertDialogTitle = forwardRef<
   React.ElementRef<typeof Title>,
   React.ComponentPropsWithoutRef<typeof Title>
 >(function AlertDialogTitle({ className, ...props }, ref) {

package/src/components/AlertDialog/index.ts

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

package/src/components/ArrowToggle/ArrowToggle.spec.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { ArrowToggle, type ArrowToggleProps } from './ArrowToggle.js';
+import { ArrowToggle, type ArrowToggleProps } from './ArrowToggle';
 
 const TestArrowToggle = ({ onClick, ...props }: Omit<ArrowToggleProps, 'isToggled'>) => {
   const [isToggled, setIsToggled] = useState(false);

package/src/components/ArrowToggle/ArrowToggle.stories.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ArrowToggle } from './ArrowToggle.js';
+import { ArrowToggle } from './ArrowToggle';
 
 type Story = StoryObj<typeof ArrowToggle>;
 

package/src/components/ArrowToggle/ArrowToggle.tsx

@@ -1,10 +1,12 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
+import * as React from 'react';
 
 import { ChevronUpIcon } from 'lucide-react';
 import type { Simplify } from 'type-fest';
 
-import { cn } from '../../utils.js';
-import { Button, type ButtonProps } from '../Button/Button.js';
+import { cn } from '@/utils';
+
+import { Button, type ButtonProps } from '../Button';
 
 export type ArrowToggleProps = Simplify<
   {

package/src/components/ArrowToggle/index.ts

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

package/src/components/Avatar/Avatar.spec.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import { Avatar } from './Avatar.js';
+import { Avatar } from './Avatar';
 
 const TEST_ID = 'avatar';
 

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Avatar } from './Avatar.js';
+import { Avatar } from './Avatar';
 
 type Story = StoryObj<typeof Avatar>;
 

package/src/components/Avatar/Avatar.tsx

@@ -1,6 +1,6 @@
-import { AvatarFallback } from './AvatarFallback.js';
-import { AvatarImage } from './AvatarImage.js';
-import { AvatarRoot } from './AvatarRoot.js';
+import { AvatarFallback } from './AvatarFallback';
+import { AvatarImage } from './AvatarImage';
+import { AvatarRoot } from './AvatarRoot';
 
 export const Avatar = Object.assign(AvatarRoot, {
   Fallback: AvatarFallback,

package/src/components/Avatar/AvatarFallback.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const AvatarFallback = React.forwardRef<
+export const AvatarFallback = forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(function AvatarFallback({ className, ...props }, ref) {

package/src/components/Avatar/AvatarImage.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const AvatarImage = React.forwardRef<
+export const AvatarImage = forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(function AvatarImage({ className, ...props }, ref) {

package/src/components/Avatar/AvatarRoot.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const AvatarRoot = React.forwardRef<
+export const AvatarRoot = forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(function AvatarRoot({ className, ...props }, ref) {

package/src/components/Avatar/index.ts

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

package/src/components/Badge/Badge.spec.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import { Badge } from './Badge.js';
+import { Badge } from './Badge';
 
 const TEST_ID = 'badge';
 

package/src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Badge } from './Badge.js';
+import { Badge } from './Badge';
 
 type Story = StoryObj<typeof Badge>;
 

package/src/components/Badge/Badge.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-sm border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',

package/src/components/Badge/index.ts

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

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-import { Breadcrumb } from './Breadcrumb.js';
+import { DropdownMenu } from '../DropdownMenu';
+import { Breadcrumb } from './Breadcrumb';
 
 type Story = StoryObj<typeof Breadcrumb>;
 

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,10 +1,10 @@
-import { BreadcrumbEllipsis } from './BreadcrumbEllipsis.js';
-import { BreadcrumbItem } from './BreadcrumbItem.js';
-import { BreadcrumbLink } from './BreadcrumbLink.js';
-import { BreadcrumbList } from './BreadcrumbList.js';
-import { BreadcrumbPage } from './BreadcrumbPage.js';
-import { BreadcrumbRoot } from './BreadcrumbRoot.js';
-import { BreadcrumbSeparator } from './BreadcrumbSeparator.js';
+import { BreadcrumbEllipsis } from './BreadcrumbEllipsis';
+import { BreadcrumbItem } from './BreadcrumbItem';
+import { BreadcrumbLink } from './BreadcrumbLink';
+import { BreadcrumbList } from './BreadcrumbList';
+import { BreadcrumbPage } from './BreadcrumbPage';
+import { BreadcrumbRoot } from './BreadcrumbRoot';
+import { BreadcrumbSeparator } from './BreadcrumbSeparator';
 
 export const Breadcrumb = Object.assign(BreadcrumbRoot, {
   Ellipsis: BreadcrumbEllipsis,

package/src/components/Breadcrumb/BreadcrumbEllipsis.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 
 import { MoreHorizontalIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
   <span

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
-  function BreadcrumbItem({ className, ...props }, ref) {
-    return <li className={cn('inline-flex items-center gap-1.5', className)} ref={ref} {...props} />;
-  }
-);
+export const BreadcrumbItem = forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(function BreadcrumbItem(
+  { className, ...props },
+  ref
+) {
+  return <li className={cn('inline-flex items-center gap-1.5', className)} ref={ref} {...props} />;
+});

package/src/components/Breadcrumb/BreadcrumbLink.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Slot } from '@radix-ui/react-slot';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const BreadcrumbLink = React.forwardRef<
+export const BreadcrumbLink = forwardRef<
   HTMLAnchorElement,
   {
     asChild?: boolean;

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
+export const BreadcrumbList = forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
   function BreadcrumbList({ className, ...props }, ref) {
     return (
       <ol

package/src/components/Breadcrumb/BreadcrumbPage.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
+export const BreadcrumbPage = forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
   function BreadcrumbPage({ className, ...props }, ref) {
     return (
       <span

package/src/components/Breadcrumb/BreadcrumbRoot.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-export const BreadcrumbRoot = React.forwardRef<
+export const BreadcrumbRoot = forwardRef<
   HTMLElement,
   {
     separator?: React.ReactNode;

package/src/components/Breadcrumb/BreadcrumbSeparator.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 
 import { ChevronRightIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
   <li aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} role="presentation" {...props}>

package/src/components/Breadcrumb/index.ts

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

package/src/components/Button/Button.spec.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import { Button } from './Button.js';
+import { Button } from './Button';
 
 describe('Button', () => {
   it('should render', () => {

package/src/components/Button/Button.stories.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 import { DownloadIcon } from 'lucide-react';
 
-import { Button } from './Button.js';
+import { Button } from './Button';
 
 type Story = StoryObj<typeof Button>;
 

package/src/components/Button/Button.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import type { Simplify } from 'type-fest';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const BUTTON_ICON_SIZE = {
   lg: 18,

package/src/components/Button/index.ts

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

package/src/components/Card/Card.spec.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import { Card } from './Card.js';
+import { Card } from './Card';
 
 const TEST_ID = 'card';
 

package/src/components/Card/Card.stories.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from '../Button/Button.js';
-import { Input } from '../Input/Input.js';
-import { Label } from '../Label/Label.js';
-import { Select } from '../Select/Select.js';
-import { Card } from './Card.js';
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { Label } from '../Label';
+import { Select } from '../Select';
+import { Card } from './Card';
 
 type Story = StoryObj<typeof Card>;
 

package/src/components/Card/Card.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 const CardRoot = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(function CardRoot(
   { className, ...props },

package/src/components/Card/index.ts

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

package/src/components/Checkbox/Checkbox.spec.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { Checkbox } from './Checkbox.js';
+import { Checkbox } from './Checkbox';
 
 const TEST_ID = 'checkbox';
 

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Checkbox } from './Checkbox.js';
+import { Checkbox } from './Checkbox';
 
 type Story = StoryObj<typeof Checkbox>;
 

package/src/components/Checkbox/Checkbox.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const Checkbox = React.forwardRef<
+export const Checkbox = forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(function Checkbox({ className, ...props }, ref) {

package/src/components/Checkbox/index.ts

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

package/src/components/ClientTable/ClientTable.stories.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
 import { randomInt, range } from '@douglasneuroinformatics/libjs';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ClientTable } from './ClientTable.js';
-import { type ClientTableColumn } from './ClientTable.js';
+import { ClientTable } from './ClientTable';
+import { type ClientTableColumn } from './ClientTable';
 
 type ExampleItem = {
   c1: number;

package/src/components/ClientTable/ClientTable.tsx

@@ -1,13 +1,15 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 
 import { toBasicISOString } from '@douglasneuroinformatics/libjs';
 import { range } from 'lodash-es';
 import { ChevronDownIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
-import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-import { Table } from '../Table/Table.js';
-import { ClientTablePagination } from './ClientTablePagination.js';
+import { cn } from '@/utils';
+
+import { DropdownMenu } from '../DropdownMenu';
+import { Table } from '../Table';
+import { ClientTablePagination } from './ClientTablePagination';
 
 /** Coerces the value in a cell to a string for consistant display purposes */
 function defaultFormatter(value: unknown): string {

package/src/components/ClientTable/ClientTablePagination.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
+import { useTranslation } from '@/hooks';
 
-import { useTranslation } from 'react-i18next';
-
-import { Button } from '../Button/Button.js';
+import { Button } from '../Button';
 
 export type ClientPagePaginationProps = {
   currentPage: number;
@@ -25,13 +23,7 @@ export const ClientTablePagination = ({
   return (
     <div className="flex items-center justify-between py-3">
       <div className="hidden sm:block">
-        <p className="text-sm font-medium text-muted-foreground">
-          {t('pagination.info', {
-            first: firstEntry,
-            last: lastEntry,
-            total: totalEntries
-          })}
-        </p>
+        <p className="text-sm font-medium text-muted-foreground">{`${firstEntry} - ${lastEntry} / ${totalEntries}`}</p>
       </div>
       <div className="flex flex-1 justify-between gap-3 sm:justify-end">
         <Button

package/src/components/ClientTable/index.ts

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