null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

chore: shadcn/ui component updates (batch)

This commit is contained in:
null 2026-06-07 14:29:09 -05:00
parent 6d60eebe1a
commit 3b555e4d8e
15 changed files with 454 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/components/ui/Skeleton.jsx
View File

@ -1,7 +1,6 @@
import * as React from 'react';
import { cn } from '@/lib/utils';
const Skeleton = React.forwardRef(({ className, variant = 'line', ...props }, ref) => {
function Skeleton({ className, variant = 'line', ref, ...props }) {
const variants = {
line: 'h-4 w-full rounded-md',
circle: 'h-10 w-10 rounded-full',
@ -21,7 +20,6 @@ const Skeleton = React.forwardRef(({ className, variant = 'line', ...props }, re
{...props}
/>
);
});
Skeleton.displayName = 'Skeleton';
}
export { Skeleton };

1
client/components/ui/badge.jsx
View File

@ -1,4 +1,3 @@
import * as React from 'react';
import { cva } from 'class-variance-authority';
import { cn } from '@/lib/utils';

6
client/components/ui/button.jsx
View File

@ -1,4 +1,3 @@
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';
import { cn } from '@/lib/utils';
@ -29,7 +28,7 @@ const buttonVariants = cva(
}
);
const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
function Button({ className, variant, size, asChild = false, ref, ...props }) {
const Comp = asChild ? Slot : 'button';
return (
<Comp
@ -38,7 +37,6 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, ..
{...props}
/>
);
});
Button.displayName = 'Button';
}
export { Button, buttonVariants };

43
client/components/ui/card.jsx
View File

@ -1,58 +1,63 @@
import * as React from 'react';
import { cn } from '@/lib/utils';
const Card = React.forwardRef(({ className, ...props }, ref) => (
function Card({ className, ref, ...props }) {
return (
<div
ref={ref}
className={cn('rounded-2xl border border-border/80 bg-card/95 text-card-foreground shadow-sm shadow-black/10 transition-shadow hover:shadow-md hover:shadow-black/10', className)}
{...props}
/>
));
Card.displayName = 'Card';
);
}
const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
function CardHeader({ className, ref, ...props }) {
return (
<div
ref={ref}
className={cn('flex flex-col space-y-1.5 p-6', className)}
{...props}
/>
));
CardHeader.displayName = 'CardHeader';
);
}
const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
function CardTitle({ className, ref, ...props }) {
return (
<div
ref={ref}
className={cn('font-semibold leading-tight text-foreground', className)}
{...props}
/>
));
CardTitle.displayName = 'CardTitle';
);
}
const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
function CardDescription({ className, ref, ...props }) {
return (
<div
ref={ref}
className={cn('text-sm font-medium leading-relaxed text-muted-foreground', className)}
{...props}
/>
));
CardDescription.displayName = 'CardDescription';
);
}
const CardContent = React.forwardRef(({ className, ...props }, ref) => (
function CardContent({ className, ref, ...props }) {
return (
<div
ref={ref}
className={cn('p-6 pt-0', className)}
{...props}
/>
));
CardContent.displayName = 'CardContent';
);
}
const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
function CardFooter({ className, ref, ...props }) {
return (
<div
ref={ref}
className={cn('flex items-center p-6 pt-0', className)}
{...props}
/>
));
CardFooter.displayName = 'CardFooter';
);
}
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

8
client/components/ui/checkbox.jsx
View File

@ -1,9 +1,9 @@
import * as React from 'react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { Check } from 'lucide-react';
import { cn } from '@/lib/utils';
const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
function Checkbox({ className, ref, ...props }) {
return (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
@ -18,7 +18,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
));
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
);
}
export { Checkbox };

9
client/components/ui/collapsible.jsx
View File

@ -1,17 +1,16 @@
import * as React from 'react';
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
const Collapsible = CollapsiblePrimitive.Root;
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
const CollapsibleContent = React.forwardRef(({ className, ...props }, ref) => (
function CollapsibleContent({ ref, ...props }) {
return (
<CollapsiblePrimitive.Content
ref={ref}
className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
{...props}
/>
));
CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName;
);
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent };

43
client/components/ui/dialog.jsx
View File

