@douglasneuroinformatics/libui 2.11.0 → 3.0.1

package/src/components/Dialog/DialogTitle.tsx

@@ -1,12 +1,13 @@
-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 DialogTitle = React.forwardRef<
-  React.ElementRef<typeof Title>,
-  React.ComponentPropsWithoutRef<typeof Title>
->(function DialogTitle({ className, ...props }, ref) {
-  return <Title className={cn('text-lg font-semibold leading-none tracking-tight', className)} ref={ref} {...props} />;
-});
+export const DialogTitle = forwardRef<React.ElementRef<typeof Title>, React.ComponentPropsWithoutRef<typeof Title>>(
+  function DialogTitle({ className, ...props }, ref) {
+    return (
+      <Title className={cn('text-lg font-semibold leading-none tracking-tight', className)} ref={ref} {...props} />
+    );
+  }
+);

package/src/components/Dialog/index.ts

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

package/src/components/Drawer/Drawer.stories.tsx

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

package/src/components/Drawer/Drawer.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Drawer as DrawerPrimitive } from 'vaul';
 
-import { DrawerContent } from './DrawerContent.js';
-import { DrawerDescription } from './DrawerDescription.js';
-import { DrawerFooter } from './DrawerFooter.js';
-import { DrawerHeader } from './DrawerHeader.js';
-import { DrawerTitle } from './DrawerTitle.js';
+import { DrawerContent } from './DrawerContent';
+import { DrawerDescription } from './DrawerDescription';
+import { DrawerFooter } from './DrawerFooter';
+import { DrawerHeader } from './DrawerHeader';
+import { DrawerTitle } from './DrawerTitle';
 
 const DrawerRoot = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
   <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />

