@accounter/client 0.0.6-alpha-20250821064131-607bce2af8795b29d697c284cea324342edf056a → 0.0.7-alpha-20250821152900-10d226ddb9282dab646439fa323daab0b61c6033

package/src/components/transactions-table/cells/counterparty.tsx

@@ -5,11 +5,10 @@ import { useGetBusinesses } from '../../../hooks/use-get-businesses.js';
 import { useUpdateTransaction } from '../../../hooks/use-update-transaction.js';
 import { useUrlQuery } from '../../../hooks/use-url-query.js';
 import { getBusinessTransactionsHref } from '../../business-transactions/index.js';
-import { Tooltip } from '../../common/index.js';
+import { SelectWithSearch, Tooltip } from '../../common/index.js';
 import { InsertBusiness } from '../../common/modals/insert-business.jsx';
 import { SimilarTransactionsModal } from '../../common/modals/similar-transactions-modal.jsx';
 import { Button } from '../../ui/button.jsx';
-import { SelectWithSearch } from '../../ui/select-with-search.jsx';
 import type { TransactionsTableRowType } from '../columns.js';
 
 type Props = {

package/src/components/transactions-table/cells-legacy/counterparty.tsx

@@ -9,11 +9,10 @@ import { useGetBusinesses } from '../../../hooks/use-get-businesses.js';
 import { useUpdateTransaction } from '../../../hooks/use-update-transaction.js';
 import { useUrlQuery } from '../../../hooks/use-url-query.js';
 import { getBusinessTransactionsHref } from '../../business-transactions/index.js';
-import { Tooltip } from '../../common/index.js';
+import { SelectWithSearch, Tooltip } from '../../common/index.js';
 import { InsertBusiness } from '../../common/modals/insert-business.js';
 import { SimilarTransactionsModal } from '../../common/modals/similar-transactions-modal.js';
 import { Button } from '../../ui/button.js';
-import { SelectWithSearch } from '../../ui/select-with-search.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `

package/src/components/ui/accordion.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ChevronDownIcon } from 'lucide-react';
+import { cn } from '@/lib/utils.js';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { cn } from '../../lib/utils.js';
 
 function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
   return <AccordionPrimitive.Root data-slot="accordion" {...props} />;

