File tree Expand file tree Collapse file tree 2 files changed +64
-0
lines changed
frontend/src/components/ui Expand file tree Collapse file tree 2 files changed +64
-0
lines changed Original file line number Diff line number Diff line change 1+ "use client"
2+
3+ import * as React from "react"
4+ import * as LabelPrimitive from "@radix-ui/react-label"
5+ import { cva , type VariantProps } from "class-variance-authority"
6+
7+ import { cn } from "@/lib/utils"
8+
9+ const labelVariants = cva (
10+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11+ )
12+
13+ const Label = React . forwardRef <
14+ React . ElementRef < typeof LabelPrimitive . Root > ,
15+ React . ComponentPropsWithoutRef < typeof LabelPrimitive . Root > &
16+ VariantProps < typeof labelVariants >
17+ > ( ( { className, ...props } , ref ) => (
18+ < LabelPrimitive . Root
19+ ref = { ref }
20+ className = { cn ( labelVariants ( ) , className ) }
21+ { ...props }
22+ />
23+ ) )
24+ Label . displayName = LabelPrimitive . Root . displayName
25+
26+ export { Label }
Original file line number Diff line number Diff line change 1+ "use client"
2+
3+ import * as React from "react"
4+ import * as SwitchPrimitives from "@radix-ui/react-switch"
5+ import { cva , type VariantProps } from "class-variance-authority" // cva might not be strictly necessary here but often included
6+
7+ import { cn } from "@/lib/utils"
8+
9+ // Base styling for the switch, derived from typical ShadCN setups.
10+ // It uses data-state attributes for checked/unchecked states.
11+ const switchRootVariants = cva (
12+ "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent 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" ,
13+ {
14+ variants : { } , // No specific variants defined here, but structure allows for it
15+ defaultVariants : { } ,
16+ }
17+ )
18+
19+ const switchThumbVariants = cva ( // Also define thumb variants if you want to customize it via cva
20+ "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"
21+ )
22+
23+
24+ const Switch = React . forwardRef <
25+ React . ElementRef < typeof SwitchPrimitives . Root > ,
26+ React . ComponentPropsWithoutRef < typeof SwitchPrimitives . Root > & VariantProps < typeof switchRootVariants >
27+ > ( ( { className, ...props } , ref ) => (
28+ < SwitchPrimitives . Root
29+ className = { cn ( switchRootVariants ( ) , className ) }
30+ { ...props }
31+ ref = { ref }
32+ >
33+ < SwitchPrimitives . Thumb className = { cn ( switchThumbVariants ( ) ) } />
34+ </ SwitchPrimitives . Root >
35+ ) )
36+ Switch . displayName = SwitchPrimitives . Root . displayName
37+
38+ export { Switch }
You can’t perform that action at this time.
0 commit comments