Radio group

import { Label } from "@/registry/components/label/react/label";
import { Switch } from "@/registry/components/switch/react/switch";

export function SwitchDemo() {
    return (
        <div className="cluster">
            <Switch id="airplane-mode" />
            <Label htmlFor="airplane-mode">Airplane Mode</Label>
        </div>
    );
}

"use client";

import * as SwitchPrimitive from "@radix-ui/react-switch";
import type * as React from "react";

import cn from "clsx";

function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
    return (
        <SwitchPrimitive.Root className={cn("switch", className)} {...props}>
            <SwitchPrimitive.Thumb className={cn("switch-thumb")} />
        </SwitchPrimitive.Root>
    );
}

export { Switch };

.switch {
    padding: 0;
    cursor: pointer;
    height: var(--switch-height);
    width: var(--switch-width);
    border: var(--switch-border-width) var(--switch-border-style) var(--switch-border-color);
    border-radius: var(--radius-full);
    background-color: var(--switch-bg-unchecked);
    transition: background-color var(--duration-150) var(--ease-in-out);

    &:active {
        background-color: var(--switch-bg-unchecked-active);
    }

    &[data-state="checked"] {
        background-color: var(--switch-bg-checked);
    }
}

.switch-thumb {
    --switch-thumb-travel: calc(var(--switch-width) - var(--switch-height));
    --switch-thumb-size: calc(var(--switch-height) - var(--switch-border-width) * 2);
    display: block;
    pointer-events: none;
    height: var(--switch-thumb-size);
    width: var(--switch-thumb-size);
    border-radius: var(--radius-full);
    border: var(--switch-thumb-border);
    background-color: var(--switch-thumb-bg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-150) var(--ease-in-out);

    &[data-state="checked"] {
        transform: translateX(var(--switch-thumb-travel));
    }
}

{
  "switch": {
    "height": {
      "$type": "dimension",
      "$value": { "value": 1.25, "unit": "rem" }
    },
    "width": {
      "$type": "dimension",
      "$value": { "value": 2.25, "unit": "rem" }
    },
    "border-width": {
      "$type": "dimension",
      "$value": { "value": 2, "unit": "px" }
    },
    "border-color": {
      "$value": "{color.transparent}"
    },
    "border-style": {
      "$type": "strokeStyle",
      "$value": "solid"
    },
    "bg-checked": {
      "$value": "{color.primary}"
    },
    "bg-unchecked": {
      "$value": "{color.bg-offset-2}"
    },
    "bg-unchecked-active": {
      "$value": "{color.bg-offset-2}"
    },
    "thumb-border": {
      "$type": "border",
      "$value": "{border.transparent}"
    },
    "thumb-bg": {
      "$value": "{color.bg}"
    }
  }
}