package/src/components/Drawer/DrawerContent.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Drawer as DrawerPrimitive } from 'vaul';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const DrawerContent = React.forwardRef<
+export const DrawerContent = forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 >(function DrawerContent({ children, className, ...props }, ref) {

package/src/components/Drawer/DrawerDescription.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Drawer as DrawerPrimitive } from 'vaul';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const DrawerDescription = React.forwardRef<
+export const DrawerDescription = forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 >(function DrawerDescription({ className, ...props }, ref) {

package/src/components/Drawer/DrawerFooter.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 DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />

package/src/components/Drawer/DrawerHeader.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 DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />

package/src/components/Drawer/DrawerTitle.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Drawer as DrawerPrimitive } from 'vaul';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const DrawerTitle = React.forwardRef<
+export const DrawerTitle = forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 >(function DrawerTitle({ className, ...props }, ref) {

package/src/components/Drawer/index.ts

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

package/src/components/DropdownButton/DropdownButton.stories.tsx

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

package/src/components/DropdownButton/DropdownButton.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { ChevronDownIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const DropdownButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+export const DropdownButton = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
   function DropdownButton({ children, className, ...props }, ref) {
     return (
       <button

package/src/components/DropdownButton/index.ts

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

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

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

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,14 +1,14 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-import { DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.js';
-import { DropdownMenuContent } from './DropdownMenuContent.js';
-import { DropdownMenuItem } from './DropdownMenuItem.js';
-import { DropdownMenuLabel } from './DropdownMenuLabel.js';
-import { DropdownMenuRadioItem } from './DropdownMenuRadioItem.js';
-import { DropdownMenuSeparator } from './DropdownMenuSeparator.js';
-import { DropdownMenuShortcut } from './DropdownMenuShortcut.js';
-import { DropdownMenuSubContent } from './DropdownMenuSubContent.js';
-import { DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.js';
+import { DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem';
+import { DropdownMenuContent } from './DropdownMenuContent';
+import { DropdownMenuItem } from './DropdownMenuItem';
+import { DropdownMenuLabel } from './DropdownMenuLabel';
+import { DropdownMenuRadioItem } from './DropdownMenuRadioItem';
+import { DropdownMenuSeparator } from './DropdownMenuSeparator';
+import { DropdownMenuShortcut } from './DropdownMenuShortcut';
+import { DropdownMenuSubContent } from './DropdownMenuSubContent';
+import { DropdownMenuSubTrigger } from './DropdownMenuSubTrigger';
 
 export const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root.bind(null), {
   CheckboxItem: DropdownMenuCheckboxItem,

package/src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx

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

package/src/components/DropdownMenu/DropdownMenuContent.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export type DropdownMenuContentProps = {
   widthFull?: boolean;

package/src/components/DropdownMenu/DropdownMenuItem.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const DropdownMenuItem = React.forwardRef<
+export const DropdownMenuItem = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   {
     inset?: boolean;

package/src/components/DropdownMenu/DropdownMenuLabel.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const DropdownMenuLabel = React.forwardRef<
+export const DropdownMenuLabel = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   {
     inset?: boolean;

package/src/components/DropdownMenu/DropdownMenuRadioItem.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CircleIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const DropdownMenuRadioItem = React.forwardRef<
+export const DropdownMenuRadioItem = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(function DropdownMenuRadioItem({ children, className, ...props }, ref) {

package/src/components/DropdownMenu/DropdownMenuSeparator.tsx

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

package/src/components/DropdownMenu/DropdownMenuShortcut.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 DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />;

package/src/components/DropdownMenu/DropdownMenuSubContent.tsx

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

package/src/components/DropdownMenu/DropdownMenuSubTrigger.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { ChevronRightIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const DropdownMenuSubTrigger = React.forwardRef<
+export const DropdownMenuSubTrigger = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   {
     inset?: boolean;

package/src/components/DropdownMenu/index.ts

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

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 
 import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
 
-import { ErrorFallback } from '../ErrorFallback/ErrorFallback.js';
+import { ErrorFallback } from '../ErrorFallback';
 
 export const ErrorBoundary: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return <ReactErrorBoundary FallbackComponent={ErrorFallback}>{children}</ReactErrorBoundary>;

package/src/components/ErrorBoundary/index.ts

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

package/src/components/ErrorFallback/ErrorFallback.stories.tsx

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

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 export type ErrorFallbackProps = {
   error: {
@@ -12,7 +12,7 @@ export const ErrorFallback = ({ error }: ErrorFallbackProps) => {
   }, [error]);
 
   return (
-    <div className="flex min-h-screen  flex-col items-center justify-center gap-1 p-3 text-center">
+    <div className="flex min-h-screen flex-col items-center justify-center gap-1 p-3 text-center">
       <h1 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Unexpected Error</h1>
       <h3 className="text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl">Something Went Wrong</h3>
       <p className="mt-2 max-w-prose text-sm text-muted-foreground sm:text-base">

package/src/components/ErrorFallback/index.ts

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

package/src/components/Form/BaseRadioField.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
-
 import { cva } from 'class-variance-authority';
 import type { Simplify } from 'type-fest';
 
-import { Label } from '../Label/Label.js';
-import { RadioGroup } from '../RadioGroup/RadioGroup.js';
-import { FieldGroup } from './FieldGroup/FieldGroup.js';
+import { Label } from '../Label';
+import { RadioGroup } from '../RadioGroup';
+import { FieldGroup } from './FieldGroup';
 
-import type { BaseFieldComponentProps } from './types.js';
+import type { BaseFieldComponentProps } from './types';
 
 const baseRadioFieldVariants = cva('flex', {
   defaultVariants: {

package/src/components/Form/BooleanField/BooleanField.spec.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import { BooleanField, type BooleanFieldProps } from './BooleanField.js';
+import { BooleanField, type BooleanFieldProps } from './BooleanField';
 
 const TestBooleanField = ({ variant }: Pick<BooleanFieldProps, 'variant'>) => {
   const [error, setError] = useState<string[] | undefined>();

package/src/components/Form/BooleanField/BooleanField.stories.tsx

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

package/src/components/Form/BooleanField/BooleanField.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import { match } from 'ts-pattern';
 
-import { BooleanFieldCheckbox, type BooleanFieldCheckboxProps } from './BooleanFieldCheckbox.js';
-import { BooleanFieldRadio, type BooleanFieldRadioProps } from './BooleanFieldRadio.js';
+import { BooleanFieldCheckbox, type BooleanFieldCheckboxProps } from './BooleanFieldCheckbox';
+import { BooleanFieldRadio, type BooleanFieldRadioProps } from './BooleanFieldRadio';
 
 export type BooleanFieldProps = BooleanFieldCheckboxProps | BooleanFieldRadioProps;
 

package/src/components/Form/BooleanField/BooleanFieldCheckbox.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
-
 import type { BooleanFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { Simplify } from 'type-fest';
 
-import { Checkbox } from '../../Checkbox/Checkbox.js';
-import { Label } from '../../Label/Label.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { Checkbox } from '@/components/Checkbox';
+import { Label } from '@/components/Label';
+
+import { FieldGroup } from '../FieldGroup';
 
-import type { BaseFieldComponentProps } from '../types.js';
+import type { BaseFieldComponentProps } from '../types';
 
 export type BooleanFieldCheckboxProps = Simplify<
   BaseFieldComponentProps<boolean> & Omit<Extract<BooleanFormField, { variant: 'checkbox' }>, 'kind'>

package/src/components/Form/BooleanField/BooleanFieldRadio.tsx

@@ -1,15 +1,16 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import type { BooleanFormField } from '@douglasneuroinformatics/libui-form-types';
-import { useTranslation } from 'react-i18next';
 import { match } from 'ts-pattern';
 import type { Simplify } from 'type-fest';
 
-import { Label } from '../../Label/Label.js';
-import { RadioGroup } from '../../RadioGroup/RadioGroup.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { Label } from '@/components/Label';
+import { RadioGroup } from '@/components/RadioGroup';
+import { useTranslation } from '@/hooks';
 
-import type { BaseFieldComponentProps } from '../types.js';
+import { FieldGroup } from '../FieldGroup';
+
+import type { BaseFieldComponentProps } from '../types';
 
 const stringifyBoolean = (value: boolean | undefined) =>
   match(value)

package/src/components/Form/BooleanField/index.ts

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

package/src/components/Form/DateField/DateField.spec.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 import { toBasicISOString } from '@douglasneuroinformatics/libjs';
 import { getByText, render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { DateField } from './DateField.js';
+import { DateField } from './DateField';
 
 describe('DateField', () => {
   const setError = vi.fn();

package/src/components/Form/DateField/DateField.stories.tsx

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

package/src/components/Form/DateField/DateField.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { toBasicISOString } from '@douglasneuroinformatics/libjs';
 import type { DateFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { Simplify } from 'type-fest';
 
-import { DatePicker } from '../../DatePicker/DatePicker.js';
-import { Input } from '../../Input/Input.js';
-import { Label } from '../../Label/Label.js';
-import { Popover } from '../../Popover/Popover.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
-import { type BaseFieldComponentProps } from '../types.js';
+import { DatePicker } from '@/components/DatePicker';
+import { Input } from '@/components/Input';
+import { Label } from '@/components/Label';
+import { Popover } from '@/components/Popover';
+
+import { FieldGroup } from '../FieldGroup';
+import { type BaseFieldComponentProps } from '../types';
 
 const isValidDateString = (s: string) => /^(\d{4})-((0[1-9])|(1[0-2]))-((0[1-9])|([12])[0-9]|3[01])$/.test(s);
 

package/src/components/Form/DateField/index.ts

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

package/src/components/Form/DynamicField.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
 
 import type { DynamicFormField, FormDataType, PartialFormDataType } from '@douglasneuroinformatics/libui-form-types';
 import { pick } from 'lodash-es';
 
-import { StaticField } from './StaticField.js';
+import { StaticField } from './StaticField';
 
-import type { FormErrors } from './types.js';
+import type { FormErrors } from './types';
 
 export type DynamicFieldProps<TData extends FormDataType> = {
   errors: FormErrors<TData>;

package/src/components/Form/ErrorMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { CircleAlertIcon } from 'lucide-react';
 

package/src/components/Form/FieldGroup/FieldGroup.tsx

@@ -1,7 +1,7 @@
-import { ErrorMessage } from '../ErrorMessage.js';
-import { FieldGroupDescription } from './FieldGroupDescription.js';
-import { FieldGroupRoot } from './FieldGroupRoot.js';
-import { FieldGroupRow } from './FieldGroupRow.js';
+import { ErrorMessage } from '../ErrorMessage';
+import { FieldGroupDescription } from './FieldGroupDescription';
+import { FieldGroupRoot } from './FieldGroupRoot';
+import { FieldGroupRow } from './FieldGroupRow';
 
 export const FieldGroup = Object.assign(FieldGroupRoot, {
   Description: FieldGroupDescription,

package/src/components/Form/FieldGroup/FieldGroupDescription.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 
 import { CircleHelpIcon } from 'lucide-react';
 
-import { Popover } from '../../Popover/Popover.js';
+import { Popover } from '@/components/Popover';
 
 export const FieldGroupDescription: React.FC<{ description?: null | string }> = ({ description }) =>
   description ? (

package/src/components/Form/FieldGroup/FieldGroupRoot.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export const FieldGroupRoot: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   <div className="flex flex-col gap-3 @container">{children}</div>

package/src/components/Form/FieldGroup/FieldGroupRow.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export const FieldGroupRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   <div className="relative flex items-center gap-2">{children}</div>

package/src/components/Form/FieldGroup/index.ts

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

package/src/components/Form/FieldsComponent.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import * as React from 'react';
 
 import type { FormDataType, FormFields, PartialFormDataType } from '@douglasneuroinformatics/libui-form-types';
 
-import { DynamicField } from './DynamicField.js';
-import { StaticField } from './StaticField.js';
+import { DynamicField } from './DynamicField';
+import { StaticField } from './StaticField';
 
-import type { FormErrors } from './types.js';
+import type { FormErrors } from './types';
 
 export type FieldsComponentProps<T extends FormDataType> = {
   errors: FormErrors<T>;