Skip to content

Commit bf62497

Browse files
tnyleatnylea
committed
Adding component updates recommended by ShadCN
1 parent a548ffb commit bf62497

23 files changed

+2170
-1495
lines changed

‎resources/css/app.css‎

Lines changed: 67 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
@custom-variant dark (&:is(.dark *));
88

99
@theme {
10-
--font-sans:
11-
'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
10+
--font-sans: Figtree, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
1211

1312
--radius-lg: var(--radius);
1413
--radius-md: calc(var(--radius) - 2px);
@@ -48,7 +47,7 @@
4847
--color-chart-4: var(--chart-4);
4948
--color-chart-5: var(--chart-5);
5049

51-
--color-sidebar: var(--sidebar-background);
50+
--color-sidebar: var(--sidebar);
5251
--color-sidebar-foreground: var(--sidebar-foreground);
5352
--color-sidebar-primary: var(--sidebar-primary);
5453
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
@@ -77,74 +76,74 @@
7776
}
7877

7978
:root {
80-
--background: hsl(0, 0%, 100%);
81-
--foreground: hsl(0, 0%, 3.9%);
82-
--card: hsl(0, 0%, 100%);
83-
--card-foreground: hsl(0, 0%, 3.9%);
84-
--popover: hsl(0, 0%, 100%);
85-
--popover-foreground: hsl(0, 0%, 3.9%);
86-
--primary: hsl(0, 0%, 9%);
87-
--primary-foreground: hsl(0, 0%, 98%);
88-
--secondary: hsl(0, 0%, 96.1%);
89-
--secondary-foreground: hsl(0, 0%, 9%);
90-
--muted: hsl(0, 0%, 96.1%);
91-
--muted-foreground: hsl(0, 0%, 45.1%);
92-
--accent: hsl(0, 0%, 96.1%);
93-
--accent-foreground: hsl(0, 0%, 9%);
94-
--destructive: hsl(0, 84.2%, 60.2%);
95-
--destructive-foreground: hsl(0, 0%, 98%);
96-
--border: hsl(0, 0%, 92.8%);
97-
--input: hsl(0, 0%, 89.8%);
98-
--ring: hsl(0, 0%, 3.9%);
99-
--chart-1: hsl(12, 76%, 61%);
100-
--chart-2: hsl(173, 58%, 39%);
101-
--chart-3: hsl(197, 37%, 24%);
102-
--chart-4: hsl(43, 74%, 66%);
103-
--chart-5: hsl(27, 87%, 67%);
104-
--radius: 0.5rem;
105-
--sidebar-background: hsl(0, 0%, 98%);
106-
--sidebar-foreground: hsl(240, 5.3%, 30%);
107-
--sidebar-primary: hsl(0, 0%, 10%);
108-
--sidebar-primary-foreground: hsl(0, 0%, 98%);
109-
--sidebar-accent: hsl(0, 0%, 94%);
110-
--sidebar-accent-foreground: hsl(0, 0%, 30%);
111-
--sidebar-border: hsl(0, 0%, 91%);
112-
--sidebar-ring: hsl(217.2, 91.2%, 59.8%);
79+
--background: oklch(1 0 0);
80+
--foreground: oklch(0.145 0 0);
81+
--card: oklch(1 0 0);
82+
--card-foreground: oklch(0.145 0 0);
83+
--popover: oklch(1 0 0);
84+
--popover-foreground: oklch(0.145 0 0);
85+
--primary: oklch(0.205 0 0);
86+
--primary-foreground: oklch(0.985 0 0);
87+
--secondary: oklch(0.97 0 0);
88+
--secondary-foreground: oklch(0.205 0 0);
89+
--muted: oklch(0.97 0 0);
90+
--muted-foreground: oklch(0.556 0 0);
91+
--accent: oklch(0.97 0 0);
92+
--accent-foreground: oklch(0.205 0 0);
93+
--destructive: oklch(0.577 0.245 27.325);
94+
--destructive-foreground: oklch(0.577 0.245 27.325);
95+
--border: oklch(0.922 0 0);
96+
--input: oklch(0.922 0 0);
97+
--ring: oklch(0.87 0 0);
98+
--chart-1: oklch(0.646 0.222 41.116);
99+
--chart-2: oklch(0.6 0.118 184.704);
100+
--chart-3: oklch(0.398 0.07 227.392);
101+
--chart-4: oklch(0.828 0.189 84.429);
102+
--chart-5: oklch(0.769 0.188 70.08);
103+
--radius: 0.625rem;
104+
--sidebar: oklch(0.985 0 0);
105+
--sidebar-foreground: oklch(0.145 0 0);
106+
--sidebar-primary: oklch(0.205 0 0);
107+
--sidebar-primary-foreground: oklch(0.985 0 0);
108+
--sidebar-accent: oklch(0.97 0 0);
109+
--sidebar-accent-foreground: oklch(0.205 0 0);
110+
--sidebar-border: oklch(0.922 0 0);
111+
--sidebar-ring: oklch(0.87 0 0);
113112
}
114113

