Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-09-09 05:58:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: improve the switch component

Browse Source
This commit is contained in:
ghost2023
2026-05-22 15:42:56 +03:00
parent e9362abecd
commit 6287022a53
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/ui-common/src/components/switch.tsx
View File

@@ -1,33 +1,33 @@
import * as React from "react" import * as React from "react";
import { Switch as SwitchPrimitive } from "radix-ui" import { Switch as SwitchPrimitive } from "radix-ui";
import { cn } from "../lib/utils" import { cn } from "../lib/utils";
function Switch({ function Switch({
className, className,
size = "default", size = "default",
...props ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & { }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
size?: "sm" | "default" size?: "sm" | "default" | "lg";
}) { }) {
return ( return (
<SwitchPrimitive.Root <SwitchPrimitive.Root
data-slot="switch" data-slot="switch"
data-size={size} data-size={size}
className={cn( className={cn(
"peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 p-0.5 h-auto data-[size=lg]:w-10 data-[size=default]:w-8 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
className className,
)} )}
{...props} {...props}
> >
<SwitchPrimitive.Thumb <SwitchPrimitive.Thumb
data-slot="switch-thumb" data-slot="switch-thumb"
className={cn( className={cn(
"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground" "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=lg]/switch:size-5 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-7px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
)} )}
/> />
</SwitchPrimitive.Root> </SwitchPrimitive.Root>
) );
} }
export { Switch } export { Switch };

1
packages/ui-common/src/index.ts
View File

@@ -32,4 +32,5 @@ export * from "./components/dialog";
export * from "./components/SmartFileInput"; export * from "./components/SmartFileInput";
export * from "./components/select"; export * from "./components/select";
export * from "./components/switch"; export * from "./components/switch";
export * from "./components/separator";
export * from "./components/field"; export * from "./components/field";