Skip to content
This repository was archived by the owner on May 26, 2025. It is now read-only.

Commit a702f31

Browse files
author
nyxb
committed
♻️ refactor(ui components): replace cn utility with ny for class name concatenation to align with updated utility function naming conventions
1 parent 283b44d commit a702f31

26 files changed

+107
-107
lines changed

‎apps/web/registry/miami/ui/magic-card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import type { CSSProperties, ReactElement, ReactNode } from 'react'
44
import { useEffect, useRef, useState } from 'react'
5-
import { cn } from '~/lib/utils'
5+
import { ny } from '~/lib/utils'
66

77
interface MousePosition {
88
x: number
@@ -96,7 +96,7 @@ function MagicContainer({ children, className }: MagicContainerProps) {
9696
}
9797

9898
return (
99-
<div className={cn('h-full w-full', className)} ref={containerRef}>
99+
<div className={ny('h-full w-full', className)} ref={containerRef}>
100100
{children}
101101
</div>
102102
)
@@ -186,7 +186,7 @@ const MagicCard: React.FC<MagicCardProps> = ({
186186
'--border-color': `${borderColor}`,
187187
} as CSSProperties
188188
}
189-
className={cn(
189+
className={ny(
190190
'relative z-0 h-full w-full rounded-2xl p-6',
191191
'bg-gray-300 dark:bg-gray-700',
192192
'bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]',

‎apps/web/registry/miami/ui/marquee.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { cn } from '~/lib/utils'
1+
import { ny } from '~/lib/utils'
22

33
interface MarqueeProps {
44
className?: string
@@ -22,7 +22,7 @@ export default function Marquee({
2222
return (
2323
<div
2424
{...props}
25-
className={cn(
25+
className={ny(
2626
'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]',
2727
{
2828
'flex-row': !vertical,
@@ -36,7 +36,7 @@ export default function Marquee({
3636
.map((_, i) => (
3737
<div
3838
key={i}
39-
className={cn('flex shrink-0 justify-around [gap:var(--gap)]', {
39+
className={ny('flex shrink-0 justify-around [gap:var(--gap)]', {
4040
'animate-marquee flex-row': !vertical,
4141
'animate-marquee-vertical flex-col': vertical,
4242
'group-hover:[animation-play-state:paused]': pauseOnHover,

‎apps/web/registry/miami/ui/menubar.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from '@radix-ui/react-icons'
99
import * as MenubarPrimitive from '@radix-ui/react-menubar'
1010

11-
import { cn } from '~/lib/utils'
11+
import { ny } from '~/lib/utils'
1212

1313
const MenubarMenu = MenubarPrimitive.Menu
1414

@@ -26,7 +26,7 @@ const Menubar = React.forwardRef<
2626
>(({ className, ...props }, ref) => (
2727
<MenubarPrimitive.Root
2828
ref={ref}
29-
className={cn(
29+
className={ny(
3030
'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
3131
className,
3232
)}
@@ -41,7 +41,7 @@ const MenubarTrigger = React.forwardRef<
4141
>(({ className, ...props }, ref) => (
4242
<MenubarPrimitive.Trigger
4343
ref={ref}
44-
className={cn(
44+
className={ny(
4545
'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
4646
className,
4747
)}
@@ -58,7 +58,7 @@ const MenubarSubTrigger = React.forwardRef<
5858
>(({ className, inset, children, ...props }, ref) => (
5959
<MenubarPrimitive.SubTrigger
6060
ref={ref}
61-
className={cn(
61+
className={ny(
6262
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
6363
inset && 'pl-8',
6464
className,
@@ -77,7 +77,7 @@ const MenubarSubContent = React.forwardRef<
7777
>(({ className, ...props }, ref) => (
7878
<MenubarPrimitive.SubContent
7979
ref={ref}
80-
className={cn(
80+
className={ny(
8181
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
8282
className,
8383
)}
@@ -100,7 +100,7 @@ const MenubarContent = React.forwardRef<
100100
align={align}
101101
alignOffset={alignOffset}
102102
sideOffset={sideOffset}
103-
className={cn(
103+
className={ny(
104104
'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
105105
className,
106106
)}
@@ -119,7 +119,7 @@ const MenubarItem = React.forwardRef<
119119
>(({ className, inset, ...props }, ref) => (
120120
<MenubarPrimitive.Item
121121
ref={ref}
122-
className={cn(
122+
className={ny(
123123
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
124124
inset && 'pl-8',
125125
className,
@@ -135,7 +135,7 @@ const MenubarCheckboxItem = React.forwardRef<
135135
>(({ className, children, checked, ...props }, ref) => (
136136
<MenubarPrimitive.CheckboxItem
137137
ref={ref}
138-
className={cn(
138+
className={ny(
139139
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
140140
className,
141141
)}
@@ -158,7 +158,7 @@ const MenubarRadioItem = React.forwardRef<
158158
>(({ className, children, ...props }, ref) => (
159159
<MenubarPrimitive.RadioItem
160160
ref={ref}
161-
className={cn(
161+
className={ny(
162162
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
163163
className,
164164
)}
@@ -182,7 +182,7 @@ const MenubarLabel = React.forwardRef<
182182
>(({ className, inset, ...props }, ref) => (
183183
<MenubarPrimitive.Label
184184
ref={ref}
185-
className={cn(
185+
className={ny(
186186
'px-2 py-1.5 text-sm font-semibold',
187187
inset && 'pl-8',
188188
className,
@@ -198,7 +198,7 @@ const MenubarSeparator = React.forwardRef<
198198
>(({ className, ...props }, ref) => (
199199
<MenubarPrimitive.Separator
200200
ref={ref}
201-
className={cn('-mx-1 my-1 h-px bg-muted', className)}
201+
className={ny('-mx-1 my-1 h-px bg-muted', className)}
202202
{...props}
203203
/>
204204
))
@@ -210,7 +210,7 @@ function MenubarShortcut({
210210
}: React.HTMLAttributes<HTMLSpanElement>) {
211211
return (
212212
<span
213-
className={cn(
213+
className={ny(
214214
'ml-auto text-xs tracking-widest text-muted-foreground',
215215
className,
216216
)}

‎apps/web/registry/miami/ui/multi-select.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state'
77
import { Check, ChevronsUpDown, X } from 'lucide-react'
88
import { createPortal } from 'react-dom'
99

10-
import { cn } from '~/lib/utils'
10+
import { ny } from '~/lib/utils'
1111
import { Badge } from '~/registry/miami/ui/badge'
1212
import {
1313
Command,
@@ -205,7 +205,7 @@ const MultiSelectTrigger = React.forwardRef<
205205
aria-disabled={disabled}
206206
data-disabled={disabled}
207207
{...props}
208-
className={cn(
208+
className={ny(
209209
'flex h-full min-h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring [&>span]:line-clamp-1',
210210
disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text',
211211
className,
@@ -259,7 +259,7 @@ const MultiSelectValue = React.forwardRef<
259259
return (
260260
<TooltipProvider delayDuration={300}>
261261
<div
262-
className={cn(
262+
className={ny(
263263
'flex flex-1 overflow-x-hidden flex-wrap items-center gap-1.5',
264264
className,
265265
)}
@@ -343,7 +343,7 @@ const MultiSelectList = React.forwardRef<
343343
return (
344344
<CommandList
345345
ref={ref}
346-
className={cn('py-1 px-0 max-h-[unset]', className)}
346+
className={ny('py-1 px-0 max-h-[unset]', className)}
347347
{...props}
348348
/>
349349
)
@@ -378,7 +378,7 @@ const MultiSelectContent = React.forwardRef<
378378
align="start"
379379
sideOffset={4}
380380
collisionPadding={10}
381-
className={cn(
381+
className={ny(
382382
'z-50 w-full rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
383383
)}
384384
style={
@@ -397,7 +397,7 @@ const MultiSelectContent = React.forwardRef<
397397
{...props}
398398
>
399399
<Command
400-
className={cn(
400+
className={ny(
401401
'px-1 max-h-96 w-full min-w-[var(--radix-select-trigger-width)]',
402402
className,
403403
)}
@@ -478,7 +478,7 @@ const MultiSelectItem = React.forwardRef<
478478
<CommandItem
479479
{...props}
480480
value={value}
481-
className={cn(
481+
className={ny(
482482
disabled && 'text-muted-foreground cursor-not-allowed',
483483
className,
484484
)}

‎apps/web/registry/miami/ui/navigation-menu.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import { ChevronDownIcon } from '@radix-ui/react-icons'
33
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
44
import { cva } from 'class-variance-authority'
55

6-
import { cn } from '~/lib/utils'
6+
import { ny } from '~/lib/utils'
77

88
const NavigationMenu = React.forwardRef<
99
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
1010
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
1111
>(({ className, children, ...props }, ref) => (
1212
<NavigationMenuPrimitive.Root
1313
ref={ref}
14-
className={cn(
14+
className={ny(
1515
'relative z-10 flex max-w-max flex-1 items-center justify-center',
1616
className,
1717
)}
@@ -29,7 +29,7 @@ const NavigationMenuList = React.forwardRef<
2929
>(({ className, ...props }, ref) => (
3030
<NavigationMenuPrimitive.List
3131
ref={ref}
32-
className={cn(
32+
className={ny(
3333
'group flex flex-1 list-none items-center justify-center space-x-1',
3434
className,
3535
)}
@@ -50,7 +50,7 @@ const NavigationMenuTrigger = React.forwardRef<
5050
>(({ className, children, ...props }, ref) => (
5151
<NavigationMenuPrimitive.Trigger
5252
ref={ref}
53-
className={cn(navigationMenuTriggerStyle(), 'group', className)}
53+
className={ny(navigationMenuTriggerStyle(), 'group', className)}
5454
{...props}
5555
>
5656
{children}
@@ -69,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
6969
>(({ className, ...props }, ref) => (
7070
<NavigationMenuPrimitive.Content
7171
ref={ref}
72-
className={cn(
72+
className={ny(
7373
'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
7474
className,
7575
)}
@@ -84,9 +84,9 @@ const NavigationMenuViewport = React.forwardRef<
8484
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
8585
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
8686
>(({ className, ...props }, ref) => (
87-
<div className={cn('absolute left-0 top-full flex justify-center')}>
87+
<div className={ny('absolute left-0 top-full flex justify-center')}>
8888
<NavigationMenuPrimitive.Viewport
89-
className={cn(
89+
className={ny(
9090
'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
9191
className,
9292
)}
@@ -104,7 +104,7 @@ const NavigationMenuIndicator = React.forwardRef<
104104
>(({ className, ...props }, ref) => (
105105
<NavigationMenuPrimitive.Indicator
106106
ref={ref}
107-
className={cn(
107+
className={ny(
108108
'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
109109
className,
110110
)}

‎apps/web/registry/miami/ui/neon-gradient-card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import type { CSSProperties, ReactElement, ReactNode } from 'react'
44
import { useEffect, useRef, useState } from 'react'
5-
import { cn } from '~/lib/utils'
5+
import { ny } from '~/lib/utils'
66

77
interface NeonColorsProps {
88
firstColor: string
@@ -115,14 +115,14 @@ const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
115115
'--after-blur': `${dimensions.width / 3}px`,
116116
} as CSSProperties
117117
}
118-
className={cn(
118+
className={ny(
119119
'relative z-10 h-full w-full rounded-[var(--border-radius)]',
120120
className,
121121
)}
122122
{...props}
123123
>
124124
<div
125-
className={cn(
125+
className={ny(
126126
'relative h-full min-h-[inherit] w-full rounded-[var(--card-content-radius)] bg-gray-100 p-6',
127127
'before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block',
128128
'before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-[\'\']',

‎apps/web/registry/miami/ui/number-ticker.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useInView, useMotionValue, useSpring } from 'framer-motion'
44
import { useEffect, useRef } from 'react'
5-
import { cn } from '~/lib/utils'
5+
import { ny } from '~/lib/utils'
66

77
export default function NumberTicker({
88
value,
@@ -44,7 +44,7 @@ export default function NumberTicker({
4444

4545
return (
4646
<span
47-
className={cn(
47+
className={ny(
4848
'inline-block tabular-nums text-black dark:text-white tracking-wider',
4949
className,
5050
)}

‎apps/web/registry/miami/ui/orbiting-circles.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { cn } from '~/lib/utils'
1+
import { ny } from '~/lib/utils'
22

33
export default function OrbitingCircles({
44
className,
@@ -44,7 +44,7 @@ export default function OrbitingCircles({
4444
'--delay': -delay,
4545
} as React.CSSProperties
4646
}
47-
className={cn(
47+
className={ny(
4848
'absolute flex h-full w-full transform-gpu animate-orbit items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10',
4949
{ '[animation-direction:reverse]': reverse },
5050
className,

0 commit comments

Comments
 (0)