@douglasneuroinformatics/libui 2.11.0 → 3.0.1

package/src/components/Spinner/Spinner.stories.tsx

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

package/src/components/Spinner/Spinner.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { HTMLProps } from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const Spinner = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
   return (

package/src/components/Spinner/index.ts

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

package/src/components/SpinnerIcon/SpinnerIcon.stories.tsx

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

package/src/components/SpinnerIcon/SpinnerIcon.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 SpinnerIcon = ({ className, ...props }: React.HTMLAttributes<SVGElement>) => (
   <svg

package/src/components/SpinnerIcon/index.ts

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

package/src/components/StatisticCard/StatisticCard.stories.tsx

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

package/src/components/StatisticCard/StatisticCard.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { motion, useSpring, useTransform } from 'framer-motion';
 
-import { cn } from '../../utils.js';
-import { Card } from '../Card/Card.js';
+import { cn } from '@/utils';
+
+import { Card } from '../Card';
 
 type StatisticCardProps = {
   className?: string;

package/src/components/StatisticCard/index.ts

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

package/src/components/Switch/Switch.stories.tsx

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

package/src/components/Switch/Switch.tsx

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

package/src/components/Switch/index.ts

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

package/src/components/Table/Table.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Fragment } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Table } from './Table.js';
+import { Table } from './Table';
 
 const invoices = [
   {
@@ -56,7 +56,7 @@ export default { component: Table } as Meta<typeof Table>;
 export const Default: Story = {
   args: {
     children: (
-      <React.Fragment>
+      <Fragment>
         <Table.Caption>A list of your recent invoices.</Table.Caption>
         <Table.Header>
           <Table.Row>
@@ -82,7 +82,7 @@ export const Default: Story = {
             <Table.Cell className="text-right">$2,500.00</Table.Cell>
           </Table.Row>
         </Table.Footer>
-      </React.Fragment>
+      </Fragment>
     )
   }
 };

package/src/components/Table/Table.tsx

@@ -1,11 +1,11 @@
-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';
+import { TableBody } from './TableBody';
+import { TableCaption } from './TableCaption';
+import { TableCell } from './TableCell';
+import { TableFooter } from './TableFooter';
+import { TableHead } from './TableHead';
+import { TableHeader } from './TableHeader';
+import { TableRoot } from './TableRoot';
+import { TableRow } from './TableRow';
 
 export const Table = Object.assign(TableRoot, {
   Body: TableBody,

package/src/components/Table/TableBody.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+export const TableBody = 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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+export const TableCaption = 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

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

package/src/components/Table/TableFooter.tsx

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

package/src/components/Table/TableHead.tsx

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

package/src/components/Table/TableHeader.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+export const TableHeader = 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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const TableRoot = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(function TableRoot(
+export const TableRoot = forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(function TableRoot(
   { className, ...props },
   ref
 ) {

package/src/components/Table/TableRow.tsx

@@ -1,15 +1,16 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-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}
-      />
-    );
-  }
-);
+export const TableRow = 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/Table/index.ts

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

package/src/components/Tabs/Tabs.stories.tsx

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

package/src/components/Tabs/Tabs.tsx

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

package/src/components/Tabs/TabsContent.tsx

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

package/src/components/Tabs/TabsList.tsx

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

package/src/components/Tabs/TabsRoot.tsx

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

package/src/components/Tabs/TabsTrigger.tsx

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

package/src/components/Tabs/index.ts

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

package/src/components/TextArea/TextArea.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 } from 'vitest';
 
-import { TextArea } from './TextArea.js';
+import { TextArea } from './TextArea';
 
 const TEST_ID = 'text-area';
 

package/src/components/TextArea/TextArea.stories.tsx

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

package/src/components/TextArea/TextArea.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 

package/src/components/TextArea/index.ts

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

package/src/components/ThemeToggle/ThemeToggle.stories.tsx

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

package/src/components/ThemeToggle/ThemeToggle.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-
 import { MoonIcon, SunIcon } from 'lucide-react';
 
-import { useTheme } from '../../hooks/useTheme.js';
-import { Button, type ButtonProps } from '../Button/Button.js';
+import { useTheme } from '@/hooks/useTheme';
+
+import { Button, type ButtonProps } from '../Button';
 
 export type ThemeToggleProps = Omit<ButtonProps, 'children' | 'size'>;
 

package/src/components/ThemeToggle/index.ts

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

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { Fragment } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { DownloadIcon } from 'lucide-react';
 
-import { Tooltip } from './Tooltip.js';
+import { Tooltip } from './Tooltip';
 
 type Story = StoryObj<typeof Tooltip>;
 
@@ -18,12 +18,12 @@ export default {
 export const Outline: Story = {
   args: {
     children: (
-      <React.Fragment>
+      <Fragment>
         <Tooltip.Trigger>Hover</Tooltip.Trigger>
         <Tooltip.Content>
           <p>Add to library</p>
         </Tooltip.Content>
-      </React.Fragment>
+      </Fragment>
     )
   }
 };
@@ -31,14 +31,14 @@ export const Outline: Story = {
 export const Icon: Story = {
   args: {
     children: (
-      <React.Fragment>
+      <Fragment>
         <Tooltip.Trigger size="icon">
           <DownloadIcon />
         </Tooltip.Trigger>
         <Tooltip.Content>
           <p>Add to library</p>
         </Tooltip.Content>
-      </React.Fragment>
+      </Fragment>
     )
   }
 };

package/src/components/Tooltip/Tooltip.tsx

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

package/src/components/Tooltip/TooltipContent.tsx

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

package/src/components/Tooltip/TooltipRoot.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Provider, Root } from '@radix-ui/react-tooltip';
 

package/src/components/Tooltip/TooltipTrigger.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Trigger } from '@radix-ui/react-tooltip';
 
-import { Button, type ButtonProps } from '../Button/Button.js';
+import { Button, type ButtonProps } from '../Button';
 
 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>
-    );
-  }
-);
+export const TooltipTrigger = 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/Tooltip/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,52 @@
+export * from './Accordion';
+export * from './ActionDropdown';
+export * from './AlertDialog';
+export * from './ArrowToggle';
+export * from './Avatar';
+export * from './Badge';
+export * from './Breadcrumb';
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './ClientTable';
+export * from './Collapsible';
+export * from './Command';
+export * from './ContextMenu';
+export * from './CopyButton';
+export * from './DatePicker';
+export * from './Dialog';
+export * from './Drawer';
+export * from './DropdownButton';
+export * from './DropdownMenu';
+export * from './ErrorBoundary';
+export * from './ErrorFallback';
+export * from './Form';
+export * from './Heading';
+export * from './HoverCard';
+export * from './Input';
+export * from './Label';
+export * from './LanguageToggle';
+export * from './LineGraph';
+export * from './ListboxDropdown';
+export * from './MenuBar';
+export * from './NotificationHub';
+export * from './Pagination';
+export * from './Popover';
+export * from './Progress';
+export * from './RadioGroup';
+export * from './Resizable';
+export * from './ScrollArea';
+export * from './SearchBar';
+export * from './Select';
+export * from './Separator';
+export * from './Sheet';
+export * from './Slider';
+export * from './Spinner';
+export * from './SpinnerIcon';
+export * from './StatisticCard';
+export * from './Switch';
+export * from './Table';
+export * from './Tabs';
+export * from './TextArea';
+export * from './ThemeToggle';
+export * from './Tooltip';

package/src/context/TranslationContext.tsx

@@ -0,0 +1,40 @@
+import { createContext, useState } from 'react';
+
+import libui from '@/i18n/translations/libui.json';
+
+import type { Language, Translations } from '../i18n';
+
+type TranslationContextType = {
+  changeLanguage: (language: Language) => void;
+  defaultLanguage: Language;
+  resolvedLanguage: Language;
+  translations: Translations;
+};
+
+export const TranslationContext = createContext<TranslationContextType>({
+  changeLanguage: () => {
+    console.error(`Cannot change language without parent TranslationContextProvider`);
+    return;
+  },
+  defaultLanguage: 'en',
+  resolvedLanguage: 'en',
+  translations: {
+    libui
+  }
+});
+
+export const TranslationContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [resolvedLanguage, setResolvedLanguage] = useState<Language>('en');
+  return (
+    <TranslationContext.Provider
+      value={{
+        changeLanguage: (language) => setResolvedLanguage(language),
+        defaultLanguage: 'en',
+        resolvedLanguage,
+        translations: { libui }
+      }}
+    >
+      {children}
+    </TranslationContext.Provider>
+  );
+};