43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
import { clsx } from 'clsx';
|
|
|
|
export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
|
|
label?: React.ReactNode;
|
|
}
|
|
|
|
export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(
|
|
({ label, className, id, ...props }, ref) => {
|
|
const generatedId = React.useId();
|
|
const switchId = id ?? (label ? `switch-${generatedId}` : undefined);
|
|
|
|
return (
|
|
<label className="inline-flex items-center gap-2 text-sm text-[var(--bl-text-primary)]">
|
|
<SwitchPrimitive.Root
|
|
ref={ref}
|
|
id={switchId}
|
|
className={clsx(
|
|
'relative h-5 w-9 rounded-full border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] transition-colors',
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bl-accent)]',
|
|
'data-[state=checked]:border-[var(--bl-accent)] data-[state=checked]:bg-[var(--bl-accent)]',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<SwitchPrimitive.Thumb
|
|
className={clsx(
|
|
'block h-4 w-4 translate-x-0.5 rounded-full bg-[var(--bl-text-primary)] transition-transform',
|
|
'data-[state=checked]:translate-x-4 data-[state=checked]:bg-[var(--bl-accent-foreground,var(--bl-bg-canvas))]'
|
|
)}
|
|
/>
|
|
</SwitchPrimitive.Root>
|
|
{label}
|
|
</label>
|
|
);
|
|
}
|
|
);
|
|
|
|
Switch.displayName = 'Switch';
|