115114
.dark {
116-
--background: hsl(0, 0%, 3.9%);
117-
--foreground: hsl(0, 0%, 98%);
118-
--card: hsl(0, 0%, 3.9%);
119-
--card-foreground: hsl(0, 0%, 98%);
120-
--popover: hsl(0, 0%, 3.9%);
121-
--popover-foreground: hsl(0, 0%, 98%);
122-
--primary: hsl(0, 0%, 98%);
123-
--primary-foreground: hsl(0, 0%, 9%);
124-
--secondary: hsl(0, 0%, 14.9%);
125-
--secondary-foreground: hsl(0, 0%, 98%);
126-
--muted: hsl(0, 0%, 6.9%);
127-
--muted-foreground: hsl(0, 0%, 63.9%);
128-
--accent: hsl(0, 0%, 14.9%);
129-
--accent-foreground: hsl(0, 0%, 98%);
130-
--destructive: hsl(0, 84%, 60%);
131-
--destructive-foreground: hsl(0, 0%, 98%);
132-
--border: hsl(0, 0%, 14.9%);
133-
--input: hsl(0, 0%, 14.9%);
134-
--ring: hsl(0, 0%, 83.1%);
135-
--chart-1: hsl(220, 70%, 50%);
136-
--chart-2: hsl(160, 60%, 45%);
137-
--chart-3: hsl(30, 80%, 55%);
138-
--chart-4: hsl(280, 65%, 60%);
139-
--chart-5: hsl(340, 75%, 55%);
140-
--sidebar-background: hsl(0, 0%, 7%);
141-
--sidebar-foreground: hsl(0, 0%, 80%);
142-
--sidebar-primary: hsl(360, 100%, 100%);
143-
--sidebar-primary-foreground: hsl(0, 0%, 100%);
144-
--sidebar-accent: hsl(0, 0%, 15.9%);
145-
--sidebar-accent-foreground: hsl(240, 4.8%, 95.9%);
146-
--sidebar-border: hsl(0, 0%, 15.9%);
147-
--sidebar-ring: hsl(217.2, 91.2%, 59.8%);
115+
--background: oklch(0.145 0 0);
116+
--foreground: oklch(0.985 0 0);
117+
--card: oklch(0.145 0 0);
118+
--card-foreground: oklch(0.985 0 0);
119+
--popover: oklch(0.145 0 0);
120+
--popover-foreground: oklch(0.985 0 0);
121+
--primary: oklch(0.985 0 0);
122+
--primary-foreground: oklch(0.205 0 0);
123+
--secondary: oklch(0.269 0 0);
124+
--secondary-foreground: oklch(0.985 0 0);
125+
--muted: oklch(0.269 0 0);
126+
--muted-foreground: oklch(0.708 0 0);
127+
--accent: oklch(0.269 0 0);
128+
--accent-foreground: oklch(0.985 0 0);
129+
--destructive: oklch(0.396 0.141 25.723);
130+
--destructive-foreground: oklch(0.637 0.237 25.331);
131+
--border: oklch(0.269 0 0);
132+
--input: oklch(0.269 0 0);
133+
--ring: oklch(0.439 0 0);
134+
--chart-1: oklch(0.488 0.243 264.376);
135+
--chart-2: oklch(0.696 0.17 162.48);
136+
--chart-3: oklch(0.769 0.188 70.08);
137+
--chart-4: oklch(0.627 0.265 303.9);
138+
--chart-5: oklch(0.645 0.246 16.439);
139+
--sidebar: oklch(0.205 0 0);
140+
--sidebar-foreground: oklch(0.985 0 0);
141+
--sidebar-primary: oklch(0.985 0 0);
142+
--sidebar-primary-foreground: oklch(0.985 0 0);
143+
--sidebar-accent: oklch(0.269 0 0);
144+
--sidebar-accent-foreground: oklch(0.985 0 0);
145+
--sidebar-border: oklch(0.269 0 0);
146+
--sidebar-ring: oklch(0.439 0 0);
148147
}
149148

150149
@layer base {

‎resources/js/components/ui/alert.tsx‎

Lines changed: 58 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,66 @@
1-
import { cva, type VariantProps } from 'class-variance-authority';
2-
import * as React from 'react';
1+
import * as React from "react"
2+
import { cva, type VariantProps } from "class-variance-authority"
33

4-
import { cn } from '@/lib/utils';
4+
import { cn } from "@/lib/utils"
55

66
const alertVariants = cva(
7-
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
8-
{
9-
variants: {
10-
variant: {
11-
default: 'bg-background text-foreground',
12-
destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
13-
},
14-
},
15-
defaultVariants: {
16-
variant: 'default',
17-
},
7+
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
8+
{
9+
variants: {
10+
variant: {
11+
default: "bg-background text-foreground",
12+
destructive:
13+
"text-destructive-foreground [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80",
14+
},
1815
},
19-
);
16+
defaultVariants: {
17+
variant: "default",
18+
},
19+
}
20+
)
2021

21-
const Alert = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>>(
22-
({ className, variant, ...props }, ref) => <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />,
23-
);
24-
Alert.displayName = 'Alert';
22+
function Alert({
23+
className,
24+
variant,
25+
...props
26+
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
27+
return (
28+
<div
29+
data-slot="alert"
30+
role="alert"
31+
className={cn(alertVariants({ variant }), className)}
32+
{...props}
33+
/>
34+
)
35+
}
2536

26-
const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
27-
<h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
28-
));
29-
AlertTitle.displayName = 'AlertTitle';
37+
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
38+
return (
39+
<div
40+
data-slot="alert-title"
41+
className={cn(
42+
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
43+
className
44+
)}
45+
{...props}
46+
/>
47+
)
48+
}
3049

