@douglasneuroinformatics/libui 2.11.0 → 3.0.1

package/src/components/Popover/PopoverContent.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Content, Portal } from '@radix-ui/react-popover';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export type PopoverContentProps = {
   /** The preferred alignment against the anchor, which may change when collisions occur */

package/src/components/Popover/index.ts

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

package/src/components/Progress/Progress.stories.tsx

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

package/src/components/Progress/Progress.tsx

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

package/src/components/Progress/index.ts

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

package/src/components/RadioGroup/RadioGroup.spec.tsx

@@ -1,11 +1,9 @@
-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 { Label } from '../Label/Label.js';
-import { RadioGroup, type RadioGroupProps } from './RadioGroup.js';
+import { Label } from '../Label';
+import { RadioGroup, type RadioGroupProps } from './RadioGroup';
 
 const TEST_ID = 'radio-group';
 

package/src/components/RadioGroup/RadioGroup.stories.tsx

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

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import * as React from 'react';
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
-import { cn } from '../../utils.js';
-import { RadioGroupItem } from './RadioGroupItem.js';
+import { cn } from '@/utils';
+
+import { RadioGroupItem } from './RadioGroupItem';
 
 type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
 

package/src/components/RadioGroup/RadioGroupItem.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { CircleIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const RadioGroupItem = React.forwardRef<
+export const RadioGroupItem = forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
 >(function RadioGroupItem({ className, ...props }, ref) {

package/src/components/RadioGroup/index.ts

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

package/src/components/Resizable/Resizable.stories.tsx

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

package/src/components/Resizable/Resizable.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Panel, type PanelProps } from 'react-resizable-panels';
 
-import { ResizableHandle, type ResizableHandleProps } from './ResizableHandle.js';
-import { ResizablePanelGroup, type ResizablePanelGroupProps } from './ResizablePanelGroup.js';
+import { ResizableHandle, type ResizableHandleProps } from './ResizableHandle';
+import { ResizablePanelGroup, type ResizablePanelGroupProps } from './ResizablePanelGroup';
 
 type ResizableRootType = React.FC<{ children: React.ReactNode }>;
 type ResizableType = {

package/src/components/Resizable/ResizableHandle.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 import { GripVertical } from 'lucide-react';
 import { PanelResizeHandle } from 'react-resizable-panels';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export type ResizableHandleProps = {
   withHandle?: boolean;

package/src/components/Resizable/ResizablePanelGroup.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 
 import { PanelGroup } from 'react-resizable-panels';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export type ResizablePanelGroupProps = React.ComponentProps<typeof PanelGroup>;
 

package/src/components/Resizable/index.ts

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

package/src/components/ScrollArea/ScrollArea.spec.tsx

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

package/src/components/ScrollArea/ScrollArea.stories.tsx

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

package/src/components/ScrollArea/ScrollArea.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Corner, Root, Viewport } from '@radix-ui/react-scroll-area';
 
-import { cn } from '../../utils.js';
-import { ScrollBar } from './ScrollBar.js';
+import { cn } from '@/utils';
 
-export const ScrollArea = React.forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
+import { ScrollBar } from './ScrollBar';
+
+export const ScrollArea = forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
   function ScrollArea({ children, className, ...props }, ref) {
     return (
       <Root className={cn('relative overflow-hidden', className)} data-testid="scroll-area" ref={ref} {...props}>

package/src/components/ScrollArea/ScrollBar.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { ScrollAreaScrollbar, ScrollAreaThumb } from '@radix-ui/react-scroll-area';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const ScrollBar = React.forwardRef<
+export const ScrollBar = forwardRef<
   React.ElementRef<typeof ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaScrollbar>
 >(function ScrollBar({ className, orientation = 'vertical', ...props }, ref) {

package/src/components/ScrollArea/index.ts

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

package/src/components/SearchBar/SearchBar.stories.tsx

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

package/src/components/SearchBar/SearchBar.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-
 import { SearchIcon } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
 
-import { cn } from '../../utils.js';
-import { Input } from '../Input/Input.js';
+import { useTranslation } from '@/hooks';
+import { cn } from '@/utils';
+
+import { Input } from '../Input';
 
 export type BaseSearchBarProps = {
   /** Additional CSS classes to add to the wrapper form component, potentially overriding default styling */

package/src/components/SearchBar/index.ts

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

package/src/components/Select/Select.stories.tsx

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

package/src/components/Select/Select.tsx

@@ -1,12 +1,12 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 
-import { SelectContent } from './SelectContent.js';
-import { SelectItem } from './SelectItem.js';
-import { SelectLabel } from './SelectLabel.js';
-import { SelectScrollDownButton } from './SelectScrollDownButton.js';
-import { SelectScrollUpButton } from './SelectScrollUpButton.js';
-import { SelectSeparator } from './SelectSeparator.js';
-import { SelectTrigger } from './SelectTrigger.js';
+import { SelectContent } from './SelectContent';
+import { SelectItem } from './SelectItem';
+import { SelectLabel } from './SelectLabel';
+import { SelectScrollDownButton } from './SelectScrollDownButton';
+import { SelectScrollUpButton } from './SelectScrollUpButton';
+import { SelectSeparator } from './SelectSeparator';
+import { SelectTrigger } from './SelectTrigger';
 
 export const Select = Object.assign(SelectPrimitive.Root.bind(null), {
   Content: SelectContent,

package/src/components/Select/SelectContent.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as SelectPrimitive from '@radix-ui/react-select';
 
-import { cn } from '../../utils.js';
-import { SelectScrollDownButton } from './SelectScrollDownButton.js';
-import { SelectScrollUpButton } from './SelectScrollUpButton.js';
+import { cn } from '@/utils';
 
-export const SelectContent = React.forwardRef<
+import { SelectScrollDownButton } from './SelectScrollDownButton';
+import { SelectScrollUpButton } from './SelectScrollUpButton';
+
+export const SelectContent = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(function SelectContent({ children, className, position = 'popper', ...props }, ref) {

package/src/components/Select/SelectItem.tsx

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

package/src/components/Select/SelectLabel.tsx

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

package/src/components/Select/SelectScrollDownButton.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ChevronDownIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const SelectScrollDownButton = React.forwardRef<
+export const SelectScrollDownButton = forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(function SelectScrollDownButton({ className, ...props }, ref) {

package/src/components/Select/SelectScrollUpButton.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ChevronUpIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const SelectScrollUpButton = React.forwardRef<
+export const SelectScrollUpButton = forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(function SelectScrollUpButton({ className, ...props }, ref) {

package/src/components/Select/SelectSeparator.tsx

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

package/src/components/Select/SelectTrigger.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as SelectPrimitive from '@radix-ui/react-select';
 
-import { DropdownButton } from '../DropdownButton/DropdownButton.js';
+import { DropdownButton } from '../DropdownButton';
 
-export const SelectTrigger = React.forwardRef<
+export const SelectTrigger = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(function SelectTrigger({ children, className, ...props }, ref) {

package/src/components/Select/index.ts

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

package/src/components/Separator/Separator.spec.tsx

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

package/src/components/Separator/Separator.stories.tsx

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

package/src/components/Separator/Separator.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const Separator = React.forwardRef<
+export const Separator = forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(function Separator({ className, decorative = true, orientation = 'horizontal', ...props }, ref) {

package/src/components/Separator/index.ts

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

package/src/components/Sheet/Sheet.stories.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { Fragment } 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 { Sheet } from './Sheet.js';
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { Label } from '../Label';
+import { Sheet } from './Sheet';
 
 type Story = StoryObj<typeof Sheet>;
 
@@ -14,7 +14,7 @@ export default { component: Sheet } as Meta<typeof Sheet>;
 export const Default: Story = {
   args: {
     children: (
-      <React.Fragment>
+      <Fragment>
         <Sheet.Trigger asChild>
           <Button variant="outline">Open</Button>
         </Sheet.Trigger>
@@ -43,7 +43,7 @@ export const Default: Story = {
             </Sheet.Close>
           </Sheet.Footer>
         </Sheet.Content>
-      </React.Fragment>
+      </Fragment>
     )
   }
 };

package/src/components/Sheet/Sheet.tsx

@@ -1,12 +1,12 @@
 import { Close, Portal, Root, Trigger } from '@radix-ui/react-dialog';
 
-import { SheetBody } from './SheetBody.js';
-import { SheetContent } from './SheetContent.js';
-import { SheetDescription } from './SheetDescription.js';
-import { SheetFooter } from './SheetFooter.js';
-import { SheetHeader } from './SheetHeader.js';
-import { SheetOverlay } from './SheetOverlay.js';
-import { SheetTitle } from './SheetTitle.js';
+import { SheetBody } from './SheetBody';
+import { SheetContent } from './SheetContent';
+import { SheetDescription } from './SheetDescription';
+import { SheetFooter } from './SheetFooter';
+import { SheetHeader } from './SheetHeader';
+import { SheetOverlay } from './SheetOverlay';
+import { SheetTitle } from './SheetTitle';
 
 export const Sheet = Object.assign(Root.bind(null), {
   Body: SheetBody,

package/src/components/Sheet/SheetBody.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 SheetBody = ({
   children,

package/src/components/Sheet/SheetContent.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',

package/src/components/Sheet/SheetDescription.tsx

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

package/src/components/Sheet/SheetFooter.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 SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />

package/src/components/Sheet/SheetHeader.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 SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />

package/src/components/Sheet/SheetOverlay.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Overlay } from '@radix-ui/react-dialog';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const SheetOverlay = React.forwardRef<
+export const SheetOverlay = 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',
+        '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}

package/src/components/Sheet/SheetTitle.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Title } from '@radix-ui/react-dialog';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-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} />;
-});
+export const SheetTitle = 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/Sheet/index.ts

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

package/src/components/Slider/Slider.stories.tsx

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

package/src/components/Slider/Slider.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Range, Root, Thumb, Track } from '@radix-ui/react-slider';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const Slider = React.forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
+export const Slider = forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
   function Slider({ className, disabled, ...props }, ref) {
     return (
       <Root

package/src/components/Slider/index.ts

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