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

Commit 283b44d

Browse files
author
nyxb
committed
🎨 style: replace 'cn' utility function with 'ny' across multiple UI components for consistency
1 parent 91f664a commit 283b44d

File tree

20 files changed

+89
-89
lines changed

20 files changed

+89
-89
lines changed

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { cva } from 'class-variance-authority'
55
import type { LucideIcon } from 'lucide-react'
66
import { CheckIcon, Loader2, X } from 'lucide-react'
77

8-
import { cn } from '~/lib/utils'
8+
import { ny } from '~/lib/utils'
99
import { Button } from '~/registry/miami/ui/button'
1010
import {
1111
Collapsible,
@@ -282,7 +282,7 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
282282
>
283283
<div
284284
ref={ref}
285-
className={cn(
285+
className={ny(
286286
'stepper__main-container',
287287
'flex w-full flex-wrap',
288288
stepCount === 1 ? 'justify-end' : 'justify-between',
@@ -475,7 +475,7 @@ const verticalStepVariants = cva(
475475
{
476476
variants: {
477477
variant: {
478-
circle: cn(
478+
circle: ny(
479479
'[&:not(:last-child)]:pb-[var(--step-gap)] [&:not(:last-child)]:gap-[var(--step-gap)]',
480480
'[&:not(:last-child)]:after:content-[\'\'] [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:bg-border',
481481
'[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]',
@@ -572,7 +572,7 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
572572
return (
573573
<div
574574
ref={ref}
575-
className={cn(
575+
className={ny(
576576
'stepper__vertical-step',
577577
verticalStepVariants({
578578
variant: variant?.includes('circle') ? 'circle' : 'line',
@@ -595,7 +595,7 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
595595
<div
596596
data-vertical
597597
data-active={active}
598-
className={cn(
598+
className={ny(
599599
'stepper__vertical-step-container',
600600
'flex items-center',
601601
variant === 'line'
@@ -626,7 +626,7 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
626626
/>
627627
</div>
628628
<div
629-
className={cn(
629+
className={ny(
630630
'stepper__vertical-step-content',
631631
!isLastStep && 'min-h-4',
632632
variant !== 'line' && 'ps-[--step-icon-size]',
@@ -686,7 +686,7 @@ const HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(
686686
return (
687687
<div
688688
aria-disabled={!hasVisited}
689-
className={cn(
689+
className={ny(
690690
'stepper__horizontal-step',
691691
'flex items-center relative transition-all duration-200',
692692
'[&:not(:last-child)]:flex-1',
@@ -711,7 +711,7 @@ const HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(
711711
ref={ref}
712712
>
713713
<div
714-
className={cn(
714+
className={ny(
715715
'stepper__horizontal-step-container',
716716
'flex items-center',
717717
variant === 'circle-alt' && 'flex-col justify-center gap-1',
@@ -779,7 +779,7 @@ function StepButtonContainer({
779779
<Button
780780
variant="ghost"
781781
tabIndex={currentStepClickable ? 0 : -1}
782-
className={cn(
782+
className={ny(
783783
'stepper__step-button-container',
784784
'rounded-full p-0 pointer-events-none',
785785
'w-[var(--step-icon-size)] h-[var(--step-icon-size)]',
@@ -867,49 +867,49 @@ const StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(
867867
if (isError && isKeepError) {
868868
return (
869869
<div key="icon">
870-
<X className={cn(iconVariants({ size }))} />
870+
<X className={ny(iconVariants({ size }))} />
871871
</div>
872872
)
873873
}
874874
return (
875875
<div key="check-icon">
876-
<Check className={cn(iconVariants({ size }))} />
876+
<Check className={ny(iconVariants({ size }))} />
877877
</div>
878878
)
879879
}
880880
if (isCurrentStep) {
881881
if (isError && ErrorIcon) {
882882
return (
883883
<div key="error-icon">
884-
<ErrorIcon className={cn(iconVariants({ size }))} />
884+
<ErrorIcon className={ny(iconVariants({ size }))} />
885885
</div>
886886
)
887887
}
888888
if (isError) {
889889
return (
890890
<div key="icon">
891-
<X className={cn(iconVariants({ size }))} />
891+
<X className={ny(iconVariants({ size }))} />
892892
</div>
893893
)
894894
}
895895
if (isLoading) {
896896
return (
897-
<Loader2 className={cn(iconVariants({ size }), 'animate-spin')} />
897+
<Loader2 className={ny(iconVariants({ size }), 'animate-spin')} />
898898
)
899899
}
900900
}
901901
if (Icon) {
902902
return (
903903
<div key="step-icon">
904-
<Icon className={cn(iconVariants({ size }))} />
904+
<Icon className={ny(iconVariants({ size }))} />
905905
</div>
906906
)
907907
}
908908
return (
909909
<span
910910
ref={ref}
911911
key="label"
912-
className={cn('font-medium text-center text-md')}
912+
className={ny('font-medium text-center text-md')}
913913
>
914914
{(index || 0) + 1}
915915
</span>
@@ -978,7 +978,7 @@ function StepLabel({
978978
? (
979979
<div
980980
aria-current={isCurrentStep ? 'step' : undefined}
981-
className={cn(
981+
className={ny(
982982
'stepper__step-label-container',
983983
'flex-col flex',
984984
variant !== 'line' ? 'ms-2' : orientation === 'horizontal' && 'my-2',
@@ -993,7 +993,7 @@ function StepLabel({
993993
>
994994
{!!label && (
995995
<span
996-
className={cn(
996+
className={ny(
997997
'stepper__step-label',
998998
labelVariants({ size }),
999999
styles?.['step-label'],
@@ -1004,7 +1004,7 @@ function StepLabel({
10041004
)}
10051005
{!!description && (
10061006
<span
1007-
className={cn(
1007+
className={ny(
10081008
'stepper__step-description',
10091009
'text-muted-foreground',
10101010
descriptionVariants({ size }),

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@
33
import * as React from 'react'
44
import * as SwitchPrimitives from '@radix-ui/react-switch'
55

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

88
const Switch = React.forwardRef<
99
React.ElementRef<typeof SwitchPrimitives.Root>,
1010
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
1111
>(({ className, ...props }, ref) => (
1212
<SwitchPrimitives.Root
13-
className={cn(
13+
className={ny(
1414
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
1515
className,
1616
)}
1717
{...props}
1818
ref={ref}
1919
>
2020
<SwitchPrimitives.Thumb
21-
className={cn(
21+
className={ny(
2222
'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
2323
)}
2424
/>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22

3-
import { cn } from '~/lib/utils'
3+
import { ny } from '~/lib/utils'
44

55
const Table = React.forwardRef<
66
HTMLTableElement,
@@ -9,7 +9,7 @@ const Table = React.forwardRef<
99
<div className="relative w-full overflow-auto">
1010
<table
1111
ref={ref}
12-
className={cn('w-full caption-bottom text-sm', className)}
12+
className={ny('w-full caption-bottom text-sm', className)}
1313
{...props}
1414
/>
1515
</div>
@@ -20,7 +20,7 @@ const TableHeader = React.forwardRef<
2020
HTMLTableSectionElement,
2121
React.HTMLAttributes<HTMLTableSectionElement>
2222
>(({ className, ...props }, ref) => (
23-
<thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
23+
<thead ref={ref} className={ny('[&_tr]:border-b', className)} {...props} />
2424
))
2525
TableHeader.displayName = 'TableHeader'
2626

@@ -30,7 +30,7 @@ const TableBody = React.forwardRef<
3030
>(({ className, ...props }, ref) => (
3131
<tbody
3232
ref={ref}
33-
className={cn('[&_tr:last-child]:border-0', className)}
33+
className={ny('[&_tr:last-child]:border-0', className)}
3434
{...props}
3535
/>
3636
))
@@ -42,7 +42,7 @@ const TableFooter = React.forwardRef<
4242
>(({ className, ...props }, ref) => (
4343
<tfoot
4444
ref={ref}
45-
className={cn(
45+
className={ny(
4646
'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
4747
className,
4848
)}
@@ -57,7 +57,7 @@ const TableRow = React.forwardRef<
5757
>(({ className, ...props }, ref) => (
5858
<tr
5959
ref={ref}
60-
className={cn(
60+
className={ny(
6161
'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
6262
className,
6363
)}
@@ -72,7 +72,7 @@ const TableHead = React.forwardRef<
7272
>(({ className, ...props }, ref) => (
7373
<th
7474
ref={ref}
75-
className={cn(
75+
className={ny(
7676
'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
7777
className,
7878
)}
@@ -87,7 +87,7 @@ const TableCell = React.forwardRef<
8787
>(({ className, ...props }, ref) => (
8888
<td
8989
ref={ref}
90-
className={cn(
90+
className={ny(
9191
'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
9292
className,
9393
)}
@@ -102,7 +102,7 @@ const TableCaption = React.forwardRef<
102102
>(({ className, ...props }, ref) => (
103103
<caption
104104
ref={ref}
105-
className={cn('mt-4 text-sm text-muted-foreground', className)}
105+
className={ny('mt-4 text-sm text-muted-foreground', className)}
106106
{...props}
107107
/>
108108
))

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import * as React from 'react'
44
import * as TabsPrimitive from '@radix-ui/react-tabs'
55

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

88
const Tabs = TabsPrimitive.Root
99

@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
1313
>(({ className, ...props }, ref) => (
1414
<TabsPrimitive.List
1515
ref={ref}
16-
className={cn(
16+
className={ny(
1717
'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
1818
className,
1919
)}
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
2828
>(({ className, ...props }, ref) => (
2929
<TabsPrimitive.Trigger
3030
ref={ref}
31-
className={cn(
31+
className={ny(
3232
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
3333
className,
3434
)}
@@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
4343
>(({ className, ...props }, ref) => (
4444
<TabsPrimitive.Content
4545
ref={ref}
46-
className={cn(
46+
className={ny(
4747
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
4848
className,
4949
)}

‎apps/web/registry/miami/ui/text-reveal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { motion, useScroll, useTransform } from 'framer-motion'
44
import type { FC, ReactNode } from 'react'
55
import { useRef } from 'react'
6-
import { cn } from '~/lib/utils'
6+
import { ny } from '~/lib/utils'
77

88
interface TextRevealByWordProps {
99
text: string
@@ -22,7 +22,7 @@ export const TextRevealByWord: FC<TextRevealByWordProps> = ({
2222
const words = text.split(' ')
2323

2424
return (
25-
<div ref={targetRef} className={cn('relative z-0 h-[200vh]', className)}>
25+
<div ref={targetRef} className={ny('relative z-0 h-[200vh]', className)}>
2626
<div className="sticky top-0 mx-auto flex h-[50%] max-w-4xl items-center bg-transparent px-[1rem] py-[5rem]">
2727
<p
2828
ref={targetRef}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22

3-
import { cn } from '~/lib/utils'
3+
import { ny } from '~/lib/utils'
44

55
export interface TextareaProps
66
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
99
({ className, ...props }, ref) => {
1010
return (
1111
<textarea
12-
className={cn(
12+
className={ny(
1313
'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
1414
className,
1515
)}

0 commit comments

Comments
 (0)