Brooklyn Nicholson
75e29f97ee
Add an xs size variant to the Switch primitive and use it for the provider edit submenu toggles. In appearance settings, drop the redundant selection Pills (the UI already shows the active choice), move the Color Mode and Tool Call Display segmented controls into the section header's right side (responsive: stacks under the heading on narrow widths), and shrink the segmented control.
50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { cva, type VariantProps } from 'class-variance-authority'
|
|
import { Switch as SwitchPrimitive } from 'radix-ui'
|
|
import * as React from 'react'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const switchVariants = cva(
|
|
'peer inline-flex shrink-0 items-center rounded-full border border-[color-mix(in_srgb,var(--dt-foreground)_18%,transparent)] bg-[color-mix(in_srgb,var(--dt-background)_58%,var(--dt-input))] shadow-[inset_0_0_0_0.0625rem_color-mix(in_srgb,var(--dt-foreground)_8%,transparent)] transition-colors outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary',
|
|
{
|
|
variants: {
|
|
size: {
|
|
default: 'h-5 w-9',
|
|
xs: 'h-4 w-7'
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
size: 'default'
|
|
}
|
|
}
|
|
)
|
|
|
|
const switchThumbVariants = cva(
|
|
'pointer-events-none block rounded-full bg-foreground shadow-[0_0.0625rem_0.1875rem_color-mix(in_srgb,var(--dt-background)_50%,transparent)] ring-0 transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background',
|
|
{
|
|
variants: {
|
|
size: {
|
|
default: 'size-4 data-[state=checked]:translate-x-4',
|
|
xs: 'size-3 data-[state=checked]:translate-x-3.5'
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
size: 'default'
|
|
}
|
|
}
|
|
)
|
|
|
|
function Switch({
|
|
className,
|
|
size,
|
|
...props
|
|
}: React.ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof switchVariants>) {
|
|
return (
|
|
<SwitchPrimitive.Root className={cn(switchVariants({ size }), className)} data-slot="switch" {...props}>
|
|
<SwitchPrimitive.Thumb className={cn(switchThumbVariants({ size }))} data-slot="switch-thumb" />
|
|
</SwitchPrimitive.Root>
|
|
)
|
|
}
|
|
|
|
export { Switch }
|