Skip to content

Commit c4475c7

Browse files
irsyadadlirsyadadl
committed
bump & sync
1 parent c425fe0 commit c4475c7

15 files changed

+121
-149
lines changed

‎.prettierrc

-14
This file was deleted.

‎biome.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
2+
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
33
"organizeImports": {
44
"enabled": true
55
},

‎bun.lockb

0 Bytes
Binary file not shown.

‎components/ui/card.tsx

+45-37
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,68 @@
1-
import { tv } from "tailwind-variants"
2-
1+
import { cn } from "@/utils/classes"
32
import { Heading } from "./heading"
43

5-
const card = tv({
6-
slots: {
7-
root: [
8-
"xrkr xkd2 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",
9-
],
10-
header: "flex flex-col gap-y-1 px-6 py-5",
11-
title: "font-semibold leading-none tracking-tight sm:leading-6",
12-
description: "text-muted-fg text-sm",
13-
content:
14-
"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",
15-
footer: "flex items-center p-6 pt-0",
16-
},
17-
})
18-
19-
const { root, header, title, description, content, footer } = card()
20-
214
const Card = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
22-
return <div data-slot="card" className={root({ className })} {...props} />
5+
return (
6+
<div
7+
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",
10+
className,
11+
)}
12+
{...props}
13+
/>
14+
)
2315
}
2416

2517
interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
2618
title?: string
2719
description?: string
2820
}
2921

30-
const Header = ({ className, title, description, children, ...props }: HeaderProps) => (
31-
<div data-slot="card-header" className={header({ className })} {...props}>
32-
{title && <Title>{title}</Title>}
33-
{description && <Description>{description}</Description>}
34-
{!title && typeof children === "string" ? <Title>{children}</Title> : children}
22+
const CardHeader = ({ className, title, description, children, ...props }: HeaderProps) => (
23+
<div data-slot="card-header" className={cn("flex flex-col gap-y-1 px-6 py-5", className)} {...props}>
24+
{title && <CardTitle>{title}</CardTitle>}
25+
{description && <CardDescription>{description}</CardDescription>}
26+
{!title && typeof children === "string" ? <CardTitle>{children}</CardTitle> : children}
3527
</div>
3628
)
3729

38-
const Title = ({ className, level = 3, ...props }: React.ComponentProps<typeof Heading>) => {
39-
return <Heading data-slot="card-title" level={level} className={title({ className })} {...props} />
30+
const CardTitle = ({ className, level = 3, ...props }: React.ComponentProps<typeof Heading>) => {
31+
return (
32+
<Heading
33+
data-slot="card-title"
34+
level={level}
35+
className={cn("font-semibold leading-none tracking-tight sm:leading-6", className)}
36+
{...props}
37+
/>
38+
)
4039
}
4140

42-
const Description = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
43-
return <div {...props} data-slot="description" className={description({ className })} {...props} />
41+
const CardDescription = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
42+
return <div {...props} data-slot="description" className={cn("text-muted-fg text-sm", className)} {...props} />
4443
}
4544

46-
const Content = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
47-
return <div data-slot="card-content" className={content({ className })} {...props} />
45+
const CardContent = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
46+
return (
47+
<div
48+
data-slot="card-content"
49+
className={cn(
50+
"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",
51+
className,
52+
)}
53+
{...props}
54+
/>
55+
)
4856
}
4957

50-
const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
51-
return <div data-slot="card-footer" className={footer({ className })} {...props} />
58+
const CardFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
59+
return <div data-slot="card-footer" className={cn("flex items-center p-6 pt-0", className)} {...props} />
5260
}
5361

54-
Card.Content = Content
55-
Card.Description = Description
56-
Card.Footer = Footer
57-
Card.Header = Header
58-
Card.Title = Title
62+
Card.Content = CardContent
63+
Card.Description = CardDescription
64+
Card.Footer = CardFooter
65+
Card.Header = CardHeader
66+
Card.Title = CardTitle
5967

6068
export { Card }

‎components/ui/checkbox.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ interface CheckboxGroupProps extends CheckboxGroupPrimitiveProps {
2626
const CheckboxGroup = ({ className, ...props }: CheckboxGroupProps) => {
2727
return (
2828
<CheckboxGroupPrimitive {...props} className={composeTailwindRenderProps(className, "flex flex-col gap-y-2")}>
29-
<Label>{props.label}</Label>
29+
{props.label && <Label>{props.label}</Label>}
3030
{props.children as React.ReactNode}
3131
{props.description && <Description className="block">{props.description}</Description>}
3232
<FieldError>{props.errorMessage}</FieldError>
@@ -92,7 +92,9 @@ const Checkbox = ({ className, ...props }: CheckboxProps) => {
9292
<div className="flex flex-col gap-1">
9393
<>
9494
{props.label ? (
95-
<Label className={cn(props.description && "text-sm/4")}>{props.label}</Label>
95+
<Label className={cn(props.description && "font-normal text-sm/4")}>
96+
{props.label}
97+
</Label>
9698
) : (
9799
(props.children as React.ReactNode)
98100
)}

‎components/ui/field.tsx

+24-11
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,12 @@ interface FieldProps {
3333
const fieldStyles = tv({
3434
slots: {
3535
description: "text-pretty text-muted-fg text-sm/6",
36-
label: "w-fit cursor-default font-medium text-secondary-fg text-sm",
36+
label: "w-fit cursor-default font-medium text-secondary-fg text-sm/6",
3737
fieldError: "text-danger text-sm/6 forced-colors:text-[Mark]",
38-
input: [
39-
"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 [&::-ms-reveal]:hidden",
40-
],
4138
},
4239
})
4340

44-
const { description, label, fieldError, input } = fieldStyles()
41+
const { description, label, fieldError } = fieldStyles()
4542

4643
const Label = ({ className, ...props }: LabelProps) => {
4744
return <LabelPrimitive {...props} className={label({ className })} />
@@ -74,11 +71,17 @@ const FieldError = ({ className, ref, ...props }: FieldErrorProps) => {
7471
const fieldGroupStyles = tv({
7572
base: [
7673
"group flex h-10 items-center overflow-hidden rounded-lg border border-input shadow-xs transition duration-200 ease-out",
77-
"focus-within:ring-4 group-data-invalid:focus-within:border-danger group-data-invalid:focus-within:ring-danger/20",
78-
"[&>[role=progressbar]]:mr-2.5",
79-
"**:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0",
80-
"*:data-[slot=suffix]:mr-2.5 *:data-[slot=suffix]:text-muted-fg",
81-
"*:data-[slot=prefix]:ml-2.5 *:data-[slot=prefix]:text-muted-fg",
74+
"relative focus-within:ring-4 group-data-invalid:focus-within:border-danger group-data-invalid:focus-within:ring-danger/20",
75+
"[&>[role=progressbar]:first-child]:ml-2.5 [&>[role=progressbar]:last-child]:mr-2.5",
76+
"**:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:[button]:shrink-0",
77+
"[&>button:has([data-slot=icon]):first-child]:left-0 [&>button:has([data-slot=icon]):last-child]:right-0 [&>button:has([data-slot=icon])]:absolute",
78+
"*:data-[slot=icon]:pointer-events-none *:data-[slot=icon]:absolute *:data-[slot=icon]:top-[calc(var(--spacing)*2.7)] *:data-[slot=icon]:z-10 *:data-[slot=icon]:size-4 *:data-[slot=icon]:text-muted-fg",
79+
"[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-2.5",
80+
"[&:has([data-slot=icon]+input)]:pl-6 [&:has(input+[data-slot=icon])]:pr-6",
81+
"[&:has([data-slot=icon]+[role=group])]:pl-6 [&:has([role=group]+[data-slot=icon])]:pr-6",
82+
"has-[[data-slot=icon]:last-child]:[&_input]:pr-7",
83+
"*:[button]:h-8 *:[button]:rounded-[calc(var(--radius-sm)-1px)] *:[button]:px-2.5",
84+
"[&>button:first-child]:ml-[calc(var(--spacing)*0.7)] [&>button:last-child]:mr-[calc(var(--spacing)*0.7)]",
8285
],
8386
variants: {
8487
isFocusWithin: focusStyles.variants.isFocused,
@@ -106,8 +109,18 @@ const FieldGroup = ({ className, ...props }: GroupProps) => {
106109
interface InputProps extends InputPrimitiveProps {
107110
ref?: React.RefObject<HTMLInputElement>
108111
}
112+
109113
const Input = ({ className, ref, ...props }: InputProps) => {
110-
return <InputPrimitive ref={ref} {...props} className={composeTailwindRenderProps(className, input())} />
114+
return (
115+
<InputPrimitive
116+
ref={ref}
117+
{...props}
118+
className={composeTailwindRenderProps(
119+
className,
120+
"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",
121+
)}
122+
/>
123+
)
111124
}
112125

113126
export type { FieldProps, InputProps, FieldErrorProps }

‎components/ui/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export * from "./menu"
1515
export * from "./modal"
1616
export * from "./navbar"
1717
export * from "./popover"
18+
export * from "./primitive"
1819
export * from "./sheet"
1920
export * from "./text-field"
2021
export * from "./toast"

‎components/ui/keyboard.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { tv } from "tailwind-variants"
55

66
const keyboardStyles = tv({
77
slots: {
8-
base: "hidden text-current/70 group-data-focused:text-fg group-data-hovered:text-fg group-data-disabled:opacity-50 group-data-focused:opacity-90 lg:inline-flex lg:inline-flex forced-colors:group-data-focused:text-[HighlightText]",
8+
base: "hidden text-current/70 group-data-focused:text-fg group-data-hovered:text-fg group-data-disabled:opacity-50 group-data-focused:opacity-90 lg:inline-flex forced-colors:group-data-focused:text-[HighlightText]",
99
kbd: "inline-grid min-h-5 min-w-[2ch] place-content-center rounded text-center font-sans text-[.75rem] uppercase",
1010
},
1111
})

‎components/ui/link.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,4 @@ const Link = ({ className, ref, ...props }: LinkProps) => {
4040
}
4141

4242
export type { LinkProps }
43-
export { Link }
43+
export { Link, linkStyles }

‎components/ui/modal.tsx

+12-13
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { type VariantProps, tv } from "tailwind-variants"
66

77
import { Dialog } from "./dialog"
88

9-
const overlay = tv({
9+
const modalOverlayStyles = tv({
1010
base: [
1111
"fixed top-0 left-0 isolate z-50 h-(--visual-viewport-height) w-full",
1212
"flex items-end justify-end bg-fg/15 text-center sm:items-center sm:justify-center dark:bg-bg/40",
@@ -20,11 +20,11 @@ const overlay = tv({
2020
true: "fade-in animate-in duration-200 ease-out",
2121
},
2222
isExiting: {
23-
true: "fade-out animate-out duration-150 ease-in",
23+
true: "fade-out animate-out ease-in",
2424
},
2525
},
2626
})
27-
const content = tv({
27+
const modalContentStyles = tv({
2828
base: [
2929
"max-h-full w-full rounded-t-2xl bg-overlay text-left align-middle text-overlay-fg shadow-lg ring-1 ring-fg/5",
3030
"overflow-hidden sm:rounded-2xl dark:ring-border",
@@ -60,11 +60,10 @@ const Modal = (props: DialogTriggerProps) => {
6060
return <DialogTrigger {...props} />
6161
}
6262

63-
interface ModalContentProps extends Omit<ModalOverlayProps, "className" | "children">, VariantProps<typeof content> {
64-
"aria-label"?: DialogProps["aria-label"]
65-
"aria-labelledby"?: DialogProps["aria-labelledby"]
66-
role?: DialogProps["role"]
67-
children?: DialogProps["children"]
63+
interface ModalContentProps
64+
extends Omit<ModalOverlayProps, "className" | "children">,
65+
Pick<DialogProps, "aria-label" | "aria-labelledby" | "role" | "children">,
66+
VariantProps<typeof modalContentStyles> {
6867
closeButton?: boolean
6968
isBlurred?: boolean
7069
classNames?: {
@@ -88,19 +87,19 @@ const ModalContent = ({
8887
return (
8988
<ModalOverlay
9089
isDismissable={isDismissable}
91-
className={composeRenderProps(classNames?.overlay, (className, renderProps) => {
92-
return overlay({
90+
className={composeRenderProps(classNames?.overlay, (className, renderProps) =>
91+
modalOverlayStyles({
9392
...renderProps,
9493
isBlurred,
9594
className,
96-
})
97-
})}
95+
}),
96+
)}
9897
{...props}
9998
>
10099
<ModalPrimitive
101100
isDismissable={isDismissable}
102101
className={composeRenderProps(classNames?.content, (className, renderProps) =>
103-
content({
102+
modalContentStyles({
104103
...renderProps,
105104
size,
106105
className,

‎components/ui/popover.tsx

+8-36
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const content = tv({
5555
false: "min-w-80",
5656
},
5757
isMenu: {
58-
true: "p-0",
58+
true: "",
5959
},
6060
isEntering: {
6161
true: [
@@ -96,15 +96,13 @@ const drawer = tv({
9696
})
9797

9898
interface PopoverContentProps
99-
extends Omit<React.ComponentProps<typeof Modal>, "children">,
100-
Omit<PopoverPrimitiveProps, "children" | "className">,
101-
Omit<ModalOverlayProps, "className"> {
99+
extends Omit<PopoverPrimitiveProps, "children" | "className">,
100+
Omit<ModalOverlayProps, "className">,
101+
Pick<DialogProps, "aria-label" | "aria-labelledby"> {
102102
children: React.ReactNode
103103
showArrow?: boolean
104104
style?: React.CSSProperties
105105
respectScreen?: boolean
106-
"aria-label"?: DialogProps["aria-label"]
107-
"aria-labelledby"?: DialogProps["aria-labelledby"]
108106
className?: string | ((values: { defaultClassName?: string }) => string)
109107
}
110108

@@ -133,25 +131,21 @@ const PopoverContent = ({
133131
drawer({ ...renderProps, isMenu, className }),
134132
)}
135133
>
136-
<Dialog
137-
role="dialog"
138-
aria-label={props["aria-label"] || isMenu ? "Menu" : undefined}
139-
className="outline-hidden"
140-
>
134+
<Dialog role="dialog" aria-label={props["aria-label"] || isMenu ? "Menu" : undefined}>
141135
{children}
142136
</Dialog>
143137
</Modal>
144138
</ModalOverlay>
145139
) : (
146140
<PopoverPrimitive
147141
offset={effectiveOffset}
148-
{...props}
149142
className={composeRenderProps(className, (className, renderProps) =>
150143
content({
151144
...renderProps,
152145
className,
153146
}),
154147
)}
148+
{...props}
155149
>
156150
{showArrow && (
157151
<OverlayArrow className="group">
@@ -165,34 +159,13 @@ const PopoverContent = ({
165159
</svg>
166160
</OverlayArrow>
167161
)}
168-
<Dialog
169-
role="dialog"
170-
aria-label={props["aria-label"] || isMenu ? "Menu" : undefined}
171-
className="outline-hidden"
172-
>
162+
<Dialog role="dialog" aria-label={props["aria-label"] || isMenu ? "Menu" : undefined}>
173163
{children}
174164
</Dialog>
175165
</PopoverPrimitive>
176166
)
177167
}
178168

179-
const PopoverPicker = ({ children, className, ...props }: PopoverContentProps) => {
180-
return (
181-
<PopoverPrimitive
182-
{...props}
183-
className={composeRenderProps(className, (className, renderProps) =>
184-
content({
185-
...renderProps,
186-
isPicker: true,
187-
className,
188-
}),
189-
)}
190-
>
191-
{children}
192-
</PopoverPrimitive>
193-
)
194-
}
195-
196169
const PopoverTrigger = Dialog.Trigger
197170
const PopoverClose = Dialog.Close
198171
const PopoverDescription = Dialog.Description
@@ -204,8 +177,7 @@ Popover.Content = PopoverContent
204177
Popover.Body = PopoverBody
205178
Popover.Footer = PopoverFooter
206179
Popover.Header = PopoverHeader
207-
Popover.Picker = PopoverPicker
208180
Popover.Title = PopoverTitle
209181

210182
export type { PopoverProps, PopoverContentProps }
211-
export { Popover }
183+
export { Popover, PopoverContent }

0 commit comments

Comments
 (0)