ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-17 20:49:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: group some utility classes

Browse Source
This commit is contained in:
rusconn
2023-06-24 19:11:57 +09:00
parent 8d658855ac
commit 3112e80544
8 changed files with 51 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/ui/input.tsx
View File

@@ -9,7 +9,11 @@ const RawInput = React.forwardRef<HTMLInputElement, InputProps>(({ className, ..
<input
{...{ ref }}
className={cn(
"border-b-1 flex h-9 w-full rounded border border-b-muted-foreground bg-input px-3 py-2 font-mono outline-none placeholder:text-muted-foreground hover:bg-input-hover focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px] disabled:cursor-not-allowed disabled:opacity-50",
"border-b-1 flex h-9 w-full rounded border border-b-muted-foreground bg-input px-3 py-2 font-mono outline-none",
"placeholder:text-muted-foreground",
"hover:bg-input-hover",
"focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px]",
"disabled:cursor-not-allowed disabled:opacity-50",
className
)}
spellCheck="false"

3
components/ui/label.tsx
View File

@@ -12,7 +12,8 @@ export const Label = React.forwardRef<
<LabelPrimitive.Root
{...{ ref }}
className={cn(
"leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
"leading-none",
"peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
className
)}
{...props}

9
components/ui/select.tsx
View File

@@ -20,7 +20,10 @@ export const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
{...{ ref }}
className={cn(
"flex h-9 w-full items-center justify-between rounded-md border bg-select px-2.5 py-1.5 placeholder:text-muted-foreground hover:bg-select-hover disabled:cursor-not-allowed disabled:opacity-50",
"flex h-9 w-full items-center justify-between rounded-md border bg-select px-2.5 py-1.5",
"placeholder:text-muted-foreground",
"hover:bg-select-hover",
"disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
@@ -80,7 +83,9 @@ export const SelectItem = React.forwardRef<
<SelectPrimitive.Item
{...{ ref }}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm px-2.5 py-1.5 outline-none hover:bg-select-item-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex w-full cursor-default select-none items-center rounded-sm px-2.5 py-1.5 outline-none",
"hover:bg-select-item-hover",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}

14
components/ui/switch.tsx
View File

@@ -12,14 +12,24 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
<SwitchPrimitives.Root
{...{ ref }}
className={cn(
"group inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border border-muted-foreground bg-switch hover:bg-switch-hover disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-switch data-[state=checked]:border-transparent data-[state=checked]:bg-indicator data-[state=checked]:hover:bg-indicator-hover data-[state=checked]:disabled:hover:bg-indicator",
"group inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border border-muted-foreground bg-switch",
"hover:bg-switch-hover",
"disabled:cursor-not-allowed disabled:opacity-50",
"hover:disabled:bg-switch",
"data-[state=checked]:border-transparent data-[state=checked]:bg-indicator",
"data-[state=checked]:hover:bg-indicator-hover",
"data-[state=checked]:disabled:hover:bg-indicator",
className
)}
{...props}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-3.5 w-3.5 rounded-full bg-foreground/80 shadow-lg transition-transform group-hover:h-4 group-hover:w-4 group-disabled:h-3.5 group-disabled:w-3.5 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0.5 data-[state=checked]:bg-background"
"pointer-events-none block h-3.5 w-3.5 rounded-full bg-foreground/80 shadow-lg transition-transform",
"group-hover:h-4 group-hover:w-4",
"group-disabled:h-3.5 group-disabled:w-3.5",
"data-[state=checked]:translate-x-[22px] data-[state=checked]:bg-background",
"data-[state=unchecked]:translate-x-0.5"
)}
/>
</SwitchPrimitives.Root>

6
components/ui/textarea.tsx
View File

@@ -10,7 +10,11 @@ export const RawTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
<textarea
{...{ ref }}
className={cn(
"border-b-1 flex w-full resize-none rounded border border-b-muted-foreground bg-textarea px-3 py-2 font-mono outline-none placeholder:text-muted-foreground hover:bg-textarea-hover focus:border-b-2 focus:border-b-indicator focus:bg-textarea-focus focus:pb-[7px] disabled:cursor-not-allowed disabled:opacity-50",
"border-b-1 flex w-full resize-none rounded border border-b-muted-foreground bg-textarea px-3 py-2 font-mono outline-none",
"placeholder:text-muted-foreground",
"hover:bg-textarea-hover",
"focus:border-b-2 focus:border-b-indicator focus:bg-textarea-focus focus:pb-[7px]",
"disabled:cursor-not-allowed disabled:opacity-50",
className
)}
spellCheck="false"

6
components/ui/tooltip.tsx
View File

@@ -16,7 +16,11 @@ export const TooltipContent = React.forwardRef<
<TooltipPrimitive.Content
{...{ ref, sideOffset }}
className={cn(
"z-50 overflow-hidden rounded-md border bg-tooltip px-3 py-1.5 text-tooltip-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
"z-50 overflow-hidden rounded-md border bg-tooltip px-3 py-1.5 text-tooltip-foreground shadow-md animate-in fade-in-50",
"data-[side=bottom]:slide-in-from-top-1",
"data-[side=left]:slide-in-from-right-1",
"data-[side=right]:slide-in-from-left-1",
"data-[side=top]:slide-in-from-bottom-1",
className
)}
{...props}