package/src/components/ui/avatar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { cn } from '@/lib/utils.js';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { cn } from '../../lib/utils.js';
 
 function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
   return (

package/src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils.js';
 import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../lib/utils.js';
 
 const badgeVariants = cva(
   'inline-flex items-center justify-center rounded-md border border-gray-200 px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-gray-950 focus-visible:ring-gray-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 transition-[color,box-shadow] overflow-hidden dark:border-gray-800 dark:focus-visible:border-gray-300 dark:focus-visible:ring-gray-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900',
@@ -13,7 +13,7 @@ const badgeVariants = cva(
         secondary:
           'border-transparent bg-gray-100 text-gray-900 [a&]:hover:bg-gray-100/90 dark:bg-gray-800 dark:text-gray-50 dark:[a&]:hover:bg-gray-800/90',
         destructive:
-          'border-transparent bg-red-500 text-white [a&]:hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-900 dark:[a&]:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40',
+          'border-transparent bg-red-500 text-white [a&]:hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-500/60 dark:bg-red-900 dark:[a&]:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40 dark:dark:bg-red-900/60',
         outline:
           'text-gray-950 [a&]:hover:bg-gray-100 [a&]:hover:text-gray-900 dark:text-gray-50 dark:[a&]:hover:bg-gray-800 dark:[a&]:hover:text-gray-50',
       },

package/src/components/ui/button.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils.js';
 import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../lib/utils.js';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-gray-950 focus-visible:ring-gray-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:focus-visible:border-gray-300 dark:focus-visible:ring-gray-300/50 dark:aria-invalid:ring-red-900/20 dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-gray-950 focus-visible:ring-gray-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:focus-visible:border-gray-300 dark:focus-visible:ring-gray-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
   {
     variants: {
       variant: {
         default:
           'bg-gray-900 text-gray-50 shadow-xs hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90',
         destructive:
-          'bg-red-500 text-white shadow-xs hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-500/60 dark:bg-red-900 dark:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:focus-visible:ring-red-900/40 dark:bg-red-900/60',
+          'bg-red-500 text-white shadow-xs hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-500/60 dark:bg-red-900 dark:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40 dark:dark:bg-red-900/60',
         outline:
-          'border bg-white shadow-xs hover:bg-gray-100 hover:text-gray-900 dark:bg-gray-200/30 dark:border-gray-200 dark:hover:bg-gray-200/50 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:bg-gray-800/30 dark:border-gray-800 dark:hover:bg-gray-800/50',
+          'border bg-white shadow-xs hover:bg-gray-100 hover:text-gray-900 dark:bg-gray-200/30 dark:border-gray-200 dark:hover:bg-gray-200/50 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:dark:bg-gray-800/30 dark:dark:border-gray-800 dark:dark:hover:bg-gray-800/50',
         secondary:
           'bg-gray-100 text-gray-900 shadow-xs hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80',
         ghost:
-          'hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-100/50 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:hover:bg-gray-800/50',
+          'hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-100/50 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:dark:hover:bg-gray-800/50',
         link: 'text-gray-900 underline-offset-4 hover:underline dark:text-gray-50',
       },
       size: {

package/src/components/ui/calendar.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
-import { cn } from '../../lib/utils.js';
-import { Button, buttonVariants } from './button.js';
+import { Button, buttonVariants } from '@/components/ui/button.js';
+import { cn } from '@/lib/utils.js';
 
 function Calendar({
   className,
@@ -62,7 +62,10 @@ function Calendar({
           'relative has-focus:border-gray-950 border border-gray-200 shadow-xs has-focus:ring-gray-950/50 has-focus:ring-[3px] rounded-md dark:has-focus:border-gray-300 dark:border-gray-800 dark:has-focus:ring-gray-300/50',
           defaultClassNames.dropdown_root,
         ),
-        dropdown: cn('absolute inset-0 opacity-0', defaultClassNames.dropdown),
+        dropdown: cn(
+          'absolute bg-white inset-0 opacity-0 dark:bg-gray-950',
+          defaultClassNames.dropdown,
+        ),
         caption_label: cn(
           'select-none font-medium',
           captionLayout === 'label'

package/src/components/ui/card.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '../../lib/utils.js';
+import { cn } from '@/lib/utils.js';
 
 function Card({ className, ...props }: React.ComponentProps<'div'>) {
   return (
@@ -19,7 +19,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-header"
       className={cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
         className,
       )}
       {...props}

package/src/components/ui/chart.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import React from 'react';
 import * as RechartsPrimitive from 'recharts';
-import { cn } from '../../lib/utils.js';
+import { cn } from '@/lib/utils.js';
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: '', dark: '.dark' } as const;

package/src/components/ui/checkbox.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { CheckIcon } from 'lucide-react';
+import { cn } from '@/lib/utils.js';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { cn } from '../../lib/utils.js';
 
 function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        'peer border-gray-200 data-[state=checked]:bg-gray-900 data-[state=checked]:text-gray-50 data-[state=checked]:border-gray-900 focus-visible:border-gray-950 focus-visible:ring-gray-950/50 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:data-[state=checked]:bg-gray-50 dark:data-[state=checked]:text-gray-900 dark:data-[state=checked]:border-gray-50 dark:focus-visible:border-gray-300 dark:focus-visible:ring-gray-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900',
+        'peer border-gray-200 dark:bg-gray-200/30 data-[state=checked]:bg-gray-900 data-[state=checked]:text-gray-50 dark:data-[state=checked]:bg-gray-900 data-[state=checked]:border-gray-900 focus-visible:border-gray-950 focus-visible:ring-gray-950/50 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:dark:bg-gray-800/30 dark:data-[state=checked]:bg-gray-50 dark:data-[state=checked]:text-gray-900 dark:dark:data-[state=checked]:bg-gray-50 dark:data-[state=checked]:border-gray-50 dark:focus-visible:border-gray-300 dark:focus-visible:ring-gray-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900',
         className,
       )}
       {...props}

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,19 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/components/ui/command.tsx

@@ -1,8 +1,16 @@
+'use client';
+
 import React from 'react';
 import { Command as CommandPrimitive } from 'cmdk';
 import { SearchIcon } from 'lucide-react';
-import { cn } from '../../lib/utils.js';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog.js';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog.js';
+import { cn } from '@/lib/utils.js';
 
 function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
@@ -21,10 +29,14 @@ function CommandDialog({
   title = 'Command Palette',
   description = 'Search for a command to run...',
   children,
+  className,
+  showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
   title?: string;
   description?: string;
+  className?: string;
+  showCloseButton?: boolean;
 }) {
   return (
     <Dialog {...props}>
@@ -32,7 +44,10 @@ function CommandDialog({
         <DialogTitle>{title}</DialogTitle>
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
-      <DialogContent className="overflow-hidden p-0">
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
         <Command className="[&_[cmdk-group-heading]]:text-gray-500 **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 dark:[&_[cmdk-group-heading]]:text-gray-400">
           {children}
         </Command>

package/src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { XIcon } from 'lucide-react';
+import { cn } from '@/lib/utils.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { cn } from '../../lib/utils.js';
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;
@@ -27,7 +27,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-1001 bg-black/80',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-1001 bg-black/50',
         className,
       )}
       {...props}
@@ -38,8 +38,11 @@ function DialogOverlay({
 function DialogContent({
   className,
   children,
+  showCloseButton = true,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
@@ -52,10 +55,15 @@ function DialogContent({
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="ring-offset-white focus:ring-gray-950 data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:ring-offset-gray-950 dark:focus:ring-gray-300 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400">
-          <XIcon />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-white focus:ring-gray-950 data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:ring-offset-gray-950 dark:focus:ring-gray-300 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   );

package/src/components/ui/drawer.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import React from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
-import { cn } from '../../lib/utils.js';
+import { cn } from '@/lib/utils.js';
 
 function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
@@ -65,7 +67,10 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn('flex flex-col gap-1.5 p-4', className)}
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
+        className,
+      )}
       {...props}
     />
   );

package/src/components/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { cn } from '@/lib/utils.js';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { cn } from '../../lib/utils.js';
 
 function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
@@ -30,7 +30,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-white text-gray-950 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-1001 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border border-gray-200 p-1 shadow-md dark:bg-gray-950 dark:text-gray-50 dark:border-gray-800',
+          'bg-white text-gray-950 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-1001 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-gray-200 p-1 shadow-md dark:bg-gray-950 dark:text-gray-50 dark:border-gray-800',
           className,
         )}
         {...props}
@@ -58,7 +58,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-gray-100 focus:text-gray-900 data-[variant=destructive]:text-gray-50 data-[variant=destructive]:focus:bg-red-500/10 dark:data-[variant=destructive]:focus:bg-red-500/40 data-[variant=destructive]:focus:text-gray-50 data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-gray-500 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-gray-800 dark:focus:text-gray-50 dark:data-[variant=destructive]:text-gray-50 dark:data-[variant=destructive]:focus:bg-red-900/10 dark:dark:data-[variant=destructive]:focus:bg-red-900/40 dark:data-[variant=destructive]:focus:text-gray-50 dark:[&_svg:not([class*='text-'])]:text-gray-400",
+        "focus:bg-gray-100 focus:text-gray-900 data-[variant=destructive]:text-red-500 data-[variant=destructive]:focus:bg-red-500/10 dark:data-[variant=destructive]:focus:bg-red-500/20 data-[variant=destructive]:focus:text-red-500 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-gray-500 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-gray-800 dark:focus:text-gray-50 dark:data-[variant=destructive]:text-red-900 dark:data-[variant=destructive]:focus:bg-red-900/10 dark:dark:data-[variant=destructive]:focus:bg-red-900/20 dark:data-[variant=destructive]:focus:text-red-900 dark:[&_svg:not([class*='text-'])]:text-gray-400",
         className,
       )}
       {...props}
@@ -198,7 +198,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-white text-gray-950 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-1001 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 p-1 shadow-lg dark:bg-gray-950 dark:text-gray-50 dark:border-gray-800',
+        'bg-white text-gray-950 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-1001 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-gray-200 p-1 shadow-lg dark:bg-gray-950 dark:text-gray-50 dark:border-gray-800',
         className,
       )}
       {...props}

package/src/components/ui/form.tsx

@@ -8,10 +8,10 @@ import {
   type FieldPath,
   type FieldValues,
 } from 'react-hook-form';
+import { Label } from '@/components/ui/label.js';
+import { cn } from '@/lib/utils.js';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../lib/utils.js';
-import { Label } from './label.js';
 
 const Form = FormProvider;
 
@@ -84,7 +84,7 @@ function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPri
       data-slot="form-label"
       data-error={!!error}
       className={cn(
-        'data-[error=true]:text-gray-50 dark:data-[error=true]:text-gray-50',
+        'data-[error=true]:text-red-500 dark:data-[error=true]:text-red-900',
         className,
       )}
       htmlFor={formItemId}
@@ -132,7 +132,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
     <p
       data-slot="form-message"
       id={formMessageId}
-      className={cn('text-red-500 text-sm dark:text-red-500', className)}
+      className={cn('text-red-500 text-sm dark:text-red-900', className)}
       {...props}
     >
       {body}

package/src/components/ui/input.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '../../lib/utils.js';
+import { cn } from '@/lib/utils.js';
 
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'border-gray-200 file:text-gray-950 placeholder:text-gray-500 selection:bg-gray-900 selection:text-gray-50 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:selection:bg-gray-50 dark:selection:text-gray-900',
+        'file:text-gray-950 placeholder:text-gray-500 selection:bg-gray-900 selection:text-gray-50 dark:bg-gray-200/30 border-gray-200 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:selection:bg-gray-50 dark:selection:text-gray-900 dark:dark:bg-gray-800/30 dark:border-gray-800',
         'focus-visible:border-gray-950 focus-visible:ring-gray-950/50 focus-visible:ring-[3px] dark:focus-visible:border-gray-300 dark:focus-visible:ring-gray-300/50',
         'aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900',
         className,

package/src/components/ui/label.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import React from 'react';
+import { cn } from '@/lib/utils.js';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { cn } from '../../lib/utils.js';
 
 function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (

package/src/components/ui/popover.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { cn } from '@/lib/utils.js';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { cn } from '../../lib/utils.js';
 
 function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
@@ -23,7 +23,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-white text-gray-950 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-1001 w-72 rounded-md border border-gray-200 p-4 shadow-md outline-hidden dark:bg-gray-950 dark:text-gray-50 dark:border-gray-800',
+          'bg-white text-gray-950 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-1001 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-gray-200 p-4 shadow-md outline-hidden dark:bg-gray-950 dark:text-gray-50 dark:border-gray-800',
           className,
         )}
         {...props}

package/src/components/ui/scroll-area.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import React from 'react';
+import { cn } from '@/lib/utils.js';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import { cn } from '../../lib/utils.js';
 
 function ScrollArea({
   className,
@@ -15,7 +17,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="ring-gray-950/10 dark:ring-gray-950/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 dark:ring-gray-300/10 dark:dark:ring-gray-300/20"
+        className="focus-visible:ring-gray-950/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 dark:focus-visible:ring-gray-300/50"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

package/src/components/ui/select.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { cn } from '@/lib/utils.js';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { cn } from '../../lib/utils.js';
 
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />;
@@ -17,14 +17,18 @@ function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.V
 
 function SelectTrigger({
   className,
+  size = 'default',
   children,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default';
+}) {
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
+      data-size={size}
       className={cn(
-        "border-gray-200 data-[placeholder]:text-gray-500 [&_svg:not([class*='text-'])]:text-gray-500 focus-visible:border-gray-950 focus-visible:ring-gray-950/50 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:border-gray-800 dark:data-[placeholder]:text-gray-400 dark:[&_svg:not([class*='text-'])]:text-gray-400 dark:focus-visible:border-gray-300 dark:focus-visible:ring-gray-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900 max-w-[100%]",
+        "border-gray-200 data-[placeholder]:text-gray-500 [&_svg:not([class*='text-'])]:text-gray-500 focus-visible:border-gray-950 focus-visible:ring-gray-950/50 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:bg-gray-200/30 dark:hover:bg-gray-200/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:border-gray-800 dark:data-[placeholder]:text-gray-400 dark:[&_svg:not([class*='text-'])]:text-gray-400 dark:focus-visible:border-gray-300 dark:focus-visible:ring-gray-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900 dark:dark:bg-gray-800/30 dark:dark:hover:bg-gray-800/50",
         className,
       )}
       {...props}
@@ -48,7 +52,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          'bg-white text-gray-950 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 relative z-1001 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 shadow-md dark:bg-gray-950 dark:text-gray-50 dark:border-gray-800',
+          'bg-white text-gray-950 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-gray-200 shadow-md dark:bg-gray-950 dark:text-gray-50 dark:border-gray-800',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,
@@ -76,7 +80,7 @@ function SelectLabel({ className, ...props }: React.ComponentProps<typeof Select
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn('px-2 py-1.5 text-sm font-medium', className)}
+      className={cn('text-gray-500 px-2 py-1.5 text-xs dark:text-gray-400', className)}
       {...props}
     />
   );

package/src/components/ui/separator.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { cn } from '@/lib/utils.js';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import { cn } from '../../lib/utils.js';
 
 function Separator({
   className,
@@ -10,7 +10,7 @@ function Separator({
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
   return (
     <SeparatorPrimitive.Root
-      data-slot="separator-root"
+      data-slot="separator"
       decorative={decorative}
       orientation={orientation}
       className={cn(

package/src/components/ui/sheet.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import { XIcon } from 'lucide-react';
+import { cn } from '@/lib/utils.js';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { cn } from '../../lib/utils.js';
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
@@ -27,7 +29,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-1001 bg-black/80',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-1001 bg-black/50',
         className,
       )}
       {...props}

package/src/components/ui/sonner.tsx

@@ -2,7 +2,7 @@ import { useTheme } from 'next-themes';
 import { Toaster as Sonner, type ToasterProps } from 'sonner';
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'light' } = useTheme();
+  const { theme = 'system' } = useTheme();
 
   return (
     <Sonner

package/src/components/ui/switch.tsx

@@ -1,13 +1,15 @@
+'use client';
+
 import React from 'react';
+import { cn } from '@/lib/utils.js';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { cn } from '../../lib/utils.js';
 
 function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        'peer data-[state=checked]:bg-gray-900 data-[state=unchecked]:bg-gray-200 focus-visible:border-gray-950 focus-visible:ring-gray-950/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 dark:data-[state=checked]:bg-gray-50 dark:data-[state=unchecked]:bg-gray-800 dark:focus-visible:border-gray-300 dark:focus-visible:ring-gray-300/50',
+        'peer data-[state=checked]:bg-gray-900 data-[state=unchecked]:bg-gray-200 focus-visible:border-gray-950 focus-visible:ring-gray-950/50 dark:data-[state=unchecked]:bg-gray-200/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-gray-200 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 dark:data-[state=checked]:bg-gray-50 dark:data-[state=unchecked]:bg-gray-800 dark:focus-visible:border-gray-300 dark:focus-visible:ring-gray-300/50 dark:dark:data-[state=unchecked]:bg-gray-800/80 dark:border-gray-800',
         className,
       )}
       {...props}
@@ -15,7 +17,7 @@ function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimi
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          'bg-white pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-gray-950',
+          'bg-white dark:data-[state=unchecked]:bg-gray-950 dark:data-[state=checked]:bg-gray-50 pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:bg-gray-950 dark:dark:data-[state=unchecked]:bg-gray-50 dark:dark:data-[state=checked]:bg-gray-900',
         )}
       />
     </SwitchPrimitive.Root>

package/src/components/ui/table.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '../../lib/utils.js';
+import { cn } from '@/lib/utils.js';
 
 function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
@@ -58,7 +58,7 @@ function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
     <th
       data-slot="table-head"
       className={cn(
-        'text-gray-500 h-10 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] dark:text-gray-400',
+        'text-gray-950 h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] dark:text-gray-50',
         className,
       )}
       {...props}