Skip to content
/ laravel Public

Commit a2c00dd

Browse files
irsyadadlirsyadadl
committedMar 11, 2025·
bump vendor
·
v1.4.20v1.4.9
1 parent 70747b5 commit a2c00dd

25 files changed

+217
-876
lines changed
 

‎bun.lockb

1.08 KB
Binary file not shown.

‎composer.lock

+16-16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+9-9
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,31 @@
1010
},
1111
"devDependencies": {
1212
"@biomejs/biome": "^1.9.4",
13-
"@inertiajs/react": "^2.0.4",
13+
"@inertiajs/react": "^2.0.5",
1414
"@types/react": "^19.0.10",
1515
"@types/react-dom": "^19.0.4",
1616
"@vitejs/plugin-react": "^4.3.4",
17-
"autoprefixer": "^10.4.20",
18-
"axios": "^1.8.1",
17+
"autoprefixer": "^10.4.21",
18+
"axios": "^1.8.2",
1919
"husky": "^9.1.7",
2020
"laravel-vite-plugin": "^1.2.0",
21-
"tailwindcss": "^4.0.11",
21+
"tailwindcss": "^4.0.12",
2222
"typescript": "^5.8.2",
2323
"vite-plugin-watch": "^0.3.1"
2424
},
2525
"dependencies": {
26-
"@tailwindcss/vite": "^4.0.11",
27-
"@types/node": "^22.13.9",
26+
"@tailwindcss/vite": "^4.0.12",
27+
"@types/node": "^22.13.10",
2828
"clsx": "^2.1.1",
2929
"justd-icons": "^1.10.25",
30-
"motion": "^12.4.10",
30+
"motion": "^12.4.11",
3131
"react": "^19.0.0",
32-
"react-aria-components": "^1.7.0",
32+
"react-aria-components": "^1.7.1",
3333
"react-dom": "^19.0.0",
3434
"sonner": "^2.0.1",
3535
"tailwind-merge": "^3.0.2",
3636
"tailwind-variants": "^0.3.1",
3737
"tailwindcss-animate": "^1.0.7",
38-
"vite": "^6.2.0"
38+
"vite": "^6.2.1"
3939
}
4040
}

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

+6-8
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ import {
55
} from "react-aria-components"
66
import { tv } from "tailwind-variants"
77

