@douglasneuroinformatics/libui 2.10.0 → 3.0.0

package/src/components/Form/NumberField/NumberFieldSelect.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
-
 import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { Simplify } from 'type-fest';
 
-import { Label } from '../../Label/Label.js';
-import { Select } from '../../Select/Select.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
-import { type BaseFieldComponentProps } from '../types.js';
+import { Label } from '@/components/Label';
+import { Select } from '@/components/Select';
+
+import { FieldGroup } from '../FieldGroup';
+import { type BaseFieldComponentProps } from '../types';
 
 export type NumberFieldSelectProps<T extends number = number> = Simplify<
   BaseFieldComponentProps<T> & Extract<NumberFormField<T>, { options: object }>
@@ -15,6 +14,7 @@ export type NumberFieldSelectProps<T extends number = number> = Simplify<
 export const NumberFieldSelect = <T extends number = number>({
   description,
   disableAutoPrefix,
+  disabled,
   error,
   label,
   name,
@@ -30,7 +30,11 @@ export const NumberFieldSelect = <T extends number = number>({
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
       <Select name={name} value={value?.toString() ?? ''} onValueChange={(value) => setValue(parseFloat(value) as T)}>
-        <Select.Trigger data-cy={`${name}-select-trigger`} data-testid={`${name}-select-trigger`} disabled={readOnly}>
+        <Select.Trigger
+          data-cy={`${name}-select-trigger`}
+          data-testid={`${name}-select-trigger`}
+          disabled={disabled || readOnly}
+        >
           <Select.Value />
         </Select.Trigger>
         <Select.Content data-cy={`${name}-select-content`} data-testid={`${name}-select-content`}>

package/src/components/Form/NumberField/NumberFieldSlider.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
-
 import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { Simplify } from 'type-fest';
 
-import { Label } from '../../Label/Label.js';
-import { Slider } from '../../Slider/Slider.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { Label } from '@/components/Label';
+import { Slider } from '@/components/Slider';
+
+import { FieldGroup } from '../FieldGroup';
 
-import type { BaseFieldComponentProps } from '../types.js';
+import type { BaseFieldComponentProps } from '../types';
 
 export type NumberFieldSliderProps = Simplify<
   BaseFieldComponentProps<number> & Extract<NumberFormField, { variant: 'slider' }>
@@ -15,6 +14,7 @@ export type NumberFieldSliderProps = Simplify<
 
 export const NumberFieldSlider = ({
   description,
+  disabled,
   error,
   label,
   max,
@@ -32,7 +32,7 @@ export const NumberFieldSlider = ({
       </FieldGroup.Row>
       <FieldGroup.Row>
         <Slider
-          disabled={readOnly}
+          disabled={disabled || readOnly}
           max={max}
           min={min}
           name={name}

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

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

package/src/components/Form/NumberRecordField.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import type {
   NumberRecordFieldValue,
@@ -7,16 +7,17 @@ import type {
 } from '@douglasneuroinformatics/libui-form-types';
 import type { Simplify } from 'type-fest';
 
-import { Heading } from '../Heading/Heading.js';
-import { NumberField } from './NumberField/NumberField.js';
+import { Heading } from '../Heading';
+import { NumberField } from './NumberField';
 
-import type { BaseFieldComponentProps } from './types.js';
+import type { BaseFieldComponentProps } from './types';
 
 export type NumberRecordFieldProps<T extends NumberRecordFieldValue = NumberRecordFieldValue> = Simplify<
   BaseFieldComponentProps<NumberRecordFieldValue> & NumberRecordFormField<RequiredFieldValue<T>>
 >;
 
 export const NumberRecordField = <T extends NumberRecordFieldValue = NumberRecordFieldValue>({
+  disabled,
   error: recordError,
   items,
   label,
@@ -49,7 +50,7 @@ export const NumberRecordField = <T extends NumberRecordFieldValue = NumberRecor
               kind="number"
               name={name}
               options={options}
-              readOnly={readOnly}
+              readOnly={disabled || readOnly}
               setError={(error) => setRecordError({ ...recordError, [name]: error })}
               setValue={(value) => setRecordValue({ ...recordValue, [name]: value })}
               value={recordValue?.[name]}

package/src/components/Form/RecordArrayField.tsx

@@ -1,20 +1,22 @@
-import React, { memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 
 import type { RecordArrayFieldValue, RecordArrayFormField } from '@douglasneuroinformatics/libui-form-types';
 import { MinusCircleIcon, PlusCircleIcon } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
 import type { Simplify } from 'type-fest';
 
-import { Button } from '../Button/Button.js';
-import { Heading } from '../Heading/Heading.js';
-import { Label } from '../Label/Label.js';
-import { ScalarField } from './ScalarField.js';
+import { useTranslation } from '@/hooks';
 
-import type { BaseFieldComponentProps } from './types.js';
+import { Button } from '../Button';
+import { Heading } from '../Heading';
+import { Label } from '../Label';
+import { ScalarField } from './ScalarField';
+
+import type { BaseFieldComponentProps } from './types';
 
 export type RecordArrayFieldProps = Simplify<BaseFieldComponentProps<RecordArrayFieldValue> & RecordArrayFormField>;
 
 export const RecordArrayField = memo(function RecordArrayField({
+  disabled,
   error: arrayError,
   fieldset,
   label,
@@ -64,16 +66,19 @@ export const RecordArrayField = memo(function RecordArrayField({
               return (
                 <ScalarField
                   error={arrayError?.[i]?.[name]}
-                  field={fieldProps}
+                  field={{
+                    ...fieldProps,
+                    disabled: disabled || fieldProps.disabled
+                  }}
                   key={name}
                   name={name}
-                  readOnly={readOnly}
+                  readOnly={disabled || readOnly}
                   setError={(error) => {
                     const newArrayError = arrayError ? [...arrayError] : [];
                     if (!newArrayError[i]) {
                       newArrayError[i] = {};
                     }
-                    newArrayError[i]![name] = error;
+                    newArrayError[i][name] = error;
                     setArrayError(newArrayError);
                   }}
                   setValue={(value) => {
@@ -89,11 +94,11 @@ export const RecordArrayField = memo(function RecordArrayField({
         ))}
       </div>
       <div className="flex gap-3">
-        <Button disabled={readOnly} type="button" variant="outline" onClick={appendField}>
+        <Button disabled={disabled || readOnly} type="button" variant="outline" onClick={appendField}>
           {t('form.append')}
           <PlusCircleIcon className="ml-2" />
         </Button>
-        <Button disabled={readOnly} type="button" variant="outline" onClick={removeField}>
+        <Button disabled={disabled || readOnly} type="button" variant="outline" onClick={removeField}>
           {t('form.remove')}
           <MinusCircleIcon className="ml-2" />
         </Button>

package/src/components/Form/ScalarField.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {
   BooleanFormField,
   DateFormField,
@@ -9,13 +7,13 @@ import type {
   StringFormField
 } from '@douglasneuroinformatics/libui-form-types';
 
-import { BooleanField, type BooleanFieldProps } from './BooleanField/BooleanField.js';
-import { DateField, type DateFieldProps } from './DateField/DateField.js';
-import { NumberField, type NumberFieldProps } from './NumberField/NumberField.js';
-import { SetField, type SetFieldProps } from './SetField/SetField.js';
-import { StringField, type StringFieldProps } from './StringField/StringField.js';
+import { BooleanField, type BooleanFieldProps } from './BooleanField';
+import { DateField, type DateFieldProps } from './DateField';
+import { NumberField, type NumberFieldProps } from './NumberField';
+import { SetField, type SetFieldProps } from './SetField';
+import { StringField, type StringFieldProps } from './StringField';
 
-import type { BaseFieldComponentProps } from './types.js';
+import type { BaseFieldComponentProps } from './types';
 
 export type ScalarFieldProps = {
   field: BooleanFormField | DateFormField | NumberFormField | SetFormField | StringFormField;

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { SetField } from './SetField.js';
+import { SetField } from './SetField';
 
 type Fruit = 'apple' | 'banana' | 'blueberry' | 'mango';
 

package/src/components/Form/SetField/SetField.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import type { SetFormField } from '@douglasneuroinformatics/libui-form-types';
 import { match } from 'ts-pattern';
 import type { Simplify } from 'type-fest';
 
-import { SetFieldListbox } from './SetFieldListbox.js';
-import { SetFieldSelect } from './SetFieldSelect.js';
+import { SetFieldListbox } from './SetFieldListbox';
+import { SetFieldSelect } from './SetFieldSelect';
 
-import type { BaseFieldComponentProps } from '../types.js';
+import type { BaseFieldComponentProps } from '../types';
 
 export type SetFieldProps<T extends string = string> = Simplify<BaseFieldComponentProps<Set<T>> & SetFormField<Set<T>>>;
 

package/src/components/Form/SetField/SetFieldListbox.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+import { Label } from '@/components/Label';
 
-import { Checkbox } from '../../Checkbox/Checkbox.js';
-import { Label } from '../../Label/Label.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { FieldGroup } from '../FieldGroup';
 
-import type { SetFieldProps } from './SetField.js';
+import type { SetFieldProps } from './SetField';
 
 export type SetFieldListboxProps<T extends string = string> = {
   onCheckedChange: (option: T, isChecked: boolean) => void;
@@ -12,6 +11,7 @@ export type SetFieldListboxProps<T extends string = string> = {
 
 export const SetFieldListbox = <T extends string = string>({
   description,
+  disabled,
   error,
   label,
   name,
@@ -31,7 +31,7 @@ export const SetFieldListbox = <T extends string = string>({
           <FieldGroup.Row key={option}>
             <Checkbox
               checked={value?.has(option as T) ?? false}
-              disabled={readOnly}
+              disabled={disabled || readOnly}
               id={`${name}-${option}`}
               onCheckedChange={(checked) => {
                 onCheckedChange(option as T, !checked);

package/src/components/Form/SetField/SetFieldSelect.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
+import { Badge } from '@/components/Badge';
+import { DropdownButton } from '@/components/DropdownButton';
+import { DropdownMenu } from '@/components/DropdownMenu';
+import { Label } from '@/components/Label';
 
-import { Badge } from '../../Badge/Badge.js';
-import { DropdownButton } from '../../DropdownButton/DropdownButton.js';
-import { DropdownMenu } from '../../DropdownMenu/DropdownMenu.js';
-import { Label } from '../../Label/Label.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { FieldGroup } from '../FieldGroup';
 
-import type { SetFieldProps } from './SetField.js';
+import type { SetFieldProps } from './SetField';
 
 export type SetFieldSelectProps<T extends string = string> = {
   onCheckedChange: (option: T, isChecked: boolean) => void;
@@ -14,6 +13,7 @@ export type SetFieldSelectProps<T extends string = string> = {
 
 export const SetFieldSelect = <T extends string = string>({
   description,
+  disabled,
   error,
   label,
   onCheckedChange,
@@ -28,7 +28,7 @@ export const SetFieldSelect = <T extends string = string>({
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
       <DropdownMenu>
-        <DropdownMenu.Trigger asChild className="w-full" disabled={readOnly}>
+        <DropdownMenu.Trigger asChild className="w-full" disabled={disabled || readOnly}>
           <DropdownButton>
             {value.size ? (
               <div className="flex items-center gap-2">

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

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

package/src/components/Form/StaticField.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
+import * as React from 'react';
 
 import type {
   FormDataType,
@@ -12,11 +13,11 @@ import type {
 } from '@douglasneuroinformatics/libui-form-types';
 import { match } from 'ts-pattern';
 
-import { NumberRecordField } from './NumberRecordField.js';
-import { RecordArrayField } from './RecordArrayField.js';
-import { ScalarField, type ScalarFieldProps } from './ScalarField.js';
+import { NumberRecordField } from './NumberRecordField';
+import { RecordArrayField } from './RecordArrayField';
+import { ScalarField, type ScalarFieldProps } from './ScalarField';
 
-import type { FieldError, FormErrors } from './types.js';
+import type { FieldError, FormErrors } from './types';
 
 export type StaticFieldProps<TData extends FormDataType> = {
   errors: FormErrors<TData>;

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

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

package/src/components/Form/StringField/StringField.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-
 import { match } from 'ts-pattern';
 
-import { StringFieldInput, type StringFieldInputProps } from './StringFieldInput.js';
-import { StringFieldPassword, type StringFieldPasswordProps } from './StringFieldPassword.js';
-import { StringFieldRadio, type StringFieldRadioProps } from './StringFieldRadio.js';
-import { StringFieldSelect } from './StringFieldSelect.js';
-import { StringFieldTextArea, type StringFieldTextAreaProps } from './StringFieldTextArea.js';
+import { StringFieldInput, type StringFieldInputProps } from './StringFieldInput';
+import { StringFieldPassword, type StringFieldPasswordProps } from './StringFieldPassword';
+import { StringFieldRadio, type StringFieldRadioProps } from './StringFieldRadio';
+import { StringFieldSelect } from './StringFieldSelect';
+import { StringFieldTextArea, type StringFieldTextAreaProps } from './StringFieldTextArea';
 
 export type StringFieldProps =
   | StringFieldInputProps

package/src/components/Form/StringField/StringFieldInput.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
-
 import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
 
-import { Input } from '../../Input/Input.js';
-import { Label } from '../../Label/Label.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { Input } from '@/components/Input';
+import { Label } from '@/components/Label';
+
+import { FieldGroup } from '../FieldGroup';
 
-import type { BaseFieldComponentProps } from '../types.js';
+import type { BaseFieldComponentProps } from '../types';
 
 export type StringFieldInputProps = BaseFieldComponentProps<string> &
   Extract<StringFormField, { variant: 'input' | 'textarea' }>;
 
 export const StringFieldInput = ({
   description,
+  disabled,
   error,
   label,
   name,
@@ -28,7 +28,7 @@ export const StringFieldInput = ({
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
       <Input
-        disabled={readOnly}
+        disabled={disabled || readOnly}
         id={name}
         name={name}
         placeholder={placeholder}

package/src/components/Form/StringField/StringFieldPassword.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
 import { motion } from 'framer-motion';
 import { EyeIcon, EyeOffIcon } from 'lucide-react';
 
-import { cn } from '../../../utils.js';
-import { Input } from '../../Input/Input.js';
-import { Label } from '../../Label/Label.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { Input } from '@/components/Input';
+import { Label } from '@/components/Label';
+import { cn } from '@/utils';
 
-import type { BaseFieldComponentProps } from '../types.js';
+import { FieldGroup } from '../FieldGroup';
+
+import type { BaseFieldComponentProps } from '../types';
 
 export type PasswordStrengthValue = 0 | 1 | 2 | 3 | 4;
 
@@ -19,6 +20,7 @@ export type StringFieldPasswordProps = BaseFieldComponentProps<string> &
 export const StringFieldPassword = ({
   calculateStrength,
   description,
+  disabled,
   error,
   label,
   name,
@@ -26,7 +28,7 @@ export const StringFieldPassword = ({
   setValue,
   value
 }: StringFieldPasswordProps) => {
-  const [strength, setStrength] = useState<PasswordStrengthValue | null>(calculateStrength ? 0 : null);
+  const [strength, setStrength] = useState<null | PasswordStrengthValue>(calculateStrength ? 0 : null);
   const [show, setShow] = useState(false);
   useEffect(() => {
     if (calculateStrength) {
@@ -42,7 +44,7 @@ export const StringFieldPassword = ({
       </FieldGroup.Row>
       <FieldGroup.Row>
         <Input
-          disabled={readOnly}
+          disabled={disabled || readOnly}
           id={name}
           name={name}
           type={show ? 'text' : 'password'}
@@ -51,7 +53,7 @@ export const StringFieldPassword = ({
         />
         <button
           className="absolute right-0 flex h-full w-8 items-center justify-center text-muted-foreground"
-          disabled={readOnly}
+          disabled={disabled || readOnly}
           tabIndex={-1}
           type="button"
           onClick={() => setShow(!show)}

package/src/components/Form/StringField/StringFieldRadio.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { Simplify } from 'type-fest';
 
-import { BaseRadioField } from '../BaseRadioField.js';
+import { BaseRadioField } from '../BaseRadioField';
 
-import type { BaseFieldComponentProps } from '../types.js';
+import type { BaseFieldComponentProps } from '../types';
 
 export type StringFieldRadioProps<T extends string = string> = Simplify<
   BaseFieldComponentProps<T> & Extract<StringFormField<T>, { options: object }>

package/src/components/Form/StringField/StringFieldSelect.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
-
 import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { Simplify } from 'type-fest';
 
-import { Label } from '../../Label/Label.js';
-import { Select } from '../../Select/Select.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
-import { type BaseFieldComponentProps } from '../types.js';
+import { Label } from '@/components/Label';
+import { Select } from '@/components/Select';
+
+import { FieldGroup } from '../FieldGroup';
+import { type BaseFieldComponentProps } from '../types';
 
 export type StringFieldSelectProps<T extends string = string> = Simplify<
   BaseFieldComponentProps<T> & Extract<StringFormField<T>, { options: object }>
@@ -14,6 +13,7 @@ export type StringFieldSelectProps<T extends string = string> = Simplify<
 
 export const StringFieldSelect = <T extends string = string>({
   description,
+  disabled,
   error,
   label,
   name,
@@ -29,7 +29,11 @@ export const StringFieldSelect = <T extends string = string>({
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
       <Select name={name} value={value ?? ''} onValueChange={(value: T) => setValue(value)}>
-        <Select.Trigger data-cy={`${name}-select-trigger`} data-testid={`${name}-select-trigger`} disabled={readOnly}>
+        <Select.Trigger
+          data-cy={`${name}-select-trigger`}
+          data-testid={`${name}-select-trigger`}
+          disabled={disabled || readOnly}
+        >
           <Select.Value />
         </Select.Trigger>
         <Select.Content data-cy={`${name}-select-content`} data-testid={`${name}-select-content`}>

package/src/components/Form/StringField/StringFieldTextArea.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
-
 import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
 
-import { Label } from '../../Label/Label.js';
-import { TextArea } from '../../TextArea/TextArea.js';
-import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { Label } from '@/components/Label';
+import { TextArea } from '@/components/TextArea';
+
+import { FieldGroup } from '../FieldGroup';
 
-import type { BaseFieldComponentProps } from '../types.js';
+import type { BaseFieldComponentProps } from '../types';
 
 export type StringFieldTextAreaProps = BaseFieldComponentProps<string> &
   Extract<StringFormField, { variant: 'input' | 'textarea' }>;
 
 export const StringFieldTextArea = ({
   description,
+  disabled,
   error,
   label,
   name,
@@ -28,7 +28,7 @@ export const StringFieldTextArea = ({
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
       <TextArea
-        disabled={readOnly}
+        disabled={disabled || readOnly}
         id={name}
         name={name}
         placeholder={placeholder}

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

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

package/src/components/Form/index.ts

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

package/src/components/Heading/Heading.stories.tsx

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

package/src/components/Heading/Heading.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export type HeadingProps = {
   children: string;

package/src/components/Heading/index.ts

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

package/src/components/HoverCard/HoverCard.stories.tsx

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

package/src/components/HoverCard/HoverCard.tsx

@@ -1,6 +1,6 @@
 import { Root, Trigger } from '@radix-ui/react-hover-card';
 
-import { HoverCardContent } from './HoverCardContent.js';
+import { HoverCardContent } from './HoverCardContent';
 
 export const HoverCard = Object.assign(Root.bind(null), {
   Content: HoverCardContent,

package/src/components/HoverCard/HoverCardContent.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Content } from '@radix-ui/react-hover-card';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const HoverCardContent = React.forwardRef<
+export const HoverCardContent = forwardRef<
   React.ElementRef<typeof Content>,
   React.ComponentPropsWithoutRef<typeof Content>
 >(function HoverCardContent({ align = 'center', className, sideOffset = 4, ...props }, ref) {

package/src/components/HoverCard/index.ts

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

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

package/src/components/Input/Input.stories.tsx

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