@douglasneuroinformatics/libui 5.0.1 → 6.0.0

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

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { ClientTable } from './ClientTable';
+import { ClientTable } from './ClientTable.tsx';
 
 const TEST_ID = 'ClientTable';
 const FIRST_BUTTON_ID = 'first-page-button';
@@ -10,6 +10,7 @@ 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} />);

package/src/components/ClientTable/ClientTable.stories.tsx

@@ -1,9 +1,9 @@
 import { randomInt, range } from '@douglasneuroinformatics/libjs';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { ClientTable } from './ClientTable';
+import { ClientTable } from './ClientTable.tsx';
 
-import type { ClientTableColumn } from './ClientTable';
+import type { ClientTableColumn } from './ClientTable.tsx';
 
 type ExampleItem = {
   c1: number;

package/src/components/ClientTable/ClientTable.tsx

@@ -5,11 +5,11 @@ import { toBasicISOString } from '@douglasneuroinformatics/libjs';
 import { range } from 'lodash-es';
 import { ChevronDownIcon } from 'lucide-react';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
-import { DropdownMenu } from '../DropdownMenu';
-import { Table } from '../Table';
-import { ClientTablePagination } from './ClientTablePagination';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.tsx';
+import { Table } from '../Table/Table.tsx';
+import { ClientTablePagination } from './ClientTablePagination.tsx';
 
 /** Coerces the value in a cell to a string for consistant display purposes */
 function defaultFormatter(value: unknown): string {

package/src/components/ClientTable/ClientTablePagination.tsx

@@ -1,6 +1,6 @@
-import { useTranslation } from '@/hooks';
+import { useTranslation } from '#hooks';
 
-import { Button } from '../Button';
+import { Button } from '../Button/Button.tsx';
 
 export type ClientPagePaginationProps = {
   currentPage: number;
@@ -24,7 +24,7 @@ export const ClientTablePagination = ({
     <div className="flex items-center justify-between py-3">
       <div className="hidden sm:block">
         <p
-          className="text-sm font-medium text-muted-foreground"
+          className="text-muted-foreground text-sm font-medium"
           data-testid="page-numbers"
         >{`${firstEntry} - ${lastEntry} / ${totalEntries}`}</p>
       </div>

package/src/components/CopyButton/CopyButton.stories.tsx

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

package/src/components/CopyButton/CopyButton.tsx

@@ -4,9 +4,9 @@ import { ClipboardCheckIcon, ClipboardListIcon } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import { match } from 'ts-pattern';
 
-import { Button } from '../Button';
+import { Button } from '../Button/Button.tsx';
 
-import type { ButtonProps } from '../Button';
+import type { ButtonProps } from '../Button/Button.tsx';
 
 export const CopyButton: React.FC<{ size?: ButtonProps['size']; text: string; variant?: ButtonProps['variant'] }> = ({
   size,

package/src/components/DataTable/DataTable.stories.tsx

@@ -6,10 +6,10 @@ import type { ColumnDef } from '@tanstack/table-core';
 import { range } from 'lodash-es';
 import { ChevronDownIcon } from 'lucide-react';
 
-import { Button } from '../Button';
-import { DropdownMenu } from '../DropdownMenu';
-import { DataTable } from './DataTable';
-import { useDataTableHandle } from './hooks';
+import { Button } from '../Button/Button.tsx';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.tsx';
+import { DataTable } from './DataTable.tsx';
+import { useDataTableHandle } from './hooks.ts';
 
 type PaymentStatus = 'failed' | 'pending' | 'processing' | 'success';
 

package/src/components/DataTable/DataTable.tsx

@@ -2,11 +2,11 @@ import { useEffect, useRef } from 'react';
 
 import type { RowData } from '@tanstack/table-core';
 
-import { DataTableContext } from './context';
-import { DataTableContent } from './DataTableContent';
-import { createDataTableStore } from './store';
+import { DataTableContext } from './context.ts';
+import { DataTableContent } from './DataTableContent.tsx';
+import { createDataTableStore } from './store.ts';
 
-import type { DataTableProps } from './types';
+import type { DataTableProps } from './types.ts';
 
 export const DataTable = <T extends RowData>({
   emptyStateProps,
@@ -31,3 +31,5 @@ export const DataTable = <T extends RowData>({
     </DataTableContext.Provider>
   );
 };
+
+export * as TanstackTable from '@tanstack/table-core';

package/src/components/DataTable/DataTableBody.tsx

@@ -1,10 +1,12 @@
-import { useTranslation } from '@/hooks';
+import type React from 'react';
 
-import { DataTableEmptyState } from './DataTableEmptyState';
-import { useDataTableHandle } from './hooks';
-import { flexRender } from './utils';
+import { useTranslation } from '#hooks';
 
-import type { DataTableEmptyStateProps } from './DataTableEmptyState';
+import { DataTableEmptyState } from './DataTableEmptyState.tsx';
+import { useDataTableHandle } from './hooks.ts';
+import { flexRender } from './utils.tsx';
+
+import type { DataTableEmptyStateProps } from './DataTableEmptyState.tsx';
 
 export const DataTableBody: React.FC<{ emptyStateProps?: Partial<DataTableEmptyStateProps> }> = ({
   emptyStateProps

package/src/components/DataTable/DataTableContent.tsx

@@ -1,13 +1,13 @@
 import type { RowData } from '@tanstack/table-core';
 
-import { TABLE_NAME_METADATA_KEY } from './constants';
-import { DataTableBody } from './DataTableBody';
-import { DataTableControls } from './DataTableControls';
-import { DataTableHead } from './DataTableHead';
-import { DataTablePagination } from './DataTablePagination';
-import { useContainerRef, useDataTableHandle, useDataTableStore } from './hooks';
+import { TABLE_NAME_METADATA_KEY } from './constants.ts';
+import { DataTableBody } from './DataTableBody.tsx';
+import { DataTableControls } from './DataTableControls.tsx';
+import { DataTableHead } from './DataTableHead.tsx';
+import { DataTablePagination } from './DataTablePagination.tsx';
+import { useContainerRef, useDataTableHandle, useDataTableStore } from './hooks.ts';
 
-import type { DataTableContentProps } from './types';
+import type { DataTableContentProps } from './types.ts';
 
 export const DataTableContent = <T extends RowData>({
   emptyStateProps,

package/src/components/DataTable/DataTableControls.tsx

@@ -1,13 +1,13 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import type { RowData, Table } from '@tanstack/table-core';
 
-import { useTranslation } from '@/hooks';
+import { useTranslation } from '#hooks';
 
-import { SearchBar } from '../SearchBar';
-import { useDataTableHandle, useDataTableStore } from './hooks';
+import { SearchBar } from '../SearchBar/SearchBar.tsx';
+import { useDataTableHandle, useDataTableStore } from './hooks.ts';
 
-import type { SearchChangeHandler } from './types';
+import type { SearchChangeHandler } from './types.ts';
 
 export const DataTableControls = <T extends RowData>({
   onSearchChange,

package/src/components/DataTable/DataTableEmptyState.tsx

@@ -1,6 +1,8 @@
+import type React from 'react';
+
 import type { LucideIcon } from 'lucide-react';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export type DataTableEmptyStateProps = {
   className?: string;

package/src/components/DataTable/DataTableHead.tsx

@@ -1,5 +1,5 @@
-import { useDataTableHandle } from './hooks';
-import { flexRender } from './utils';
+import { useDataTableHandle } from './hooks.ts';
+import { flexRender } from './utils.tsx';
 
 export const DataTableHead = () => {
   const headerGroups = useDataTableHandle('headerGroups');

package/src/components/DataTable/DataTablePagination.tsx

@@ -1,8 +1,8 @@
 import { range } from 'lodash-es';
 import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from 'lucide-react';
 
-import { Button } from '../Button';
-import { useDataTableHandle, useDataTableStore } from './hooks';
+import { Button } from '../Button/Button.tsx';
+import { useDataTableHandle, useDataTableStore } from './hooks.ts';
 
 export const DataTablePagination = () => {
   const { pageCount, pageIndex } = useDataTableHandle('paginationInfo');

package/src/components/DataTable/DataTableRowActionCell.tsx

@@ -1,12 +1,12 @@
 import type { CellContext, RowData } from '@tanstack/table-core';
 import { MoreHorizontalIcon } from 'lucide-react';
 
-import { useDestructiveAction, useTranslation } from '@/hooks';
-import { cn } from '@/utils';
+import { useDestructiveAction, useTranslation } from '#hooks';
+import { cn } from '#utils';
 
-import { Button } from '../Button';
-import { DropdownMenu } from '../DropdownMenu';
-import { ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants';
+import { Button } from '../Button/Button.tsx';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.tsx';
+import { ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants.ts';
 
 export const DataTableRowActionCell = <T extends RowData>({ row, table }: CellContext<T, unknown>) => {
   const destructiveAction = useDestructiveAction();

package/src/components/DataTable/__tests__/DataTable.spec.tsx

@@ -4,7 +4,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { range } from 'lodash-es';
 import { describe, expect, it } from 'vitest';
 
-import { DataTable } from '../DataTable';
+import { DataTable } from '../DataTable.tsx';
 
 type PaymentStatus = 'failed' | 'pending' | 'processing' | 'success';
 

package/src/components/DataTable/context.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
 
-import type { DataTableStoreApi } from './store';
+import type { DataTableStoreApi } from './store.ts';
 
 export const DataTableContext = createContext<{ store: DataTableStoreApi }>(null!);

package/src/components/DataTable/hooks.ts

@@ -3,10 +3,10 @@ import { useContext, useEffect, useRef } from 'react';
 import { useStore } from 'zustand';
 import { useStoreWithEqualityFn } from 'zustand/traditional';
 
-import { MEMOIZED_HANDLE_ID } from './constants';
-import { DataTableContext } from './context';
+import { MEMOIZED_HANDLE_ID } from './constants.ts';
+import { DataTableContext } from './context.ts';
 
-import type { DataTableStore } from './types';
+import type { DataTableStore } from './types.ts';
 
 export function useContainerRef() {
   const containerRef = useRef<HTMLDivElement>(null);

package/src/components/DataTable/store.ts

@@ -8,16 +8,16 @@ import {
 import type { GlobalFilter, TableState, Updater } from '@tanstack/table-core';
 import { createStore } from 'zustand';
 
-import { ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants';
+import { ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants.ts';
 import {
   applyUpdater,
   calculateColumnSizing,
   defineMemoizedHandle,
   getColumnsWithActions,
   getTanstackTableState
-} from './utils';
+} from './utils.tsx';
 
-import type { DataTableStore, DataTableStoreParams } from './types';
+import type { DataTableStore, DataTableStoreParams } from './types.ts';
 
 export function createDataTableStore<T>(params: DataTableStoreParams<T>) {
   return createStore<DataTableStore>((set, get) => {

package/src/components/DataTable/types.ts

@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import type {
   ColumnDef,
   ColumnFiltersState,
@@ -12,8 +14,8 @@ import type {
 } from '@tanstack/table-core';
 import type { Promisable } from 'type-fest';
 
-import type { MEMOIZED_HANDLE_ID, ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants';
-import type { DataTableEmptyStateProps } from './DataTableEmptyState';
+import type { MEMOIZED_HANDLE_ID, ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants.ts';
+import type { DataTableEmptyStateProps } from './DataTableEmptyState.tsx';
 
 declare module '@tanstack/table-core' {
   // eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-unused-vars

package/src/components/DataTable/utils.tsx

@@ -1,10 +1,10 @@
 import type { ColumnDef, ColumnSizingState, RowData, Table, TableState, Updater } from '@tanstack/table-core';
 import { sum } from 'lodash-es';
 
-import { ACTIONS_COLUMN_ID, MEMOIZED_HANDLE_ID } from './constants';
-import { DataTableRowActionCell } from './DataTableRowActionCell';
+import { ACTIONS_COLUMN_ID, MEMOIZED_HANDLE_ID } from './constants.ts';
+import { DataTableRowActionCell } from './DataTableRowActionCell.tsx';
 
-import type { DataTableStoreParams, MemoizedHandle } from './types';
+import type { DataTableStoreParams, MemoizedHandle } from './types.ts';
 
 function applyUpdater<T>(updater: Updater<T>, current: T): T {
   return typeof updater === 'function' ? (updater as (prev: T) => T)(current) : updater;

package/src/components/DatePicker/Calendar.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { range } from 'lodash-es';
 import { AnimatePresence, motion } from 'motion/react';
 
-import { useTranslation } from '@/hooks';
+import { useTranslation } from '#hooks';
 
 export const CALENDAR_ANIMATION_DURATION = 0.2; // seconds
 
@@ -40,7 +40,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calen
       >
         <div className="grid h-56 w-56 grid-cols-7 text-sm" ref={ref}>
           {daysOfWeek.map((label) => (
-            <div className="flex h-8 w-8 items-center justify-center text-muted-foreground" key={label}>
+            <div className="text-muted-foreground flex h-8 w-8 items-center justify-center" key={label}>
               {label.charAt(0).toUpperCase()}
             </div>
           ))}

package/src/components/DatePicker/DatePicker.stories.tsx

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

package/src/components/DatePicker/DatePicker.tsx

@@ -3,13 +3,13 @@ import * as React from 'react';
 
 import { AnimatePresence, motion } from 'motion/react';
 
-import { useTranslation } from '@/hooks';
-import { cn } from '@/utils';
+import { useTranslation } from '#hooks';
+import { cn } from '#utils';
 
-import { ArrowToggle } from '../ArrowToggle';
-import { Card } from '../Card';
-import { Calendar, CALENDAR_ANIMATION_DURATION } from './Calendar';
-import { YearSelector } from './YearSelector';
+import { ArrowToggle } from '../ArrowToggle/ArrowToggle.tsx';
+import { Card } from '../Card/Card.tsx';
+import { Calendar, CALENDAR_ANIMATION_DURATION } from './Calendar.tsx';
+import { YearSelector } from './YearSelector.tsx';
 
 const MONTHS = [
   'january',

package/src/components/DatePicker/YearSelector.tsx

@@ -2,9 +2,9 @@ import { useEffect, useRef } from 'react';
 
 import { range } from 'lodash-es';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
-import { ScrollArea } from '../ScrollArea';
+import { ScrollArea } from '../ScrollArea/ScrollArea.tsx';
 
 export type YearSelectorProps = {
   onSelection: (date: Date) => void;
@@ -24,7 +24,7 @@ export const YearSelector = (props: YearSelectorProps) => {
 
   return (
     <ScrollArea className="h-56 w-56">
-      <div className="grid grid-cols-3 gap-x-2 gap-y-1 text-sm text-muted-foreground">
+      <div className="text-muted-foreground grid grid-cols-3 gap-x-2 gap-y-1 text-sm">
         {years.map((year) => (
           <div className="flex h-7 items-center justify-center" key={year}>
             <button

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Button } from '../Button';
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { Dialog } from './Dialog';
+import { Button } from '../Button/Button.tsx';
+import { Input } from '../Input/Input.tsx';
+import { Label } from '../Label/Label.tsx';
+import { Dialog } from './Dialog.tsx';
 
 type Story = StoryObj<typeof Dialog>;
 

package/src/components/Dialog/Dialog.tsx

@@ -1,11 +1,11 @@
 import { Root, Trigger } from '@radix-ui/react-dialog';
 
-import { DialogBody } from './DialogBody';
-import { DialogContent } from './DialogContent';
-import { DialogDescription } from './DialogDescription';
-import { DialogFooter } from './DialogFooter';
-import { DialogHeader } from './DialogHeader';
-import { DialogTitle } from './DialogTitle';
+import { DialogBody } from './DialogBody.tsx';
+import { DialogContent } from './DialogContent.tsx';
+import { DialogDescription } from './DialogDescription.tsx';
+import { DialogFooter } from './DialogFooter.tsx';
+import { DialogHeader } from './DialogHeader.tsx';
+import { DialogTitle } from './DialogTitle.tsx';
 
 export const Dialog = Object.assign(Root.bind(null), {
   Body: DialogBody,

package/src/components/Dialog/DialogBody.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export const DialogBody = ({
   children,

package/src/components/Dialog/DialogContent.tsx

@@ -1,11 +1,11 @@
-import {} from 'react';
+import * as React from 'react';
 
 import { Close, Content, Portal } from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
-import { DialogOverlay } from './DialogOverlay';
+import { DialogOverlay } from './DialogOverlay.tsx';
 
 export const DialogContent = ({ children, className, ...props }: React.ComponentProps<typeof Content>) => {
   return (

package/src/components/Dialog/DialogDescription.tsx

@@ -1,8 +1,8 @@
-import {} from 'react';
+import * as React from 'react';
 
 import { Description } from '@radix-ui/react-dialog';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export const DialogDescription = ({ className, ...props }: React.ComponentProps<typeof Description>) => {
   return <Description className={cn('text-muted-foreground text-sm', className)} {...props} />;

package/src/components/Dialog/DialogFooter.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn('flex flex-col gap-x-2 gap-y-0.5 sm:flex-row', className)} {...props} />

package/src/components/Dialog/DialogHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />

package/src/components/Dialog/DialogOverlay.tsx

@@ -1,8 +1,8 @@
-import {} from 'react';
+import * as React from 'react';
 
 import { Overlay } from '@radix-ui/react-dialog';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export const DialogOverlay = ({ className, ...props }: React.ComponentProps<typeof Overlay>) => {
   return (

package/src/components/Dialog/DialogTitle.tsx

@@ -1,8 +1,8 @@
-import {} from 'react';
+import * as React from 'react';
 
 import { Title } from '@radix-ui/react-dialog';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export const DialogTitle = ({ className, ...props }: React.ComponentProps<typeof Title>) => {
   return <Title className={cn('text-lg leading-none font-semibold tracking-tight', className)} {...props} />;

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

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

package/src/components/DropdownButton/DropdownButton.tsx

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

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Button } from '../Button';
-import { DropdownMenu } from './DropdownMenu';
+import { Button } from '../Button/Button.tsx';
+import { DropdownMenu } from './DropdownMenu.tsx';
 
 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';
-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';
+import { DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.tsx';
+import { DropdownMenuContent } from './DropdownMenuContent.tsx';
+import { DropdownMenuItem } from './DropdownMenuItem.tsx';
+import { DropdownMenuLabel } from './DropdownMenuLabel.tsx';
+import { DropdownMenuRadioItem } from './DropdownMenuRadioItem.tsx';
+import { DropdownMenuSeparator } from './DropdownMenuSeparator.tsx';
+import { DropdownMenuShortcut } from './DropdownMenuShortcut.tsx';
+import { DropdownMenuSubContent } from './DropdownMenuSubContent.tsx';
+import { DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.tsx';
 
 export const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root.bind(null), {
   CheckboxItem: DropdownMenuCheckboxItem,

package/src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CheckIcon } from 'lucide-react';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export const DropdownMenuCheckboxItem = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,

package/src/components/DropdownMenu/DropdownMenuContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
   widthFull?: boolean;
@@ -15,7 +15,7 @@ export const DropdownMenuContent = React.forwardRef<
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
         className={cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+          'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
           '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',
           widthFull && 'w-[var(--radix-dropdown-menu-trigger-width)]',
           className

package/src/components/DropdownMenu/DropdownMenuItem.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export const DropdownMenuItem = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,

package/src/components/DropdownMenu/DropdownMenuLabel.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export const DropdownMenuLabel = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,

package/src/components/DropdownMenu/DropdownMenuRadioItem.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CircleIcon } from 'lucide-react';
 
-import { cn } from '@/utils';
+import { cn } from '#utils';
 
 export const DropdownMenuRadioItem = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,