8-
import { focusButtonStyles } from "./primitive"
9-
108
const buttonStyles = tv({
11-
extend: focusButtonStyles,
129
base: [
13-
"kbt32x relative inline-flex items-center justify-center gap-x-2 border font-medium",
10+
"outline-0 outline-offset-2 hover:no-underline focus-visible:outline-2 forced-colors:outline-[Highlight]",
11+
"relative inline-flex items-center justify-center gap-x-2 border font-medium",
1412
"forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]",
1513
"*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-1 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:text-current/60 pressed:*:data-[slot=icon]:text-current *:data-[slot=icon]:transition hover:*:data-[slot=icon]:text-current/90",
1614
"*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:my-1 *:data-[slot=avatar]:*:size-4 *:data-[slot=avatar]:size-4 *:data-[slot=avatar]:shrink-0",
@@ -22,12 +20,12 @@ const buttonStyles = tv({
2220
variants: {
2321
intent: {
2422
primary: [
25-
"outline-primary [--btn-bg:theme(--color-primary/95%)] [--btn-border:var(--color-primary)] [--btn-fg:var(--color-primary-fg)] dark:[--btn-bg:theme(--color-primary/90%)]",
23+
"outline-ring [--btn-bg:theme(--color-primary/95%)] [--btn-border:var(--color-primary)] [--btn-fg:var(--color-primary-fg)] dark:[--btn-bg:theme(--color-primary/90%)]",
2624
"[--btn-bg-hovered:theme(--color-primary/87%)] [--btn-border-hovered:theme(--color-primary/87%)] dark:[--btn-bg-hovered:theme(--color-primary)] dark:[--btn-border-hovered:theme(--color-primary)]",
2725
"inset-shadow-primary-fg/20 pressed:inset-shadow-primary-fg/20 hover:inset-shadow-primary-fg/25",
2826
],
2927
secondary: [
30-
"[--btn-bg:theme(--color-secondary/95%)] [--btn-border:theme(--color-secondary-fg/10%)] [--btn-fg:var(--color-secondary-fg)] dark:[--btn-bg:theme(--color-secondary/85%)] dark:[--btn-border:theme(--color-secondary-fg/7%)]",
28+
"outline-ring [--btn-bg:theme(--color-secondary/95%)] [--btn-border:theme(--color-secondary-fg/10%)] [--btn-fg:var(--color-secondary-fg)] dark:[--btn-bg:theme(--color-secondary/85%)] dark:[--btn-border:theme(--color-secondary-fg/7%)]",
3129
"[--btn-bg-hovered:color-mix(in_oklab,var(--color-secondary)_60%,white_20%)] dark:[--btn-bg-hovered:color-mix(in_oklab,var(--color-secondary)_96%,white_4%)]",
3230
"inset-shadow-white/15 pressed:inset-shadow-white/15 hover:inset-shadow-white/20",
3331
],
@@ -47,10 +45,10 @@ const buttonStyles = tv({
4745
"inset-shadow-danger-fg/30 pressed:inset-shadow-danger-fg/30 hover:inset-shadow-danger-fg/35",
4846
],
4947
outline: [
50-
"inset-ring-0 inset-shadow-none pressed:bg-secondary [--btn-border:var(--color-border)] hover:bg-secondary",
48+
"inset-ring-0 inset-shadow-none pressed:bg-secondary outline-ring [--btn-border:var(--color-border)] hover:bg-secondary",
5149
],
5250
plain:
53-
"inset-ring-0 inset-shadow-none pressed:bg-secondary [--btn-border:transparent] hover:bg-secondary",
51+
"inset-ring-0 inset-shadow-none pressed:bg-secondary outline-ring [--btn-border:transparent] hover:bg-secondary",
5452
},
5553
size: {
5654
"extra-small":

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { cn } from "@/utils/classes"
1+
import { twMerge } from "tailwind-merge"
22
import { Heading } from "./heading"
33

44
const Card = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
55
return (
66
<div
77
data-slot="card"
8-
className={cn(
9-
"rounded-lg border bg-bg text-fg shadow-xs has-[table]:overflow-hidden **:data-[slot=table-header]:bg-muted/50 has-[table]:**:data-[slot=card-footer]:border-t **:[table]:overflow-hidden",
8+
className={twMerge(
109
className,
10+
"rounded-lg border bg-bg text-fg shadow-xs has-[table]:overflow-hidden **:data-[slot=table-header]:bg-muted/50 has-[table]:**:data-[slot=card-footer]:border-t **:[table]:overflow-hidden",
1111
)}
1212
{...props}
1313
/>
@@ -22,7 +22,7 @@ interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
2222
const CardHeader = ({ className, title, description, children, ...props }: HeaderProps) => (
2323
<div
2424
data-slot="card-header"
25-
className={cn("flex flex-col gap-y-1 px-6 py-5", className)}
25+
className={twMerge("flex flex-col gap-y-1 px-6 py-5", className)}
2626
{...props}
2727
>
2828
{title && <CardTitle>{title}</CardTitle>}
@@ -36,7 +36,7 @@ const CardTitle = ({ className, level = 3, ...props }: React.ComponentProps<type
3636
<Heading
3737
data-slot="card-title"
3838
level={level}
39-
className={cn("font-semibold leading-none tracking-tight sm:leading-6", className)}
39+
className={twMerge("font-semibold leading-none tracking-tight sm:leading-6", className)}
4040
{...props}
4141
/>
4242
)
@@ -47,7 +47,7 @@ const CardDescription = ({ className, ...props }: React.HTMLAttributes<HTMLDivEl
4747
<div
4848
{...props}
4949
data-slot="description"
50-
className={cn("text-muted-fg text-sm", className)}
50+
className={twMerge("text-muted-fg text-sm", className)}
5151
{...props}
5252
/>
5353
)
@@ -57,7 +57,7 @@ const CardContent = ({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
5757
return (
5858
<div
5959
data-slot="card-content"
60-
className={cn(
60+
className={twMerge(
6161
"px-6 pb-6 has-[table]:border-t has-[[data-slot=table-header]]:bg-muted/40 has-[table]:p-0 **:data-[slot=table-cell]:px-6 **:data-[slot=table-column]:px-6 [&:has(table)+[data-slot=card-footer]]:py-5",
6262
className,
6363
)}
@@ -70,7 +70,7 @@ const CardFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement
7070
return (
7171
<div
7272
data-slot="card-footer"
73-
className={cn("flex items-center p-6 pt-0", className)}
73+
className={twMerge("flex items-center p-6 pt-0", className)}
7474
{...props}
7575
/>
7676
)

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
} from "react-aria-components"
1212
import { tv } from "tailwind-variants"
1313

14-
import { cn } from "@/utils/classes"
14+
import { twMerge } from "tailwind-merge"
1515
import { Description, FieldError, Label } from "./field"
1616
import { composeTailwindRenderProps } from "./primitive"
1717

@@ -80,7 +80,9 @@ const Checkbox = ({ className, ...props }: CheckboxProps) => {
8080
)}
8181
>
8282
{({ isSelected, isIndeterminate, ...renderProps }) => (
83-
<div className={cn("flex gap-x-2", props.description ? "items-start" : "items-center")}>
83+
<div
84+
className={twMerge("flex gap-x-2", props.description ? "items-start" : "items-center")}
85+
>
8486
<div
8587
className={boxStyles({
8688
...renderProps,
@@ -93,7 +95,7 @@ const Checkbox = ({ className, ...props }: CheckboxProps) => {
9395
<div className="flex flex-col gap-1">
9496
<>
9597
{props.label ? (
96-
<Label className={cn(props.description && "font-normal text-sm/4")}>
98+
<Label className={twMerge(props.description && "font-normal text-sm/4")}>
9799
{props.label}
98100
</Label>
99101
) : (

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

+12-17
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
1-
import { tv } from "tailwind-variants"
2-
3-
const containerStyles = tv({
4-
base: "@container mx-auto w-full max-w-7xl lg:max-w-(--breakpoint-xl) 2xl:max-w-(--breakpoint-2xl)",
5-
variants: {
6-
intent: {
7-
constrained: "sm:px-6 lg:px-8",
8-
"padded-content": "px-4 sm:px-6 lg:px-8",
9-
},
10-
},
11-
defaultVariants: {
12-
intent: "padded-content",
13-
},
14-
})
1+
import { twMerge } from "tailwind-merge"
152

163
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
17-
intent?: "constrained" | "padded-content"
4+
constrained?: boolean
185
ref?: React.Ref<HTMLDivElement>
196
}
207

21-
const Container = ({ className, intent, ref, ...props }: ContainerProps) => (
22-
<div className={containerStyles({ intent, className })} {...props} ref={ref} />
8+
const Container = ({ className, constrained = false, ref, ...props }: ContainerProps) => (
9+
<div
10+
className={twMerge(
11+
"mx-auto w-full max-w-7xl lg:max-w-(--breakpoint-xl) 2xl:max-w-(--breakpoint-2xl)",
12+
constrained ? "sm:px-6 lg:px-8" : "px-4 sm:px-6 lg:px-8",
13+
className,
14+
)}
15+
{...props}
16+
ref={ref}
17+
/>
2318
)
2419

2520
export type { ContainerProps }

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

+58-41
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,27 @@ import {
88
Heading,
99
Text,
1010
} from "react-aria-components"
11-
import { tv } from "tailwind-variants"
1211

12+
import { composeTailwindRenderProps } from "@/components/ui/primitive"
1313
import { useMediaQuery } from "@/utils/use-media-query"
14+
import { twJoin, twMerge } from "tailwind-merge"
1415
import { Button, type ButtonProps } from "./button"
1516

16-
const dialogStyles = tv({
17-
slots: {
18-
root: [
19-
"peer/dialog group/dialog relative flex max-h-[inherit] flex-col overflow-hidden outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5",
20-
],
21-
header:
22-
"relative flex flex-col gap-0.5 p-4 sm:gap-1 sm:p-6 [&[data-slot=dialog-header]:has(+[data-slot=dialog-footer])]:pb-0",
23-
description: "text-muted-fg text-sm",
24-
body: [
25-
"isolate flex flex-1 flex-col overflow-auto px-4 py-1 sm:px-6",
26-
"max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]",
27-
],
28-
footer:
29-
"isolate mt-auto flex flex-col-reverse justify-between gap-3 p-4 pt-3 sm:flex-row sm:p-6 sm:pt-5",
30-
closeIndicator:
31-
"close absolute top-1 right-1 z-50 grid size-8 place-content-center rounded-xl hover:bg-secondary data-focused:bg-secondary data-focused:outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-primary sm:top-2 sm:right-2 sm:size-7 sm:rounded-md",
32-
},
33-
})
34-
35-
const { root, header, description, body, footer, closeIndicator } = dialogStyles()
36-
3717
const Dialog = ({
3818
role = "dialog",
3919
className,
4020
...props
4121
}: React.ComponentProps<typeof DialogPrimitive>) => {
42-
return <DialogPrimitive role={role} className={root({ className })} {...props} />
22+
return (
23+
<DialogPrimitive
24+
role={role}
25+
className={twMerge(
26+
"peer/dialog group/dialog relative flex max-h-[inherit] flex-col overflow-hidden outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5",
27+
className,
28+
)}
29+
{...props}
30+
/>
31+
)
4332
}
4433

4534
const Trigger = (props: React.ComponentProps<typeof ButtonPrimitive>) => (
@@ -74,26 +63,21 @@ const Header = ({ className, ...props }: DialogHeaderProps) => {
7463
}, [])
7564

7665
return (
77-
<div data-slot="dialog-header" ref={headerRef} className={header({ className })}>
66+
<div
67+
data-slot="dialog-header"
68+
ref={headerRef}
69+
className={twMerge(
70+
"relative flex flex-col gap-0.5 p-4 sm:gap-1 sm:p-6 [&[data-slot=dialog-header]:has(+[data-slot=dialog-footer])]:pb-0",
71+
className,
72+
)}
73+
>
7874
{props.title && <Title>{props.title}</Title>}
7975
{props.description && <Description>{props.description}</Description>}
8076
{!props.title && typeof props.children === "string" ? <Title {...props} /> : props.children}
8177
</div>
8278
)
8379
}
8480

85-
const titleStyles = tv({
86-
base: "flex flex-1 items-center text-fg",
87-
variants: {
88-
level: {
89-
1: "font-semibold text-lg sm:text-xl",
90-
2: "font-semibold text-lg sm:text-xl",
91-
3: "font-semibold text-base sm:text-lg",
92-
4: "font-semibold text-base",
93-
},
94-
},
95-
})
96-
9781
interface DialogTitleProps extends Omit<HeadingProps, "level"> {
9882
level?: 1 | 2 | 3 | 4
9983
ref?: React.Ref<HTMLHeadingElement>
@@ -103,19 +87,41 @@ const Title = ({ level = 2, className, ref, ...props }: DialogTitleProps) => (
10387
slot="title"
10488
level={level}
10589
ref={ref}
106-
className={titleStyles({ level, className })}
90+
className={twMerge(
91+
twJoin(
92+
"flex flex-1 items-center text-fg",
93+
level === 1 && "font-semibold text-lg sm:text-xl",
94+
level === 2 && "font-semibold text-lg sm:text-xl",
95+
level === 3 && "font-semibold text-base sm:text-lg",
96+
level === 4 && "font-semibold text-base",
97+
),
98+
className,
99+
)}
107100
{...props}
108101
/>
109102
)
110103

111104
type DialogDescriptionProps = React.ComponentProps<"div">
112105
const Description = ({ className, ref, ...props }: DialogDescriptionProps) => (
113-
<Text slot="description" className={description({ className })} ref={ref} {...props} />
106+
<Text
107+
slot="description"
108+
className={twMerge("text-muted-fg text-sm", className)}
109+
ref={ref}
110+
{...props}
111+
/>
114112
)
115113

116114
type DialogBodyProps = React.ComponentProps<"div">
117115
const Body = ({ className, ref, ...props }: DialogBodyProps) => (
118-
<div data-slot="dialog-body" ref={ref} className={body({ className })} {...props} />
116+
<div
117+
data-slot="dialog-body"
118+
ref={ref}
119+
className={twMerge(
120+
"isolate flex max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))] flex-1 flex-col overflow-auto px-4 py-1 sm:px-6",
121+
className,
122+
)}
123+
{...props}
124+
/>
119125
)
120126

121127
type DialogFooterProps = React.ComponentProps<"div">
@@ -144,7 +150,15 @@ const Footer = ({ className, ...props }: DialogFooterProps) => {
144150
}
145151
}, [])
146152
return (
147-
<div ref={footerRef} data-slot="dialog-footer" className={footer({ className })} {...props} />
153+
<div
154+
ref={footerRef}
155+
data-slot="dialog-footer"
156+
className={twMerge(
157+
"isolate mt-auto flex flex-col-reverse justify-between gap-3 p-4 pt-3 sm:flex-row sm:p-6 sm:pt-5",
158+
className,
159+
)}
160+
{...props}
161+
/>
148162
)
149163
}
150164

@@ -172,7 +186,10 @@ const CloseIndicator = ({ className, ...props }: CloseButtonIndicatorProps) => {
172186
{...(isMobile ? { autoFocus: true } : {})}
173187
aria-label="Close"
174188
slot="close"
175-
className={closeIndicator({ className })}
189+
className={composeTailwindRenderProps(
190+
className,
191+
"close absolute top-1 right-1 z-50 grid size-8 place-content-center rounded-xl hover:bg-secondary focus:bg-secondary focus:outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-primary sm:top-2 sm:right-2 sm:size-7 sm:rounded-md",
192+
)}
176193
>
177194
<IconX className="size-4" />
178195
</ButtonPrimitive>

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { cn } from "@/utils/classes"
21
import { IconCheck } from "justd-icons"
32
import type {
43
ListBoxItemProps,
@@ -15,6 +14,7 @@ import {
1514
Text,
1615
composeRenderProps,
1716
} from "react-aria-components"
17+
import { twMerge } from "tailwind-merge"
1818
import { tv } from "tailwind-variants"
1919
import { Keyboard } from "./keyboard"
2020

@@ -23,9 +23,9 @@ const dropdownItemStyles = tv({
2323
"col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] not-has-data-[slot=dropdown-item-details]:items-center has-data-[slot=dropdown-item-details]:**:data-[slot=checked-icon]:mt-[1.5px] supports-[grid-template-columns:subgrid]:grid-cols-subgrid",
2424
"group relative cursor-default select-none rounded-[calc(var(--radius-lg)-1px)] px-[calc(var(--spacing)*2.3)] py-[calc(var(--spacing)*1.3)] forced-color:text-[Highlight] text-base text-fg outline-0 forced-color-adjust-none sm:text-sm/6 forced-colors:text-[LinkText]",
2525
"**:data-[slot=avatar]:*:mr-2 **:data-[slot=avatar]:*:size-6 **:data-[slot=avatar]:mr-2 **:data-[slot=avatar]:size-6 sm:**:data-[slot=avatar]:*:size-5 sm:**:data-[slot=avatar]:size-5",
26-
"data-danger:**:data-[slot=icon]:text-danger/60 **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:data-[slot=icon]:text-muted-fg data-focused:data-danger:**:data-[slot=icon]:text-danger",
26+
"data-danger:**:data-[slot=icon]:text-danger/60 **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:data-[slot=icon]:text-muted-fg focus:data-danger:**:data-[slot=icon]:text-danger",
2727
"data-[slot=menu-radio]:*:data-[slot=icon]:size-3 *:data-[slot=icon]:mr-2",
28-
"forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focused:**:data-[slot=icon]:text-[Canvas] ",
28+
"forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-focus:**:data-[slot=icon]:text-[Canvas] ",
2929
"[&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:right-0",
3030
],
3131
variants: {
@@ -116,7 +116,7 @@ const DropdownItemDetails = ({
116116
{label && (
117117
<Text
118118
slot={slot ?? "label"}
119-
className={cn("font-medium sm:text-sm", classNames?.label)}
119+
className={twMerge("font-medium sm:text-sm", classNames?.label)}
120120
{...restProps}
121121
>
122122
{label}
@@ -125,7 +125,7 @@ const DropdownItemDetails = ({
125125
{description && (
126126
<Text
127127
slot={slot ?? "description"}
128-
className={cn("text-muted-fg text-xs", classNames?.description)}
128+
className={twMerge("text-muted-fg text-xs", classNames?.description)}
129129
{...restProps}
130130
>
131131
{description}
@@ -141,19 +141,19 @@ interface DropdownLabelProps extends TextProps {
141141
}
142142

143143
const DropdownLabel = ({ className, ref, ...props }: DropdownLabelProps) => (
144-
<Text slot="label" ref={ref} className={cn("col-start-2", className)} {...props} />
144+
<Text slot="label" ref={ref} className={twMerge("col-start-2", className)} {...props} />
145145
)
146146

147147
const DropdownSeparator = ({ className, ...props }: SeparatorProps) => (
148148
<Separator
149149
orientation="horizontal"
150-
className={cn("-mx-1 col-span-full my-1 h-px bg-border", className)}
150+
className={twMerge("-mx-1 col-span-full my-1 h-px bg-border", className)}
151151
{...props}
152152
/>
153153
)
154154

155155
const DropdownKeyboard = ({ className, ...props }: React.ComponentProps<typeof Keyboard>) => {
156-
return <Keyboard className={cn("absolute right-2 pl-2", className)} {...props} />
156+
return <Keyboard className={twMerge("absolute right-2 pl-2", className)} {...props} />
157157
}
158158

159159
/**

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ const Input = ({ className, ref, ...props }: InputProps) => {
121121
{...props}
122122
className={composeTailwindRenderProps(
123123
className,
124-
"w-full min-w-0 bg-transparent px-2.5 py-2 text-base text-fg placeholder-muted-fg outline-hidden data-focused:outline-hidden sm:text-sm/6 [&::-ms-reveal]:hidden [&::-webkit-search-cancel-button]:hidden",
124+
"w-full min-w-0 bg-transparent px-2.5 py-2 text-base text-fg placeholder-muted-fg outline-hidden focus:outline-hidden sm:text-sm/6 [&::-ms-reveal]:hidden [&::-webkit-search-cancel-button]:hidden",
125125
)}
126126
/>
127127
)

‎resources/js/components/ui/index.ts

-3
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,9 @@ export * from "./loader"
1616
export * from "./menu"
1717
export * from "./modal"
1818
export * from "./navbar"
19-
export * from "./pagination"
2019
export * from "./popover"
21-
export * from "./select"
2220
export * from "./separator"
2321
export * from "./sheet"
24-
export * from "./table"
2522
export * from "./text-field"
2623
export * from "./toast"
2724
export * from "./visually-hidden"

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

+13-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
11
import { Keyboard as KeyboardPrimitive } from "react-aria-components"
2-
import { tv } from "tailwind-variants"
3-
4-
const keyboardStyles = tv({
5-
slots: {
6-
base: "hidden text-current/70 group-hover:text-fg group-disabled:opacity-50 group-data-focused:text-fg group-data-focused:opacity-90 lg:inline-flex forced-colors:group-data-focused:text-[HighlightText]",
7-
kbd: "inline-grid min-h-5 min-w-[2ch] place-content-center rounded text-center font-sans text-[.75rem] uppercase",
8-
},
9-
})
10-
11-
const { base, kbd } = keyboardStyles()
2+
import { twMerge } from "tailwind-merge"
123

134
interface KeyboardProps extends React.HTMLAttributes<HTMLElement> {
145
keys: string | string[]
@@ -20,11 +11,21 @@ interface KeyboardProps extends React.HTMLAttributes<HTMLElement> {
2011

2112
const Keyboard = ({ keys, classNames, className, ...props }: KeyboardProps) => {
2213
return (
23-
<KeyboardPrimitive className={base({ className: classNames?.base ?? className })} {...props}>
14+
<KeyboardPrimitive
15+
className={twMerge(
16+
"hidden text-current/70 group-hover:text-fg group-focus:text-fg group-focus:opacity-90 group-disabled:opacity-50 lg:inline-flex forced-colors:group-focus:text-[HighlightText]",
17+
classNames?.base,
18+
)}
19+
{...props}
20+
>
2421
{(Array.isArray(keys) ? keys : keys.split("")).map((char, index) => (
2522
<kbd
2623
key={index}
27-
className={kbd({ className: index > 0 && char.length > 1 ? "pl-1" : classNames?.kbd })}
24+
className={twMerge(
25+
"hidden text-current/70 group-hover:text-fg group-focus:text-fg group-focus:opacity-90 group-disabled:opacity-50 lg:inline-flex forced-colors:group-focus:text-[HighlightText]",
26+
index > 0 && char.length > 1 && "pl-1",
27+
classNames?.kbd,
28+
)}
2829
>
2930
{char}
3031
</kbd>

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

+14-27
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,26 @@
1-
import {
2-
Link as LinkPrimitive,
3-
type LinkProps as LinkPrimitiveProps,
4-
composeRenderProps,
5-
} from "react-aria-components"
6-
import { tv } from "tailwind-variants"
7-
8-
import { focusButtonStyles } from "./primitive"
9-
10-
const linkStyles = tv({
11-
extend: focusButtonStyles,
12-
base: "transition-[color,_opacity] disabled:cursor-default disabled:opacity-60 forced-colors:disabled:text-[GrayText]",
13-
variants: {
14-
intent: {
15-
unstyled: "text-current",
16-
primary: "text-fg hover:underline",
17-
secondary: "text-muted-fg hover:text-secondary-fg",
18-
},
19-
},
20-
defaultVariants: {
21-
intent: "unstyled",
22-
},
23-
})
1+
import { composeTailwindRenderProps } from "@/components/ui/primitive"
2+
import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from "react-aria-components"
3+
import { twJoin } from "tailwind-merge"
244

255
interface LinkProps extends LinkPrimitiveProps {
266
intent?: "primary" | "secondary" | "unstyled"
277
ref?: React.RefObject<HTMLAnchorElement>
288
}
299

30-
const Link = ({ className, ref, ...props }: LinkProps) => {
10+
const Link = ({ className, ref, intent = "unstyled", ...props }: LinkProps) => {
3111
return (
3212
<LinkPrimitive
3313
ref={ref}
3414
{...props}
35-
className={composeRenderProps(className, (className, renderProps) =>
36-
linkStyles({ ...renderProps, intent: props.intent, className }),
15+
className={composeTailwindRenderProps(
16+
className,
17+
twJoin([
18+
"outline-0 outline-offset-2 transition-[color,_opacity] focus-visible:outline-2 focus-visible:outline-ring forced-colors:outline-[Highlight]",
19+
"disabled:cursor-default disabled:opacity-60 forced-colors:disabled:text-[GrayText]",
20+
intent === "unstyled" && "text-current",
21+
intent === "primary" && "text-primary hover:underline",
22+
intent === "secondary" && "text-secondary-fg hover:underline",
23+
]),
3724
)}
3825
>
3926
{(values) => (
@@ -44,4 +31,4 @@ const Link = ({ className, ref, ...props }: LinkProps) => {
4431
}
4532

4633
export type { LinkProps }
47-
export { Link, linkStyles }
34+
export { Link }

‎resources/js/components/ui/list-box.tsx

+10-11
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,16 @@ import {
99
composeRenderProps,
1010
} from "react-aria-components"
1111

12-
import { cn } from "@/utils/classes"
12+
import { composeTailwindRenderProps } from "@/components/ui/primitive"
13+
import { twMerge } from "tailwind-merge"
1314
import { DropdownItemDetails, DropdownLabel, DropdownSection, dropdownItemStyles } from "./dropdown"
1415

1516
const ListBox = <T extends object>({ className, ...props }: ListBoxProps<T>) => (
1617
<ListBoxPrimitive
1718
{...props}
18-
className={composeRenderProps(className, (className) =>
19-
cn(
20-
[
21-
"flex max-h-96 w-full min-w-56 flex-col gap-y-1 overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5",
22-
"grid grid-cols-[auto_1fr] overflow-auto *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1",
23-
],
24-
className,
25-
),
19+
className={composeTailwindRenderProps(
20+
className,
21+
"grid max-h-96 w-full min-w-56 grid-cols-[auto_1fr] flex-col gap-y-1 overflow-auto overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5 *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1",
2622
)}
2723
/>
2824
)
@@ -49,7 +45,7 @@ const ListBoxItem = <T extends object>({ children, className, ...props }: ListBo
4945
<>
5046
{allowsDragging && (
5147
<IconHamburger
52-
className={cn(
48+
className={twMerge(
5349
"size-4 shrink-0 text-muted-fg transition",
5450
isFocused && "text-fg",
5551
isDragging && "text-fg",
@@ -68,7 +64,10 @@ const ListBoxItem = <T extends object>({ children, className, ...props }: ListBo
6864
type ListBoxSectionProps = React.ComponentProps<typeof DropdownSection>
6965
const ListBoxSection = ({ className, ...props }: ListBoxSectionProps) => {
7066
return (
71-
<DropdownSection className={cn(className, "[&_.lbi:last-child]:-mb-1.5 gap-y-1")} {...props} />
67+
<DropdownSection
68+
className={twMerge("[&_.lbi:last-child]:-mb-1.5 gap-y-1", className)}
69+
{...props}
70+
/>
7271
)
7372
}
7473

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { cn } from "@/utils/classes"
21
import { IconLoader } from "justd-icons"
32
import { ProgressBar } from "react-aria-components"
3+
import { twMerge } from "tailwind-merge"
44
import type { VariantProps } from "tailwind-variants"
55
import { tv } from "tailwind-variants"
66

@@ -32,7 +32,7 @@ type LoaderVariantProps = VariantProps<typeof loaderStyles>
3232

3333
const Bars = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (
3434
<svg
35-
className={cn("size-4", className)}
35+
className={twMerge("size-4", className)}
3636
data-slot="icon"
3737
viewBox="0 0 135 140"
3838
xmlns="http://www.w3.org/2000/svg"
@@ -133,7 +133,7 @@ const Bars = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (
133133
)
134134
const Ring = (props: React.SVGProps<SVGSVGElement>) => <IconLoader {...props} />
135135
const Spin = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (
136-
<svg className={cn("size-4", className)} data-slot="icon" viewBox="0 0 2400 2400" {...props}>
136+
<svg className={twMerge("size-4", className)} data-slot="icon" viewBox="0 0 2400 2400" {...props}>
137137
<g strokeWidth="200" strokeLinecap="round" fill="none">
138138
<line x1="1200" y1="600" x2="1200" y2="100" />
139139
<line opacity="0.5" x1="1200" y1="2300" x2="1200" y2="1800" />
@@ -195,7 +195,7 @@ const Loader = ({ isIndeterminate = true, ref, ...props }: LoaderProps) => {
195195
className={loaderStyles({
196196
intent,
197197
size,
198-
className: cn([
198+
className: twMerge([
199199
["ring"].includes(variant) && "animate-spin",
200200
variant === "spin" && "stroke-current",
201201
className,

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,9 @@ import {
2020
SubmenuTrigger as SubmenuTriggerPrimitive,
2121
composeRenderProps,
2222
} from "react-aria-components"
23+
import { twMerge } from "tailwind-merge"
2324
import type { VariantProps } from "tailwind-variants"
2425
import { tv } from "tailwind-variants"
25-
26-
import { cn } from "@/utils/classes"
2726
import {
2827
DropdownItemDetails,
2928
DropdownKeyboard,
@@ -142,7 +141,7 @@ const MenuItem = ({ className, isDanger = false, children, ...props }: MenuItemP
142141
dropdownItemStyles({
143142
...renderProps,
144143
className: renderProps.hasSubmenu
145-
? cn([
144+
? twMerge([
146145
"data-open:data-danger:bg-danger/10 data-open:data-danger:text-danger",
147146
"data-open:bg-accent data-open:text-accent-fg data-open:*:data-[slot=icon]:text-accent-fg data-open:*:[.text-muted-fg]:text-accent-fg",
148147
className,
@@ -189,7 +188,7 @@ export interface MenuHeaderProps extends React.ComponentProps<typeof Header> {
189188

190189
const MenuHeader = ({ className, separator = false, ...props }: MenuHeaderProps) => (
191190
<Header
192-
className={cn(
191+
className={twMerge(
193192
"col-span-full px-2.5 py-2 font-semibold text-base sm:text-sm",
194193
separator && "-mx-1 mb-1 border-b sm:px-3 sm:pb-[0.625rem]",
195194
className,

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

+41-53
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { createContext, use, useCallback, useId, useMemo, useState } from "react"
22

3+
import { useMediaQuery } from "@/utils/use-media-query"
34
import { IconHamburger } from "justd-icons"
45
import { LayoutGroup, motion } from "motion/react"
56
import type { LinkProps } from "react-aria-components"
6-
import { Link, composeRenderProps } from "react-aria-components"
7-
import { type VariantProps, tv } from "tailwind-variants"
8-
9-
import { cn } from "@/utils/classes"
10-
import { useMediaQuery } from "@/utils/use-media-query"
7+
import { Link } from "react-aria-components"
8+
import { twJoin, twMerge } from "tailwind-merge"
9+
import { tv } from "tailwind-variants"
1110
import { Button, type ButtonProps } from "./button"
1211
import { composeTailwindRenderProps } from "./primitive"
1312
import { Sheet } from "./sheet"
@@ -42,17 +41,6 @@ interface NavbarProps extends React.ComponentProps<"header">, NavbarOptions {
4241
onOpenChange?: (open: boolean) => void
4342
}
4443

45-
const navbarStyles = tv({
46-
base: "relative isolate flex w-full flex-col",
47-
variants: {
48-
intent: {
49-
floating: "px-2.5 pt-2",
50-
navbar: "",
51-
inset: "min-h-svh bg-navbar dark:bg-bg",
52-
},
53-
},
54-
})
55-
5644
const Navbar = ({
5745
children,
5846
isOpen: openProp,
@@ -99,7 +87,13 @@ const Navbar = ({
9987
<NavbarContext value={contextValue}>
10088
<header
10189
data-navbar-intent={intent}
102-
className={navbarStyles({ intent, className })}
90+
className={twMerge(
91+
"relative isolate flex w-full flex-col",
92+
intent === "navbar" && "",
93+
intent === "floating" && "px-2.5 pt-2",
94+
intent === "inset" && "min-h-svh bg-navbar dark:bg-bg",
95+
className,
96+
)}
10397
{...props}
10498
>
10599
{children}
@@ -201,7 +195,7 @@ const NavbarSection = ({ className, ...props }: React.ComponentProps<"div">) =>
201195
<LayoutGroup id={id}>
202196
<div
203197
data-navbar-section="true"
204-
className={cn(
198+
className={twMerge(
205199
"flex",
206200
isCompact ? "flex-col gap-y-4" : "flex-row items-center gap-x-3",
207201
className,
@@ -214,21 +208,6 @@ const NavbarSection = ({ className, ...props }: React.ComponentProps<"div">) =>
214208
)
215209
}
216210

217-
const navItemStyles = tv({
218-
base: [
219-
"*:data-[slot=icon]:-mx-0.5 relative flex cursor-pointer items-center gap-x-2 px-2 text-muted-fg no-underline outline-hidden transition-colors md:text-sm forced-colors:transform-none forced-colors:outline-0 forced-colors:disabled:text-[GrayText]",
220-
"pressed:text-fg hover:text-fg data-focused:text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary",
221-
"**:data-[slot=chevron]:size-4 **:data-[slot=chevron]:transition-transform",
222-
"*:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 pressed:**:data-[slot=chevron]:rotate-180",
223-
"disabled:cursor-default disabled:opacity-50 disabled:forced-colors:text-[GrayText]",
224-
],
225-
variants: {
226-
isCurrent: {
227-
true: "cursor-default text-navbar-fg",
228-
},
229-
},
230-
})
231-
232211
interface NavbarItemProps extends LinkProps {
233212
isCurrent?: boolean
234213
}
@@ -239,8 +218,16 @@ const NavbarItem = ({ className, isCurrent, ...props }: NavbarItemProps) => {
239218
<Link
240219
data-navbar-item="true"
241220
aria-current={isCurrent ? "page" : undefined}
242-
className={composeRenderProps(className, (className, ...renderProps) =>
243-
navItemStyles({ ...renderProps, isCurrent, className }),
221+
className={composeTailwindRenderProps(
222+
className,
223+
twJoin(
224+
"*:data-[slot=icon]:-mx-0.5 relative flex cursor-pointer items-center gap-x-2 px-2 text-muted-fg no-underline outline-hidden transition-colors md:text-sm forced-colors:transform-none forced-colors:outline-0 forced-colors:disabled:text-[GrayText]",
225+
"pressed:text-fg hover:text-fg focus:text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary",
226+
"**:data-[slot=chevron]:size-4 **:data-[slot=chevron]:transition-transform",
227+
"*:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 pressed:**:data-[slot=chevron]:rotate-180",
228+
"disabled:cursor-default disabled:opacity-50 disabled:forced-colors:text-[GrayText]",
229+
isCurrent && "cursor-default text-navbar-fg",
230+
),
244231
)}
245232
{...props}
246233
>
@@ -266,36 +253,37 @@ const NavbarLogo = ({ className, ...props }: LinkProps) => {
266253
<Link
267254
className={composeTailwindRenderProps(
268255
className,
269-
"relative flex items-center gap-x-2 px-2 py-4 text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary data-focused:outline-hidden md:mr-4 md:px-0 md:py-0",
256+
"relative flex items-center gap-x-2 px-2 py-4 text-fg focus:outline-hidden data-focus-visible:outline-1 data-focus-visible:outline-primary md:mr-4 md:px-0 md:py-0",
270257
)}
271258
{...props}
272259
/>
273260
)
274261
}
275262

276263
const NavbarFlex = ({ className, ref, ...props }: React.ComponentProps<"div">) => {
277-
return <div ref={ref} className={cn("flex items-center gap-2 md:gap-3", className)} {...props} />
264+
return (
265+
<div ref={ref} className={twMerge("flex items-center gap-2 md:gap-3", className)} {...props} />
266+
)
278267
}
279268

280-
const compactStyles = tv({
281-
base: "flex justify-between bg-navbar text-navbar-fg peer-has-[[data-navbar-intent=floating]]:border md:hidden",
282-
variants: {
283-
intent: {
284-
floating: "h-12 rounded-lg border px-3.5",
285-
inset: "h-14 border-b px-4",
286-
navbar: "h-14 border-b px-4",
287-
},
288-
},
289-
})
290-
291-
interface NavbarCompactProps
292-
extends React.ComponentProps<"div">,
293-
VariantProps<typeof compactStyles> {
269+
interface NavbarCompactProps extends React.ComponentProps<"div">, Pick<NavbarOptions, "intent"> {
294270
ref?: React.RefObject<HTMLDivElement>
295271
}
296272
const NavbarCompact = ({ className, ref, ...props }: NavbarCompactProps) => {
297273
const { intent } = useNavbar()
298-
return <div ref={ref} className={compactStyles({ intent, className })} {...props} />
274+
return (
275+
<div
276+
ref={ref}
277+
className={twMerge(
278+
"flex justify-between bg-navbar text-navbar-fg peer-has-[[data-navbar-intent=floating]]:border md:hidden",
279+
intent === "floating" && "h-12 rounded-lg border px-3.5",
280+
intent === "inset" && "h-14 border-b px-4",
281+
intent === "navbar" && "h-14 border-b px-4",
282+
className,
283+
)}
284+
{...props}
285+
/>
286+
)
299287
}
300288

301289
const insetStyles = tv({
@@ -316,7 +304,7 @@ const NavbarInset = ({ className, ref, ...props }: React.ComponentProps<"div">)
316304
<main
317305
ref={ref}
318306
data-navbar-intent={intent}
319-
className={cn(
307+
className={twMerge(
320308
"flex flex-1 flex-col",
321309
intent === "inset" && "bg-navbar pb-2 md:px-2 dark:bg-bg",
322310
className,

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

-203
This file was deleted.

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

+2-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
} from "react-aria-components"
1717
import { tv } from "tailwind-variants"
1818

19-
import { cn } from "@/utils/classes"
2019
import { useMediaQuery } from "@/utils/use-media-query"
2120
import { twMerge } from "tailwind-merge"
2221
import type {
@@ -44,11 +43,11 @@ const PopoverHeader = ({ className, ...props }: DialogHeaderProps) => (
4443
)
4544

4645
const PopoverFooter = ({ className, ...props }: DialogFooterProps) => (
47-
<Dialog.Footer className={cn("sm:p-4", className)} {...props} />
46+
<Dialog.Footer className={twMerge("sm:p-4", className)} {...props} />
4847
)
4948

5049
const PopoverBody = ({ className, ref, ...props }: DialogBodyProps) => (
51-
<Dialog.Body ref={ref} className={cn("sm:px-4 sm:pt-0", className)} {...props} />
50+
<Dialog.Body ref={ref} className={twMerge("sm:px-4 sm:pt-0", className)} {...props} />
5251
)
5352

5453
const content = tv({

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

+1-11
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,4 @@ const focusStyles = tv({
2525
},
2626
})
2727

28-
const focusButtonStyles = tv({
29-
base: "outline outline-ring outline-offset-2 forced-colors:outline-[Highlight]",
30-
variants: {
31-
isFocusVisible: {
32-
false: "outline-0",
33-
true: "outline-2",
34-
},
35-
},
36-
})
37-
38-
export { composeTailwindRenderProps, focusRing, focusStyles, focusButtonStyles }
28+
export { composeTailwindRenderProps, focusRing, focusStyles }

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

-145
This file was deleted.

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

+6-18
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,5 @@
11
import { Separator as Divider, type SeparatorProps as DividerProps } from "react-aria-components"
2-
import { tv } from "tailwind-variants"
3-
4-
const separatorStyles = tv({
5-
base: "shrink-0 bg-border forced-colors:bg-[ButtonBorder]",
6-
variants: {
7-
orientation: {
8-
horizontal: "h-px w-full",
9-
vertical: "w-px",
10-
},
11-
},
12-
defaultVariants: {
13-
orientation: "horizontal",
14-
},
15-
})
2+
import { twMerge } from "tailwind-merge"
163

174
interface SeparatorProps extends DividerProps {
185
className?: string
@@ -22,10 +9,11 @@ const Separator = ({ className, ...props }: SeparatorProps) => {
229
return (
2310
<Divider
2411
{...props}
25-
className={separatorStyles({
26-
orientation: props.orientation,
27-
className: className,
28-
})}
12+
className={twMerge(
13+
"shrink-0 bg-border forced-colors:bg-[ButtonBorder]",
14+
props.orientation === "horizontal" ? "h-px w-full" : "w-px",
15+
className,
16+
)}
2917
/>
3018
)
3119
}

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

-250
This file was deleted.

‎resources/js/components/ui/touch-target.tsx

-15
This file was deleted.

‎resources/js/utils/classes.ts

-6
This file was deleted.

0 commit comments

Comments
 (0)
Please sign in to comment.