improvements to @ui/primitives/Switch

Author: artemis-prime

pkg/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.2.1",
+  "version": "4.2.4",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

pkg/ui/primitives/switch.tsx

@@ -6,25 +6,27 @@ import { cn } from '../util'
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & 
+  { thumbClx?: string }
+>(({ className, thumbClx='', ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
       'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full ' + 
       'border-2 border-transparent shadow-sm 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',
+      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-level-3',
       className
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
-      className={
+      className={cn(
         'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ' + 
-        'ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
-      }
+        'ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+        thumbClx
+)}
     />
   </SwitchPrimitives.Root>
 ))