@douglasneuroinformatics/libui 3.8.7 → 3.9.0

package/dist/hooks.d.ts

@@ -3,7 +3,7 @@ export { D as DEFAULT_THEME, a as SYS_DARK_MEDIA_QUERY, S as StorageName, b as T
 import { Promisable } from 'type-fest';
 import { RefObject, useEffect, Dispatch, SetStateAction } from 'react';
 import * as zustand from 'zustand';
-import { T as TranslationNamespace, L as Language, a as TranslateFunction } from './types-DTkK8l-q.js';
+import { T as TranslationNamespace, L as Language, a as TranslateFunction } from './types-CU3FS63U.js';
 
 declare function useChart(): {
     config: ChartConfig;

package/dist/hooks.js

@@ -19,8 +19,8 @@ import {
   useTheme,
   useTranslation,
   useWindowSize
-} from "./chunk-GFIT4FAN.js";
-import "./chunk-CAWCERN4.js";
+} from "./chunk-JTEI2ZYI.js";
+import "./chunk-IYOZHDZL.js";
 import "./chunk-VJSOLDCS.js";
 export {
   DEFAULT_THEME,

package/dist/i18n.d.ts

@@ -1,7 +1,7 @@
 import * as zustand from 'zustand';
 import { SetOptional } from 'type-fest';
-import { L as Language, b as Translations, a as TranslateFunction } from './types-DTkK8l-q.js';
-export { E as ExtractTranslationKey, c as LanguageOptions, d as TranslationKey, T as TranslationNamespace, U as UserConfig } from './types-DTkK8l-q.js';
+import { L as Language, b as Translations, a as TranslateFunction } from './types-CU3FS63U.js';
+export { E as ExtractTranslationKey, c as LanguageOptions, d as TranslationKey, T as TranslationNamespace, U as UserConfig } from './types-CU3FS63U.js';
 
 type InitOptions = {
     defaultLanguage?: Language;

package/dist/i18n.js

@@ -2,7 +2,7 @@
 import {
   i18n,
   translationStore
-} from "./chunk-CAWCERN4.js";
+} from "./chunk-IYOZHDZL.js";
 export {
   i18n,
   translationStore

package/dist/{types-DTkK8l-q.d.ts → types-CU3FS63U.d.ts}

@@ -144,6 +144,14 @@ var pagination = {
 	previous: {
 		en: "Previous",
 		fr: "Précédent"
+	},
+	firstPage: {
+		en: "<< First",
+		fr: "<< Première"
+	},
+	lastPage: {
+		en: "Last >>",
+		fr: "Dernière >>"
 	}
 };
 var searchBar = {
@@ -171,16 +179,16 @@ declare namespace UserConfig {
         } | Translations;
     }
 }
-type LanguageOptions = {
+type LanguageOptions = UserConfig.LanguageOptions & {
     en: true;
     fr: true;
-} & UserConfig.LanguageOptions;
+};
 type Language = keyof {
     [L in keyof LanguageOptions as LanguageOptions[L] extends true ? L : never]: any;
 };
-type Translations = Simplify<{
+type Translations = Simplify<OmitIndexSignature<UserConfig.Translations> & {
     libui: typeof libuiTranslations;
-} & OmitIndexSignature<UserConfig.Translations>>;
+}>;
 type ExtractTranslationKey<T extends {
     [key: string]: any;
 }, Key = keyof T> = Key extends string ? T[Key] extends {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "3.8.7",
+  "version": "3.9.0",
   "packageManager": "pnpm@9.14.2",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
@@ -112,11 +112,9 @@
     "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
-    "@douglasneuroinformatics/eslint-config": "^5.2.1",
+    "@douglasneuroinformatics/eslint-config": "^5.2.4",
     "@douglasneuroinformatics/prettier-config": "^0.0.1",
-    "@douglasneuroinformatics/semantic-release": "^0.0.1",
+    "@douglasneuroinformatics/semantic-release": "^0.2.1",
     "@douglasneuroinformatics/tsconfig": "^1.0.2",
     "@faker-js/faker": "^9.0.3",
     "@storybook/addon-essentials": "^8.3.5",
@@ -140,7 +138,7 @@
     "@vitejs/plugin-react-swc": "^3.7.1",
     "@vitest/coverage-v8": "^2.1.2",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.12.0",
+    "eslint": "^9.19.0",
     "happy-dom": "^14.12.0",
     "husky": "^9.1.6",
     "jsdom": "25.0.1",
@@ -156,7 +154,7 @@
   },
   "commitlint": {
     "extends": [
-      "@commitlint/config-conventional"
+      "@douglasneuroinformatics/semantic-release/commitlint-config"
     ]
   },
   "release": {

package/src/components/ArrowToggle/ArrowToggle.tsx

@@ -9,7 +9,7 @@ import { cn } from '@/utils';
 import { Button, type ButtonProps } from '../Button';
 
 export type ArrowToggleProps = Simplify<
-  {
+  React.HTMLAttributes<HTMLButtonElement> & {
     /** Whether or not the arrow is currently toggled */
     isToggled?: boolean;
 
@@ -23,7 +23,7 @@ export type ArrowToggleProps = Simplify<
 
     /** The variant of button to use */
     variant?: Extract<ButtonProps['variant'], 'ghost' | 'outline'>;
-  } & React.HTMLAttributes<HTMLButtonElement>
+  }
 >;
 
 export const ArrowToggle = React.forwardRef<HTMLButtonElement, ArrowToggleProps>(function ArrowToggle(

package/src/components/Breadcrumb/BreadcrumbLink.tsx

@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const BreadcrumbLink = forwardRef<
   HTMLAnchorElement,
-  {
+  React.ComponentPropsWithoutRef<'a'> & {
     asChild?: boolean;
-  } & React.ComponentPropsWithoutRef<'a'>
+  }
 >(function BreadcrumbLink({ asChild, className, ...props }, ref) {
   const Comp = asChild ? Slot : 'a';
   return <Comp className={cn('transition-colors hover:text-foreground', className)} ref={ref} {...props} />;

package/src/components/Breadcrumb/BreadcrumbRoot.tsx

@@ -2,9 +2,9 @@ import { forwardRef } from 'react';
 
 export const BreadcrumbRoot = forwardRef<
   HTMLElement,
-  {
+  React.ComponentPropsWithoutRef<'nav'> & {
     separator?: React.ReactNode;
-  } & React.ComponentPropsWithoutRef<'nav'>
+  }
 >(function BreadcrumbRoot({ ...props }, ref) {
   return <nav aria-label="breadcrumb" ref={ref} {...props} />;
 });

package/src/components/Button/Button.tsx

@@ -39,12 +39,12 @@ export const buttonVariants = cva(
 );
 
 export type ButtonProps = Simplify<
-  {
-    asChild?: boolean;
-    /** @deprecated - use children   */
-    label?: string;
-  } & React.ButtonHTMLAttributes<HTMLButtonElement> &
-    VariantProps<typeof buttonVariants>
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+      /** @deprecated - use children   */
+      label?: string;
+    }
 >;
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(

package/src/components/Chart/ChartContainer.tsx

@@ -11,10 +11,10 @@ import type { ChartConfig } from './types';
 
 export const ChartContainer = forwardRef<
   HTMLDivElement,
-  {
+  React.ComponentProps<'div'> & {
     children: React.ComponentProps<typeof ResponsiveContainer>['children'];
     config: ChartConfig;
-  } & React.ComponentProps<'div'>
+  }
 >(function ChartContainer({ children, className, config, id, ...props }, ref) {
   const uniqueId = useId();
   const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;

package/src/components/Chart/ChartLegendContent.tsx

@@ -9,11 +9,11 @@ import { getPayloadConfigFromPayload } from './utils';
 
 export const ChartLegendContent = forwardRef<
   HTMLDivElement,
-  {
-    hideIcon?: boolean;
-    nameKey?: string;
-  } & Pick<LegendProps, 'payload' | 'verticalAlign'> &
-    React.ComponentProps<'div'>
+  Pick<LegendProps, 'payload' | 'verticalAlign'> &
+    React.ComponentProps<'div'> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
 >(function ChartLegendContent({ className, hideIcon = false, nameKey, payload, verticalAlign = 'bottom' }, ref) {
   const { config } = useChart();
 

package/src/components/Chart/ChartTooltipContent.tsx

@@ -9,14 +9,14 @@ import { getPayloadConfigFromPayload } from './utils';
 
 export const ChartTooltipContent = forwardRef<
   HTMLDivElement,
-  {
-    hideIndicator?: boolean;
-    hideLabel?: boolean;
-    indicator?: 'dashed' | 'dot' | 'line';
-    labelKey?: string;
-    nameKey?: string;
-  } & React.ComponentProps<'div'> &
-    React.ComponentProps<typeof Tooltip>
+  React.ComponentProps<'div'> &
+    React.ComponentProps<typeof Tooltip> & {
+      hideIndicator?: boolean;
+      hideLabel?: boolean;
+      indicator?: 'dashed' | 'dot' | 'line';
+      labelKey?: string;
+      nameKey?: string;
+    }
 >(function ChartLegendContent(
   {
     active,

package/src/components/ClientTable/ClientTable.spec.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ClientTable } from './ClientTable';
+
+const TEST_ID = 'ClientTable';
+const FIRST_BUTTON_ID = 'first-page-button';
+const PREVIOUS_BUTTON_ID = 'previous-page-button';
+const NEXT_BUTTON_ID = 'next-page-button';
+const LAST_BUTTON_ID = 'last-page-button';
+const PAGE_NUMBER_TEST_ID = 'page-numbers';
+describe('ClientTable', () => {
+  it('should render', () => {
+    render(<ClientTable columns={[]} data={[]} minRows={10} />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(FIRST_BUTTON_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(PREVIOUS_BUTTON_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(NEXT_BUTTON_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(LAST_BUTTON_ID)).toBeInTheDocument();
+  });
+  it('should contain a custom class name', () => {
+    render(<ClientTable className="foo" columns={[]} data={[]} minRows={10} />);
+    expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
+  });
+  it('should function correctly', async () => {
+    const handleClientTableItemClick = vi.fn();
+    const handleClientTableDropdownClick = vi.fn();
+    render(
+      <ClientTable
+        columnDropdownOptions={[
+          {
+            label: 'delete',
+            onSelection: handleClientTableDropdownClick
+          }
+        ]}
+        columns={[
+          {
+            field: 'f1',
+            label: 'Field 1'
+          },
+          {
+            field: 'f2',
+            label: 'Field 2'
+          }
+        ]}
+        data={[
+          {
+            f1: 1,
+            f2: 2
+          },
+          {
+            f1: 23,
+            f2: 24
+          }
+        ]}
+        entriesPerPage={1}
+        minRows={3}
+        onEntryClick={handleClientTableItemClick}
+      />
+    );
+    expect(screen.getByTestId(PAGE_NUMBER_TEST_ID)).toBeInTheDocument();
+    await userEvent.click(screen.getByTestId(NEXT_BUTTON_ID));
+    await userEvent.click(await screen.findByText('23.00'));
+    expect(handleClientTableItemClick).toBeCalled();
+
+    expect(screen.getByTestId(PAGE_NUMBER_TEST_ID).textContent).toBe('2 - 2 / 2');
+    await userEvent.click(screen.getByTestId(PREVIOUS_BUTTON_ID));
+    await userEvent.click(await screen.findByText('1.00'));
+    expect(handleClientTableItemClick).toBeCalled();
+
+    expect(screen.getByTestId(PAGE_NUMBER_TEST_ID).textContent).toBe('1 - 1 / 2');
+    await userEvent.click(screen.getByTestId(LAST_BUTTON_ID));
+    await userEvent.click(await screen.findByText('23.00'));
+    expect(handleClientTableItemClick).toBeCalled();
+
+    expect(screen.getByTestId(PAGE_NUMBER_TEST_ID).textContent).toBe('2 - 2 / 2');
+    await userEvent.click(screen.getByTestId(FIRST_BUTTON_ID));
+    await userEvent.click(await screen.findByText('1.00'));
+    expect(handleClientTableItemClick).toBeCalled();
+    expect(screen.getByTestId(PAGE_NUMBER_TEST_ID).textContent).toBe('1 - 1 / 2');
+
+    await userEvent.click(await screen.findByText('Field 1'));
+    await userEvent.click(screen.getByTestId('delete-test-id'));
+    expect(handleClientTableDropdownClick).toBeCalled();
+  });
+});

package/src/components/ClientTable/ClientTable.tsx

@@ -85,7 +85,7 @@ export const ClientTable = <T extends ClientTableEntry>({
   const nRows = Math.max(currentEntries.length, minRows ?? -1);
 
   return (
-    <div className={className} {...props}>
+    <div className={className} {...props} data-testid="ClientTable">
       <div className="rounded-md border bg-card tracking-tight text-muted-foreground shadow-sm">
         <Table>
           <Table.Header>
@@ -104,6 +104,7 @@ export const ClientTable = <T extends ClientTableEntry>({
                             const Icon = option.icon;
                             return (
                               <DropdownMenu.Item
+                                data-testid={option.label + '-test-id'}
                                 key={option.label}
                                 onClick={() => {
                                   option.onSelection(column);

package/src/components/ClientTable/ClientTablePagination.tsx

@@ -23,10 +23,25 @@ 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">{`${firstEntry} - ${lastEntry} / ${totalEntries}`}</p>
+        <p
+          className="text-sm font-medium text-muted-foreground"
+          data-testid="page-numbers"
+        >{`${firstEntry} - ${lastEntry} / ${totalEntries}`}</p>
       </div>
       <div className="flex flex-1 justify-between gap-3 sm:justify-end">
         <Button
+          data-testid="first-page-button"
+          disabled={currentPage === 1}
+          type="button"
+          variant="outline"
+          onClick={() => {
+            setCurrentPage(1);
+          }}
+        >
+          {t('pagination.firstPage')}
+        </Button>
+        <Button
+          data-testid="previous-page-button"
           disabled={currentPage === 1}
           type="button"
           variant="outline"
@@ -37,6 +52,7 @@ export const ClientTablePagination = ({
           {t('pagination.previous')}
         </Button>
         <Button
+          data-testid="next-page-button"
           disabled={currentPage === pageCount}
           type="button"
           variant="outline"
@@ -46,6 +62,17 @@ export const ClientTablePagination = ({
         >
           {t('pagination.next')}
         </Button>
+        <Button
+          data-testid="last-page-button"
+          disabled={currentPage === pageCount}
+          type="button"
+          variant="outline"
+          onClick={() => {
+            setCurrentPage(pageCount);
+          }}
+        >
+          {t('pagination.lastPage')}
+        </Button>
       </div>
     </div>
   );

package/src/components/ContextMenu/ContextMenuItem.tsx

@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const ContextMenuItem = forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  {
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>
+  }
 >(function ContextMenuItem({ className, inset, ...props }, ref) {
   return (
     <ContextMenuPrimitive.Item

package/src/components/ContextMenu/ContextMenuLabel.tsx

@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const ContextMenuLabel = forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  {
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>
+  }
 >(function ContextMenuLabel({ className, inset, ...props }, ref) {
   return (
     <ContextMenuPrimitive.Label

package/src/components/ContextMenu/ContextMenuSubTrigger.tsx

@@ -7,9 +7,9 @@ import { cn } from '@/utils';
 
 export const ContextMenuSubTrigger = forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  {
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>
+  }
 >(function ContextMenuSubTrigger({ children, className, inset, ...props }, ref) {
   return (
     <ContextMenuPrimitive.SubTrigger

package/src/components/DropdownMenu/DropdownMenuContent.tsx

@@ -4,9 +4,9 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 import { cn } from '@/utils';
 
-export type DropdownMenuContentProps = {
+export type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
   widthFull?: boolean;
-} & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
+};
 export const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   DropdownMenuContentProps

package/src/components/DropdownMenu/DropdownMenuItem.tsx

@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const DropdownMenuItem = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  {
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+  }
 >(function DropdownMenuItem({ className, inset, ...props }, ref) {
   return (
     <DropdownMenuPrimitive.Item

package/src/components/DropdownMenu/DropdownMenuLabel.tsx

@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const DropdownMenuLabel = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  {
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+  }
 >(function DropdownMenuLabel({ className, inset, ...props }, ref) {
   return (
     <DropdownMenuPrimitive.Label

package/src/components/DropdownMenu/DropdownMenuSubTrigger.tsx

@@ -7,9 +7,9 @@ import { cn } from '@/utils';
 
 export const DropdownMenuSubTrigger = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  {
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>
+  }
 >(function DropdownMenuSubTrigger({ children, className, inset, ...props }, ref) {
   return (
     <DropdownMenuPrimitive.SubTrigger

package/src/components/Form/BaseRadioField.tsx

@@ -20,13 +20,13 @@ const baseRadioFieldVariants = cva('flex', {
 });
 
 export type BaseRadioFieldProps<T extends string> = Simplify<
-  {
+  BaseFieldComponentProps<T> & {
     description?: string;
     disabled?: boolean;
     label: string;
     options: { [K in T]: string };
     orientation?: 'horizontal' | 'vertical';
-  } & BaseFieldComponentProps<T>
+  }
 >;
 
 export const BaseRadioField = <T extends string>({

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

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 /* eslint-disable perfectionist/sort-objects */
 
 import { useEffect, useState } from 'react';

package/src/components/Form/Form.tsx

@@ -45,7 +45,6 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
   validationSchema: z.ZodType<TData>;
 };
 
-// eslint-disable-next-line max-lines-per-function
 const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({
   additionalButtons,
   className,

package/src/components/Form/ScalarField.tsx

@@ -15,22 +15,22 @@ import { StringField, type StringFieldProps } from './StringField';
 
 import type { BaseFieldComponentProps } from './types';
 
-export type ScalarFieldProps = {
+export type ScalarFieldProps = BaseFieldComponentProps<ScalarFieldValue> & {
   field: BooleanFormField | DateFormField | NumberFormField | SetFormField | StringFormField;
-} & BaseFieldComponentProps<ScalarFieldValue>;
+};
 
 export const ScalarField = ({ field, ...props }: ScalarFieldProps) => {
   switch (field.kind) {
-    case 'string':
-      return <StringField {...field} {...(props as StringFieldProps)} />;
-    case 'number':
-      return <NumberField {...field} {...(props as NumberFieldProps)} />;
-    case 'date':
-      return <DateField {...field} {...(props as DateFieldProps)} />;
     case 'boolean':
       return <BooleanField {...field} {...(props as BooleanFieldProps)} />;
+    case 'date':
+      return <DateField {...field} {...(props as DateFieldProps)} />;
+    case 'number':
+      return <NumberField {...field} {...(props as NumberFieldProps)} />;
     case 'set':
       return <SetField {...field} {...(props as SetFieldProps)} />;
+    case 'string':
+      return <StringField {...field} {...(props as StringFieldProps)} />;
     default:
       throw new Error(`Unexpected value for kind: ${Reflect.get(field, 'kind') satisfies never}`);
   }

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

@@ -5,9 +5,9 @@ import { FieldGroup } from '../FieldGroup';
 
 import type { SetFieldProps } from './SetField';
 
-export type SetFieldListboxProps<T extends string = string> = {
+export type SetFieldListboxProps<T extends string = string> = SetFieldProps<T> & {
   onCheckedChange: (option: T, isChecked: boolean) => void;
-} & SetFieldProps<T>;
+};
 
 export const SetFieldListbox = <T extends string = string>({
   description,

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

@@ -7,9 +7,9 @@ import { FieldGroup } from '../FieldGroup';
 
 import type { SetFieldProps } from './SetField';
 
-export type SetFieldSelectProps<T extends string = string> = {
+export type SetFieldSelectProps<T extends string = string> = SetFieldProps<T> & {
   onCheckedChange: (option: T, isChecked: boolean) => void;
-} & SetFieldProps<T>;
+};
 
 export const SetFieldSelect = <T extends string = string>({
   description,

package/src/components/LineGraph/LineGraph.tsx

@@ -26,11 +26,14 @@ type LineGraphData = readonly { [key: string]: any }[];
 /** Extract string keys from items in `T` where the value of `T[K]` extends `K` */
 type ExtractValidKeys<T extends LineGraphData, K> = Extract<ConditionalKeys<T[number], K>, string>;
 
-type LineGraphLine<T extends LineGraphData = { [key: string]: any }[]> = {
+type LineGraphLine<T extends LineGraphData = { [key: string]: any }[]> = Pick<
+  LineProps,
+  'legendType' | 'stroke' | 'strokeDasharray' | 'strokeWidth' | 'type'
+> & {
   err?: ExtractValidKeys<T, number>;
   name: string;
   val: ExtractValidKeys<T, number>;
-} & Pick<LineProps, 'legendType' | 'stroke' | 'strokeDasharray' | 'strokeWidth' | 'type'>;
+};
 
 const strokeColors = {
   dark: '#cbd5e1', // slate-300

package/src/components/MenuBar/MenuBarItem.tsx

@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const MenuBarItem = forwardRef<
   React.ElementRef<typeof Item>,
-  {
+  React.ComponentPropsWithoutRef<typeof Item> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof Item>
+  }
 >(function MenuBarItem({ className, inset, ...props }, ref) {
   return (
     <Item

package/src/components/MenuBar/MenuBarLabel.tsx

@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const MenuBarLabel = forwardRef<
   React.ElementRef<typeof Label>,
-  {
+  React.ComponentPropsWithoutRef<typeof Label> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof Label>
+  }
 >(function MenuBarLabel({ className, inset, ...props }, ref) {
   return <Label className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)} ref={ref} {...props} />;
 });

package/src/components/MenuBar/MenuBarSubTrigger.tsx

@@ -7,9 +7,9 @@ import { cn } from '@/utils';
 
 export const MenuBarSubTrigger = forwardRef<
   React.ElementRef<typeof SubTrigger>,
-  {
+  React.ComponentPropsWithoutRef<typeof SubTrigger> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof SubTrigger>
+  }
 >(function MenuBarSubTrigger({ children, className, inset, ...props }, ref) {
   return (
     <SubTrigger