31-
const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
32-
<div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
33-
));
34-
AlertDescription.displayName = 'AlertDescription';
50+
function AlertDescription({
51+
className,
52+
...props
53+
}: React.ComponentProps<"div">) {
54+
return (
55+
<div
56+
data-slot="alert-description"
57+
className={cn(
58+
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
59+
className
60+
)}
61+
{...props}
62+
/>
63+
)
64+
}
3565

36-
export { Alert, AlertDescription, AlertTitle };
66+
export { Alert, AlertTitle, AlertDescription }

‎resources/js/components/ui/avatar.tsx‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,51 @@
1-
import * as AvatarPrimitive from '@radix-ui/react-avatar';
2-
import * as React from 'react';
1+
import * as React from "react"
2+
import * as AvatarPrimitive from "@radix-ui/react-avatar"
33

4-
import { cn } from '@/lib/utils';
4+
import { cn } from "@/lib/utils"
55

6-
const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>>(
7-
({ className, ...props }, ref) => (
8-
<AvatarPrimitive.Root ref={ref} className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)} {...props} />
9-
),
10-
);
11-
Avatar.displayName = AvatarPrimitive.Root.displayName;
6+
function Avatar({
7+
className,
8+
...props
9+
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
10+
return (
11+
<AvatarPrimitive.Root
12+
data-slot="avatar"
13+
className={cn(
14+
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
15+
className
16+
)}
17+
{...props}
18+
/>
19+
)
20+
}
1221

13-
const AvatarImage = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Image>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>>(
14-
({ className, ...props }, ref) => <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />,
15-
);
16-
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
22+
function AvatarImage({
23+
className,
24+
...props
25+
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
26+
return (
27+
<AvatarPrimitive.Image
28+
data-slot="avatar-image"
29+
className={cn("aspect-square size-full", className)}
30+
{...props}
31+
/>
32+
)
33+
}
1734

18-
const AvatarFallback = React.forwardRef<
19-
React.ElementRef<typeof AvatarPrimitive.Fallback>,
20-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
21-
>(({ className, ...props }, ref) => (
35+
function AvatarFallback({
36+
className,
37+
...props
38+
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
39+
return (
2240
<AvatarPrimitive.Fallback
23-
ref={ref}
24-
className={cn('flex h-full w-full items-center justify-center rounded-full bg-sidebar-primary text-sidebar-primary-foreground', className)}
25-
{...props}
41+
data-slot="avatar-fallback"
42+
className={cn(
43+
"bg-muted flex size-full items-center justify-center rounded-full",
44+
className
45+
)}
46+
{...props}
2647
/>
27-
));
28-
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
48+
)
49+
}
2950

30-
export { Avatar, AvatarFallback, AvatarImage };
51+
export { Avatar, AvatarImage, AvatarFallback }

‎resources/js/components/ui/badge.tsx‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,46 @@
1-
import { cva, type VariantProps } from 'class-variance-authority';
2-
import * as React from 'react';
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
34

4-
import { cn } from '@/lib/utils';
5+
import { cn } from "@/lib/utils"
56

67
const badgeVariants = cva(
7-
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
8-
{
9-
variants: {
10-
variant: {
11-
default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
12-
secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
13-
destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
14-
outline: 'text-foreground',
15-
},
16-
},
17-
defaultVariants: {
18-
variant: 'default',
19-
},
8+
"inline-flex items-center justify-center rounded-md border 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-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-auto",
9+
{
10+
variants: {
11+
variant: {
12+
default:
13+
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
14+
secondary:
15+
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
16+
destructive:
17+
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
18+
outline:
19+
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
20+
},
2021
},
21-
);
22+
defaultVariants: {
23+
variant: "default",
24+
},
25+
}
26+
)
2227

23-
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
28+
function Badge({
29+
className,
30+
variant,
31+
asChild = false,
32+
...props
33+
}: React.ComponentProps<"span"> &
34+
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
35+
const Comp = asChild ? Slot : "span"
2436

25-
function Badge({ className, variant, ...props }: BadgeProps) {
26-
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
37+
return (
38+
<Comp
39+
data-slot="badge"
40+
className={cn(badgeVariants({ variant }), className)}
41+
{...props}
42+
/>
43+
)
2744
}
2845

29-
export { Badge, badgeVariants };
46+
export { Badge, badgeVariants }

0 commit comments

Comments
 (0)