@douglasneuroinformatics/libui 3.8.7 → 4.0.0

package/src/components/DropdownMenu/DropdownMenuSubTrigger.tsx

@@ -7,14 +7,14 @@ 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
       className={cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none',
         inset && 'pl-8',
         className
       )}

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -4,14 +4,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { FileDropzone } from './FileDropzone.js';
 
-const meta: Meta<typeof FileDropzone> = {
-  component: FileDropzone
-};
-
-export default meta;
-
 type Story = StoryObj<typeof FileDropzone>;
 
+export default {
+  component: FileDropzone
+} satisfies Meta<typeof FileDropzone>;
+
 export const Default: Story = {
   decorators: [
     (Story) => {

package/src/components/FileDropzone/FileDropzone.tsx

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
 
 import { UploadIcon } from 'lucide-react';
-import { type FileRejection, useDropzone } from 'react-dropzone';
+import { useDropzone } from 'react-dropzone';
+import type { FileRejection } from 'react-dropzone';
 
 import { useTranslation } from '@/hooks/useTranslation';
 import { cn } from '@/utils';

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/BooleanField/BooleanField.spec.tsx

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

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

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

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

@@ -10,7 +10,8 @@ import { Label } from '@/components/Label';
 import { Popover } from '@/components/Popover';
 
 import { FieldGroup } from '../FieldGroup';
-import { type BaseFieldComponentProps } from '../types';
+
+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/Form.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 /* eslint-disable perfectionist/sort-objects */
 
 import { useEffect, useState } from 'react';
@@ -57,21 +56,6 @@ const $SimpleExampleFormData = z.object({
 });
 type SimpleExampleFormSchemaType = typeof $SimpleExampleFormData;
 
-export default {
-  component: Form,
-  decorators: [
-    (Story) => (
-      <div className="container mx-auto max-w-5xl">
-        <Heading className="my-8 text-center" variant="h1">
-          Example Form
-        </Heading>
-        <Story />
-      </div>
-    )
-  ],
-  tags: ['autodocs']
-} as Meta<typeof Form>;
-
 const booleanFields: FormFields<Pick<ExampleFormData, 'booleanCheck' | 'booleanRadio'>> = {
   booleanRadio: {
     disabled: DISABLED,
@@ -317,6 +301,21 @@ const ungroupedContent = {
   ...recordArrayFields
 } as const;
 
+export default {
+  component: Form,
+  decorators: [
+    (Story) => (
+      <div className="container mx-auto max-w-5xl">
+        <Heading className="my-8 text-center" variant="h1">
+          Example Form
+        </Heading>
+        <Story />
+      </div>
+    )
+  ],
+  tags: ['autodocs']
+} as Meta<typeof Form>;
+
 export const Grouped: StoryObj<typeof Form<ExampleFormSchemaType>> = {
   args: {
     content: [

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/NumberField/NumberField.tsx

@@ -1,9 +1,13 @@
 import { match } from 'ts-pattern';
 
-import { NumberFieldInput, type NumberFieldInputProps } from './NumberFieldInput';
-import { NumberFieldRadio, type NumberFieldRadioProps } from './NumberFieldRadio';
+import { NumberFieldInput } from './NumberFieldInput';
+import { NumberFieldRadio } from './NumberFieldRadio';
 import { NumberFieldSelect } from './NumberFieldSelect';
-import { NumberFieldSlider, type NumberFieldSliderProps } from './NumberFieldSlider';
+import { NumberFieldSlider } from './NumberFieldSlider';
+
+import type { NumberFieldInputProps } from './NumberFieldInput';
+import type { NumberFieldRadioProps } from './NumberFieldRadio';
+import type { NumberFieldSliderProps } from './NumberFieldSlider';
 
 export type NumberFieldProps = NumberFieldInputProps | NumberFieldRadioProps | NumberFieldSliderProps;
 

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

@@ -5,7 +5,8 @@ import { Label } from '@/components/Label';
 import { Select } from '@/components/Select';
 
 import { FieldGroup } from '../FieldGroup';
-import { type BaseFieldComponentProps } from '../types';
+
+import type { BaseFieldComponentProps } from '../types';
 
 export type NumberFieldSelectProps<T extends number = number> = Simplify<
   BaseFieldComponentProps<T> & Extract<NumberFormField<T>, { options: object }>

package/src/components/Form/RecordArrayField.tsx

@@ -85,9 +85,7 @@ export const RecordArrayField = memo(function RecordArrayField({
                   readOnly={disabled || readOnly}
                   setError={(error) => {
                     const newArrayError = arrayError ? [...arrayError] : [];
-                    if (!newArrayError[i]) {
-                      newArrayError[i] = {};
-                    }
+                    newArrayError[i] ??= {};
                     newArrayError[i][name] = error;
                     setArrayError(newArrayError);
                   }}

package/src/components/Form/ScalarField.tsx

@@ -7,30 +7,35 @@ import type {
   StringFormField
 } from '@douglasneuroinformatics/libui-form-types';
 
-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 { BooleanField } from './BooleanField';
+import { DateField } from './DateField';
+import { NumberField } from './NumberField';
+import { SetField } from './SetField';
+import { StringField } from './StringField';
 
+import type { BooleanFieldProps } from './BooleanField';
+import type { DateFieldProps } from './DateField';
+import type { NumberFieldProps } from './NumberField';
+import type { SetFieldProps } from './SetField';
+import 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/Form/StaticField.tsx

@@ -15,8 +15,9 @@ import { match } from 'ts-pattern';
 
 import { NumberRecordField } from './NumberRecordField';
 import { RecordArrayField } from './RecordArrayField';
-import { ScalarField, type ScalarFieldProps } from './ScalarField';
+import { ScalarField } from './ScalarField';
 
+import type { ScalarFieldProps } from './ScalarField';
 import type { FieldError, FormErrors } from './types';
 
 export type StaticFieldProps<TData extends FormDataType> = {

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

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

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

@@ -52,26 +52,26 @@ export const StringFieldPassword = ({
           onChange={(event) => setValue(event.target.value)}
         />
         <button
-          className="absolute right-0 flex h-full w-8 items-center justify-center text-muted-foreground"
+          className="text-muted-foreground absolute right-0 flex h-full w-8 items-center justify-center"
           disabled={disabled || readOnly}
           tabIndex={-1}
           type="button"
           onClick={() => setShow(!show)}
         >
-          <EyeIcon className={cn('absolute transition-all', show ? '-rotate-90 scale-0' : 'rotate-0 scale-100')} />
-          <EyeOffIcon className={cn('absolute transition-all', !show ? 'rotate-90 scale-0' : 'rotate-0 scale-100')} />
+          <EyeIcon className={cn('absolute transition-all', show ? 'scale-0 -rotate-90' : 'scale-100 rotate-0')} />
+          <EyeOffIcon className={cn('absolute transition-all', !show ? 'scale-0 rotate-90' : 'scale-100 rotate-0')} />
         </button>
       </FieldGroup.Row>
       {strength !== null && (
         <motion.div
           animate={{ width: `${Math.max(strength * 25, 5)}%` }}
-          className="h-1 w-full overflow-hidden rounded"
+          className="h-1 w-full overflow-hidden rounded-sm"
           initial={{ width: '5%' }}
           transition={{ duration: 0.5 }}
         >
           <div
             className={cn(
-              'h-full w-full bg-destructive transition-colors duration-500',
+              'bg-destructive h-full w-full transition-colors duration-500',
               strength === 2 && 'bg-yellow-500 dark:bg-yellow-700',
               strength === 3 && 'bg-sky-500 dark:bg-sky-700',
               strength === 4 && 'bg-green-500 dark:bg-green-700'

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

@@ -5,7 +5,8 @@ import { Label } from '@/components/Label';
 import { Select } from '@/components/Select';
 
 import { FieldGroup } from '../FieldGroup';
-import { type BaseFieldComponentProps } from '../types';
+
+import type { BaseFieldComponentProps } from '../types';
 
 export type StringFieldSelectProps<T extends string = string> = Simplify<
   BaseFieldComponentProps<T> & Extract<StringFormField<T>, { options: object }>

package/src/components/HoverCard/HoverCardContent.tsx

@@ -12,7 +12,7 @@ export const HoverCardContent = forwardRef<
     <Content
       align={align}
       className={cn(
-        'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
         className
       )}
       ref={ref}

package/src/components/Input/Input.tsx

@@ -9,7 +9,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Inp
     <input
       autoComplete="off"
       className={cn(
-        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:opacity-80 focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       data-testid="input"

package/src/components/Label/Label.tsx

@@ -1,7 +1,8 @@
 import { forwardRef } from 'react';
 
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/utils';
 

package/src/components/LanguageToggle/LanguageToggle.tsx

@@ -3,9 +3,11 @@ import { LanguagesIcon } from 'lucide-react';
 import { useTranslation } from '@/hooks';
 import type { Language } from '@/i18n';
 
-import { Button, type ButtonProps } from '../Button';
+import { Button } from '../Button';
 import { DropdownMenu } from '../DropdownMenu';
 
+import type { ButtonProps } from '../Button';
+
 export type LanguageToggleProps = {
   align?: 'center' | 'end' | 'start';
   contentClassName?: string;

package/src/components/LineGraph/LineGraph.tsx

@@ -8,16 +8,17 @@ import {
   Legend,
   Line,
   LineChart,
-  type LineProps,
   ResponsiveContainer,
   Tooltip,
   XAxis,
   YAxis
 } from 'recharts';
+import type { LineProps } from 'recharts';
 import type { ConditionalKeys } from 'type-fest';
 
 import { useTranslation } from '@/hooks';
-import { type Theme, useTheme } from '@/hooks/useTheme';
+import { useTheme } from '@/hooks/useTheme';
+import type { Theme } from '@/hooks/useTheme';
 
 /** An array of arbitrary objects with data to graph  */
 
@@ -26,11 +27,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/ListboxDropdown/ListboxDropdown.stories.tsx

@@ -6,10 +6,6 @@ import { ListboxDropdown } from './ListboxDropdown';
 
 type Story = StoryObj<typeof ListboxDropdown>;
 
-const meta: Meta<typeof ListboxDropdown> = { component: ListboxDropdown };
-
-export default meta;
-
 const options = [
   {
     key: 'o1',
@@ -25,6 +21,10 @@ const options = [
   }
 ];
 
+export default {
+  component: ListboxDropdown
+} satisfies Meta<typeof ListboxDropdown>;
+
 export const Default: Story = {
   decorators: [
     (Story) => {

package/src/components/ListboxDropdown/ListboxDropdown.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 
 import { cn } from '@/utils';
 
-import { type ButtonProps } from '../Button';
 import { DropdownButton } from '../DropdownButton';
 import { DropdownMenu } from '../DropdownMenu';
 
+import type { ButtonProps } from '../Button';
+
 export type ListboxDropdownOption = {
   key: string;
   label: string;

package/src/components/MenuBar/MenuBarCheckboxItem.tsx

@@ -13,7 +13,7 @@ export const MenuBarCheckboxItem = forwardRef<
     <CheckboxItem
       checked={checked}
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className
       )}
       ref={ref}

package/src/components/MenuBar/MenuBarItem.tsx

@@ -6,14 +6,14 @@ 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
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
         className
       )}

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/MenuBarRadioItem.tsx

@@ -12,7 +12,7 @@ export const MenuBarRadioItem = forwardRef<
   return (
     <RadioItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className
       )}
       ref={ref}

package/src/components/MenuBar/MenuBarRoot.tsx

@@ -8,7 +8,7 @@ export const MenuBarRoot = forwardRef<React.ElementRef<typeof Root>, React.Compo
   function MenuBarRoot({ className, ...props }, ref) {
     return (
       <Root
-        className={cn('flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm', className)}
+        className={cn('bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-xs', className)}
         ref={ref}
         {...props}
       />

package/src/components/MenuBar/MenuBarSubTrigger.tsx

@@ -7,14 +7,14 @@ 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
       className={cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none',
         inset && 'pl-8',
         className
       )}

package/src/components/MenuBar/MenuBarTrigger.tsx

@@ -10,7 +10,7 @@ export const MenuBarTrigger = forwardRef<
   return (
     <Trigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-xs px-3 py-1 text-sm font-medium outline-hidden select-none',
         className
       )}
       ref={ref}

package/src/components/NotificationHub/NotificationHub.tsx

@@ -33,11 +33,11 @@ const NotificationHub = ({ timeout = 5000 }: NotificationHubProps) => {
                 <div className="p-4">
                   <div className="mb-2 flex items-center">
                     <NotificationIcon type={item.type} />
-                    <h5 className="ml-3 flex-grow font-medium text-slate-900 dark:text-slate-100">
+                    <h5 className="ml-3 grow font-medium text-slate-900 dark:text-slate-100">
                       {item.title ?? t(`notifications.types.${item.type}`)}
                     </h5>
                     <button
-                      className="inline-flex rounded-md text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:focus:ring-sky-600"
+                      className="inline-flex rounded-md text-slate-400 hover:text-slate-500 focus:ring-1 focus:ring-sky-500 focus:outline-hidden dark:focus:ring-sky-600"
                       type="button"
                       onClick={() => {
                         dismissNotification(item.id);
@@ -46,7 +46,7 @@ const NotificationHub = ({ timeout = 5000 }: NotificationHubProps) => {
                       <XIcon aria-hidden="true" className="h-5 w-5" />
                     </button>
                   </div>
-                  <p className="my-2 text-muted-foreground">{item.message}</p>
+                  <p className="text-muted-foreground my-2">{item.message}</p>
                 </div>
                 <motion.div
                   animate={{ width: '100%' }}

package/src/components/NotificationHub/NotificationIcon.tsx

@@ -1,4 +1,4 @@
-import { type NotificationInterface } from '@/hooks/useNotificationsStore';
+import type { NotificationInterface } from '@/hooks/useNotificationsStore';
 
 export type NotificationIconProps = {
   type: NotificationInterface['type'];

package/src/components/Pagination/PaginationLink.tsx

@@ -4,13 +4,15 @@ import type { Simplify } from 'type-fest';
 
 import { cn } from '@/utils';
 
-import { type ButtonProps, buttonVariants } from '../Button';
+import { buttonVariants } from '../Button';
+
+import type { ButtonProps } from '../Button';
 
 export type PaginationLinkProps = Simplify<
-  {
-    isActive?: boolean;
-  } & Pick<ButtonProps, 'size'> &
-    React.ComponentProps<'a'>
+  Pick<ButtonProps, 'size'> &
+    React.ComponentProps<'a'> & {
+      isActive?: boolean;
+    }
 >;
 
 export const PaginationLink = ({ children, className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (

package/src/components/Pagination/PaginationPrevious.tsx

@@ -3,7 +3,9 @@ import { ChevronLeftIcon } from 'lucide-react';
 import { useTranslation } from '@/hooks';
 import { cn } from '@/utils';
 
-import { PaginationLink, type PaginationLinkProps } from './PaginationLink';
+import { PaginationLink } from './PaginationLink';
+
+import type { PaginationLinkProps } from './PaginationLink';
 
 export const PaginationPrevious = ({ className, ...props }: PaginationLinkProps) => {
   const { t } = useTranslation('libui');