@ -1,4 +1,3 @@
import * as React from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { X } from 'lucide-react';
import { cn } from '@/lib/utils';
@ -8,7 +7,8 @@ const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
function DialogOverlay({ className, ref, ...props }) {
return (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
@ -17,10 +17,11 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
);
}
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
function DialogContent({ className, children, ref, ...props }) {
return (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
@ -40,42 +41,46 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;
);
}
const DialogHeader = ({ className, ...props }) => (
function DialogHeader({ className, ...props }) {
return (
<div
className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
{...props}
/>
);
DialogHeader.displayName = 'DialogHeader';
);
}
const DialogFooter = ({ className, ...props }) => (
function DialogFooter({ className, ...props }) {
return (
<div
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
{...props}
/>
);
DialogFooter.displayName = 'DialogFooter';
);
}
const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
function DialogTitle({ className, ref, ...props }) {
return (
<DialogPrimitive.Title
ref={ref}
className={cn('text-lg font-semibold leading-none tracking-tight', className)}
{...props}
/>
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
);
}
const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
function DialogDescription({ className, ref, ...props }) {
return (
<DialogPrimitive.Description
ref={ref}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
);
}
export {
Dialog,

6
client/components/ui/input.jsx
View File

@ -1,7 +1,6 @@
import * as React from 'react';
import { cn } from '@/lib/utils';
const Input = React.forwardRef(({ className, type, ...props }, ref) => {
function Input({ className, type, ref, ...props }) {
return (
<input
type={type}
@ -13,7 +12,6 @@ const Input = React.forwardRef(({ className, type, ...props }, ref) => {
{...props}
/>
);
});
Input.displayName = 'Input';
}
export { Input };

8
client/components/ui/label.jsx
View File

@ -1,4 +1,3 @@
import * as React from 'react';
import * as LabelPrimitive from '@radix-ui/react-label';
import { cva } from 'class-variance-authority';
import { cn } from '@/lib/utils';
@ -7,13 +6,14 @@ const labelVariants = cva(
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
);
const Label = React.forwardRef(({ className, ...props }, ref) => (
function Label({ className, ref, ...props }) {
return (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
));
Label.displayName = LabelPrimitive.Root.displayName;
);
}
export { Label };

50
client/components/ui/select.jsx
View File

@ -1,4 +1,3 @@
import * as React from 'react';
import * as SelectPrimitive from '@radix-ui/react-select';
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
import { cn } from '@/lib/utils';
@ -7,7 +6,8 @@ const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
function SelectTrigger({ className, children, ref, ...props }) {
return (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
@ -23,10 +23,11 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
<ChevronDown className="h-4 w-4 text-muted-foreground" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
);
}
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
function SelectScrollUpButton({ className, ref, ...props }) {
return (
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn('flex cursor-default items-center justify-center py-1', className)}
@ -34,10 +35,11 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) =>
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
));
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
);
}
const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
function SelectScrollDownButton({ className, ref, ...props }) {
return (
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn('flex cursor-default items-center justify-center py-1', className)}
@ -45,10 +47,11 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>
));
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
);
}
const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (
function SelectContent({ className, children, position = 'popper', ref, ...props }) {
return (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
@ -76,19 +79,21 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
));
SelectContent.displayName = SelectPrimitive.Content.displayName;
);
}
const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
function SelectLabel({ className, ref, ...props }) {
return (
<SelectPrimitive.Label
ref={ref}
className={cn('px-2 py-1.5 text-sm font-semibold', className)}
{...props}
/>
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;
);
}
const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
function SelectItem({ className, children, ref, ...props }) {
return (
<SelectPrimitive.Item
ref={ref}
className={cn(
@ -105,18 +110,19 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
);
}
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
function SelectSeparator({ className, ref, ...props }) {
return (
<SelectPrimitive.Separator
ref={ref}
className={cn('-mx-1 my-1 h-px bg-muted', className)}
role="separator"
{...props}
/>
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
);
}
export {
Select,

10
client/components/ui/separator.jsx
View File

@ -1,9 +1,8 @@
import * as React from 'react';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import { cn } from '@/lib/utils';
const Separator = React.forwardRef(
({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
function Separator({ className, orientation = 'horizontal', decorative = true, ref, ...props }) {
return (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
@ -15,8 +14,7 @@ const Separator = React.forwardRef(
)}
{...props}
/>
)
);
Separator.displayName = SeparatorPrimitive.Root.displayName;
);
}
export { Separator };

58
client/components/ui/table.jsx
View File

@ -1,8 +1,7 @@
import * as React from 'react';
import { cn } from '@/lib/utils';
const Table = React.forwardRef(({ className, ...props }, ref) => (
function Table({ className, ref, ...props }) {
return (
<div className="relative w-full overflow-auto">
<table
ref={ref}
@ -14,10 +13,11 @@ const Table = React.forwardRef(({ className, ...props }, ref) => (
{...props}
/>
</div>
));
Table.displayName = 'Table';
);
}
const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
function TableHeader({ className, ref, ...props }) {
return (
<thead
ref={ref}
className={cn(
@ -26,10 +26,11 @@ const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
TableHeader.displayName = 'TableHeader';
);
}
const TableBody = React.forwardRef(({ className, ...props }, ref) => (
function TableBody({ className, ref, ...props }) {
return (
<tbody
ref={ref}
className={cn(
@ -38,10 +39,11 @@ const TableBody = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
TableBody.displayName = 'TableBody';
);
}
const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
function TableFooter({ className, ref, ...props }) {
return (
<tfoot
ref={ref}
className={cn(
@ -51,10 +53,11 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
TableFooter.displayName = 'TableFooter';
);
}
const TableRow = React.forwardRef(({ className, ...props }, ref) => (
function TableRow({ className, ref, ...props }) {
return (
<tr
ref={ref}
className={cn(
@ -66,10 +69,11 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
TableRow.displayName = 'TableRow';
);
}
const TableHead = React.forwardRef(({ className, ...props }, ref) => (
function TableHead({ className, ref, ...props }) {
return (
<th
ref={ref}
className={cn(
@ -82,10 +86,11 @@ const TableHead = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
TableHead.displayName = 'TableHead';
);
}
const TableCell = React.forwardRef(({ className, ...props }, ref) => (
function TableCell({ className, ref, ...props }) {
return (
<td
ref={ref}
className={cn(
@ -97,10 +102,11 @@ const TableCell = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
TableCell.displayName = 'TableCell';
);
}
const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
function TableCaption({ className, ref, ...props }) {
return (
<caption
ref={ref}
className={cn(
@ -109,8 +115,8 @@ const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
TableCaption.displayName = 'TableCaption';
);
}
export {
Table,

22
client/components/ui/tabs.jsx
View File

@ -1,10 +1,10 @@
import * as React from 'react';
import * as TabsPrimitive from '@radix-ui/react-tabs';
import { cn } from '@/lib/utils';
const Tabs = TabsPrimitive.Root;
const TabsList = React.forwardRef(({ className, ...props }, ref) => (
function TabsList({ className, ref, ...props }) {
return (
<TabsPrimitive.List
ref={ref}
className={cn(
@ -13,10 +13,11 @@ const TabsList = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
TabsList.displayName = TabsPrimitive.List.displayName;
);
}
const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
function TabsTrigger({ className, ref, ...props }) {
return (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
@ -25,10 +26,11 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
);
}
const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
function TabsContent({ className, ref, ...props }) {
return (
<TabsPrimitive.Content
ref={ref}
className={cn(
@ -37,7 +39,7 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
)}
{...props}
/>
));
TabsContent.displayName = TabsPrimitive.Content.displayName;
);
}
export { Tabs, TabsList, TabsTrigger, TabsContent };

15
client/components/ui/theme-toggle.jsx
View File

@ -1,4 +1,3 @@
import * as React from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { Sun, Moon } from 'lucide-react';
import { cn } from '@/lib/utils';
@ -9,7 +8,8 @@ import { useTheme } from '@/contexts/ThemeContext';
const DropdownMenu = DropdownMenuPrimitive.Root;
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 6, ...props }, ref) => (
function DropdownMenuContent({ className, sideOffset = 6, ref, ...props }) {
return (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
@ -25,10 +25,11 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 6, ...pr
{...props}
/>
</DropdownMenuPrimitive.Portal>
));
DropdownMenuContent.displayName = 'DropdownMenuContent';
);
}
const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
function DropdownMenuItem({ className, inset, ref, ...props }) {
return (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
@ -40,8 +41,8 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref)
)}
{...props}
/>
));
DropdownMenuItem.displayName = 'DropdownMenuItem';
);
}
/* ── Theme options config ───────────────────────────────────── */

8
client/components/ui/tooltip.jsx
View File

@ -1,4 +1,3 @@
import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { cn } from '@/lib/utils';
@ -6,7 +5,8 @@ const TooltipProvider = TooltipPrimitive.Provider;
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
function TooltipContent({ className, sideOffset = 4, ref, ...props }) {
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
ref={ref}
@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }
{...props}
/>
</TooltipPrimitive.Portal>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
);
}
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };