Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-10 04:22:27 +10:00
Code Issues Packages Projects Releases Wiki Activity

add digitalocean attribution

Browse Source
This commit is contained in:
Amruth Pillai
2024-01-21 11:00:24 +01:00
parent 1aaaaeca20
commit b68b5a7747
42 changed files with 104 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -93,3 +93,9 @@ Reactive Resume is packaged and distributed using the [MIT License](/LICENSE.md)
_By the community, for the community._
A passion project by [Amruth Pillai](https://www.amruthpillai.com/)
<p>
<a href="https://www.digitalocean.com/?utm_medium=opensource&utm_source=Reactive-Resume">
<img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="200px">
</a>
</p>

12
apps/artboard/src/templates/azurill.tsx
View File

@ -84,13 +84,13 @@ const Summary = () => {
</div>
<div className="mb-2 hidden items-center gap-x-2 text-center font-bold text-primary group-[.sidebar]:flex">
<div className="h-1.5 w-1.5 rounded-full border border-primary" />
<div className="size-1.5 rounded-full border border-primary" />
<h4>{section.name}</h4>
<div className="h-1.5 w-1.5 rounded-full border border-primary" />
<div className="size-1.5 rounded-full border border-primary" />
</div>
<main className={cn("relative space-y-2", "border-l border-primary pl-4")}>
<div className="absolute left-[-4.5px] top-[8px] hidden h-[8px] w-[8px] rounded-full bg-primary group-[.main]:block" />
<div className="absolute left-[-4.5px] top-[8px] hidden size-[8px] rounded-full bg-primary group-[.main]:block" />
<div
className="wysiwyg"
@ -167,9 +167,9 @@ const Section = <T,>({
</div>
<div className="mx-auto mb-2 hidden items-center gap-x-2 text-center font-bold text-primary group-[.sidebar]:flex">
<div className="h-1.5 w-1.5 rounded-full border border-primary" />
<div className="size-1.5 rounded-full border border-primary" />
<h4>{section.name}</h4>
<div className="h-1.5 w-1.5 rounded-full border border-primary" />
<div className="size-1.5 rounded-full border border-primary" />
</div>
<div
@ -207,7 +207,7 @@ const Section = <T,>({
{url !== undefined && <Link url={url} />}
<div className="absolute left-[-4.5px] top-px hidden h-[8px] w-[8px] rounded-full bg-primary group-[.main]:block" />
<div className="absolute left-[-4.5px] top-px hidden size-[8px] rounded-full bg-primary group-[.main]:block" />
</div>
);
})}

2
apps/artboard/src/templates/bronzor.tsx
View File

@ -99,7 +99,7 @@ const Rating = ({ level }: RatingProps) => (
{Array.from({ length: 5 }).map((_, index) => (
<div
key={index}
className={cn("h-2 w-2 rounded-full border border-primary", level > index && "bg-primary")}
className={cn("size-2 rounded-full border border-primary", level > index && "bg-primary")}
/>
))}
</div>

2
apps/artboard/src/templates/chikorita.tsx
View File

@ -100,7 +100,7 @@ const Rating = ({ level }: RatingProps) => (
<div
key={index}
className={cn(
"h-2 w-2 rounded-full border border-primary group-[.sidebar]:border-background",
"size-2 rounded-full border border-primary group-[.sidebar]:border-background",
level > index && "bg-primary group-[.sidebar]:bg-background",
)}
/>

10
apps/artboard/src/templates/ditto.tsx
View File

@ -46,7 +46,7 @@ const Header = () => {
<i className="ph ph-bold ph-map-pin text-primary" />
<div>{basics.location}</div>
</div>
<div className="bg-text h-1 w-1 rounded-full last:hidden" />
<div className="bg-text size-1 rounded-full last:hidden" />
</>
)}
@ -58,7 +58,7 @@ const Header = () => {
{basics.phone}
</a>
</div>
<div className="bg-text h-1 w-1 rounded-full last:hidden" />
<div className="bg-text size-1 rounded-full last:hidden" />
</>
)}
{basics.email && (
@ -69,13 +69,13 @@ const Header = () => {
{basics.email}
</a>
</div>
<div className="bg-text h-1 w-1 rounded-full last:hidden" />
<div className="bg-text size-1 rounded-full last:hidden" />
</>
)}
{isUrl(basics.url.href) && (
<>
<Link url={basics.url} />
<div className="bg-text h-1 w-1 rounded-full last:hidden" />
<div className="bg-text size-1 rounded-full last:hidden" />
</>
)}
{basics.customFields.map((item) => (
@ -84,7 +84,7 @@ const Header = () => {
<i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
<span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
</div>
<div className="bg-text h-1 w-1 rounded-full last:hidden" />
<div className="bg-text size-1 rounded-full last:hidden" />
</Fragment>
))}
</div>

4
apps/artboard/src/templates/nosepass.tsx
View File

@ -94,7 +94,7 @@ const Summary = () => {
<div className="col-span-3">
<div className="relative">
<hr className="mt-3 border-primary pb-3" />
<div className="absolute bottom-3 right-0 h-3 w-3 bg-primary" />
<div className="absolute bottom-3 right-0 size-3 bg-primary" />
</div>
<div
@ -162,7 +162,7 @@ const Section = <T,>({
<div className="col-span-3">
<div className="relative">
<hr className="mt-3 border-primary" />
<div className="absolute bottom-0 right-0 h-3 w-3 bg-primary" />
<div className="absolute bottom-0 right-0 size-3 bg-primary" />
</div>
</div>
</div>

2
apps/artboard/src/templates/onyx.tsx
View File

@ -128,7 +128,7 @@ const Rating = ({ level }: RatingProps) => (
{Array.from({ length: 5 }).map((_, index) => (
<div
key={index}
className={cn("h-3 w-3 rounded border-2 border-primary", level > index && "bg-primary")}
className={cn("size-3 rounded border-2 border-primary", level > index && "bg-primary")}
/>
))}
</div>

10
apps/artboard/src/templates/pikachu.tsx
View File

@ -49,7 +49,7 @@ const Header = () => {
<i className="ph ph-bold ph-map-pin" />
<div>{basics.location}</div>
</div>
<div className="h-1 w-1 rounded-full bg-background last:hidden" />
<div className="size-1 rounded-full bg-background last:hidden" />
</>
)}
{basics.phone && (
@ -60,7 +60,7 @@ const Header = () => {
{basics.phone}
</a>
</div>
<div className="h-1 w-1 rounded-full bg-background last:hidden" />
<div className="size-1 rounded-full bg-background last:hidden" />
</>
)}
{basics.email && (
@ -71,13 +71,13 @@ const Header = () => {
{basics.email}
</a>
</div>
<div className="h-1 w-1 rounded-full bg-background last:hidden" />
<div className="size-1 rounded-full bg-background last:hidden" />
</>
)}
{isUrl(basics.url.href) && (
<>
<Link url={basics.url} />
<div className="h-1 w-1 rounded-full bg-background last:hidden" />
<div className="size-1 rounded-full bg-background last:hidden" />
</>
)}
{basics.customFields.map((item) => (
@ -86,7 +86,7 @@ const Header = () => {
<i className={cn(`ph ph-bold ph-${item.icon}`)} />
<span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
</div>
<div className="h-1 w-1 rounded-full bg-background last:hidden" />
<div className="size-1 rounded-full bg-background last:hidden" />
</Fragment>
))}
</div>

2
apps/artboard/src/templates/rhyhorn.tsx
View File

@ -100,7 +100,7 @@ const Rating = ({ level }: RatingProps) => (
{Array.from({ length: 5 }).map((_, index) => (
<div
key={index}
className={cn("h-2 w-2 rounded-full border border-primary", level > index && "bg-primary")}
className={cn("size-2 rounded-full border border-primary", level > index && "bg-primary")}
/>
))}
</div>

4
apps/client/src/components/locale-combobox.tsx
View File

@ -60,7 +60,7 @@ export const LocaleCombobox = ({ value, onValueChange }: Props) => {
>
<Check
className={cn(
"mr-2 h-4 w-4 opacity-0",
"mr-2 size-4 opacity-0",
value === original.locale && "opacity-100",
)}
/>
@ -101,7 +101,7 @@ export const LocaleComboboxPopover = ({ value, onValueChange }: Props) => {
</span>
<CaretDown
className={cn(
"ml-2 h-4 w-4 shrink-0 rotate-0 opacity-50 transition-transform",
"ml-2 size-4 shrink-0 rotate-0 opacity-50 transition-transform",
open && "rotate-180",
)}
/>

4
apps/client/src/pages/auth/_components/social-auth.tsx
View File

@ -14,7 +14,7 @@ export const SocialAuth = () => {
{providers.includes("github") && (
<Button asChild size="lg" className="w-full !bg-[#222] !text-white hover:!bg-[#222]/80">
<a href="/api/auth/github">
<GithubLogo className="mr-3 h-4 w-4" />
<GithubLogo className="mr-3 size-4" />
{t`GitHub`}
</a>
</Button>
@ -27,7 +27,7 @@ export const SocialAuth = () => {
className="w-full !bg-[#4285F4] !text-white hover:!bg-[#4285F4]/80"
>
<a href="/api/auth/google">
<GoogleLogo className="mr-3 h-4 w-4" />
<GoogleLogo className="mr-3 size-4" />
{t`Google`}
</a>
</Button>

4
apps/client/src/pages/auth/layout.tsx
View File

@ -23,10 +23,10 @@ export const AuthLayout = () => {
const hideDivider = !providers.includes("email") || providers.length === 1;
return (
<div className="flex h-screen w-screen">
<div className="size-screen flex">
<div className="relative flex w-full flex-col justify-center gap-y-8 px-12 sm:mx-auto sm:basis-[420px] sm:px-0 lg:basis-[480px] lg:px-12">
<div className="flex items-center justify-between">
<Link to="/" className="h-24 w-24">
<Link to="/" className="size-24">
<Logo className="-ml-3" size={96} />
</Link>

2
apps/client/src/pages/builder/sidebars/left/dialogs/profiles.tsx
View File

@ -82,7 +82,7 @@ export const ProfilesDialog = () => {
<FormLabel htmlFor="iconSlug">{t`Icon`}</FormLabel>
<FormControl>
<div className="flex items-center gap-x-2">
<Avatar className="h-8 w-8 bg-white">
<Avatar className="size-8 bg-white">
{field.value && (
<AvatarImage
className="p-1.5"

2
apps/client/src/pages/builder/sidebars/left/index.tsx
View File

@ -43,7 +43,7 @@ export const LeftSidebar = () => {
return (
<div className="flex bg-secondary-accent/30">
<div className="hidden basis-12 flex-col items-center justify-between bg-secondary-accent/30 py-4 sm:flex">
<Button asChild size="icon" variant="ghost" className="h-8 w-8 rounded-full">
<Button asChild size="icon" variant="ghost" className="size-8 rounded-full">
<Link to="/dashboard">
<Icon size={14} />
</Link>

8
apps/client/src/pages/builder/sidebars/left/sections/picture/options.tsx
View File

@ -93,7 +93,7 @@ export const PictureOptions = () => {
>
<Tooltip content={t`Square`}>
<ToggleGroupItem value="square">
<div className="h-3 w-3 border border-foreground" />
<div className="size-3 border border-foreground" />
</ToggleGroupItem>
</Tooltip>
@ -136,19 +136,19 @@ export const PictureOptions = () => {
>
<Tooltip content={t`Square`}>
<ToggleGroupItem value="square">
<div className="h-3 w-3 border border-foreground" />
<div className="size-3 border border-foreground" />
</ToggleGroupItem>
</Tooltip>
<Tooltip content={t`Rounded`}>
<ToggleGroupItem value="rounded">
<div className="h-3 w-3 rounded-sm border border-foreground" />
<div className="size-3 rounded-sm border border-foreground" />
</ToggleGroupItem>
</Tooltip>
<Tooltip content={t`Circle`}>
<ToggleGroupItem value="circle">
<div className="h-3 w-3 rounded-full border border-foreground" />
<div className="size-3 rounded-full border border-foreground" />
</ToggleGroupItem>
</Tooltip>
</ToggleGroup>

2
apps/client/src/pages/builder/sidebars/left/sections/picture/section.tsx
View File

@ -50,7 +50,7 @@ export const PictureSection = () => {
return (
<div className="flex items-center gap-x-4">
<div className="group relative cursor-pointer" onClick={onAvatarClick}>
<Avatar className="h-14 w-14 bg-secondary">
<Avatar className="size-14 bg-secondary">
<AvatarImage src={picture.url} />
</Avatar>

2
apps/client/src/pages/builder/sidebars/left/sections/shared/section-icon.tsx
View File

@ -71,7 +71,7 @@ export const SectionIcon = ({ id, name, icon, ...props }: SectionIconProps) => {
return (
<Tooltip side="right" content={name ?? section.name}>
<Button size="icon" variant="ghost" className="h-8 w-8 rounded-full" {...props}>
<Button size="icon" variant="ghost" className="size-8 rounded-full" {...props}>
{icon ?? getSectionIcon(id, { size: 14 })}
</Button>
</Tooltip>

2
apps/client/src/pages/builder/sidebars/right/sections/layout.tsx
View File

@ -242,7 +242,7 @@ export const LayoutSection = () => {
<Button
size="icon"
variant="ghost"
className="h-8 w-8"
className="size-8"
onClick={() => onRemovePage(pageIndex)}
>
<TrashSimple size={12} className="text-error" />

10
apps/client/src/pages/builder/sidebars/right/sections/theme.tsx
View File

@ -30,11 +30,11 @@ export const ThemeSection = () => {
setValue("metadata.theme.primary", color);
}}
className={cn(
"flex h-6 w-6 cursor-pointer items-center justify-center rounded-full ring-primary ring-offset-1 ring-offset-background transition-shadow hover:ring-1",
"flex size-6 cursor-pointer items-center justify-center rounded-full ring-primary ring-offset-1 ring-offset-background transition-shadow hover:ring-1",
theme.primary === color && "ring-1",
)}
>
<div className="h-5 w-5 rounded-full" style={{ backgroundColor: color }} />
<div className="size-5 rounded-full" style={{ backgroundColor: color }} />
</div>
))}
</div>
@ -45,7 +45,7 @@ export const ThemeSection = () => {
<Popover>
<PopoverTrigger asChild>
<div
className="absolute inset-y-0 left-3 my-2.5 h-4 w-4 cursor-pointer rounded-full ring-primary ring-offset-2 ring-offset-background transition-shadow hover:ring-1"
className="absolute inset-y-0 left-3 my-2.5 size-4 cursor-pointer rounded-full ring-primary ring-offset-2 ring-offset-background transition-shadow hover:ring-1"
style={{ backgroundColor: theme.primary }}
/>
</PopoverTrigger>
@ -75,7 +75,7 @@ export const ThemeSection = () => {
<Popover>
<PopoverTrigger asChild>
<div
className="absolute inset-y-0 left-3 my-2.5 h-4 w-4 cursor-pointer rounded-full ring-primary ring-offset-2 ring-offset-background transition-shadow hover:ring-1"
className="absolute inset-y-0 left-3 my-2.5 size-4 cursor-pointer rounded-full ring-primary ring-offset-2 ring-offset-background transition-shadow hover:ring-1"
style={{ backgroundColor: theme.background }}
/>
</PopoverTrigger>
@ -105,7 +105,7 @@ export const ThemeSection = () => {
<Popover>
<PopoverTrigger asChild>
<div
className="absolute inset-y-0 left-3 my-2.5 h-4 w-4 cursor-pointer rounded-full ring-primary ring-offset-2 ring-offset-background transition-shadow hover:ring-1"
className="absolute inset-y-0 left-3 my-2.5 size-4 cursor-pointer rounded-full ring-primary ring-offset-2 ring-offset-background transition-shadow hover:ring-1"
style={{ backgroundColor: theme.text }}
/>
</PopoverTrigger>

2
apps/client/src/pages/builder/sidebars/right/shared/section-icon.tsx
View File

@ -66,7 +66,7 @@ type SectionIconProps = ButtonProps & {
export const SectionIcon = ({ id, name, icon, ...props }: SectionIconProps) => (
<Tooltip side="left" content={name}>
<Button size="icon" variant="ghost" className="h-8 w-8 rounded-full" {...props}>
<Button size="icon" variant="ghost" className="size-8 rounded-full" {...props}>
{icon ?? getSectionIcon(id, { size: 14 })}
</Button>
</Tooltip>

4
apps/client/src/pages/dashboard/_components/sidebar.tsx
View File

@ -21,7 +21,7 @@ const ActiveIndicator = ({ className }: Props) => (
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
className={cn(
"h-1.5 w-1.5 animate-pulse rounded-full bg-info shadow-[0_0_12px] shadow-info",
"size-1.5 animate-pulse rounded-full bg-info shadow-[0_0_12px] shadow-info",
className,
)}
/>
@ -98,7 +98,7 @@ export const Sidebar = ({ setOpen }: SidebarProps) => {
return (
<div className="flex h-full flex-col gap-y-4">
<div className="ml-12 flex justify-center lg:ml-0">
<Button asChild size="icon" variant="ghost" className="h-10 w-10 p-0">
<Button asChild size="icon" variant="ghost" className="size-10 p-0">
<Link to="/">
<Icon size={24} className="mx-auto hidden lg:block" />
</Link>

2
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx
View File

@ -87,7 +87,7 @@ export const ResumeCard = ({ resume }: Props) => {
animate={{ opacity: 1 }}
loading="lazy"
alt={resume.title}
className="h-full w-full object-cover"
className="size-full object-cover"
src={`${url}?cache=${new Date().getTime()}`}
/>
)}

4
apps/client/src/pages/dashboard/resumes/_layouts/list/_components/base-item.tsx
View File

@ -19,12 +19,12 @@ export const BaseListItem = ({ title, description, start, end, className, onClic
>
<div className="flex w-full items-center justify-between">
<div className="flex items-center space-x-4">
<div className="flex h-5 w-5 items-center justify-center">{start}</div>
<div className="flex size-5 items-center justify-center">{start}</div>
<h4 className="w-[220px] truncate font-medium lg:w-[320px]">{title}</h4>
<p className="hidden text-xs opacity-75 sm:block">{description}</p>
</div>
{end && <div className="flex h-5 w-5 items-center justify-center">{end}</div>}
{end && <div className="flex size-5 items-center justify-center">{end}</div>}
</div>
</div>
);

4
apps/client/src/pages/dashboard/resumes/page.tsx
View File

@ -36,11 +36,11 @@ export const ResumesPage = () => {
</motion.h1>
<TabsList>
<TabsTrigger value="grid" className="h-8 w-8 p-0 sm:h-8 sm:w-auto sm:px-4">
<TabsTrigger value="grid" className="size-8 p-0 sm:h-8 sm:w-auto sm:px-4">
<SquaresFour />
<span className="ml-2 hidden sm:block">{t`Grid`}</span>
</TabsTrigger>
<TabsTrigger value="list" className="h-8 w-8 p-0 sm:h-8 sm:w-auto sm:px-4">
<TabsTrigger value="list" className="size-8 p-0 sm:h-8 sm:w-auto sm:px-4">
<List />
<span className="ml-2 hidden sm:block">{t`List`}</span>
</TabsTrigger>

19
apps/client/src/pages/home/components/footer.tsx
View File

@ -23,7 +23,24 @@ export const Footer = () => (
<Copyright className="mt-6" />
</div>
<div className="relative col-start-4">
<div className="relative col-start-4 flex flex-col items-end justify-end">
<div className="mb-14">
<a href="https://www.digitalocean.com/?utm_medium=opensource&utm_source=Reactive-Resume">
<img
src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_black.svg"
alt="Powered by DigitalOcean"
className="block dark:hidden"
width="150px"
/>
<img
src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_white.svg"
alt="Powered by DigitalOcean"
className="hidden dark:block"
width="150px"
/>
</a>
</div>
<div className="absolute bottom-0 right-0 lg:space-x-2">
<LocaleSwitch />
<ThemeSwitch />

2
apps/client/src/pages/home/sections/hero/decoration.tsx
View File

@ -2,7 +2,7 @@ export const Decoration = {
Grid: () => (
<svg
aria-hidden="true"
className="absolute inset-0 -z-10 h-full w-full stroke-foreground/10 opacity-60 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:opacity-40"
className="absolute inset-0 -z-10 size-full stroke-foreground/10 opacity-60 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:opacity-40"
>
<defs>
<pattern

2
libs/ui/src/components/accordion.tsx
View File

@ -28,7 +28,7 @@ export const AccordionTrigger = forwardRef<
{...props}
>
{children}
<CaretDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
<CaretDown className="size-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
));

6
libs/ui/src/components/avatar.tsx
View File

@ -8,7 +8,7 @@ export const Avatar = forwardRef<
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
className={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
{...props}
/>
));
@ -21,7 +21,7 @@ export const AvatarImage = forwardRef<
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square h-full w-full object-cover", className)}
className={cn("aspect-square size-full object-cover", className)}
{...props}
/>
));
@ -35,7 +35,7 @@ export const AvatarFallback = forwardRef<
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-secondary",
"flex size-full items-center justify-center rounded-full bg-secondary",
className,
)}
{...props}

2
libs/ui/src/components/checkbox.tsx
View File

@ -10,7 +10,7 @@ export const Checkbox = forwardRef<
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded border border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
"peer size-4 shrink-0 rounded border border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className,
)}
{...props}

4
libs/ui/src/components/combobox.tsx
View File

@ -81,7 +81,7 @@ export const Combobox = forwardRef(
</span>
<CaretDown
className={cn(
"ml-2 h-4 w-4 shrink-0 rotate-0 opacity-50 transition-transform",
"ml-2 size-4 shrink-0 rotate-0 opacity-50 transition-transform",
open && "rotate-180",
)}
/>
@ -119,7 +119,7 @@ export const Combobox = forwardRef(
>
<Check
className={cn(
"mr-2 h-4 w-4 opacity-0",
"mr-2 size-4 opacity-0",
!props.multiple && props.value === option.value && "opacity-100",
props.multiple && props.value?.includes(option.value) && "opacity-100",
)}

4
libs/ui/src/components/command.tsx
View File

@ -12,7 +12,7 @@ export const Command = forwardRef<
>(({ className, ...props }, ref) => (
<CommandPrimitive
ref={ref}
className={cn("flex h-full w-full flex-col overflow-hidden rounded border", className)}
className={cn("flex size-full flex-col overflow-hidden rounded border", className)}
{...props}
/>
));
@ -24,7 +24,7 @@ interface CommandDialogProps extends DialogProps {}
export const CommandDialog = ({ children, ...props }: CommandDialogProps) => (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-secondary [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-secondary [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
{children}
</Command>
</DialogContent>

6
libs/ui/src/components/context-menu.tsx
View File

@ -31,7 +31,7 @@ export const ContextMenuSubTrigger = forwardRef<
{...props}
>
{children}
<CaretRight className="ml-auto h-4 w-4" />
<CaretRight className="ml-auto size-4" />
</ContextMenuPrimitive.SubTrigger>
));
@ -103,7 +103,7 @@ export const ContextMenuCheckboxItem = forwardRef<
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-4 w-4 items-center justify-center">
<span className="absolute left-2 flex size-4 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<Check size={14} />
</ContextMenuPrimitive.ItemIndicator>
@ -126,7 +126,7 @@ export const ContextMenuRadioItem = forwardRef<
)}
{...props}
>
<span className="absolute left-2 flex h-4 w-4 items-center justify-center">
<span className="absolute left-2 flex size-4 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<Check size={14} className="fill-current" />
</ContextMenuPrimitive.ItemIndicator>

2
libs/ui/src/components/dialog.tsx
View File

@ -45,7 +45,7 @@ export const DialogContent = forwardRef<
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary data-[state=open]:text-secondary-foreground">
<X className="h-4 w-4" />
<X className="size-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>

8
libs/ui/src/components/dropdown-menu.tsx
View File

@ -31,7 +31,7 @@ export const DropdownMenuSubTrigger = forwardRef<
{...props}
>
{children}
<CaretRight className="ml-auto h-4 w-4" />
<CaretRight className="ml-auto size-4" />
</DropdownMenuPrimitive.SubTrigger>
));
@ -109,9 +109,9 @@ export const DropdownMenuCheckboxItem = forwardRef<
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<span className="absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
<Check className="size-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
@ -132,7 +132,7 @@ export const DropdownMenuRadioItem = forwardRef<
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<span className="absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<DotOutline size={18} weight="fill" className="fill-current" />
</DropdownMenuPrimitive.ItemIndicator>

2
libs/ui/src/components/scroll-area.tsx
View File

@ -26,7 +26,7 @@ export const ScrollArea = forwardRef<
className={cn("relative overflow-hidden", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
<ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar orientation={orientation} className={cn(hideScrollbar && "opacity-0")} />

6
libs/ui/src/components/select.tsx
View File

@ -23,7 +23,7 @@ export const SelectTrigger = forwardRef<
>
{children}
<SelectPrimitive.Icon asChild>
<CaretUpDown className="h-4 w-4 opacity-50" />
<CaretUpDown className="size-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
@ -86,9 +86,9 @@ export const SelectItem = forwardRef<
)}
{...props}
>
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
<span className="absolute right-2 flex size-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
<Check className="size-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

2
libs/ui/src/components/sheet.tsx
View File

@ -51,7 +51,7 @@ export const SheetContent = forwardRef<
{showClose && (
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" />
<X className="size-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
)}

2
libs/ui/src/components/slider.tsx
View File

@ -14,7 +14,7 @@ export const Slider = forwardRef<
<SliderPrimitive.Track className="relative h-2.5 w-full grow overflow-hidden rounded-full bg-secondary">
<SliderPrimitive.Range className="absolute h-full bg-primary" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
<SliderPrimitive.Thumb className="block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
</SliderPrimitive.Root>
));

2
libs/ui/src/components/switch.tsx
View File

@ -16,7 +16,7 @@ export const Switch = forwardRef<
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
"pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
)}
/>
</SwitchPrimitives.Root>

2
libs/ui/src/components/toast.tsx
View File

@ -80,7 +80,7 @@ export const ToastClose = forwardRef<
toast-close=""
{...props}
>
<X className="h-4 w-4" />
<X className="size-4" />
</ToastPrimitives.Close>
));

2
libs/ui/src/variants/button.ts
View File

@ -20,7 +20,7 @@ export const buttonVariants = cva(
sm: "h-8 px-4 text-xs",
md: "h-9 px-5",
lg: "h-10 px-6",
icon: "h-9 w-9",
icon: "size-9",
},
},
compoundVariants: [

6
libs/ui/src/variants/toggle.ts
View File

@ -9,9 +9,9 @@ export const toggleVariants = cva(
outline: "border bg-transparent hover:bg-secondary/60 hover:text-secondary-foreground",
},
size: {
sm: "h-8 w-8",
md: "h-9 w-9",
lg: "h-10 w-10",
sm: "size-8",
md: "size-9",
lg: "size-10",
},
},
defaultVariants: {